/* ============================================================
   Forty-Eight — a weekend almanac
   Organising idea: the weekend as a vertical ribbon of hours.
   Events sit on a central spine in chronological order; the
   gaps between them are drawn as labelled free-time, with a
   dark overnight band where Saturday becomes Sunday.
   ============================================================ */

/* ---------- Fonts (local, from the supplied pool) ---------- */
@font-face {
  font-family: 'Oswald';
  src: url('assets/oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('assets/literata.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('assets/literata.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper:      #E8E6DA;   /* cool fog paper */
  --paper-2:    #F2F0E6;   /* card surface */
  --paper-3:    #DEDCCE;   /* recessed surface */
  --ink:        #0E2A2E;   /* deep teal-black */
  --ink-2:      #25424A;
  --mute:       #586866;
  --rule:       #C2C0B2;
  --accent:     #E8A11C;   /* marigold — reserved for saved/highlight */
  --accent-d:   #B0790E;
  --night:      #0C2126;
  --night-2:    #173A3F;
  --night-text: #C9D6CF;

  --cat-Art:        #B5482E;
  --cat-Film:       #4C3A8E;
  --cat-Food:       #B8862B;
  --cat-Literature: #2F6B5E;
  --cat-Music:      #8E2C5C;
  --cat-Outdoors:   #4F7B3A;
  --cat-Walks:      #2C5C8A;

  --spine-w: 44px;
  --maxw: 1180px;

  --t: 220ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,p,ol,ul,figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: 8px; top: -44px;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; text-decoration: none;
  z-index: 100; transition: top var(--t);
}
.skip:focus { top: 8px; }

/* ---------- Masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(120% 140% at 100% 0, rgba(232,161,28,.07), transparent 55%),
    var(--paper);
}
.masthead-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) clamp(20px, 3vw, 34px);
}
.kicker {
  font-family: 'Literata', serif;
  font-style: italic;
  color: var(--mute);
  font-size: 15px;
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.wordmark {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(64px, 13vw, 156px);
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: none;
}
.wordmark .dash {
  color: var(--accent-d);
  font-weight: 500;
  letter-spacing: -.03em;
  margin: 0 -.04em;
}
.lede {
  max-width: 46ch;
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
}
.weekend-dates {
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  font-size: 14px;
}

/* ---------- Controls ---------- */
.controls {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(232,230,218,.86);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
.controls-inner, .controls {
  max-width: var(--maxw);
  margin: 0 auto;
}
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px 22px;
  align-items: end;
  padding: 12px clamp(16px, 4vw, 40px) 14px;
  margin: 0 auto;
}
.control { display: flex; flex-direction: column; gap: 5px; }
.control-label {
  font-size: 12.5px;
  color: var(--mute);
  font-style: italic;
}
#search, #filter {
  appearance: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
  border-radius: 3px 3px 0 0;
  padding: 9px 12px;
  width: 100%;
}
#search { padding-right: 32px; }
#search:focus, #filter:focus { outline: none; border-bottom-color: var(--accent); }
#filter {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.saved-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
  font-size: 15px;
}
.saved-toggle .saved-mark {
  width: 13px; height: 13px;
  border-radius: 2px;
  background: transparent;
  border: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  transition: background var(--t), border-color var(--t);
}
.saved-toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.saved-toggle[aria-pressed="true"] .saved-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.saved-count {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  opacity: .7;
  padding-left: 2px;
}
.saved-toggle[aria-pressed="true"] .saved-count { opacity: .9; }

/* ---------- Ribbon ---------- */
.ribbon-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px) 64px;
}
.ribbon {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* the continuous spine line — sits behind everything */
.ribbon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--ink);
  opacity: .9;
  z-index: 0;
}

/* generic row aligns to the three-column grid */
.day, .gap, .item-row, .tail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr var(--spine-w) 1fr;
  align-items: start;
}

/* ----- day header ----- */
.day {
  margin: 26px 0 18px;
}
.day:first-child { margin-top: 6px; }
.day .day-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.day .day-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: .005em;
  color: var(--ink);
  background: var(--paper);
  padding: 0 16px;
  position: relative;
  z-index: 2;
}
.day .day-date {
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  font-style: italic;
  font-size: 15px;
}

