/* ============================================================================
   Cottonwood Convergence 2026 — site.css
   Loads after kit/tokens.css + kit/kit.css. Palette is measured, not designed:
   the flyer supplies the ground (plum), the frame (rust) and the title gold;
   Erin Hanson's "Cottonwood Flame" supplies every other pigment. The daylight
   ramp that paints the schedule lives in js/schedule.js (a self-contained
   widget palette, recorded in BUILD-BRIEF.md).
   ========================================================================== */

:root {
  /* ── from the flyer ─────────────────────────────────────────────────────── */
  --plum:          #5C2E38;   /* flyer ground                                   */
  --plum-deep:     #421A24;   /* flyer ground in shadow                         */
  --plum-night:    #2B1017;   /* the panel glass, before transparency           */
  --frame:         #A7432B;   /* the rust ogee frame                            */
  --title-gold:    #FCCE5A;   /* title gradient, left                           */
  --title-apricot: #FB9751;   /* title gradient, right                          */
  --cream:         #F9E8D9;   /* flyer subtitle                                 */

  /* ── from the painting ──────────────────────────────────────────────────── */
  --cadmium:     #EDC72C;     /* the lit canopy                                 */
  --gold:        #EAA236;
  --orange:      #E57129;
  --vermilion:   #D2452A;
  --madder:      #C2405E;
  --orchid:      #A37BB3;     /* shadow in the grass                            */
  --violet:      #8376BC;     /* shadow under the trees                         */
  --ultramarine: #4E64CD;
  --cobalt:      #4A92F6;     /* the sky                                        */
  --sky:         #9CCBF5;     /* the sky, lifted for text on plum (6.5:1)       */
  --sage-leaf:   #A0A969;     /* the grass tufts                                */

  /* ── kit slots, filled (CONVENTIONS §1) ─────────────────────────────────── */
  --paper:     var(--plum);
  --paper-2:   var(--plum-deep);
  --ink:       var(--cream);                    /* 9.3:1 on plum                */
  --ink-soft:  rgba(249, 232, 217, 0.86);       /* 7.3:1 on plum — body floor   */
  --ink-faint: rgba(249, 232, 217, 0.55);       /* 4.0:1 — decorative only      */
  --rule:      rgba(249, 232, 217, 0.16);
  --rust:  var(--frame);
  --terra: var(--orange);
  --ochre: var(--gold);
  --wheat: var(--title-gold);
  --olive: var(--sage-leaf);
  --sage:  #7FACA7;
  --slate: var(--sky);                          /* the one cool note            */
  --cool:  var(--sky);
  --accent: var(--title-gold);                  /* 7.4:1 on plum                */
  --link:   var(--sky);
  --focus:  var(--sky);

  --serif:   "Merriweather", Georgia, "Times New Roman", serif;
  --display: "Marcellus", "Optima", Candara, Georgia, serif;
  --label:   "Marcellus", "Optima", Candara, Georgia, serif;

  --measure-wide: 1320px;
  --shadow-glaze: 0 30px 60px -30px rgba(20, 6, 10, 0.65), 0 2px 8px rgba(20, 6, 10, 0.25);
  --glass-plum:   rgba(66, 26, 36, 0.84);
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 29'%3E%3Cpath d='M12 1.5C13.2 4.5 15.6 7.2 18.4 9.8C21 12.3 23.2 15 22.6 17.6C22 20 19.4 20.8 16.8 20.4C15 20.1 13.2 20.6 12 21.6C10.8 20.6 9 20.1 7.2 20.4C4.6 20.8 2 20 1.4 17.6C.8 15 3 12.3 5.6 9.8C8.4 7.2 10.8 4.5 12 1.5Z'/%3E%3Cpath d='M12 21C12.3 24 13 26.2 14.6 28.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--plum); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-size: 17px;
  line-height: 1.7;
  background: var(--plum);
  color: var(--ink);
  overflow-x: clip;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--title-gold); color: var(--plum-deep);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill);
  font-family: var(--display);
}
.skip:focus { left: 16px; }
/* the skip links' targets take focus (tabindex="-1") without a ring round the whole section */
.weekend:focus, #main:focus { outline: none; }

/* the recurring glyph: a cottonwood leaf (Populus — deltoid blade, long stem) */
.leaf-glyph, .strands li::before, .asks li::before, .hero__where::before {
  content: "";
  display: inline-block;
  width: 0.78em; height: 0.94em;
  background: currentColor;
  -webkit-mask: var(--leaf) center / contain no-repeat;
          mask: var(--leaf) center / contain no-repeat;
}

/* ── nav: the floating pill (web CONVENTIONS §4, pattern 1) ───────────────── */
.pill {
  position: fixed; top: 16px; right: 16px; z-index: 50;
  display: flex; gap: 2px; padding: 5px;
  border-radius: var(--radius-pill);
  background: rgba(66, 26, 36, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(249, 232, 217, 0.18);
  box-shadow: var(--shadow-glaze);
}
.pill a {
  color: var(--cream);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) ease;
}
.pill a:hover { background: rgba(249, 232, 217, 0.12); }

/* ============================================================================
   HERO — the 8×5 flyer, translated: plum field, rust frame, the painting in a
   rounded window, the title on a translucent plum plate.
   ========================================================================== */
