/* GROEVIUS WILSON — Portfolio · css/style.css */
body{margin:0;background:#0B0B0C}
.gw,.gw *,.gw *::before,.gw *::after{box-sizing:border-box}
.gw{--ink:#0B0B0C;--ink2:#141416;--ink3:#1C1C1F;--paper:#EEECE6;--paper2:#E2DFD6;--lime:#CCFF00;--mute:#5E5C57;--muted:#A6A59F;--line:rgba(11,11,12,.16);--lined:rgba(238,236,230,.16);--fc:'Anton','Impact','Arial Narrow',sans-serif;--fs:'Archivo','Helvetica Neue',Arial,sans-serif;--fm:'JetBrains Mono',ui-monospace,Menlo,monospace;--pad:clamp(16px,3vw,48px);--e:cubic-bezier(.2,.7,0,1);--eio:cubic-bezier(.76,0,.24,1);position:relative;background:var(--ink);color:var(--paper);font-family:var(--fs);font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
:where(.gw) a{color:inherit;text-decoration:none}
:where(.gw) a:hover{color:inherit}
:where(.gw) img,:where(.gw) video{display:block;max-width:100%}
:where(.gw) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
:where(.gw) :is(h1,h2,h3,p,ol,ul,figure){margin:0}
:where(.gw) :is(ol,ul){list-style:none;padding:0}
.gw ::selection{background:var(--lime);color:var(--ink)}
.gw :focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.cond{font-family:var(--fc);font-weight:400;text-transform:uppercase;line-height:.84;letter-spacing:0}
.wide{font-family:var(--fs);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
.lime{color:var(--lime)}
.ico{width:18px;height:18px;flex:none;overflow:visible}
.ico path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.ico .fill{fill:currentColor;stroke:none}
.hit{position:absolute;inset:0;z-index:4;display:block;width:100%;height:100%}

/* ---------- software logos ---------- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tool{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;font-family:var(--fs);font-stretch:100%;font-weight:800;font-size:12px;letter-spacing:0;line-height:1;text-transform:none;flex:none}
.t-pr{background:#00005B;color:#9999FF;box-shadow:inset 0 0 0 1px rgba(153,153,255,.45)}
.t-ps{background:#001E36;color:#31A8FF;box-shadow:inset 0 0 0 1px rgba(49,168,255,.45)}
.t-ai{background:#330000;color:#FF9A00;box-shadow:inset 0 0 0 1px rgba(255,154,0,.45)}
.t-lr{background:#001E36;color:#31A8FF;box-shadow:inset 0 0 0 1px rgba(49,168,255,.45)}
.t-id{background:#49021F;color:#FF3366;box-shadow:inset 0 0 0 1px rgba(255,51,102,.45)}
.t-fg{background:#1E1E1E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.t-fg svg{width:10px;height:15px}
.t-code{width:auto;padding:0 7px;background:var(--ink3);color:var(--lime);font-family:var(--fm);font-size:10px;box-shadow:inset 0 0 0 1px var(--lined)}

/* ---------- loader ---------- */
.ld{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:grid;grid-template-rows:auto 1fr auto;padding:20px var(--pad) 28px;overflow:hidden;clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--eio),opacity .5s,color .3s;animation:ldSafe .01s linear 15s forwards}
.ld[data-state="done"]{clip-path:inset(0 0 100% 0);pointer-events:none}
.ld[data-state="fade"]{opacity:0;pointer-events:none}
.ld[data-state="off"]{display:none}
@keyframes ldSafe{to{visibility:hidden;pointer-events:none}}
.ld-top,.ld-mid,.ld-bot{position:relative;z-index:2}
.ld-top{display:flex;justify-content:space-between;gap:16px;color:var(--muted)}
.ld-mid{align-self:center}
.ld-name{display:flex;flex-wrap:wrap;column-gap:.22em;font-size:clamp(42px,7vw,120px);line-height:.86}
.ld-word{display:inline-flex}
.ld-l{display:inline-block;color:#2B2B2E;transition:color .3s}
.ld-l.on{color:var(--paper)}
.ld-l.hot{color:var(--lime)}
.ld-sub{margin-top:16px;color:var(--muted)}
.ld-bot{display:grid;grid-template-columns:1fr auto;column-gap:28px;row-gap:18px;align-items:end}
.ld-row{display:flex;flex-direction:column;gap:6px;padding-bottom:10px}
.ld-step{color:var(--lime)}
.ld-n{font-size:clamp(80px,12.5vw,210px);line-height:.78}
.ld-bar{grid-column:1/-1;position:relative;height:14px;background:#1E1E21;box-shadow:inset 0 0 0 1px rgba(204,255,0,.22)}
.ld-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--lime);transform-origin:left center}
.ld-tip{position:absolute;bottom:24px;transform:translateX(-50%);color:var(--lime);white-space:nowrap}
.ld-flood{position:absolute;inset:0;z-index:1;background:var(--lime);transform-origin:bottom center;transform:scaleY(0);transition:transform .65s var(--eio)}
.ld[data-state="fill"] .ld-flood,.ld[data-state="done"] .ld-flood{transform:scaleY(1)}
.ld[data-state="fill"],.ld[data-state="done"]{color:var(--ink)}
.ld[data-state="fill"] .ld-l,.ld[data-state="done"] .ld-l,.ld[data-state="fill"] .ld-top,.ld[data-state="done"] .ld-top,.ld[data-state="fill"] .ld-sub,.ld[data-state="done"] .ld-sub,.ld[data-state="fill"] .ld-step,.ld[data-state="done"] .ld-step{color:var(--ink)}
.ld[data-state="fill"] .ld-bar,.ld[data-state="done"] .ld-bar,.ld[data-state="fill"] .ld-tip,.ld[data-state="done"] .ld-tip{opacity:0}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:120;pointer-events:none;display:none;will-change:transform}
.gw[data-cur="on"] .cur{display:block}
.gw[data-cur="on"],.gw[data-cur="on"] *{cursor:none!important}
.cur-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink);transition:width .4s var(--e),height .4s var(--e),left .4s var(--e),top .4s var(--e),background .3s,box-shadow .3s,transform .2s}
.cur[data-state="link"] .cur-dot{width:46px;height:46px;left:-23px;top:-23px;background:rgba(204,255,0,.18);box-shadow:0 0 0 1.5px var(--lime)}
.cur[data-state="label"] .cur-dot{width:92px;height:92px;left:-46px;top:-46px;background:var(--lime);box-shadow:none}
.cur[data-down="1"] .cur-dot{transform:scale(.75)}
.cur[data-hide="1"]{opacity:0}
.cur-lbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.4);opacity:0;color:var(--ink);font-weight:700;white-space:nowrap;transition:opacity .25s,transform .4s var(--e)}
.cur-lbl::after{content:attr(data-label)}
.cur[data-state="label"] .cur-lbl{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- header ---------- */
.hdr{position:fixed;left:0;right:0;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:16px var(--pad);color:var(--paper);transition:color .4s,transform .9s var(--e),padding .4s}
.gw[data-hdr="light"] .hdr,.gw[data-hdr="lime"] .hdr{color:var(--ink)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:0;box-shadow:0 1px 0 var(--lined);transition:opacity .4s,background-color .4s}
.gw[data-top="0"] .hdr::before{opacity:.94}
.gw[data-hdr="light"] .hdr::before{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.gw[data-hdr="lime"] .hdr::before{background:var(--lime);box-shadow:0 1px 0 rgba(11,11,12,.3)}
.gw[data-top="0"] .hdr{padding-top:10px;padding-bottom:10px}
.gw[data-motion="on"]:not(.is-ready) .hdr{transform:translateY(-140%)}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand-mark{font-size:38px;line-height:.8}
.brand-txt{display:flex;flex-direction:column;gap:2px}
.brand-n{font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.brand-txt .mono{font-size:10px;opacity:.75}
.nav{display:flex;gap:2px;justify-self:center}
.nav a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:12px 12px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.nav a sup{font-family:var(--fm);font-size:9px}
.nav a .ico{width:13px;height:13px}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .nav-site{color:var(--lime)}
.gw[data-hdr="light"] .nav .nav-site,.gw[data-hdr="lime"] .nav .nav-site{color:inherit}
.hdr-r{display:flex;align-items:center;gap:16px;justify-self:end}
.hdr-sec{min-width:200px;text-align:right;opacity:.8}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s,transform .5s var(--e);transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.pill .ico{width:16px;height:16px;transition:transform .5s var(--e)}
.pill:hover .ico{transform:rotate(45deg)}
.pill-lime{background:var(--lime);color:var(--ink)}
.pill-lime:hover{background:var(--paper);color:var(--ink)}
.gw[data-hdr="lime"] .hdr .pill-lime{background:var(--ink);color:var(--lime)}
.pill-ink{background:var(--ink);color:var(--paper)}
.pill-ink:hover{background:var(--lime);color:var(--ink)}
.pill-line{border:1.5px solid currentColor}
.pill-line:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;align-items:center;justify-content:center}
.rbtn{width:52px;height:52px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background .3s,color .3s,transform .5s var(--e);transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.rbtn:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* ---------- hero ---------- */
.stack,.stack2{position:relative}
.hero{position:sticky;top:0;z-index:1;height:clamp(620px,100svh,1000px);background:var(--ink);color:var(--paper);overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(.8);transform:scale(calc(1.06 + var(--p,0)*.16))}
.grain{position:absolute;left:-50%;top:-50%;width:200%;height:200%;opacity:.15;mix-blend-mode:overlay;pointer-events:none;will-change:transform;animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-5%,-1%)}80%{transform:translate(4%,3%)}100%{transform:translate(0,0)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.66) 0%,rgba(11,11,12,.05) 34%,rgba(11,11,12,0) 50%,rgba(11,11,12,.86) 100%)}
.hero-dim{position:absolute;inset:0;background:var(--ink);opacity:calc(var(--p,0)*.82)}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:100px var(--pad) 20px;transform:translate3d(0,calc(var(--p,0)*-80px),0) scale(calc(1 - var(--p,0)*.05));transform-origin:50% 100%}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;transition:opacity 1s var(--e) .7s,transform 1.2s var(--e) .7s}
.hero-tag{font-size:clamp(26px,3.3vw,54px);color:var(--paper)}
.hero-tag span{display:block}
.hero-tag span + span{color:var(--lime)}
.hero-intro{max-width:340px;color:#E4E2DC}
.hero-disc{display:flex;flex-direction:column;margin-top:26px;transition:opacity 1s var(--e) .85s,transform 1.2s var(--e) .85s}
.hero-disc a{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;min-height:34px;color:#E4E2DC;transition:color .3s,transform .5s var(--e)}
.hero-disc a span{color:var(--lime)}
.hero-disc a:hover{color:var(--lime);transform:translateX(10px)}
.hero-name{margin-top:auto;font-size:clamp(52px,12.2vw,214px);line-height:.82;white-space:nowrap}
.hn{display:flex;gap:.2em;padding:.08em 0 .08em;margin:-.08em 0 -.08em;clip-path:inset(-40% -4% 0 -4%)}
.hn-a,.hn-b{display:flex}
.hn-a{color:var(--lime)}
.hn-b{color:var(--paper)}
.ch{display:inline-block;transition:transform 1.15s var(--e)}
.gw[data-motion="on"]:not(.is-ready) .ch{transform:translate3d(0,112%,0)}
.hn-a .ch:nth-child(2){transition-delay:.03s}.hn-a .ch:nth-child(3){transition-delay:.06s}.hn-a .ch:nth-child(4){transition-delay:.09s}.hn-a .ch:nth-child(5){transition-delay:.12s}.hn-a .ch:nth-child(6){transition-delay:.15s}.hn-a .ch:nth-child(7){transition-delay:.18s}.hn-a .ch:nth-child(8){transition-delay:.21s}
.hn-b .ch:nth-child(1){transition-delay:.26s}.hn-b .ch:nth-child(2){transition-delay:.29s}.hn-b .ch:nth-child(3){transition-delay:.32s}.hn-b .ch:nth-child(4){transition-delay:.35s}.hn-b .ch:nth-child(5){transition-delay:.38s}.hn-b .ch:nth-child(6){transition-delay:.41s}
.badge{position:absolute;right:var(--pad);bottom:clamp(230px,34vh,330px);z-index:3;width:clamp(112px,10.5vw,156px);aspect-ratio:1;color:var(--paper);transition:opacity 1s var(--e) .9s,transform 1.2s var(--e) .9s}
.badge svg{width:100%;height:100%;overflow:visible;animation:spin 18s linear infinite}
.badge text{font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:currentColor}
.badge-c{position:absolute;inset:27%;border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:clamp(26px,2.5vw,40px);line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;padding-top:14px;border-top:1px solid var(--lined);transition:opacity 1s var(--e) .8s}
.gw[data-motion="on"]:not(.is-ready) .hero-top,.gw[data-motion="on"]:not(.is-ready) .hero-foot,.gw[data-motion="on"]:not(.is-ready) .hero-disc{opacity:0;transform:translate3d(0,24px,0)}
.gw[data-motion="on"]:not(.is-ready) .badge{opacity:0;transform:scale(.6) rotate(-40deg)}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.cue-line{width:44px;height:1.5px;background:currentColor;transform-origin:left;animation:cue 2.2s var(--eio) infinite}
@keyframes cue{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ---------- about ---------- */
.about{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.band{position:relative;z-index:3;width:110%;margin:-30px 0 0 -5%;transform:rotate(-2deg);background:var(--lime);color:var(--ink);overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.band-in{display:flex;align-items:center;gap:26px;width:max-content;padding:13px 0;animation:marq 34s linear infinite;font-size:14px;font-weight:700}
.band-in i{width:9px;height:9px;background:var(--ink);transform:rotate(45deg);flex:none}
.band-rev{animation-direction:reverse}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
.band-g{margin:-26px 0 -26px -5%;transform:rotate(1.6deg)}
.about-in{padding:clamp(90px,10vw,150px) var(--pad)}
.sec-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vw,96px);color:var(--mute)}
.sec-head > :nth-child(2){justify-self:center}
.sec-head > :nth-child(3){justify-self:end;text-align:right}
.manifesto{font-family:var(--fs);font-stretch:78%;font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.4vw,88px);line-height:.98;letter-spacing:-.012em;max-width:16.5em}
.w{opacity:calc(.13 + var(--on,1)*.87)}
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::before{content:"";position:absolute;left:-.06em;right:-.06em;top:.1em;bottom:.02em;background:var(--lime);z-index:-1;transform-origin:left center;transform:scaleX(var(--on,1))}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);margin-top:clamp(64px,8vw,130px);align-items:start}
.ab-h{color:var(--mute);margin-bottom:18px}
.ab-skills{grid-column:1/span 5}
.ab-bio{grid-column:6/span 3;display:flex;flex-direction:column;gap:16px}
.ab-mosaic{grid-column:10/span 3}
.skills li{display:grid;grid-template-columns:44px 1fr 22px;align-items:center;gap:12px;padding:15px 8px 15px 0;border-top:1px solid var(--line);font-stretch:75%;font-weight:800;font-size:clamp(20px,1.9vw,30px);text-transform:uppercase;line-height:1;transition:padding .5s var(--e),background .3s}
.skills li:last-child{border-bottom:1px solid var(--line)}
.skills li .mono{color:var(--mute)}
.skills li .ico{opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .5s var(--e)}
.skills li:hover{padding-left:12px;background:var(--lime)}
.skills li:hover .ico{opacity:1;transform:none}
.ab-p{font-size:17px;line-height:1.55}
.link-u{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.03em;border-bottom:2px solid currentColor;transition:gap .5s var(--e)}
.link-u:hover{gap:16px}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.mo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .9s var(--e)}
.mo:hover img{filter:none;transform:scale(1.07)}
.mo span{position:absolute;left:8px;bottom:8px;background:var(--paper);color:var(--ink);padding:3px 7px;font-size:10px}
.ab-tools{margin-top:clamp(56px,7vw,110px)}
.toolbox{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.toolbox li{display:flex;flex-direction:column;gap:10px;padding:18px 16px 20px;background:var(--ink);color:var(--paper);transition:transform .6s var(--e),background .3s}
.toolbox .tool{width:52px;height:52px;border-radius:12px;font-size:23px;transition:transform .6s var(--e)}
.toolbox li:hover{transform:translateY(-6px)}
.toolbox li:hover .tool{transform:rotate(-8deg) scale(1.06)}
.tb-n{font-weight:800;font-size:17px;line-height:1.1;margin-top:6px}
.tb-u{color:var(--muted)}

/* ---------- works intro ---------- */
.works{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding:clamp(100px,11vw,170px) 0 clamp(80px,8vw,130px)}
.wk-title{display:flex;flex-direction:column;font-size:clamp(96px,21.5vw,380px);line-height:.8;padding:0 var(--pad);white-space:nowrap}
.wk-a{display:block;transform:translate3d(calc(var(--sx,0)*-1px),0,0)}
.wk-b{display:block;align-self:flex-end;color:transparent;-webkit-text-stroke:2px var(--lime);transform:translate3d(calc(var(--sx,0)*1px),0,0)}
.wk-meta{display:flex;justify-content:space-between;gap:16px;padding:30px var(--pad) 0;color:var(--muted)}
.wk-index{position:relative;margin:clamp(48px,6vw,96px) var(--pad) 0}
.wk-row{display:grid;grid-template-columns:80px 1fr auto auto 40px;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--lined);transition:color .3s,padding .6s var(--e)}
.wk-index li:last-child .wk-row{border-bottom:1px solid var(--lined)}
.wk-name{font-size:clamp(46px,6.6vw,116px);line-height:.86}
.wk-n,.wk-c{color:var(--muted)}
.wk-row .ico{width:34px;height:34px;transition:transform .5s var(--e)}
.wk-row:hover{color:var(--lime);padding-left:20px}
.wk-row:hover .ico{transform:rotate(-45deg)}
.wk-pv{position:absolute;left:var(--mx,72%);top:var(--my,50%);z-index:3;width:clamp(180px,17vw,280px);aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-6deg);transition:opacity .25s,transform .6s var(--e)}
.wk-row:hover .wk-pv{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}

