/* ============ PROJECT GRID ============ */
.work__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(60px,7vw,110px) clamp(18px,2.4vw,40px);max-width:var(--max);align-items:start}
.proj{grid-column:span 12;position:relative}
.proj.p--7{grid-column:span 7}.proj.p--5{grid-column:span 5}.proj.p--8{grid-column:span 8}.proj.p--4{grid-column:span 4}.proj.p--6{grid-column:span 6}
.proj.p--drop{margin-top:clamp(60px,10vw,180px)}
.proj.p--inset{grid-column:2/span 10}
.proj.is-out{opacity:0;transform:translateY(40px) scale(.98);pointer-events:none}
.proj__a{display:block;position:relative}
.proj__media{position:relative;overflow:hidden;background:var(--coal-2);aspect-ratio:4/3;isolation:isolate}
.p--full .proj__media{aspect-ratio:auto;height:min(82vh,860px);min-height:460px}
.p--wide .proj__media{aspect-ratio:2.39/1}
.p--tall .proj__media{aspect-ratio:4/5}
.p--7 .proj__media,.p--8 .proj__media{aspect-ratio:16/11}
.proj__media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.proj__cap{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding-top:22px;align-items:baseline}
.proj__ex{color:var(--fox);font-size:10.5px;white-space:nowrap}
.proj__client{color:var(--soft);font-size:10.5px;display:flex;flex-wrap:wrap;gap:6px 14px}
.proj__client i{font-style:normal;color:var(--mute)}
.proj__client .demo{color:var(--ink);background:var(--amber);padding:1px 6px;letter-spacing:.14em}
.proj__hook{grid-column:1/-1;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,2.9vw,50px);line-height:.92;margin-top:10px;text-wrap:balance;transition:color .4s}
.p--full .proj__hook{font-size:clamp(44px,5.4vw,94px)}
.proj__sum{grid-column:1/-1;color:var(--soft);max-width:36em;margin-top:8px;font-size:16px}
.proj__a:hover .proj__hook{color:var(--fox)}
/* full-bleed feature: caption overlaps the media, bleeding out of it */
.p--full .proj__cap{position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(20px,4vw,56px);max-width:min(760px,70%);padding:0;z-index:3}
.p--full .proj__media::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(11,10,10,.9) 0%,rgba(11,10,10,.55) 45%,rgba(11,10,10,0) 75%),linear-gradient(0deg,rgba(11,10,10,.7),transparent 45%);pointer-events:none}

