/* D2SB — Dare to Seek Beyond
   html.motion  = animated mode (set in <head>, removed for reduced motion or if JS fails)
   html:not(.motion) = static mode: everything visible, no pins, sections carry their own backgrounds */

:root{
  --ink:#07070a;--bone:#ebe5d9;--ember:#f0672e;
  --fg-rgb:235 229 217;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(1.25rem,3.4vw,3.5rem);
  --gap:clamp(1rem,2vw,2rem);
  --top:clamp(5rem,12vh,7.5rem);
  --bottom:clamp(4.25rem,8vh,5.5rem);
  --orb:clamp(10rem,30vmin,20rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{--fg-rgb:7 7 10}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.is-loading,html.is-loading body{overflow:hidden}
body{margin:0;background:var(--ink);color:rgb(var(--fg-rgb));font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,blockquote{margin:0;padding:0;font-weight:400}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-style:italic}
b{font-weight:400}
::selection{background:var(--ember);color:var(--ink)}
:focus-visible{outline:1px solid var(--ember);outline-offset:4px}

.skip{position:fixed;top:.75rem;left:.75rem;z-index:200;padding:.6rem 1rem;background:var(--bone);color:var(--ink);font:400 .75rem var(--mono);transform:translateY(-300%)}
.skip:focus{transform:none}

/* film grain over everything below the chrome */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
.label{font:400 .6875rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.body{font:400 clamp(.95rem,1.15vw,1.125rem)/1.5 var(--sans);color:rgb(var(--fg-rgb)/.72)}
.display{font:400 clamp(3.25rem,15.5vw,17rem)/.86 var(--serif);letter-spacing:-.025em}
.display.md{font-size:clamp(2.75rem,9.5vw,10rem);line-height:.9}
.link{position:relative;padding-bottom:.25em}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:0 50%}
.link:hover::after{animation:redraw .9s var(--ease)}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:100% 50%}45%{transform:scaleX(0);transform-origin:100% 50%}46%{transform:scaleX(0);transform-origin:0 50%}100%{transform:scaleX(1);transform-origin:0 50%}}

/* split text masks: padding keeps descenders and italic overhang inside the clip */
[data-chars]{display:block;overflow:hidden;padding:.08em .08em .17em;margin:-.08em -.08em -.17em}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;will-change:transform}
.line{display:block;overflow:hidden;padding:.06em .08em .17em 0;margin:-.06em -.08em -.17em 0}
.line-i{display:block;will-change:transform}

