/* Wood Chen 人物誌 — cinematic editorial theme v3 */
:root{
  --bg:#1b0e11;--bg2:#26141a;--bg3:#331b22;
  --ink:#e9dcc3;--ink2:#cbb99d;--mute:#9a8a78;
  --wine:#5e1725;--wine2:#a8303f;--rose:#d9707a;--gold:#c9a45c;--gold2:#e2c88a;
  --line:rgba(233,220,195,.1);--line2:rgba(233,220,195,.22);
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --disp:"Cormorant Garamond","Noto Serif TC",serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--ease2:cubic-bezier(.76,0,.24,1);
  --gut:clamp(16px,4vw,56px);--max:1500px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
body.no-cursor,body.no-cursor a,body.no-cursor button{cursor:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
::selection{background:var(--wine2);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- overlays ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.06;background-size:300px 300px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.4s steps(5) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:60px -50px}60%{background-position:-30px 70px}80%{background-position:80px -20px}100%{background-position:0 0}}
.loader{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--gut);color:var(--ink);transition:transform 1s var(--ease2),visibility 0s 1s;visibility:visible}
.loader-n{font:italic 500 clamp(80px,18vw,220px)/.85 var(--disp);letter-spacing:-.04em}
.loader-n i{font-style:normal;font-size:.35em;vertical-align:top;margin-left:.1em;color:var(--gold)}
.loader-t{font:400 11px/1 var(--mono);letter-spacing:.4em;text-transform:uppercase;color:var(--mute);
  writing-mode:vertical-rl;transform:rotate(180deg)}
.loader-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--gold);width:0}
body.ready .loader{transform:translateY(-100%);visibility:hidden}
.curtain{position:fixed;inset:0;z-index:390;background:var(--wine);transform:scaleY(0);transform-origin:top;pointer-events:none}
.curtain.in{transform-origin:bottom}
.cursor{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--gold);z-index:300;
  pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);will-change:transform;transition:width .35s var(--ease),height .35s var(--ease),background .35s}
.cursor-ring{position:fixed;left:0;top:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(233,220,195,.55);
  z-index:300;pointer-events:none;transform:translate(-50%,-50%);will-change:transform;
  display:flex;align-items:center;justify-content:center;font:500 10px/1 var(--mono);letter-spacing:.2em;color:#fff;
  transition:width .4s var(--ease),height .4s var(--ease),background .4s,border-color .4s}
