/* ============================================================
   ABOUT PAGE · scroll-story hero + journey timeline
   Editorial Light skin. Imports after tokens.css + site.css.
   Frame sequence lives at assets/about/frames/frame-001.jpg …
   (exported from the Higgsfield clip). Until frames exist the
   stage runs in placeholder mode: dark surface + slow glow.
   ============================================================ */

::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- scroll story ---------- */
.story{position:relative;height:440vh;background:var(--k-1)}
.story__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
.story__canvas,.story__placeholder{
  position:absolute;inset:0;width:100%;height:100%;
}
.story__canvas{object-fit:cover;display:none}
.story--frames .story__canvas{display:block}
.story--frames .story__placeholder{display:none}
.story__placeholder{
  background:var(--dark-surface);
}
.story__placeholder::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(560px 420px at 50% 62%,rgba(185,144,62,.22) 0%,transparent 60%);
  transform:scale(var(--zoom,1));
  transition:transform .1s linear;
}
.story__shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,.12) 34%,rgba(10,9,8,.14) 62%,rgba(10,9,8,.6) 100%);
}
.story--frames .story__shade{
  background:linear-gradient(180deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,.08) 36%,rgba(10,9,8,.1) 60%,rgba(10,9,8,.58) 100%);
}

/* opening title */
.story__opening{
  position:absolute;left:50%;top:18vh;transform:translateX(-50%);
  width:min(96vw,1400px);text-align:center;white-space:nowrap;
}
.story__opening h1{
  color:var(--paper-hi);
  font-weight:900;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(3.2rem,11vw,9.5rem);
  text-shadow:0 4px 40px rgba(10,9,8,.5);
}
.story__opening h1 em{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  color:var(--gold-2);letter-spacing:-.01em;
}

/* story beats */
.story__beat{
  position:absolute;left:50%;top:26vh;transform:translate(-50%,20px);
  width:min(88vw,760px);text-align:center;opacity:0;
  color:var(--paper-hi);
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  text-shadow:0 3px 28px rgba(10,9,8,.65);
}

/* closing card */
.story__close{
  position:absolute;left:50%;bottom:14vh;transform:translate(-50%,24px);
  width:min(92vw,900px);text-align:center;opacity:0;
}
.story__close p{
  color:var(--paper-hi);font-weight:900;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.8rem,4.4vw,3.6rem);text-shadow:0 4px 36px rgba(10,9,8,.6);
}
.story__close p em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--gold-2)}

/* scroll hint */
.story__hint{
  position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--paper-hi);opacity:.85;
  font-family:var(--font-mono);font-weight:600;font-size:.74rem;
  letter-spacing:.3em;text-transform:uppercase;
}
.story__hint svg{animation:hintdip 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hintdip{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- journey timeline ---------- */
.journey{background:var(--dark-surface);color:var(--paper);padding:110px 0 120px}
.journey__head{margin-bottom:80px}
.journey__head h2{
  color:var(--paper-hi);font-weight:900;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(2.6rem,7vw,5.4rem);
}
.journey__head h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--gold-2)}
.journey__head p{
  font-family:var(--font-accent);font-style:italic;color:var(--mut-d2);
  font-size:1.2rem;margin-top:18px;max-width:46rem;
}

