/* =====================================================================
   MARIPOSA — The Stories We Carry
   Cinematic documentary treatment · editorial-filmic design system
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* palette — drawn from the treatment decks */
  --parchment:#F2EAD6;
  --parchment-2:#EAE0C8;
  --parchment-3:#E2D6B8;
  --ink:#171310;
  --ink-2:#0E0B08;
  --ink-soft:#2A2017;
  --pine:#234536;
  --pine-2:#2F5A41;
  --pine-deep:#16271E;
  --gold:#C49A45;
  --gold-2:#B07A2B;
  --gold-soft:#D8B868;
  --terracotta:#A8392B;
  --terracotta-2:#8C2E22;
  --monarch:#E2761E;
  --clay:#B5673E;

  /* semantic (parchment default) */
  --bg:var(--parchment);
  --fg:var(--ink);
  --muted:#6A5C42;
  --rule:rgba(35,69,54,.22);
  --accent:var(--pine);
  --accent-2:var(--gold-2);

  /* type */
  --display:'Playfair Display',Georgia,serif;
  --serif:'Spectral',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;

  /* fluid scale */
  --step--1:clamp(.78rem,.74rem + .2vw,.9rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.15rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.1rem);
  --step-4:clamp(2.6rem,2rem + 3.4vw,4.6rem);
  --step-5:clamp(3.4rem,2.4rem + 5.5vw,7.2rem);
  --step-6:clamp(4.2rem,2.6rem + 8vw,10rem);

  --measure:38rem;
  --gutter:clamp(1.25rem,4vw,4rem);
  --maxw:min(1240px,92vw);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--serif);font-size:var(--step-0);line-height:1.66;
  font-weight:400;letter-spacing:.003em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:var(--step--1);
  letter-spacing:.32em;text-transform:uppercase;color:var(--accent-2);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:clamp(18px,3vw,42px);height:1px;background:currentColor;opacity:.7}
.eyebrow.is-plain::before{display:none}
.display{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.015em;margin:0}
.serif-italic{font-family:var(--serif);font-style:italic}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft)}
.measure{max-width:var(--measure)}
.muted{color:var(--muted)}

/* ---------- Layout ---------- */
.wrap{width:var(--maxw);margin-inline:auto}
.section{position:relative;padding-block:clamp(4.5rem,10vh,9rem)}
.section--tight{padding-block:clamp(3rem,7vh,6rem)}
.hairline{height:1px;background:var(--rule);border:0;margin:0}

/* dark / cinematic sections */
.is-dark{--bg:var(--ink);--fg:#F3ECDD;--muted:#A99B7E;--rule:rgba(243,236,221,.16);background:var(--bg);color:var(--fg)}
.is-dark .lead{color:#E4D9C2}
.is-dark.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* act accent theming */
.theme-memory{--accent:#3C6E8F;--accent-2:var(--gold-soft)}
.theme-belonging{--accent:var(--pine-2);--accent-2:var(--terracotta)}
.theme-imagination{--accent:var(--monarch);--accent-2:var(--gold-soft)}

/* ===================================================================
   Chrome: progress tide-line, brand, chapter nav, sound toggle
   =================================================================== */
.tideline{position:fixed;top:0;left:0;height:3px;width:100%;z-index:80;background:transparent}
.tideline__fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));box-shadow:0 0 12px rgba(196,154,69,.7)}

.brandmark{position:fixed;top:clamp(1rem,2.4vh,1.8rem);left:var(--gutter);z-index:70;display:flex;align-items:center;gap:.6rem;opacity:0;transition:opacity .6s var(--ease)}
.brandmark.is-on{opacity:1}
.brandmark img{height:26px;width:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}