.hero {
  --hp: clamp(20px, 3.4vw, 52px);                 /* the frame margin           */
  --hr: clamp(18px, 2.6vw, 40px);                 /* painting window radius     */
  position: relative;
  min-height: 100svh;
  padding: var(--hp);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  background: var(--plum);
  isolation: isolate;
}
.hero > * { grid-column: 1; }                      /* go + credit share row 2 */
/* the frame and the painting place against the hero's own box, not its grid column
   (an absolutely placed grid item with a column takes the column as its box) */
.hero > .hero__frame, .hero > .hero__painting { grid-column: auto; }
.hero__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;                              /* the outer line's top and bottom points run off the edge */
  pointer-events: none;
  z-index: 1;
}
.hero__frame path {
  fill: none;
  stroke: var(--frame);
  stroke-linejoin: round;
}
.hero__frame .is-outer { opacity: 0.72; }
.hero__frame .is-inner { opacity: 0.55; }
.hero__painting {
  position: absolute;
  inset: var(--hp);
  margin: 0;
  border-radius: var(--hr);
  overflow: hidden;
  box-shadow: 0 0 0 calc(var(--hp) * 0.34) var(--plum),        /* the floor; the drawn frame replaces it */
              0 0 0 calc(var(--hp) * 0.34 + 1px) rgba(167, 67, 43, 0.6);
  z-index: 0;
}
.hero.has-frame .hero__painting { box-shadow: none; }
.hero__painting picture, .hero__painting img { width: 100%; height: 100%; }
.hero__painting img { object-fit: cover; object-position: 50% 30%; }

.hero__plate {
  position: relative; z-index: 2;
  align-self: start; justify-self: center;
  margin-top: clamp(24px, 7vh, 88px);
  max-width: min(100%, 1040px);
  padding: clamp(16px, 2.2vw, 32px) clamp(22px, 3.8vw, 60px) clamp(16px, 2vw, 28px);
  text-align: center;
  background: rgba(92, 46, 56, 0.86);            /* cream on this: ≥ 6.9:1 over the painting's brightest yellow */
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
          backdrop-filter: blur(8px) saturate(1.15);
  border: clamp(3px, 0.38vw, 6px) solid var(--frame);
  border-radius: clamp(16px, 2.2vw, 34px);
  box-shadow: var(--shadow-glaze);
}
.hero__presents, .hero__sub, .hero__when { margin: 0; font-family: var(--display); color: var(--cream); }
.hero__presents { font-size: clamp(1rem, 1.7vw, 1.55rem); text-wrap: balance; }
/* The flyer's own title treatment: gold → apricot across the letters. A recorded
   departure from the anti-kit's "gradient text" (BUILD-BRIEF.md). */
.hero__title {
  margin: 0.06em 0 0.1em;
  font-size: clamp(2.5rem, 7.6vw, 7.4rem);
  line-height: 0.98;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--title-gold);
  background: linear-gradient(90deg, var(--title-gold) 0%, var(--title-apricot) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__title span { display: block; }
.hero__sub { font-size: clamp(1.3rem, 2.5vw, 2.2rem); line-height: 1.2; }
.hero__when {
  margin-top: 0.55em;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: 0.03em;
}
.hero__where { white-space: nowrap; margin-left: 0.5em; }
.hero__where::before { margin-right: 0.55em; color: var(--title-gold); vertical-align: -0.05em; }

.hero__go, .hero__credit { position: relative; z-index: 2; }
.hero__go {
  grid-row: 2;
  justify-self: center; align-self: end;
  margin: 0 0 clamp(14px, 2.4vw, 30px);
  padding: 0.7em 1.35em;
  font-family: var(--display); font-size: 1.08rem; letter-spacing: 0.02em;
  color: var(--cream);
  background: var(--glass-plum);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1.5px solid var(--frame);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) ease, color var(--dur) ease;
}
.hero__go:hover { border-color: var(--title-gold); color: var(--title-gold); }
.hero__credit {
  grid-row: 2;
  justify-self: end; align-self: end;
  margin: 0 clamp(14px, 2.4vw, 32px) clamp(14px, 2.4vw, 30px) 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-style: italic; font-size: 14px; color: var(--cream);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(20, 6, 10, 0.7), 0 0 18px rgba(20, 6, 10, 0.6);
}
.hero__credit:hover span { text-decoration: underline; text-underline-offset: 3px; }
.hero__credit img {
  width: clamp(140px, 15vw, 220px); height: auto;
  filter: drop-shadow(0 1px 3px rgba(20, 6, 10, 0.75));
}

/* the one orchestrated moment: the painting develops and the plate settles (the frame is still) */
@media (prefers-reduced-motion: no-preference) {
  .hero__painting img { animation: develop 2.4s var(--ease) both; }
  .hero__plate { animation: settle 1.4s var(--ease) 0.5s both; }
}
@keyframes develop {
  from { filter: saturate(0.3) blur(12px); transform: scale(1.06); }
  to   { filter: none; transform: none; }
}
@keyframes settle {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: none; }
}

/* ============================================================================
   INVITATION — rail + prose
   ========================================================================== */
.invite {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vh, 72px) clamp(32px, 5vw, 88px);
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(80px, 13vh, 150px) var(--gutter) clamp(56px, 9vh, 110px);
}
/* left: the follow line, then the painting whole, bleeding into the margin.
   right: the honor statement and its rule, then the prose. */