/* ---------- fixed layers ---------- */
.gl,.veil{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;pointer-events:none}
.gl{z-index:0;background:
  radial-gradient(circle at 64% 40%,#060608 0 14vmin,rgb(255 196 150/.9) 14.3vmin,rgb(240 103 46/.38) 19vmin,transparent 44vmin),
  linear-gradient(to bottom,#07070a 0,#0f0b10 40%,#3a1a12 57.6%,#120b0c 58%,#07070a 100%)}
.gl canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.gl-on .gl canvas{opacity:1}
.veil{z-index:1;background:var(--ink);opacity:0;will-change:opacity,background-color}
html:not(.motion) .veil{display:none}
main{position:relative;z-index:2;overflow-x:clip}
.wrap{width:100%;padding-inline:var(--pad)}

/* ---------- preloader ---------- */
.preloader{display:none;position:fixed;inset:0;z-index:90;flex-direction:column;justify-content:space-between;padding:1.25rem var(--pad) var(--bottom);background:var(--ink);color:var(--bone)}
.motion .preloader{display:flex}
.pre-top{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;font:400 .6875rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pre-top span:last-child{text-align:right}
.pre-count{display:flex;overflow:hidden;font:400 clamp(6rem,25vw,23rem)/.8 var(--serif);letter-spacing:-.03em;padding-bottom:.06em}
.pre-count span{display:block;width:.5em;text-align:center;transition:opacity .4s}
.pre-count .dim{opacity:.2}
.pre-line{position:absolute;left:0;right:0;bottom:0;height:2px}
.pre-line i{display:block;height:100%;background:var(--ember);transform:scaleX(0);transform-origin:0 50%}

/* ---------- chrome ---------- */
.nav,.hud{position:fixed;left:0;right:0;z-index:50;color:var(--bone);mix-blend-mode:difference}
.nav{top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:1rem;padding:1.25rem var(--pad);font:400 .6875rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.brand{justify-self:start;font:400 1.5rem/1 var(--serif);letter-spacing:-.01em;text-transform:none}
.nav>.link{justify-self:end}
.nav-name{display:inline-block;margin-left:1.4em;opacity:.6}
.hud{bottom:0;display:flex;align-items:center;gap:1rem;padding:1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom,0px));pointer-events:none;white-space:nowrap}
.hud b{font-variant-numeric:tabular-nums}
.hud-bar{position:relative;flex:1;height:1px;background:rgb(235 229 217/.25)}
.hud-bar i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:0 50%}
/* chapter ticks, placed by JS */
.hud-bar em{position:absolute;top:-3px;width:1px;height:7px;background:currentColor;opacity:.55}

.cursor{display:none;position:fixed;inset:0;z-index:100;pointer-events:none;mix-blend-mode:difference}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}
.cursor i{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px;background:var(--bone)}
.cursor-ring{width:44px;height:44px;margin:-22px;border:1px solid var(--bone)}

/* ---------- chapters ---------- */
.ch{position:relative}
.ch-head{display:flex;align-items:baseline;gap:1rem;padding-top:var(--top)}
.ch-num{font:italic 400 clamp(2.75rem,5.5vw,5rem)/.8 var(--serif);letter-spacing:-.02em;margin-right:.25rem}
.rule{flex:1;align-self:center;height:1px;background:rgb(var(--fg-rgb)/.28);transform-origin:0 50%}

/* 01 threshold */
.hero{display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;min-height:100svh;padding-top:var(--top);padding-bottom:var(--bottom)}
.hero-meta{display:flex;justify-content:space-between;gap:1rem}
.hero-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.hero-title{grid-column:1/-1;grid-row:1}
.hero-title .l2{margin-left:.82em}
.lede{grid-column:9/-1;grid-row:1;max-width:23rem;padding-bottom:.9vw}

/* 02 call */
.call-pin .wrap{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:var(--bottom)}
.statement{margin-block:auto;padding-block:2rem;max-width:18ch;font:400 clamp(2.25rem,6.6vw,7.25rem)/1 var(--serif);letter-spacing:-.02em}
.call-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.call-foot p{grid-column:8/-1;max-width:26rem}

/* 03 path: the intro sits beside the track in landscape (and travels with it), above it in portrait */
.path{color:rgb(var(--fg-rgb))}
.path-pin{--intro-w:calc(clamp(2.75rem,9.5vw,10rem)*6.9);display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:var(--bottom);overflow:hidden}
.path-body{position:relative;flex:1;display:flex;flex-direction:column}
.track-intro{position:absolute;top:0;bottom:0;left:var(--pad);z-index:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.25rem,3vh,2.25rem);width:var(--intro-w);will-change:transform}
.track-intro .body{max-width:24rem}
.track{position:relative;flex:1;display:flex;align-items:flex-end;gap:clamp(1.5rem,4vw,4.5rem);width:max-content;padding:1.25rem var(--pad) 0 calc(var(--pad) + var(--intro-w) + 4vw);will-change:transform}
/* card width follows viewport height so head + plate + caption always fit one pinned screen */
.card{flex:none;display:flex;flex-direction:column;gap:1.1rem;width:clamp(15rem,min(44vw,35svh),27rem)}
.card:nth-of-type(even){margin-bottom:4vh}
.plate{position:relative;aspect-ratio:4/5;max-height:48svh;overflow:hidden;background:var(--ink);color:var(--bone);will-change:transform}
.plate-i{position:absolute;inset:-6% -14%;background:radial-gradient(circle at 38% 64%,rgb(240 103 46/.5),transparent 55%);will-change:transform}
.plate svg{display:block;width:100%;height:100%}
.plate svg *{vector-effect:non-scaling-stroke}
.plate .label{position:absolute;top:1rem;left:1rem}
.card-meta{display:grid;grid-template-columns:auto 1fr;column-gap:1.25rem;align-items:baseline;padding-top:1rem;border-top:1px solid rgb(var(--fg-rgb)/.28)}
.card-meta h3{font:400 clamp(2rem,3.6vw,3.5rem)/1 var(--serif);letter-spacing:-.02em}
.card-meta p{grid-column:2;max-width:19rem;margin-top:.5rem}