.sound{position:fixed;top:clamp(1rem,2.4vh,1.8rem);right:var(--gutter);z-index:70;
  display:flex;align-items:center;gap:.55rem;padding:.45rem .8rem;border-radius:999px;
  border:1px solid rgba(243,236,221,.28);background:rgba(15,12,8,.35);backdrop-filter:blur(8px);
  color:#F3ECDD;font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.sound__eq{display:inline-flex;gap:2px;align-items:flex-end;height:13px}
.sound__eq i{width:2px;height:5px;background:currentColor;border-radius:1px;transition:height .25s var(--ease)}
.sound.is-playing .sound__eq i{animation:eq 1.1s var(--ease) infinite}
.sound.is-playing .sound__eq i:nth-child(2){animation-delay:.18s}
.sound.is-playing .sound__eq i:nth-child(3){animation-delay:.36s}
.sound.is-playing .sound__eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}

.chapters{position:fixed;right:clamp(1rem,2.2vw,2rem);top:50%;transform:translateY(-50%);z-index:60;
  display:none;flex-direction:column;gap:1rem;opacity:0;transition:opacity .6s var(--ease)}
.chapters.is-on{opacity:1}
.chapters a{position:relative;display:flex;align-items:center;gap:.7rem;justify-content:flex-end;color:#F3ECDD}
.chapters .lbl{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:.35s var(--ease);white-space:nowrap;color:rgba(243,236,221,.85)}
.chapters .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(243,236,221,.55);transition:.35s var(--ease)}
.chapters a:hover .lbl{opacity:1;transform:none}
.chapters a.is-active .dot,.chapters a:hover .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(196,154,69,.18)}
@media(min-width:1100px){.chapters{display:flex}}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;color:#F4ECDB;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,8,5,.55) 0%,rgba(10,8,5,.12) 32%,rgba(10,8,5,.28) 62%,rgba(10,8,5,.92) 100%),
    radial-gradient(120% 80% at 50% 120%,rgba(10,8,5,.85),transparent 60%);
}
.hero__inner{width:var(--maxw);margin-inline:auto;padding-bottom:clamp(3.5rem,9vh,7rem);padding-top:30vh}
.hero h1{font-family:var(--display);font-weight:800;font-size:var(--step-6);line-height:.94;letter-spacing:-.02em;margin:.2em 0 .35em;
  text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero h1 .ln{display:block;padding-bottom:.1em}
.hero__sub{font-style:italic;font-size:var(--step-2);max-width:24ch;color:#EFE6D2;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.hero__q{margin-top:1.6rem;font-family:var(--sans);font-size:var(--step--1);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft)}
.hero__credit{margin-top:2.4rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;font-size:var(--step--1);color:#D7CCB4}
.hero__credit .by{font-family:var(--sans);letter-spacing:.16em;text-transform:uppercase;font-size:.66rem}
.hero__credit img{height:30px;width:auto;opacity:.95}
.hero__br{height:34px;background:rgba(20,16,10,.0)}
.scrollcue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#E6DBC2;font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase}
.scrollcue .ln{width:1px;height:42px;background:linear-gradient(var(--gold-soft),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}

/* ===================================================================
   Generic editorial pieces
   =================================================================== */
.kicker-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem}
.kicker-row .pageno{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

.bigq{font-family:var(--display);font-weight:500;font-style:italic;font-size:var(--step-4);line-height:1.08;letter-spacing:-.01em;color:var(--accent)}
.section-title{font-family:var(--display);font-weight:800;font-size:var(--step-4);line-height:1;letter-spacing:-.018em}

.prose p{margin:0 0 1.15em}
.prose p:first-of-type::first-letter{}
.dropcap p:first-of-type::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:3.6em;line-height:.72;
  padding:.06em .12em 0 0;color:var(--accent)}

.twocol{column-gap:clamp(2rem,5vw,4.5rem)}
@media(min-width:760px){.twocol{columns:2}}
.twocol p{break-inside:avoid}

/* card panel (interviews / archival / we hear) */
.evidence{display:grid;gap:clamp(1.2rem,3vw,2.4rem);grid-template-columns:1fr;border:1px solid var(--rule);border-radius:4px;padding:clamp(1.4rem,3vw,2.2rem);background:rgba(35,69,54,.04)}
.is-dark .evidence{background:rgba(243,236,221,.04)}
@media(min-width:760px){.evidence{grid-template-columns:repeat(3,1fr)}}
.evidence h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .6rem}
.evidence p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--muted)}

