/* My story page. Loads after ../style.css. Dark hero scene, light reading sections, dark close. */
body.story{background:var(--bg);color:var(--fg)}
body.story .nav{--fg:#EEF3F8;--accent:#2FD6F2;color:#EEF3F8;background:rgba(10,18,32,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(238,243,248,.1);padding-top:18px;padding-bottom:18px}

/* hero */
.st-hero{position:relative;height:230svh;background:#0A1220;--bg:#0A1220;--fg:#EEF3F8;--mute:#9FADBF;--line:rgba(238,243,248,.16);--accent:#2FD6F2;--on-accent:#04101C;color:var(--fg)}
.st-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
#sc{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.st-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,32,.94) 0%,rgba(10,18,32,.7) 40%,rgba(10,18,32,.05) 62%,rgba(10,18,32,0) 100%);pointer-events:none}
.st-wrap{position:relative;width:100%}
.st-copy{max-width:600px;display:flex;flex-direction:column;gap:22px}
.st-copy .eyebrow{margin-bottom:0}
.st-h1{font-size:clamp(2.6rem,5.6vw,6rem);line-height:.98;letter-spacing:-.045em}
.st-h1 em{color:var(--accent)}
.st-lede{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.65;color:#D3DCE7;max-width:52ch}
.st-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:var(--mute);font-size:.72rem;opacity:.8}
.st-scroll::after{content:"";display:block;width:1px;height:28px;background:var(--accent);margin:8px auto 0}

/* chapters */
.chap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);padding-block:clamp(56px,10vh,120px);border-top:1px solid var(--line)}
.chap-label{position:sticky;top:110px;align-self:start;display:grid;gap:12px}
.num-label{color:var(--accent)}
.chap-h{font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1.02}
.chap-body{display:grid;gap:22px;align-content:start}
.chap-body p{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.7;max-width:62ch}
.shot{margin:14px 0 0;border-radius:14px;overflow:hidden;background:#0A1220;box-shadow:0 24px 60px rgba(11,18,32,.22)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.shots2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(14px,2vw,26px);align-items:start;margin-top:14px}
.shots2 .shot{margin:0}
.shots2 .shot:nth-child(2){margin-top:clamp(28px,6vw,80px)}
.facts{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 24px 22px;display:grid;gap:8px}
.facts b{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,4.4vw,4.2rem);letter-spacing:-.04em;line-height:1;color:var(--accent)}
.facts span{color:var(--mute);font-size:.8rem;letter-spacing:.05em;line-height:1.5}

/* what I bring */
.bring-sec{padding-block:clamp(56px,10vh,120px);border-top:1px solid var(--line)}
.bring{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 28px;display:grid;gap:16px;align-content:start}
.bcard .mono{color:var(--accent);font-size:.95rem}
.bcard p:last-child{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.02em;line-height:1.3}

/* how I lead */
.lead-sec{padding-block:clamp(56px,10vh,120px);border-top:1px solid var(--line)}
.lead-big{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,5rem);letter-spacing:-.04em;line-height:1;max-width:18ch;text-wrap:balance}
.lead-small{margin-top:28px;font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.7;max-width:60ch;color:var(--mute)}

/* recognition */
.recog-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.recog-list li{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.5;padding:16px 0;border-bottom:1px solid var(--line)}
.recog-list b{font-family:var(--display);font-weight:700;margin-right:.5em}
.recog-list span{color:var(--mute)}

/* closing */
.st-close{background:#0A1220;--bg:#0A1220;--fg:#EEF3F8;--mute:#9FADBF;--line:rgba(238,243,248,.16);--accent:#2FD6F2;--on-accent:#04101C;color:var(--fg);padding-block:clamp(70px,14vh,170px)}
.close-big{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5.4vw,5.6rem);letter-spacing:-.045em;line-height:1;max-width:20ch;text-wrap:balance}
.close-small{margin-top:26px;font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.65;max-width:50ch;color:#D3DCE7}
.close-cta{margin-top:clamp(30px,6vh,56px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* reveal: boxes tilt in with a little 3D, like the home page scenes */
.js-st .rv{opacity:0;transform:perspective(1100px) rotateX(10deg) rotateY(-12deg) translateY(54px) scale(.95);transform-origin:50% 100%;transition:opacity .9s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js-st .rv.rv-r{transform:perspective(1100px) rotateX(10deg) rotateY(12deg) translateY(54px) scale(.95)}
.js-st .rv.in{opacity:1;transform:none}
.facts li:nth-child(2).rv,.bcard:nth-child(2).rv{transition-delay:.12s}
.facts li:nth-child(3).rv,.bcard:nth-child(3).rv{transition-delay:.24s}
.facts li:nth-child(4).rv{transition-delay:.36s}

@media (max-width:900px){
  .chap{grid-template-columns:1fr}
  .chap-label{position:static}
  .bring{grid-template-columns:1fr}
  .st-hero{height:210svh}
  .st-stick{align-items:flex-start}
  .st-copy{padding-top:clamp(92px,14vh,130px);gap:16px}
  .st-shade{background:linear-gradient(180deg,rgba(10,18,32,.95) 0%,rgba(10,18,32,.8) 38%,rgba(10,18,32,.1) 52%,rgba(10,18,32,0) 100%)}
  .st-h1{font-size:clamp(2.2rem,10vw,3.4rem)}
  .st-lede{font-size:.92rem;line-height:1.5}
  .st-scroll{display:none}
}
@media (max-width:560px){.shots2{grid-template-columns:1fr}.shots2 .shot:nth-child(2){margin-top:0}.facts{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.js-st .rv{opacity:1;transform:none;transition:none}#sc{opacity:1}}