/* gabelotto.com · built on the Gabe Lotto brand guideline
   Night theme: black ground, Signal Red, Bounded display, Tomato Grotesk text. */
@font-face{font-family:"Bounded";src:url(../fonts/bounded-black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Bounded";src:url(../fonts/bounded-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bounded Var";src:url(../fonts/bounded-variable.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Tomato Grotesk";src:url(../fonts/tomatogrotesk-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tomato Grotesk";src:url(../fonts/tomatogrotesk-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Tomato Grotesk";src:url(../fonts/tomatogrotesk-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --red:#f21b07; --paper:#000; --raised:#141211; --ink:#fff; --muted:#a39d9b; --line:#2a2625;
  --display:"Bounded","Archivo Black","Arial Black",sans-serif;
  --sans:"Tomato Grotesk","Helvetica Neue",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:120px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --max:1440px;
  --glow:0 0 24px #f21b07; --glow-sm:0 0 8px #f21b07;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--red);color:#fff}
.wrap{--pad:max(var(--s5),env(safe-area-inset-left,0px));max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:max(var(--s5),env(safe-area-inset-right,0px))}
@media (max-width:720px){.wrap{--pad:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:var(--s2) var(--s3);z-index:100}
.skip:focus{left:var(--s3);top:var(--s3)}

/* type */
.display-xl{font:900 clamp(48px,9vw,112px)/.95 var(--display);text-transform:uppercase;margin:0;text-wrap:balance}
.display-l{font:900 clamp(40px,6.4vw,72px)/.95 var(--display);text-transform:uppercase;margin:0;text-wrap:balance}
.heading{font:900 clamp(28px,3.6vw,40px)/1 var(--display);text-transform:uppercase;margin:0;text-wrap:balance}
.title{font:700 clamp(20px,2vw,24px)/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.body-l{font-size:18px;line-height:28px}
.label{font:500 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.caption{font-size:12px;line-height:16px;color:var(--muted)}
.muted{color:var(--muted)}
.red{color:var(--red)}
p{margin:0 0 var(--s3)}
.prose{max-width:65ch}
.prose p:last-child{margin-bottom:0}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .25s}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-header.solid,.site-header.menu-open{background:rgba(0,0,0,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* backdrop-filter traps the fixed menu inside the 64px bar, so turn it off while the menu is open */
.site-header.menu-open{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header::after{content:"";position:absolute;inset:0 0 -24px;z-index:-1;background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));pointer-events:none}
.brand{display:flex;align-items:center;color:var(--red);text-decoration:none}
.brand .wm{height:15px;width:auto}
.brand .mono{height:22px;width:auto;display:none}
.nav{display:flex;gap:var(--s5)}
.nav a{font:500 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:var(--s2) 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font:500 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:var(--s2) 0;cursor:pointer}
@media (max-width:720px){
  .brand .wm{display:none}.brand .mono{display:block}
  .menu-btn{display:block}
  .nav{position:fixed;inset:calc(64px + env(safe-area-inset-top,0px)) 0 0;height:calc(100dvh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;flex-direction:column;gap:var(--s3);padding:var(--s5) max(16px,env(safe-area-inset-left,0px));background:#000;transform:translateY(-110%);visibility:hidden;transition:transform .3s,visibility .3s}
  .menu-open .nav{transform:none;visibility:visible}
  .nav a{font:900 40px/1 var(--display)}
  .nav a::after{display:none}
  .nav a[aria-current=page]{color:var(--red)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s2);font:700 15px/1 var(--sans);text-decoration:none;color:#fff;background:var(--red);border:0;padding:16px 24px;cursor:pointer;transition:box-shadow .2s}
.btn:hover{box-shadow:var(--glow-sm)}
.btn.ghost{background:none;outline:1px solid rgba(255,255,255,.5);outline-offset:-1px}
.btn.ghost:hover{outline-color:var(--red);box-shadow:none}
.btn svg{width:14px;height:14px}

/* home hero */
.hero{position:relative;min-height:min(100svh,900px);display:grid;place-items:center;overflow:hidden;padding:calc(96px + env(safe-area-inset-top,0px)) 0 var(--s6)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.85) 75%),linear-gradient(transparent 60%,#000);pointer-events:none}
.hero-inner{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:var(--s5)}
.hero .wordmark{width:min(1100px,86vw);height:auto;color:var(--red);filter:drop-shadow(0 0 calc(min(1100px,86vw) * .011) #f21b07) drop-shadow(0 0 calc(min(1100px,86vw) * .022) rgba(242,27,7,.7))}
.hero .tagline{font:900 clamp(18px,2.6vw,32px)/1.05 "Bounded Var",var(--display);font-variation-settings:"wght" 900;text-transform:uppercase;max-width:22ch;text-wrap:balance;margin:0}
.hero .sub{color:var(--muted);margin:0;max-width:44ch}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
/* signature: the sign switching on */
.intro .hero .wordmark{animation:switchon 1.1s steps(1,end) both}
.intro .hero .tagline{animation:sweep 1.2s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes switchon{0%{opacity:0;filter:none}12%{opacity:.85}18%{opacity:.1}28%{opacity:1;filter:none}36%{opacity:.25}48%,100%{opacity:1}}
@keyframes sweep{from{font-variation-settings:"wght" 200;opacity:0}to{font-variation-settings:"wght" 900;opacity:1}}

/* proof + logos */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s4) 0}
.proof-line{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:center;text-align:center}
.proof-line span:not(:last-child)::after{content:"·";margin-left:var(--s4);color:var(--red)}
@media (max-width:720px){.proof-line span::after{display:none}.proof-line{gap:var(--s2) var(--s4)}}
.marquee{overflow:hidden;padding:var(--s5) 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:var(--s6);width:max-content;animation:marquee 40s linear infinite}
.marquee img{height:26px;width:auto;opacity:.85;object-fit:contain;flex:none;align-self:center}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.section{padding:var(--s7) 0}
@media (max-width:720px){.section{padding:var(--s6) 0}}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.eyebrow{display:block;margin-bottom:var(--s3);color:var(--red)}

/* cards */
.grid{display:grid;gap:var(--s5) var(--s4);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{text-decoration:none;display:grid;gap:var(--s3);transition:opacity .25s}
.card .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--raised)}
.card .frame img,.card .frame video{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card h3{font:700 22px/1.2 var(--sans);margin:0;transition:color .2s}
.card .meta{display:flex;justify-content:space-between;gap:var(--s3);color:var(--muted)}
.badge{position:absolute;left:var(--s3);top:var(--s3);background:var(--red);color:#fff;padding:6px 10px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
@media (hover:hover){
  .grid:hover .card{opacity:.45}
  .grid .card:hover{opacity:1}
  .card:hover h3{color:var(--red)}
  .card:hover .frame img,.card:hover .frame video{transform:scale(1.02)}
}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap}
.filters button{background:none;border:1px solid var(--line);color:var(--ink);padding:10px 16px;font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.filters button:hover{border-color:var(--red)}
.card[hidden]{display:none}

/* about teaser */
.teaser{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center}
.teaser img{width:clamp(140px,18vw,220px);aspect-ratio:1;object-fit:cover;border-radius:9999px}
@media (max-width:560px){.teaser{grid-template-columns:1fr}}

/* contact */
.contact{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s5)}
.contact .mail{display:inline-block;font:900 clamp(22px,4.4vw,56px)/1.05 var(--display);text-transform:lowercase;color:var(--red);text-decoration:none;word-break:break-all;margin:var(--s4) 0 var(--s5);transition:text-shadow .2s}
.contact .mail:hover{text-shadow:var(--glow)}
.contact-row{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);flex-wrap:wrap}
.social{display:flex;gap:var(--s4)}
.social a{text-decoration:none}.social a:hover{color:var(--red)}
.footer{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) 0 calc(var(--s4) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);margin-top:var(--s6);color:var(--muted)}
.footer a{text-decoration:none}.footer a:hover{color:var(--red)}

/* case study */
.cs-hero{position:relative;height:min(86svh,56.25vw + 64px);min-height:420px;overflow:hidden;background:var(--raised)}
.cs-hero img,.cs-hero video{width:100%;height:100%;object-fit:cover}
.cs-hero::after{content:"";position:absolute;inset:0 0 auto;height:140px;background:linear-gradient(rgba(0,0,0,.6),transparent);pointer-events:none}
.cs-head{padding:var(--s6) 0 var(--s5)}
.cs-head .sub{font:400 clamp(24px,3.4vw,40px)/1.05 var(--display);text-transform:uppercase;margin:var(--s2) 0 0;color:var(--muted)}
.meta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s4) 0;margin:var(--s5) 0 0}
.meta-row dt{color:var(--muted);margin-bottom:var(--s1)}
.meta-row dd{margin:0}
.cs-intro{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);padding:var(--s6) 0}
@media (max-width:900px){.cs-intro{grid-template-columns:1fr;gap:var(--s4)}}
.idea{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--line)}
.num .dot{margin:0 .07em 0 .1em}
.results .num,.stats .num{font-kerning:none;font-feature-settings:"kern" 0}
.results .num{font:900 clamp(48px,7vw,96px)/.95 var(--display);color:var(--red);display:block;margin-bottom:var(--s2)}
.logos-band{display:flex;justify-content:center;padding:var(--s5) 0 var(--s6)}
.logos-img{width:min(700px,100%);height:auto;display:block}
.block{padding:var(--s6) 0;border-top:1px solid var(--line)}
.block-head{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);margin-bottom:var(--s5)}
.block-head.solo{grid-template-columns:1fr}
@media (max-width:900px){.block-head{grid-template-columns:1fr;gap:var(--s3)}}
.vgrid{display:grid;gap:var(--s3);grid-template-columns:repeat(4,minmax(0,1fr))}
.vgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px}
.vgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
@media (max-width:900px){.vgrid,.vgrid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vid{position:relative;aspect-ratio:9/16;background:var(--raised);overflow:hidden}
.vid video{width:100%;height:100%;object-fit:cover}
.vid.wide{aspect-ratio:16/9}
.snd{position:absolute;right:var(--s2);bottom:var(--s2);width:36px;height:36px;border:0;border-radius:9999px;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.85}
.snd:hover{background:var(--red);opacity:1}
.snd svg{width:16px;height:16px}
.snd .on{display:none}.snd[aria-pressed=true] .on{display:block}.snd[aria-pressed=true] .off{display:none}
.masonry{columns:3;column-gap:var(--s3)}
.masonry>*{break-inside:avoid;margin-bottom:var(--s3)}
.masonry img{width:100%;height:auto;background:var(--raised)}
@media (max-width:900px){.masonry{columns:2}}
@media (max-width:480px){.masonry{columns:1}}
.feature{display:grid;grid-template-columns:7fr 4fr;gap:var(--s6);align-items:center}
.feature .vid{max-width:380px;width:100%;justify-self:end}
@media (max-width:760px){.feature{grid-template-columns:1fr}.feature .vid{justify-self:start}}
.stat{font:900 22px/1.1 var(--display);color:var(--red);text-transform:uppercase;margin:var(--s3) 0}
.single{display:grid;place-items:center;padding:var(--s6) var(--s4)}
.single img{max-width:min(900px,100%);height:auto}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.duo img{width:100%;height:min(70vh,720px);object-fit:cover}
.bears{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:760px){.bears{grid-template-columns:1fr}}
.bears h4{font:900 24px/1 var(--display);text-transform:uppercase;margin:0 0 var(--s3);color:var(--red)}
.bears ul{padding-left:1.1em;margin:var(--s3) 0 0}
.bears li{margin-bottom:var(--s2)}
.game{display:grid;grid-template-columns:8fr 3fr;gap:var(--s4);align-items:start}
@media (max-width:900px){.game{grid-template-columns:1fr}}
.embed{position:relative;aspect-ratio:16/10;background:var(--raised)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed .load{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--s3);text-align:center;background:#0b0a0a;color:var(--ink);border:0;width:100%;cursor:pointer;font:inherit}
.awards{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.awards li{padding-left:22px;position:relative}
.awards li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:9999px;background:var(--red);box-shadow:var(--glow-sm)}
details.credits{border-top:1px solid var(--line);padding:var(--s4) 0}
details.credits summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.credits summary::-webkit-details-marker{display:none}
details.credits summary::after{content:"+";color:var(--red);font-size:20px;line-height:16px}
details.credits[open] summary::after{content:"−"}
details.credits p{margin-top:var(--s3);color:var(--muted);max-width:90ch;font-size:14px}
.next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s4);padding:var(--s6) 0;border-top:1px solid var(--line);text-decoration:none}
.next img{width:clamp(120px,16vw,200px);aspect-ratio:4/5;object-fit:cover}
.next:hover .display-l{color:var(--red)}

/* about */
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);padding-top:calc(96px + env(safe-area-inset-top,0px))}
.photos img{width:100%;aspect-ratio:1;object-fit:cover}
.photos img:first-child{border-radius:9999px}
@media (max-width:720px){.photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);padding:var(--s6) 0}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:var(--s4)}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats .num{font:900 clamp(36px,5vw,64px)/1 var(--display);display:block;color:var(--red)}
.award-table{width:100%;border-collapse:collapse}
.award-table th{text-align:left;color:var(--muted);font:500 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:0 var(--s3) var(--s3) 0;border-bottom:1px solid var(--line)}
.award-table td{vertical-align:top;padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line)}
.award-table td:first-child{font:700 20px/1.2 var(--sans)}
.award-table td:first-child a{text-decoration:none}.award-table td:first-child a:hover{color:var(--red)}
.table-scroll{overflow-x:auto}
@media (max-width:760px){.award-table thead{display:none}.award-table tr{display:grid;gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--line)}.award-table td{border:0;padding:0}}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.timeline li{border-top:2px solid var(--line);padding-top:var(--s3)}
.timeline li.now{border-color:var(--red)}
@media (max-width:720px){.timeline{grid-template-columns:1fr}}

