/* The POG Club — "Pure, made ours"
   Black and white, neutral greys, square corners, thin black lines,
   the full-stop dot as the one signature. Quiet motion.
   The rules behind every choice here are in DESIGN.md. */

:root {
  --white: #ffffff;
  --grey: #f0f0ee;
  --black: #0b0b0b;
  --muted: #5c5c5c;
  --soft-rule: #d6d6d3;
  --band-text: #cfcfcf;
  --band-label: #9a9a9a;
  --choice-rule: #c9c9c6;
  --error: #9b1c1c;

  --serif: "Tiro Devanagari Hindi", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* six sizes, one job each (DESIGN.md §2) */
  --fs-display: clamp(36px, 4.2vw, 60px);
  --fs-heading: clamp(24px, 2.2vw, 30px);
  --fs-name: clamp(20px, 1.6vw, 22px);
  --fs-large: clamp(17px, 1.35vw, 19px);
  --fs-body: 16px;
  --fs-label: 12px;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --col-gap: 32px;
  --section: clamp(64px, 8vw, 104px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* ---------- dark mode: the same two-tone system, inverted to warm charcoal and cream ---------- */
:root[data-theme="dark"] {
  --white: #1f1e1d;
  --grey: #2a2927;
  --black: #f5f4ef;
  --muted: #a8a7a1;
  --soft-rule: #3b3a37;
  --choice-rule: #4a4945;
  --error: #f19a9a;
  color-scheme: dark;
}
/* the black band stays a deeper black, so it still reads as the moment to stop */
:root[data-theme="dark"] .band { --white: #f5f4ef; --black: #121211; border-block: 1px solid #3b3a37; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.band :focus-visible { outline-color: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--black); color: var(--white); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 12px; top: 12px; }

.in { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- the dot ---------- */
.dot { display: inline-block; width: 0.18em; height: 0.18em; border-radius: 50%; background: currentColor; margin-left: 0.06em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--black);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header .in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; }
.wordmark { font-family: var(--serif); font-size: 21px; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: clamp(16px, 3vw, 28px); margin: 0; padding: 0; font-size: var(--fs-body); }
.site-nav a { text-decoration: none; transition: opacity .2s; }
.site-nav a[aria-current="page"] { font-weight: 600; }
@media (hover: hover) { .site-nav ul:hover a:not(:hover) { opacity: .45; } }

/* theme switch: a pill with the dot inside; filled cream when dark is on */
.theme-toggle {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 44px; margin: -10px -4px -10px 0; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle .track {
  display: flex; align-items: center; width: 44px; height: 24px; padding: 0 3px;
  border: 2px solid var(--black); border-radius: 999px;
  background: transparent; transition: background .3s var(--ease);
}
.theme-toggle .knob {
  display: block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--black);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.theme-toggle[aria-checked="true"] .track { background: var(--black); }
.theme-toggle[aria-checked="true"] .knob { transform: translateX(20px); background: var(--white); }
@media (hover: hover) { .theme-toggle:hover .track { box-shadow: 0 0 0 3px var(--soft-rule); } }

/* small phones: tighten the header so wordmark, nav and switch share one line */
@media (max-width: 400px) {
  .site-header .in { gap: 12px; }
  .wordmark { font-size: 18px; }
  .site-nav ul { gap: 12px; font-size: 14px; }
  .theme-toggle { width: 44px; margin-right: -6px; }
  .theme-toggle .track { width: 40px; height: 22px; }
  .theme-toggle .knob { width: 12px; height: 12px; }
  .theme-toggle[aria-checked="true"] .knob { transform: translateX(18px); }
}
@media (max-width: 340px) {
  .site-header .in { gap: 10px; }
  .wordmark { font-size: 16px; }
  .site-nav ul { gap: 10px; font-size: 13px; }
}

/* ---------- type roles ---------- */
.display { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-heading); line-height: 1.22; letter-spacing: -0.005em; margin: 0; text-wrap: pretty; }
.h3, .name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-name); line-height: 1.25; margin: 0; }
.lede, .large { font-size: var(--fs-large); line-height: 1.6; margin: 0; text-wrap: pretty; }
.eyebrow, .label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; margin: 0; }
.muted { color: var(--muted); }
.prose { display: grid; gap: 16px; max-width: 64ch; }
.prose p { font-size: var(--fs-large); line-height: 1.6; text-wrap: pretty; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--fs-body)/1 var(--sans);
  background: var(--black); color: var(--white);
  border: 1px solid var(--black); border-radius: 2px;
  padding: 16px 22px; text-decoration: none; cursor: pointer;
  transition: gap .3s var(--ease);
}
.btn i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.btn:hover { gap: 16px; }
.btn.light { background: var(--white); color: var(--black); border-color: var(--white); }
.link { font-weight: 600; font-size: var(--fs-body); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- sections and the reading line (DESIGN.md §1) ---------- */
.section { padding-block: var(--section); }
.section + .section, .hero + .section { border-top: 1px solid var(--black); }

.row { display: grid; gap: 12px; }
.row > .text { display: grid; gap: 16px; align-content: start; min-width: 0; max-width: 64ch; }
.row > .text > .h2 + * { margin-top: 4px; }
/* section title: what the section is about, readable at a glance (DESIGN.md §2) */
.row > .title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-name); line-height: 1.25; margin: 0; }
.band .row > .title { color: var(--white); }
@media (min-width: 900px) {
  .row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .row > .label, .row > .title { grid-column: 1 / 4; }
  .row > .label { padding-top: 0.5em; }
  .row > .title { padding-top: 0.2em; position: sticky; top: 96px; align-self: start; }
  .row > .text { grid-column: 4 / 11; }
}