.invite__rail { display: contents; }
.honor {
  grid-column: 2; grid-row: 1;
  max-width: 30ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  text-wrap: balance;
  line-height: 1.25;
  color: var(--title-gold);
}
/* the flyer's gold rule with a bead at its centre */
.honor::after {
  content: "";
  display: block;
  width: var(--honor-w, 100%);                   /* its longest line, measured by js/hero.js */
  height: 9px;
  margin: 0.9em 0 0;
  /* the flyer's rule, the statement's width, the bead at its centre */
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 4px, transparent 4.5px),
    linear-gradient(var(--gold), var(--gold)) 0 50% / calc(50% - 8px) 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 50% / calc(50% - 8px) 1.5px no-repeat;
}
/* beside the prose: the follow line, then the painting whole, riding along as you read.
   --bleed: how far it reaches into the page margin (none once the margin is only the gutter) */
.invite__side {
  --bleed: min(180px, max(0px, (100vw - var(--measure)) / 2));
  grid-column: 1; grid-row: 1 / span 2; align-self: stretch;
}
/* the follow line spans the painting's width, centred over it */
.invite__side .honor__follow {
  width: calc(100% + var(--bleed));
  max-width: none;
  margin-left: calc(-1 * var(--bleed));
  padding: 0 4%;
  text-align: center;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--cream);
  text-wrap: balance;
}
.invite__art {
  position: sticky; top: 72px;
  width: calc(100% + var(--bleed));
  margin: clamp(24px, 3.5vh, 40px) 0 0 calc(-1 * var(--bleed));
}
.invite__art a { display: block; }
.invite__art picture, .invite__art a img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(14px, 1.6vw, 24px);
}
.invite__art a img {
  box-shadow: 0 0 0 7px var(--plum), 0 0 0 8px rgba(167, 67, 43, 0.6), var(--shadow-glaze);
  transition: transform var(--dur) var(--ease);
}
.invite__art a:hover img { transform: translateY(-2px); }
.invite__art figcaption {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 14px;
  font-style: italic; font-size: 0.85rem; color: var(--ink-soft);
}
.invite__art figcaption img { width: 130px; height: auto; }
.honor__follow {
  margin: 0.3em 0 0;
  max-width: 30ch;
  font-style: italic;
  color: var(--ink-soft);
}
.invite__prose { grid-column: 2; grid-row: 2; }
.honor::after { margin-bottom: 0.2em; }
.invite__prose h2 {
  margin: 0 0 1.1em;
  max-width: 32ch;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.4;
  color: var(--cream);
}
.invite__prose p { margin: 0 0 1.15em; max-width: 62ch; color: var(--ink-soft); }

.strands {
  list-style: none;
  margin: 2.2em 0 0; padding: 1.6em 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.3em;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.42rem);
  line-height: 1.45;
  color: var(--cream);
}
.strands li { display: inline-flex; align-items: baseline; gap: 0.5em; }
.strands li::before { flex: none; }
/* the list walks the painting's light, sky to shadow */
.strands li:nth-child(1)::before { color: var(--cobalt); }
.strands li:nth-child(2)::before { color: var(--sky); }
.strands li:nth-child(3)::before { color: var(--cadmium); }
.strands li:nth-child(4)::before { color: var(--gold); }
.strands li:nth-child(5)::before { color: var(--orange); }
.strands li:nth-child(6)::before { color: var(--vermilion); }
.strands li:nth-child(7)::before { color: var(--madder); }
.strands li:nth-child(8)::before { color: var(--orchid); }
.strands li:nth-child(9)::before { color: var(--violet); }

/* ============================================================================
   THE WEEKEND — the signature. Ground: the painting dissolved to colour.
   Full width; a day is meant to fit in one view (≤ 90vh) on a desktop.
   ========================================================================== */
.weekend {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(48px, 8vh, 104px) var(--gutter) clamp(72px, 12vh, 140px);
}
.weekend::before {
  content: "";
  position: absolute; inset: -120px;
  background: url("../assets/field.png") center / 100% 100%;
  filter: blur(56px) saturate(1.2);
  opacity: 0.62;
  z-index: -2;
}
.weekend::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--plum) 0%, rgba(92, 46, 56, 0.42) 16%,
    rgba(92, 46, 56, 0.42) 84%, var(--plum) 100%);
  z-index: -1;
}
.weekend__head {
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 24px;
}
.weekend__head h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
}