/* 04 ascent: one viewport tall so it can pin; type is capped by height as well as width */
.ascent .wrap{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:var(--bottom)}
.ascent .display{margin-top:clamp(1.5rem,7vh,5rem);font-size:clamp(2.75rem,min(9.5vw,15svh),10rem)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:2rem;margin-top:auto;padding-top:clamp(2rem,6vh,4rem)}
.stats li{position:relative;display:flex;flex-direction:column;gap:.6rem;padding-top:1rem}
.stats li::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgb(var(--fg-rgb)/.28);transform:scaleX(var(--s,1));transform-origin:0 50%}
.stats strong{display:block;margin-top:clamp(1rem,4vh,3rem);font:400 clamp(3.5rem,9vw,10rem)/.9 var(--serif);font-size:clamp(3.5rem,min(9vw,16svh),10rem);letter-spacing:-.03em;white-space:nowrap}
.stats sup{font-size:.36em;vertical-align:top;line-height:1.5;margin-left:.08em;color:var(--ember)}
.stats .body{max-width:16rem}

/* 05 summit: the sky starts in pure ink so the panel has no visible edge as it arrives */
.summit-panel{position:relative;display:flex;min-height:100vh;min-height:100svh;overflow:hidden;background:linear-gradient(180deg,#07070a 0,#0b090e 12%,#1c0f13 40%,#5c2515 72%,#d9602f 100%)}
.ridges{position:absolute;inset:0}
.ridges i{position:absolute;left:-4%;right:-4%;bottom:-14%;will-change:transform}
.ridges .sun{left:72%;right:auto;top:60%;bottom:auto;width:68vmin;height:68vmin;margin:-34vmin;border-radius:50%;background:radial-gradient(circle closest-side,#ffe6cc 0,#ffd2a6 8%,rgb(255 150 84/.72) 10.5%,rgb(240 103 46/.36) 30%,rgb(240 103 46/.1) 62%,transparent 100%)}
/* the last ridge rises over everything to close the chapter in ink (motion only, positioned by GSAP) */
.night{display:none;position:absolute;left:0;right:0;top:-18%;height:120%;z-index:2;background:var(--ink);clip-path:polygon(0 100%,0 9%,8% 4%,17% 11%,27% 2%,38% 9%,49% 0,60% 8%,71% 3%,82% 12%,92% 5%,100% 10%,100% 100%);will-change:transform}
.motion .night{display:block}
.r1{height:64%;background:#3b1910;clip-path:polygon(0 100%,0 58%,9% 44%,17% 52%,29% 22%,38% 41%,47% 30%,58% 8%,69% 38%,78% 27%,88% 49%,100% 34%,100% 100%)}
.r2{height:50%;background:#1c0e0c;clip-path:polygon(0 100%,0 40%,12% 56%,23% 30%,34% 52%,46% 18%,57% 46%,68% 34%,80% 12%,91% 44%,100% 30%,100% 100%)}
.r3{height:34%;background:var(--ink);clip-path:polygon(0 100%,0 52%,10% 30%,21% 55%,33% 38%,44% 60%,56% 26%,67% 52%,79% 40%,90% 58%,100% 36%,100% 100%)}
.summit .wrap{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:var(--bottom)}
.quote{margin-block:auto;padding-block:2rem}
.quote p{max-width:19ch;font:400 clamp(2.25rem,6.2vw,6.75rem)/1 var(--serif);font-size:clamp(2.25rem,min(6.2vw,11svh),6.75rem);letter-spacing:-.02em}
.quote footer{margin-top:clamp(1.5rem,4vh,2.5rem);opacity:.75}

/* 06 beyond: in motion mode a lead-in of empty scroll lets the ink dissolve back into the eclipse */
.motion .beyond{padding-top:50vh;padding-top:50svh}
.beyond-in{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:var(--bottom)}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding-block:clamp(2rem,6vh,4rem);text-align:center}
.finale{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(var(--orb)*.62);font-size:clamp(3rem,11.5vw,12.5rem);pointer-events:none}
.orb{position:absolute;top:50%;left:50%;z-index:1;display:grid;place-items:center;width:var(--orb);height:var(--orb);margin:calc(var(--orb)/-2);border-radius:50%;background:#050507;box-shadow:0 0 calc(50px + var(--hold,0)*90px) calc(4px + var(--hold,0)*22px) rgb(240 103 46/.5),inset 0 0 0 1px rgb(255 205 165/.6);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.motion.gl-on .orb{background:none;box-shadow:none}
.orb:focus-visible{outline-offset:10px}
.orb svg{position:absolute;inset:-7%;width:114%;height:114%;overflow:visible;transform:rotate(-90deg);transition:transform 1s var(--ease)}
.orb:hover svg,.orb.is-holding svg{transform:rotate(-90deg) scale(1.05)}
.orb circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.orb-track{stroke:rgb(235 229 217/.3)}
.orb-fill{stroke:var(--ember);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.orb-label{position:relative}
.orb-status{min-height:1.35em;text-align:center;opacity:.75}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:clamp(1.75rem,5vh,3.5rem);padding-top:1rem;border-top:1px solid rgb(var(--fg-rgb)/.28)}

/* ---------- static mode ---------- */
html:not(.motion) .call,html:not(.motion) .ascent,html:not(.motion) .beyond{background:var(--ink)}
html:not(.motion) .path{background:var(--bone)}
html:not(.motion) .path-pin{min-height:0;padding-bottom:clamp(4rem,10vh,7rem)}
html:not(.motion) .track-intro{position:static;width:auto;margin:0;padding:clamp(3rem,8vh,5rem) var(--pad) 0}
html:not(.motion) .track{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start;gap:3rem clamp(1.5rem,4vw,4.5rem);width:auto;padding:clamp(2.5rem,6vh,4rem) var(--pad) 0}
html:not(.motion) .card{width:auto;margin-bottom:0}

/* ---------- portrait (iPad upright, phones) ---------- */
@media (max-aspect-ratio:1/1){
  /* path: intro stacks above the track; two whole cards fit the width at rest */
  .track-intro{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);align-items:end;column-gap:var(--gap);row-gap:1rem;width:auto;margin-top:clamp(1.5rem,4vh,3rem);padding-inline:var(--pad)}
  .track-intro .display{font-size:clamp(2.5rem,8.4vw,7rem)}
  .track{gap:7vw;padding-left:var(--pad)}
  .card{width:clamp(15rem,min(42vw,40svh),27rem)}
}
@media (max-aspect-ratio:1/1) and (min-width:701px){
  /* ascent: three full-width rows share the height instead of three columns huddled at one end */
  .stats{flex:1;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;row-gap:0;margin-top:clamp(2rem,5vh,4rem);padding-top:0}
  .stats li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);grid-template-rows:auto 1fr;column-gap:var(--gap);align-items:end;padding-bottom:clamp(1rem,2.4vh,2rem)}
  .stats li .label{grid-column:1/-1;align-self:start}
  .stats strong{margin-top:0;font-size:clamp(4.5rem,min(17vw,11svh),13rem)}
  .stats .body{padding-bottom:.55em}
}

/* ---------- small screens ---------- */
@media (max-width:700px){
  .track-intro{grid-template-columns:minmax(0,1fr)}
  .card:nth-of-type(even){margin-bottom:0}
  .plate{max-height:32svh}
  .nav-name,.pre-top span:nth-child(2){display:none}
  .pre-top{grid-template-columns:1fr 1fr}
  .hero-meta{flex-direction:column;gap:.35rem}
  .lede{grid-column:1/-1;grid-row:auto;margin-top:1.5rem;padding-bottom:0}
  .hero-title .l2{margin-left:.4em}
  .call-foot p{grid-column:1/-1}
  .ch-head .label:last-child{display:none}
  .stats{grid-template-columns:1fr;row-gap:1.5rem}
  .stats strong{margin-top:.5rem;font-size:clamp(3.5rem,20vw,7rem)}
  .foot{flex-direction:column}
}