/* ───────── Draco — site styles (dark only) ───────── */
@font-face{font-family:"Coolvetica";src:url(/fonts/coolvetica-rg.otf) format("opentype");font-display:swap}
@font-face{font-family:"Coolvetica Comp";src:url(/fonts/coolvetica-hv-comp.otf) format("opentype");font-display:swap}

:root{
  --bg:#0C0B0E; --ink:#F2F0EB; --ink-2:rgba(242,240,235,.58); --line:rgba(255,255,255,.09);
  --accent:#7C55FF; --violet:#6B3BFF; --soft:rgba(255,255,255,.06); --soft-2:rgba(255,255,255,.10);
  --surface:rgba(255,255,255,.05); --surface-on:rgba(255,255,255,.11);
  --grid:rgba(255,255,255,.045);
  --lift:0 0 44px -10px rgba(110,130,255,.45),0 24px 50px -24px rgba(0,0,0,.8);
  --rest:0 14px 34px -24px rgba(0,0,0,.7);
  --text-ca:-.8px 0 rgba(255,40,120,.35),.8px 0 rgba(0,190,255,.35);
  --h-font:"Coolvetica",Inter,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;letter-spacing:-.011em;position:relative;isolation:isolate;min-height:100vh;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* texture: grid (strongest top and bottom) + grain */
body::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:72px 72px;background-position:center top;
  -webkit-mask:linear-gradient(to bottom,#000 0,rgba(0,0,0,.25) 38%,rgba(0,0,0,.25) 72%,#000 100%);
          mask:linear-gradient(to bottom,#000 0,rgba(0,0,0,.25) 38%,rgba(0,0,0,.25) 72%,#000 100%)}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px);position:relative}
.h{font-family:var(--h-font);font-weight:400;letter-spacing:-.01em;line-height:.92;text-shadow:var(--text-ca)}
.label{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons: gentle gradient, grow on hover */
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;font:inherit;font-size:16px;font-weight:550;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:scale(1.04)}
.btn svg{width:15px;height:15px}
.btn-primary{color:#fff;background:radial-gradient(130% 120% at 50% -20%,#9476FF 0%,#6B3BFF 55%,#5A2DEB 100%);box-shadow:0 8px 20px -10px rgba(107,59,255,.65)}
.btn-primary:hover{box-shadow:0 12px 26px -10px rgba(107,59,255,.8)}
.btn-soft{color:var(--ink);background:var(--soft-2)}
.btn-sm{height:42px;padding:0 18px;font-size:15px}
.arr{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;height:84px;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:6px;font-weight:620;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.025em}
.brand img{width:58px;height:58px;margin:-10px -6px -10px -12px}
.nav-mid{display:flex;gap:32px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-mid a{color:var(--ink-2);text-decoration:none;font-size:16px;transition:color .15s}
.nav-mid a:hover,.nav-mid a[aria-current]{color:var(--ink)}
.nav-r{display:flex;gap:8px;align-items:center}
.icon-btn{width:42px;height:42px;border-radius:999px;border:0;color:var(--ink);display:grid;place-items:center;cursor:pointer;background:var(--soft-2)}
.icon-btn svg{width:18px;height:18px}

/* footer */
.foot{margin-top:150px;border-top:1px solid var(--line);padding-top:44px;padding-bottom:30px}
.foot-top{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end}
.cta{display:flex;align-items:center;gap:.16em;font-family:"Coolvetica Comp",var(--h-font);font-size:clamp(64px,12vw,184px);line-height:.84;color:var(--ink);text-decoration:none;margin-top:14px;text-shadow:var(--text-ca);width:max-content;max-width:100%}
.cta svg{width:.56em;height:.56em;color:var(--accent);flex:none;transition:transform .3s;filter:drop-shadow(0 0 18px rgba(107,59,255,.5))}
.cta:hover svg{transform:translate(10px,-10px)}
.foot-links{display:grid;grid-template-columns:repeat(3,auto);justify-content:end;gap:clamp(28px,4vw,64px);padding-bottom:10px}
.foot-links h2{font-size:14px;font-weight:600;margin-bottom:14px;letter-spacing:-.01em}
.foot-links a{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);text-decoration:none;padding:4px 0;transition:color .15s}
.foot-links a:hover{color:var(--ink)}
.ico{width:15px;height:15px;flex:none}
.fine{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.fine button{color:inherit;background:none;border:0;font:inherit;cursor:pointer}
.fine button:hover{color:var(--ink)}

/* ───────── home ───────── */
.hero{text-align:center;padding:clamp(44px,7vw,96px) 0 0}
.hero h1{font-size:clamp(42px,8.2vw,112px)}
.hero p{font-size:clamp(17px,1.6vw,21px);color:var(--ink-2);max-width:620px;margin:24px auto 0;line-height:1.42;font-weight:450}
.ctas{display:flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.reel{margin-top:64px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:var(--rest)}
.reel video{width:100%;height:100%;object-fit:cover}

.trusted{padding:88px 0 0;display:flex;align-items:center;justify-content:center;gap:12px}
.faces{display:flex}
.faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2.5px var(--bg);margin-left:-9px}
.faces img:first-child{margin-left:0}
.faces span{width:34px;height:34px;border-radius:50%;margin-left:-9px;display:grid;place-items:center;font-size:11px;font-weight:600;background:#26252a;color:var(--ink);box-shadow:0 0 0 2.5px var(--bg)}
.trusted p{font-size:17px;color:var(--ink-2)}
.trusted p b{color:var(--ink);font-weight:600}
.brands{display:flex;justify-content:center;align-items:flex-start;gap:clamp(40px,6vw,88px);flex-wrap:wrap;margin:48px auto 0;list-style:none}
.co{display:flex;flex-direction:column;align-items:center;gap:12px}
.co .lg{height:48px;display:flex;align-items:center;gap:10px}
.co small{font-size:13px;color:var(--ink-2)}
.co .word{font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.co .word.caps{letter-spacing:.02em}

section{scroll-margin-top:20px}
.work{padding-top:96px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start}
.work > *{min-width:0}
.side{display:flex;flex-direction:column;gap:20px}
.side h2{font-size:70px}
.side p{font-size:15px;color:var(--ink-2);line-height:1.45}
.side .hint-touch{display:none}
.tabs{display:flex;flex-direction:column;background:var(--soft);border-radius:20px;padding:5px}
.tab{display:flex;align-items:center;font:inherit;font-size:16px;font-weight:500;text-align:left;border:0;background:none;color:var(--ink-2);padding:12px 16px;border-radius:15px;cursor:pointer;transition:color .2s,background .2s}
.tab small{margin-left:auto;font-size:13px;font-weight:400;color:var(--ink-2)}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{background:var(--surface-on);color:var(--ink)}

.grid{display:grid;gap:18px;list-style:none}
.grid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.vertical{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{cursor:pointer;border:0;background:none;font:inherit;color:inherit;text-align:left;display:block;width:100%}
.thumb{position:relative;border-radius:14px;overflow:hidden;background:#111;box-shadow:var(--rest);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cell:hover .thumb,.cell:focus-visible .thumb{transform:scale(1.025);box-shadow:var(--lift)}
.wide .thumb{aspect-ratio:16/9}
.vertical .thumb{aspect-ratio:9/16}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb video{opacity:0;transition:opacity .25s}
.thumb video.on{opacity:1}
.cap{display:flex;justify-content:space-between;gap:8px;padding:14px 2px 4px;font-size:16px;font-weight:550;letter-spacing:-.02em}
.cap span{color:var(--ink-2);font-weight:400}
.vertical .cap{flex-direction:column;gap:2px}
.yt-badge{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.soon{display:grid;place-items:center;text-align:center;min-height:360px;border-radius:14px;background:var(--surface)}
.soon b{display:block;font-family:var(--h-font);font-weight:400;font-size:44px;letter-spacing:-.01em}
.soon span{display:block;margin-top:8px;color:var(--ink-2);font-size:15px}

.tst{padding-top:150px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-size:clamp(44px,5.4vw,74px)}
.sec-head p{max-width:360px;color:var(--ink-2);font-size:17px;line-height:1.45}
.qwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;height:720px;overflow:hidden;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.qcol{display:flex;flex-direction:column;gap:16px;will-change:transform}
.q{border-radius:22px;padding:26px;background:var(--surface)}
.q blockquote{font-size:20px;line-height:1.35;font-weight:520;letter-spacing:-.02em}
.q.big blockquote{font-family:var(--h-font);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.01em}
.q.feat blockquote{font-size:21px;line-height:1.38;font-weight:600}
.q figcaption{display:flex;align-items:center;gap:12px;margin-top:22px}
.q figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.q figcaption b{display:block;font-weight:600;font-size:15px}
.q figcaption small{color:var(--ink-2);font-size:13px}
.q .note{display:block;margin-top:12px;font-size:14px;color:var(--ink-2)}

/* player (lightbox carousel) */
dialog.lbd{border:0;padding:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;overflow:hidden;color:#fff}
dialog.lbd::backdrop{background:rgba(8,7,10,.9);backdrop-filter:blur(12px)}
.lb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.lb-track{position:relative;height:84vh}
.lb[data-o=v]{--w:calc(80vh*9/16);--ar:9/16;--s:.8;--step:calc(var(--w)*.92 + 32px)}
.lb[data-o=h]{--w:min(66vw,calc(76vh*16/9));--ar:16/9;--s:.62;--step:calc(var(--w)*.83 + 32px)}
.lb-item{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;background:#111;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--k) * var(--step))) scale(var(--sc));opacity:var(--op);filter:blur(var(--bl)) saturate(var(--sat));
  transition:transform .6s cubic-bezier(.22,.8,.2,1),opacity .6s,filter .6s}
.lb-item video,.lb-item img,.lb-item iframe{width:100%;height:100%;object-fit:cover;border:0}
.lb-item:not(.cur):not(.far):hover{opacity:.62;filter:none}
.lb-item.cur{cursor:default;box-shadow:0 30px 90px -20px rgba(0,0,0,.9),0 0 60px -20px rgba(110,130,255,.35)}
.lb-item.far{pointer-events:none}
.lb-track.instant .lb-item{transition:none!important}
.lb-meta{display:flex;justify-content:center;gap:14px;align-items:baseline;margin-top:16px;font-size:16px}
.lb-meta span{opacity:.55}
.arrow{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:3;transition:background .2s}
.arrow:hover{background:rgba(255,255,255,.22)}
.arrow svg{width:22px;height:22px}
.arrow.l{left:24px}.arrow.r{right:24px}
.lb-top{position:fixed;top:18px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.lb-top .count{font-size:14px;opacity:.6;font-variant-numeric:tabular-nums}
.lb-top .x{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:22px;background:rgba(255,255,255,.12)}
.lb-dm{position:fixed;right:24px;bottom:24px;z-index:3}

/* ───────── about ───────── */
.about section{padding-top:120px}
.sec-title{font-size:clamp(44px,5vw,66px);margin-bottom:32px}
.intro{text-align:center;padding:clamp(56px,8vw,112px) 0 0}
.intro h1{font-size:clamp(56px,8vw,108px)}
.intro p{font-size:clamp(18px,1.7vw,21px);line-height:1.45;color:var(--ink-2);margin:24px auto 0;max-width:600px}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none}
.skill{display:flex;flex-direction:column;border-radius:22px;background:var(--surface);padding:10px 10px 26px}
.skill .clip{order:-1;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#111}
.skill .clip video{width:100%;height:100%;object-fit:cover}
.skill h3{margin:22px 16px 0;font-family:var(--h-font);font-weight:400;font-size:35px;line-height:1;letter-spacing:-.01em}
.skill p{margin:10px 16px 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none}
.who{display:flex;align-items:center;gap:16px;padding:16px;border-radius:20px;background:var(--surface)}
.who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.who b{font-size:17px;font-weight:600;letter-spacing:-.02em;display:block}
.who small{font-size:14px;color:var(--ink-2)}
.who.more{justify-content:center;text-align:center}
.who.more b{font-family:var(--h-font);font-weight:400;font-size:30px;letter-spacing:-.01em}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none}
.num{padding:26px;border-radius:20px;background:var(--surface)}
.num b{display:block;font-family:var(--h-font);font-weight:400;letter-spacing:-.01em;font-size:clamp(44px,4.8vw,64px);line-height:1}
.num b i{font-style:normal;color:var(--accent)}
.num small{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.xps{border-top:1px solid var(--line)}
.xp{border-bottom:1px solid var(--line)}
.xp summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:26px 0}
.xp summary::-webkit-details-marker{display:none}
.xp h3{font-family:var(--h-font);font-weight:400;letter-spacing:-.01em;font-size:clamp(32px,3.9vw,52px);line-height:1}
.xp .at{font-size:16px;color:var(--ink-2)}
.xp .pm{width:36px;height:36px;border-radius:50%;background:var(--soft-2);position:relative}
.xp .pm::before,.xp .pm::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.xp .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.xp.shown .pm::after{transform:translate(-50%,-50%) rotate(0)}
/* the row opens by easing a grid track 0fr → 1fr: nothing is measured, so it can't overshoot */
.xp .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.xp.shown .body{grid-template-rows:1fr}
.xp .inner{min-height:0;overflow:hidden}
.xp .inner p{max-width:720px;font-size:17px;line-height:1.55;color:var(--ink-2);padding-bottom:28px;opacity:0;transform:translateY(8px);transition:opacity .4s ease .08s,transform .45s cubic-bezier(.2,.7,.2,1) .05s}
.xp.shown .inner p{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* touch screens get the tap hint instead of the hover hint */
@media (hover:none){.side .hint{display:none}.side .hint-touch{display:block}}

/* ───────── tablets: desktop grids, tabs in a row above them ───────── */
@media (max-width:1024px){
  .work{grid-template-columns:minmax(0,1fr);gap:24px}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
  .side h2{font-size:64px}
  .side p{flex-basis:100%}
  .tabs{flex-direction:row;border-radius:999px}
  .tab{border-radius:999px;white-space:nowrap}
  .tab small{margin-left:6px}
  .qwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brands{flex-wrap:nowrap;gap:28px}
  .co .lg{transform:scale(.86)}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr;gap:36px}
  .foot-links{justify-content:start}
  .lb[data-o=h]{--w:88vw}
}

/* ───────── phones: swipe rows instead of tall stacks ───────── */
@media (max-width:700px){
  nav{height:72px}
  .nav-mid,.nav-r .btn{display:none}
  .hero{padding-top:36px}
  .hero p{font-size:16px}
  .reel{margin-top:40px;border-radius:16px}
  .trusted{padding-top:56px;flex-wrap:wrap}
  .brands{display:grid;grid-template-columns:1fr 1fr;row-gap:28px;column-gap:8px;margin-top:32px}
  .co .lg{transform:scale(.78)}
  .co small{font-size:12px;text-align:center}
  .work{padding-top:72px}
  .side h2{font-size:56px}
  .tabs{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .tabs::-webkit-scrollbar{display:none}
  /* one row you swipe through, like reels */
  .grid.vertical,.grid.wide,.skills{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    gap:12px;margin:0 calc(-1 * clamp(16px,4vw,48px));padding:0 clamp(16px,4vw,48px) 6px;scroll-padding:0 clamp(16px,4vw,48px)}
  .grid.vertical::-webkit-scrollbar,.grid.wide::-webkit-scrollbar,.skills::-webkit-scrollbar{display:none}
  /* cards snap to the centre of the screen, neighbours peek on both sides */
  .grid.vertical{padding-inline:19vw;scroll-padding:0}
  .grid.wide{padding-inline:7vw;scroll-padding:0}
  .skills{padding-inline:8vw;scroll-padding:0}
  .grid.vertical > li{flex:0 0 62vw;scroll-snap-align:center}
  .grid.wide > li{flex:0 0 86vw;scroll-snap-align:center}
  .skills > li{flex:0 0 84vw;scroll-snap-align:center}
  .cell:hover .thumb{transform:none}
  .soon{min-height:220px}
  .tst{padding-top:100px}
  .qwall{grid-template-columns:1fr;height:520px}
  .q blockquote{font-size:18px}
  .about section{padding-top:88px}
  .sec-title{margin-bottom:22px}
  .wall{grid-template-columns:1fr 1fr;gap:8px}
  .who{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .who img{width:44px;height:44px}
  .who b{font-size:15px}
  .who small{font-size:13px}
  .who.more{align-items:center}
  .nums{grid-template-columns:1fr;gap:8px}
  .num{display:flex;align-items:baseline;gap:14px;padding:18px 20px}
  .num b{font-size:40px}
  .num small{margin-top:0}
  .xp summary{grid-template-columns:1fr auto;gap:8px;padding:20px 0}
  .xp .at{grid-column:1;grid-row:2;font-size:14px}
  .foot{margin-top:110px}
  .foot-links{grid-template-columns:repeat(3,auto);gap:24px}
  /* player: clip, then title under it, then arrows + DM in their own row: nothing overlaps */
  .lb{flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;row-gap:0}
  .lb[data-o=h]{--w:92vw;--hr:.5625}
  .lb[data-o=v]{--w:min(78vw,calc(62vh*9/16));--hr:1.7778}
  .lb-track{order:1;width:100%;height:calc(var(--w) * var(--hr))}
  .lb-meta{order:2;width:100%;margin:14px 0 18px;padding:0 24px;flex-wrap:wrap;text-align:center}
  .arrow{position:static;transform:none;order:3;margin:0 6px}
  .arrow.l{margin-left:20px}
  .lb-dm{position:static;order:5;margin-left:auto;margin-right:20px}
  .arrow.r{order:4}
}
@media (max-width:480px){
  .tab{padding:10px 13px;font-size:15px}
  .tab small{display:none}
}
@media (max-width:420px){
  .foot-links{grid-template-columns:repeat(2,auto)}
}