/* ----- gap (free time) ----- */
.gap { min-height: 34px; }
.gap .gap-label {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}
.gap .gap-dash {
  width: 2px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom, var(--ink) 0 4px, transparent 4px 9px);
  opacity: .55;
  min-height: 14px;
}
.gap .gap-text {
  font-size: 12.5px;
  color: var(--mute);
  font-style: italic;
  white-space: nowrap;
  background: var(--paper);
  padding: 1px 4px;
}

/* ----- overnight band ----- */
.gap.overnight {
  margin: 14px 0;
  display: block;
}
.gap.overnight .night-band {
  grid-column: 1 / -1;
  background:
    radial-gradient(80% 120% at 18% 30%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  border-radius: 6px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--night-text);
  position: relative;
  overflow: hidden;
}
.night-band .moon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--night-text);
  box-shadow: 9px -3px 0 0 var(--night-2) inset, 0 0 0 1px rgba(255,255,255,.04);
  position: relative;
}
.night-band .night-text { display: flex; flex-direction: column; gap: 1px; }
.night-band .night-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: 15px;
  color: #fff;
}
.night-band .night-sub {
  font-size: 13.5px;
  font-style: italic;
  opacity: .82;
}
.night-band .night-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 78% 64%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 88% 18%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 24% 55%, rgba(255,255,255,.45), transparent);
}

/* ----- event rows / cards ----- */
.item-row { margin: 10px 0; }
.item-row .node {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: 22px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--cat, var(--ink));
  box-shadow: 0 0 0 4px var(--paper);
  z-index: 2;
  transition: transform var(--t), background var(--t);
}
.item-row.is-saved .node {
  background: var(--accent);
  border-color: var(--accent-d);
}
.item-row .card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--cat, var(--ink));
  border-radius: 4px;
  padding: 16px 18px 16px 18px;
  position: relative;
  max-width: 440px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.item-row.left  .card { grid-column: 1; justify-self: end; text-align: left; margin-right: 22px; }
.item-row.right .card { grid-column: 3; justify-self: start; margin-left: 22px; }

/* left-side cards mirror so the category stripe sits on the spine side */
.item-row.left .card { border-left: 1px solid var(--rule); border-right: 4px solid var(--cat, var(--ink)); }

.item-row .card:hover { box-shadow: 0 6px 18px -10px rgba(14,42,46,.35); }
.item-row.is-saved .card { box-shadow: 0 0 0 2px var(--accent), 0 6px 18px -10px rgba(14,42,46,.35); }

.card .card-time {
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.card .card-title {
  display: block;
  margin: 4px 0 6px;
  padding: 0;
  background: none;
  border: 0;
  text-align: inherit;
  cursor: pointer;
  width: 100%;
  font-family: 'Literata', serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.18;
  color: var(--ink);
  border-bottom: 1px dotted transparent;
  transition: color var(--t), border-color var(--t);
}
.card .card-title:hover { color: var(--cat, var(--ink)); border-bottom-color: currentColor; }
.card .card-summary {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 10px;
}
.card .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--mute);
}
.card .card-meta .price.free { color: var(--cat, var(--ink-2)); font-weight: 600; }
.card .card-cat-tag {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--cat, var(--ink));
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 8px;
  background: var(--paper);
}
/* tail cap */
.tail { margin-top: 26px; }
.tail .tail-label {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mute);
  font-style: italic;
  font-size: 14px;
  background: var(--paper);
  padding: 0 12px;
  position: relative; z-index: 2;
}

/* ---------- Empty state ---------- */
.empty-state {
  max-width: 460px;
  margin: 48px auto;
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
}
.empty-title {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}
.empty-body { color: var(--mute); margin-bottom: 18px; }
.empty-reset {
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
}

/* ---------- Colophon ---------- */
.colophon {
  border-top: 1px solid var(--rule);
  color: var(--mute);
  font-size: 13px;
  font-style: italic;
}
.colophon p {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 40px);
}