/* ---------- the story: one line through the page, a dot at each stop (DESIGN.md §1) ---------- */
/* no full-width divider under the hero: the vertical line carries the eye on (DESIGN.md §3) */
/* each stop gives half the gap, so two stops together are 60px apart (36px on a phone) (DESIGN.md §4) */
.story .stop > .in { position: relative; padding-block: clamp(18px, 2.25vw, 30px); }
.story .stop:first-child > .in { padding-top: clamp(64px, 8vw, 104px); }
.story .stop:last-child > .in { padding-bottom: clamp(64px, 8vw, 104px); }
.story .stop > .in::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--gutter); width: 1px; background: var(--black); }
.story .row > .title { position: relative; padding-left: 28px; padding-top: 0.2em; }
.story .row > .title::before {
  content: ""; position: absolute; left: -4.5px; top: calc(0.825em - 5px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--black); border: 1.5px solid var(--black); box-sizing: border-box;
  transition: background .5s var(--ease);
}
@media (max-width: 899px) { .story .row > .text { padding-left: 28px; } }

/* desktop: each title, with its dot, stays in view until its section ends */
@media (min-width: 900px) { .story .row > .title { position: sticky; top: calc(var(--header-h, 59px) + 40px); align-self: start; } }

/* ---------- hero ---------- */
/* the hero is exactly the first screen: everything above the fold, nothing from the next section */
.hero { position: relative; min-height: calc(100svh - var(--header-h, 59px)); padding-block: clamp(40px, 7vh, 96px) max(clamp(40px, 7vh, 96px), 96px); display: grid; gap: 28px; align-content: center; }