.days {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
/* the glide between days (js/schedule.js): the height animates, so clip what's ahead of it */
.days.is-gliding { overflow: clip; }
.days > .day--ghost { position: absolute; margin: 0; pointer-events: none; }
.spine-h { position: relative; z-index: 1; }   /* the spines slide over the old day's stand-in */

/* the no-JS floor (written by tools/build-schedule.py; JS replaces it) */
.floor {
  flex: 1;
  max-width: var(--measure);
  padding: clamp(24px, 3vw, 44px);
  border-radius: 12px;
  background: rgba(43, 16, 23, 0.7);
}
.floor h3 { margin: 1.4em 0 0.4em; font-size: 1.8rem; color: var(--title-gold); }
.floor h3:first-child { margin-top: 0; }
.floor ol { margin: 0; padding-left: 1.2em; }
.floor li { margin: 0.4em 0; color: var(--ink-soft); }
.floor strong { color: var(--cream); margin-right: 0.4em; }

/* ── day spines: translucent brushstrokes of that day's light ─────────────── */
.spine-h {
  flex: 0 0 clamp(62px, 5.2vw, 88px);
  display: flex;
  margin: 0;
  font-size: inherit;
}
.spine {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 420px;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--cream);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.spine__paint {
  position: absolute; inset: 0;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0.72;
  transition: opacity var(--dur) ease;
}
.spine__paint svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spine__paint svg.is-h { display: none; }
.spine:hover .spine__paint,
.spine:focus-visible .spine__paint,
.spine[aria-expanded="true"] .spine__paint { opacity: 1; }

.spine__label {
  position: sticky;
  top: 84px;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.9em;
  margin: 14px 0;
  padding: 1.1em 0.5em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--glass-plum);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1.5px solid var(--frame);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) ease;
}
.spine[aria-expanded="true"] .spine__label { border-color: var(--title-gold); }
.spine__day {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.spine__date { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.spine:focus-visible { outline: none; }
.spine:focus-visible .spine__label { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── the open day: the river on the left; the day and its open spaces on the right ── */
.day {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  padding: clamp(20px, 2.4vw, 36px) clamp(18px, 2.4vw, 40px) clamp(22px, 2.6vw, 40px);
  border-radius: 12px;
  background: rgba(43, 16, 23, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
          backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(249, 232, 217, 0.12);
  box-shadow: var(--shadow-glaze);
}
.day:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.day[hidden] { display: none; }
.river { grid-column: 1; grid-row: 1; }
.day__side { grid-column: 2; grid-row: 1; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.day__title { margin: 0; font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1; color: var(--cream); }
.day__date {
  margin: 0.5em 0 0;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em;
  color: var(--title-gold);
}
.day__span { margin: 0.2em 0 0; font-size: 0.95rem; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }

/* mid widths: the day and its open spaces ride above the river, so the river keeps both banks */
@media (min-width: 821px) and (max-width: 1180px) {
  .day:not([hidden]) { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .day__side { grid-column: 1; grid-row: 1; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .river { grid-row: 2; }
  /* the open spaces flow as one row: name, hours · name, hours */
  .day__open { padding: 10px 16px 12px; }
  .day__open ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
  .day__open li { display: block; }
  .day__open b { margin-right: 0.45em; }
  .day__title { font-size: clamp(2rem, 3.4vw, 2.6rem); }
}

.day__open {
  padding: 14px 18px 16px;
  border-radius: 10px;
  background: rgba(249, 232, 217, 0.06);
  border: 1px solid rgba(249, 232, 217, 0.12);
}
.day__open h4 { margin: 0 0 0.55em; font-size: 1.05rem; color: var(--title-gold); }
.day__open ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; }
.day__open li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.day__open b { font-weight: 700; color: var(--cream); }
.day__open .t { font-variant-numeric: lining-nums tabular-nums; }

/* ── the river: three strands that meet at every gathering ────────────────── */
.river {
  --river-w: clamp(56px, 6.6vw, 92px);            /* the braid's gutter (one bank)  */
  position: relative;
}
.river__braid {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.river__braid .strand { fill: none; stroke-linecap: round; mix-blend-mode: screen; }
.river__braid .glow { fill: none; stroke-linecap: round; opacity: 0.28; }
.river__braid .strand, .river__braid .glow { stroke-dasharray: 1; }   /* pathLength="1": whole line, drawable */
.river__stops { list-style: none; margin: 0; padding: 0 0 0 var(--river-w); }
.river--zig .river__stops { padding: 0; }

.stop { position: relative; padding: 8px 0 16px; }
.river--zig .stop { position: absolute; padding: 0; }
.river--zig .stop[data-bank="l"] { text-align: right; }
.stop__leaf {
  position: absolute;
  width: 36px; height: 36px;
  overflow: visible;
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}
.stop--major .stop__leaf { transform: scale(1.25); }
.stop__time {
  margin: 0 0 1px;
  font-weight: 700; font-size: 0.88rem; line-height: 1.6;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--title-gold);
  white-space: nowrap;
}
/* a gathering: the whole block is the button that opens its sheet */
.stop__item {
  display: block;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 3px 8px 5px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.stop__item:hover { background: rgba(249, 232, 217, 0.08); }
.stop__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.stop__item + .stop__item { margin-top: 4px; }
.stop__title {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.45vw, 1.42rem);
  line-height: 1.2;
  color: var(--cream);
}
.stop__item:hover .stop__title { text-decoration: underline; text-decoration-color: rgba(249, 232, 217, 0.4); text-underline-offset: 4px; }
.stop__sub { display: block; margin-top: 1px; font-style: italic; font-size: 0.9rem; line-height: 1.4; color: var(--title-gold); }
.stop__who { display: block; margin-top: 1px; font-size: 0.9rem; line-height: 1.4; color: var(--cream); }
.stop__meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 10px;
  margin-top: 3px;
  font-size: 0.82rem; line-height: 1.45;
  color: var(--ink-soft);
}
.river--zig .stop[data-bank="l"] .stop__meta { justify-content: flex-end; }
.tag {
  display: inline-block;
  padding: 0 0.6em;
  border: 1px solid var(--light, rgba(249, 232, 217, 0.4));
  border-radius: var(--radius-pill);
  font-family: var(--label); font-size: 0.76rem; letter-spacing: 0.05em; line-height: 1.55;
  color: var(--cream);
  background: rgba(249, 232, 217, 0.06);
}
.stop--past { opacity: 0.5; }
.stop__now {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0 0.7em;
  border-radius: var(--radius-pill);
  background: var(--cream); color: var(--plum-deep);
  font-family: var(--display); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.03em;
}

.river__now {
  position: absolute; left: 0; right: 0;
  height: 0;
  border-top: 1px dashed rgba(249, 232, 217, 0.5);
  pointer-events: none;
}
.river__now span {
  position: absolute; left: 0; top: -12px;
  padding: 1px 10px;
  border-radius: var(--radius-pill);
  background: var(--cream); color: var(--plum-deep);
  font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .river.is-flowing .strand, .river.is-flowing .glow { animation: draw 1.6s var(--ease-io) both; }
  .river.is-flowing .stop__leaf { animation: leaf-in 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 0.2s); }
}
@keyframes draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes leaf-in { from { opacity: 0; } to { opacity: 1; } }

/* ── the sheet: one gathering, everything the tracker says about it ───────── */
html { scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }
.sheet {
  width: min(540px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(249, 232, 217, 0.16);
  border-radius: 16px;
  background: rgba(43, 16, 23, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
          backdrop-filter: blur(18px) saturate(1.1);
  color: var(--ink);
  box-shadow: var(--shadow-glaze);
}
.sheet::backdrop { background: rgba(20, 6, 10, 0.55); }
.sheet__inner {
  position: relative;
  padding: 24px clamp(20px, 4vw, 32px) 26px;
  border-top: 4px solid var(--light, var(--frame));
}
.sheet__close {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(249, 232, 217, 0.08);
  color: var(--cream);
  cursor: pointer;
}
.sheet__close:hover { background: rgba(249, 232, 217, 0.16); }
.sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet__when {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 12px;
  margin: 0 48px 8px 0;
  font-weight: 700; font-size: 0.92rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--title-gold);
}
.sheet__when .stop__now { margin-left: 0; }
.sheet__title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.15; color: var(--cream); }
h3.sheet__title { font-size: 1.35rem; }
.sheet__sub { margin: 0.25em 0 0; font-style: italic; font-size: 1.05rem; color: var(--title-gold); }
.sheet__who { margin: 0.3em 0 0; font-size: 1rem; color: var(--cream); }
.sheet__who--tba { color: var(--ink-soft); font-style: italic; }
.sheet__line { margin: 0.7em 0 0; max-width: 52ch; color: var(--ink-soft); }
.sheet__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 1em 0 0; padding: 0; }
.sheet__where { margin: 1em 0 0; font-size: 0.95rem; }
.sheet__who a,
.sheet__where a { color: var(--sky); text-decoration: underline; text-decoration-color: rgba(156, 203, 245, 0.4); text-underline-offset: 3px; }
.sheet__where span { display: block; color: var(--ink-soft); font-size: 0.9rem; }
.sheet__part { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 0.32s var(--ease) both; }
  .sheet[open]::backdrop { animation: leaf-in 0.32s ease both; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   PLACES
   ========================================================================== */
.places {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(80px, 13vh, 150px) var(--gutter) clamp(56px, 9vh, 110px);
}
.places h2 { margin: 0; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.05; }
.places__list {
  list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 5vw, 72px);
}
.place { padding: 22px 0 24px; border-top: 1px solid var(--rule); }
.place h3 { margin: 0; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.15; color: var(--cream); }
.place p { margin: 0.4em 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.place .place__addr { margin-top: 0.2em; font-weight: 700; font-size: 0.9rem; color: var(--title-gold); }
.place--home {
  grid-row: span 3;
  align-self: start;
  padding: clamp(24px, 3vw, 40px);
  border: 0;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(234, 162, 54, 0.22), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(210, 69, 42, 0.2), transparent 65%),
    rgba(43, 16, 23, 0.35);
}
.place--home h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.place__when { list-style: none; margin: 0.9em 0 0; padding: 0; display: grid; gap: 0.3em; font-size: 0.9rem; color: var(--ink-soft); }
.place__when b { color: var(--cream); font-weight: 700; margin-right: 0.35em; }
.place__what { display: block; font-style: italic; }

/* ============================================================================
   TAKE PART — the one CTA that means it
   ========================================================================== */
.take-part {
  position: relative;
  padding: clamp(80px, 14vh, 160px) var(--gutter);
  background:
    radial-gradient(70% 60% at 88% 12%, rgba(74, 146, 246, 0.22), transparent 62%),
    radial-gradient(60% 55% at 6% 94%, rgba(229, 113, 41, 0.2), transparent 60%),
    radial-gradient(40% 40% at 60% 70%, rgba(131, 118, 188, 0.14), transparent 70%),
    var(--plum);
}
/* the flyer's golden leaf, laid over the section as a glaze */
.take-part { overflow: clip; isolation: isolate; }
.take-part::after {
  content: "";
  position: absolute;
  right: 4vw; top: 50%;
  width: min(36vw, 520px); aspect-ratio: 24 / 29;
  transform: translateY(-50%) rotate(16deg);
  background: linear-gradient(160deg, var(--title-gold) 10%, var(--title-apricot) 60%, var(--vermilion) 100%);
  -webkit-mask: var(--leaf) center / contain no-repeat;
          mask: var(--leaf) center / contain no-repeat;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
.take-part__inner { max-width: var(--measure); margin: 0 auto; }
.take-part h2 { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; }
.take-part__lead { margin: 0.7em 0 0; max-width: 40ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--cream); }
.asks { list-style: none; margin: 1.8em 0 1.6em; padding: 0; max-width: 62ch; }
.asks li {
  display: flex; gap: 0.9em; align-items: baseline;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.asks li::before { flex: none; color: var(--gold); }
.take-part__inner > p { max-width: 58ch; color: var(--ink-soft); }
.cta {
  display: inline-block;
  margin-top: 0.8em;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--title-gold), var(--title-apricot));
  color: var(--plum-deep);                       /* 10:1 on gold, 6.9:1 on apricot */
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px -14px rgba(252, 206, 90, 0.55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(252, 206, 90, 0.7); }
.cta:focus-visible { outline-color: var(--cream); }
.take-part__addr { margin-top: 1em; font-size: 0.92rem; overflow-wrap: anywhere; }
.take-part__lead + .asks { margin-top: 0.6em; }
.take-part__flyers { margin-top: 1.4em; font-family: var(--display); font-size: 1.05rem; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.foot {
  padding: clamp(64px, 10vh, 120px) var(--gutter) 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--plum) 0%, var(--plum-deep) 100%);
}
.foot__closing {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--title-gold);
}
.foot__committee { max-width: 60ch; margin: 1.6em auto 0; font-size: 0.95rem; color: var(--ink-soft); }
.foot__partners {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 24px 44px;
  margin: 44px 0 36px;
}
.foot__tlc { display: inline-flex; align-items: center; gap: 18px; color: var(--cream); font-family: var(--display); font-size: 1.6rem; }
/* the ring on a cream disc: its watercolour sinks into the plum without one */
.foot__tlc picture { display: flex; padding: 8px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px rgba(249, 232, 217, 0.25); }
.foot__tlc img { width: 116px; height: 116px; }
.foot__wcmrc { width: 360px; max-width: 100%; height: auto; border-radius: 4px; }
/* the sponsors: a row of small tiles under the two presenters, each logo on its own
   ground (as on the flyer), never as tall as the presenters */
.foot__sponsors { margin: 0 auto 40px; max-width: 1180px; }
.foot__label { margin: 0 0 14px; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.sponsors {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 12px;
}
.sponsors img { display: block; width: auto; height: 84px; max-width: 222px; object-fit: contain; border-radius: 4px; }
.foot__art { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.foot__art a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(249, 232, 217, 0.35); }
.foot__art a:hover { color: var(--cream); text-decoration-color: currentColor; }
.foot__credit { margin-top: 0.6em; font-size: 0.8rem; }

/* ============================================================================
   ≤ 820px — the spines lie down and become bands above their day
   ========================================================================== */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .invite { grid-template-columns: 1fr; row-gap: 0; }
  .honor, .invite__side, .invite__prose { grid-column: 1; grid-row: auto; }
  .invite__art { display: none; }                 /* the hero already shows the painting */
  .invite__side .honor__follow { width: auto; max-width: 34ch; padding: 0; margin: 1.2em auto 0; text-align: center; font-size: 1rem; }
  /* one column: the statement and its follow line centre, the rule under the middle */
  .honor { margin-inline: auto; text-align: center; }
  .honor::after { margin-inline: auto; }
  .invite__prose { margin-top: 2.2em; }
  .days { flex-direction: column; gap: 8px; }
  .spine-h { flex: none; }
  .spine { min-height: 0; height: 68px; display: flex; align-items: center; justify-content: center; padding-left: 12px; }
  .spine__paint svg.is-v { display: none; }
  .spine__paint svg.is-h { display: block; }
  .spine__label {
    position: relative; top: auto;
    writing-mode: horizontal-tb; transform: none;
    flex-direction: row;
    margin: 0; padding: 0.5em 1.1em;
  }
  .spine__day { font-size: 1.05rem; }
  .day { padding: 22px 16px 28px; }
  /* one column: the day's head, its river, then what's open alongside */
  .day:not([hidden]) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .day__side { display: contents; }
  .day__head { grid-row: 1; }
  .river { grid-row: 2; }
  .day__open { grid-column: 1; grid-row: 3; }
  .stop { padding: 10px 0 16px; }
  .places__list { grid-template-columns: 1fr; }
  .take-part::after { width: 70vw; right: -18vw; top: 30%; opacity: 0.12; }
  .place--home { grid-row: auto; margin-bottom: 12px; }
}

@media (max-width: 560px) {
  /* the sheet rises from the bottom edge */
  .sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; border-bottom: 0; max-height: 88vh; }
  .pill { top: 10px; right: 10px; }
  .pill a { padding: 6px 10px; font-size: 14px; }
  .hero__plate { margin-top: 52px; padding-left: 14px; padding-right: 14px; }
  .hero__title { font-size: clamp(1.9rem, 9.2vw, 2.6rem); }
  .hero__painting img { object-position: 50% 12%; }
  .hero__where { display: block; margin: 0.2em 0 0; }
  .hero__credit span { font-size: 12px; }
  /* phones: three even lines where the width allows; never a short line mid-statement */
  .honor { font-size: clamp(1.3rem, 6.1vw, 1.6rem); }
}
@media (max-width: 360px) {
  .pill a { padding: 6px 8px; }                   /* four links clear the left edge at 320 */
}
@media (max-width: 430px) {
  .honor { text-wrap: pretty; }
  /* the button rides higher, centred; the credit sits centred below it */
  .hero { grid-template-rows: 1fr auto auto; }
  .hero__go { grid-row: 2; margin: 0 0 clamp(40px, 9vh, 96px); }
  .hero__credit { grid-row: 3; justify-self: center; align-items: center; margin: 0 0 14px; }
}