.inquiry{margin-top:1.6rem;font-size:var(--step--1);font-style:italic;color:var(--muted);border-left:2px solid var(--accent-2);padding-left:1rem}
.inquiry b{font-family:var(--sans);font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;color:var(--accent)}

/* pull quote */
.pull{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-3);line-height:1.18;color:var(--accent);border-left:3px solid var(--accent-2);padding-left:clamp(1rem,3vw,2rem)}
.is-dark .pull{color:#EAD9B4}

/* figures */
figure{margin:0}
.fig{overflow:hidden;border-radius:4px;background:var(--ink)}
.fig img{width:100%;height:100%;object-fit:cover}
figcaption{margin-top:.7rem;font-size:var(--step--1);font-style:italic;color:var(--muted)}
.credit-tag{font-family:var(--sans);font-style:normal;font-weight:600;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-right:.5em}

/* ===================================================================
   Section: Film at a Glance
   =================================================================== */
.glance{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem)}
@media(min-width:900px){.glance{grid-template-columns:1.3fr .8fr}}
.glance__facts{border:1px solid var(--rule);border-radius:4px;padding:clamp(1.4rem,3vw,2rem);background:var(--parchment-2)}
.glance__facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:1.1rem}
.fact dt{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.2rem}
.fact dd{margin:0;font-family:var(--display);font-size:var(--step-1);font-weight:600;color:var(--ink)}
.fact dd small{display:block;font-family:var(--serif);font-weight:400;font-size:.8rem;color:var(--muted);letter-spacing:0;margin-top:.15rem}
.premise-grid{display:grid;gap:1.8rem}
@media(min-width:620px){.premise-grid{grid-template-columns:1fr 1fr}}
.premise-grid h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .5rem;border-top:2px solid var(--accent);padding-top:.7rem}

.sankofa-line{display:flex;align-items:center;gap:1rem;margin-top:2.6rem;color:var(--accent);font-style:italic;font-size:var(--step-1)}
.sankofa-line svg{flex:none;width:40px;height:40px}

/* ===================================================================
   Timeline — One Island, Three Inheritances
   =================================================================== */
.timeline{position:relative;margin-top:3rem;padding-left:clamp(1.2rem,4vw,2.4rem)}
.timeline::before{content:"";position:absolute;left:clamp(1.2rem,4vw,2.4rem);top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(var(--accent),var(--accent-2))}
.tl-node{position:relative;padding:0 0 2.2rem 2rem;opacity:.45}
.tl-node.is-in{opacity:1}
.tl-node::before{content:"";position:absolute;left:-4px;top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);transition:.4s var(--ease)}
.tl-node.is-in::before{background:var(--gold);border-color:var(--gold-2);box-shadow:0 0 0 5px rgba(196,154,69,.16)}
.tl-node.is-turn::before{border-radius:1px;transform:rotate(45deg) scale(1.25);background:var(--terracotta);border-color:var(--terracotta-2)}
.tl-node h3{font-family:var(--display);font-weight:700;font-size:var(--step-2);margin:0 0 .15rem;letter-spacing:-.01em}
.tl-node p{margin:0;color:var(--muted);font-style:italic}
.tl-phase{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-2);display:block;margin:1.5rem 0 .8rem 2rem}

/* ===================================================================
   Act navigator (filmstrip)
   =================================================================== */