/* scroll cue: a plain down arrow, centred at the bottom of the hero, moving gently */
.scroll-cue { position: absolute; left: calc(50% - 22px); bottom: clamp(20px, 4vh, 40px); display: grid; place-items: center; width: 44px; height: 44px; color: var(--black); }
.scroll-cue svg { animation: cue 2.2s ease-in-out infinite; }
.scroll-cue:hover svg { animation-play-state: paused; }
@keyframes cue { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
html { scroll-behavior: smooth; }
#story { scroll-margin-top: var(--header-h, 59px); }
.hero .side { display: grid; gap: 28px; align-content: end; min-width: 0; }
@media (min-width: 900px) {
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .hero .display { grid-column: 1 / 8; }
  .hero .side { grid-column: 8 / 13; }
}
.page-hero { padding-block: var(--section) 0; }
/* the page headline and the first section are one section gap apart (DESIGN.md §4) */
.page-hero + .section { padding-top: clamp(36px, 4.5vw, 60px); }
.page-hero .in { display: grid; gap: 20px; }
.page-hero .lede { max-width: 56ch; }
/* the not-found page is short, so it fills the screen and the footer stays at the bottom */
.not-found { min-height: calc(100svh - var(--header-h, 59px) - 110px); }

/* ---------- black band: the two moments to stop (DESIGN.md §3) ---------- */
.band { background: var(--black); color: var(--white); padding-block: var(--section); }
.band .label, .band .eyebrow { color: var(--band-label); }
.band .large, .band .lede { color: var(--band-text); }
.band .actions { margin-top: 12px; }
/* older pages: a single closing line in the band */
.band .quote { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.06; margin: 0; }
.band .after { font-size: var(--fs-large); color: var(--band-text); max-width: 48ch; }
.join-end { display: grid; gap: 20px; }

/* ---------- parts: separate ideas, one after another ---------- */
.parts { display: grid; gap: 0; }
.parts > * { padding-block: 18px; border-top: 1px solid var(--soft-rule); }
.parts > :first-child { border-top: 0; padding-top: 0; }

/* ---------- named list: the name is what you scan ---------- */
.named { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--black); }
.named li { display: grid; gap: 4px; padding-block: 18px; border-top: 1px solid var(--black); }
.named li p { color: var(--muted); }
/* on desktop the first item lines up with the section title beside it, so the list drops its top rule;
   on a phone the title sits above, and the rule keeps title and list apart */
@media (min-width: 900px) { .row > .text > .named:first-child > li:first-child { border-top: 0; padding-top: 0; } }
@media (min-width: 600px) {
  .named li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: baseline; }
}

/* the motto's three parts: same list as "built around", but the paragraphs are main reading, so they stay black */
.named.motto-list li p { color: var(--black); }
@media (min-width: 600px) { .named.motto-list li { grid-template-columns: 6.5rem minmax(0, 1fr); } }

/* ---------- vision: pillars, dot list, diagrams ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(28px, 4vw, 48px); }
.pillar { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--black); padding-top: 18px; min-width: 0; }
.pillar p { color: var(--muted); }

.dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dots li { display: grid; grid-template-columns: 10px 1fr; gap: 16px; padding-block: 16px; border-top: 1px solid var(--soft-rule); min-width: 0; }
.dots li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--black); margin-top: 0.55em; }
.dots b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-name); line-height: 1.25; }
.dots span { color: var(--muted); }

.flow { display: flex; align-items: flex-start; gap: 16px; }
.flow .step { flex: 0 1 auto; display: grid; justify-items: center; gap: 12px; text-align: center; min-width: 0; max-width: 17ch; }
.flow .step b { width: 12px; height: 12px; border-radius: 50%; background: var(--black); display: block; }
.flow .step.open b { background: var(--white); border: 1.5px solid var(--black); }
.flow .step span { font-size: 15px; line-height: 1.35; }
.flow .step small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.flow .line { flex: 1 1 40px; height: 1px; background: var(--black); margin-top: 6px; transform-origin: left center; }
.figure { display: grid; gap: 20px; margin: 0; }
.figure figcaption { font-size: 14px; color: var(--muted); max-width: 60ch; }
@media (max-width: 680px) {
  .flow { flex-direction: column; gap: 0; }
  .flow .step { grid-template-columns: 12px 1fr; justify-items: start; text-align: left; align-items: start; gap: 16px; max-width: none; }
  .flow .step b { margin-top: 5px; }
  .flow .line { flex: none; width: 1px; height: 28px; margin: 6px 0 6px 5.5px; transform-origin: center top; }
}

/* vision long read: chapter title in the label column, text in the text column */
.chapter { display: grid; gap: 16px; }
.chapter .body { display: grid; gap: 28px; min-width: 0; max-width: 64ch; }
@media (min-width: 900px) {
  .chapter { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .chapter > .name { grid-column: 1 / 4; position: sticky; top: 96px; align-self: start; }
  .chapter > .body { grid-column: 4 / 11; }
}

/* ---------- our work (DESIGN.md §7) ---------- */
/* Home: the names in "built around" link to their part of Our work; they stay serif, a thin underline shows on hover */
.named .name a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease); }
.named .name a:hover, .named .name a:focus-visible { text-decoration-color: currentColor; }
/* a link to a section of Our work lands with the section title just below the sticky header */
.work .stop { scroll-margin-top: var(--header-h, 59px); }

