/* =========================================================
   RYTREOXX — PORTFOLIO 2026
   palette: charcoal / acid lime / paper / bronze (no heavy red)
   ========================================================= */

:root{
  --bg:#0c0d0f; --bg2:#131418; --bg3:#1a1b20;
  --fg:#ECE9E1; --mute:#878b93; --line:rgba(236,233,225,.13);
  --acid:#D4FF3A; --acid2:#B8E62A; --cyan:#4BE6D3;
  --paper:#E7E3D8; --paper2:#DAD5C8; --ink:#0c0d0f;
  --bronze:#C9A465; --ember:#E5894A; --ode:#08080a;
  --pad:clamp(16px,3vw,52px);
  --cn:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  --cnserif:"Songti SC","STSong","SimSun","Noto Serif SC","Source Han Serif SC",serif;
  --display:"Anton",var(--cn);
  --sans:"Grotesk",var(--cn);
  --mono:"Mono",ui-monospace,var(--cn);
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;cursor:default}
body.is-loading{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acid);color:var(--ink)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.cn{font-family:var(--cn)}
.acid{color:var(--acid)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- grain ---------- */
.noise{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9990;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad);overflow:hidden}
.loader-top{display:flex;justify-content:space-between;gap:2rem}
.loader-log{font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--mute);letter-spacing:.06em;min-height:9em}
.loader-log b{color:var(--acid);font-weight:400}
.loader-num{font-family:var(--display);font-size:clamp(120px,30vw,520px);line-height:.78;text-align:right;letter-spacing:-.01em}
.loader-num small{font-size:.22em;vertical-align:top;color:var(--acid)}
.loader-bar{height:6px;background:var(--line);position:relative;overflow:hidden}
.loader-bar i{position:absolute;inset:0;background:var(--acid);transform-origin:left;transform:scaleX(0)}
.loader-stripes{position:absolute;left:0;right:0;bottom:0;height:0;background:repeating-linear-gradient(-45deg,var(--acid) 0 22px,var(--ink) 22px 44px)}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:900;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:18px var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-logo{display:flex;gap:12px;align-items:center}
.logo-mark{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.02em;padding:4px 8px 3px;border:1.5px solid #fff}
.logo-sub{font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.12em}
.hud-nav{display:flex;gap:clamp(14px,2.2vw,36px);font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding-top:8px}
.hud-nav a{position:relative;padding:2px 0}
.hud-nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hud-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hud-meta{justify-self:end;display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding-top:8px}
.live{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:live 1.6s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:901;pointer-events:none}
.progress i{display:block;height:100%;background:var(--acid);transform-origin:left;transform:scaleX(0)}
.rail{position:fixed;right:calc(var(--pad) - 4px);top:50%;transform:translateY(-50%);z-index:899;display:flex;flex-direction:column;gap:10px;mix-blend-mode:difference;color:#fff}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;opacity:.45;transition:opacity .3s}
.rail a span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease)}
.rail a i{display:block;width:14px;height:1px;background:#fff;transition:width .4s var(--ease)}
.rail a.on{opacity:1}.rail a.on i{width:30px}
.rail a:hover span,.rail a.on span{max-width:120px}

/* ---------- quick contact dock ---------- */
.dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:902;display:flex;gap:4px;padding:5px;background:rgba(14,15,18,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(236,233,225,.14);border-radius:999px;transition:transform .7s var(--ease),opacity .5s}
.dock.hide{transform:translate(-50%,140%);opacity:0}
.dock button{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg);transition:background .3s,color .3s;white-space:nowrap}
.dock button svg{width:14px;height:14px;flex:none}
.dock button:hover{background:rgba(236,233,225,.1)}
.dock button.cv{background:var(--acid);color:var(--ink)}
.dock button.cv:hover{background:#fff}
.dock .k{opacity:.55}
.toast{position:fixed;left:50%;bottom:84px;z-index:903;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--acid);color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:10px 22px 10px 18px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:transform .5s var(--ease),opacity .4s;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:9995;pointer-events:none;mix-blend-mode:difference}
.c-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.c-ring{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .3s,border-color .3s}
.c-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#000;opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.big .c-ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff;border-color:#fff}
.cursor.big .c-label{opacity:1}
.cursor.big .c-dot{opacity:0}
@media (hover:none){.cursor{display:none}}