/* ============================================================================
   ?review — marks the words nobody at TLC wrote (js/review.js, CONTENT-REVIEW.md)
   ========================================================================== */
.review [data-src="ai"] { outline: 2px dashed #FF6FD8; outline-offset: 3px; }
.review [data-src="renamed"] { outline: 2px dashed #7CE0FF; outline-offset: 2px; cursor: help; }
.review-legend {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  display: grid; gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(20, 6, 10, 0.92);
  color: var(--cream);
  font-size: 0.8rem; line-height: 1.4;
  box-shadow: var(--shadow-glaze);
}
.review-legend span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 2px dashed transparent; }
.review-legend__ai::before { border-top-color: #FF6FD8 !important; }
.review-legend__renamed::before { border-top-color: #7CE0FF !important; }

/* ============================================================================
   art/ — the painting whole, and the two flyers to download
   ========================================================================== */
.art {
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(48px, 8vh, 96px);
  text-align: center;
}
.art__home {
  display: inline-block;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.04em;
  color: var(--title-gold);
  text-decoration: none;
}
.art__home:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) { .art { padding-top: 84px; } }   /* the home link starts below the pill */
.art__title { margin: 0.2em 0 0.6em; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.05; }
.art__painting { margin: 0 auto; width: fit-content; max-width: 100%; }
/* A definite height, so the box is sized before the painting arrives (no layout shift), and
   it heeds the column's width too, through the painting's ratio (2000 / 1340): on a phone the
   width binds, and a height-only cap letterboxed the painting inside a ring round empty
   space. Browsers without container units keep the first line. */
.art { container-type: inline-size; }
.art__painting picture, .art__painting > picture img {
  display: block;
  height: min(calc(100svh - 190px), 1100px);
  height: min(calc(100svh - 190px), 1100px, calc(100cqw * 1.4925));
  width: auto; max-width: 100%;
  margin: 0 auto;
  border-radius: clamp(16px, 2vw, 32px);
  object-fit: contain;
}
.art__painting > picture img { box-shadow: 0 0 0 10px var(--plum), 0 0 0 11px rgba(167, 67, 43, 0.6), var(--shadow-glaze); }
.art__painting figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 4px 12px;
  margin-top: 22px;
  color: var(--cream);
}
.art__painting cite { font-family: var(--display); font-style: normal; font-size: 1.3rem; }
.art__painting figcaption span { font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.art__painting figcaption img { width: 180px; height: auto; align-self: center; }

.flyers { padding: 0 var(--gutter) clamp(64px, 10vh, 120px); max-width: var(--measure-wide); margin: 0 auto; }
.flyers h2 { margin: 0 0 0.6em; font-size: clamp(2rem, 3.6vw, 3rem); text-align: center; }
.flyers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.flyer { display: grid; gap: 12px; justify-items: start; }
.flyer__img { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-glaze); }
.flyer__img img { display: block; width: 100%; height: auto; transition: transform var(--dur) var(--ease); }
.flyer__img:hover img { transform: scale(1.015); }
.flyer__dl {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 0.5em 1.1em;
  border: 1.5px solid var(--frame);
  border-radius: var(--radius-pill);
  background: var(--glass-plum);
  color: var(--cream);
  font-family: var(--display); font-size: 1rem;
  text-decoration: none;
  transition: border-color var(--dur) ease;
}
.flyer__dl:hover { border-color: var(--title-gold); }
.flyer__dl span { font-family: var(--serif); font-size: 0.8rem; color: var(--ink-soft); }
.foot--short { padding-top: 32px; }
.foot--short .foot__partners { margin-top: 0; }

/* the two hover lifts (the welcome painting, a flyer) hold still under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .invite__art a:hover img, .flyer__img:hover img { transform: none; }
}

/* ============================================================================
   people/ — speakers & performers. One size for everyone: a 4:5 portrait in an
   arched window with the painting's frame. The asymmetry is a stagger: the
   middle column rides lower, so the names zigzag down like the gatherings on
   the river's two banks. A card opens its bio in the sheet (js/people.js);
   without JS the <details> opens in place.
   ========================================================================== */
.people {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(48px, 8vh, 96px);
}
.people__head { text-align: center; margin-bottom: clamp(16px, 3vh, 40px); }
@media (max-width: 820px) { .people { padding-top: 84px; } }   /* the home link starts below the pill */

/* each person carries a pigment from the painting: their sheet's edge, the initials tile, the hover ring */
.person:nth-child(5n+1) { --glaze: var(--gold); }
.person:nth-child(5n+2) { --glaze: var(--vermilion); }
.person:nth-child(5n+3) { --glaze: var(--cobalt); }
.person:nth-child(5n+4) { --glaze: var(--madder); }
.person:nth-child(5n+5) { --glaze: var(--sage-leaf); }

.people__list {
  --drop: clamp(48px, 7vw, 112px);
  list-style: none;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 var(--drop);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 76px) clamp(24px, 4.5vw, 64px);
}
.person:nth-child(3n+2) { translate: 0 var(--drop); }
.person summary {
  display: grid; justify-items: center;
  text-align: center;
  list-style: none;
  cursor: pointer;
}
.person summary::-webkit-details-marker { display: none; }
.person summary:focus-visible { outline-offset: 8px; border-radius: 12px; }