/* lists on Our work: one item after another, facts label, name, one line, actions */
.list-label { color: var(--muted); margin-top: 12px; }
.named.stack li { display: grid; gap: 8px; }
@media (min-width: 600px) { .named.stack li { grid-template-columns: none; } }
.named.stack .facts { color: var(--muted); }
.named.stack .actions { margin-top: 8px; }
.sample-tag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px dashed currentColor; letter-spacing: .1em; }

/* while the lists load (a split second), the page waits instead of jumping */
.work-loading #main { opacity: 0; }

/* "All gatherings →": where a shortened list continues on its full page */
.more { margin-top: 20px; }
.photo-more { margin-top: 4px; }
/* the page name above a headline can lead back up (Gatherings → Our work) */
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero .facts { color: var(--muted); }
/* the gatherings page: jump to a year */
.year-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* the materials page: show one type at a time, same look as the choices on the Join form */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 400 var(--fs-body)/1 var(--sans); color: var(--black); background: none; padding: 10px 16px; border: 1px solid var(--choice-rule); border-radius: 2px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.chip:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
/* a list with a single item that holds only photos: no lines around it */
.named.bare, .named.bare li { border-color: transparent; }
.named.bare li { padding-top: 0; }
.motion .named.bare li::before, .motion .named.bare::after { display: none; }