/* ---------- chapters ---------- */
.chap{position:relative;z-index:2;padding:clamp(100px,10vw,160px) var(--pad)}
.chap-dark{background:var(--ink);color:var(--paper)}
.ch-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:end;margin-bottom:clamp(48px,6vw,100px)}
.ch-num{grid-column:1/span 3;font-size:clamp(120px,16vw,280px);line-height:.78;color:transparent;-webkit-text-stroke:2px var(--lime)}
.ch-title{grid-column:4/span 6;font-size:clamp(56px,8.4vw,150px);line-height:.86}
.ch-side{grid-column:10/span 3;display:flex;flex-direction:column;gap:16px;padding-bottom:6px}
.ch-desc{font-size:17px;line-height:1.5;color:#D8D6D0}
.ch-count{color:var(--muted)}
.mask{display:block;overflow:hidden;padding:.16em 0 .06em;margin:-.16em 0 -.06em}
.mask > span{display:block;transition:transform 1.1s var(--e)}
.mask + .mask > span{transition-delay:.08s}
.mask + .mask + .mask > span{transition-delay:.16s}
[data-reveal]{transition:opacity 1s var(--e),transform 1.2s var(--e),clip-path 1.3s var(--eio)}
.gw[data-motion="on"] [data-reveal="1"]:not([data-in]){opacity:0;transform:translate3d(0,56px,0)}
.gw[data-motion="on"] [data-reveal="img"]:not([data-in]){clip-path:inset(100% 0 0 0)}
.gw[data-motion="on"] [data-reveal]:not([data-in]) .mask > span{transform:translate3d(0,110%,0)}

/* ---------- video ---------- */
.vf{position:relative;aspect-ratio:2.39/1;overflow:hidden;background:#000;margin-bottom:clamp(36px,4vw,64px);clip-path:inset(0 0 0 0)}
.vf-media{position:absolute;inset:0}
.vf-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.6s var(--e)}
.vf:hover .vf-media video{transform:scale(1.08)}
.vf-over{position:absolute;inset:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:clamp(18px,2.4vw,36px);background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.66) 100%);pointer-events:none}
.vf-over .mono{color:#E8E6E0}
.vf-title{font-size:clamp(64px,10.5vw,190px);line-height:.82;color:var(--paper);margin:10px 0 14px}
.vgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,44px);row-gap:clamp(36px,4vw,64px)}
.vcard{position:relative}
.vc-a{grid-column:1/span 7;grid-row:1/span 2}
.vc-b{grid-column:8/span 5;padding-top:clamp(40px,9vw,160px)}
.vc-c{grid-column:8/span 5}
.vc-media{position:relative;overflow:hidden;background:#141416}
.vc-a .vc-media{aspect-ratio:5/6}
.vc-b .vc-media,.vc-c .vc-media{aspect-ratio:16/10}
.vc-media video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.vcard:hover .vc-media video{transform:scale(1.06)}
.vc-tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:var(--lime);padding:4px 8px}
.vc-cap{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:start;margin-top:14px;padding-top:16px;border-top:1px solid var(--lined)}
.vc-n{color:var(--lime);padding-top:6px}
.vc-title{font-size:clamp(30px,3.2vw,54px);line-height:.9}
.vc-k{color:var(--muted);margin-top:8px}
.vc-r{display:flex;align-items:center;gap:12px;padding-top:4px}
.vc-cap .ico{transition:transform .5s var(--e),color .3s}
.vcard:hover .vc-cap .ico{transform:rotate(45deg);color:var(--lime)}

