/* He Huia Kaimanawa — shared by / (the story) and /proposal.
   There is no build step: this file is linked by both pages as-is. */
/* One token set for both pages. It is the set both internal documents already
   share (docs/internal/HANDOVER.md → Design conventions): Fraunces over Public
   Sans, blackout ground, and #C4433A as the single accent. The story and the
   proposal are two documents in one system, not two designs. */
:root{
  --po:#07090C;          /* blackout — page ground */
  --po-raised:#0E141B;   /* raised surface */
  --po-lift:#141A22;     /* third surface — cells, nav hover */
  --line:#1D2733;        /* hairlines */
  --marama:#EDE7DD;      /* body text */
  --huia:#E9DFC9;        /* warm highlight — the sentence that lands */
  --muted:#7C8794;       /* labels, secondary text */
  --manawa:#C4433A;      /* the one accent. Use it sparingly. */
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box; text-wrap:pretty}
html{background:var(--po); scroll-behavior:smooth; scroll-padding-top:74px}
body{
  margin:0; background:var(--po); color:var(--marama);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--manawa); color:var(--po)}
a{color:var(--marama); text-decoration-color:var(--muted); text-underline-offset:5px}
a:hover{color:var(--huia); text-decoration-color:var(--manawa)}
:focus-visible{outline:2px solid var(--manawa); outline-offset:5px}

/* Everything set in Fraunces, at the display optical size. */
h1,h2,h3,
.s-open span,.s-year,.s-arg-line,.s-turn-year,.s-chain li,.s-word p,
.s-cta em,blockquote p{
  font-family:var(--serif); font-weight:300;
  font-variation-settings:"opsz" 120; margin:0;
}

/* ==================================================================
   THE STORY — ten screens, from 1867 to the work itself.
   Sections are indexed by the motion layer below via data-screen-label;
   renaming or reordering them changes what the spine does.
   ================================================================== */
.story{background:var(--po); overflow-x:clip}

/* The spine: one hairline down the left margin that carries the whole
   argument on its own — held, dashed as the language goes, absent through
   the silence, redrawn and filled as it is taken back. */
.s-spine-wrap{position:sticky; top:0; height:0; z-index:2; pointer-events:none}
.s-spine{position:absolute; top:0; left:clamp(8px,2.2vw,20px); width:1px;
  height:100svh; background:var(--line); opacity:1;
  transition:opacity 2.4s cubic-bezier(.25,.6,.2,1),
             background-color 2.4s cubic-bezier(.25,.6,.2,1)}
.s-spine-fill{position:absolute; top:0; left:0; width:1px; height:0;
  background:var(--huia);
  transition:height 3.4s cubic-bezier(.25,.6,.2,1), background-color 2.4s ease}

.story section{min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:14vh 24px; border-top:1px solid var(--line)}
.story section:first-of-type{border-top:none}

.s-eyebrow{margin:0 0 clamp(28px,9vh,72px); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted)}
.s-num{margin:0 0 clamp(22px,5vh,44px); font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted)}
.s-num i{font-style:normal; color:var(--line)}

.s-body{margin:0 0 1.5em; max-width:34ch; font-size:clamp(1.06rem,4.5vw,1.35rem);
  line-height:1.55; font-weight:300}
.s-body:last-child{margin-bottom:0}
/* The sentence each screen turns on. */
.s-body.turn{font-weight:400; color:var(--huia)}

/* 01 — opening */
.story section.s-opening{padding:16vh 24px 12vh}
.s-open{max-width:20ch; font-size:clamp(2.7rem,11.5vw,7rem); line-height:1.02;
  letter-spacing:-.025em}
.s-open span{display:block}
.s-open span:last-child{color:var(--huia)}

/* 02, 05 — a year, at full height */
.s-year{margin:0 0 clamp(24px,6vh,52px); font-size:clamp(3.4rem,16vw,9rem);
  line-height:.95; letter-spacing:-.03em}

/* 03 — the erasure. Scroll drives it: each word is eaten from the end and
   replaced by its English. Without the motion layer the section collapses to
   one screen and simply shows each word beside what replaced it. */
.story section.s-erase{display:block; padding:0; min-height:0; position:relative}
html.js .s-erase{height:420svh}
html:not(.js) .s-erase{min-height:100svh}
.s-erase-in{position:sticky; top:0; min-height:100svh; display:flex;
  flex-direction:column; justify-content:center; padding:clamp(20px,7vh,96px) 24px}
.s-erase-h{margin:0 0 clamp(16px,4vh,44px); max-width:30ch;
  font-size:clamp(1.25rem,min(4.6vw,3.6vh),2rem); line-height:1.18; letter-spacing:-.01em}
