@font-face{font-family:Martin;src:url('assets/VTCMartin-Regular-QatEveom-84146ed3.woff2');font-display:swap}
@font-face{font-family:Inter;src:url('assets/Inter-Regular.ttf');font-display:swap}
@font-face{font-family:Inter;src:url('assets/Inter-SemiBold.ttf');font-weight:600;font-display:swap}
:root{--paper:#eaebdd;--ink:#151713;--orange:#ff330a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font:18px/1.55 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;top:-100px;left:20px;z-index:100;padding:12px;background:var(--paper);color:var(--ink)}.skip:focus{top:10px}
header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:28px;padding:28px 4%;pointer-events:none}header>*{pointer-events:auto}header img{width:140px;display:block}header>span{font-size:16px}header b{font-size:12px;font-weight:400;color:var(--orange);margin-left:8px}.method{margin-left:auto;background:none;border:0;padding:10px 0;font-size:15px}
main{position:relative}.cinema{position:fixed;inset:0;pointer-events:none;overflow:hidden}canvas{width:100%;height:100%;display:block}.cinema:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#151713ee 0%,#151713bb 22%,transparent 51%);pointer-events:none}.fallback{position:absolute;top:8%;right:0;width:65%;height:78%;object-fit:contain}.ready .fallback{display:none}.loading{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:20px;text-align:center;font:54px Martin;background:var(--ink);padding:32px 40px;z-index:2}.loading small{font:16px Inter}.ready .loading,.no-3d .loading{display:none}
.narrative{position:relative;z-index:2;pointer-events:none}.chapter{height:152svh;position:relative}.copy{position:sticky;top:24svh;width:38vw;max-width:520px;margin-left:5%;padding-bottom:30px;pointer-events:auto;opacity:var(--copy-opacity,1);transform:translateY(var(--copy-offset,0px));will-change:opacity,transform}.hero .copy{top:24svh;max-width:540px}.eyebrow{font-size:12px;letter-spacing:.055em;text-transform:uppercase;color:#c4cbb8;margin:0 0 23px}h1,h2,h3{font-family:Martin,Arial,sans-serif;font-weight:400;line-height:.96;letter-spacing:-.01em;margin:0}h1{font-size:clamp(76px,7.2vw,112px)}h2{font-size:clamp(62px,5.9vw,92px)}em{font-style:normal;color:var(--orange)}.description{font-size:20px;line-height:1.55;max-width:470px;margin:28px 0 0}.description strong{font-weight:600}.punch{font-size:15px;line-height:1.55;color:#c4cbb8;max-width:450px;margin:22px 0 0}.enter{display:inline-flex;align-items:center;gap:42px;border-bottom:1px solid #bcc5ad;font-size:17px;padding:14px 0 10px;margin-top:22px}.enter span{font-size:24px}.scene-caption{position:fixed;right:4%;bottom:108px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:8px;font-size:14px;max-width:45%}.science-source{border:0;border-bottom:1px solid #8f9881;background:none;padding:0 0 4px;font-size:12px;color:#c4cbb8}.science-source[hidden]{display:none}
.timeline{position:fixed;bottom:26px;left:4%;right:4%;height:44px;z-index:20;display:flex;gap:30px;align-items:center}.count{font-size:12px;white-space:nowrap;color:#adb69e}.count b{font-weight:400;color:var(--paper)}.steps{flex:1;max-width:760px;display:flex;gap:6px;align-items:center}.steps a{position:relative;height:44px;flex:1;border-bottom:1px solid #737e63}.steps a:before{content:'';position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--orange);transition:width .4s}.steps a[aria-current]:before{width:100%}.steps span{position:absolute;left:0;top:0;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .2s}.steps a[aria-current] span,.steps a:hover span,.steps a:focus-visible span{opacity:1}.mobile-step{display:none}#motion{margin-left:auto;background:none;border:0;padding:10px 0;font-size:12px;white-space:nowrap}
dialog{width:calc(100% - 32px);max-width:850px;max-height:86svh;border:0;background:var(--paper);color:#080808;padding:55px 60px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#08080899;backdrop-filter:blur(10px)}dialog .eyebrow{color:#535b46}dialog h2{font-size:58px;margin-bottom:28px}dialog p{font-size:17px;line-height:1.65}dialog a{text-decoration:underline;text-underline-offset:3px}.close{float:right;border:0;background:none;font-size:14px;margin:-25px -25px 8px 12px}.read-all{display:block;margin-top:26px;font-size:16px}.credits{font-size:13px!important;color:#515b43;border-top:1px solid #adb69e;padding-top:24px;margin-top:30px}
.reading{display:none;position:relative;z-index:5;background:var(--paper);color:#080808;padding:110px 10% 140px}.reading.is-open{display:block}.reading .eyebrow{color:#535b46}.reading h2{max-width:900px;margin-bottom:60px}.reading article{max-width:840px;border-top:1px solid #adb69e;padding:35px 0}.reading h3{font-size:49px}.reading .description,.reading .punch{max-width:760px}.reading .punch{color:#535b46}.reading>a{display:inline-block;margin-top:35px;border-bottom:1px solid}.read-mode .timeline,.read-mode .scene-caption{visibility:hidden}.read-mode header{background:var(--ink)}
@media(min-width:701px) and (max-width:1150px){.copy{width:39vw}.description{font-size:18px}h1{font-size:86px}h2{font-size:68px}.punch{font-size:14px}.scene-caption{font-size:13px;max-width:44%}}
@media(min-width:701px) and (max-height:800px){header{padding-top:20px}.copy,.hero .copy{top:20svh}h1{font-size:78px}h2{font-size:64px}.description{font-size:18px;margin-top:22px}.punch{font-size:14px;margin-top:16px}.eyebrow{margin-bottom:18px}.enter{margin-top:16px;font-size:16px}.scene-caption{bottom:90px}.timeline{bottom:16px}}
@media(max-width:700px){header{padding:22px 6%;gap:12px}header img{width:108px}header>span{font-size:12px}header b{font-size:10px;margin-left:4px}.method{font-size:12px}.chapter{height:150svh}.copy,.hero .copy{top:43svh;width:88%;max-width:520px;margin-left:6%}.eyebrow{font-size:11px;margin-bottom:15px}h1{font-size:56px}h2{font-size:48px}.description{font-size:16px;line-height:1.5;margin-top:18px;max-width:100%}.punch{font-size:13px;line-height:1.5;margin-top:14px;max-width:100%}.enter{font-size:15px;margin-top:15px;padding:10px 0;gap:30px}.cinema:after{background:linear-gradient(0deg,#151713 0%,#151713fa 40%,transparent 67%),linear-gradient(180deg,#151713e8 0%,transparent 20%)}.scene-caption{top:38svh;bottom:auto;right:6%;max-width:88%;font-size:11px;gap:4px}.science-source{font-size:10px}.timeline{bottom:10px;left:6%;right:6%;gap:15px;height:44px;background:linear-gradient(0deg,#151713 65%,transparent)}.steps{display:none}.mobile-step{display:block;flex:1;min-width:0}.mobile-step select{width:100%;background:transparent;border:0;border-bottom:1px solid #737e63;font-size:12px;padding:10px 15px 10px 0;border-radius:0}.mobile-step option{background:var(--ink)}.count{font-size:11px}#motion{font-size:11px}.fallback{width:100%;height:43%;top:6%;right:0}.loading{font-size:42px;width:80%}.loading small{font-size:13px}dialog{padding:38px 24px}dialog h2{font-size:46px}dialog p{font-size:16px}.close{font-size:13px;margin:-18px -8px 12px 5px}.reading{padding:110px 6%}.reading h2{font-size:48px}.reading h3{font-size:42px}}
@media(max-width:700px) and (max-height:760px){.copy,.hero .copy{top:38svh}.copy .punch{display:none}.scene-caption{top:32svh}h1{font-size:49px}h2{font-size:43px}.description{font-size:16px;margin-top:14px}.punch{font-size:12px;margin-top:11px}.eyebrow{font-size:10px;margin-bottom:12px}.enter{margin-top:10px}.cinema:after{background:linear-gradient(0deg,#151713 0%,#151713f8 44%,transparent 69%),linear-gradient(180deg,#151713e8 0%,transparent 20%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* The four profiles share a timeline; the ToC question follows the selected family. */
#scene-8 .punch:empty{display:none}#scene-8 .description{margin-top:20px}.psych-explorer{margin-top:24px;max-width:470px}.psych-choices{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}.psych-choices button{border:0;border-bottom:1px solid #67705b;background:none;text-align:left;font-size:15px;padding:9px 0;color:#b8c0ab}.psych-choices button span{font-size:11px;margin-right:5px}.psych-choices button[aria-pressed=true]{color:#ff330a;border-color:#ff330a}.psych-meaning{margin:20px 0 0}.psych-lever{font-size:12px;color:#c4cbb8;margin:0 0 5px}.psych-question{font-size:18px;line-height:1.35;margin:0}.psych-terms{font-size:12px;line-height:1.5;color:#b8c0ab;margin:9px 0 0}.psych-time{display:flex;align-items:center;gap:18px;font-size:12px;color:#c4cbb8;margin-top:19px}.psych-time span{white-space:nowrap}.psych-time output{color:#eaebdd;font-variant-numeric:tabular-nums}.psych-time input{width:100%;min-width:60px;accent-color:#ff330a;cursor:ew-resize;height:24px}
@media(min-width:701px) and (max-height:800px){#scene-8 h2{font-size:58px}#scene-8 .description{font-size:17px;margin-top:17px}.psych-explorer{margin-top:16px}.psych-meaning{margin-top:14px}.psych-time{margin-top:11px}.psych-choices button{font-size:14px;padding:7px 0}.psych-question{font-size:17px}}
@media(max-width:700px){#scene-8 .copy{top:43svh}#scene-8 h2{font-size:44px}#scene-8 .description{font-size:15px;margin-top:13px;line-height:1.4}.psych-explorer{margin-top:12px}.psych-choices{gap:0 18px}.psych-choices button{font-size:13px;padding:7px 0}.psych-meaning{margin-top:13px}.psych-lever{font-size:11px}.psych-question{font-size:15px}.psych-terms{font-size:11px;margin-top:6px}.psych-time{font-size:11px;margin-top:10px;gap:12px}}
@media(max-width:700px) and (max-height:760px){#scene-8 .copy{top:37svh}#scene-8 h2{font-size:39px}#scene-8 .eyebrow{margin-bottom:9px}#scene-8 .description{margin-top:10px}.psych-meaning{margin-top:10px}.psych-terms{display:none}.psych-time{margin-top:7px}}