.person__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 50% 50% 14px 14px / 32% 32% 14px 14px;      /* the arched window */
  background: var(--plum-deep);
  box-shadow: 0 0 0 6px var(--plum), 0 0 0 7px rgba(167, 67, 43, 0.6), var(--shadow-glaze);
  transition: box-shadow var(--dur) ease;
  container-type: inline-size;                                   /* the initials scale with the tile */
}
.person__photo picture, .person__photo img { display: block; width: 100%; height: 100%; }
.person__photo img { object-fit: cover; transition: transform var(--dur) var(--ease); }
.person summary:hover .person__photo { box-shadow: 0 0 0 6px var(--plum), 0 0 0 7px var(--glaze), var(--shadow-glaze); }
.person summary:hover .person__photo img { transform: scale(1.03); }
/* no portrait yet: initials on a glaze of the person's pigment */
.person__photo--initials {
  display: grid; place-items: center;
  font-family: var(--display); letter-spacing: 0.04em;
  color: var(--cream);
  background:
    radial-gradient(110% 80% at 30% 18%, color-mix(in srgb, var(--glaze) 62%, transparent), transparent 72%),
    radial-gradient(90% 70% at 78% 92%, rgba(131, 118, 188, 0.45), transparent 70%),
    var(--plum-deep);
}
.person__photo--initials span { font-size: 30cqw; line-height: 1; }   /* cqw: the tile is the container */

