@font-face{font-family:"Bai Jamjuree";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/BaiJamjuree-Light.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/BaiJamjuree-Regular.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/BaiJamjuree-Medium.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/BaiJamjuree-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/BaiJamjuree-Bold.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/BaiJamjuree-Italic.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:300;font-style:italic;font-display:swap;src:url(../fonts/BaiJamjuree-LightItalic.woff2) format("woff2")}
@font-face{font-family:"Bai Jamjuree";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/BaiJamjuree-MediumItalic.woff2) format("woff2")}
:root{--bg:#0D0C14;--bg2:#13121C;--bg3:#1A1826;--line:rgba(233,230,242,.10);--line2:rgba(233,230,242,.18);--text:#E9E6F2;--muted:#A19DB8;--dim:#77738E;--gold:#D9C26F;--gold2:#BFA959;--goldbg:rgba(217,194,111,.08);--side:300px;--read:760px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Bai Jamjuree",system-ui,sans-serif;font-size:17.5px;line-height:1.72;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(217,194,111,.35)}
a:hover{border-bottom-color:var(--gold)}
::selection{background:rgba(217,194,111,.3)}
/* sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--bg2);border-right:1px solid var(--line);padding:16px 14px 12px;overflow-y:auto;z-index:30;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;border:0;color:var(--text)}
.brand img{width:30px;height:30px}
.brand b{font-weight:700;letter-spacing:.08em;font-size:19px}
.brand i{font-style:normal;color:var(--muted);font-size:14px;margin-left:2px}
.search{position:relative;margin:10px 0 6px}
.search input{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:8px;color:var(--text);font:inherit;font-size:14px;padding:6px 11px;outline:none}
.search input:focus{border-color:var(--gold2)}
.search input::placeholder{color:var(--dim)}
.results{position:absolute;left:0;right:-160px;top:42px;background:var(--bg3);border:1px solid var(--line2);border-radius:10px;max-height:60vh;overflow:auto;z-index:50;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.results a{display:block;border:0;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--text);font-size:14px;line-height:1.45}
.results a:hover,.results a.sel{background:var(--goldbg)}
.results a small{display:block;color:var(--gold);font-size:12px}
.results a span{color:var(--muted);font-size:12.5px}
.results .none{padding:12px 14px;color:var(--muted);font-size:14px}

/* components */
/* body */
.doc-body h2{font-size:27px;line-height:1.25;font-weight:600;margin:52px 0 14px;letter-spacing:-.005em}
.doc-body h3{font-size:20px;font-weight:600;margin:34px 0 8px;color:var(--text)}
.doc-body h4{font-size:17px;margin:24px 0 6px;color:var(--gold)}
.doc-body>h2:first-child{margin-top:8px}
.doc-body p{margin:0 0 18px}
.doc-body strong{font-weight:600;color:#F4F1FA}
.doc-body em{color:var(--muted)}
.doc-body ul,.doc-body ol{padding-left:22px;margin:0 0 20px}
.doc-body li{margin:0 0 8px}
.doc-body li::marker{color:var(--gold2)}
.doc-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
/* tables */
.doc-body table{width:100%;border-collapse:collapse;margin:22px 0 28px;font-size:15px;line-height:1.5;display:block;overflow-x:auto}
.doc-body thead th{text-align:left;color:var(--gold);font-weight:600;font-size:12.5px;letter-spacing:.08em;border-bottom:1px solid var(--line2);padding:10px 14px 10px 0;white-space:nowrap}
.doc-body td{border-bottom:1px solid var(--line);padding:11px 14px 11px 0;vertical-align:top}
.doc-body td:first-child{color:#F4F1FA;font-weight:500;min-width:140px}
.doc-body tbody tr:hover td{background:rgba(233,230,242,.02)}
/* callouts */
.box{margin:28px 0;padding:20px 24px 6px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--gold)}
.box-tag{font-size:11.5px;letter-spacing:.14em;color:var(--gold);font-weight:600;margin-bottom:4px}
.box-tag b{color:var(--text);font-weight:600;background:rgba(217,194,111,.14);padding:1px 7px;border-radius:4px;letter-spacing:.1em}
.box-title{font-size:18px;font-weight:600;margin:2px 0 10px}
.box p{font-size:16.5px}
.box-example{background:linear-gradient(180deg,rgba(217,194,111,.05),rgba(217,194,111,.015));border-left-color:var(--gold2)}
.box-report{border-style:dashed;border-left-style:solid;font-size:16px}
.box-report p{font-family:inherit}
/* dilemma card */
.dilemma{margin:26px 0;padding:22px 24px 18px;border-radius:16px;background:radial-gradient(120% 140% at 0% 0%,#1E1B2C 0%,#14121C 60%);border:1px solid var(--line2);position:relative;overflow:hidden}
.dilemma:after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(217,194,111,.14)}
.dilemma-label{display:flex;gap:10px;align-items:center;font-size:11.5px;letter-spacing:.16em;color:var(--gold);font-weight:600;margin-bottom:10px}
.dilemma-label em{font-style:normal;color:var(--dim);letter-spacing:.06em;font-weight:500}
.dilemma-q{margin:0 0 16px;font-size:18.5px;line-height:1.6;color:#F4F1FA;font-weight:400}
.dilemma-opts{list-style:none;margin:0;padding:0!important;display:flex;flex-wrap:wrap;gap:10px}
.dilemma-opts li{margin:0!important;display:flex;align-items:center;gap:10px;border:1px solid rgba(217,194,111,.38);border-radius:999px;padding:7px 16px 7px 8px;font-size:15px;line-height:1.35;color:var(--text);background:rgba(13,12,20,.5)}
.opt-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--bg);font-size:12px;font-weight:700;flex:none}
/* pull quote */
.pull{margin:36px 0;padding:6px 0 6px 28px;border-left:2px solid var(--gold)}
.pull blockquote{margin:0;font-size:25px;line-height:1.45;font-weight:300;color:#F4F1FA}
.pull figcaption{margin-top:10px;color:var(--gold);font-size:14px;letter-spacing:.06em}
/* thesis */
.thesis{display:grid;grid-template-columns:62px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.thesis-n{font-size:40px;line-height:1;font-weight:300;color:var(--gold);text-align:right;padding-top:4px}
.thesis-t p{margin:0}
/* person */
.person{margin:18px 0;padding:20px 24px 4px;background:var(--bg2);border:1px solid var(--line);border-radius:12px}
.person-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:8px}
.person-name{font-size:20px;font-weight:600}
.person-role{font-size:12.5px;letter-spacing:.12em;color:var(--gold);font-weight:600}
.person p{font-size:16px}
/* diagrams */
.diagram{margin:30px 0 34px;padding:22px 18px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:14px}
.diagram svg{display:block;width:100%;height:auto;max-height:640px}
.diagram figcaption{text-align:center;color:var(--dim);font-size:13px;margin-top:10px;letter-spacing:.03em}

/* sidebar nav: every chapter always visible */
.nav{flex:none;margin-top:2px}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:flex;gap:8px;align-items:baseline;border:0;color:var(--muted);font-size:13px;line-height:1.25;padding:2.5px 8px;border-radius:6px;transition:color .2s,background .2s}
.nav a .n{flex:none;width:18px;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nav a:hover{color:var(--text);background:rgba(233,230,242,.04)}
.nav-part{margin:6px 0 0}
.nav-part-title{display:block!important;font-size:10.5px!important;letter-spacing:.14em;color:var(--gold)!important;font-weight:600;padding:3px 8px 2px!important;background:none!important}
.nav-ch>a.active{color:var(--text);background:var(--goldbg);box-shadow:inset 2px 0 0 var(--gold)}
.nav-ch>a.active .n{color:var(--gold)}
.side-secs{flex:1 1 auto;min-height:90px;display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line);padding-top:10px;overflow:hidden}
.secs{display:flex;flex-direction:column;min-height:0;flex:1}
.secs[hidden]{display:none}
.secs-title{font-size:10.5px;letter-spacing:.14em;color:var(--gold);font-weight:600;padding:0 8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secs ul{list-style:none;margin:0;padding:0 0 4px;overflow-y:auto;border-left:1px solid var(--line);margin-left:8px;scrollbar-width:thin;scrollbar-color:rgba(233,230,242,.2) transparent}
.secs a{display:block;border:0;font-size:12.5px;line-height:1.35;color:var(--dim);padding:3px 10px}
.secs a:hover{color:var(--text)}
.secs a.on{color:var(--gold);box-shadow:inset 1px 0 0 var(--gold)}
.progress{height:2px;background:var(--line);border-radius:2px;margin:0 2px 6px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.side-foot{flex:none;font-size:11px;line-height:1.5;color:var(--dim);padding:8px 8px 0;border-top:1px solid var(--line);margin-top:8px}
.side-foot a{color:var(--muted);border:0}
.topbar{display:none}.scrim{display:none}
/* main flow */
.main{margin-left:var(--side);min-width:0;overflow-x:clip}
.chapter{max-width:calc(var(--read) + 96px);margin:0 auto;padding:110px 48px 70px;scroll-margin-top:0}
.chapter+.chapter{border-top:1px solid var(--line)}
.chapter-head{position:relative;margin-bottom:34px;padding-top:10px;min-height:200px}
.hero{position:absolute;right:-50px;top:-70px;width:270px;height:270px;pointer-events:none;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 50%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 50%,transparent 71%);mix-blend-mode:screen}
.hero img,.hero video{width:100%;height:100%;object-fit:contain;opacity:.75}
.hero .media-screen{mix-blend-mode:normal}
.media-screen{mix-blend-mode:screen;background:#000}
.eyebrow{font-size:12.5px;letter-spacing:.16em;color:var(--gold);font-weight:600;margin:0 0 14px;position:relative}
h1{font-size:46px;line-height:1.1;font-weight:600;letter-spacing:-.01em;margin:0 0 18px;max-width:calc(100% - 210px);position:relative}
.lead{font-size:20.5px;line-height:1.6;color:var(--muted);font-weight:300;margin:0;max-width:calc(100% - 190px);position:relative}
.doc-body h2,.doc-body h3{scroll-margin-top:30px}
/* opening */
.opening{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;text-align:center;padding:60px 28px}
.opening-media,.interlude-media{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.opening-media video{width:min(92vh,100%);height:auto;opacity:.55}
.opening-media:after,.interlude-media:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(13,12,20,.25),rgba(13,12,20,.92) 75%,var(--bg) 100%)}
.opening-media:after{background:radial-gradient(38% 34% at 50% 48%,rgba(13,12,20,.62),rgba(13,12,20,0) 100%),linear-gradient(180deg,rgba(13,12,20,0) 70%,var(--bg) 100%)}
.opening-text{position:relative;max-width:720px}
.opening-logo{width:64px;height:64px;margin-bottom:12px}
.opening-word{font-size:clamp(64px,11vw,132px);font-weight:600;letter-spacing:.14em;line-height:1;margin-left:.14em}
.opening-sub{font-size:14px;letter-spacing:.32em;color:var(--gold);font-weight:600;margin:18px 0 30px}
.opening-lead{font-size:21px;line-height:1.6;font-weight:300;color:var(--text);margin:0 auto 40px;max-width:640px}
.scroll-cue{display:inline-block;border:1px solid rgba(217,194,111,.45);border-radius:999px;padding:10px 22px;font-size:14px;letter-spacing:.08em}
.scroll-cue:hover{background:var(--goldbg)}
/* interludes: full-bleed moments between parts */
.interlude{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden;padding:90px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#07060C}
.interlude-media video{width:100%;height:100%;object-fit:cover;opacity:.62}
.interlude-media:after{background:radial-gradient(60% 55% at 50% 50%,rgba(7,6,12,.55),rgba(7,6,12,.9) 80%,#07060C 100%)}
.interlude-text{position:relative;text-align:center;max-width:760px}
.interlude-title{font-size:clamp(34px,5vw,60px);line-height:1.12;font-weight:600;margin:0 0 22px}
.interlude-text p{font-size:20px;line-height:1.6;font-weight:300;color:var(--muted);margin:0 auto;max-width:620px}
.closing .interlude-title{font-size:clamp(28px,3.6vw,44px)}
.closing p{font-size:16px}
.site-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;padding:28px 24px 40px;font-size:13px;color:var(--dim)}
.site-foot a{color:var(--muted);border:0}
/* scroll fades (only when js runs) */
.js .reveal,.js .doc-body>*{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in,.js .doc-body>.in{opacity:1;transform:none}
/* responsive */
@media (max-width:1100px){.chapter{padding:90px 40px 60px}}
@media (max-width:900px){
 body{font-size:17px}
 .sidebar{transform:translateX(-100%);transition:transform .25s ease;width:300px;box-shadow:20px 0 60px rgba(0,0,0,.5)}
 body.nav-open .sidebar{transform:none}
 body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(5,5,10,.6);z-index:20}
 .topbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:15;align-items:center;gap:12px;padding:8px 14px;background:rgba(13,12,20,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
 .topbar-cur{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
 .menu-btn{background:none;border:0;padding:8px 6px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
 .menu-btn span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px}
 .main{margin-left:0}
 html{scroll-padding-top:56px}
 .doc-body h2,.doc-body h3,.chapter{scroll-margin-top:56px}
 .chapter{padding:80px 20px 50px}
 .chapter-head{min-height:0;padding-top:150px}
 .hero{right:50%;transform:translateX(50%);top:-30px;width:190px;height:190px}
 h1,.lead{max-width:none}
 h1{font-size:34px}
 .lead{font-size:18px}
 .doc-body h2{font-size:23px}
 .pull blockquote{font-size:21px}
 .dilemma{padding:18px 18px 14px}.dilemma-q{font-size:17px}
 .thesis{grid-template-columns:40px 1fr;gap:12px}.thesis-n{font-size:30px}
 .results{right:0}
 .doc-body td:first-child{min-width:110px}
 .opening-lead{font-size:18px}
 .interlude{min-height:72vh;padding:70px 22px}
 .interlude-text p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal,.js .doc-body>*{opacity:1;transform:none;transition:none}}

/* birds in the opening */
.birds{position:absolute;inset:0;transition:opacity 1.4s ease}
.birds.gone{opacity:0}
.birds canvas{display:block}
.opening-media:after{pointer-events:none}
.opening-media{pointer-events:auto}
.opening-text{pointer-events:none}.opening-text a{pointer-events:auto}
.sound-btn{position:absolute;right:26px;bottom:24px;display:flex;align-items:center;gap:9px;background:rgba(13,12,20,.55);border:1px solid rgba(217,194,111,.4);color:var(--gold);font:inherit;font-size:13px;letter-spacing:.06em;padding:8px 15px 8px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}
.sound-btn:hover{background:var(--goldbg)}
.sound-ico{width:14px;height:12px;display:inline-flex;align-items:flex-end;gap:2px}
.sound-ico:before,.sound-ico:after{content:"";width:3px;background:var(--gold);border-radius:1px;height:5px}
.sound-ico:after{height:11px}
.sound-btn[aria-pressed="true"] .sound-ico:before{animation:eq 1s ease-in-out infinite}
.sound-btn[aria-pressed="true"] .sound-ico:after{animation:eq 1s ease-in-out .3s infinite}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
@media (max-width:900px){.sound-btn{right:16px;bottom:16px}}
@media (max-height:780px) and (min-width:901px){.nav a{padding:1.5px 8px;font-size:12.5px}.nav-part{margin:4px 0 0}.nav-part-title{padding:2px 8px 1px!important}}
@media (min-width:901px) and (max-width:1180px){.hero{right:-10px;width:220px}}
.secs-title{padding-top:3px}.side-secs{padding-top:6px}