/* gathering photos: black and white, square corners, 4:3 */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (max-width: 599px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.photo { display: block; padding: 0; border: 0; background: var(--grey); aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s var(--ease); }
@media (hover: hover) { .photo:hover img { transform: scale(1.03); } }
.photo:focus-visible { outline-offset: 2px; }

/* conversations: 16:9 black and white thumbnail with a round play mark, text beside it on wider screens */
@media (min-width: 600px) { .named.stack li.video { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: start; } }
.named.stack li.video .about { display: grid; gap: 8px; align-content: start; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey); }
.thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s var(--ease); }
@media (hover: hover) { a.thumb:hover img { transform: scale(1.03); } }
.thumb .play { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); }
.thumb .play i { width: 0; height: 0; margin-left: 3px; border-left: 11px solid var(--black); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.motion .named.stack .thumb img { scale: 1.14; transition: scale 1.4s var(--ease), transform .6s var(--ease); transition-delay: calc(.2s + var(--i, 0) * 90ms), 0s; }
.motion .named.stack.built .thumb img { scale: 1; }

/* the photo viewer: one photo large on black, step or swipe through */
.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0b0b; color: #f5f4ef; }
.viewer::backdrop { background: #0b0b0b; }
.viewer[open] { display: grid; place-items: center; }
.viewer figure { margin: 0; display: grid; gap: 14px; justify-items: center; padding: 64px var(--gutter); }
.viewer img { max-width: min(100%, 1400px); max-height: calc(100vh - 160px); object-fit: contain; filter: grayscale(1); }
.viewer figcaption { color: #9a9a9a; }
.viewer button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.viewer .viewer-close { top: 12px; right: 12px; }
.viewer .viewer-step { top: calc(50% - 24px); }
.viewer .prev { left: 8px; }
.viewer .next { right: 8px; }
.viewer.single .viewer-step { display: none; }
.viewer :focus-visible { outline-color: #f5f4ef; }
.motion .viewer[open] img { animation: settle .5s var(--ease); }
.motion .viewer[open] { animation: rise .35s var(--ease); }

/* motion: as each photo arrives it settles from slightly larger into its frame (DESIGN.md §6) */
.motion .named.stack .photo img { scale: 1.14; transition: scale 1.4s var(--ease), transform .6s var(--ease); transition-delay: calc(.2s + var(--i, 0) * 90ms), 0s; }
.motion .named.stack.built .photo img { scale: 1; }

/* ---------- join form ---------- */
.form { display: grid; gap: 28px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-size: var(--fs-body); font-weight: 600; padding: 0; }
.field .hint { font-size: var(--fs-body); color: var(--muted); margin: 0; }
/* what the details are used for, just above Send: grey because it supports the form (DESIGN.md §3) */
.form > .privacy { font-size: var(--fs-body); color: var(--muted); margin: 0; max-width: 56ch; }
.field input[type="text"], .field input[type="email"], .field textarea {
  font: 400 var(--fs-body)/1.4 var(--sans); color: var(--black);
  background: var(--white);
  border: 0; border-bottom: 1px solid var(--black); border-radius: 0;
  padding: 10px 0; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); padding: 10px 16px; border: 1px solid var(--choice-rule); border-radius: 2px; transition: background .2s, color .2s, border-color .2s; }
.choice span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .2s; }
.choice input:checked + span { background: var(--black); color: var(--white); border-color: var(--black); }
.choice input:checked + span::before { opacity: 1; }
.choice input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.error { color: var(--error); font-size: var(--fs-body); margin: 0; }
.status { font-size: var(--fs-body); margin: 0; min-height: 1.5em; }
.thanks { display: grid; gap: 16px; max-width: 46ch; }
/* spam check field: kept off screen, out of the tab order and hidden from screen readers */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--black); padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-body); }
.site-footer .in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: baseline; }
.site-footer ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.site-footer a { text-decoration: none; }
.site-footer .motto { color: var(--muted); }

/* ---------- motion (DESIGN.md §6) ----------
   Motion explains the page; it never decorates it. Everything follows the scroll or answers
   the visitor, uses one easing curve, and only moves, fades or clips, so layout never shifts.
   All of it sits behind .motion, which main.js adds only when the device allows motion. */
