*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
img, video { max-width: 100%; display: block; }

:root {
  --bg: #231B26;
  --text: #E6E1EA;
  --accent: #D9982E;     /* volunteer CTA button background only */
  --tone-light: #E6E1EA; /* fixed copies of the palette: unlike --bg / --text they are never animated by js/main.js */
  --tone-dark: #231B26;
  --on-accent: var(--tone-dark); /* fixed dark label for the CTA: --bg itself turns light once the About journey has played */
  --glow-duration: 3s;     /* total time for the light to sweep all lines */
  --glow-fade: 0.8s;       /* how long each letter takes to brighten */
  --glow-dim: color-mix(in srgb, var(--text) 15%, var(--bg));     /* starting colour of each letter */
  /* Intro timings (js/main.js CFG overrides these; keep both in step) */
  --t-logo-fade: 1s;
  --t-move: 1s;
  --t-photo: 0.8s;
  --t-cue: 1s;
  --hero-text-glow: 0 0 22px color-mix(in srgb, var(--text) 60%, transparent), 0 0 56px color-mix(in srgb, var(--text) 30%, transparent), 0 2px 12px color-mix(in srgb, var(--bg) 55%, transparent); /* glow on the hero text */
  --deep: #0C090E;   /* near-black the hero starts from (a hint of the dusk hue) */
  --lift: 1;         /* 0 = hero at its darkest, 1 = normal --bg; set from scroll by js/main.js */
  --hero-bg: color-mix(in srgb, var(--bg) calc(var(--lift) * 100%), var(--deep));
  --hero-dim: 0.55; /* collage darkness: 0 = none, 1 = black */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

body {
  background: var(--hero-bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.1; }

/* Hero */
.hero { position: relative; height: 100vh; height: 100svh; }


/* Hero image: one full-bleed photo. The role label anchors (.hero-anchor) sit on top of it, invisible. */
.hero-media {
  height: 100%;
  background: var(--hero-bg);
  position: relative;
}
.glow { pointer-events: none; } /* let the mouse reach the photos behind the text */
/* Role label shown near the ring position the mouse points at (see js/main.js) */
.hero-label {
  position: absolute; z-index: 1; margin: 0; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.2; color: var(--text);
  text-shadow: 0 0 24px color-mix(in srgb, var(--text) 35%, transparent), 0 2px 14px color-mix(in srgb, var(--bg) 80%, transparent);
  opacity: 0; transition: opacity .3s ease;
}
.hero-label.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-label { transition: none; } }
.hero-media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--hero-bg) calc(var(--hero-dim) * 100%), transparent); pointer-events: none; }
.hero-tile { position: absolute; inset: 0; overflow: hidden; margin: 0; padding: 0; border: 0; }
.hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pm, 50% 50%); }
@media (min-width: 900px) {
  .hero-tile img { object-position: var(--pd, 50% 50%); }
}
/* Label anchors: invisible, one per role, placed in a ring by js/main.js (left / top / size are set there). They exist for keyboard focus; the mouse is handled on the whole hero. */
.hero-anchors { position: absolute; inset: 0; pointer-events: none; }
.hero-anchor { position: absolute; transform: translate(-50%, -50%); }
.hero-anchor:focus-visible { outline: 1px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: 4px; }
.hero-label-sub { display: block; margin-top: .3em; font-size: .6em; opacity: .8; } /* creative identity (second line), if a role has one */
/* Layering (back to front): photo > dark overlay > anchors > text > logo */
.hero-media { z-index: 0; }

/* Logo: final state = small, at the top of the hero */
.hero-logo {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 6.5rem;
  height: auto;
  transform: translate(-50%, 0);
  z-index: 2;
}
@media (min-width: 900px) { .hero-logo { top: 2rem; width: 8rem; } }

