/* Layout: cinema-dark streaming UI — intro sting → profile gate → two-slide billboard, rails, about band → title & project pages */
:root{
  --ink:#0b0b0c; --ink-2:#141416; --ink-3:#1f1f23; --line:#2c2c31;
  --fg:#f4f2ef; --fg-2:#bdb9b4; --fg-3:#85817c;
  --red:#e3172b; --match:#46d369; --gold:#f2c12e;
  --display:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(16px,4vw,60px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--ink);color:var(--fg)}
body{font-family:var(--body);font-size:16px;line-height:1.5;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
img{display:block}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.view{display:none}.view.on{display:block}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}

/* INTRO */
#intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;overflow:hidden}
#intro .mark{font-family:var(--display);color:var(--red);font-size:clamp(64px,17vw,220px);letter-spacing:.02em;line-height:.8;text-shadow:0 10px 40px rgba(227,23,43,.45);transform-origin:31% 52%;opacity:0;animation:mark 3.1s cubic-bezier(.6,0,.4,1) forwards}
#intro .mark span{display:inline-block;transform:scaleY(1.14)}
#intro .streaks{position:absolute;inset:-10% 0;opacity:0;background:repeating-linear-gradient(90deg,#e3172b 0 6px,#000 6px 10px,#ff5a3c 10px 13px,#000 13px 19px,#b30f20 19px 27px,#000 27px 30px,#ffb199 30px 31px,#000 31px 40px);transform:scaleX(.02);animation:streak 3.1s ease-in forwards}
#intro .skip{position:absolute;right:calc(max(16px,env(safe-area-inset-right,0px)) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);font-size:13px;color:var(--fg-3);border:1px solid var(--line);padding:6px 14px;border-radius:2px}
@keyframes mark{0%{opacity:0;transform:scale(.86);filter:blur(6px)}14%{opacity:1;filter:blur(0)}55%{transform:scale(1.04);opacity:1}100%{transform:scale(22);opacity:0}}
@keyframes streak{0%,52%{opacity:0;transform:scaleX(.02)}68%{opacity:.95;transform:scaleX(.5)}100%{opacity:0;transform:scaleX(3)}}
#intro.gone{transition:opacity .5s;opacity:0;pointer-events:none}
.wordmark{font-family:var(--display);color:var(--red);letter-spacing:.03em;line-height:1;text-decoration:none;display:inline-block}
.wordmark span{display:inline-block;transform:scaleY(1.14)}