.journey__track{position:relative;display:grid;gap:76px}
.journey__track::before{
  content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--gold) 0%,rgba(185,144,62,.25) 100%);
  border-radius:2px;
}
.stop{
  position:relative;padding-left:72px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.stop::before{
  content:"";position:absolute;left:11px;top:14px;width:18px;height:18px;border-radius:50%;
  background:var(--k-1);border:3px solid var(--gold);
  box-shadow:0 0 0 6px rgba(185,144,62,.15);
}
.stop__year{
  font-family:var(--font-mono);font-weight:600;font-size:.85rem;
  letter-spacing:.28em;color:var(--gold-2);text-transform:uppercase;
}
.stop h3{
  color:var(--paper-hi);font-weight:900;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(1.6rem,3.4vw,2.5rem);margin:12px 0 16px;
}
.stop h3 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--gold-2)}
.stop p{color:var(--mut-d2);font-size:1.06rem;line-height:1.65;max-width:34rem}
.stop__media{position:relative}
.stop__media img{
  border-radius:18px;border:1px solid var(--line-d);
  aspect-ratio:4/3;object-fit:cover;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.stop__media video{
  border-radius:18px;border:1px solid var(--line-d);
  aspect-ratio:4/3;object-fit:contain;width:100%;
  background:#000;display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.stop:nth-child(even) .stop__media{order:-1}

/* photo placeholder until Zach sends the real shot */
.slot{
  aspect-ratio:4/3;border-radius:18px;border:1px dashed rgba(185,144,62,.45);
  background:
    radial-gradient(300px 220px at 70% 20%,rgba(185,144,62,.12) 0%,transparent 60%),
    var(--k-2);
  display:grid;place-items:center;text-align:center;padding:24px;
}
.slot span{
  font-family:var(--font-mono);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mut-d);line-height:2;
}

/* ---------- documentary ---------- */
.docu{background:var(--k-1);padding:100px 0;border-top:1px solid var(--line-d)}
.docu__head{text-align:center;max-width:52rem;margin:0 auto 44px}
.docu__head h2{
  color:var(--paper-hi);font-weight:900;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(2rem,4.6vw,3.4rem);
}
.docu__head h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--gold-2)}
.docu__head p{
  font-family:var(--font-accent);font-style:italic;color:var(--mut-d2);
  font-size:1.15rem;line-height:1.6;margin-top:16px;text-wrap:balance;
}
.docu__player{
  max-width:920px;margin:0 auto;padding:10px;border-radius:18px;
  background:var(--k-2);border:1px solid rgba(185,144,62,.35);
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}

/* ---------- proof band ---------- */
.proof{background:var(--k-1);padding:96px 0;border-top:1px solid var(--line-d)}
.proof h2{
  color:var(--paper-hi);font-weight:900;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(1.9rem,4.2vw,3rem);max-width:24ch;
}
.proof h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--gold-2)}
.proof p{color:var(--mut-d2);margin:20px 0 0;max-width:56ch;font-size:1.06rem;line-height:1.65}
.proof .el-rule{margin-top:36px}

/* ---------- free guides on homepage ---------- */
.guides-home{background:var(--paper);padding:96px 0}
.guides-home h2{
  font-weight:900;letter-spacing:-.025em;font-size:clamp(1.8rem,3.8vw,2.7rem);
  text-align:center;
}
.guides-home h2 em{font-family:var(--font-accent);font-style:italic;font-weight:500;color:var(--gold)}
.guides-home__sub{
  font-family:var(--font-accent);font-style:italic;color:var(--taupe);
  text-align:center;font-size:1.12rem;margin:12px 0 40px;
}

/* ---------- centered CTA (about page only) ---------- */
.social{text-align:center}
.social h2{text-wrap:balance}
.social p{margin-left:auto;margin-right:auto;text-wrap:balance}
.social__btns{justify-content:center}

/* ---------- reduced motion / no-js: flatten the story ---------- */
.story.is-static{height:auto}
.story.is-static .story__stage{position:relative;height:auto;min-height:0;padding:120px 0 90px}
.story.is-static .story__stage{display:block}
.story.is-static .story__opening{position:static;transform:none;white-space:normal;margin:0 auto 56px}
.story.is-static .story__beat{
  position:static;transform:none;opacity:1;margin:34px auto;
}
.story.is-static .story__close{position:static;transform:none;opacity:1;margin:64px auto 0}
.story.is-static .story__hint,.story.is-static .story__canvas{display:none}
.story.is-static .story__placeholder,.story.is-static .story__shade{position:absolute;inset:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .stop{grid-template-columns:1fr;gap:24px}
  .stop:nth-child(even) .stop__media{order:0}
  .journey__track{gap:64px}
}
@media (max-width:380px){
  .story__opening{white-space:normal}
}
@media (max-width:620px){
  .stop{padding-left:52px}
  .journey__track::before{left:13px}
  .stop::before{left:5px;width:16px;height:16px}
  .story__opening{top:22vh}
  .story__beat{top:30vh}
}