/* ---------- Detail drawer ---------- */
.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,42,46,.34);
  z-index: 40;
  opacity: 0;
  transition: opacity var(--t);
}
.detail-backdrop.show { opacity: 1; }
.detail[hidden] { display: none; }
.detail {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(520px, 100vw);
  background: var(--paper-2);
  z-index: 50;
  transform: translateX(100%);
  transition: transform var(--t);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  box-shadow: -20px 0 50px -30px rgba(14,42,46,.5);
}
.detail.show { transform: translateX(0); }
.detail-bar {
  position: sticky; top: 0;
  background: var(--paper-2);
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
  z-index: 2;
}
.detail-close {
  cursor: pointer;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  transition: background var(--t), color var(--t);
}
.detail-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.detail-close span { font-size: 18px; line-height: 0; vertical-align: -1px; margin-right: 4px; }

.detail-body { padding: 22px 26px 48px; }
.detail .detail-cat {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--cat, var(--ink));
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px 7px;
  margin-bottom: 12px;
  background: var(--paper);
}
.detail h2#detail-title {
  font-family: 'Literata', serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.1;
  margin-bottom: 14px;
}
.detail .detail-when {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.detail .detail-where { color: var(--mute); font-size: 15px; margin-bottom: 18px; }
.detail dl.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.detail dl.facts dt {
  font-size: 12.5px;
  color: var(--mute);
  font-style: italic;
  align-self: center;
}
.detail dl.facts dd { margin: 0; font-size: 15px; }
.detail dl.facts dd.free { color: var(--cat, var(--ink)); font-weight: 600; }
.detail .detail-body-text { margin: 18px 0 24px; max-width: 62ch; }
.detail .detail-body-text p { margin-bottom: 12px; line-height: 1.6; }
.detail .detail-access {
  max-width: 62ch;
  padding: 14px 16px;
  background: var(--paper-3);
  border-left: 3px solid var(--cat, var(--ink));
  border-radius: 2px;
  font-size: 14.5px;
  margin-bottom: 24px;
}
.detail .detail-access .access-label {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--mute);
  margin-bottom: 3px;
}
.detail .save-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
  transition: background var(--t), color var(--t), border-color var(--t);
  width: 100%;
  justify-content: center;
}
.detail .save-item .save-mark {
  width: 14px; height: 14px;
  border: 2px solid var(--ink);
  background: transparent;
  transform: rotate(45deg);
  transition: background var(--t), border-color var(--t);
}
.detail .save-item[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.detail .save-item[aria-pressed="true"] .save-mark {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .controls {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 16px 12px;
  }
  .control-saved { justify-self: start; }
  .saved-toggle { width: auto; }

  /* spine moves to the left edge */
  .ribbon { padding-left: 0; }
  .ribbon::before { left: 14px; transform: none; }
  .day, .gap, .item-row, .tail {
    grid-template-columns: 28px 1fr;
    column-gap: 0;
  }
  .day .day-label {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px;
  }
  .day .day-name { font-size: 26px; padding: 0; }
  .gap .gap-label { grid-column: 1 / -1; display: grid; grid-template-columns: 28px 1fr; align-items: center; }
  .gap .gap-dash { width: 2px; height: 18px; min-height: 18px; justify-self: center; }
  .gap .gap-text { writing-mode: horizontal-tb; transform: none; font-size: 11px; margin-left: 6px; }
  .item-row .node { grid-column: 1; margin-top: 16px; width: 16px; height: 16px; border-width: 3px; box-shadow: 0 0 0 3px var(--paper); }
  .item-row .card { grid-column: 2 !important; margin: 0 0 0 14px !important; max-width: none; border-left: 4px solid var(--cat, var(--ink)) !important; border-right: 1px solid var(--rule) !important; text-align: left !important; }
  .tail .tail-label { grid-column: 2; text-align: left; padding: 0 0 0 14px; }

  .gap.overnight .night-band { grid-column: 1 / -1; margin-left: 0; }
  .night-band { padding: 16px 16px; }

  .detail { width: 100vw; border-left: 0; }
  .detail-body { padding: 18px 18px 40px; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .item-row .card { max-width: 360px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}