/* PICKER */
#who{min-height:100vh;min-height:100dvh;display:none;flex-direction:column}
#who.on{display:flex}
#who header{padding-block:22px}
#who header .wordmark{font-size:40px}
.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:20px 64px;animation:fadeup .6s ease both}
.gate h1{font-weight:500;font-size:clamp(28px,4.4vw,52px);margin:0 0 6px;text-align:center}
.gate p{color:var(--fg-3);margin:0 0 34px;text-align:center}
.profiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,26px);max-width:1080px;width:100%}
.profiles button{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.profiles .ava{width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;outline:3px solid transparent;transition:outline-color .15s,transform .2s;background:var(--ink-3)}
.profiles img{width:100%;height:100%;object-fit:cover}
.profiles .nm{color:var(--fg-3);font-size:clamp(13px,1.3vw,17px);transition:color .15s}
.profiles .pt{color:var(--fg-3);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-top:-6px;text-align:center}
.profiles button:hover .ava,.profiles button:focus-visible .ava{outline-color:var(--fg);transform:translateY(-3px)}
.profiles button:hover .nm,.profiles button:focus-visible .nm{color:var(--fg)}
.profiles button:focus-visible{outline:none}
@media (max-width:900px){.profiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.profiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* NAV */
.nav{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);padding-block:14px;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);transition:background .3s}
.nav.solid{background:var(--ink)}
.nav .wordmark{font-size:clamp(28px,3vw,36px)}
.nav ul{list-style:none;display:flex;gap:clamp(12px,1.6vw,22px);margin:0;padding:0;font-size:14px}
.nav ul a{text-decoration:none;color:#e5e5e5}
.nav ul a:hover{color:var(--fg-2)}
.nav ul a.cur{font-weight:700;color:var(--fg)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav .cta{background:var(--red);color:#fff;font-weight:700;font-size:13px;padding:7px 14px;border-radius:3px;text-decoration:none;white-space:nowrap}
.me{position:relative}
.me>button{display:flex;align-items:center;gap:6px}
.me>button img{width:34px;height:34px;border-radius:4px;object-fit:cover}
.me>button::after{content:"";border:5px solid transparent;border-top-color:var(--fg);margin-top:5px;transition:transform .2s}
.me.open>button::after{transform:rotate(180deg) translateY(5px)}
.menu{position:absolute;right:0;top:calc(100% + 12px);background:rgba(0,0,0,.94);border:1px solid var(--line);min-width:230px;padding:10px 0;display:none;max-height:70vh;overflow:auto}
.me.open .menu{display:block}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 16px;font-size:13px;text-align:left}
.menu button:hover{text-decoration:underline}
.menu img{width:28px;height:28px;border-radius:3px;object-fit:cover}
.menu hr{border:0;border-top:1px solid var(--line);margin:8px 0}
@media (max-width:820px){.nav ul{display:none}.nav .cta{display:none}}

/* HERO CAROUSEL */
.hero{position:relative}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:min(90vh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.slide .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 25%}
.slide.team .bg{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.09) translateX(-1.5%)}}
.slide.team::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(77deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 36%,rgba(0,0,0,.05) 70%),linear-gradient(0deg,var(--ink) 0%,rgba(11,11,12,0) 36%)}
.slide.solo .bg{background:radial-gradient(90% 120% at 78% 30%,var(--pc) 0%,color-mix(in srgb,var(--pc) 35%,#000) 45%,#070708 85%)}
.slide.solo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.25) 45%,transparent 70%),linear-gradient(0deg,var(--ink) 0%,rgba(11,11,12,0) 30%)}
.slide.solo .cutout{position:absolute;right:clamp(-40px,4vw,80px);bottom:0;height:96%;width:auto;z-index:-1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.slide.solo .ghost{position:absolute;right:2%;top:8%;z-index:-1;font-family:var(--display);font-size:clamp(120px,22vw,340px);line-height:.8;color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none}
.slide .inner{padding-block:120px clamp(90px,11vw,160px);max-width:760px;position:relative}
.orig{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.32em;font-weight:700;color:var(--fg-2);text-transform:uppercase}
.orig b{font-family:var(--display);color:var(--red);font-size:30px;letter-spacing:0;line-height:1;transform:scaleY(1.14)}
.slide h1,.slide h2{font-family:var(--display);font-weight:400;font-size:clamp(64px,10vw,150px);line-height:.86;margin:10px 0 10px;letter-spacing:.01em;text-wrap:balance}
.alias{font-family:var(--display);font-size:clamp(24px,2.6vw,36px);color:var(--gold);letter-spacing:.04em;line-height:1;margin-bottom:12px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px;color:var(--fg-2)}
.meta .m{color:var(--match);font-weight:700}
.meta .box{border:1px solid rgba(255,255,255,.4);padding:0 6px;font-size:12px;border-radius:2px;line-height:20px}
.syn{font-size:clamp(16px,1.45vw,19px);line-height:1.5;margin:14px 0 22px;max-width:58ch;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(15px,1.3vw,18px);padding:10px 24px 10px 18px;border-radius:4px;text-decoration:none;transition:opacity .15s}
.btn svg{width:24px;height:24px;flex:none}
.btn.play{background:#fff;color:#000}
.btn.more{background:rgba(109,109,110,.7);color:#fff}
.btn:hover{opacity:.82}
.hero-ctl{position:absolute;right:max(var(--pad),env(safe-area-inset-right,0px));bottom:clamp(110px,12vw,170px);display:flex;align-items:center;gap:10px;z-index:3}
.dots{display:flex;gap:6px}
.dots button{width:26px;height:4px;background:rgba(255,255,255,.35);border-radius:2px}
.dots button.on{background:#fff}
.hero-ctl .ar{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:20px;background:rgba(0,0,0,.35)}
@media (max-width:700px){
  .slide{min-height:640px}
  .slide.solo .cutout{height:360px;top:70px;bottom:auto;right:50%;transform:translateX(50%)}
  .slide.solo::before{background:linear-gradient(0deg,var(--ink) 0%,rgba(11,11,12,.85) 42%,rgba(11,11,12,0) 62%)}
  .slide .inner{padding-top:300px}
  .slide.solo .inner{padding-top:400px}
  .hero-ctl{bottom:auto;top:84px}
}

/* RAILS */
.rails{position:relative;z-index:3;margin-top:clamp(-110px,-7vw,-50px);padding-bottom:20px}
.rail{margin-bottom:clamp(26px,3.2vw,44px)}
.rail h2{font-size:clamp(17px,1.6vw,22px);font-weight:700;margin:0 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rail h2 small{font-size:13px;font-weight:500;color:var(--fg-3)}
.track-wrap{position:relative}
.track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:14px;margin-block:-14px;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));scroll-padding-left:var(--pad)}
.track::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:0;bottom:0;width:calc(var(--pad) - 6px);min-width:34px;z-index:4;background:rgba(11,11,12,.6);font-size:34px;opacity:0;transition:opacity .2s;display:grid;place-items:center}
.arrow.l{left:0}.arrow.r{right:0}
.track-wrap:hover .arrow{opacity:1}
@media (hover:none){.arrow{display:none}}
.card{flex:none;scroll-snap-align:start;position:relative;border-radius:4px;overflow:hidden;background:var(--ink-3);transition:transform .25s ease,box-shadow .25s;text-align:left;display:block;text-decoration:none}
.card:hover,.card:focus-visible{transform:scale(1.06);z-index:3;box-shadow:0 12px 30px rgba(0,0,0,.7)}
.card>img{width:100%;height:100%;object-fit:cover}
.w169{width:clamp(230px,22vw,320px);aspect-ratio:16/9}
.poster{width:clamp(150px,13.5vw,200px);aspect-ratio:2/3}
.cast .txt{position:absolute;left:12px;bottom:10px;right:42%;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.cast .part{display:block;font-family:var(--display);font-size:clamp(24px,2.2vw,32px);line-height:.9;letter-spacing:.02em}
.cast .al{display:block;font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.cast .who{display:block;font-size:12px;color:#eee;margin-top:2px;line-height:1.3}
.cast .s{position:absolute;left:10px;top:8px;font-family:var(--display);color:var(--red);font-size:20px;line-height:1;transform:scaleY(1.14)}
.cast::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),transparent 55%);pointer-events:none}
.cast .txt,.cast .s{z-index:1}
.cw .bar{position:absolute;left:10px;right:10px;bottom:6px;height:3px;background:rgba(255,255,255,.3)}
.cw .bar i{display:block;height:100%;background:var(--red)}
.badge{position:absolute;top:8px;right:0;background:var(--red);font-size:10px;font-weight:800;padding:2px 7px;letter-spacing:.06em;text-transform:uppercase}
.t10{width:clamp(220px,20vw,290px);aspect-ratio:1.45;display:flex;align-items:stretch;background:none;overflow:visible}
.t10 .n{font-family:var(--display);font-size:clamp(150px,13vw,200px);line-height:.78;color:var(--ink);-webkit-text-stroke:3px #595959;letter-spacing:-.06em;align-self:flex-end;margin-right:-14px}
.t10 .pc{position:relative;flex:1;border-radius:4px;overflow:hidden;z-index:1}
.t10 img{width:100%;height:100%;object-fit:cover}
.t10 .lab{position:absolute;left:0;right:0;bottom:0;padding:24px 8px 8px;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);font-family:var(--display);font-size:22px;line-height:1}

/* ABOUT BAND */
.band{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:min(88vh,780px);margin:clamp(10px,2vw,30px) 0 clamp(36px,4vw,56px);overflow:hidden;isolation:isolate;background:radial-gradient(80% 110% at 85% 40%,var(--pc) 0%,color-mix(in srgb,var(--pc) 30%,#000) 48%,var(--ink) 88%)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,transparent 14%,transparent 86%,var(--ink) 100%)}
.band .l{display:flex;flex-direction:column;justify-content:center;padding-block:60px;min-width:0}
.band .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-2);font-weight:700}
.band h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,7.5vw,118px);line-height:.86;margin:10px 0 8px}
.band p{font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;max-width:56ch;color:#ece9e4;margin:12px 0}
.band .chips{margin:10px 0 24px}
.band .r{position:relative;min-height:420px}
.band .r img{position:absolute;bottom:0;right:50%;transform:translateX(50%);height:100%;width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.band .r .ghost{position:absolute;left:0;right:0;top:6%;text-align:center;font-family:var(--display);font-size:clamp(110px,16vw,260px);line-height:.8;color:rgba(255,255,255,.08);white-space:nowrap;overflow:hidden}
@media (max-width:820px){.band{grid-template-columns:1fr;min-height:0}.band .r{min-height:420px;order:-1}.band .l{padding-block:10px 50px}}

.stage{position:relative;margin:0 0 50px}
.stage img{width:100%;height:auto;max-height:640px;object-fit:cover;object-position:center 30%}
.stage .cap{position:absolute;left:0;right:0;bottom:0;padding-block:80px 26px;background:linear-gradient(0deg,rgba(11,11,12,.95),transparent)}
.stage .cap h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,72px);margin:0;line-height:.9}
.stage .cap p{margin:6px 0 0;color:var(--fg-2)}

