
:root{--slate:#20282e;--black:#111619;--off:#f2efe8;--red:#dc3027}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--slate);color:var(--off);font-family:'Century Gothic','Avenir Next',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #ff6c62;outline-offset:4px}.skip{position:absolute;top:-80px;left:12px;padding:12px;background:var(--off);color:var(--black);z-index:20}.skip:focus{top:12px}.wrap{width:min(1280px,88%);margin:auto}.nav{position:absolute;top:0;left:6%;right:6%;height:94px;display:flex;align-items:center;justify-content:space-between;z-index:8}.nav img{width:118px;height:80px;object-fit:contain}.nav-links{display:flex;align-items:center;gap:25px}.nav-links a{text-decoration:none;font-size:.87rem;font-weight:700}.nav-links a:last-child{border:1px solid #ffffff99;padding:11px 15px}.nav-links a:hover{text-decoration:underline;text-underline-offset:5px}.hero{position:relative;min-height:720px;height:100svh;isolation:isolate;display:flex;align-items:end;overflow:hidden}.hero-image{position:absolute;inset:0;z-index:-2;background:url('freestyle.webp') 65% center/cover;transform:scale(1.02)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101416e8 0%,#101416bc 38%,#10141608 82%),linear-gradient(0deg,#20282e 0%,transparent 24%)}.hero-copy{padding-bottom:115px}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800}.eyebrow:before{content:"";display:inline-block;width:30px;height:4px;background:var(--red);vertical-align:middle;margin-right:13px}.hero h1{font-size:clamp(3.7rem,9vw,9rem);font-weight:900;line-height:.91;letter-spacing:-.075em;margin:24px 0;max-width:850px}.hero h1 span{color:#f65950}.hero p{font-size:clamp(1.1rem,1.7vw,1.4rem);max-width:570px;line-height:1.5;margin:0 0 30px}.enter{display:inline-flex;align-items:center;gap:25px;background:var(--red);color:white;text-decoration:none;font-weight:800;padding:16px 23px;min-height:54px}.enter:hover{background:#b6231d}.hero-foot{position:absolute;bottom:32px;right:6%;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}.marquee{background:var(--red);color:white;text-align:center;padding:13px 10px;font-size:.8rem;letter-spacing:.16em;font-weight:900}.setup{padding:110px 0 100px;display:grid;grid-template-columns:1fr 1.7fr;gap:8%}.setup h2{font-size:clamp(2.6rem,5.3vw,5.3rem);line-height:1.02;letter-spacing:-.06em;margin:0}.setup p{font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.6;margin:20px 0 0}.setup small{display:block;color:#cbd0ce;font-size:1rem;margin-top:23px}.scroll-story{position:relative;height:420vh;background:#101619}.stage{position:sticky;top:0;height:100svh;min-height:570px;overflow:hidden;isolation:isolate}.frame{position:absolute;inset:0;opacity:0;transform:scale(1.1);transition:none;will-change:opacity,transform}.frame img{width:100%;height:100%;object-fit:cover}.frame:nth-child(2) img{object-position:70% center}.frame:nth-child(3) img{object-position:50% center}.frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101416eb 0%,#1014168c 46%,#1014161a 86%),linear-gradient(0deg,#10141699,transparent 42%)}.story-copy{position:absolute;left:6%;bottom:12%;width:min(650px,83%);z-index:2;opacity:0;transform:translateY(50px);will-change:opacity,transform}.story-copy .number{color:#ff6c62;font-size:.84rem;font-weight:900;letter-spacing:.18em}.story-copy h2{font-size:clamp(3.1rem,7vw,7.5rem);line-height:.97;letter-spacing:-.075em;margin:20px 0}.story-copy p{font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.55;max-width:590px;margin:0}.story-copy .turn{display:block;margin-top:27px;font-size:.92rem;font-weight:800;color:#ff9992}.progress{position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:3;display:grid;gap:14px}.progress span{height:38px;width:4px;background:#ffffff66}.progress span.on{background:var(--red)}.stage-bottom{position:absolute;bottom:24px;right:6%;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;z-index:3}.after{background:var(--off);color:var(--black);padding:130px 0}.after-inner{display:grid;grid-template-columns:1fr 1.8fr;gap:9%}.after h2{font-size:clamp(3rem,6vw,6.8rem);letter-spacing:-.07em;line-height:1.01;margin:0}.after h2 span{color:var(--red)}.after p{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.65;max-width:660px}.after .small{font-size:1rem}.close{padding:100px 0;background:var(--red)}.close-inner{display:flex;align-items:end;justify-content:space-between;gap:35px}.close h2{font-size:clamp(3rem,6vw,6.5rem);line-height:1;letter-spacing:-.07em;margin:20px 0;max-width:850px}.close p{font-size:1.15rem;line-height:1.5}.social{display:flex;gap:12px;flex-wrap:wrap}.social a{border:1px solid white;text-decoration:none;font-weight:800;padding:14px 18px;white-space:nowrap}.social a:hover{background:white;color:var(--red)}footer{background:var(--black);padding:28px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.9rem}.footer-inner img{width:100px;height:70px;object-fit:contain}.footer-inner a{text-underline-offset:5px}
@media(max-width:800px){.hero-image{background-position:68% center}.hero:after{background:linear-gradient(0deg,#20282e 0%,#101416aa 35%,#10141644 100%)}.hero-copy{padding-bottom:110px}.setup,.after-inner{grid-template-columns:1fr;gap:24px}.setup{padding:80px 0}.scroll-story{height:400vh}.frame:after{background:linear-gradient(0deg,#101416e8 0%,#10141688 52%,#10141618 100%)}.story-copy{bottom:13%}.close-inner{display:block}.social{margin-top:30px}}@media(max-width:520px){.nav{height:75px}.nav img{width:85px;height:64px}.nav-links{gap:12px}.nav-links a{font-size:.75rem}.nav-links a:first-child{display:none}.nav-links a:last-child{padding:9px}.hero{min-height:650px}.hero h1{font-size:clamp(3.4rem,14vw,5.5rem)}.hero-foot{bottom:20px}.story-copy{left:6%;bottom:14%;width:83%}.story-copy h2{font-size:clamp(3rem,12vw,4.6rem)}.story-copy p{font-size:1.08rem}.story-copy .turn{font-size:.85rem;margin-top:16px}.progress{right:3%}.progress span{height:28px}.after,.close{padding:80px 0}.footer-inner{flex-wrap:wrap}.footer-inner span{width:55%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-story{height:auto}.stage{position:relative;height:auto;min-height:0}.frame,.story-copy{position:relative;opacity:1!important;transform:none!important;inset:auto}.frame{height:45vh;min-height:300px}.frame:after{display:none}.story-copy{padding:35px 0 70px}.story-copy h2{font-size:3.2rem}.progress,.stage-bottom{display:none}}

/* Semi-dark surfaces, clear launch state, and practical next steps. */
:root{--slate:#303a40;--black:#1b2227;--off:#f2efe8;--red:#c92d25}.hero:after{background:linear-gradient(90deg,#182126e6 0%,#182126a6 40%,#18212608 85%),linear-gradient(0deg,#303a40 0%,transparent 24%)}.launch-label{display:inline-block;border-left:4px solid #fa665d;padding:7px 0 7px 13px;font-size:.875rem;font-weight:800;line-height:1.5;letter-spacing:.1em}.hero h1{font-size:clamp(3.6rem,8.7vw,8.5rem)}.setup{padding-top:95px;padding-bottom:95px}.setup p{max-width:730px}.setup small{line-height:1.65;max-width:730px}.after{background:#e5e4de}.practice{padding:90px 0 110px;background:#36434a}.practice-head{max-width:800px}.practice h2{font-size:clamp(2.7rem,5.3vw,5.5rem);line-height:1.02;letter-spacing:-.06em;margin:24px 0}.practice-head p{font-size:1.2rem;line-height:1.6;max-width:610px}.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:42px}.practice details{border-top:2px solid #9da6a6;padding:22px 0}.practice summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700}.practice summary::-webkit-details-marker{display:none}.practice summary span{font-size:.875rem;color:#ff9c93}.practice summary b{margin-left:auto;font-size:1.3rem;font-weight:400}.practice details[open] summary b{transform:rotate(45deg)}.practice details p{font-size:1.06rem;line-height:1.7}.practice .prompt{color:#fff;border-left:3px solid #fc6b61;padding-left:15px}.close-inner>div:first-child{max-width:810px}.close p{max-width:660px}.close-last{font-weight:700}.close .eyebrow{line-height:1.7}.close .eyebrow:before{background:var(--off)}summary:focus-visible{outline:3px solid #ff9c93;outline-offset:8px}
@media(max-width:800px){.practice-grid{grid-template-columns:1fr;gap:6px}.hero:after{background:linear-gradient(0deg,#303a40 0%,#182126b0 40%,#18212644 100%)}.close-inner{display:block}.practice{padding:70px 0}.launch-label{max-width:90%;font-size:.8rem}.hero h1{font-size:clamp(3.4rem,11.5vw,6rem)}}
@media(prefers-reduced-motion:reduce){.stage{display:flex;flex-direction:column}.frame:nth-child(1){order:1}.story-copy:nth-child(5){order:2}.frame:nth-child(2){order:3}.story-copy:nth-child(6){order:4}.frame:nth-child(3){order:5}.story-copy:nth-child(7){order:6}.frame:nth-child(4){order:7}.story-copy:nth-child(8){order:8}.story-copy{left:auto;width:88%;margin:auto}}

/* Static Socrates reading page. */
:root{--slate:#20282e;--accent:#e0b36a}body{background:var(--slate)}.nav{position:relative;left:auto;right:auto;width:88%;margin:auto}.reading{font-size:1.1875rem;line-height:1.65}.reading section{padding:60px 24px;border-bottom:1px solid #ffffff22}.reading .column{max-width:680px;margin:auto}.reading h1{font-size:clamp(2.8rem,7vw,5.5rem);line-height:1.02;letter-spacing:-.06em;margin:22px 0}.reading h2{font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-.04em;margin:18px 0 28px}.reading h3{font-size:1.3rem}.reading .label{color:var(--accent);font-size:.875rem;letter-spacing:.13em;font-weight:800}.reading .turn{display:block;margin-top:27px;font-size:.92rem;font-weight:800;color:#ff9992}.reading figure{width:min(880px,calc(100vw - 48px));margin:32px 0 32px 50%;transform:translateX(-50%)}.reading figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#303a40;border:1px solid #ffffff26}.reading figcaption{font-size:.875rem;color:#cbd0ce;padding-top:8px}.other-side{border:1px solid var(--accent);border-left:4px solid var(--accent);padding:24px;background:#e0b36a0b;margin:32px 0}.other-side h3{margin-top:0}.choices{display:grid;grid-template-columns:1fr 1fr;gap:28px}.choices ul{padding-left:22px}.choices li{margin:14px 0}.reading a{text-underline-offset:4px}.reading .enter{margin-top:16px}.footer-inner{flex-wrap:wrap}.footer-inner .social{margin:0}.reading .source-links{font-size:1rem}section[id]{scroll-margin-top:20px}@media(max-width:600px){.choices{grid-template-columns:1fr;gap:0}.reading section{padding:44px 24px}.reading figure{width:100vw}.reading figcaption{padding:8px 24px}.other-side{padding:20px}.footer-inner .social{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* Static reading remains complete. Native scroll updates transform/opacity variables. */
:root{--beat-nav-height:49px}
.reading-mode{padding:0 24px 24px;display:flex;gap:12px;flex-wrap:wrap}
.reading-mode button,.chip-options button{border:1px solid #a3a8a7;background:transparent;color:var(--off);border-radius:2px;padding:12px 16px;min-height:44px;cursor:pointer;font-size:1rem}
.reading-mode button[aria-pressed=true],.chip-options button[aria-pressed=true]{border-color:var(--accent);background:#e0b36a18}
.reading-mode button:disabled{opacity:.5;cursor:default}
.reading-mode button:focus-visible,.chip-options button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.beat-markers{position:sticky;top:0;display:flex;justify-content:center;gap:20px;padding:12px 16px;background:var(--slate);z-index:10;border-bottom:1px solid #ffffff22;font-size:.875rem}
.beat-markers a{min-height:24px;text-decoration:none;display:flex;align-items:center}
.beat-markers a[aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.reading section[id]{scroll-margin-top:calc(var(--beat-nav-height) + 16px)}
.beat-copy{max-width:680px;margin:auto;position:relative}
.motion-scene,.opening-near,.opening-lights,.opening-title-echo,.bench-light-patch{display:none}
.scene-stage{position:relative}.reflection[hidden]{display:none}.reflection{margin-top:24px}
.reflection-label,.chip-response{font-size:1rem;line-height:1.6}.chip-options{display:flex;flex-wrap:wrap;gap:10px}.chip-response:empty{display:none}
.experience .beat-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px);gap:40px;max-width:1280px;margin:32px auto 0;position:relative;align-items:start}
.experience .pin-track{position:sticky;top:calc(var(--beat-nav-height) + 16px);height:auto;min-height:0;z-index:3;background:var(--slate)}
.experience .reading .scene-stage{position:relative;top:auto;width:100%;margin:0;transform:none;overflow:hidden;aspect-ratio:16/9;isolation:isolate}
.experience .reading .scene-stage .flat-scene{display:block;width:100%;height:100%;object-fit:contain;opacity:1;transform:none}
.experience .beat-copy{margin:0;width:100%}
.experience .motion-scene{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;visibility:hidden}
.experience .scene-ready .motion-scene,.experience #friend .motion-scene{visibility:visible}
.experience #crowd .scene-ready .flat-scene,.experience #order .scene-ready .flat-scene{opacity:0}
/* Every decorative raster is absolute and transparent; never inherits figure img's background. */
.reading .scene-stage .scene-layer{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:transparent;border:0;transform-origin:50% 100%;will-change:transform}
.experience .crowd-wall{transform:scale(var(--wall-scale,1.02))}
.experience .crowd-back{transform:translate3d(var(--back-x,-6%),0,0) scale(var(--back-scale,1.16))}
.experience .crowd-mid{transform:translate3d(var(--mid-x,9%),0,0) scale(var(--mid-scale,1.25))}
.experience .crowd-front{transform:translate3d(var(--front-x,-12%),0,0) scale(var(--front-scale,1.34))}
.experience .crowd-voices{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;gap:4px;padding:8px;font-size:clamp(.75rem,1.2vw,1rem);line-height:1.35;z-index:2}
.experience .crowd-voices span{width:fit-content;max-width:90%;background:var(--slate);color:var(--off);border-left:2px solid var(--accent);padding:4px 8px;opacity:var(--voice-1,0)}
.experience .crowd-voices span:nth-child(even){align-self:end}
.experience .crowd-voices span:nth-child(2){opacity:var(--voice-2,0)}.experience .crowd-voices span:nth-child(3){opacity:var(--voice-3,0)}.experience .crowd-voices span:nth-child(4){opacity:var(--voice-4,0)}
.reading .scene-stage .order-street{width:250%;max-width:none;object-fit:fill;transform:translate3d(var(--street-x,0%),0,0);transform-origin:left bottom}
.experience .order-group{transform:translate3d(var(--group-x,0%),var(--group-y,0%),0) scale(var(--group-scale,1));opacity:var(--group-opacity,1)}
.experience .order-walker{transform:translate3d(var(--walker-x,0%),var(--walker-y,0%),0) scale(var(--walker-scale,1));opacity:var(--walker-opacity,1)}
.experience .night-light,.experience .window-light{position:absolute;inset:0;pointer-events:none}
.experience .night-light{background:#15294588;opacity:var(--night-opacity,1)}
.experience .window-light{background:linear-gradient(125deg,transparent 40%,#e0b36a55 48%,#e0b36a11 58%,transparent 70%);transform:translate3d(var(--light-x,-40%),0,0);opacity:var(--light-opacity,.2)}
.experience .opening-scene{overflow:hidden;position:relative;--opening-scale:1;--opening-x:0%;--building-left:0%;--building-right:0%}
.experience .opening-scene>img{transform:translate3d(var(--opening-x),0,0) scale(var(--opening-scale));will-change:transform}
.experience .opening-near{display:block;position:absolute;inset:0;background:url('socrates-01-athens.webp') center/100% 100% no-repeat;pointer-events:none;transform-origin:center;will-change:transform}
.experience .opening-near.left{clip-path:polygon(0 0,24% 0,22% 58%,15% 80%,0 100%);transform:translate3d(var(--building-left),0,0) scale(var(--opening-scale))}
.experience .opening-near.right{clip-path:polygon(85% 0,100% 0,100% 100%,91% 80%,87% 52%);transform:translate3d(var(--building-right),0,0) scale(var(--opening-scale))}
.experience .opening-lights{display:flex;gap:14px;position:absolute;left:46%;top:38%}
.experience .opening-lights span{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:var(--lamp-1,0)}
.experience .opening-lights span:nth-child(2){opacity:var(--lamp-2,0)}.experience .opening-lights span:nth-child(3){opacity:var(--lamp-3,0)}
.experience .opening-title-echo{display:block;position:absolute;left:5%;top:8%;max-width:80%;font-size:clamp(1.4rem,4vw,2.6rem);line-height:1.1;font-weight:700;opacity:var(--title-opacity,1);transform:translate3d(0,var(--title-y,0px),0)}
.experience .other-side{transform:translate3d(var(--aside-x,20px),0,0)}
.experience .choices li,.experience #where-he-stopped .turn{transform:translate3d(0,var(--arrive-y,10px),0)}
.experience #where-he-stopped figure{position:relative;overflow:hidden}
.experience .bench-light-patch{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,transparent 35%,#e0b36a33 50%,transparent 70%);opacity:var(--bench-opacity,0);transform:translate3d(var(--bench-x,-15%),0,0)}
@media(max-width:800px){
.experience .beat-flow{display:block;margin-top:24px}
.experience .pin-track{position:sticky;top:var(--beat-nav-height);width:100%;padding:12px 0 20px;isolation:isolate}
.experience .pin-track:before{content:"";position:absolute;inset:0 -24px;background:var(--slate);z-index:-1}
.experience .reading .scene-stage{height:auto;min-height:0;max-height:none;aspect-ratio:16/9}
.experience .beat-copy{padding-top:0;width:100%;display:flow-root}
.experience .beat-copy>p{padding:0;margin:0 0 28px}.experience .beat-copy>.turn{margin-top:28px}
.reading figure{width:min(880px,calc(100vw - 48px));margin-top:28px;margin-bottom:28px}
.reading-mode{padding:0 24px 20px}
}
@media(prefers-reduced-motion:reduce){
.experience .beat-flow{display:block}.experience .pin-track{position:static;padding:0}.experience .pin-track:before{display:none}
.experience .reading .scene-stage{position:relative;height:auto}
.experience .motion-scene,.experience .opening-near,.experience .opening-lights,.experience .opening-title-echo,.experience .bench-light-patch{display:none}
.experience .reading .scene-stage .flat-scene{opacity:1;transform:none}.experience .beat-copy{padding-top:0}
.experience .opening-scene>img,.experience .other-side,.experience .choices li,.experience #where-he-stopped .turn{transform:none}
*{animation:none!important;transition:none!important}
}