/* ---------- shared ---------- */
section{position:relative}
.light{background:var(--paper);color:var(--ink)}
.light .mute{color:#6b6a64}
.mute{color:var(--mute)}
.sec-head{display:flex;align-items:center;gap:14px;padding:0 var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.sec-no{background:var(--acid);color:var(--ink);padding:5px 14px 5px 9px;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.light .sec-no{background:var(--ink);color:var(--acid)}
.sec-line{flex:1;height:1px;background:currentColor;opacity:.22}
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--acid);pointer-events:none;z-index:3}
.brk::before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.brk::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.chm{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .005em 0}
.ch,.wd{display:inline-block;will-change:transform}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px 5px 9px;border:1px solid currentColor;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.tag.fill{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.hazard{height:14px;background:repeating-linear-gradient(-45deg,var(--acid) 0 12px,transparent 12px 24px);opacity:.9}
.light .hazard{background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,transparent 12px 24px)}
.zoom{cursor:zoom-in}

/* ---------- HERO ---------- */
.hero{height:100svh;min-height:680px;overflow:hidden;padding:0 var(--pad)}
.hero-cols{position:absolute;inset:0 var(--pad);display:grid;grid-template-columns:repeat(8,1fr);pointer-events:none}
.hero-cols i{border-left:1px solid var(--line)}
.hero-cols i:last-child{border-right:1px solid var(--line)}
.hero-top{position:absolute;left:var(--pad);right:var(--pad);top:96px;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.hero-roll{font-family:var(--sans);font-weight:600;font-size:clamp(20px,2.3vw,38px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.roll-win{display:inline-block;height:1.12em;overflow:hidden;vertical-align:bottom}
.roll-list{display:block}
.roll-list span{display:block;color:var(--acid);height:1.12em}
.hero-coords{text-align:right;color:var(--mute);line-height:1.9}
.hero-name{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-46%);font-family:var(--display);font-weight:400;line-height:.8;white-space:nowrap;text-align:center;letter-spacing:-.005em;z-index:2;user-select:none}
.hero-name .hn{display:inline-block}
.hero-name .chm{padding-top:.06em}
.hero-name .ch.o{color:transparent;-webkit-text-stroke:2px var(--fg)}
.hero-card{position:absolute;z-index:4;width:clamp(170px,16vw,300px);aspect-ratio:3/4;right:13vw;top:19vh;transform:rotate(4deg)}
.hero-card .hc-frame{position:absolute;inset:0;overflow:hidden;background:#000}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero-card img.on{opacity:1}
.hero-card .hc-label{position:absolute;left:0;top:calc(100% + 10px);white-space:nowrap;color:var(--fg)}
.hero-card .hc-sticker{position:absolute;left:-18px;top:-14px;z-index:5;background:var(--acid);color:var(--ink);font-family:var(--display);font-size:15px;letter-spacing:.04em;padding:5px 12px 4px;transform:rotate(-10deg);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.hero-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:84px;display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:2rem;align-items:end}
.hb-name{font-family:var(--cn);font-size:clamp(24px,2.2vw,36px);font-weight:700;letter-spacing:.06em;line-height:1}
.hb-role{margin-top:10px;color:var(--mute);line-height:1.8}
.hb-quote{font-family:var(--cn);font-size:14px;color:#c9c6bd;line-height:1.9;max-width:34em}
.hb-scroll{justify-self:end;display:flex;align-items:center;gap:12px}
.hb-scroll .ln{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
.hb-scroll .ln::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--acid);animation:drip 1.6s var(--ease) infinite}
@keyframes drip{to{top:110%}}
.badge{position:absolute;left:48%;top:18vh;width:118px;height:118px;z-index:3;color:var(--fg)}
.badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
.badge b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:30px;color:var(--acid);font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tilted bands ---------- */
.bands{position:relative;height:34vh;min-height:220px;overflow:hidden;z-index:3;margin-top:-6vh}
.band{position:absolute;left:-10vw;width:120vw;top:50%;white-space:nowrap;overflow:hidden;padding:1.1vw 0 .8vw}
.band-a{background:var(--acid);color:var(--ink);transform:translateY(-50%) rotate(-4deg);z-index:2;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.band-b{background:var(--bg3);color:var(--fg);transform:translateY(-50%) rotate(3deg);border-block:1px solid var(--line)}
.track{display:inline-flex;align-items:center;will-change:transform}
.track>span{display:inline-flex;align-items:center;gap:2.2vw;padding-right:2.2vw;font-family:var(--display);font-size:clamp(40px,5.4vw,96px);line-height:1;text-transform:uppercase}
.track .star{font-family:var(--sans);font-size:.55em}
.band-b .track>span{-webkit-text-stroke:1px var(--fg);color:transparent}
.band-b .track .fill{color:var(--fg);-webkit-text-stroke:0}

/* ---------- ABOUT ---------- */
.about{padding:16vh 0 14vh;margin-top:-17vh;z-index:1}
.about .sec-head{margin-top:12vh}
.statement{padding:7vh var(--pad) 0;font-family:var(--sans);font-weight:600;font-size:clamp(34px,5.4vw,104px);line-height:1.02;letter-spacing:-.035em;text-transform:uppercase;max-width:20ch;max-width:none}
.statement .wd{opacity:.13}
.statement em{font-family:"Serif";font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.pill{display:inline-block;width:1.7em;height:.78em;border-radius:1em;overflow:hidden;vertical-align:-.02em;margin:0 .08em;background:#000}
.pill img{width:100%;height:100%;object-fit:cover}
.about-grid{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:6vw;padding:12vh var(--pad) 0;align-items:start}
.agent{background:var(--ink);color:var(--fg);position:relative;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px))}
.agent-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--acid);color:var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em}
.agent-photo{position:relative;aspect-ratio:1000/1077;overflow:hidden}
.agent-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.agent:hover .agent-photo img{filter:grayscale(0);transform:scale(1.04)}
.agent-photo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.agent-rank{position:absolute;right:14px;top:12px;z-index:2;font-family:var(--display);font-size:64px;line-height:1;color:var(--acid);text-shadow:0 2px 0 #000}
.agent-rank small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#fff;text-align:right}
.agent-body{padding:18px 18px 24px}
.agent-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.agent-name b{font-family:var(--cn);font-size:30px;letter-spacing:.08em}
.agent-name span{font-family:var(--display);font-size:22px;letter-spacing:.04em;color:var(--acid)}
.agent dl{display:grid;grid-template-columns:96px 1fr;gap:8px 10px;padding:14px 0;font-size:12.5px}
.agent dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute);padding-top:2px}
.agent dd{font-family:var(--cn)}
.barcode{height:34px;background:repeating-linear-gradient(90deg,var(--fg) 0 2px,transparent 2px 4px,var(--fg) 4px 5px,transparent 5px 9px,var(--fg) 9px 12px,transparent 12px 13px);opacity:.85;margin-top:6px}
.about-text .lead{font-family:var(--cn);font-size:clamp(17px,1.45vw,22px);line-height:1.95;max-width:34em;font-weight:500}
.about-text .lead b{background:linear-gradient(transparent 62%,var(--acid) 62%);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink);margin-top:7vh}
.stat{padding:18px 14px 0 0;border-right:1px solid rgba(0,0,0,.14)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--display);font-size:clamp(54px,6vw,108px);line-height:.9}
.stat .n sup{font-size:.3em;vertical-align:top;margin-left:4px}
.stat p{font-family:var(--cn);font-size:12.5px;margin-top:8px;color:#55544f}
.stat .mono{display:block;color:#7c7b74;margin-top:2px;font-size:10px}
.kit{margin-top:6vh;display:grid;gap:14px}
.kit-row{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
.kit-row .mono{color:#6b6a64}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-family:var(--mono);font-size:11.5px;padding:6px 11px;border:1px solid rgba(0,0,0,.25);border-radius:999px;transition:background .3s,color .3s}
.chips span:hover{background:var(--ink);color:var(--acid)}

/* ---------- EXPERIENCE ---------- */
.exp{padding:18vh 0 14vh;background:var(--bg)}
.exp-title{padding:6vh var(--pad) 5vh;font-family:var(--display);font-size:clamp(64px,11vw,210px);line-height:.85;text-transform:uppercase}
.exp-title .o{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.exp-list{list-style:none;margin:0 var(--pad);border-bottom:1px solid var(--line)}
.exp-row{position:relative;display:grid;grid-template-columns:70px 190px 1fr 240px 40px;align-items:center;gap:16px;padding:clamp(18px,2.2vw,34px) 10px;border-top:1px solid var(--line);overflow:hidden;transition:color .45s var(--ease)}
.exp-row::before{content:"";position:absolute;inset:0;background:var(--acid);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:0}
.exp-row>*{position:relative;z-index:1}
.exp-row:hover{color:var(--ink)}
.exp-row:hover::before{transform:scaleY(1)}
.er-no{font-family:var(--mono);font-size:12px}
.er-date{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.er-co b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.3vw,58px);line-height:1;text-transform:uppercase}
.er-co em{font-style:normal;font-family:var(--cn);font-size:13px;opacity:.6}
.er-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-align:right}
.er-role span{display:block;font-family:var(--cn);letter-spacing:.06em;opacity:.65;margin-top:3px}
.er-arrow{font-size:22px;text-align:right;transition:transform .5s var(--ease)}
.exp-row:hover .er-arrow{transform:rotate(45deg)}
.exp-row .now{display:inline-block;margin-left:8px;background:var(--acid);color:var(--ink);padding:1px 6px;font-size:10px}
.exp-row:hover .now{background:var(--ink);color:var(--acid)}
.exp-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;padding:9vh var(--pad) 0}
.exp-sub h4{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--acid);margin-bottom:18px}
.exp-sub h4::after{content:"";flex:1;height:1px;background:var(--line)}
.exp-sub li{list-style:none;display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-family:var(--cn);font-size:13.5px}
.exp-sub li span{color:var(--mute);font-size:12px;white-space:nowrap;text-align:right}

/* ---------- WORKS INTRO ---------- */
.works-intro{padding:16vh 0 10vh;overflow:hidden;background:var(--bg)}
.wi-line{font-family:var(--display);font-size:clamp(90px,19vw,380px);line-height:.84;white-space:nowrap;text-transform:uppercase;will-change:transform}
.wi-line.o{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.wi-line sup{font-family:var(--mono);font-size:.07em;color:var(--acid);vertical-align:top;letter-spacing:.1em;-webkit-text-stroke:0;margin-left:.3em}
.wi-line .ac{color:var(--acid);-webkit-text-stroke:0}
.wi-index{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:9vh var(--pad) 0;background:var(--line);border:1px solid var(--line)}
.wi-index a{background:var(--bg);padding:18px 16px 22px;display:flex;flex-direction:column;gap:22px;transition:background .4s,color .4s}
.wi-index a:hover{background:var(--acid);color:var(--ink)}
.wi-index b{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,34px);line-height:1;text-transform:uppercase}
.wi-index span.cn{font-size:12.5px;opacity:.65}

/* ---------- WORK HEAD ---------- */
.work{padding:14vh 0 12vh;background:var(--bg)}
.work.light{background:var(--paper)}
.work-head{display:grid;grid-template-columns:auto 1fr auto;gap:3vw;align-items:end;padding:0 var(--pad);margin-bottom:7vh}
.wh-no{font-family:var(--display);font-size:clamp(80px,11vw,210px);line-height:.78;color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.light .wh-no{-webkit-text-stroke-color:var(--ink)}
.wh-title{font-family:var(--display);font-size:clamp(44px,6.4vw,124px);line-height:.86;text-transform:uppercase}
.wh-title small{display:block;font-family:var(--cn);font-size:clamp(14px,1.2vw,18px);letter-spacing:.2em;margin-top:14px;font-weight:600;opacity:.75}
.wh-meta{display:grid;grid-template-columns:auto auto;gap:6px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:6px;min-width:260px}
.wh-meta dt{color:var(--mute)}
.light .wh-meta dt{color:#77756e}
.wh-meta dd{font-family:var(--mono)}
.wh-meta dd.cn{font-family:var(--cn);letter-spacing:.04em;text-transform:none}
.work-desc{display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:0 var(--pad);margin-top:6vh;align-items:start}
.work-desc p.cn{font-size:15px;line-height:2;max-width:36em;color:#cfccc3}
.light .work-desc p.cn{color:#3a3936}
.work-desc .big{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.2vw,36px);line-height:1.12;letter-spacing:-.02em;text-transform:uppercase}

/* Dr.Ratio pin */
.wr-pin{position:relative;height:100vh;overflow:hidden}
.wr-title{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:1vw;font-family:var(--display);font-size:clamp(120px,24vw,470px);line-height:.8;text-transform:uppercase;z-index:1;pointer-events:none;white-space:nowrap}
.wr-title .r{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.wr-media{position:absolute;inset:0;z-index:2;clip-path:inset(31% 33% 31% 33%);will-change:clip-path}
.wr-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.wr-hud{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.wr-hud .c{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.wr-hud .tl{left:var(--pad);top:90px}.wr-hud .tr{right:var(--pad);top:90px;text-align:right}
.wr-hud .bl{left:var(--pad);bottom:90px}.wr-hud .br{right:var(--pad);bottom:90px;text-align:right}
.wr-hud .cross{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border:1px solid rgba(255,255,255,.5);border-radius:50%}
.wr-detail{display:grid;grid-template-columns:minmax(260px,32vw) 1fr;gap:5vw;padding:12vh var(--pad) 0;align-items:end}
.wr-v{aspect-ratio:1080/1920;overflow:hidden}
.wr-v img{width:100%;height:100%;object-fit:cover}
.wr-side{display:flex;flex-direction:column;gap:5vh}
.wr-side .quote{font-family:"Serif";font-style:italic;font-size:clamp(40px,5vw,96px);line-height:.95;letter-spacing:-.02em}
.wr-side .quote span{color:var(--acid)}

/* VANCE */
.vance-stage{perspective:1600px;padding:0 var(--pad)}
.vance-screen{position:relative;transform-origin:50% 90%;will-change:transform}
.vance-screen img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vance-screen::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px);pointer-events:none;mix-blend-mode:multiply}
.scan{position:absolute;left:0;right:0;height:18%;z-index:3;background:linear-gradient(180deg,transparent,rgba(212,255,58,.16),transparent);pointer-events:none;animation:scan 4.5s linear infinite}
@keyframes scan{from{top:-20%}to{top:110%}}
.v-call{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink);background:var(--acid);padding:5px 10px 5px 8px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);white-space:nowrap}
.v-call::before{content:"";width:6px;height:6px;background:var(--ink);border-radius:50%}
.vance-foot{display:flex;justify-content:space-between;padding:18px var(--pad) 0;color:var(--mute)}

/* Event pages */
.w-event{overflow:hidden}
.ev-wrap{position:relative;display:grid;grid-template-columns:1fr auto auto 1fr;gap:4vw;align-items:center;padding:0 var(--pad)}
.ev-bg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:clamp(120px,22vw,420px);line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(236,233,225,.16);pointer-events:none;text-align:center}
.phone{position:relative;width:clamp(190px,16vw,250px);aspect-ratio:9/19;border-radius:34px;background:#000;border:7px solid #23252b;box-shadow:0 0 0 1px #3a3d45,0 40px 80px rgba(0,0,0,.55);overflow:hidden;container-type:size}
.phone::before{content:"";position:absolute;left:50%;top:9px;width:64px;height:18px;margin-left:-32px;border-radius:12px;background:#000;z-index:3}
.phone img{width:100%;height:auto;animation:pscroll 34s ease-in-out infinite alternate}
.phone:hover img{animation-play-state:paused}
@keyframes pscroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 100cqh))}}
.phone.b img{animation-duration:42s}
.ev-cap{display:flex;flex-direction:column;gap:12px}
.ev-cap.r{text-align:right;align-items:flex-end}
.ev-cap b{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,64px);line-height:.9;text-transform:uppercase}
.ev-cap p.cn{font-size:13.5px;color:#bdbab1;max-width:22em;line-height:1.9}

/* Gravity */
.gv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 var(--pad)}
.gv{position:relative;background:#050506;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line)}
.gv img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.gv:hover img{transform:scale(1.04)}
.gv .mono{position:absolute;left:12px;top:10px;color:var(--mute);z-index:2}
.gv.main{grid-column:span 4;aspect-ratio:1303/543}
.gv.t{grid-column:span 2;aspect-ratio:444/203;padding:4%}
.gv.d{aspect-ratio:auto;padding:6%}

/* Merch (light) horizontal */
.h-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;gap:5vh}
.h-track{display:flex;gap:2.2vw;padding:0 var(--pad);width:max-content;will-change:transform;align-items:flex-end}
.w-merch{padding:12vh 0 0}
.w-merch .work-head{margin-bottom:0}
.flip{width:clamp(250px,23vw,400px);flex:none}
.flip-box{position:relative;aspect-ratio:4/5;perspective:1400px}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s var(--ease)}
.flip:hover .flip-in,.flip.on .flip-in{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper2);display:grid;place-items:center;padding:8%;overflow:hidden}
.flip-face img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.flip-face.back{transform:rotateY(180deg);background:#cfc9ba}
.flip-face .mono{position:absolute;left:12px;top:10px;color:#6f6b60;font-size:10px}
.flip-face .side{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;background:var(--ink);color:var(--acid);padding:2px 7px}
.flip-cap{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1.5px solid var(--ink);margin-top:14px}
.flip-cap b{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase}
.flip-cap span{font-family:var(--cn);font-size:12px;color:#5f5d57}
.merch-hint{display:flex;justify-content:space-between;padding:0 var(--pad);color:#6b6a64}
.h-end{width:34vw;flex:none;align-self:center;padding-left:2vw}
.h-end b{font-family:var(--display);font-weight:400;font-size:clamp(60px,7vw,130px);line-height:.85;display:block}

/* ---------- MOTION ---------- */
.motion{padding:16vh 0 14vh;background:var(--bg);overflow:hidden}
.mo-title{display:flex;align-items:flex-end;justify-content:space-between;gap:3vw;padding:6vh var(--pad) 7vh}
.mo-title h2{font-family:var(--display);font-weight:400;font-size:clamp(90px,17vw,330px);line-height:.8;text-transform:uppercase}
.mo-title h2 .o{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.mo-title p.cn{max-width:24em;font-size:14px;color:#bdbab1;line-height:1.9;padding-bottom:1vw}
.mo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:0 var(--pad)}
.vcard{position:relative;overflow:hidden;background:#000;cursor:pointer;border:1px solid var(--line)}
.vcard video,.vcard img.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .6s}
.vcard:hover video{transform:scale(1.035)}
.vcard .vc-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.vc-meta b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.1vw,38px);line-height:.95;text-transform:uppercase}
.vc-meta .cn{font-size:12.5px;opacity:.75;display:block;margin-top:4px}
.vc-top{position:absolute;left:12px;top:10px;right:12px;z-index:3;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.12em}
.vc-top .rec{display:flex;align-items:center;gap:6px}
.vc-top .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acid);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.vc-play{width:44px;height:44px;flex:none;border-radius:50%;background:var(--acid);color:var(--ink);display:grid;place-items:center;transition:transform .5s var(--ease)}
.vcard:hover .vc-play{transform:scale(1.15) rotate(-90deg)}
.v1{grid-column:span 8;aspect-ratio:16/9}
.v2{grid-column:span 4;grid-row:span 2}
.v3,.v4{grid-column:span 4;aspect-ratio:16/9}
.v5,.v6{grid-column:span 6;aspect-ratio:16/9}
.mo-foot{display:flex;justify-content:space-between;padding:18px var(--pad) 0;color:var(--mute)}

/* ---------- CHARACTERS ---------- */
.chars{background:#101114;padding:16vh 0 0;overflow:clip}
.chars .h-pin{gap:0;justify-content:flex-end;padding-bottom:6vh;position:relative}
.ch-bg{position:absolute;left:0;top:50%;transform:translateY(-62%);font-family:var(--display);font-size:clamp(160px,30vw,560px);line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(236,233,225,.14);pointer-events:none;will-change:transform}
.ch-floor{position:absolute;left:0;right:0;bottom:calc(6vh + 64px);height:1px;background:var(--line)}
.ch-track{gap:5vw;align-items:flex-end;position:relative;z-index:2}
.chr{flex:none;display:flex;flex-direction:column;align-items:center;gap:22px}
.chr img{height:var(--h,58vh);width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.55));transition:transform 1s var(--ease)}
.chr:hover img{transform:translateY(-12px)}
.chr .cap{display:flex;align-items:center;gap:10px;white-space:nowrap}
.chr .cap b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em}
.chr .cap .mono{color:var(--acid)}
.ch-intro{flex:none;width:34vw;align-self:center;padding-right:2vw}
.ch-intro h2{font-family:var(--display);font-weight:400;font-size:clamp(70px,8vw,150px);line-height:.84;text-transform:uppercase}
.ch-intro p.cn{margin-top:22px;font-size:14px;line-height:1.95;color:#bdbab1;max-width:26em}
.ch-detail{padding:14vh var(--pad) 16vh}
.ch-detail-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4vh}
.ch-detail-head h3{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,90px);line-height:.9;text-transform:uppercase}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(200px,20vw,360px);gap:12px;grid-auto-flow:dense}
.cd{position:relative;background:#17181c;border:1px solid var(--line);display:grid;place-items:center;padding:6%;overflow:hidden}
.cd::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(212,255,58,.07),transparent 60%);pointer-events:none}
.cd img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.cd:hover img{transform:scale(1.05)}
.cd .mono{position:absolute;left:12px;top:10px;color:var(--mute);font-size:10px;z-index:2}
.cd.w2{grid-column:span 2}.cd.h2{grid-row:span 2}
.cd.pic{padding:0}.cd.pic img{width:100%;height:100%;object-fit:cover;max-width:none;max-height:none}
.cd.duo{display:flex;align-items:center;justify-content:space-around}
.cd.duo img{max-width:44%}

