/* ==========================================================
   HEADSMITH — sample site
   Palette: black / white / light gray / sand / dark navy
   ========================================================== */
:root{
  --black:#0A0A0B;
  --navy:#0E1A2B;
  --navy-2:#17283F;
  --sand:#CBBB9E;
  --sand-2:#E9E1D1;
  --gray:#EEEEEB;
  --gray-2:#D7D7D2;
  --white:#FFFFFF;
  --ink:#0A0A0B;
  --ink-dim:#5C6169;
  --line:rgba(10,10,11,.14);
  --line-w:rgba(255,255,255,.18);
  --ease:cubic-bezier(.2,.7,.1,1);
  --pad:clamp(20px,4vw,56px);
  --max:1320px;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --serif:'Cormorant Garamond','Times New Roman',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--ink);background:var(--white);
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
::selection{background:var(--sand);color:var(--black)}
section[id]{scroll-margin-top:72px}
h1,h2,h3,h4{text-wrap:balance}

/* ---------- themes ---------- */
.t-navy{background:var(--navy);color:#fff}
.t-black{background:var(--black);color:#fff}
.t-gray{background:var(--gray)}
.t-white{background:#fff}
.t-sand{background:var(--sand-2)}
.dim{color:var(--ink-dim)}
.t-navy .dim,.t-black .dim{color:rgba(255,255,255,.62)}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.t-gray .eyebrow,.t-white .eyebrow,.t-sand .eyebrow{color:#8A7B5E}
.h1{font-size:clamp(34px,5.4vw,88px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.h2{font-size:clamp(28px,4.2vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1.18}
.h3{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.35}
.lead{font-size:clamp(16px,1.35vw,20px);line-height:1.8;max-width:56ch}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
.small{font-size:13px}
.cap{font-size:12px;letter-spacing:.04em;opacity:.7}

/* ---------- layout ---------- */
.sec{padding:clamp(88px,12vw,180px) var(--pad);position:relative}
.sec--tight{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px)}
.wrap{max-width:var(--max);margin:0 auto}
.stack-gap>*+*{margin-top:clamp(18px,2vw,28px)}

/* ---------- page curtain ---------- */
.curtain{position:fixed;inset:0;background:var(--navy);z-index:300;pointer-events:none;transform:translateY(100%)}
.curtain::after{content:"HEADSMITH";position:absolute;inset:0;display:grid;place-items:center;color:var(--sand);letter-spacing:.5em;font-weight:300;font-size:13px;opacity:.9}
html.js-load .curtain{transform:translateY(0)}
.curtain.is-enter{animation:curtainIn .55s var(--ease) forwards}
.curtain.is-exit{animation:curtainOut .85s var(--ease) forwards}
@keyframes curtainIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes curtainOut{from{transform:translateY(0)}to{transform:translateY(-100%)}}

/* ---------- progress / cursor ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--sand);z-index:150;transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.cursor{
  position:fixed;left:0;top:0;width:14px;height:14px;border:1px solid #fff;border-radius:50%;pointer-events:none;z-index:400;
  mix-blend-mode:difference;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),background .35s,opacity .3s;
  transform:translate3d(-100px,-100px,0);
}
html.has-cursor .cursor{opacity:1}
.cursor.is-link{width:64px;height:64px;background:#fff}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;height:72px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;z-index:100;
  color:#fff;transition:background .4s,color .4s,transform .55s var(--ease),backdrop-filter .4s;
}
.hdr.is-light{color:var(--ink);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hdr.is-hidden{transform:translateY(-100%)}
body.menu-open .hdr{color:#fff;background:transparent;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.logo{font-weight:700;font-size:14px;letter-spacing:.34em}
.logo span{font-weight:300}
.menu-btn{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.24em;font-weight:600}
.mb-bars{position:relative;width:26px;height:10px;display:block}
.mb-bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.mb-bars i:nth-child(1){top:0}
.mb-bars i:nth-child(2){top:8px}
body.menu-open .mb-bars i:nth-child(1){top:4px;transform:rotate(25deg)}
body.menu-open .mb-bars i:nth-child(2){top:4px;transform:rotate(-25deg)}

/* ---------- full-screen menu ---------- */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--navy);color:#fff;padding:120px var(--pad) 48px;overflow:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.menu-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px}
.menu-item{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.menu.open .menu-item{opacity:1;transform:none;transition-delay:calc(.3s + var(--i)*.07s)}
.mi-head{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line-w);transition:border-color .3s}
.mi-head:hover{border-color:var(--sand)}
.mi-head .n{font-family:var(--serif);font-style:italic;color:var(--sand);font-size:20px}
.mi-head b{font-size:clamp(24px,2.6vw,38px);font-weight:600;letter-spacing:-.02em}
.mi-head em{font-style:normal;font-size:14px;opacity:.6;margin-left:auto}
.mi-sub{margin-top:16px;display:flex;flex-direction:column;gap:2px}
.mi-sub a{font-size:15px;opacity:.7;padding:5px 0;transition:opacity .25s,transform .35s var(--ease)}
.mi-sub a:hover{opacity:1;transform:translateX(8px);color:var(--sand)}
.menu-foot{max-width:var(--max);margin:56px auto 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.16em;opacity:.55}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;padding:16px 28px;border:1px solid currentColor;border-radius:999px;font-weight:600;font-size:15px;
  transition:background .35s,color .35s,border-color .35s,transform .25s var(--ease);will-change:transform;
}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translate(4px,-4px)}
.btn:hover{background:var(--sand);border-color:var(--sand);color:var(--black)}
.btn--fill{background:var(--sand);border-color:var(--sand);color:var(--black)}
.btn--fill:hover{background:#fff;border-color:#fff}

/* ---------- text reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--d,0)*55ms)}
.is-in .wi,.is-in.wi{transform:none}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--r,0)*90ms)}
.reveal.is-in{opacity:1;transform:none}
.reveal-x{opacity:0;transform:translateX(-40px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.reveal-x.is-in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--pad) clamp(44px,6vw,84px);overflow:hidden;isolation:isolate}
.hero--sub{min-height:82svh}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,26,43,.0) 35%,rgba(14,26,43,.78) 100%)}
.t-black.hero::after{background:linear-gradient(180deg,rgba(10,10,11,0) 35%,rgba(10,10,11,.8) 100%)}
.hero-in{max-width:var(--max);margin:0 auto;width:100%;display:grid;gap:clamp(20px,3vw,40px)}
.hero .h1{max-width:min(100%,15em)}
.hero .sub{font-size:clamp(17px,1.7vw,24px);color:rgba(255,255,255,.82);max-width:48ch;line-height:1.6}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.scrollhint{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.7)}
.scrollhint i{display:block;width:1px;height:54px;background:linear-gradient(var(--sand),transparent);transform-origin:top;animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:var(--max);margin:0 auto}
.stat{padding:clamp(28px,4vw,56px) clamp(16px,2.4vw,40px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat .num{font-family:var(--serif);font-size:clamp(54px,8vw,128px);line-height:1;font-weight:500;letter-spacing:-.02em}
.stat .num small{font-size:.4em;margin-left:.08em}
.stat p{margin-top:14px;font-size:14px;color:var(--ink-dim);max-width:24ch}

/* ---------- mission trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0;border-top:1px solid var(--line-w)}
.trio-item{padding:clamp(28px,3vw,48px) clamp(18px,2.4vw,40px) 0;border-left:1px solid var(--line-w);position:relative;transition:background .5s}
.trio-item:first-child{border-left:0;padding-left:0}
.trio-item .en{font-family:var(--serif);font-style:italic;font-size:clamp(34px,4vw,60px);color:var(--sand);line-height:1}
.trio-item h3{margin-top:18px}
.trio-item p{margin-top:14px;font-size:15px;color:rgba(255,255,255,.66);max-width:34ch}

/* ---------- sticky stack panels (home) ---------- */
.stk-wrap{position:relative}
.stk{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center;gap:clamp(24px,5vw,80px);padding:100px var(--pad) 60px;overflow:hidden}
.stk:nth-child(1){z-index:1}.stk:nth-child(2){z-index:2}.stk:nth-child(3){z-index:3}
.stk-copy{max-width:520px;justify-self:end}
.stk-copy .idx{font-family:var(--serif);font-style:italic;font-size:22px;color:#8A7B5E}
.t-navy .stk-copy .idx,.t-black .stk-copy .idx{color:var(--sand)}
.stk-copy h3{margin:14px 0 18px;font-size:clamp(30px,4vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.stk-copy p{margin-bottom:30px}
.stk-gfx{justify-self:start;width:min(100%,520px);color:var(--navy)}
.t-navy .stk-gfx,.t-black .stk-gfx{color:var(--sand)}
.stk::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}

/* ---------- photo band ---------- */
.band{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--navy-2)}
.band .ph{position:absolute;inset:-12% 0;width:100%;height:124%;will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.15),rgba(14,26,43,.78))}
.band-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;padding:0 var(--pad) clamp(44px,7vw,100px);display:grid;gap:22px}
.ph-credit{position:absolute;right:var(--pad);bottom:18px;z-index:3;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.ph-credit a{text-decoration:underline;text-underline-offset:3px}

/* ---------- split / chapters ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);max-width:var(--max);margin:0 auto;align-items:start}
.sticky{position:sticky;top:110px}
.chap-num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(64px,8vw,128px);line-height:.85;color:var(--sand);letter-spacing:-.02em}
.t-gray .chap-num,.t-white .chap-num,.t-sand .chap-num{color:#B9A988}
.chap-en{font-family:var(--serif);font-size:clamp(34px,4.4vw,64px);font-weight:500;line-height:1;margin-top:18px;letter-spacing:-.01em}
.chap-ko{margin-top:6px;font-size:clamp(18px,1.6vw,24px);font-weight:600}
.chap-sub{margin-top:14px;color:var(--ink-dim)}
.t-navy .chap-sub,.t-black .chap-sub{color:rgba(255,255,255,.62)}
.chap-gfx{margin-top:40px;max-width:380px;color:#8A7B5E}
.t-navy .chap-gfx,.t-black .chap-gfx{color:var(--sand)}
.hint{margin-bottom:18px;font-size:13px;color:var(--ink-dim);letter-spacing:.02em}
.t-navy .hint,.t-black .hint{color:rgba(255,255,255,.55)}

/* chapter side nav */
.chapnav{position:fixed;right:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:18px;mix-blend-mode:difference;color:#fff}
.chapnav a{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:11px;letter-spacing:.16em;opacity:.45;transition:opacity .3s}
.chapnav a i{font-style:normal;font-family:var(--serif);font-size:15px}
.chapnav a span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .5s var(--ease),opacity .4s}
.chapnav a:hover span{max-width:160px;opacity:1}
.chapnav a.on,.chapnav a:hover{opacity:1}
.chapnav a.on i{transform:scale(1.35);transform-origin:right center}
.chapnav a i{transition:transform .4s var(--ease)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.t-navy .acc,.t-black .acc{border-color:var(--line-w)}
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;text-align:left;font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em}
.acc-h i{position:relative;flex:none;width:22px;height:22px}
.acc-h i::before,.acc-h i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.acc-h i::after{transform:rotate(90deg)}
.acc.open .acc-h i::after{transform:rotate(0)}
.acc-h:hover{color:#8A7B5E}
.t-navy .acc-h:hover,.t-black .acc-h:hover{color:var(--sand)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-in{overflow:hidden;min-height:0}
.acc-in>*:first-child{margin-top:0}
.acc-in p.lead2{color:var(--ink-dim);max-width:62ch;padding-bottom:10px}
.t-navy .acc-in p.lead2,.t-black .acc-in p.lead2{color:rgba(255,255,255,.7)}
.pts{padding:12px 0 34px}
.pts li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;padding:16px 0;border-top:1px dashed var(--line)}
.t-navy .pts li,.t-black .pts li{border-color:var(--line-w)}
.pts li b{font-weight:600;font-size:15px}
.pts li span{font-size:15px;color:var(--ink-dim)}
.t-navy .pts li span,.t-black .pts li span{color:rgba(255,255,255,.66)}

/* ---------- focus text (scroll lit) ---------- */
.focus>*{opacity:.16;transition:opacity .35s linear}
.focus-lines{max-width:var(--max);margin:0 auto}
.focus-lines p{font-size:clamp(24px,3.6vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1.35;max-width:24ch;margin-bottom:.9em}

/* ---------- history questions ---------- */
.qlist{max-width:var(--max);margin:0 auto}
.q{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,4vw,64px);padding:clamp(36px,5vw,72px) 0;border-top:1px solid var(--line)}
.q .qn{font-family:var(--serif);font-style:italic;font-size:clamp(46px,6vw,96px);line-height:1;color:#B9A988}
.q h3{font-size:clamp(22px,2.6vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.3;max-width:22ch}
.q p{margin-top:20px;max-width:58ch;color:var(--ink-dim)}
.closing{max-width:var(--max);margin:clamp(36px,5vw,64px) auto 0;font-size:clamp(18px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;padding-top:36px;border-top:1px solid var(--ink)}

/* ---------- belief grid ---------- */
.belief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-w);max-width:var(--max);margin:clamp(40px,6vw,80px) auto 0;border:1px solid var(--line-w)}
.belief>div{background:var(--navy);padding:clamp(28px,3.4vw,56px);transition:background .5s}
.belief>div:hover{background:var(--navy-2)}
.belief .bn{font-family:var(--serif);font-style:italic;color:var(--sand);font-size:22px}
.belief h3{margin:14px 0 12px}
.belief p{color:rgba(255,255,255,.68);font-size:15px}

/* ---------- image pair / figure ---------- */
.fig{position:relative;overflow:hidden;background:var(--gray-2)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--bw img{filter:grayscale(1) contrast(1.05)}
.fig figcaption{position:absolute;left:14px;bottom:12px;font-size:11px;color:#fff;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fig figcaption a{text-decoration:underline;text-underline-offset:3px}
.fig-px{position:absolute;inset:-10% 0;height:120%;will-change:transform}
.fig-px img{height:100%}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:0 auto}
.pair .fig{aspect-ratio:4/5}
.pair .fig:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.pair-cap{display:flex;justify-content:space-between;margin:20px auto 0;max-width:var(--max);font-size:14px;color:var(--ink-dim)}

/* ---------- mission cards (brand) ---------- */
.mission{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:clamp(40px,6vw,80px) auto 0}
.mcard{background:var(--gray);padding:clamp(26px,3vw,44px);min-height:460px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s,color .5s,transform .6s var(--ease)}
.mcard:hover{background:var(--navy);color:#fff;transform:translateY(-8px)}
.mcard .en{font-family:var(--serif);font-style:italic;font-size:22px;color:#8A7B5E}
.mcard:hover .en{color:var(--sand)}
.mcard h3{margin:14px 0}
.mcard p{font-size:15px;color:var(--ink-dim)}
.mcard:hover p{color:rgba(255,255,255,.72)}
.mcard .gfx{max-width:150px;color:#8A7B5E;margin-bottom:28px}
.mcard:hover .gfx{color:var(--sand)}

/* ---------- horizontal scroll (collection) ---------- */
.hs{position:relative}
.hs-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:28px}
.hs-top{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:64px}
.hs-bar{height:1px;background:var(--line);margin:0 var(--pad);position:relative}
.hs-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hs-track{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--pad);width:max-content;will-change:transform}
.hs-card{flex:none;width:min(80vw,620px);height:min(62svh,520px);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hs-card .k{font-family:var(--serif);font-style:italic;font-size:22px;color:#8A7B5E}
.hs-card.t-navy .k,.hs-card.t-black .k{color:var(--sand)}
.hs-card h3{font-size:clamp(24px,2.8vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.25;margin:12px 0 14px}
.hs-card p{font-size:15px;max-width:44ch;color:var(--ink-dim)}
.hs-card.t-navy p,.hs-card.t-black p{color:rgba(255,255,255,.7)}
.hs-card .gfx{position:absolute;right:-6%;bottom:-8%;width:56%;opacity:.5;color:#8A7B5E;pointer-events:none}
.hs-card.t-navy .gfx,.hs-card.t-black .gfx{color:var(--sand)}
.hs-card--intro{width:min(80vw,460px);background:transparent;padding-left:0}
.hs-card--intro p{max-width:34ch}

/* ---------- select matrix & specs ---------- */
.matrix{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;max-width:520px;color:var(--sand)}
.matrix i{aspect-ratio:1;background:color-mix(in srgb,currentColor calc(34% + var(--g)*7%),transparent);opacity:0;transform:scale(.3);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--i)*2.4ms)}
.matrix.is-in i{opacity:1;transform:none}
.mx-legend{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:rgba(255,255,255,.7)}
.mx-legend b{font-family:var(--serif);font-size:30px;font-weight:500;color:#fff;margin-right:8px}
.spec{border-top:1px solid var(--line-w)}
.spec-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--line-w)}
.spec-row dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.spec-row dt small{display:block;font-size:13px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55);margin-top:2px}
.spec-row dd{margin:0}
.spec-row dd b{font-weight:600}
.spec-row dd span{display:block;font-size:14px;color:rgba(255,255,255,.62)}
.spec-row ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.spec-row li{border:1px solid var(--line-w);border-radius:999px;padding:3px 14px;font-size:13px}
.spec-note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.5)}

/* points (collection) */
.points{display:grid;gap:0}
.point{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.point:last-child{border-bottom:1px solid var(--line)}
.t-navy .point,.t-black .point{border-color:var(--line-w)}
.point .pn{font-family:var(--serif);font-style:italic;color:#8A7B5E;font-size:20px}
.t-navy .point .pn,.t-black .point .pn{color:var(--sand)}
.point h4{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.point p{font-size:15px;color:var(--ink-dim)}
.t-navy .point p,.t-black .point p{color:rgba(255,255,255,.66)}

/* compare */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:clamp(36px,5vw,70px) auto 0}
.cmp-card{padding:clamp(28px,3.4vw,52px);min-height:420px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .6s var(--ease)}
.cmp-card:hover{transform:translateY(-8px)}
.cmp-card .en{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;font-weight:500}
.cmp-card h3{margin:22px 0 14px;font-size:clamp(20px,2vw,28px)}
.cmp-card p{max-width:46ch;color:inherit;opacity:.78;font-size:15px}
.cmp-card .tag{align-self:flex-start;margin-top:30px;font-size:12px;letter-spacing:.14em;border:1px solid currentColor;border-radius:999px;padding:6px 16px}
.note-box{max-width:var(--max);margin:clamp(28px,4vw,48px) auto 0;padding:clamp(24px,3vw,40px);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px}
.note-box b{font-size:18px}

/* ---------- graphics ---------- */
.gfx{width:100%;height:auto;overflow:visible}
.gfx-flow path{stroke-dasharray:.34 .66;animation:flow 9s linear infinite;animation-delay:calc(var(--i)*-.55s)}
@keyframes flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.gfx-head .ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.5}
.gfx-head .ring.d{stroke-dasharray:3 6}
.gfx-head .sweep{transform-origin:200px 215px;animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gfx-head .scan{animation:scan 5s ease-in-out infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(270px)}}
.gfx-head .dot{fill:currentColor;opacity:0;animation:pop 5s ease-in-out infinite;animation-delay:calc(var(--i)*.28s)}
@keyframes pop{0%,100%{opacity:0;transform:scale(.2)}20%,70%{opacity:1;transform:scale(1)}}
.gfx-head .dot{transform-box:fill-box;transform-origin:center}
.gfx-zone .zone{opacity:.14;animation:zone 10s ease-in-out infinite;animation-delay:calc(var(--z)*2.5s)}
@keyframes zone{0%,32%,100%{opacity:.14}6%,22%{opacity:1}}
.zone-legend{display:grid;gap:0;margin:0}
.zone-legend li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line-w);font-size:14px;opacity:.35;animation:zoneL 10s ease-in-out infinite;animation-delay:calc(var(--z)*2.5s)}
.zone-legend li b{font-family:var(--serif);font-style:italic;color:var(--sand);font-weight:500;font-size:18px}
@keyframes zoneL{0%,32%,100%{opacity:.35}6%,22%{opacity:1}}
.gfx-mesh .air circle{fill:currentColor}
.gfx-mesh .air-m{display:none}
.gfx-mesh .air-s{display:none}
[data-mode="mesh"] .air-m{display:block}
[data-mode="skin"] .air-s{display:block}
.gfx-mesh .air-m circle{animation:thru 3.6s ease-in infinite;animation-delay:calc(var(--i)*.38s);opacity:0}
.gfx-mesh .air-s circle{animation:block 3.6s ease-in infinite;animation-delay:calc(var(--i)*.38s);opacity:0}
@keyframes thru{0%{transform:translateY(0);opacity:0}15%{opacity:.9}85%{opacity:.9}100%{transform:translateY(-230px);opacity:0}}
@keyframes block{0%{transform:translateY(0);opacity:0}20%{opacity:.9}70%{transform:translateY(-78px);opacity:.9}100%{transform:translateY(-92px);opacity:0}}
.gfx-mesh .film-mesh,.gfx-mesh .film-skin{transition:opacity .5s}
[data-mode="mesh"] .film-skin{opacity:0}
[data-mode="skin"] .film-mesh{opacity:0}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:22px}
.toggle button{padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;transition:background .35s,color .35s}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.toggle-cap{margin-top:18px;min-height:3.6em;color:var(--ink-dim);font-size:15px;max-width:44ch}
.gfx-knot .strand{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s var(--ease) forwards paused;animation-delay:calc(var(--i)*.14s)}
.is-in .gfx-knot .strand,.gfx-knot.is-in .strand{animation-play-state:running}
@keyframes draw{to{stroke-dashoffset:0}}
.gfx-knot .knot{fill:currentColor;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:knot .6s var(--ease) forwards paused;animation-delay:calc(var(--i)*.14s)}
.is-in .gfx-knot .knot,.gfx-knot.is-in .knot{animation-play-state:running}
@keyframes knot{to{transform:scale(1)}}
.gfx-seal .rot{transform-origin:200px 200px;animation:spin 24s linear infinite}
.gfx-seal .tick{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2s var(--ease) .4s forwards paused}
.gfx-seal.is-in .tick,.gfx-line.is-in .ln{animation-play-state:running}
.gfx-line .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3s var(--ease) forwards paused;animation-delay:calc(var(--i)*.25s)}

/* ---------- timeline (fitting) ---------- */
.tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:var(--max);margin:clamp(40px,6vw,80px) auto 0;padding-top:46px}
.tl::before,.tl::after{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--line-w)}
.tl::after{background:var(--sand);transform-origin:0 50%;transform:scaleX(var(--tp,0))}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:0;top:-40px;width:9px;height:9px;border-radius:50%;background:var(--navy);border:1px solid var(--sand);transition:background .4s}
.tl-item.on::before{background:var(--sand)}
.tl-item .k{font-family:var(--serif);font-style:italic;color:var(--sand);font-size:18px}
.tl-item h3{margin:6px 0 8px;font-size:clamp(20px,2vw,28px)}
.tl-item p{font-size:14px;color:rgba(255,255,255,.62)}