.s-word{margin:0 0 clamp(14px,4vh,40px)}
.s-word:last-child{margin-bottom:0}
.s-word p{font-size:clamp(1.75rem,min(8.2vw,10vh),4rem); line-height:1.04;
  letter-spacing:-.02em; white-space:nowrap}
.s-lost{opacity:.08}
.s-en{color:var(--muted)}
html:not(.js) .s-en::before{content:"\00a0\00a0"}

/* 04 — the silence. Three statements pushed to the corners of a long screen. */
.story section.s-silence{min-height:230svh; justify-content:space-between; padding:22vh 24px 26vh}
.s-silence .s-body{margin:0; max-width:32ch}
.s-silence .s-away{align-self:flex-end; text-align:right; color:var(--muted)}
.s-silence .turn{max-width:34ch}

/* 05 — the specimen plate */
.s-plate{max-width:420px; width:100%; border:1px solid var(--line);
  background:var(--po-raised); padding:20px}
.s-plate figure{margin:0; height:min(46vh,340px); border:1px solid var(--line);
  background:var(--po); overflow:hidden}
.s-plate img{display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.42) brightness(.6) contrast(1.06)}
.s-plate dl{margin:18px 0 0; display:grid; grid-template-columns:auto 1fr;
  gap:6px 14px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted)}
.s-plate dt,.s-plate dd{margin:0}
.s-plate dd{color:var(--marama)}
.s-after{margin:clamp(28px,7vh,56px) 0 0}

/* 06 — the argument the whole page exists to make */
.s-arg{display:grid; gap:clamp(28px,6vh,48px); max-width:760px}
.s-arg > div{display:flex; flex-direction:column; gap:10px}
.s-arg > div + div{border-top:1px solid var(--line); padding-top:clamp(28px,6vh,48px)}
.s-arg-lab{margin:0; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted)}
.s-arg-line{font-size:clamp(2.1rem,9vw,4rem); line-height:1.05; letter-spacing:-.02em}
.s-verdict{margin:clamp(34px,8vh,72px) 0 0; padding-top:14px;
  border-top:1px solid var(--manawa); max-width:34ch;
  font-size:clamp(1.06rem,4.5vw,1.35rem); line-height:1.55; font-weight:400; color:var(--huia)}

/* 07 — the turning. The one screen whose ground lifts. */
.story section[data-lift]{background:var(--po);
  transition:background-color 4s cubic-bezier(.25,.6,.2,1)}
.s-turn{list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(26px,6vh,52px); max-width:34ch}
.s-turn li{display:flex; flex-direction:column; gap:8px}
.s-turn-year{font-size:clamp(2.4rem,11vw,4.6rem); line-height:1; letter-spacing:-.02em}
.s-turn p:last-child{margin:0; font-size:clamp(1rem,4.3vw,1.3rem); line-height:1.5;
  font-weight:300}
.s-closer{margin:clamp(34px,8vh,64px) 0 0; max-width:34ch;
  font-size:clamp(1.06rem,4.5vw,1.35rem); line-height:1.55; font-weight:400; color:var(--huia)}

/* 08 — now */
.story section.s-now{padding:16vh 24px}
.s-now h2{margin:0 0 clamp(30px,7vh,60px); max-width:22ch;
  font-size:clamp(2.3rem,10vw,5.4rem); line-height:1.02; letter-spacing:-.025em}
.s-stack{display:grid; gap:1.5em; max-width:34ch}
/* 08 sets as verse. The line breaks inside a stanza are the author's, not the
   measure's, so the column is wider than the rest of the story and each stanza
   reveals as one unit. Long lines still wrap on a narrow screen. */
.s-verse{display:grid; gap:1.65em; max-width:46ch}
.s-verse .s-body{margin:0; max-width:none}
.s-stack .s-body{margin:0}

/* 09 — the chain. Four generations, four rules. */
.s-chain{list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:34ch}
.s-chain li{padding:clamp(18px,4vh,30px) 0; border-top:1px solid var(--line);
  font-size:clamp(1.7rem,7.4vw,3rem); line-height:1.08; letter-spacing:-.015em}
.s-chain li.lost{color:var(--muted)}
.s-chain li:last-child{border-bottom:1px solid var(--line); color:var(--huia)}

/* 10 — into the work, and the handoff to the proposal */
.story section.s-into{background:var(--po-raised); padding:16vh 24px 20vh}
.s-into h2{margin:0 0 clamp(28px,6vh,52px); font-size:clamp(2.6rem,12vw,6.4rem);
  line-height:1; letter-spacing:-.03em}
.s-into dl{margin:0 0 clamp(30px,7vh,60px); display:grid; grid-template-columns:auto 1fr;
  gap:8px 18px; max-width:520px; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)}