/* ---------- graphic: 3D poster tunnel ---------- */
.chap-graphic{padding-top:clamp(120px,12vw,190px)}
.tun{position:relative}
.tun-sticky{position:relative}
.tun-head{display:flex;justify-content:space-between;gap:16px;color:var(--muted);margin-bottom:24px}
.tun-count b{color:var(--lime);font-weight:700}
.tun-world{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.tun-item{position:relative;margin:0}
.tun-item:nth-child(2n){margin-top:48px}
.tun-item img{width:100%;height:auto;box-shadow:0 34px 70px -30px rgba(0,0,0,.9)}
.tun-item figcaption{padding-top:10px;color:var(--muted)}
.tun-bg,.tun-floor,.tun-bar{display:none}
.tun-info{display:none}
.tun-item:nth-child(1){--z:0;--x:4;--y:0;--rz:-2}
.tun-item:nth-child(2){--z:1;--x:-11;--y:3;--rz:3}
.tun-item:nth-child(3){--z:2;--x:10;--y:-3;--rz:-3}
.tun-item:nth-child(4){--z:3;--x:-9;--y:4;--rz:2.5}
.tun-item:nth-child(5){--z:4;--x:11;--y:-2;--rz:-2.5}
.tun-item:nth-child(6){--z:5;--x:-10;--y:2;--rz:3}
.tun-item:nth-child(7){--z:6;--x:5;--y:-2;--rz:-1.5}
.gw[data-pin="on"] .tun{height:var(--tun-h,420vh);margin:0 calc(var(--pad)*-1)}
.gw[data-pin="on"] .tun-sticky{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1000px;perspective-origin:58% 46%}
.gw[data-pin="on"] .tun-head{position:absolute;left:var(--pad);right:var(--pad);top:clamp(84px,11vh,110px);z-index:3;margin:0}
.gw[data-pin="on"] .tun-world{display:block;position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,0,calc(var(--cz,0)*1px))}
.gw[data-pin="on"] .tun-item{position:absolute;left:60%;top:52%;width:min(27vw,50vh);margin:0;opacity:var(--o,1);visibility:var(--vis,visible);transform:translate(-50%,-50%) translate3d(calc(var(--x)*1vw),calc(var(--y)*1vh),calc(var(--z)*-1300px)) rotate(calc(var(--rz)*1deg));will-change:transform,opacity}
.gw[data-pin="on"] .tun-item figcaption{display:none}
.gw[data-pin="on"] .tun-bg{display:block;position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);font-size:clamp(90px,11vw,200px);line-height:.84;color:transparent;-webkit-text-stroke:1.5px rgba(204,255,0,.32);white-space:nowrap;overflow:hidden;pointer-events:none}
.tun-bg.flash{animation:tunFlash .7s var(--e)}
@keyframes tunFlash{from{opacity:0;transform:translateY(-50%) translateX(-40px)}to{opacity:1;transform:translateY(-50%)}}
.gw[data-pin="on"] .tun-floor{display:block;position:absolute;left:-40%;right:-40%;bottom:-6%;height:62%;background-image:linear-gradient(rgba(204,255,0,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(204,255,0,.10) 1px,transparent 1px);background-size:90px 90px;background-position:0 calc(var(--cz,0)*.12px);transform:rotateX(76deg);transform-origin:bottom center;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 80%);mask-image:linear-gradient(to top,#000 10%,transparent 80%);pointer-events:none}
.gw[data-pin="on"] .tun-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:absolute;left:var(--pad);bottom:72px;z-index:3;width:min(400px,32vw)}
.tun-title{font-size:clamp(40px,4.4vw,76px);line-height:.86}
.tun-kind{color:var(--lime)}
.tun-desc{font-size:15px;line-height:1.5;color:#D8D6D0;min-height:4.5em}
.gw[data-pin="on"] .tun-bar{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:2px;background:var(--lined)}
.tun-bar i{position:absolute;inset:0;background:var(--lime);transform-origin:left center;transform:scaleX(var(--tp,0))}

/* ---------- graphic: business rows ---------- */
.biz{margin-top:clamp(110px,12vw,190px)}
.sub-head{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--lined);margin-bottom:0;color:var(--muted)}
.sub-head > :nth-child(2){justify-self:center}
.sub-head > :nth-child(3){justify-self:end;text-align:right}
.bz-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);align-items:center;padding:clamp(44px,5vw,80px) 0;border-bottom:1px solid var(--lined)}
.bz-txt{grid-column:1/span 5;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bz-fig{grid-column:6/span 7;position:relative;overflow:hidden;margin:0;background:var(--ink3)}
.bz-row.tall .bz-fig{grid-column:7/span 5}
.bz-row.rev .bz-txt{grid-column:8/span 5;grid-row:1}
.bz-row.rev .bz-fig{grid-column:1/span 7;grid-row:1}
.bz-n{color:var(--lime)}
.bz-title{font-size:clamp(52px,6.4vw,112px);line-height:.84}
.bz-desc{font-size:16px;line-height:1.55;color:#D8D6D0;max-width:42ch}
.bz-fig img{width:100%;height:auto;transform:scale(1);transition:transform 1.6s var(--e)}
.bz-fig::after{content:"";position:absolute;inset:0;background:var(--lime);transform-origin:right center;transform:scaleX(0);transition:transform 1.1s var(--eio) .15s}
.gw[data-motion="on"] .bz-row:not([data-in]) .bz-fig::after{transform:scaleX(1);transform-origin:left center}
.gw[data-motion="on"] .bz-row:not([data-in]) .bz-fig img{transform:scale(1.2)}
.bz-row:hover .bz-fig img{transform:scale(1.04)}
.bz-big{position:absolute;right:0;top:clamp(30px,4vw,60px);font-size:clamp(90px,12vw,210px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(238,236,230,.1);pointer-events:none}
.bz-row.rev .bz-big{right:auto;left:auto}

/* ---------- graphic: carousel fan ---------- */
.fan{margin-top:clamp(100px,11vw,170px)}
.fan-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:end}
.fan-head > :nth-child(1){grid-column:1/span 4}
.fan-desc{grid-column:5/span 5;font-size:16px;line-height:1.5;color:#D8D6D0}
.fan-side{grid-column:10/span 3;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fan-title{font-size:clamp(52px,6vw,104px);margin-top:6px}
.fan-k{color:var(--lime)}
.fan-stage{position:relative;height:clamp(320px,31vw,470px);margin-top:clamp(36px,4vw,60px)}
.fan-card{position:absolute;left:50%;top:50%;width:clamp(200px,19vw,290px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%) translateX(calc((var(--i) - 2.5) * var(--fp,1) * 15.5vw)) translateY(calc((var(--i) - 2.5) * (var(--i) - 2.5) * var(--fp,1) * 5px)) rotate(calc((var(--i) - 2.5) * (var(--fp,1) * 3deg + (1 - var(--fp,1)) * 9deg)))}
.fan-card:nth-child(1){--i:0}.fan-card:nth-child(2){--i:1}.fan-card:nth-child(3){--i:2}.fan-card:nth-child(4){--i:3}.fan-card:nth-child(5){--i:4}.fan-card:nth-child(6){--i:5}
.fan-in{position:relative;height:100%;transition:transform .5s var(--e)}
.fan-card:hover{z-index:5}
.fan-card:hover .fan-in{transform:translateY(-18px) scale(1.04)}
.fan-in img{width:100%;height:100%;object-fit:cover;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.fan-in .mono{position:absolute;left:10px;bottom:10px;background:var(--ink);color:var(--lime);padding:3px 7px;font-size:10px}

/* ---------- web ---------- */
.mlb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);align-items:start}
.mlb-vis{grid-column:1/span 8;position:relative;padding-bottom:7%}
.browser{position:relative;border-radius:10px;overflow:hidden;background:#1B1B1E;border:1px solid #2A2A2E}
.br-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#202024}
.br-bar i{width:10px;height:10px;border-radius:50%;background:#3B3B40}
.br-bar i:first-child{background:var(--lime)}
.br-url{flex:1;margin:0 8% 0 4%;height:22px;border-radius:5px;background:#2B2B30;display:flex;align-items:center;justify-content:center;color:#A6A59F;font-size:10px}
.br-view{position:relative;aspect-ratio:16/10;background:#0B0C0E;overflow:hidden}
.br-view video{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone{position:absolute;right:-3%;bottom:0;z-index:2;width:21%;aspect-ratio:390/844;border-radius:26px;border:6px solid #111113;background:#111113;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transform:translate3d(0,var(--py,0px),0) rotate(4deg)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.mlb-info{grid-column:9/span 4;position:sticky;top:96px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.mlb-k{color:var(--muted)}
.mlb-title{font-size:clamp(34px,3.6vw,62px)}
.mlb-desc{font-size:16px;line-height:1.55;color:#D8D6D0}
.feat{width:100%;border-top:1px solid var(--lined)}
.feat li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:11px 0;border-bottom:1px solid var(--lined);font-size:15px;line-height:1.35}
.feat .mono{color:var(--lime)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--lined);border-radius:999px;padding:6px 12px;font-size:11px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(90px,10vw,170px);align-items:start}
.shot-in{transform:translate3d(0,var(--py,0px),0)}
.shot img{width:100%;border-radius:6px;border:1px solid #2A2A2E}
.shot figcaption{padding-top:12px;color:var(--muted)}
.shot:nth-child(2){margin-top:clamp(30px,5vw,90px)}
.shot:nth-child(3){margin-top:clamp(60px,10vw,180px)}
.cefop{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);align-items:center;margin-top:clamp(100px,11vw,180px)}
.cefop-info{grid-column:1/span 4;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cefop-k{color:var(--muted)}
.cefop-title{font-size:clamp(56px,7vw,120px)}
.cefop-desc{font-size:16px;line-height:1.55;color:#D8D6D0}
.cefop-vis{grid-column:6/span 7;position:relative}
.scrollshot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B0B0C}
.scrollshot img{width:100%;height:auto;transform:translate3d(0,0,0);transition:transform 7s cubic-bezier(.45,0,.4,1)}
.cefop-vis:hover .scrollshot img{transform:translate3d(0,-74%,0)}
.hint{color:var(--muted);margin-top:12px}

/* ---------- photo ---------- */
.photo{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.ph-sticky{position:relative;overflow-x:auto;overflow-y:hidden;padding:clamp(90px,10vw,150px) 0 clamp(80px,8vw,130px);scrollbar-width:thin}
.ph-bg{position:absolute;left:0;top:50%;z-index:0;font-size:clamp(150px,28vw,500px);line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(11,11,12,.11);transform:translate3d(calc(var(--bx,0)*1px),-50%,0);pointer-events:none}
.ph-track{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(16px,2vw,32px);width:max-content;padding:0 var(--pad);transform:translate3d(calc(var(--tx,0)*1px),0,0)}
.ph-intro{flex:none;width:clamp(300px,34vw,520px);display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-right:clamp(16px,3vw,56px)}
.ph-num{font-size:clamp(100px,11vw,190px);line-height:.78;color:transparent;-webkit-text-stroke:2px var(--ink)}
.ph-title{font-size:clamp(54px,6.2vw,108px);line-height:.86}
.ph-k{color:var(--mute)}
.ph-desc{font-size:16px;line-height:1.5;max-width:40ch}
.ph-gear{display:flex;align-items:center;gap:10px;color:var(--mute)}
.ph-item{flex:none;position:relative;height:clamp(280px,58vh,600px);margin:0}
.ph-item.lo{height:clamp(220px,44vh,460px);align-self:flex-end}
.ph-item.hi{height:clamp(220px,46vh,480px);align-self:flex-start}
.ph-img{height:100%;overflow:hidden;background:var(--paper2)}
.ph-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e)}
.ph-item:hover .ph-img img{transform:scale(1.05)}
.ph-item figcaption{position:absolute;left:0;top:100%;padding-top:10px;color:var(--mute);white-space:nowrap}
.ar-f1{aspect-ratio:1.88}.ar-43{aspect-ratio:4/3}.ar-p{aspect-ratio:9/16}.ar-cal{aspect-ratio:1.42}.ar-w{aspect-ratio:16/9}
.ph-end{flex:none;width:clamp(220px,20vw,320px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-left:clamp(10px,2vw,30px)}
.ph-end .cond{font-size:clamp(40px,4vw,64px)}
.ph-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;height:2px;background:var(--line);display:none}
.ph-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--pp,0))}
.gw[data-pin="on"] .photo{height:var(--ph-h,auto)}
.gw[data-pin="on"] .ph-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding:0}
.gw[data-pin="on"] .ph-bar{display:block}

/* ---------- statement + contact ---------- */
.stmt{position:sticky;top:0;z-index:1;height:clamp(560px,100svh,960px);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);overflow:hidden}
.stmt-big{font-size:clamp(84px,15vw,260px);line-height:.84}
.stmt-big .mask:nth-child(2){padding-left:17%}
.stmt-big .mask:nth-child(3){padding-left:39%}
.stmt-tag{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;color:var(--muted);white-space:nowrap}
.stmt-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(28px,3vw,48px);padding-top:18px;border-top:1px solid var(--lined)}
.stmt-row .mono{color:#D8D6D0}
.contact{position:relative;z-index:2;background:var(--lime);color:var(--ink);padding:clamp(90px,10vw,150px) var(--pad) 0;overflow:hidden}
.contact .sec-head{border-color:rgba(11,11,12,.35);color:var(--ink)}
.ct-ask{font-size:clamp(38px,6vw,104px);line-height:.9}
.ct-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-top:clamp(40px,5vw,80px)}
.ct-p{grid-column:1/span 4;font-size:18px;line-height:1.5}
.ct-mailbox{grid-column:6/span 7;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ct-mail{font-family:var(--fc);text-transform:none;font-size:clamp(34px,5vw,92px);line-height:.92;overflow-wrap:anywhere;padding-bottom:8px;background:linear-gradient(var(--ink),var(--ink)) left bottom/0% 5px no-repeat;transition:background-size .6s var(--e)}
.ct-mail:hover{background-size:100% 5px}
.ct-links{display:flex;flex-wrap:wrap;gap:10px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(60px,7vw,110px);padding:10px 0;border-top:1.5px solid var(--ink)}
.foot button{font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;min-height:44px}
.ct-name{display:flex;flex-direction:column;font-size:clamp(90px,23vw,400px);line-height:.8;margin:clamp(20px,3vw,40px) 0 -.24em;transform:translate3d(0,calc((1 - var(--g,1))*22%),0);transform-origin:left bottom}

/* ---------- menu + overlay ---------- */
.mnav{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:16px var(--pad) 28px;overflow-y:auto;animation:ovIn .7s var(--eio) both}
.mnav-top{display:flex;justify-content:space-between;align-items:center}
.mnav-links{margin-top:auto;display:flex;flex-direction:column;padding-top:40px}
.mnav-links > a{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--fc);font-size:clamp(42px,11vw,88px);text-transform:uppercase;line-height:1;padding:10px 0;border-bottom:1px solid var(--lined)}
.mnav-links > a .mono{color:var(--lime)}
.mnav-sub{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px;border-bottom:1px solid var(--lined)}
.mnav-sub a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--lined);border-radius:999px}
.mnav-site{color:var(--lime)}
.mnav-foot{margin-top:22px;color:var(--muted)}
.ov{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;animation:ovIn .9s var(--eio) both}
@keyframes ovIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.ov-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px var(--pad);border-bottom:1px solid var(--lined)}
.ov-bar .mono{color:var(--muted)}
.ov-close{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--paper);font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s,transform .5s var(--e);transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.ov-close:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.ov-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad) 60px}
.ov-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:clamp(36px,5vw,80px) 0 clamp(30px,4vw,56px)}
.ov-kind{grid-column:1/-1;color:var(--lime)}
.ov-title{grid-column:1/-1;font-size:clamp(64px,10.5vw,190px);line-height:.84;animation:ovT 1.1s var(--e) .25s both}
@keyframes ovT{from{transform:translate3d(0,40px,0);opacity:0}to{transform:none;opacity:1}}
.ov-meta{grid-column:1/span 5;align-self:start}
.ov-meta > div{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--lined);font-size:15px}
.ov-meta > div:last-child{border-bottom:1px solid var(--lined)}
.ov-meta .mono{color:var(--muted)}
.ov-tools{display:flex;flex-wrap:wrap;gap:8px 16px}
.ov-tool{display:inline-flex;align-items:center;gap:8px}
.ov-desc{grid-column:7/span 6;font-size:clamp(17px,1.5vw,22px);line-height:1.5}
.ov-video video{width:100%;max-height:82vh;background:#000}
.ov-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ov-gal.one{grid-template-columns:minmax(0,760px);justify-content:center}
.ov-gal.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ov-gal.wide{grid-template-columns:minmax(0,1100px);justify-content:center}
.ov-gal.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.ov-gal.long{grid-template-columns:minmax(0,1000px);justify-content:center}
.ov-fig img{width:100%;height:auto;background:#141416}
.ov-fig figcaption{padding-top:10px;color:var(--muted)}
.ov-nav{display:flex;justify-content:space-between;gap:24px;margin-top:60px;padding-top:22px;border-top:1px solid var(--lined)}
.ov-nav button{display:flex;flex-direction:column;gap:14px;max-width:48%;min-height:44px}
.ov-nav button:last-child{text-align:right;align-items:flex-end}
.ov-nav .cond{font-size:clamp(28px,3.4vw,56px);transition:color .3s}
.ov-nav button:hover .cond{color:var(--lime)}
.ov-nav .mono{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .hdr-sec{display:none}
  .nav a{padding:12px 9px}
}
@media (max-width:1100px){
  .ab-skills{grid-column:1/span 6}
  .ab-bio{grid-column:7/span 6}
  .ab-mosaic{grid-column:1/-1}
  .mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
  .toolbox{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch-num{grid-column:1/span 3}
  .ch-title{grid-column:4/span 9}
  .ch-side{grid-column:4/span 9}
  .mlb-vis,.mlb-info{grid-column:1/-1}
  .mlb-info{position:relative;top:auto}
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hdr{grid-template-columns:1fr auto}
}
@media (max-width:820px){
  .hdr-cta{display:none}
  .hero-in{padding-top:88px}
  .hero-top{flex-direction:column;gap:18px}
  .hero-tag{font-size:7vw}
  .hero-intro{max-width:30em}
  .hero-disc{margin-top:10px}
  .hero-name{font-size:12.4vw}
  .badge{bottom:calc(12.4vw + 120px);width:84px}
  .hide-m{display:none}
  .about-grid > *{grid-column:1/-1}
  .mosaic{grid-template-columns:1fr 1fr}
  .toolbox{grid-template-columns:1fr 1fr}
  .wk-row{grid-template-columns:40px 1fr;gap:12px}
  .wk-row .ico,.wk-pv,.wk-c,.wk-row .tools{display:none}
  .ch-head > *{grid-column:1/-1}
  .ch-num{font-size:34vw}
  .vgrid > *{grid-column:1/-1!important;grid-row:auto!important;padding-top:0!important}
  .vc-a .vc-media{aspect-ratio:4/5}
  .vf{aspect-ratio:16/10}
  .vf-media video,.vf:hover .vf-media video{transform:scale(1.36)}
  .vf-over{flex-direction:column;align-items:flex-start}
  .tun-world{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bz-row > *,.bz-row.rev > *,.bz-row.tall > *{grid-column:1/-1!important;grid-row:auto!important}
  .bz-big{display:none}
  .fan-head > *{grid-column:1/-1!important;align-items:flex-start!important}
  .fan-stage{height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin:28px calc(var(--pad)*-1) 0;padding:0 var(--pad) 12px}
  .fan-card{position:relative;left:auto;top:auto;transform:none;flex:none;width:72vw;scroll-snap-align:start}
  .cefop-info,.cefop-vis{grid-column:1/-1}
  .screens{grid-template-columns:1fr 1fr}
  .screens .shot:nth-child(3){display:none}
  .shot:nth-child(2){margin-top:40px}
  .phone{width:30%;right:0}
  .ph-sticky{scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad)}
  .ph-item{height:min(52vh,400px)}
  .ph-item.lo,.ph-item.hi{height:min(42vh,320px)}
  .ph-intro{width:min(84vw,420px)}
  .ph-item,.ph-intro{scroll-snap-align:start}
  .stmt-row{flex-direction:column;align-items:flex-start}
  .stmt-big{font-size:22vw}
  .stmt-big .mask:nth-child(2){padding-left:8%}
  .stmt-big .mask:nth-child(3){padding-left:20%}
  .stmt-tag{display:none}
  .ct-row > *{grid-column:1/-1}
  .ov-head > *{grid-column:1/-1!important}
  .ov-gal,.ov-gal.two,.ov-gal.six{grid-template-columns:1fr}
  .sec-head,.sub-head{grid-template-columns:1fr 1fr}
  .sec-head > :nth-child(2),.sub-head > :nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .gw *,.gw *::before,.gw *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .band-in,.badge svg,.grain,.cue-line{animation:none!important}
  .ld{transition:opacity .4s!important}
  .ld-bar i{transition:none!important}
}

/* ---------- version hébergée ---------- */
.mnav[hidden],.ov[hidden]{display:none!important}