/* ---------- WEB media: browser + phone ---------- */
.mk-web{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sc,#1c1a19)}
.mk-web .bw{position:absolute;width:74%;left:13%;top:12%;transition:transform 1s var(--ease)}
.p--full .mk-web .bw{width:56%;left:auto;right:6%;top:9%}
.mk-web .ph{position:absolute;width:17%;right:6%;bottom:-8%;transition:transform 1s var(--ease);z-index:2}
.p--full .mk-web .ph{width:12%;right:3%;bottom:-6%}
/* tall tiles: portrait composition, browser up top, big phone overlapping low right */
.p--tall .mk-web{background:radial-gradient(120% 70% at 30% 100%,color-mix(in srgb,var(--fox) 22%,transparent),transparent 60%),var(--sc,#1c1a19)}
.p--tall .mk-web .bw{width:88%;left:6%;top:7%}
.p--tall .mk-web .bw__scr{aspect-ratio:16/13}
.p--tall .mk-web .ph{width:34%;right:6%;bottom:6%}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-web .bw{transform:translateY(-10px)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-web .ph{transform:translateY(-26px) rotate(-2deg)}
.bw{background:#202022;border-radius:10px;overflow:hidden;box-shadow:0 40px 90px -25px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.bw__bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#2a2a2d}
.bw__bar i{width:9px;height:9px;border-radius:50%;background:#4a4a4f}
.bw__bar i:nth-child(1){background:#ff5f57}.bw__bar i:nth-child(2){background:#febc2e}.bw__bar i:nth-child(3){background:#28c840}
.bw__url{margin-left:14px;flex:1;max-width:58%;height:18px;border-radius:5px;background:#1b1b1d;font:500 10px/18px var(--mono);color:#8b8b90;padding:0 10px;overflow:hidden;white-space:nowrap}
.bw__scr{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
/* the fit (scale) applies instantly; only the scroll (translate) animates. Animating both made a screenshot lag behind its frame whenever the frame changed size (the Prove it stage widens for Film), so it ballooned or shrank and left white space. */
.bw__page,.ph__page{position:absolute;left:0;top:0;transform-origin:0 0;scale:var(--s,.4);transform:translateY(var(--ty,0px));transition:transform 1.6s cubic-bezier(.6,0,.2,1)}
.bw__page{width:1280px}
.ph{background:#0c0c0d;border-radius:clamp(14px,1.8vw,26px);padding:clamp(3px,.45vw,6px);box-shadow:0 30px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.ph__scr{position:relative;aspect-ratio:9/19;overflow:hidden;border-radius:clamp(11px,1.4vw,21px);background:#fff}
.ph__page{width:390px}
.is-scrolling .bw__page,.is-scrolling .ph__page{--ty:var(--travel);transition:transform 8s cubic-bezier(.45,.05,.2,1)}

/* ---------- mini sites (demo) ---------- */
.ms{font-family:Archivo,system-ui,sans-serif;font-stretch:100%;color:#111;background:#fff;line-height:1.4}
.ms *{box-sizing:border-box}
.ms-nav{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 56px;font-size:15px}
.ms-nav .lg{font-weight:800;letter-spacing:.06em;font-size:20px}
.ms-nav .lk{display:flex;gap:30px;opacity:.75}
.ms-nav .ms-cta{padding:10px 18px;border-radius:6px;font-weight:700;font-size:14px}
.ms-hero{position:relative;padding:90px 56px;min-height:560px;overflow:hidden}
.ms-hero h1{font-size:84px;line-height:.95;margin:14px 0 22px;max-width:760px;letter-spacing:-.02em}
.ms-hero p{font-size:21px;max-width:520px;opacity:.8}
.ms-btns{display:flex;gap:14px;margin-top:34px}
.ms-btns span{padding:16px 26px;border-radius:8px;font-weight:700;font-size:16px}
.ms-sec{padding:70px 56px}
.ms-sec h2{font-size:44px;margin-bottom:30px;letter-spacing:-.01em}
.ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ms-grid.g3{grid-template-columns:repeat(3,1fr)}
.ms-tile{border-radius:12px;padding:26px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;font-weight:700;font-size:19px}
.ms-tile small{display:block;font-weight:400;font-size:14px;opacity:.7;margin-top:6px}
.ms-row{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid rgba(0,0,0,.1);font-size:18px}
.ms-foot{padding:60px 56px;font-size:14px;opacity:.9}
.ms-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.ms-foot i{display:block;height:8px;border-radius:4px;background:currentColor;opacity:.2;margin:10px 0;width:70%}
/* civic */
.ms--civic{background:#F5F2EA;color:#1C2B24;font-family:Georgia,'Times New Roman',serif}
.ms--civic .ms-nav{background:#1F4D3A;color:#F5F2EA;font-family:Archivo,sans-serif}
.ms--civic .ms-nav .ms-cta{background:#D9A441;color:#1C2B24}
.ms--civic .ms-hero{background:linear-gradient(180deg,#F7C98B 0%,#F0A868 28%,#C8744A 46%,#6F7A4A 47%,#4E6A3E 70%,#3A5230 100%);color:#fff;min-height:620px}
.ms--civic .ms-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:repeating-linear-gradient(170deg,rgba(0,0,0,.07) 0 14px,transparent 14px 40px)}
.ms--civic .ms-hero h1{text-shadow:0 2px 20px rgba(0,0,0,.25)}
.ms--civic .ms-btns span:first-child{background:#fff;color:#1F4D3A}.ms--civic .ms-btns span:last-child{border:2px solid #fff}
.ms--civic .ms-tile{background:#fff;box-shadow:0 2px 0 #1F4D3A;font-family:Archivo,sans-serif}
.ms--civic .ms-tile:nth-child(2n){background:#1F4D3A;color:#F5F2EA}
.ms--civic .ms-foot{background:#1F4D3A;color:#F5F2EA}
/* shop */
.ms--shop{background:#fff;color:#0f0f10}
.ms--shop .ms-nav{border-bottom:1px solid #eee}.ms--shop .ms-nav .ms-cta{background:#0f0f10;color:#fff}
.ms--shop .ms-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:#F2EEE8}
.ms--shop .ms-hero .art{height:440px;border-radius:18px;background:radial-gradient(circle at 40% 40%,#FF8A5B,#E4502C 60%,#8E2A14);position:relative}
.ms--shop .ms-hero .art::after{content:"";position:absolute;left:24%;top:18%;width:52%;height:64%;border-radius:40% 40% 12px 12px;background:#F2EEE8;opacity:.9}
.ms--shop .ms-btns span:first-child{background:#0f0f10;color:#fff}
.ms--shop .ms-tile{height:260px;border-radius:14px;color:#fff}
.ms--shop .ms-tile:nth-child(1){background:#E4502C}.ms--shop .ms-tile:nth-child(2){background:#2E3A59}.ms--shop .ms-tile:nth-child(3){background:#C9B28F;color:#111}.ms--shop .ms-tile:nth-child(4){background:#111}
.ms--shop .ms-foot{background:#0f0f10;color:#fff}
/* band */
.ms--band{background:#0b0a09;color:#EDE3CF;font-family:'Antonio',Impact,sans-serif}
.ms--band .ms-nav{font-family:Archivo,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.ms--band .ms-nav .lg{font-family:Antonio,sans-serif;font-size:24px}
.ms--band .ms-nav .ms-cta{border:1px solid #C9A45C;color:#C9A45C}
.ms--band .ms-hero{text-align:center;min-height:680px;background:radial-gradient(ellipse at 50% 60%,rgba(201,164,92,.35),transparent 55%),#0b0a09}
.ms--band .ms-hero h1{font-size:150px;letter-spacing:.02em;text-transform:uppercase;margin:40px auto 0;max-width:none}
.ms--band .ms-hero .orb{width:260px;height:260px;margin:0 auto;border-radius:50%;border:1px solid rgba(201,164,92,.6);position:relative}
.ms--band .ms-hero .orb::before{content:"";position:absolute;left:50%;top:14%;width:60px;height:72%;transform:translateX(-50%);background:linear-gradient(#C9A45C,#C9A45C) top/100% 2px no-repeat,linear-gradient(#C9A45C,#C9A45C) bottom/100% 2px no-repeat;clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%,45% 50%);background-color:rgba(201,164,92,.35)}
.ms--band .ms-hero p{margin:20px auto 0;font-family:Archivo,sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:14px;opacity:.7}
.ms--band .ms-row{border-color:rgba(237,227,207,.12);font-family:Archivo,sans-serif}
.ms--band .ms-row b{font-family:Antonio,sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:.03em}
.ms--band .ms-row span{color:#C9A45C;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.ms--band .ms-foot{border-top:1px solid rgba(237,227,207,.12)}
/* home services */
.ms--home{background:#fff;color:#10223D}
.ms--home .ms-nav{background:#10223D;color:#fff}.ms--home .ms-nav .ms-cta{background:#FFC531;color:#10223D}
.ms--home .ms-hero{background:linear-gradient(115deg,#10223D 55%,#1A3A66);color:#fff}
.ms--home .ms-hero .call{display:inline-flex;align-items:center;gap:14px;margin-top:34px;background:#FFC531;color:#10223D;font-weight:800;font-size:26px;padding:20px 30px;border-radius:12px}
.ms--home .ms-hero .call i{width:22px;height:22px;border-radius:50%;background:#10223D}
.ms--home .ms-hero .badge{position:absolute;right:70px;top:90px;width:280px;height:280px;border-radius:50%;border:2px dashed rgba(255,197,49,.6);display:grid;place-items:center;text-align:center;font-weight:800;font-size:34px;line-height:1}
.ms--home .ms-tile{background:#F1F4F9;border-top:5px solid #FFC531}
.ms--home .ms-foot{background:#10223D;color:#fff}
/* mobile variants */
.ms--m .ms-nav{height:64px;padding:0 20px}.ms--m .ms-nav .lk{display:none}
.ms--m .ms-hero{padding:48px 20px;min-height:520px}
.ms--m .ms-hero h1{font-size:46px}
.ms--m.ms--band .ms-hero h1{font-size:70px}
.ms--m .ms-hero p{font-size:17px}
.ms--m .ms-sec{padding:40px 20px}.ms--m .ms-sec h2{font-size:30px}
.ms--m .ms-grid{grid-template-columns:1fr 1fr;gap:10px}
.ms--m .ms-tile{min-height:110px;padding:14px;font-size:15px}
.ms--m.ms--shop .ms-hero{grid-template-columns:1fr}.ms--m.ms--shop .ms-hero .art{height:240px}
.ms--m.ms--home .ms-hero .badge{display:none}
.ms--m .ms-foot{padding:36px 20px}.ms--m .ms-foot .cols{grid-template-columns:1fr 1fr}

/* ---------- FILM media ---------- */
.mk-film{position:absolute;inset:0;background:#000}
.mk-film canvas{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.4s var(--ease),filter .8s}
.mk-film .fhud{position:absolute;inset:14px 16px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(246,242,236,.8);z-index:2;pointer-events:none}
.mk-film .fhud div{display:flex;justify-content:space-between}
.mk-film .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(246,242,236,.6);display:grid;place-items:center;z-index:2;transition:transform .6s var(--ease),background .4s,border-color .4s}
.mk-film .play::after{content:"";margin-left:5px;border-left:16px solid var(--white);border-top:10px solid transparent;border-bottom:10px solid transparent}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-film .play{transform:scale(1.12);background:var(--fox);border-color:var(--fox)}
.mk-film.is-idle canvas{filter:saturate(.75) brightness(.82)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-film canvas{transform:scale(1.04)}

/* ---------- BRAND media ---------- */
.mk-brand{position:absolute;inset:0;background:#E9E4DA;overflow:hidden}
.mk-brand .pc{position:absolute;transition:transform 1s var(--ease)}
.mk-brand .pc--logo{left:8%;top:10%;width:44%;height:52%;background:#16213A;display:grid;place-items:center}
.mk-brand .mono-mark{width:44%;aspect-ratio:1;border-radius:50%;border:clamp(6px,1vw,12px) solid #E9E4DA;position:relative}
.mk-brand .mono-mark::after{content:"";position:absolute;inset:26% 18% 26% 44%;background:#E86A3B}
.mk-brand .pc--sw{left:56%;top:10%;width:36%;height:22%;display:grid;grid-template-columns:repeat(4,1fr)}
.mk-brand .pc--sw i:nth-child(1){background:#16213A}.mk-brand .pc--sw i:nth-child(2){background:#E86A3B}.mk-brand .pc--sw i:nth-child(3){background:#F2C94C}.mk-brand .pc--sw i:nth-child(4){background:#FFFDF8}
.mk-brand .pc--type{left:56%;top:36%;width:36%;height:26%;background:#FFFDF8;padding:6%;display:flex;flex-direction:column;justify-content:space-between;color:#16213A}
.mk-brand .pc--type b{font-family:Georgia,serif;font-size:clamp(28px,3.4vw,56px);line-height:.9;font-weight:400}
.mk-brand .pc--type span{font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.mk-brand .pc--card{left:18%;top:62%;width:34%;height:24%;background:#E86A3B;transform:rotate(-6deg);box-shadow:0 20px 40px -12px rgba(0,0,0,.35);padding:4%;color:#16213A;font-family:var(--mono);font-size:9px;display:flex;flex-direction:column;justify-content:flex-end}
.mk-brand .pc--bag{left:58%;top:66%;width:28%;height:30%;background:#16213A;transform:rotate(3deg);box-shadow:0 20px 40px -12px rgba(0,0,0,.35);display:grid;place-items:center}
.mk-brand .pc--bag .mono-mark{width:36%;border-width:6px}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-brand .pc--card{transform:rotate(-12deg) translate(-8%,-14%)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-brand .pc--bag{transform:rotate(8deg) translate(6%,-10%)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-brand .pc--logo{transform:scale(1.03)}

/* ---------- DESIGN media ---------- */
.mk-design{position:absolute;inset:0;background:#1a1716;overflow:hidden}
.mk-design .pst{position:absolute;top:12%;width:26%;aspect-ratio:3/4;left:37%;transition:transform 1s var(--ease);box-shadow:0 30px 60px -18px rgba(0,0,0,.75)}
.mk-design .pst:nth-child(1){transform:translateX(-66%) rotate(-9deg)}
.mk-design .pst:nth-child(2){transform:translateX(-22%) rotate(-3deg)}
.mk-design .pst:nth-child(3){transform:translateX(22%) rotate(3deg)}
.mk-design .pst:nth-child(4){transform:translateX(66%) rotate(9deg)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-design .pst:nth-child(1){transform:translateX(-130%) rotate(-6deg)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-design .pst:nth-child(2){transform:translateX(-44%) rotate(-1deg) translateY(-3%)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-design .pst:nth-child(3){transform:translateX(44%) rotate(1deg) translateY(-3%)}
:is(.proj__a:hover,.proj.is-live .proj__a) .mk-design .pst:nth-child(4){transform:translateX(130%) rotate(6deg)}
/* posters */
.pst{overflow:hidden;font-family:var(--display);text-transform:uppercase;container-type:inline-size}
.pst--a{background:var(--fox);color:var(--ink);padding:8cqw}
.pst--a b{display:block;font-size:34cqw;line-height:.8;font-weight:700}
.pst--a i{position:absolute;right:-18cqw;bottom:-14cqw;width:70cqw;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.pst--a small{position:absolute;left:8cqw;bottom:7cqw;font-family:var(--mono);font-size:4cqw;letter-spacing:.1em}
.pst--b{background:#0d0c0c;color:var(--cream);padding:8cqw;display:flex;flex-direction:column;justify-content:flex-end}
.pst--b::before,.pst--b::after{content:"";position:absolute;left:0;right:0;height:7cqw;background:repeating-linear-gradient(90deg,transparent 0 3cqw,var(--cream) 3cqw 7cqw,transparent 7cqw 10cqw)}
.pst--b::before{top:3cqw}.pst--b::after{bottom:auto;top:13cqw;opacity:.0}
.pst--b b{font-size:28cqw;line-height:.82;font-weight:700}
.pst--b em{position:absolute;right:9cqw;top:22cqw;width:14cqw;aspect-ratio:1;border-radius:50%;background:#e2352b}
.pst--c{background:#EDE6D8;color:#2340D8;padding:7cqw;display:grid;grid-template-rows:auto 1fr auto}
.pst--c b{font-size:40cqw;line-height:.78;font-weight:700;letter-spacing:-.02em}
.pst--c span{font-family:var(--mono);font-size:4.2cqw;color:#1a1715;display:flex;justify-content:space-between;border-top:.6cqw solid #2340D8;padding-top:2cqw}
.pst--c i{align-self:center;height:1cqw;background:#2340D8}
.pst--d{background:var(--burnt);color:var(--cream);padding:8cqw;display:flex;flex-direction:column;justify-content:space-between}
.pst--d b{font-size:62cqw;line-height:.72;font-weight:700;color:var(--ink)}
.pst--d span{font-size:12cqw;line-height:.85;font-weight:700}
.pst--d small{font-family:var(--mono);font-size:4cqw;letter-spacing:.1em}

/* ---------- OPEN SLOT ---------- */
.mk-open{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:10%;background:var(--ink-2);border:1px solid var(--line)}
.mk-open::before,.mk-open::after{content:"";position:absolute;width:26px;height:26px;border:1.5px solid var(--fox)}
.mk-open::before{left:18px;top:18px;border-right:0;border-bottom:0}.mk-open::after{right:18px;bottom:18px;border-left:0;border-top:0}
.mk-open b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(46px,4.6vw,78px);line-height:.88}
.mk-open p{margin-top:16px;color:var(--soft);max-width:18em}
.mk-open .tlink{margin-top:18px}

/* ---------- STAGE PIECES (brand) ---------- */
.bb{box-shadow:0 30px 70px -22px rgba(0,0,0,.8)}
.bb--logo{left:16%;top:14%;width:34%;aspect-ratio:1;background:var(--ink);display:grid;place-items:center;border:1px solid var(--line)}
.bb--logo img{width:62%}
.bb--sw{left:54%;top:14%;width:34%;height:15%;display:grid;grid-template-columns:repeat(5,1fr)}
.bb--sw i{display:flex;align-items:flex-end;padding:6px;font:9px/1 var(--mono);color:rgba(0,0,0,.6)}
.bb--type{left:54%;top:33%;width:34%;height:28%;background:var(--cream);color:var(--ink);padding:5%;display:flex;flex-direction:column;justify-content:space-between}
.bb--type b{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,68px);line-height:.8;text-transform:uppercase}
.bb--type span{font-stretch:125%;font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.bb__fonts{list-style:none;margin:0;padding:0;display:grid;gap:3px}.bb__fonts li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid rgba(26,23,21,.18);padding-top:3px}.bb__fonts span{font-size:clamp(6px,.55vw,9px);letter-spacing:.22em;opacity:.6}.bb__fonts em{font-style:normal;font-size:clamp(8px,.8vw,13px);line-height:1}.bb__fonts .f-d{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(9px,.95vw,15px)}.bb__fonts .f-w{font-family:var(--body);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.bb__fonts .f-m{font-family:var(--mono)}.bb__fonts .f-h{font-family:var(--hand);font-size:clamp(10px,1.05vw,17px);color:var(--burnt)}
.bb--card{left:30%;top:64%;width:26%;aspect-ratio:1.75;background:var(--fox);color:var(--ink);padding:3%;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-7deg)}
.bb--card b{font-family:var(--display);font-size:clamp(16px,1.6vw,26px);text-transform:uppercase;line-height:.9}
.bb--card span{font-family:var(--mono);font-size:9px}
.bb--word{left:62%;top:68%;width:34%;background:transparent;box-shadow:none;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.6vw,64px);line-height:.86}
.bb--word em{color:var(--fox);font-style:normal}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:85;background:rgba(5,4,4,.96);display:grid;grid-template-columns:1fr 360px;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s .5s}
.lb.is-open{visibility:visible;opacity:1;transition:opacity .5s var(--ease),visibility 0s}
.lb__media{position:relative;align-self:center;margin:0 0 0 var(--gutter);aspect-ratio:16/9;background:#000;overflow:hidden}
.lb__media canvas{position:absolute;inset:0;width:100%;height:100%}
.lb__info{padding:calc(var(--nav-h) + 20px) var(--gutter) 40px 40px;display:flex;flex-direction:column;gap:22px;overflow:auto}
.lb__info h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:44px;line-height:.9}
.lb__info dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:14px}
.lb__info dt{font-stretch:125%;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--mute);padding-top:3px}
.lb__info dd{margin:0;color:var(--soft)}
.lb__close{position:absolute;right:var(--gutter);top:calc(20px + env(safe-area-inset-top,0px));z-index:3;font-stretch:125%;font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:12px;height:44px}
.lb__close i{width:22px;height:22px;position:relative}
.lb__close i::before,.lb__close i::after{content:"";position:absolute;left:0;right:0;top:10px;height:1.5px;background:var(--fox);transform:rotate(45deg)}
.lb__close i::after{transform:rotate(-45deg)}
.lb__note{color:var(--mute);font-size:13px}

@media (max-width:1080px){
  .proj.p--7,.proj.p--5,.proj.p--8,.proj.p--4,.proj.p--6,.proj.p--inset{grid-column:span 12}
  .proj.p--drop{margin-top:0}
  .proj.p--4 .proj__media{aspect-ratio:16/10}
  .lb{grid-template-columns:1fr}
  .lb__media{margin:calc(var(--nav-h) + 30px) 0 0}
  .lb__info{padding:30px var(--gutter)}
}
@media (max-width:760px){
  .work__grid{gap:64px 0}
  .p--full .proj__media{height:auto;min-height:0;aspect-ratio:4/5}
  .p--full .proj__cap{position:relative;left:auto;bottom:auto;max-width:none;padding-top:20px}
  .p--full .proj__media::before{display:none}
  .p--full .mk-web .bw{width:88%;left:6%;right:auto;top:10%}
  .p--full .mk-web .ph{width:30%;right:5%;bottom:-4%}
  .mk-web .ph{width:26%}
  .p--wide .proj__media{aspect-ratio:16/10}
  .p--tall .proj__media{aspect-ratio:4/5}
  .mk-design .pst{width:40%;left:30%;top:14%}
  .proj__media{margin-inline:calc(var(--gutter) * -1)}
}

/* the homepage exhibit: one big project, then a row */
.work__grid .p--home .proj__media{height:min(68vh,700px);min-height:420px}
.work__grid .proj.p--4,.work__grid .proj.p--6{margin-top:0}
.work__grid .p--4 .proj__media,.work__grid .p--6 .proj__media{aspect-ratio:16/11}
@media (max-width:760px){.work__grid .p--home .proj__media{height:auto;min-height:0;aspect-ratio:4/5}}