.s-into dt,.s-into dd{margin:0}
.s-into dd{color:var(--marama)}
.s-into .s-stack{gap:1.5em; margin:0 0 clamp(36px,8vh,68px)}
.s-cta{align-self:flex-start; display:inline-flex; align-items:center; gap:14px;
  min-height:48px; padding:14px 22px; border:1px solid var(--manawa);
  color:var(--marama); text-decoration:none; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; transition:background-color .9s ease, color .9s ease}
.s-cta:hover{background:var(--manawa); color:#F6F1EA}
.s-cta em{font-style:normal; color:inherit}

/* ==================================================================
   THE PROPOSAL — /proposal, the document a presenter reads once the story
   has done its work. Its own page, carrying body#proposal. Same tokens,
   tighter measure, no full-height screens.
   ================================================================== */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

nav{position:sticky; top:0; z-index:50; background:rgba(7,9,12,.86);
    backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
nav .wrap{display:flex; gap:6px; align-items:center; height:56px;
    overflow-x:auto; scrollbar-width:none}
nav .wrap::-webkit-scrollbar{display:none}
nav a{color:var(--muted); text-decoration:none; font-size:13px; font-weight:500;
      padding:7px 11px; white-space:nowrap}
nav a:hover{color:var(--marama); background:var(--po-lift)}
nav .brand{font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 120;
      color:var(--marama); font-size:15px; margin-right:8px; padding-left:0;
      letter-spacing:0; text-decoration:none}
nav .brand:hover{color:var(--huia)}

header{padding:64px 0 30px; text-align:center}
.poster{display:inline-block; background:var(--marama); padding:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.6); border:1px solid var(--line)}
.poster img{display:block; width:min(300px,72vw); height:auto}
.kicker{margin:26px 0 10px; font-size:.68rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted)}
header h1{font-size:clamp(2.1rem,7vw,3.4rem); line-height:1.05; letter-spacing:-.025em}
.dates{margin-top:14px; color:var(--muted); font-size:15px; font-weight:300}
.dates b{color:var(--marama); font-weight:400}

.tagline{margin:26px auto 0; max-width:640px; background:var(--po-raised);
  border:1px solid var(--line); border-left:1px solid var(--manawa);
  padding:15px 18px; text-align:left}
.tagline .lab{font-size:.62rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted)}
.tagline .val{font-size:16px; font-weight:400; margin-top:5px; color:var(--huia)}

#proposal section{padding:52px 0; border-top:1px solid var(--line)}
.shead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.shead h2{font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:-.02em}
.shead .mi{color:var(--muted); font-size:.68rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase}
.lede{color:var(--muted); font-size:14.5px; margin:0 0 24px; max-width:62ch; font-weight:300}
#proposal section p{max-width:70ch; line-height:1.65; font-weight:300}
#proposal section p.lead{font-size:17.5px; color:var(--huia); line-height:1.6}
#proposal section p strong{color:var(--marama); font-weight:500}
#proposal em{color:var(--huia); font-style:italic}

.v-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; margin:26px auto 0; max-width:640px; text-align:left;
  background:var(--line); border:1px solid var(--line)}
.v-facts div{background:var(--po-raised); padding:12px 14px}
.v-facts span{display:block; font-size:.62rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.v-facts b{font-size:13.5px; font-weight:400}

.card{background:var(--po-raised); border:1px solid var(--line);
  border-left:1px solid var(--line); padding:20px 22px; margin-bottom:14px}
.card.key{border-left:1px solid var(--manawa)}
.v-lab{font-size:.62rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px}
.card p{margin:0 0 11px} .card p:last-child{margin-bottom:0}

.opening{padding-top:34px}
.opening .lead{font-size:17.5px; color:var(--huia); line-height:1.6; max-width:70ch}
.opening p{max-width:70ch; line-height:1.65; font-weight:300}

/* The one block that changes per host. */
.swap{background:var(--po-raised); border:1px solid var(--line);
  border-top:1px solid var(--manawa); padding:22px 22px; margin-bottom:14px}
.swap .tag{display:inline-block; font-size:.62rem; font-weight:500; letter-spacing:.20em;
  text-transform:uppercase; color:var(--po); background:var(--manawa);
  padding:4px 10px; margin-bottom:14px}
.swap p{margin:0 0 11px; font-weight:300} .swap p:last-child{margin-bottom:0}

blockquote{margin:26px 0; padding:20px 24px; background:var(--po-raised);
  border:1px solid var(--line); border-left:1px solid var(--manawa)}
blockquote p{font-size:clamp(1.25rem,3.2vw,1.7rem); line-height:1.2; margin:0 0 10px;
  color:var(--huia); max-width:none}
blockquote cite{font-style:normal; font-size:.68rem; font-weight:500; letter-spacing:.20em;
  text-transform:uppercase; color:var(--muted)}

.watch{background:var(--po-raised); border:1px solid var(--line);
  padding:18px 20px; margin:26px 0}
.watch h3{font-size:16px; letter-spacing:-.01em}
.watch .shead{margin-bottom:10px}
.watch p{font-size:14px; color:var(--muted); margin:0 0 7px} .watch p:last-child{margin-bottom:0}

.imgslot{border:1px dashed var(--line); color:var(--muted); font-size:13px;
  padding:34px 20px; text-align:center; margin:26px 0; background:var(--po-raised)}

/* What the company still has to supply. Deliberately loud, and deliberately
   still visible in print — nothing ships blank. */
.fill{display:inline-block; font-size:12.5px; font-weight:500; letter-spacing:.04em;
  color:var(--manawa); background:rgba(196,67,58,.10);
  border:1px dashed var(--manawa); padding:1px 8px}

table{width:100%; border-collapse:collapse; font-size:14px}
td{padding:14px 16px; border-top:1px solid var(--line); vertical-align:top;
  line-height:1.6; font-weight:300}
td:first-child{width:190px; color:var(--muted); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; padding-top:17px}
tr:first-child td{border-top:none}
.spec{background:var(--po-raised); border:1px solid var(--line)}
@media (max-width:600px){
  td{display:block; padding:10px 16px; border-top:none}
  td:first-child{width:auto; padding-bottom:2px; white-space:normal; padding-top:10px}
  tr{display:block; border-top:1px solid var(--line); padding:6px 0}
  tr:first-child{border-top:none}
}

#proposal footer{border-top:1px solid var(--line); padding:40px 0 72px; color:var(--muted);
  font-size:13.5px; font-weight:300}