.filmstrip{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
@media(min-width:760px){.filmstrip{grid-template-columns:repeat(4,1fr)}}
.filmstrip a{position:relative;display:block;padding:clamp(1.3rem,3vw,2rem);background:var(--parchment);color:var(--ink);transition:.4s var(--ease)}
.filmstrip a:hover{background:var(--parchment-2)}
.filmstrip .ch-no{font-family:var(--display);font-size:var(--step-2);color:var(--gold-2);font-weight:700}
.filmstrip .ch-ph{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#6A5C42;margin:.5rem 0 .2rem}
.filmstrip .ch-ti{font-family:var(--display);font-weight:600;font-size:var(--step-1);color:var(--ink)}
.filmstrip .ch-min{font-size:var(--step--1);color:#7A6A4E;font-style:italic;margin-top:.3rem}

/* ===================================================================
   Cold open — four motifs
   =================================================================== */
.motifs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,2vw,1.4rem)}
@media(min-width:760px){.motifs{grid-template-columns:repeat(4,1fr)}}
.motif{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)}
.motif img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);transition:transform 1.2s var(--ease)}
.motif:hover img{transform:scale(1.05)}
.motif__cap{position:absolute;left:0;right:0;bottom:0;padding:1rem .9rem .8rem;background:linear-gradient(transparent,rgba(8,6,4,.9));color:#F3ECDD}
.motif__cap .rn{font-family:var(--display);font-style:italic;color:var(--gold-soft);font-size:var(--step-1)}
.motif__cap .nm{font-family:var(--display);font-weight:600;font-size:var(--step-0)}
.motif__cap .sb{font-size:.78rem;color:#C8BCA2;font-style:italic}

.screenbox{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.4rem);border:1px solid var(--rule);border-radius:4px;padding:clamp(1.4rem,3vw,2rem)}
@media(min-width:680px){.screenbox{grid-template-columns:1fr 1fr}}
.screenbox h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .6rem}

/* ===================================================================
   Act opener (cinematic full-bleed)
   =================================================================== */
.acthead{position:relative;min-height:88svh;display:grid;align-items:end;overflow:hidden;color:#F4ECDB;isolation:isolate}
.acthead__media{position:absolute;inset:0;z-index:-2}
.acthead__media img,.acthead__media video{width:100%;height:100%;object-fit:cover}
.acthead__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,6,4,.5),rgba(8,6,4,.05) 40%,rgba(8,6,4,.55) 78%,rgba(8,6,4,.95))}
.acthead__inner{width:var(--maxw);margin-inline:auto;padding-bottom:clamp(2.5rem,7vh,5rem)}
.acthead__no{font-family:var(--display);font-weight:900;font-size:clamp(5rem,18vw,15rem);line-height:.8;color:var(--gold-soft);text-shadow:0 6px 30px rgba(0,0,0,.92),0 3px 9px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7);margin-bottom:-.06em;letter-spacing:-.02em}
.acthead .eyebrow{color:var(--gold-soft)}
.acthead h2{font-family:var(--display);font-weight:800;font-size:var(--step-5);line-height:.96;letter-spacing:-.02em;margin:.25em 0 .35em}
.acthead__sub{font-style:italic;font-size:var(--step-2);max-width:30ch;color:#EFE6D2}
.actmins{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}

/* the "turn" band in Act II */
.turn{position:relative;padding-block:clamp(3rem,8vh,6rem);text-align:center;overflow:hidden}
.turn__inner{width:min(720px,90vw);margin-inline:auto}
.turn__line{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-3);line-height:1.18;color:#EAD9B4}
.turn__small{margin-top:1.2rem;color:#B6A88C;font-size:var(--step--1);letter-spacing:.06em}

/* full-bleed quote interlude */
.interlude{position:relative;padding-block:clamp(4rem,12vh,9rem);text-align:center;overflow:hidden;isolation:isolate;color:#F4ECDB}
.interlude__media{position:absolute;inset:0;z-index:-2}
.interlude__media img,.interlude__media video{width:100%;height:100%;object-fit:cover}
.interlude__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,6,4,.82),rgba(8,6,4,.5),rgba(8,6,4,.82)),rgba(8,6,4,.34)}
.interlude q{quotes:none;font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-4);line-height:1.14;display:block;width:min(900px,90vw);margin-inline:auto}
.interlude .src{margin-top:1.4rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft)}

/* ===================================================================
   Trailer
   =================================================================== */