/* Text: centred in the first screen; letters brighten left to right (see js/main.js) */
.glow {
  position: absolute;
  top: 50svh;
  left: 0; right: 0;
  transform: translateY(-50%);
  padding: 0 1.5rem;
  text-align: center;
  z-index: 1;
}
@media (min-width: 900px) { .glow { top: 50%; } }
.glow-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 4.5rem);
  line-height: 1.5;
  color: var(--text);
  text-shadow: var(--hero-text-glow);
}
.glow-line + .glow-line { margin-top: 1rem; }
.glow-line .word { display: inline-block; white-space: nowrap; }
.glow-ready .char {
  color: var(--glow-dim);
  text-shadow: none;
  transition: color var(--glow-fade) ease, text-shadow var(--glow-fade) ease;
  transition-delay: calc(var(--i) / var(--n) * (var(--glow-duration) - var(--glow-fade)));
}
.glow-ready.is-lit .char { color: var(--text); text-shadow: var(--hero-text-glow); }

/* Intro sequence. States are classes on <html>, added in order by js/main.js:
   intro > s-logo > s-move > s-text > s-collage > s-cue (cue = scrolling unlocked) */
.intro .hero-logo {
  top: 50svh; width: 70vw; opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--t-logo-fade) ease, top var(--t-move) cubic-bezier(.65, 0, .35, 1), width var(--t-move) cubic-bezier(.65, 0, .35, 1), transform var(--t-move) cubic-bezier(.65, 0, .35, 1);
}
.intro.s-logo .hero-logo { opacity: 1; }
.intro.s-move .hero-logo { top: 1.5rem; width: 6.5rem; transform: translate(-50%, 0); }
@media (min-width: 900px) {
  .intro .hero-logo { top: 50%; width: 35vw; }
  .intro.s-move .hero-logo { top: 2rem; width: 8rem; }
}
.intro .glow { opacity: 0; transition: opacity .6s ease; }
.intro.s-text .glow { opacity: 1; }
.intro .hero-tile { opacity: 0; transform: scale(.96); }
.intro.s-collage .hero-tile {
  opacity: 1; transform: none;
  transition: opacity var(--t-photo) ease var(--d, 0s), transform var(--t-photo) ease var(--d, 0s);
}
/* Scroll lock during the intro (also enforced in js/main.js) */
.intro { scrollbar-gutter: stable; } /* no layout jump when the lock lifts */
.scroll-locked, .scroll-locked body { overflow: hidden; }

/* Context: short text section between the hero and the About journey (same column, label and statement styles as About) */
.context { padding: 8rem 0 0; }
.context-column { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.context-label { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; line-height: 1.6; margin-bottom: 3rem; }
.context-statement { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.25; margin-bottom: 3rem; }
.context-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.context-text { text-align: left; }
.context-photo { margin: 0; }
.context-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .context-column { padding: 0 1rem; } }
@media (min-width: 768px) {
  .context-body { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 3.5rem; align-items: center; }
}
.context-text + .context-text { margin-top: 1.5rem; }