/* lab */
.lab-card{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center;padding:var(--s6) 0;border-top:1px solid var(--line)}
@media (max-width:820px){.lab-card{grid-template-columns:1fr}}
.caffinet-art{aspect-ratio:16/10;background:#000;outline:1px solid var(--line);display:grid;place-items:center;font:900 clamp(40px,7vw,88px)/1 var(--display);color:var(--red);text-shadow:var(--glow)}

/* reel dialog */
dialog.reel{padding:0;border:0;background:#000;max-width:min(1200px,94vw);width:100%}
dialog.reel::backdrop{background:rgba(0,0,0,.9)}
dialog.reel video{width:100%;height:auto}
dialog.reel .close{position:absolute;top:-44px;right:0;background:none;border:0;color:#fff;font:500 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:var(--s2)}

/* page wipe */
.wipe{position:fixed;inset:0;background:var(--red);z-index:200;transform:translateX(-101%);pointer-events:none}
.wipe.in{transition:transform .38s cubic-bezier(.7,0,.3,1);transform:none}
.wipe.cover{transform:none}
.wipe.out{transition:transform .42s cubic-bezier(.7,0,.3,1);transform:translateX(101%)}

/* reveal */
.rv{transform:translateY(16px);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s}
.js .rv:not(.on){opacity:.001}
.rv.on{transform:none}

/* 404 */
.nf{min-height:80svh;display:grid;place-content:center;text-align:center;gap:var(--s4);padding-top:96px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv:not(.on){opacity:1}.rv{transform:none}
  .marquee-track{animation:none}
  .wipe{display:none}
}

/* Caffinet: neon cafe sign */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cf-sign{position:relative;min-height:min(86svh,820px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:calc(110px + env(safe-area-inset-top,0px)) 0 var(--s6);background:radial-gradient(ellipse 60% 45% at 50% 48%,rgba(242,27,7,.16),transparent 70%),#000}
.cf-sign-inner{display:grid;justify-items:center;gap:var(--s3)}
.cf-neon{margin:var(--s2) 0 0;font:900 clamp(44px,12vw,188px)/.9 var(--display);text-transform:uppercase;color:var(--red);letter-spacing:.01em;
  text-shadow:0 0 .03em #fff3,0 0 .08em #f21b07,0 0 .22em rgba(242,27,7,.75),0 0 .5em rgba(242,27,7,.45)}
.cf-tag{font:900 clamp(18px,2.6vw,30px)/1.1 var(--display);text-transform:uppercase;margin:var(--s2) 0 0;text-wrap:balance}
.cf-sign .muted{margin:0 0 var(--s3)}
.cf-intro .cf-neon{animation:switchon 1.2s steps(1,end) both}
.cf-speed{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s7) 0;text-align:center}
@media (max-width:720px){.cf-speed{padding:var(--s6) 0}}
.cf-speed-head{max-width:900px;margin:0 auto var(--s6);display:grid;gap:var(--s3);justify-items:center}
.cf-speed-head .display-l{text-wrap:balance}
.cf-speed-head p{margin:0;max-width:44ch}
.cf-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);max-width:1100px;margin:0 auto}
.cf-gauge{display:grid;justify-items:center;gap:var(--s2);min-width:0;container-type:inline-size}
.cf-g-val{font:900 clamp(28px,19cqi,112px)/.9 var(--display);color:#2b100c;font-kerning:none;transition:color .2s,text-shadow .2s;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%}
@media (max-width:640px){
  .cf-gauges{grid-template-columns:1fr;gap:0;max-width:420px}
  .cf-gauge{grid-template-columns:1fr auto;align-items:center;justify-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .cf-gauge:first-child{border-top:1px solid var(--line)}
  .cf-g-val{font-size:clamp(36px,16cqi,64px);order:2;justify-self:end}
  .cf-gauge .label{order:1}
}
.cf-gauge.is-live .cf-g-val,.cf-gauge.is-done .cf-g-val{color:var(--red);text-shadow:0 0 .08em #f21b07,0 0 .25em rgba(242,27,7,.6)}
.cf-gauge .unit{color:var(--ink)}
.cf-bar{height:2px;background:var(--line);max-width:1100px;margin:var(--s6) auto var(--s5)}
.cf-bar i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 12px #f21b07;transition:width .3s}
.cf-speed-foot{display:grid;justify-items:center;gap:var(--s3)}
.cf-speed-status{margin:0;min-height:1.5em}
.cf-credit{margin-top:var(--s4)}
.cf-tools{display:flex;gap:var(--s3);align-items:end;flex:1 1 420px;max-width:640px}
.cf-tools input,.cf-tools select{background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:12px 0;font:400 18px/1.2 var(--sans);border-radius:0}
.cf-tools input{flex:1;min-width:0}
.cf-tools select{flex:none;cursor:pointer}
.cf-tools select option{background:#000}
.cf-tools input:focus,.cf-tools select:focus{border-bottom-color:var(--red);outline:none}
.cf-tools input::placeholder{color:var(--muted)}
@media (max-width:560px){.cf-tools{flex-direction:column;align-items:stretch}}
.cf-filters{margin-bottom:var(--s5)}
.cf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1024px){.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cf-grid{grid-template-columns:1fr}}
.cf-tile{position:relative;background:#0b0a0a;outline:1px solid var(--line);outline-offset:-1px;padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);transition:outline-color .2s,box-shadow .2s}
@media (hover:hover){.cf-tile:hover{outline-color:var(--red);box-shadow:0 0 24px rgba(242,27,7,.25)}}
.cf-rank{position:absolute;top:var(--s4);right:var(--s4);color:var(--muted)}
.cf-score{margin:0 0 var(--s3);display:flex;align-items:baseline;gap:8px}
.cf-score b{font:900 clamp(72px,8vw,112px)/.85 var(--display);color:var(--red);text-shadow:0 0 .08em #f21b07,0 0 .3em rgba(242,27,7,.45);font-kerning:none}
.cf-score span{color:var(--muted);font:500 13px/1 var(--sans);letter-spacing:.08em}
.cf-tile h3{font:700 24px/1.2 var(--sans);margin:0}
.cf-addr{color:var(--muted);margin:0}
.cf-stats{display:flex;gap:var(--s5);margin:var(--s2) 0 0;padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cf-stats dt{color:var(--muted)}.cf-stats dd{margin:4px 0 0;font-weight:700;font-size:18px}
.cf-tags{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cf-tags li{border:1px solid var(--line);padding:6px 10px;font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cf-map{margin-top:auto;padding-top:var(--s4);color:var(--red);text-decoration:none;font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;align-self:flex-start}
.cf-map:hover{text-shadow:var(--glow-sm)}
.cf-msg{color:var(--muted)}

/* card award badge can wrap */
.badge{max-width:calc(100% - 32px);line-height:1.3}

/* hover previews */
.card .preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.card.playing .preview{opacity:1}

/* mobile: swipeable video rows */
.swipe-hint{display:none}
@media (max-width:900px){
  .vgrid,.vgrid.c3,.vgrid.c2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad,16px);gap:var(--s3);margin:0 calc(-1 * var(--pad,16px));padding:0 var(--pad,16px);scrollbar-width:none;max-width:none}
  .vgrid::-webkit-scrollbar{display:none}
  .vgrid .vid{flex:0 0 min(62vw,300px);scroll-snap-align:start}
  .swipe-hint{display:block;margin-top:var(--s3)}
}

/* even image grid + lightbox */
.lgrid{display:grid;gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr))}
.lgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
@media (max-width:640px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lb-item{position:relative;display:block;aspect-ratio:4/5;padding:0;border:0;background:var(--raised);overflow:hidden;cursor:zoom-in}
.lb-item img,.lb-item video{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .25s}
.lb-item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--red);transition:box-shadow .2s}
@media (hover:hover){.lb-item:hover img,.lb-item:hover video{transform:scale(1.03)}.lb-item:hover::after{box-shadow:inset 0 0 0 2px var(--red)}}
.lb-play{position:absolute;right:var(--s2);bottom:var(--s2);width:32px;height:32px;border-radius:9999px;background:rgba(0,0,0,.6)}
.lb-play::before{content:"";position:absolute;left:12px;top:9px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
dialog.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.96);color:var(--ink)}
dialog.lightbox::backdrop{background:rgba(0,0,0,.96)}
dialog.lightbox[open]{display:grid;grid-template-rows:1fr auto}
.lb-stage{display:grid;place-items:center;padding:calc(var(--s4) + env(safe-area-inset-top,0px)) var(--s4) 0;min-height:0}
.lb-stage img,.lb-stage video{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}
.lb-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) max(var(--s4),env(safe-area-inset-left,0px)) calc(var(--s3) + env(safe-area-inset-bottom,0px))}
.lb-nav{display:flex;gap:var(--s2);align-items:center}
.lb-nav button{background:none;border:1px solid var(--line);color:var(--ink);min-width:44px;height:44px;padding:0 var(--s3);cursor:pointer;font:500 16px/1 var(--sans)}
.lb-nav button:hover{border-color:var(--red);color:var(--red)}
.lb-nav .lb-close{font-size:13px;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:720px){.cf-sign{min-height:auto;padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:var(--s7)}}

.tomatoes-art{text-decoration:none;font-size:clamp(32px,5.4vw,68px)}

/* showcase: big work presentation, justified rows (no cropping) */
.showcase{display:grid;gap:var(--s3)}
.sc-row{display:flex;gap:var(--s3)}
.showcase .lb-item{flex:var(--r,1.7778) 1 0;min-width:0;aspect-ratio:16/9;border-radius:4px}
.showcase .lb-item img,.showcase .lb-item video{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){.showcase .lb-item:hover img,.showcase .lb-item:hover video{transform:scale(1.015)}}
@media (max-width:720px){.sc-row{flex-wrap:wrap}.showcase .lb-item{flex:1 1 calc(50% - var(--s3))}.showcase .lb-item.land,.sc-row.n1 .lb-item{flex-basis:100%}}

/* big vertical video wall: 3 across, full width */
@media (min-width:901px){.vgrid.big,.vgrid.big.c3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}
@media (max-width:900px){.vgrid.big .vid{flex-basis:min(78vw,420px)}}

/* full-width slide carousel */
.carousel{position:relative;margin-bottom:var(--s3)}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:4px;outline:none}
.car-track::-webkit-scrollbar{display:none}
.carousel .car-slide{flex:0 0 100%;aspect-ratio:16/9;scroll-snap-align:start;background:var(--raised);cursor:default;user-select:none;-webkit-user-select:none}
.carousel .car-slide img{width:100%;height:100%;object-fit:cover;display:block}
.car-arrow{position:absolute;display:grid;place-items:center;padding:0;margin:0;line-height:1;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,opacity .2s}
.car-arrow:hover{background:var(--red)}
.car-arrow.car-prev{left:var(--s3)}.car-arrow.car-next{right:var(--s3)}
.car-arrow[disabled]{opacity:0;pointer-events:none}
.car-dots{position:absolute;left:0;right:0;bottom:var(--s3);display:flex;justify-content:center;gap:8px;pointer-events:none}
.car-dot{pointer-events:auto;width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:width .25s,background .25s}
.car-dot.on{width:28px;border-radius:5px;background:var(--red)}
@media (max-width:720px){.carousel .car-slide{aspect-ratio:4/5}.car-arrow{width:40px;height:40px;font-size:16px}}

/* results: balanced, centred columns with dividers */
.results{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;text-align:center}
.results.n1{--n:1}.results.n2{--n:2}.results.n3{--n:3}.results.n4{--n:4}
.results>div{padding:var(--s3) var(--s4);display:flex;flex-direction:column;align-items:center;justify-content:center}
.results>div+div{border-left:1px solid var(--line)}
.results .num{font-size:clamp(44px,6vw,92px);white-space:nowrap}
.results.n4 .num{font-size:clamp(40px,4.6vw,76px)}
@media (max-width:720px){.results,.results.n2,.results.n3,.results.n4{grid-template-columns:1fr}.results>div+div{border-left:0;border-top:1px solid var(--line)}.results>div{padding:var(--s4) 0}.results .num{font-size:clamp(48px,15vw,80px)}}

/* audit fixes: proof in hero, logos above the fold, contact accent */
.hero{grid-template-rows:1fr auto;padding-bottom:var(--s3)}
.hero-inner{align-self:center}
.hero .sub{color:rgba(255,255,255,.82);max-width:52ch;text-wrap:balance}
.hero .sub strong{color:#fff;font-weight:600;white-space:nowrap}
.hero>.marquee{position:relative;z-index:1;justify-self:stretch;width:100%;padding:var(--s5) 0 var(--s3)}
.hero>.marquee img{opacity:.75}
.nav a.nav-cta{color:var(--red)}
.nav a.nav-cta::after{transform:scaleX(1)}
@media (hover:hover){.nav a.nav-cta:hover{color:#fff}}

/* 5: richer project cards */
.card-res{margin:var(--s2) 0 var(--s2);color:var(--muted);font-size:15px;line-height:1.35}
.card-res b{color:var(--red);font:900 18px/1 var(--display);letter-spacing:.01em;margin-right:4px}

/* 2: live Toronto clock */
.clock{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.clock time{color:var(--fg,#fff);margin-left:6px}
.clock time:empty{display:none}
@media (max-width:720px){.clock{display:none}}

/* 1: hero project pills that swap the background film */
.hero-swap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.hero-bg{transition:opacity .45s ease}
.hero.swapping .hero-swap{opacity:.42}
.hero.swapping .hero-bg{opacity:0}
.hero-reel{display:none}
@media (min-width:1100px) and (min-height:700px) and (hover:hover){
  .hero-reel{position:absolute;z-index:2;left:max(var(--s5),calc((100vw - var(--max)) / 2 + var(--s5)));bottom:150px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
}
.hpill{font:500 13px/1 var(--sans);letter-spacing:.02em;color:#fff;text-decoration:none;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s}
.hpill:hover,.hpill:focus-visible,.hpill.on{background:var(--red);border-color:var(--red)}
.hpill.all{background:transparent;border-color:transparent;color:var(--muted);padding-left:13px}
.hpill.all:hover{color:#fff;background:transparent}

/* 4: statements that light up as you scroll */
.lightup .w{opacity:.22;transition:opacity .35s ease}
.lightup .w.on{opacity:1}
@media (prefers-reduced-motion:reduce){.lightup .w{opacity:1}}

/* ===== layout pass (Nov 12) ===== */
/* 3: cards keep titles and labels aligned */
.card-res.empty{visibility:hidden}

/* 4: recognition strip */
.proof-line .proof-k{color:var(--muted)}
.proof-line .proof-k::after{content:none!important}

/* 5: about teaser as a real two-column split */
.teaser{grid-template-columns:5fr 7fr;gap:var(--s6);align-items:center}
.teaser .teaser-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.teaser .display-l{margin:var(--s2) 0 0;text-wrap:balance}
.teaser .btn{margin-top:var(--s4)}
@media (max-width:820px){.teaser{grid-template-columns:1fr;gap:var(--s4)}.teaser .teaser-img img{aspect-ratio:4/3}}

/* 6: homepage work as a swipe row on phones */
.home-hint{display:none}
@media (max-width:720px){
  .home-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad,16px);gap:var(--s3);margin:0 calc(-1 * var(--pad,16px));padding:0 var(--pad,16px);scrollbar-width:none}
  .home-grid::-webkit-scrollbar{display:none}
  .home-grid .card{flex:0 0 80vw;scroll-snap-align:start}
  .home-hint{display:block;margin-top:var(--s3)}
}

/* 7: work page rhythm, 2 big / 3 / 3 / 2 big */
@media (min-width:1025px){
  .grid.rhythm{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid.rhythm .card{grid-column:span 2}
  .grid.rhythm .card:nth-child(-n+2),.grid.rhythm .card:nth-child(n+9){grid-column:span 3}
  .grid.rhythm .card:nth-child(-n+2) .frame,.grid.rhythm .card:nth-child(n+9) .frame{aspect-ratio:4/3}
}

/* 8: feature sections, 50/50 with a bigger video, alternating */
.feature{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.feature .vid{max-width:min(440px,calc((100svh - 140px) * .5625));width:100%;justify-self:center}
.feature.flip>.prose{order:2}
@media (max-width:760px){.feature,.feature.flip{grid-template-columns:1fr}.feature.flip>.prose{order:0}.feature .vid{justify-self:start;max-width:100%}}

/* 10: KPB game block, game and gameplay clip at equal height (16:10 game, 9:16 clip) */
.game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.3516fr);gap:var(--s4);align-items:start}
.game .vid{aspect-ratio:9/16;width:100%;max-width:none;height:auto}
.game .vid video{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.game{grid-template-columns:1fr}.game .vid{width:min(100%,360px)}}

/* 11: about stats use the project-page results row */
.about-stats{margin-top:var(--s6)}

/* 12: lab alternates image side */
@media (min-width:821px){.lab-card:nth-of-type(even)>:first-child{order:2}}

/* 1: next project as a full-width band */
.next-band{position:relative;display:block;margin-top:var(--s7);height:clamp(320px,58vh,600px);overflow:hidden;text-decoration:none;color:#fff;border-radius:4px;background:var(--raised)}
.nb-media{position:absolute;inset:0}
.nb-media img,.nb-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .4s}
.nb-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.85) 100%)}
.nb-text{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:1}
.nb-text .label{color:rgba(255,255,255,.8)}
.nb-text .display-xl{margin:var(--s2) 0 0;transition:color .25s}
.nb-text .sub{font:400 clamp(18px,2.4vw,30px)/1.1 var(--display);text-transform:uppercase;color:rgba(255,255,255,.8);margin:var(--s2) 0 0}
.nb-arrow{display:inline-block;margin-left:8px;transition:transform .3s}
@media (hover:hover){.next-band:hover .nb-media img,.next-band:hover .nb-media video{transform:scale(1.04)}.next-band:hover .display-xl{color:var(--red)}.next-band:hover .nb-arrow{transform:translateX(10px)}}
@media (max-width:720px){.next-band{height:clamp(260px,48vh,420px)}.nb-text{left:var(--s4);right:var(--s4);bottom:var(--s4)}}

.results.n4 .num{font-size:clamp(34px,3.9vw,62px)}