:root { --dim: color-mix(in srgb, var(--black) 22%, var(--white)); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* starts below its masked box (the box has a little room for descenders), so nothing peeks out */
@keyframes line-up { from { transform: translateY(calc(100% + .2em)); } to { transform: none; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes settle { from { transform: scale(.94); } to { transform: none; } }
@keyframes draw { from { transform: scale(0, 1); } to { transform: none; } }
@keyframes drawV { from { transform: scale(1, 0); } to { transform: none; } }

/* 1. opening: the headline rises line by line from behind its own edge, then the rest follows */
.display .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.display .ln-in { display: block; }
.motion .hero .display:not(.split), .motion .page-hero .display:not(.split) { opacity: 0; }
.motion .display.split:not(.settled) .ln-in { animation: line-up 1s var(--ease) both; animation-delay: calc(.1s + var(--i, 0) * .12s); }
.motion .hero .side > * { animation: rise .9s var(--ease) both; animation-delay: .45s; }
.motion .hero .side > :nth-child(2) { animation-delay: .58s; }
.motion .page-hero .in > :not(.display) { animation: rise .9s var(--ease) both; }
.motion .page-hero .in > .lede { animation-delay: .35s; }

/* as you scroll away, the hero fades and moves back (--hero-p: 0 at the top, 1 once it has left) */
.motion .hero > .display, .motion .hero > .side {
  transform: translate3d(0, calc(var(--hero-p, 0) * -56px), 0) scale(calc(1 - var(--hero-p, 0) * .04));
  opacity: calc(1 - var(--hero-p, 0) * 1.25);
  transform-origin: 0 100%;
  will-change: transform, opacity;
}
/* the scroll cue arrives last and leaves after the first scroll */
.motion .scroll-cue { animation: rise .9s var(--ease) .9s backwards; transition: opacity .5s var(--ease); }
.motion.scrolled .scroll-cue { opacity: 0; pointer-events: none; }

/* 2. the line draws itself as you read (--line-p per stop), and each dot fills when the line reaches it */
.motion .story .stop > .in::before { transform: scaleY(var(--line-p, 0)); transform-origin: 50% 0; }
.motion .story .row > .title::before { background: var(--white); }
.motion .story .row.reached > .title::before { background: var(--black); animation: pop .6s var(--ease); }

/* 3. the key sentence fills from grey to black, word by word, as you read through it */
.motion .story .text > .h2 .w { color: var(--dim); transition: color .4s linear; }
.motion .story .text > .h2 .w.lit { color: var(--black); }

/* 4. lists build: the thin lines draw left to right and the items rise in turn */
.motion .named { position: relative; border-bottom-color: transparent; }
.motion .named li { position: relative; border-top-color: transparent; }
.motion .named li::before, .motion .named::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--black);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease);
}
.motion .named li::before { top: -1px; transition-delay: calc(var(--i, 0) * 90ms); }
.motion .named::after { bottom: -1px; transition-delay: calc(var(--n, 4) * 90ms); }
.motion .named li > * { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.12s + var(--i, 0) * 90ms); }
.motion .named.built li::before, .motion .named.built::after { transform: none; }
.motion .named.built li > * { opacity: 1; transform: none; }
@media (min-width: 900px) { .motion .row > .text > .named:first-child > li:first-child::before { display: none; } }

/* 5. the band opens from the width of the content to the full screen as it arrives (--band-x shrinks to 0) */
.motion .band { clip-path: inset(0 var(--band-x, 0px)); will-change: clip-path; }

/* rows still rise as they come into view */
.motion .reveal.waiting { opacity: 0; transform: translateY(14px); }
.motion .reveal.seen { animation: rise .9s var(--ease) both; }

/* 6. the form: fields arrive in order, a line draws under the field you're in,
   a chosen option settles into place, and the thank-you rises in */
.motion .form:not(.arrived) > * { opacity: 0; }
.motion .form.arrived > * { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.motion .field input[type="text"], .motion .field input[type="email"], .motion .field textarea {
  background-image: linear-gradient(var(--black), var(--black));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  background-origin: border-box; background-clip: border-box;
  transition: background-size .6s var(--ease);
}
.motion .field input:focus, .motion .field textarea:focus { border-bottom-width: 1px; padding-bottom: 10px; background-size: 100% 2px; }
.motion .choice span { transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); }
.motion .choice:active span { transform: scale(.97); }
.motion .choice input:checked + span { animation: settle .45s var(--ease); }
.motion .error:not([hidden]) { animation: rise .4s var(--ease) both; }
.motion .thanks:not([hidden]) > * { animation: rise .8s var(--ease) both; }
.motion .thanks:not([hidden]) > :nth-child(2) { animation-delay: .12s; }

/* 7. between pages: the content cross-fades while the header stays still */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .3s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* 8. dark mode spreads in a circle from the switch (the circle itself is drawn in main.js) */
:root.theme-vt .site-header { view-transition-name: none; }
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* less motion: everything appears complete and still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion .reveal.waiting { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}