/* ---------- triple strip (fitting) ---------- */
.strip3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);max-width:var(--max);margin:clamp(30px,4vw,60px) auto 0}
.strip3 .cell{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--navy);color:var(--sand);display:grid;place-items:center}
.strip3 .cell .gfx{width:70%}
.strip3 .cell figcaption{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;font-size:15px;font-weight:600;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.strip3 .cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.85)}
.strip3 .cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,26,43,.7));pointer-events:none}

/* ---------- journals ---------- */
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:0 auto}
.jcard{display:flex;flex-direction:column;background:var(--gray);transition:transform .6s var(--ease),background .5s}
.jcard:hover{transform:translateY(-10px);background:var(--sand-2)}
.jcard .jv{aspect-ratio:4/3;background:var(--navy);color:var(--sand);display:grid;place-items:center;overflow:hidden;position:relative}
.jcard .jv .gfx{width:62%}
.jcard .jv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.8)}
.jcard .jb{padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:12px;flex:1}
.jcard .jn{font-family:var(--serif);font-style:italic;color:#8A7B5E;font-size:20px}
.jcard h3{font-size:clamp(20px,1.9vw,26px)}
.jcard p{font-size:14px;color:var(--ink-dim)}
.badge{align-self:flex-start;margin-top:auto;font-size:11px;letter-spacing:.18em;border:1px solid var(--ink);border-radius:999px;padding:5px 14px}

/* ---------- next / CTA ---------- */
.next{display:block;position:relative;overflow:hidden;padding:clamp(60px,9vw,130px) var(--pad);color:#fff;background:var(--navy-2)}
.next::before{content:"";position:absolute;inset:0;background:var(--sand);transform:translateY(101%);transition:transform .7s var(--ease)}
.next:hover::before{transform:none}
.next-in{position:relative;max-width:var(--max);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;transition:color .5s}
.next:hover .next-in{color:var(--black)}
.next .lbl{font-size:12px;letter-spacing:.24em;opacity:.7}
.next .t{display:block;margin-top:10px;font-size:clamp(34px,6.4vw,104px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.next .a{font-size:clamp(40px,7vw,110px);line-height:1;transition:transform .6s var(--ease)}
.next:hover .a{transform:translate(10px,-10px)}

/* ---------- footer ---------- */
.ftr{background:var(--black);color:#fff;padding:clamp(60px,8vw,110px) var(--pad) 36px}
.ftr-top{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding-bottom:56px;border-bottom:1px solid var(--line-w)}
.ftr .logo{font-size:20px}
.ftr-tag{margin-top:18px;max-width:28ch;color:rgba(255,255,255,.62);font-size:15px}
.ftr-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;align-content:start}
.ftr-links a{font-size:14px;letter-spacing:.14em;padding:4px 0;opacity:.7;transition:opacity .25s,color .25s}
.ftr-links a:hover{opacity:1;color:var(--sand)}
.ftr-bot{max-width:var(--max);margin:28px auto 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5)}
.ftr-bot p{max-width:78ch;line-height:1.7}
.ftr-bot .pe{letter-spacing:.24em}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chapnav{display:none}
}
@media (max-width:820px){
  .split,.q,.note-box,.ftr-top{grid-template-columns:minmax(0,1fr)}
  .sticky{position:static}
  .chap-gfx{max-width:260px}
  .stats,.trio,.mission,.jgrid,.cmp,.belief,.strip3{grid-template-columns:minmax(0,1fr)}
  .stat,.trio-item{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .stat:first-child{border-top:0}
  .trio-item{border-top:1px solid var(--line-w);padding-bottom:28px}
  .trio-item:first-child{border-top:0}
  .mcard{min-height:340px}
  .stk{grid-template-columns:minmax(0,1fr);align-content:center;gap:18px;padding:84px var(--pad) 36px}
  .stk-gfx{order:-1;max-height:30svh;width:auto;justify-self:center}
  .stk-gfx .gfx{max-height:30svh}
  .stk-copy{justify-self:start}
  .stk-copy p{margin-bottom:18px}
  .pts li{grid-template-columns:minmax(0,1fr);gap:4px}
  .spec-row{grid-template-columns:minmax(0,1fr)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair .fig:nth-child(2){margin-top:0}
  .tl{grid-template-columns:minmax(0,1fr);padding-top:0;padding-left:34px;gap:34px}
  .tl::before,.tl::after{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .tl::after{transform-origin:50% 0;transform:scaleY(var(--tp,0))}
  .tl-item::before{left:-34px;top:8px}
  .menu-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .ftr-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-card{height:min(60svh,480px)}
  .cmp-card{min-height:340px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal,.reveal-x{opacity:1;transform:none}
  .wi{transform:none}
  .focus>*{opacity:1}
  .curtain{display:none}
}

/* demo panels (interactive graphics inside chapters) */
.demo{border:1px solid var(--line);padding:clamp(20px,2.6vw,40px);margin-bottom:44px;display:grid;gap:clamp(14px,2vw,26px);justify-items:start}
.t-navy .demo{border-color:var(--line-w)}
.demo .gfx{max-width:420px;width:100%;margin:0 auto;color:#8A7B5E}
.t-navy .demo .gfx{color:var(--sand)}
.demo .toggle{margin-bottom:0}
.demo--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:stretch}
.demo--2 .gfx{max-width:320px}
@media (max-width:820px){.demo--2{grid-template-columns:minmax(0,1fr)}}