/* MODALS */
.modal{position:fixed;inset:0;z-index:70;overflow-y:auto;background:rgba(0,0,0,.74);display:none;-webkit-overflow-scrolling:touch}
.modal.on{display:block}
.sheet{max-width:1100px;margin:clamp(0px,3vw,36px) auto 60px;background:var(--ink-2);border-radius:clamp(0px,1vw,8px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.8);animation:pop .35s ease both}
#proj .sheet{max-width:880px}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(20px)}to{opacity:1;transform:none}}
.close{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);float:right;margin:12px 14px -50px 0;z-index:5;width:38px;height:38px;border-radius:50%;background:var(--ink-2);display:grid;place-items:center;font-size:20px;line-height:1}
.th{position:relative;min-height:clamp(440px,52vw,580px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:radial-gradient(80% 120% at 80% 30%,var(--pc) 0%,color-mix(in srgb,var(--pc) 30%,#000) 50%,var(--ink-2) 90%)}
.th .ph{position:absolute;right:2%;bottom:0;height:100%;width:auto;z-index:-2;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.th .ghost{position:absolute;right:0;top:4%;z-index:-3;font-family:var(--display);font-size:clamp(110px,18vw,240px);line-height:.8;color:rgba(255,255,255,.07);white-space:nowrap}
.th::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink-2) 18%,rgba(20,20,22,.55) 50%,rgba(20,20,22,0) 72%),linear-gradient(0deg,var(--ink-2) 0%,transparent 34%)}
.th .in{padding-block:70px 28px;max-width:620px}
.th h1{font-family:var(--display);font-weight:400;font-size:clamp(66px,9vw,128px);line-height:.85;margin:6px 0 6px}
.th .bodypart{font-family:var(--display);font-size:clamp(26px,2.8vw,38px);color:var(--red);letter-spacing:.05em;line-height:1}
.th .tag{font-size:clamp(16px,1.5vw,19px);font-weight:600;margin:12px 0 0;max-width:46ch}
@media (max-width:700px){.th{flex-direction:column;align-items:stretch;min-height:0}.th .ph{position:relative;right:auto;margin:30px auto 0;height:380px}.th::before{background:linear-gradient(0deg,var(--ink-2) 20%,rgba(20,20,22,0) 50%)}.th .in{padding-block:0 18px;margin-top:-80px}}
.tb{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;padding-block:6px 30px}
.tb .syn{margin:0 0 18px;font-size:16.5px;text-shadow:none;max-width:62ch}
.facts{font-size:14px;color:var(--fg-3);display:grid;gap:12px;align-content:start}
.facts b{color:var(--fg-2);font-weight:500}
.facts span{color:var(--fg)}
@media (max-width:760px){.tb{grid-template-columns:1fr;gap:18px}}
.sec{padding-block:26px;border-top:1px solid var(--line)}
.sec h3{font-size:clamp(20px,2vw,26px);font-weight:700;margin:0 0 4px}
.sec .sub{color:var(--fg-3);font-size:14px;margin:0 0 18px}
.eps{list-style:none;margin:0;padding:0}
.eps li{border-bottom:1px solid var(--line)}
.eps button{display:grid;grid-template-columns:36px 170px minmax(0,1fr);gap:18px;align-items:center;padding:16px 14px;border-radius:4px;width:100%;text-align:left}
.eps button:hover{background:var(--ink-3)}
.eps .no{font-size:24px;color:var(--fg-2);text-align:center;font-variant-numeric:tabular-nums}
.eps img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.eps h4{margin:0 0 4px;font-size:16px;display:flex;justify-content:space-between;gap:10px}
.eps h4 em{font-style:normal;font-weight:600;font-size:11px;color:var(--fg-3);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}
.eps p{margin:0;color:var(--fg-2);font-size:14px;line-height:1.45}
@media (max-width:620px){.eps button{grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 4px}.eps .no{display:none}}
.prev{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.prev div{background:var(--ink-3);border-radius:4px;padding:14px 16px;min-width:0}
.prev .w{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.prev .o{font-weight:700;font-size:15px;margin:4px 0 2px}
.prev .r{font-size:13px;color:var(--fg-2)}
.prev .x{font-size:13px;color:var(--fg-3);margin-top:8px;line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{border:1px solid var(--line);background:rgba(255,255,255,.06);padding:7px 14px;border-radius:999px;font-size:14px}
.tops{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.tops::-webkit-scrollbar{display:none}
.top{flex:none;display:flex;align-items:flex-end;width:210px;height:124px}
.top .n{font-family:var(--display);font-size:150px;line-height:.75;color:var(--ink-2);-webkit-text-stroke:2px #5d5d5d;letter-spacing:-.05em;margin-right:-18px}
.top .k{flex:1;height:100%;border-radius:4px;display:flex;align-items:flex-end;padding:10px;font-weight:700;font-size:14px;line-height:1.2;position:relative;z-index:1;overflow:hidden;background:radial-gradient(120% 100% at 80% 0%,var(--pc),#0b0b0c 80%)}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.tool{background:var(--ink-3);border-radius:6px;padding:14px 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tool .lg{height:34px;display:flex;align-items:center}
.tool .lg img{max-height:34px;max-width:100%;width:auto}
.tool span{font-size:13px;line-height:1.25}
.tool small{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-top:-6px;font-weight:700}
.tool.common{outline:1px solid rgba(242,193,46,.45)}
.mlt{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ml{background:var(--ink-3);border-radius:5px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s}
.ml:hover{transform:translateY(-3px)}
.ml img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ml .d{padding:10px 12px 14px;font-size:13px;color:var(--fg-2);line-height:1.4}
.ml .d b{display:block;color:var(--fg);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.mltitle{font-size:14px;color:var(--fg-2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:18px 0 10px}
.bio{font-size:clamp(16px,1.4vw,18.5px);line-height:1.65;color:#e8e5e0;max-width:70ch;margin:0 0 14px;font-weight:500}
.about{font-size:14px;color:var(--fg-3);display:grid;gap:8px}
.about b{color:var(--fg-2);font-weight:500}
.about span{color:var(--fg)}
.inline-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.inline-track::-webkit-scrollbar{display:none}
/* project sheet */
.ph-hero{position:relative}
.ph-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ph-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink-2) 2%,transparent 45%)}
.pbody{padding-block:4px 30px}
.pbody h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,80px);line-height:.9;margin:0 0 8px}
.starring{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}
.starring button{display:flex;align-items:center;gap:8px;background:var(--ink-3);border-radius:999px;padding:4px 14px 4px 4px;font-size:13px}
.starring img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.starring button:hover{background:#2a2a30}
footer{color:var(--fg-3);font-size:13px;padding-block:30px 50px;border-top:1px solid var(--line)}
footer .row{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:14px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.slides{scroll-behavior:auto}}