/* ---------- HAND-DRAWN ---------- */
.draw{background:var(--bg);padding:16vh 0 18vh;overflow:hidden}
.draw-title{padding:6vh var(--pad) 0;display:flex;justify-content:space-between;align-items:flex-end;gap:3vw}
.draw-title h2{font-family:var(--display);font-weight:400;font-size:clamp(80px,14vw,270px);line-height:.8;text-transform:uppercase}
.draw-title h2 em{font-family:"Serif";font-style:italic;color:var(--acid);text-transform:none;font-size:.82em;letter-spacing:-.02em}
.draw-title p.cn{max-width:22em;font-size:14px;color:#bdbab1;line-height:1.9}
.collage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:2vw;padding:12vh var(--pad) 0;align-items:start}
.pc{position:relative;background:#f1eee6;padding:10px 10px 38px;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .8s var(--ease)}
.pc:hover{transform:rotate(0)!important;z-index:5}
.pc img{width:100%;height:auto}
.pc .mono{position:absolute;left:12px;bottom:12px;color:#55534c;font-size:10px}
.pc::before{content:"";position:absolute;left:50%;top:-12px;width:80px;height:24px;margin-left:-40px;background:rgba(212,255,58,.75);transform:rotate(-3deg);mix-blend-mode:multiply}
.pc.dk{background:#1a1b1f;border:1px solid var(--line)}
.pc.dk .mono{color:var(--mute)}
.pc.dk::before{background:rgba(212,255,58,.55);mix-blend-mode:normal}

/* ---------- ODE OF ASHES ---------- */
.ode{background:var(--ode);color:#E9E2D2;position:relative}
.ode .sec-no{background:var(--bronze);color:#120e08}
.embers{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 1.2s}
.embers.on{opacity:1}
.ode-intro{height:120vh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.ode-intro .bgimg{position:absolute;inset:-10% 0;background:url(../img/poster_ode_c.jpg) center/cover;opacity:.32;filter:saturate(.7);-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%)}
.ode-intro .sec-head{position:absolute;top:14vh;left:0;right:0;color:#b9ae98}
.ode-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:var(--bronze);position:relative}
.ode-title{position:relative;font-family:"Serif";font-style:italic;font-weight:400;font-size:clamp(90px,15.5vw,300px);line-height:.86;letter-spacing:-.025em;margin:3vh 0 2vh;color:#efe7d6;text-shadow:0 0 60px rgba(229,137,74,.25)}
.ode-title .ch{will-change:transform,filter,opacity}
.ode-sub{position:relative;font-family:var(--cnserif);font-size:clamp(20px,2.2vw,36px);letter-spacing:.5em;padding-left:.5em;color:#e9e2d2}
.ode-sub2{position:relative;font-family:"Serif";font-size:clamp(16px,1.5vw,24px);letter-spacing:.32em;color:var(--bronze);margin-top:14px;text-transform:uppercase}
.ode-award{position:absolute;bottom:12vh;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#a79c86}
.ot-pin{height:100vh;position:relative;overflow:hidden;display:grid;place-items:center}
.ot-frame{position:absolute;inset:0;transform:scale(.42);border-radius:26px;overflow:hidden;will-change:transform;cursor:pointer;background:#000}
.ot-frame video,.ot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ot-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65));pointer-events:none}
.ot-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.ot-ui .c{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#e9e2d2}
.ot-ui .tl{left:var(--pad);top:90px}.ot-ui .tr{right:var(--pad);top:90px;text-align:right}
.ot-ui .bl{left:var(--pad);bottom:100px}.ot-ui .br{right:var(--pad);bottom:100px;text-align:right}
.ot-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:16px;pointer-events:auto;cursor:pointer;color:#120e08}
.ot-play i{width:92px;height:92px;border-radius:50%;background:var(--bronze);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(201,164,101,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,164,101,.5)}100%{box-shadow:0 0 0 30px rgba(201,164,101,0)}}
.ot-play span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:#efe7d6;text-shadow:0 1px 8px #000}
.ot-side{position:absolute;z-index:1;font-family:"Serif";font-style:italic;font-size:clamp(60px,9vw,170px);line-height:.85;color:#2a2620;white-space:nowrap}
.ot-side.l{left:var(--pad);top:16vh}.ot-side.r{right:var(--pad);bottom:14vh}
.ode-quote{padding:22vh var(--pad);text-align:center;position:relative}
.ode-quote .q{font-family:var(--cnserif);font-size:clamp(26px,3.4vw,58px);line-height:1.75;letter-spacing:.16em;max-width:22em;margin:0 auto;font-weight:500}
.ode-quote .q .ch{opacity:.1}
.ode-quote .star{width:44px;margin:6vh auto 0;color:var(--bronze)}
.ode-quote .lines{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:6vh}
.ode-quote .lines i{display:block;height:1px;width:min(30vw,380px);background:linear-gradient(90deg,transparent,#6d6250)}
.ode-quote .lines i:last-child{background:linear-gradient(-90deg,transparent,#6d6250)}
.chron .h-pin{gap:6vh}
.chron-head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--pad)}
.chron-head h3{font-family:"Serif";font-style:italic;font-weight:400;font-size:clamp(50px,6vw,110px);line-height:.9}
.chron-head h3 span{font-family:var(--cnserif);font-style:normal;font-size:.42em;letter-spacing:.4em;margin-left:16px;color:var(--bronze);vertical-align:middle}
.chron-track{gap:0;align-items:stretch;position:relative}
.era{flex:none;width:clamp(300px,30vw,480px);padding:0 3vw 0 0;position:relative}
.era::before{content:"";position:absolute;left:0;right:0;top:36px;height:1px;background:#3a342b}
.era .dot{position:relative;width:13px;height:13px;transform:rotate(45deg);border:1px solid var(--bronze);background:var(--ode);margin:30px 0 30px}
.era.key .dot{background:var(--bronze)}
.era .num{font-family:"Serif";font-size:84px;line-height:.8;color:#3b342a}
.era h4{font-family:var(--cnserif);font-weight:700;font-size:clamp(28px,2.3vw,40px);letter-spacing:.14em;margin-top:6px}
.era .en{font-family:"Serif";font-style:italic;font-size:19px;color:var(--bronze);margin-top:4px}
.era p{font-family:var(--cnserif);font-size:14.5px;line-height:2;color:#bfb6a3;margin-top:18px;max-width:24em}
.era p b{color:#efe7d6;font-weight:600}
.og{padding:10vh var(--pad) 0}
.og-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6vh}
.og-head h3{font-family:"Serif";font-style:italic;font-weight:400;font-size:clamp(50px,6vw,110px);line-height:.9}
.og-card{position:sticky;top:12vh;height:76vh;margin-bottom:8vh}
.og-in{position:relative;height:100%;overflow:hidden;border:1px solid #2b2620;transform-origin:50% 0;will-change:transform}
.og-in img{width:100%;height:100%;object-fit:cover}
.og-in .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:60px 24px 20px;background:linear-gradient(transparent,rgba(5,5,6,.8))}
.og-in .cap b{font-family:"Serif";font-style:italic;font-weight:400;font-size:clamp(34px,3.6vw,64px);line-height:.9}
.og-in .cap .mono{color:#cbbfa6}
.og-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2vh}
.og-row figure{position:relative;aspect-ratio:828/480;overflow:hidden;border:1px solid #2b2620}
.og-row img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.og-row figure:hover img{transform:scale(1.05)}
.og-row figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#e9e2d2;text-shadow:0 1px 6px #000}
.relics{padding:18vh var(--pad) 8vh}
.relics-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(180px,17vw,320px);gap:12px;margin-top:6vh}
.relic{position:relative;border:1px solid #2b2620;background:radial-gradient(circle at 50% 55%,#17140f,#0a0909 70%);display:grid;place-items:center;padding:7%;overflow:hidden}
.relic img{max-width:100%;max-height:100%;object-fit:contain;opacity:.92;transition:transform 1.2s var(--ease),opacity .5s}
.relic:hover img{transform:scale(1.05);opacity:1}
.relic .lbl{position:absolute;left:12px;top:10px;right:12px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#9c907a}
.relic .lbl b{color:var(--bronze);font-weight:400}
.r1{grid-column:span 2;grid-row:span 2}.r2{grid-column:span 1;grid-row:span 2}.r3{grid-column:span 3;grid-row:span 2}
.r4{grid-column:span 2}.r5{grid-column:span 2}.r6{grid-column:span 2}
.cast{position:relative;padding:20vh var(--pad);overflow:hidden;text-align:center}
.cast .bgimg{position:absolute;inset:0;background:url(../img/poster_ode_b.jpg) center 30%/cover;opacity:.28;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.cast ul{position:relative;list-style:none;margin-top:6vh}
.cast li{font-family:"Serif";font-size:clamp(44px,6.4vw,124px);line-height:1.04;letter-spacing:-.01em;transition:color .4s,letter-spacing .6s var(--ease)}
.cast li span{font-family:var(--cnserif);font-size:.3em;letter-spacing:.3em;color:var(--bronze);vertical-align:middle;margin-left:.6em}
.cast li:hover{color:var(--bronze);letter-spacing:.02em}
.cast .mono{position:relative;color:#a79c86}
.ode-archive{display:grid;grid-template-columns:minmax(260px,30vw) 1fr;gap:6vw;padding:8vh var(--pad) 20vh;align-items:center}
.doc{position:relative;transform:rotate(-3deg);box-shadow:0 40px 80px rgba(0,0,0,.6);border:1px solid #2b2620}
.doc img{width:100%}
.ode-end .big{font-family:"Serif";font-style:italic;font-size:clamp(46px,5.6vw,108px);line-height:.92;letter-spacing:-.02em}
.ode-end .big span{color:var(--bronze)}
.ode-end p.cn{font-family:var(--cnserif);font-size:15px;line-height:2;color:#bfb6a3;margin-top:4vh;max-width:30em}
.credits{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:5vh;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#a79c86}
.credits b{color:#efe7d6;font-weight:400}
.ode .tag{color:var(--bronze)}
.ode .tag.fill{background:var(--bronze);border-color:var(--bronze);color:#120e08}

/* ---------- CONTACT ---------- */
.contact{background:var(--acid);color:var(--ink);padding:16vh 0 0;overflow:hidden}
.contact .sec-no{background:var(--ink);color:var(--acid)}
.ct-big{padding:6vh var(--pad) 0;font-family:var(--display);font-weight:400;font-size:clamp(110px,23vw,460px);line-height:.8;text-transform:uppercase;white-space:nowrap}
.ct-big .o{color:transparent;-webkit-text-stroke:2px var(--ink)}
.ct-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:3vw;padding:5vh var(--pad) 7vh}
.ct-sub p.cn{font-size:clamp(16px,1.4vw,22px);font-weight:600;line-height:1.7;max-width:26em}
.ct-rows{margin:0 var(--pad);border-bottom:2px solid var(--ink)}
.ct-row{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:20px;padding:clamp(16px,2vw,30px) 0;border-top:2px solid var(--ink);position:relative}
.ct-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;line-height:1.7}
.ct-row .v{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.6vw,108px);line-height:.9;letter-spacing:.005em;cursor:pointer;transition:letter-spacing .6s var(--ease)}
.ct-row .v:hover{letter-spacing:.03em}
.ct-row .v small{font-family:var(--mono);font-size:12px;letter-spacing:.12em;vertical-align:middle;margin-left:14px}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--acid);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;padding:18px 26px 18px 22px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);overflow:hidden;white-space:nowrap;transition:color .4s}
.btn::before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateX(0)}
.btn>*{position:relative}
.btn svg{width:16px;height:16px}
.btn.done{background:#fff;color:var(--ink)}
.btn-alt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-decoration:underline;text-underline-offset:4px;margin-right:18px}
.ct-actions{display:flex;align-items:center}
.ct-marquee{margin-top:12vh;background:var(--ink);color:var(--acid);padding:1.2vw 0 .9vw;white-space:nowrap;overflow:hidden}
.ct-marquee .track>span{font-size:clamp(34px,4vw,72px)}
footer{background:var(--ink);color:var(--fg);padding:5vh var(--pad) 12vh;display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center}
footer .mono{color:var(--mute)}
footer .top{justify-self:end;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;border:1px solid var(--line);padding:10px 16px;border-radius:999px;transition:background .3s,color .3s}
footer .top:hover{background:var(--acid);color:var(--ink)}
footer .fl{font-family:var(--display);font-size:22px;letter-spacing:.04em}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:9500;background:rgba(6,6,8,.95);display:none;align-items:center;justify-content:center;padding:70px var(--pad) 40px}
.lb.on{display:flex}
.lb-media{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lb-media img,.lb-media video{max-width:92vw;max-height:84vh;width:auto;height:auto;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-close{position:absolute;right:var(--pad);top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fg);display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:9px 14px;border-radius:999px}
.lb-close:hover{background:var(--acid);color:var(--ink)}
.lb-cap{position:absolute;left:var(--pad);top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .exp-row{grid-template-columns:50px 150px 1fr 40px}
  .er-role{display:none}
  .about-grid{grid-template-columns:1fr}
  .agent{max-width:440px}
}
@media (max-width:899px){
  .hud{grid-template-columns:1fr auto}
  .hud-nav{display:none}
  .rail{display:none}
  .hero-card{right:6vw;top:auto;bottom:30vh;width:38vw}
  .badge{display:none}
  .hero-bottom{grid-template-columns:1fr;gap:14px;bottom:90px}
  .hb-quote,.hb-scroll{display:none}
  .hero-top{flex-direction:column;gap:8px}
  .hero-coords{text-align:left}
  .dock button .t{display:none}
  .dock button{padding:11px 14px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .exp-row{grid-template-columns:1fr;gap:4px}
  .er-no,.er-arrow{display:none}
  .exp-sub,.work-desc,.wr-detail,.ode-archive{grid-template-columns:1fr}
  .work-head{grid-template-columns:1fr}
  .wi-index{grid-template-columns:1fr 1fr}
  .ev-wrap{grid-template-columns:1fr 1fr}
  .ev-cap{grid-column:span 2}
  .ev-cap.r{text-align:left;align-items:flex-start}
  .h-pin{height:auto;padding:6vh 0}
  .h-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}
  .h-track>*{scroll-snap-align:start}
  .h-end,.ch-intro{width:80vw}
  .chr img{height:calc(var(--h,58vh) * .7)}
  .ch-bg{display:none}
  .mo-grid{grid-template-columns:1fr 1fr}
  .v1,.v2,.v3,.v4,.v5,.v6{grid-column:span 2;grid-row:auto}
  .v2{aspect-ratio:9/16;max-height:80vh}
  .cd-grid{grid-template-columns:1fr 1fr}
  .collage{grid-template-columns:1fr 1fr}
  .collage .pc{grid-column:span 1!important;margin-top:0!important}
  .relics-grid{grid-template-columns:1fr 1fr}
  .relics-grid>*{grid-column:span 1!important;grid-row:span 1!important}
  .og-row{grid-template-columns:1fr}
  .og-card{height:50vh}
  .ct-row{grid-template-columns:1fr}
  .ct-big{white-space:normal}
  footer{grid-template-columns:1fr}
  footer .top{justify-self:start}
  .mo-title,.draw-title,.ct-sub{flex-direction:column;align-items:flex-start}
  .hero-card{top:auto;bottom:21vh;width:30vw;right:5vw}
  .hero-card .hc-label{display:none}
  .hero-name{transform:translateY(-80%)}
  .ch-detail-head{flex-direction:column;align-items:flex-start;gap:10px}
  .ch-detail-head h3{font-size:44px}
  .ot-pin{height:auto;aspect-ratio:16/9}
  .ot-side,.ot-ui .c{display:none}
  .ot-play i{width:64px;height:64px}
  .ot-frame{border-radius:0}
  .wr-pin{height:56vw}
  .wr-title{display:none}
  .wr-hud .c{font-size:9px}
  .wr-hud .tl,.wr-hud .tr{top:12px}.wr-hud .bl,.wr-hud .br{bottom:12px}
  .og-card{position:relative;top:0;height:auto;aspect-ratio:16/9;margin-bottom:12px}
  .cast li{font-size:44px}
}