.trailer{position:relative}
.trailer__frame{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:var(--ink-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.trailer__frame img,.trailer__frame video{width:100%;height:100%;object-fit:cover}
.trailer__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#F4ECDB;background:radial-gradient(60% 60% at 50% 50%,rgba(8,6,4,.25),rgba(8,6,4,.6))}
.trailer__play .disc{width:84px;height:84px;border-radius:50%;border:1.5px solid rgba(244,236,219,.8);display:grid;place-items:center;transition:.4s var(--ease);backdrop-filter:blur(3px)}
.trailer__play:hover .disc{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:scale(1.06)}
.trailer__play .disc svg{width:30px;height:30px;margin-left:4px}
.trailer__play .lbl{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase}
.trailer__play.is-hidden{opacity:0;pointer-events:none}

/* ===================================================================
   Downloads
   =================================================================== */
.downloads{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem)}
@media(min-width:760px){.downloads{grid-template-columns:1fr 1fr}}
.dl-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,1.8rem);align-items:start;border:1px solid var(--rule);border-radius:6px;padding:clamp(1.2rem,3vw,1.8rem);background:var(--parchment-2);transition:.4s var(--ease)}
.dl-card:hover{background:var(--parchment-3);transform:translateY(-3px)}
.dl-card__cover{width:clamp(96px,16vw,140px);aspect-ratio:8.5/11;border-radius:3px;overflow:hidden;box-shadow:0 14px 30px -16px rgba(0,0,0,.5);background:#fff}
.dl-card__cover img{width:100%;height:100%;object-fit:cover}
.dl-card h3{font-family:var(--display);font-weight:700;font-size:var(--step-1);margin:.1rem 0 .3rem;line-height:1.1}
.dl-card .meta{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.dl-card p{font-size:var(--step--1);color:var(--ink-soft);margin:0 0 1.1rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:.7rem 1.1rem;border-radius:999px;background:var(--pine);color:var(--parchment);transition:.35s var(--ease)}
.btn:hover{background:var(--pine-deep)}
.btn--ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn--ghost:hover{background:var(--accent);color:var(--parchment)}
.btn svg{width:15px;height:15px}

/* ===================================================================
   Fields + Scholarship
   =================================================================== */
.fields{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem)}
@media(min-width:820px){.fields{grid-template-columns:repeat(3,1fr)}}
.field{border-top:2px solid var(--accent);padding-top:1.1rem}
.field .rn{font-family:var(--display);font-weight:800;font-size:var(--step-2);color:var(--accent-2)}
.field h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:.4rem 0 .6rem}
.field p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.55}

.sources{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:2.4rem}
@media(min-width:820px){.sources{grid-template-columns:repeat(3,1fr)}}
.source h5{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .5rem;border-bottom:1px solid var(--rule);padding-bottom:.5rem}
.source p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.55}

/* ===================================================================
   Colophon / footer
   =================================================================== */
.colophon{text-align:center}
.colophon__q{font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-3);color:var(--gold-soft);line-height:1.2;width:min(820px,90vw);margin:0 auto 2.6rem}
.colophon__marks{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,3.5rem);flex-wrap:wrap;margin-bottom:2rem}
.colophon__marks img{height:40px;width:auto;opacity:.92}
.colophon__by{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:2}
.footnote{margin-top:2.6rem;font-size:.74rem;color:var(--muted);width:min(760px,90vw);margin-inline:auto;line-height:1.6}

/* word card (untranslated Wôpanâak) */
.wordcard{display:inline-flex;flex-direction:column;gap:.3rem;border:1px solid var(--accent-2);border-radius:6px;padding:1.1rem 1.6rem;background:rgba(196,154,69,.08)}
.wordcard .w{font-family:var(--display);font-weight:700;font-size:var(--step-2);color:var(--accent)}
.wordcard .t{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ===================================================================
   Motion (JS reveal)
   =================================================================== */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

.parallax{will-change:transform}

/* butterfly seam */
.seam{position:absolute;left:0;right:0;height:0;z-index:30;pointer-events:none}
.seam svg{position:absolute;width:38px;height:38px;color:var(--gold-soft);opacity:0}

/* ===================================================================
   Reduced motion
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .scrollcue .ln,.sound.is-playing .sound__eq i{animation:none !important}
  .hero__media video,.acthead__media video,.interlude__media video{display:none !important}
}

/* small screens */
@media(max-width:620px){
  .hero__inner{padding-top:24vh}
  .brandmark img{height:22px}
  .sound{padding:.4rem .65rem}
}