/* About: the poem's title, then a horizontal "journey" (pinned and driven by js/main.js; without JS or with reduced motion the track is just a sideways-scrolling strip) */
.about { padding: 8rem 0 0; }
.about-column { max-width: 64rem; margin: 0 auto .5rem; padding: 0 1.5rem; font-family: var(--serif); }
.about-statement { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.25; }
.about-subtitle { margin-top: 1.25rem; font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.4; opacity: .85; }
.about-intro { max-width: 60ch; margin-top: 2rem; font-family: var(--sans); font-size: .9rem; line-height: 1.7; opacity: .7; }
/* Photos: the track has a fixed height, so each block type sets a photo HEIGHT (in --vu = 1% of the screen height) and the width follows the photo's real aspect ratio (--ar on the figure), never wider than 86vw. Block types: .is-hero (one big landscape), .is-portrait, .is-square, and .is-stack (a column of two landscapes sharing one width). */
.journey { --vu: 1vh; }
@supports (height: 100svh) { .journey { --vu: 1svh; } }
.journey-pin { overflow-x: auto; }
.journey-track { display: flex; align-items: stretch; gap: 5vw; width: max-content; height: 100vh; height: 100svh; padding: 0 5vw; }
.journey-col { display: flex; flex-direction: column; flex: none; }
.journey-col.is-top { justify-content: flex-start; padding-top: 8vh; }
.journey-col.is-mid { justify-content: center; }
.journey-col.is-bottom { justify-content: flex-end; padding-bottom: 8vh; }
.journey-col.is-stack { justify-content: center; gap: calc(5 * var(--vu)); --sw: min(calc(46 * var(--vu)), 80vw); }
.is-stack .journey-photo { width: var(--sw); }
.journey-photo { margin: 0; width: min(calc(var(--h) * var(--ar)), 86vw); }
.journey-photo.is-hero { --h: calc(58 * var(--vu)); }
.journey-photo.is-portrait { --h: calc(66 * var(--vu)); }
.journey-photo.is-square { --h: calc(38 * var(--vu)); }
.journey-photo figcaption { margin-bottom: .6rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.journey-photo img { width: 100%; height: auto; }
/* Text colour in the journey is fixed per column, never read from the animated --text */
.journey-col[data-tone="dark"] { color: var(--tone-light); }
.journey-col[data-tone="light"] { color: var(--tone-dark); }
/* Colour-transition zone: just a few photos, no text. Its width comes from TRANSITION_ZONE_WIDTH in js/main.js (the default here matches); the background blend is timed around it from the text's contrast (js/main.js) */
.journey-zone { display: flex; justify-content: space-between; gap: 4vw; flex: none; min-width: 125vw; }
.journey-zone .journey-photo { width: calc(var(--zw) * 1vw); }
.journey-light { display: flex; gap: 5vw; flex: none; }
body { transition: color .2s ease; } /* --text flips once (not blended) when the journey's background has finished changing */
@media (prefers-reduced-motion: reduce) {
  /* No pin, no blend: the strip simply switches to light colours at the transition zone */
  .journey-zone, .journey-light { background: var(--tone-light); }
  .journey-light { padding: 0 5vw; }
}
/* Poem boxes: one column. Each stanza is its English text with the Zomi translation directly under it; a larger gap separates stanzas. Each line is a .poem-line span with white-space: pre-wrap, so spacing is kept exactly. */
.journey-poem { --fs: min(clamp(1.1rem, 1.6vw, 1.45rem), 3.4vh); width: min(32ch, 82vw); font-family: var(--serif); font-size: var(--fs); line-height: 1.5; }
.poem-stanza + .poem-stanza { margin-top: 1.6em; }
.poem-zo { margin-top: .4em; font-size: .9em; font-style: italic; opacity: .8; }
.poem-line { display: block; white-space: pre-wrap; }
@media (max-width: 767px) { .journey-poem { --fs: min(1.1rem, 2.6vh); } }
/* Credit after the last stanza */
.poem-credit { margin: 2.5rem 0 0; font-family: var(--serif); }
.poem-credit-label { display: block; margin-bottom: .5rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; line-height: 1.6; }
.poem-credit-name { display: block; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; }
/* JS mode: the section is made tall, the strip is pinned and slid sideways with scroll */
.journey-on .journey-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.journey-on .journey-track { padding-left: 75vw; will-change: transform; }

/* Meet the Writers + Where the Writing Happens: shared heading block */
.writers, .community { padding: 6rem 1.5rem; }
.section-head { max-width: 40rem; margin: 0 auto 3.5rem; text-align: center; }
.section-head h2 { font-size: clamp(2.2rem, 6vw, 4rem); margin-bottom: 0; }

/* Writer cards: 2x2 on desktop, one column on phones. Each card opens the writer modal (js/main.js). */
.writers-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; }
@media (min-width: 700px) { .writers-grid { grid-template-columns: 1fr 1fr; } }
.writer-card { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.writer-card-img { overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--text) 11%, var(--bg)); }
.writer-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.writer-card-name { display: block; margin-top: 1rem; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; }
.writer-card-tag { display: block; margin-top: .25rem; font-size: .8rem; letter-spacing: .08em; opacity: .7; }
.writer-card:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
@media (hover: hover) { .writer-card:hover img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .writer-card-img img { transition: none; } }