#proposal footer .priv{background:var(--po-raised); border:1px solid var(--line);
  border-left:1px solid var(--manawa); padding:16px 18px; margin-bottom:22px;
  color:var(--marama)}
#proposal footer .priv b{color:var(--muted); font-size:.62rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase}
#proposal footer p{max-width:70ch; line-height:1.6}

/* The other front doors, at the foot of the story. The story is what "/"
   serves on the main host only — a festival host serves its own approach page
   there — so these links cannot put one festival in front of another. The list
   itself is rendered by the Worker from FESTIVALS; see src/variants.js. */
.s-doors{padding:12vh 24px 16vh; border-top:1px solid var(--line); background:var(--po)}
.s-doors p{margin:0 0 clamp(18px,4vh,32px); font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted)}
.s-doors ul{list-style:none; margin:0; padding:0; max-width:46ch}
.s-doors li{border-top:1px solid var(--line)}
.s-doors li:last-child{border-bottom:1px solid var(--line)}
.s-doors a{display:block; padding:clamp(16px,3.5vh,26px) 0; text-decoration:none;
  font-family:var(--serif); font-weight:300; font-variation-settings:"opsz" 120;
  font-size:clamp(1.2rem,4.6vw,1.7rem); line-height:1.15; letter-spacing:-.015em;
  color:var(--marama)}
.s-doors a:hover{color:var(--huia)}

@media (max-width:600px){ #proposal section{padding:40px 0} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .s-spine,.s-spine-fill,.story section[data-lift],.s-cta{transition:none}
}

@media print{
  html,body{background:#fff; color:#111}
  nav,.s-spine-wrap{display:none}
  .story section,
  .story section.s-opening,.story section.s-erase,.story section.s-silence,
  .story section.s-now,.story section.s-into{
    min-height:0; height:auto; padding:18pt 0; page-break-inside:avoid;
    border-top:1px solid #bbb}
  html.js .s-erase{height:auto}
  .s-erase-in{position:static; min-height:0; padding:0}
  .s-lost{opacity:1}
  [data-reveal]{opacity:1 !important; transform:none !important}
  h1,h2{font-size:22pt !important}
  .s-open,.s-year,.s-into h2,.s-now h2,.s-arg-line,.s-turn-year,.s-chain li,.s-word p{
    font-size:20pt !important; color:#111 !important}
  p,li,td{font-size:11.5pt !important; color:#111 !important}
  .s-body,.s-verdict,.s-closer,section p{max-width:34em !important}
  .card,.swap,.watch,blockquote,.spec,footer .priv,.v-facts div,.s-plate,.s-into{
    border-color:#bbb; background:#fff; break-inside:avoid}
  .s-into,.story,section p.lead,.opening .lead,em,blockquote p{background:#fff; color:#111}
  .shead .mi,.v-lab,td:first-child,blockquote cite,.s-num,.s-eyebrow,.s-muted{color:#444}
  .fill{color:#000; background:#fff; border:1px dashed #000}
  .imgslot{border-color:#bbb; color:#555}
  a{color:#000; text-decoration:underline}
}