.person__name {
  margin-top: 22px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.2;
  color: var(--cream);
}
.person summary:hover .person__name { text-decoration: underline; text-decoration-color: rgba(249, 232, 217, 0.4); text-underline-offset: 4px; }
.person__card { margin-top: 4px; font-style: italic; font-size: 0.9rem; line-height: 1.45; color: var(--title-gold); }

/* the bio: in the sheet, or opened in place without JS */
.person__more { margin-top: 18px; text-align: left; }
.person__offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.person__offers li { display: grid; gap: 1px; }
.person__kind { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--title-gold); }
.person__offer { font-family: var(--display); font-size: 1.12rem; line-height: 1.3; color: var(--cream); }
.person__with { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.person__with a { color: var(--sky); text-decoration: underline; text-decoration-color: rgba(156, 203, 245, 0.4); text-underline-offset: 3px; }
.person__bio { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.person__bio p { margin: 0; max-width: 64ch; }
.person__bio p + p { margin-top: 0.9em; }

.sheet--person { width: min(660px, calc(100vw - 32px)); }
.sheet__person {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: end;
  gap: 22px;
  margin: 4px 44px 6px 4px;
}
.sheet__person .person__photo { box-shadow: 0 0 0 4px rgba(43, 16, 23, 1), 0 0 0 5px var(--light, rgba(167, 67, 43, 0.6)); }
.sheet--person .person__more { margin-top: 22px; }

@media (max-width: 820px) {
  .people__list { --drop: clamp(36px, 10vw, 72px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 4vw, 32px); }
  .person:nth-child(3n+2) { translate: none; }
  .person:nth-child(2n) { translate: 0 var(--drop); }
  .person__photo { box-shadow: 0 0 0 4px var(--plum), 0 0 0 5px rgba(167, 67, 43, 0.6), var(--shadow-glaze); }
  .person summary:hover .person__photo { box-shadow: 0 0 0 4px var(--plum), 0 0 0 5px var(--glaze), var(--shadow-glaze); }
  .person__name { margin-top: 16px; }
  .person__card { font-size: 0.82rem; }
}
@media (max-width: 560px) {
  .sheet--person { width: 100%; }                 /* a bottom sheet, like the schedule's */
  .sheet__person { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .person summary:hover .person__photo img { transform: none; }
}

/* ============================================================================
   404 — served with a real 404 status (wrangler.toml not_found_handling)
   ========================================================================== */
.lost-page { min-height: 100svh; display: flex; flex-direction: column; }   /* the footer meets the bottom edge */
.lost-page main { flex: 1; display: flex; }
.lost { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lost .art__title { margin-bottom: 0.5em; }
.lost__go {
  padding: 0.7em 1.35em;
  font-family: var(--display); font-size: 1.08rem; letter-spacing: 0.02em;
  color: var(--cream);
  background: var(--glass-plum);
  border: 1.5px solid var(--frame);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: border-color var(--dur) ease, color var(--dur) ease;
}
.lost__go:hover { border-color: var(--title-gold); color: var(--title-gold); }