/* Where the Writing Happens */
.community { padding-top: 0; }
.community-intro { max-width: 42rem; margin: 0 auto 4.5rem; text-align: center; }
.community-video { max-width: 64rem; margin: 0 auto; }
.community-video .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--text) 11%, var(--bg)); }
.community-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.community-video .video-embed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.community-video .video-embed.is-scrolling iframe { pointer-events: none; } /* let the page scroll through the player while scrolling */
.community-video figcaption { margin-top: .75rem; font-size: .8rem; letter-spacing: .06em; opacity: .7; }
.community-quote { max-width: 40rem; margin: 5rem auto 0; padding: 0; text-align: center; }
.community-quote p, .community-intro { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.35; }
.community-quote footer { margin-top: 1.25rem; font-size: .8rem; letter-spacing: .08em; opacity: .7; }
@media (min-width: 900px) { .writers { padding: 8rem 3rem; } .community { padding: 1rem 3rem 8rem; } }

/* Writer modal: a <dialog>, so Esc and focus trapping come from the browser. Fixed dark panel (the page itself turns light after the About journey).
   Wide on desktop (90vw, max 1200px), nearly full screen on phones; the panel scrolls inside itself. */
.writer-modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: .5rem; border: 0; background: transparent; color: var(--tone-light); overflow: hidden; }
.writer-modal[open] { display: flex; align-items: center; justify-content: center; }
.writer-modal::backdrop { background: color-mix(in srgb, var(--tone-dark) 88%, transparent); }
.writer-panel { position: relative; width: 100%; max-width: 1200px; max-height: calc(100vh - 1rem); max-height: calc(100svh - 1rem); overflow: auto; overscroll-behavior: contain; background: color-mix(in srgb, var(--tone-light) 7%, var(--tone-dark)); }
@media (min-width: 800px) { .writer-modal { padding: 1.5rem; } .writer-panel { width: 60vw; min-width: min(36rem, 100%); max-width: 720px; max-height: calc(100vh - 3rem); max-height: calc(100svh - 3rem); } }
.writer-portrait { display: block; width: 100%; height: auto; }
@media (min-width: 800px) { .writer-portrait { max-height: 60vh; object-fit: cover; } } /* cap on short screens; only crops when the photo is taller than the cap */
.writer-info { padding: 2rem 1.5rem 1.5rem; }
.writer-modal-name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.1; }
.writer-meta { margin-top: .5rem; font-size: .85rem; letter-spacing: .06em; opacity: .7; }
.writer-quote { margin: 2rem 0 0; padding: 0; }
.writer-quote-text { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; }
.writer-quote-source { margin-top: .75rem; font-size: .75rem; letter-spacing: .06em; opacity: .65; }
.writer-quote-source:empty { display: none; }
.writer-jump { display: inline-block; margin-top: 2rem; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: .85rem; letter-spacing: .06em; cursor: pointer; }
.writer-jump[hidden], .writer-quote[hidden] { display: none; }
.writer-jump:focus-visible { outline: 2px solid var(--tone-light); outline-offset: 4px; }
.writer-works-wrap { padding: 1rem 1.5rem 2.5rem; }
.writer-works-title { margin: 0 0 1.25rem; font-size: .72rem; font-weight: 400; letter-spacing: .25em; text-transform: uppercase; }
.writer-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2rem 1.5rem; align-items: center; }
.writer-works li { margin: 0; }
.writer-works .is-text { grid-column: 1 / -1; padding: 1rem 0 0; border-top: 1px solid color-mix(in srgb, var(--tone-light) 20%, transparent); }
.writer-work-btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.writer-work-btn img { display: block; width: 100%; height: auto; }
.writer-work-btn:focus-visible { outline: 2px solid var(--tone-light); outline-offset: 4px; }
.writer-work-excerpt { display: block; font-size: .9rem; line-height: 1.6; opacity: .8; font-style: italic; }
.writer-poem-link { display: inline-block; margin-top: 1rem; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: .85rem; letter-spacing: .06em; cursor: pointer; }
.writer-poem-link:focus-visible { outline: 2px solid var(--tone-light); outline-offset: 4px; }
.writer-close { position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 2.75rem; height: 2.75rem; border: 0; background: color-mix(in srgb, var(--tone-dark) 70%, transparent); color: var(--tone-light); font-size: 2rem; line-height: 1; cursor: pointer; }
.writer-close:focus-visible, .writer-zoom-close:focus-visible { outline: 2px solid var(--tone-light); outline-offset: -4px; }
@media (min-width: 800px) {
  .writer-top.has-quote { display: grid; grid-template-columns: 5fr 6fr; align-items: center; }
  .writer-info { padding: 2rem 2.5rem; }
  .writer-works-wrap { padding: 1.5rem 2.5rem 3rem; }
  .writer-works { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
}
/* Text-only writer (poems, no photos): a big pull quote takes the place of the photo */
.writer-bigquote { display: none; margin: 0; padding: 4rem 1.5rem 0; font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 7.5vw, 4rem); line-height: 1.15; }
.is-text-only .writer-bigquote { display: block; }
.is-text-only .writer-portrait, .is-text-only .writer-works { display: none; }
.writer-poems[hidden] { display: none; }
.writer-poem-tabs, .writer-lang { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.writer-poem-tabs { margin-bottom: 1rem; }
.writer-tab, .writer-lang-btn { padding: .35rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: inherit; font: inherit; font-size: .85rem; letter-spacing: .06em; opacity: .6; cursor: pointer; }
.writer-tab { font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0; }
.writer-tab[aria-pressed="true"], .writer-lang-btn[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
.writer-tab:focus-visible, .writer-lang-btn:focus-visible { outline: 2px solid var(--tone-light); outline-offset: 4px; }
.writer-poem-audio-wrap { margin-top: 1.5rem; }
.writer-poem-audio-wrap[hidden] { display: none; }
.writer-poem-audio-label { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .06em; opacity: .7; }
.writer-poem-audio { width: 100%; }
.writer-poem { margin-top: 2rem; font-family: var(--serif); font-size: clamp(1.2rem, 3.8vw, 1.4rem); line-height: 1.6; }
.writer-poem-title { margin: 0 0 1.75rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.15; }
.writer-stanza { margin: 0 0 1.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.writer-poem-sign { margin: 2.5rem 0 0; text-align: right; font-style: italic; font-size: 1.15em; }
/* Letter: warm paper, dark ink, her name signed at the end */
.writer-poem.is-letter { padding: 2rem 1.5rem 2.25rem; background: #f1e6cf; color: #3b2e22; box-shadow: 0 .5rem 2rem rgb(0 0 0 / .35); font-size: clamp(1.25rem, 4vw, 1.45rem); }
.writer-poem.is-letter .writer-poem-title { font-style: italic; }
.writer-poem.is-letter .writer-poem-sign { font-size: 1.5em; }
/* Blink: stanzas fade in one at a time while scrolling; the ones already read dim briefly as the next arrives */
.writer-poem.is-blink { padding-bottom: 4rem; }
.motion .writer-poem.is-fading .writer-stanza { opacity: 0; transition: opacity 1.2s ease .35s; margin-bottom: 14vh; }
.motion .writer-poem.is-fading .writer-stanza.is-in { opacity: 1; }
.motion .writer-poem.is-fading .writer-stanza.is-blink { animation: stanza-blink .5s ease; }
@keyframes stanza-blink { 0%, 100% { opacity: 1; } 40% { opacity: .15; } }
@media (min-width: 800px) {
  .writer-bigquote { padding: 4.5rem 2.5rem 0; }
  .writer-poem.is-letter { padding: 3rem 3.5rem 3rem; }
}
/* Enlarged multi-page work: every page at once. Wide: side by side, scaled to fit; narrow: stacked full width and scrollable */
.writer-zoom-img[hidden], .writer-zoom-pages[hidden] { display: none; }
.writer-zoom-pages { display: flex; flex-direction: column; gap: 2rem; align-items: center; width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; }
.writer-zoom-page { margin: 0; width: 100%; }
.writer-zoom-page img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.writer-zoom-page figcaption { margin-top: .5rem; text-align: center; font-size: .72rem; letter-spacing: .06em; opacity: .65; }
@media (min-width: 768px) {
  .writer-zoom-pages { flex-direction: row; justify-content: center; align-items: flex-start; gap: 1rem; overflow: visible; }
  .writer-zoom-page { width: auto; flex: 0 1 auto; }
  .writer-zoom-page img { width: auto; height: min(calc(100svh - 8rem), calc((100vw - 2rem - 1rem * (var(--n) - 1)) / var(--n) * 4 / 3)); }
}
/* Multi-page work: pages stacked in one 3:4 frame, crossfading (js/main.js pagedWork) */
.writer-pages { position: relative; }
.writer-pages-frame { position: relative; aspect-ratio: 3 / 4; }
.writer-pages-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .4s ease; }
.writer-pages-frame img.is-hidden { opacity: 0; }
.writer-pages-info { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: .72rem; letter-spacing: .06em; opacity: .65; }
.writer-pages-hint .for-touch, .writer-pages-enlarge { display: none; }
@media (hover: none) {
  .writer-pages-hint .for-hover { display: none; }
  .writer-pages-hint .for-touch { display: inline; }
  .writer-pages-btn { cursor: pointer; }
  .writer-pages-enlarge { display: block; position: absolute; top: .5rem; right: .5rem; padding: .35rem .6rem; border: 0; background: color-mix(in srgb, var(--tone-dark) 70%, transparent); color: var(--tone-light); font: inherit; font-size: .72rem; letter-spacing: .06em; }
}
.writer-pages-enlarge:focus-visible { outline: 2px solid var(--tone-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .writer-pages-frame img { transition: none; } }
/* Enlarged work: fills the modal so handwriting is readable; the image fits the screen */
.writer-zoom { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 3.5rem 1rem 1rem; background: var(--tone-dark); }
.writer-zoom[hidden] { display: none; }
.writer-zoom-img { flex: 0 1 auto; min-height: 0; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.writer-zoom-close { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; border: 0; background: color-mix(in srgb, var(--tone-light) 12%, var(--tone-dark)); color: var(--tone-light); font-size: 2rem; line-height: 1; cursor: pointer; }

/* Scroll reveal: only hidden once JS has confirmed motion is allowed */
.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; }
.motion .reveal.is-visible { opacity: 1; transform: none; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Volunteer: video + call to action */
.volunteer { padding: 0 1.5rem 6rem; background: var(--bg); }
.volunteer-grid { display: grid; gap: 2.5rem; max-width: 72rem; margin: 0 auto; align-items: center; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.video-frame img, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-frame img { filter: brightness(.7); }
.video-play {
  position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; padding: 0; cursor: pointer;
  border: 1px solid var(--text); border-radius: 50%; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); transition: background .3s ease, transform .3s ease;
}
.video-play span { position: absolute; top: 50%; left: 50%; margin: -.8rem 0 0 -.5rem; border-style: solid; border-width: .8rem 0 .8rem 1.4rem; border-color: transparent transparent transparent currentColor; }
.video-play:hover { background: color-mix(in srgb, var(--bg) 85%, transparent); transform: scale(1.06); }
.video-play:focus-visible, .volunteer-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.volunteer-label { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 1.5rem; }
.volunteer-name { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; }
.volunteer-role { margin-top: .75rem; font-size: .9rem; opacity: .7; }
.volunteer-quote { margin: 2rem 0; padding: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5; }
.volunteer-cta-line { margin-bottom: 1.25rem; font-size: .95rem; }
.volunteer-btn {
  display: inline-block; padding: .9rem 2rem; border: 1px solid var(--text); background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; transition: background .3s ease, color .3s ease;
}
.volunteer-btn:hover { background: var(--text); color: var(--bg); }
@media (min-width: 900px) {
  .volunteer { padding: 0 3rem 8rem; }
  .volunteer-grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
}
@media (prefers-reduced-motion: reduce) { .video-play, .volunteer-btn { transition: none; } }

/* Footer: five icon links in one centred row */
.site-footer { padding: 1rem 1.5rem 3rem; background: var(--bg); }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem; }
.footer-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text); opacity: .7; transition: opacity .3s ease; }
.footer-links a:hover { opacity: 1; }
.footer-links a:focus-visible { opacity: 1; outline: 2px solid var(--text); outline-offset: 2px; }
.footer-links svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .footer-links a { transition: none; } }

/* Background music controls (js/main.js): fixed dark pill with fixed light text, so they read on both the dark and the light page */
.sound { position: fixed; right: 1rem; bottom: 1rem; z-index: 5; display: flex; align-items: center; gap: .5rem; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.sound.is-on { opacity: 1; visibility: visible; }
.sound button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 1px solid var(--tone-light); border-radius: 999px; background: color-mix(in srgb, var(--tone-dark) 80%, transparent); color: var(--tone-light); font: inherit; cursor: pointer; transition: background .3s ease, color .3s ease; }
.sound-tap { padding: 0 1.1rem; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; }
.sound-tap[hidden] { display: none; }
.sound-toggle { width: 2.75rem; }
.sound button:hover { background: var(--tone-light); color: var(--tone-dark); }
.sound button:focus-visible { outline: 2px solid var(--tone-light); outline-offset: 3px; box-shadow: 0 0 0 5px var(--tone-dark); }
.sound-slash, .sound-toggle.is-muted .sound-waves { display: none; }
.sound-toggle.is-muted .sound-slash { display: inline; }
@media (prefers-reduced-motion: reduce) { .sound, .sound button { transition: none; } }

/* Hero play button: sits just under "Who do you see?" (inside .glow, so the heading does not move). Fades out once clicked (js/main.js) */
.hero-sound { position: absolute; top: 100%; left: 0; right: 0; margin: 1.75rem auto 0; width: max-content; display: block; padding: .25rem; border: 0; background: none; color: var(--text); cursor: pointer; pointer-events: auto; transition: opacity .4s ease; }
.hero-sound svg { display: block; width: 3rem; height: 3rem; border-radius: 50%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text) 45%, transparent)); animation: hero-sound-pulse 3.2s ease-in-out infinite; }
.hero-sound:hover svg { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--text) 70%, transparent)); }
.hero-sound:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.hero-sound.is-gone { opacity: 0; pointer-events: none; }
.hero-sound[hidden] { display: none; }
@keyframes hero-sound-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 0%, transparent); } 50% { box-shadow: 0 0 28px 4px color-mix(in srgb, var(--text) 30%, transparent); } }
.intro .hero-sound { opacity: 0; pointer-events: none; transition: opacity var(--t-cue) ease; }
.intro.s-cue .hero-sound { opacity: 1; pointer-events: auto; } /* fades in as scrolling unlocks */
.intro.s-cue .hero-sound.is-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-sound svg { animation: none; } }