.cursor-ring span{opacity:0;transition:opacity .3s}
body.c-link .cursor{width:0;height:0}
body.c-link .cursor-ring{width:84px;height:84px;background:rgba(201,164,92,.92);border-color:transparent;color:#1b0e11;mix-blend-mode:normal}
body.c-link .cursor-ring span{opacity:1}
body.c-hide .cursor,body.c-hide .cursor-ring{opacity:0}
@media (hover:none),(max-width:900px){.cursor,.cursor-ring{display:none}body.no-cursor,body.no-cursor a{cursor:auto}}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:250}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);background:linear-gradient(180deg,rgba(27,14,17,.8),transparent);transition:transform .6s var(--ease)}
.hd.hide{transform:translateY(-110%)}
.hd.solid{background:rgba(27,14,17,.94);padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.logo{display:flex;flex-direction:column;line-height:1;color:var(--ink)}
.logo-en{font:600 10px/1 var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.logo-zh{font:900 19px/1 var(--serif);margin-top:7px;letter-spacing:.06em}
.nav{display:flex;gap:34px}
.nav a{position:relative;font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--ink2);padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.burger{display:flex;align-items:center;gap:12px;color:var(--ink2);font:500 11px/1 var(--mono);letter-spacing:.3em}
.burger i{display:block;width:36px;height:12px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--gold);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i::before{top:0}.burger i::after{top:11px}
body.menu-open .burger i::before{top:5px;transform:rotate(45deg)}
body.menu-open .burger i::after{top:5px;transform:rotate(-45deg)}
@media (max-width:900px){.nav{display:none}}
.menu{position:fixed;inset:0;z-index:140;background:var(--bg2);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease2);
  display:grid;grid-template-columns:1.2fr .8fr;align-items:end;padding:120px var(--gut) var(--gut);gap:40px;overflow:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu-bg{position:absolute;right:-10%;top:-10%;font:italic 500 50vw/1 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(233,220,195,.08);pointer-events:none;user-select:none}
.menu-list{display:flex;flex-direction:column;gap:2px;position:relative}
.menu-list a{display:flex;align-items:baseline;gap:22px;font:700 clamp(34px,6.5vw,88px)/1.12 var(--serif);letter-spacing:.02em;
  transform:translateY(40px);opacity:0;transition:transform .8s var(--ease),opacity .8s,color .4s}
.menu-list a small{font:400 12px/1 var(--mono);letter-spacing:.3em;color:var(--gold)}
.menu-list a:hover{color:var(--gold2);padding-left:14px}
body.menu-open .menu-list a{transform:none;opacity:1}
.menu-list a:nth-child(1){transition-delay:.25s}.menu-list a:nth-child(2){transition-delay:.3s}.menu-list a:nth-child(3){transition-delay:.35s}
.menu-list a:nth-child(4){transition-delay:.4s}.menu-list a:nth-child(5){transition-delay:.45s}.menu-list a:nth-child(6){transition-delay:.5s}.menu-list a:nth-child(7){transition-delay:.55s}
.menu-side{position:relative;color:var(--mute);font-size:14px;line-height:2;display:flex;flex-direction:column;gap:14px}
.menu-side a{color:var(--ink)}
@media (max-width:900px){.menu{grid-template-columns:1fr;align-items:start;padding-top:110px;overflow-y:auto}.menu-side{display:none}}

/* ---------- type ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:"";width:28px;height:1px;background:var(--gold)}
.badge{display:inline-block;margin-left:12px;padding:4px 8px;border:1px solid var(--line2);border-radius:2px;font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--mute)}
.meta{display:block;font:400 11px/1.5 var(--mono);letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:18px 34px;border:1px solid var(--line2);border-radius:999px;
  font:500 12px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);border-radius:999px;transform:translateY(102%);transition:transform .6s var(--ease);z-index:-1}
.btn:hover{color:#1b0e11;border-color:var(--gold)}
.btn:hover::before{transform:none}
.btn-fill{background:var(--gold);color:#1b0e11;border-color:var(--gold)}
.btn-fill::before{background:var(--gold2)}
.sec{padding:clamp(70px,9vw,120px) 0;position:relative}
.sec.wrap,.qsec.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:0 0 clamp(40px,6vw,80px);
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.sec-h h2{margin:0;font:700 clamp(40px,7vw,104px)/.95 var(--serif);letter-spacing:-.01em}
.sec-h h2 em{display:block;font:italic 400 .36em/1 var(--disp);letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.sec-h .more{font:500 12px/1 var(--mono);letter-spacing:.25em;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.sec-h .more i{display:inline-block;width:40px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.sec-h .more:hover i{width:70px}
.ch{display:inline-block;will-change:transform,opacity}
.w{display:inline-block}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(30px,5vw,90px);overflow:hidden;
  padding:110px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 60px;isolation:isolate;
  background:radial-gradient(70% 90% at 78% 40%,rgba(110,27,42,.75),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(201,164,92,.1),transparent 70%)}
.hero-art{position:relative;justify-self:center}
.hero-art::before{content:"";position:absolute;inset:-14px;border:1px solid rgba(201,164,92,.55);border-radius:999px 999px 0 0;pointer-events:none}
.hero-bg{position:relative;height:clamp(380px,calc(100svh - 190px),680px);aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:999px 999px 0 0;background:var(--bg3)}
.hero-bg img{width:100%;height:120%;object-fit:cover;object-position:74% 50%;will-change:transform;transform:scale(1.08);filter:saturate(.85) sepia(.12)}
.hero-bg .mono-xl{width:100%;height:120%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(94,23,37,.25),transparent 45%,rgba(27,14,17,.6))}
.hero-in{max-width:600px;position:relative}
.hero h1{margin:20px 0 20px;font:700 clamp(28px,3.3vw,50px)/1.32 var(--serif);letter-spacing:.01em;text-wrap:balance}
.hero h1 a:hover{color:var(--gold2)}
.hero .dek{max-width:520px;margin:0 0 30px;font-size:15px;line-height:1.9;color:var(--ink2)}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.hero-q{position:absolute;left:-44px;bottom:26px;width:250px;margin:0;padding:16px 18px;font:500 13.5px/1.7 var(--serif);color:var(--gold2);
  background:var(--bg2);border:1px solid rgba(201,164,92,.45)}
@media (max-width:1100px){.hero-q{display:none}}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:100px}.hero-art{order:2;margin-top:14px}.hero-bg{height:auto;width:min(76vw,380px)}}
.scroll-cue{position:absolute;left:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));bottom:18px;font:400 10px/1 var(--mono);letter-spacing:.4em;color:var(--mute);display:flex;align-items:center;gap:12px}
@media (max-height:760px),(max-width:860px){.scroll-cue{display:none}}
.scroll-cue i{width:1px;height:30px;background:linear-gradient(var(--gold),transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.marq{position:relative;overflow:hidden;border-top:1px solid rgba(201,164,92,.4);border-bottom:1px solid rgba(201,164,92,.4);padding:12px 0;background:var(--wine)}
.marq-in{display:flex;width:max-content;animation:marq 40s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:40px;padding-right:40px;font:italic 500 clamp(14px,1.3vw,18px)/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.marq span b{font:700 .85em/1 var(--serif);color:var(--gold2);letter-spacing:.2em}
.marq span i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);display:inline-block}
.marq-rev .marq-in{animation-direction:reverse;animation-duration:50s}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.art-bg{background:var(--bg3)}
.mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:16/9;
  font:italic 500 clamp(60px,8vw,120px)/1 var(--disp);color:rgba(233,220,195,.85);letter-spacing:-.04em;
  background:radial-gradient(120% 100% at 20% 0%,#3b1020,#120b0f 60%,#1b0e11)}
.mono-interview{background:radial-gradient(120% 100% at 20% 0%,#4a1424,#160b10 60%,#1b0e11)}
.mono-brand{background:radial-gradient(120% 100% at 80% 0%,#5a3a12,#17110a 60%,#1b0e11)}
.mono-industry{background:radial-gradient(120% 100% at 20% 100%,#1a2a3a,#0d1218 60%,#1b0e11)}
.mono-wine{background:radial-gradient(120% 100% at 50% 100%,#5c1726,#160a0d 60%,#1b0e11)}
.mono-lifestyle{background:radial-gradient(120% 100% at 80% 100%,#2b3a2a,#0f140f 60%,#1b0e11)}
.mono-lg{width:64px;height:64px;aspect-ratio:1;border-radius:50%;font-size:22px;flex:none;letter-spacing:0}
.mono-xl{aspect-ratio:auto;font-size:clamp(100px,16vw,260px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px) clamp(16px,2.4vw,36px)}
.card{position:relative;grid-column:span 4;background:linear-gradient(180deg,var(--bg2),rgba(38,20,26,.35));border:1px solid var(--line);border-radius:4px;transition:border-color .6s,opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.card:hover{border-color:rgba(201,164,92,.6)}
.card-lg{grid-column:span 8}
.card-xl{grid-column:span 12}
.card-6{grid-column:span 6}
.card-art{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--bg3);border-radius:4px 4px 0 0;transform-style:preserve-3d}
.card-xl .card-art{aspect-ratio:21/9}
.card-art img,.card-art .mono{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:saturate(.8)}
.card:hover .card-art img,.card:hover .card-art .mono{transform:scale(1.12);filter:saturate(1.05)}
.card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,14,17,.55),transparent 55%);opacity:.7;transition:opacity .8s}
.card:hover .card-art::after{opacity:.25}
.card-n{position:absolute;left:18px;top:14px;font:italic 500 18px/1 var(--disp);color:rgba(233,220,195,.7);letter-spacing:.1em;z-index:2;mix-blend-mode:difference}
.card-tx{padding:20px 22px 22px}
.card h3{margin:12px 0 8px;font:700 clamp(16px,1.2vw,18px)/1.5 var(--serif);letter-spacing:.01em}
.card-lg h3,.card-xl h3{font-size:clamp(20px,1.8vw,26px);line-height:1.4}
.card-6 h3{font-size:clamp(17px,1.4vw,20px)}
.card h3 a{background:linear-gradient(var(--gold2),var(--gold2)) no-repeat 0 100%/0 1px;transition:background-size .6s var(--ease)}
.card:hover h3 a{background-size:100% 1px}
.card .dek{margin:0 0 14px;color:var(--mute);font-size:13.5px;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-lg .dek,.card-xl .dek{-webkit-line-clamp:3;font-size:14.5px;max-width:620px}
.card-sm{grid-column:span 4}
@media (max-width:1000px){.card,.card-lg,.card-6,.card-sm{grid-column:span 6}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.card,.card-lg,.card-xl,.card-6,.card-sm{grid-column:auto}}

/* feature stack with sticky header */
.stories{display:grid;grid-template-columns:240px 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.stories-side{position:sticky;top:110px;padding-top:22px;border-top:1px solid var(--gold)}
.stories-side h2{margin:0;font:700 clamp(26px,2.4vw,36px)/1.1 var(--serif)}
.stories-side h2 em{display:block;font:italic 400 13px/1 var(--disp);letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.stories-side p{color:var(--mute);font-size:13.5px;max-width:220px;margin:18px 0 24px}
.count{font:italic 400 clamp(36px,3.4vw,50px)/1 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(233,220,195,.35);letter-spacing:-.04em}
.count b{font-weight:400;color:var(--gold);-webkit-text-stroke:0}
@media (max-width:1000px){.stories{grid-template-columns:1fr}.stories-side{position:static}}

/* horizontal scroll */
.hwrap{position:relative;overflow:hidden;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.htrack{display:flex;height:100svh;align-items:stretch;will-change:transform}
.hpanel{flex:none;width:min(70vw,560px);display:flex;flex-direction:column;justify-content:flex-end;padding:120px clamp(28px,4vw,64px) clamp(50px,8vh,90px);
  border-right:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.hpanel:nth-child(odd){background:var(--bg3)}
.hpanel-intro{width:min(70vw,460px);justify-content:center;background:var(--wine)!important}
.hpanel-intro h2{margin:0 0 18px;font:700 clamp(28px,2.8vw,42px)/1.1 var(--serif)}
.hpanel-intro h2 em{display:block;font:italic 400 13px/1 var(--disp);letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.hpanel-intro p{color:var(--ink2);font-size:14.5px;max-width:320px;margin:0 0 26px}
.hpanel-n{position:absolute;right:-.05em;top:40px;font:italic 500 clamp(90px,11vw,160px)/1 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(201,164,92,.35);
  z-index:-1;letter-spacing:-.06em;transition:color .8s var(--ease)}
.hpanel:hover .hpanel-n{color:rgba(201,164,92,.12)}
.hpanel-bg{position:absolute;inset:0;z-index:-2;opacity:.28;filter:saturate(.5) blur(2px);transform:scale(1.1);transition:opacity 1s var(--ease),transform 1.6s var(--ease),filter 1s}
.hpanel-bg img{width:100%;height:100%;object-fit:cover}
.hpanel:hover .hpanel-bg{opacity:.5;transform:scale(1.02);filter:saturate(.8) blur(0)}
.hpanel h3{margin:0 0 12px;font:700 clamp(24px,2.4vw,36px)/1.2 var(--serif)}
.hpanel p{margin:0 0 22px;color:var(--ink2);max-width:400px;font-size:14px}
.hpanel .meta{margin-bottom:auto}
.hpanel-link{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.hpanel-link i{width:40px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.hpanel:hover .hpanel-link i{width:72px}
.hpanel-a{position:absolute;inset:0;z-index:2}
@media (max-width:900px){.htrack{height:auto;flex-direction:column}.hpanel,.hpanel-intro{width:100%;min-height:62svh;border-right:0;border-bottom:1px solid var(--line);padding-top:60px}}

/* quote fill section */
.qsec{padding:clamp(90px,11vw,150px) 0;text-align:center;position:relative;overflow:hidden}
.qsec::after{content:"";position:absolute;inset:clamp(24px,3vw,44px) var(--gut);border:1px solid rgba(201,164,92,.3);pointer-events:none}
.qsec::before{content:"";position:absolute;left:50%;top:50%;width:70vw;height:70vw;max-width:900px;max-height:900px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(110,27,42,.4),transparent 60%);pointer-events:none;will-change:transform;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.25)}}
.fill{margin:22px auto 0;max-width:820px;font:700 clamp(20px,2.3vw,32px)/1.6 var(--serif);letter-spacing:.01em;position:relative}
.fill .w{color:rgba(233,220,195,.18);transition:color .3s}
.fill .w.on{color:var(--gold2)}
.qsec cite{display:block;margin-top:30px;font:italic 400 15px/1 var(--disp);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.person{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:50px}

/* people */
.pcard{display:flex;align-items:center;gap:16px}
.pcard-name{margin:0;font:700 17px/1.3 var(--serif)}
.pcard-name a:hover{color:var(--gold2)}
.pcard-role{margin:4px 0 0;font:400 11px/1.5 var(--mono);letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px}
.people li{padding:34px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,var(--bg2),transparent);transition:border-color .6s,transform .8s var(--ease)}
.people li:hover{border-color:var(--gold);transform:translateY(-6px)}
.people li p{color:var(--mute);font-size:14.5px;margin:20px 0 0}
.profile{display:grid;grid-template-columns:minmax(260px,.9fr) 1.4fr;gap:clamp(30px,6vw,90px);align-items:start;padding-top:160px}
.profile-art{border-radius:6px;overflow:hidden;position:sticky;top:120px}
.profile-art .mono-xl{aspect-ratio:4/5}
.profile h1{margin:16px 0 10px;font:700 clamp(40px,6vw,88px)/1.05 var(--serif)}
.profile-bio{margin:30px 0;font-size:17px;line-height:2;color:var(--ink2)}
@media (max-width:900px){.profile{grid-template-columns:1fr}.profile-art{position:static}}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:14px 34px;margin:30px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.facts dt{font:500 11px/2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.facts dd{margin:0;color:var(--ink2)}

/* rows with hover preview */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row a{display:grid;grid-template-columns:70px 1.2fr 3fr 120px;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.row a:hover{padding-left:20px}
.row-i{font:italic 400 20px/1 var(--disp);color:var(--mute)}
.row-cat{font:500 11px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.row-t{font:700 clamp(20px,2vw,30px)/1.35 var(--serif);transition:color .4s}
.row a:hover .row-t{color:var(--gold2)}
.row time{font:400 11px/1 var(--mono);letter-spacing:.15em;color:var(--mute);text-align:right}
@media (max-width:760px){.row a{grid-template-columns:1fr;gap:8px}.row-i,.row time{display:none}}
.preview{position:fixed;left:0;top:0;width:360px;aspect-ratio:16/9;z-index:120;pointer-events:none;overflow:hidden;border-radius:4px;
  transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .6s var(--ease),opacity .4s;will-change:transform}
.preview.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.preview img.on{opacity:1}
@media (hover:none){.preview{display:none}}

/* listing head */
.list-head{padding:180px 0 60px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;border-bottom:1px solid var(--line);margin-bottom:60px}
.list-head h1{margin:14px 0 0;font:700 clamp(48px,9vw,140px)/.95 var(--serif);letter-spacing:-.02em}
.list-head p{margin:20px 0 0;color:var(--mute);max-width:520px}
.list-head .count{text-align:right}
@media (max-width:760px){.list-head{grid-template-columns:1fr}.list-head .count{text-align:left}}
.empty{color:var(--mute);padding:40px 0}

/* ---------- article ---------- */
.ahero{position:relative;min-height:88svh;display:grid;align-items:end;padding:170px var(--gut) 70px;overflow:hidden;isolation:isolate}
.ahero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;clip-path:inset(0 0 0 0)}
.ahero-bg img,.ahero-bg .mono{width:100%;height:118%;object-fit:cover;transform:scale(1.1);filter:saturate(.7);will-change:transform}
.ahero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,14,17,.5),rgba(27,14,17,.15) 40%,rgba(27,14,17,.8) 80%,var(--bg))}
.ahero-in{max-width:1100px}
.ahero h1{margin:22px 0 24px;font:700 clamp(34px,5.8vw,88px)/1.12 var(--serif);text-wrap:balance}
.ahero .art-dek{max-width:680px;margin:0 0 30px;font-size:clamp(16px,1.5vw,20px);line-height:1.8;color:var(--ink2)}
.art-by{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.art-layout{display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;gap:40px;padding:clamp(60px,8vw,110px) 0}
.art-aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:22px;font:400 11px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.art-aside b{display:block;color:var(--gold);font-weight:500}
.art-aside a:hover{color:var(--ink)}
.share{display:flex;flex-direction:column;gap:6px}
.art-body{font-size:17.5px;line-height:2.05;color:var(--ink2)}
.art-body>p:first-of-type::first-letter{float:left;font:italic 500 4.6em/0.78 var(--disp);color:var(--gold);margin:.12em .14em 0 0}
.art-body p{margin:0 0 1.6em}
.art-body h2{margin:2.4em 0 .8em;font:700 clamp(24px,2.4vw,34px)/1.35 var(--serif);color:var(--ink);display:flex;gap:18px;align-items:baseline}
.art-body h2::before{content:"";flex:none;width:30px;height:1px;background:var(--gold);transform:translateY(-.35em)}
.art-body ul{padding-left:1.2em}.art-body li{margin-bottom:.6em}
.art-body strong{color:var(--ink);font-weight:700}
.lead{font-size:1.15em;color:var(--ink)}
.qa{margin:0 0 2.2em;padding-left:28px;border-left:1px solid var(--line)}
.qa .q{font:700 1.05em/1.8 var(--serif);color:var(--ink)}
.qa b{display:inline-block;margin-right:14px;font:italic 500 .9em/1 var(--disp);color:var(--gold);letter-spacing:.2em}
.pull{margin:3em -10vw;text-align:center;font:700 clamp(26px,3.6vw,46px)/1.45 var(--serif);color:var(--ink);padding:40px 0;position:relative}
.pull::before,.pull::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:60px;height:1px;background:var(--gold)}
.pull::before{top:0}.pull::after{bottom:0}
.pull cite{display:block;margin-top:20px;font:italic 400 16px/1 var(--disp);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
@media (max-width:1100px){.art-layout{grid-template-columns:1fr;padding-top:50px}.art-aside{position:static;flex-direction:row;flex-wrap:wrap;gap:30px}.art-body{max-width:760px}.pull{margin:3em 0}}
.art-fig{margin:0 0 50px;border-radius:4px;overflow:hidden}
.art-fig figcaption,.credit{font:400 11px/1.8 var(--mono);letter-spacing:.1em;color:var(--mute);padding:10px 0;text-transform:none}
.credit a{text-decoration:underline;text-underline-offset:3px}
.sources{margin:3em 0 0;padding:26px 0 0;border-top:1px solid var(--line);font-size:14px}
.sources h2{font-size:12px;letter-spacing:.3em;margin:0 0 12px;color:var(--gold)}
.sources h2::before{display:none}
.sources ol{padding-left:1.4em;margin:0}.sources a{text-decoration:underline;text-underline-offset:3px;color:var(--mute)}
.tags{margin-top:2.6em;display:flex;flex-wrap:wrap;gap:10px}
.tag{font:400 11px/1 var(--mono);letter-spacing:.16em;padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--mute);transition:border-color .4s,color .4s}
.tag:hover{border-color:var(--gold);color:var(--gold)}
.next{position:relative;display:block;padding:clamp(90px,14vw,180px) var(--gut);overflow:hidden;isolation:isolate;text-align:center;border-top:1px solid var(--line)}
.next-bg{position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(1.08);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.next-bg img,.next-bg .mono{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.45)}
.next:hover .next-bg{opacity:1;transform:none}
.next .kicker{justify-content:center}
.next h2{margin:22px auto 0;max-width:1000px;font:700 clamp(32px,5.5vw,84px)/1.15 var(--serif);transition:color .5s}
.next:hover h2{color:var(--gold2)}
.next .meta{margin-top:26px}
.rel{padding-bottom:clamp(80px,10vw,140px)}

/* ---------- prose ---------- */
.prose{max-width:820px;padding-top:180px;padding-bottom:120px}
.prose h1{margin:16px 0 30px;font:700 clamp(40px,6vw,84px)/1.05 var(--serif)}
.prose h2{margin:2.5em 0 1em;font:700 28px/1.3 var(--serif)}
.prose p{font-size:17px;line-height:2;color:var(--ink2)}
.prose .lead{font-size:21px;color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:4px;color:var(--gold2)}

/* ---------- cta + footer ---------- */
.cta{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) var(--gut);text-align:center;background:var(--wine);color:var(--ink);isolation:isolate}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;z-index:-1;will-change:transform}
.cta::before{width:70vw;height:70vw;left:-25vw;top:-30vw;background:radial-gradient(circle,rgba(192,56,74,.9),rgba(192,56,74,0) 65%);animation:blob 14s ease-in-out infinite alternate}
.cta::after{width:60vw;height:60vw;right:-20vw;bottom:-30vw;background:radial-gradient(circle,rgba(59,12,22,.95),rgba(59,12,22,0) 65%);animation:blob 18s ease-in-out infinite alternate-reverse}
@keyframes blob{to{transform:translate(12vw,8vw) scale(1.2)}}
.cta h2{margin:18px auto 20px;max-width:760px;font:700 clamp(24px,3vw,44px)/1.3 var(--serif);letter-spacing:.01em}
.cta p{max-width:520px;margin:0 auto 34px;color:var(--ink2);font-size:14.5px}
.cta .kicker{color:var(--gold2)}.cta .kicker::before{background:var(--gold2)}
.cta .btn{border-color:var(--gold);color:var(--gold2)}
.cta .btn::before{background:var(--gold)}.cta .btn:hover{color:#1b0e11;border-color:var(--gold)}
.foot{padding:clamp(70px,10vw,120px) 0 40px;border-top:1px solid var(--line);background:var(--bg)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;margin-bottom:70px}
.foot-name{margin:0 0 14px;font:900 clamp(28px,3vw,40px)/1 var(--serif)}
.foot-en{font:italic 400 12px/1 var(--disp);letter-spacing:.35em;color:var(--gold);text-transform:uppercase;margin:0 0 18px}
.foot-desc{color:var(--mute);font-size:14px;max-width:420px;margin:0}
.foot-nav{display:flex;flex-direction:column;gap:10px}
.foot-nav a{font-size:14px;color:var(--ink2);width:max-content;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;transition:background-size .5s var(--ease)}
.foot-nav a:hover{background-size:100% 1px}
.foot-h{font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.foot-giant{font:900 clamp(40px,8vw,120px)/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(201,164,92,.28);letter-spacing:.02em;white-space:nowrap;overflow:hidden;margin:0 0 50px;user-select:none}
.foot-warn{font-weight:700;letter-spacing:.3em;text-align:center;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink2)}
.foot-copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font:400 11px/1.8 var(--mono);letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
@media (max-width:800px){.foot-in{grid-template-columns:1fr;gap:34px}}

/* ---------- reveal states (JS adds .is-in) ---------- */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-clip]{clip-path:inset(12% 0 12% 0);transition:clip-path 1.3s var(--ease2)}
[data-clip].is-in{clip-path:inset(0 0 0 0)}
[data-split] .ch{opacity:0;transform:translateY(.6em) rotate(4deg);filter:blur(6px)}
.no-js [data-reveal],.no-js [data-split] .ch{opacity:1;transform:none;filter:none}
html.m0 [data-reveal],html.m0 [data-split] .ch,html.m0 [data-clip]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
html.m0 .grain,html.m0 .marq-in,html.m0 .cta::before,html.m0 .cta::after,html.m0 .qsec::before,html.m0 .scroll-cue i{animation:none!important}
html.m0 .loader,html.m0 .cursor,html.m0 .cursor-ring{display:none}