/* =========================================================
   TOKENS — purple / acid-green street palette. Panels use thick black
   borders + hard offset shadows; buttons, chips and titles lean forward
   (--skew) like a PS1 skate-game menu.
========================================================= */
:root{
  --bg: #0b0512;
  --bg-2: #150a26;
  --bg-3: #1e1033;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);
  --neon: #ccff00;
  --violet: #9b5cff;
  --violet-ink: #8a47f5;   /* violet backgrounds behind white text (4.9:1) */
  --violet-deep: #3b1d6e;
  /* sampled from the About photo (assets/pfp.webp) — drives the page gradient */
  --pfp-electric: #7000b0;
  --pfp-mid: #600090;
  --pfp-eggplant: #1d0b35;
  --pfp-night: #100030;
  --paper: #ece6d8;
  --ink: #f6f3fb;
  --ink-soft: #a99bc7;
  --ink-faint: #8b7fa8;

  --font: 'Space Mono', 'Courier New', monospace;
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  /* variable weight 100–900 — the hero name morphs thinner near the cursor */
  --font-morph: 'Big Shoulders Display', 'Anton', Impact, sans-serif;
  --font-tag: 'Permanent Marker', 'Comic Sans MS', cursive;
  --ease: cubic-bezier(.16,.84,.44,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --edge: 3px;
  --skew: -10deg;
  --shadow-hard: 6px 6px 0 rgba(0,0,0,.6);
  --shadow-hard-sm: 4px 4px 0 rgba(0,0,0,.6);
  /* masking tape strip, shared by posters / polaroid / sticker */
  --tape: rgba(236,230,214,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
[hidden]{display:none !important;}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  /* subtle page-long wash in the About photo palette: stays near-black and
     only lifts to the photo's dark eggplant through the middle, with two
     faint electric-purple glows on alternating sides. Kept dark on purpose
     so cards, chips and the logo pattern keep their contrast. Painted once
     on the whole document, never repaints. Grain on top. */
  background-color:var(--bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='.07'/></svg>"),
    radial-gradient(ellipse 60% 18% at 6% 38%, rgba(112,0,176,.13), transparent 72%),
    radial-gradient(ellipse 55% 16% at 96% 66%, rgba(112,0,176,.10), transparent 72%),
    linear-gradient(180deg, var(--bg) 0%, #120626 22%, #170833 48%, #140729 74%, var(--bg) 100%);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Anton ships a single weight — never fake-bold it */
  font-synthesis-weight:none;
}

/* faint CRT scanlines across the whole page — the PS1 screen texture.
   Plain alpha, no blend mode: a blended full-screen fixed layer makes the
   browser re-blend the whole viewport whenever anything under it moves */
body::before{
  content:""; position:fixed; inset:0; z-index:6000; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.075) 0 1px, transparent 1px 3px);
}

h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:400; letter-spacing:.01em; text-transform:uppercase;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:var(--font);}

/* =========================================================
   BOOT / LOADING SCREEN
========================================================= */
#boot-screen{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
#boot-screen.hide{opacity:0; visibility:hidden; pointer-events:none;}
.boot-inner{display:flex; flex-direction:column; align-items:center; gap:16px;}
.boot-label{
  font-family:var(--font-display); font-size:2.2rem; line-height:1; letter-spacing:.04em; text-transform:uppercase;
  transform:skewX(var(--skew));
  text-shadow:3px 3px 0 var(--violet), 6px 6px 0 #000;
  animation:boot-blink 1s steps(2, jump-none) infinite;
}
@keyframes boot-blink{50%{opacity:.35;}}
.boot-bar{
  width:200px; height:12px; background:#000; overflow:hidden;
  border:2px solid var(--border-strong); box-shadow:var(--shadow-hard-sm);
  transform:skewX(var(--skew));
}
.boot-bar-fill{height:100%; width:0%; background:var(--neon); transition:width .6s var(--ease);}

/* =========================================================
   NAVBAR
========================================================= */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:14px 56px;
  background:rgba(11,5,18,.86);
  border-bottom:var(--edge) solid #000;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  letter-spacing:.02em; text-transform:uppercase; transition:color .15s ease;
}
.brand:hover{color:var(--neon);}
.brand-logo{height:40px; width:auto; max-width:140px; object-fit:contain; transform:rotate(-6deg); transition:transform .3s var(--spring);}
.brand:hover .brand-logo{transform:rotate(0) scale(1.08);}
/* absolute + translate centers the links relative to the WHOLE navbar,
   regardless of how wide the brand or the actions cluster are */
.nav-links{
  display:flex; gap:26px;
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
}
.nav-links a{
  font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .15s ease; position:relative; padding:4px 2px;
}
/* leaning acid-green underline that wipes in on hover */
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:var(--neon); transform:skewX(var(--skew)) scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{transform:skewX(var(--skew)) scaleX(1);}
.nav-actions{display:flex; align-items:center; gap:14px;}

.nav-social{display:flex; align-items:center; gap:12px; padding-right:12px; border-right:var(--edge) solid var(--border-strong);}
.nav-social a{color:var(--ink-faint); transition:color .15s ease;}
.nav-social a:hover{color:var(--neon);}
@media (max-width:920px){.nav-social{display:none;}}

.lang-toggle{
  display:flex; align-items:center; gap:5px;
  background:#000; border:2px solid var(--border-strong);
  padding:6px 12px; cursor:pointer; color:var(--ink-soft);
  font-size:.7rem; font-weight:700;
}
.lang-toggle span{opacity:.8; transition:opacity .15s ease;}
.lang-toggle span.active{opacity:1; color:var(--neon);}
.lang-sep{opacity:.3 !important;}

/* chunky skate-game menu button — leans forward, hard offset shadow,
   presses flat on click */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:400; font-size:.95rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:11px 24px; cursor:pointer; border:var(--edge) solid #000;
  box-shadow:var(--shadow-hard-sm);
  transform:skewX(var(--skew));
  transition:transform .1s var(--ease), box-shadow .1s var(--ease);
  white-space:nowrap;
}
.btn-pill:hover{transform:skewX(var(--skew)) translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,.6);}
.btn-pill:active{transform:skewX(var(--skew)) translate(2px,2px); box-shadow:0 0 0 rgba(0,0,0,.6);}
.btn-neon{background:var(--neon); color:#0b0512;}
.btn-ghost{background:#000; color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--neon); color:var(--neon);}
.btn-outline{
  background:transparent; border:2px solid var(--border-strong); color:var(--ink-soft);
  padding:9px 16px; font-size:.76rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; cursor:pointer;
  margin:4px 8px 4px 0; transition:border-color .15s ease, color .15s ease;
}
.btn-outline:hover{border-color:var(--neon); color:var(--neon);}

.nav-burger{
  display:none; background:#000; border:2px solid var(--border-strong);
  padding:8px; cursor:pointer; color:var(--ink);
}

/* mobile: links drop down as a full-width panel right under the navbar.
   Must undo the desktop centering transform, otherwise the panel gets
   shoved up/left off-screen. Hidden with visibility/opacity (not
   display:none) so it can slide in. */
@media (max-width:920px){
  .nav-links{
    counter-reset:navlink;
    position:absolute; top:calc(100% + var(--edge)); left:0; right:0;
    transform:translateY(-10px);
    flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:var(--edge) solid #000;
    box-shadow:0 10px 0 rgba(0,0,0,.35);
    padding:6px 20px 14px;
    visibility:hidden; opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .22s var(--ease), visibility 0s linear .22s;
  }
  .nav-links.open{
    visibility:visible; opacity:1; pointer-events:auto; transform:none;
    transition:opacity .18s ease, transform .22s var(--ease), visibility 0s;
  }
  .nav-links a{
    counter-increment:navlink;
    display:flex; align-items:center; gap:14px;
    padding:15px 2px; border-bottom:1px solid var(--border);
    font-family:var(--font-display); font-size:1.6rem; font-weight:400; letter-spacing:.03em;
    color:var(--ink);
  }
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a::before{
    content:counter(navlink, decimal-leading-zero);
    font-family:var(--font); font-size:.7rem; font-weight:700; letter-spacing:.04em;
    color:var(--bg); background:var(--neon); padding:3px 7px;
    transform:skewX(var(--skew));
  }
  .nav-links a::after{display:none;}
  .nav-links a:hover, .nav-links a:active{color:var(--neon);}
  .btn-neon#start-project-btn{display:none;}
  .nav-burger{display:flex;}
  .nav-burger[aria-expanded="true"]{border-color:var(--neon); color:var(--neon);}
  .navbar{padding:12px 20px;}
}

/* clip (not hidden) so tilted full-bleed strips like the ticker can never
   cause sideways scroll, without turning main into a scroll container */
main{padding-top:0; overflow-x:clip;}

/* =========================================================
   SECTIONS (generic)
   Header = numbered acid chip (01, 02…) + huge leaning title with a
   violet/black offset, like a skate-game logo.
========================================================= */
main{counter-reset:sec;}
.section{
  position:relative; z-index:1;
  padding:120px 32px;
  max-width:1180px;
  margin:0 auto;
}
#work, #about, #clients{counter-increment:sec;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bg); background:var(--neon);
  padding:5px 14px 5px 5px; margin-bottom:20px;
  transform:skewX(var(--skew)); box-shadow:4px 4px 0 #000;
}
.eyebrow::before{
  content:counter(sec, decimal-leading-zero);
  background:var(--bg); color:var(--neon); padding:2px 7px; letter-spacing:.04em;
}
.section-title{
  font-size:clamp(2.8rem, 7vw, 5.4rem); line-height:.9;
  transform:skewX(-6deg); transform-origin:left bottom;
  text-shadow:3px 3px 0 var(--violet), 6px 6px 0 #000;
}
.section-subtitle{color:var(--ink-soft); font-size:.98rem; margin-top:18px; max-width:52ch;}

/* =========================================================
   HERO
========================================================= */
.hero{
  min-height:100vh; min-height:100svh; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 96px;
  overflow:hidden;
  background:#0c0a0e;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}

/* =========================================================
   HERO WALL — a pixel-art brick wall (assets/wall.webp) you can tag
   with spray paint. The paint lives on #spray-canvas and is
   driven by hero-scene.js. Everything interactive is progressive
   enhancement — without JS it's just a static wall.
========================================================= */
.hero-scene{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}

/* oversized by 40px on every side so the drift in hero-scene.js never
   uncovers an edge; moved only via `translate` (GPU, no repaint) */
.scene-wall{
  position:absolute; inset:-40px;
  will-change:translate;
  background:#1a0d0b url("assets/wall.webp") center / cover no-repeat;
  /* pixel-art bricks: keep the pixels crisp instead of smoothing them */
  image-rendering:pixelated;
}
/* knock the bricks back so the name, paint and buttons stay the focus */
.scene-wall::after{
  content:""; position:absolute; inset:0;
  background:rgba(12,6,10,.55);
}

/* paint layer: behind all text inside the hero-content group; position
   and size are set from JS so it covers the whole hero */
.spray-canvas{position:absolute; left:0; top:0; z-index:-1; display:block; pointer-events:none; transform-origin:0 0;}

.scene-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 45%, rgba(0,0,0,.6) 100%),
    linear-gradient(180deg, transparent 75%, rgba(0,0,0,.55));
}

/* spray nozzle cursor — ring in the current can color. Only used once
   hero-scene.js confirms a fine pointer + motion allowed */
.spray-cursor{
  will-change:translate;
  position:fixed; z-index:200; left:0; top:0;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:2px solid var(--can, var(--neon)); border-radius:50%;
  pointer-events:none; opacity:0;
  box-shadow:0 0 14px -2px var(--can, var(--neon));
  transition:opacity .18s ease, scale .18s var(--ease), border-color .15s linear, box-shadow .15s linear;
}
.spray-cursor::after{
  content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%; background:var(--can, var(--neon));
  transition:background-color .15s linear;
}
.spray-cursor.is-active{opacity:1;}
.spray-cursor.is-idle{opacity:0; scale:.4;}
.hero.js-spray-ready{cursor:none;}
.hero.js-spray-ready :is(a, button, .scene-logo-wrap){cursor:pointer;}

/* ---------- hero typography ---------- */
.hero-content{
  /* isolated group = paint canvas + text. The name blends (difference)
     against the paint only — the wall stays outside the group, so letters
     stay off-white on bare bricks and invert where paint hits them. The
     blend only covers the name's own box, so it's cheap. */
  position:relative; isolation:isolate;
  width:100%; max-width:1280px; margin:0 auto;
  padding:0 clamp(20px, 5vw, 56px);
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
}
.hero-tag{
  font-family:var(--font-tag); font-size:clamp(1.15rem, 2.3vw, 1.7rem); line-height:1;
  color:var(--neon); transform:rotate(-4deg); transform-origin:left bottom;
  margin:0 0 .35em .15em;
  text-shadow:0 0 18px rgba(204,255,0,.35);
  -webkit-user-select:none; user-select:none;
}
#hero-name{
  font-family:var(--font-morph); font-weight:900;
  font-size:clamp(3.8rem, 14vw, 12.5rem); line-height:.86; letter-spacing:.005em;
  max-width:100%; overflow-wrap:anywhere;
  color:#f2eee4;
  /* paint sprayed under the letters flips their color (see .hero-content) */
  mix-blend-mode:difference;
  /* treated as artwork, not copyable text */
  -webkit-user-select:none; user-select:none;
}
/* hero-scene.js splits the name/eyebrow into letters; each letter gets a
   fixed-width slot so thinning it never reflows the line */
.morph-word{display:inline-block; white-space:nowrap;}
/* text for screen readers only */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.morph-char{display:inline-block; text-align:center; vertical-align:top;}
/* once measured, each letter keeps its full-weight box and is contained:
   changing its weight repaints just that letter, no page re-layout */
.morph-char.is-locked{contain:size layout style;}
.hero-tagline{
  position:relative; z-index:2;
  margin-top:22px; max-width:44ch;
  font-size:.92rem; line-height:1.55; color:var(--ink-soft);
  padding-left:14px; border-left:3px solid var(--violet);
}
.hero-tagline:empty{display:none;}
.hero-actions{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}

/* logo slapped on the wall as a sticker, held by a strip of tape */
.scene-logo-wrap{
  position:absolute; z-index:2; right:clamp(20px, 8vw, 130px); top:24%;
  width:clamp(90px, 11vw, 150px); aspect-ratio:1;
  transform:rotate(9deg);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  /* die-cut white border around the logo's own shape, then a cast shadow */
  filter:
    drop-shadow(3px 0 0 #f2eee4) drop-shadow(-3px 0 0 #f2eee4)
    drop-shadow(0 3px 0 #f2eee4) drop-shadow(0 -3px 0 #f2eee4)
    drop-shadow(0 14px 16px rgba(0,0,0,.65));
}
.scene-logo-wrap::before{
  content:""; position:absolute; z-index:3; left:50%; top:-8%; width:46%; height:16%;
  transform:translateX(-50%) rotate(-4deg);
  background:rgba(236,230,214,.28);
  clip-path:polygon(3% 0, 97% 6%, 100% 100%, 0 92%);
}
.scene-logo-wrap:hover{transform:rotate(-3deg) scale(1.08) translateY(-6px);}
.scene-logo{position:relative; z-index:2; width:100%; height:100%; object-fit:contain;}

/* bottom strip: scroll hint */
.hero-footer{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:0 clamp(20px, 5vw, 56px) 28px;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.scroll-hint::before{content:"↓"; margin-right:10px; color:var(--neon);}

@media (max-width:760px){
  .hero{padding-bottom:110px;}
  .scene-logo-wrap{top:15%; width:clamp(72px, 22vw, 96px);}
  #hero-name{font-size:19vw;}
}

/* =========================================================
   TICKER — black tape strip across the hero's bottom edge, slightly
   crooked like it was slapped on the wall. Wider than the viewport so
   the tilt never shows its ends (body has overflow-x:hidden).
========================================================= */
.ticker{
  position:relative; z-index:3;
  width:110vw; margin:-30px 0 0 -5vw;
  transform:rotate(-1.4deg);
  background:#070409;
  border-top:var(--edge) solid #000; border-bottom:var(--edge) solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.07), 0 8px 0 rgba(0,0,0,.35);
  overflow:hidden;
}
.ticker-track{
  display:flex; align-items:center; width:max-content;
  padding:15px 0;
  animation:marquee 48s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
/* infinite loops stop while scrolled out of view (set by script.js) */
.anim-offscreen, .anim-offscreen *{animation-play-state:paused !important;}
.ticker-word{
  font-family:var(--font); font-weight:700; font-size:.76rem;
  letter-spacing:.26em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink-soft);
}
/* spacing as margin, not flex gap: keeps each set exactly half the track,
   so the -50% loop lands seamlessly */
.ticker-track > *{margin-right:34px;}
.ticker-chip{width:16px; height:8px; flex:0 0 auto; background:var(--neon); transform:skewX(-24deg);}
.ticker-chip--violet{background:var(--violet);}
@media (max-width:760px){
  .ticker{margin-top:-22px; transform:rotate(-2deg);}
  .ticker-track{padding:12px 0;}
  .ticker-track > *{margin-right:24px;}
  .ticker-word{font-size:.68rem; letter-spacing:.2em;}
}

/* =========================================================
   OUR WORK — each project is a paper poster taped to the wall,
   a little crooked; hovering straightens it and lifts it off.
========================================================= */
.filter-bar{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 44px;}
.filter-btn{
  font-family:var(--font); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:#000; border:2px solid var(--border-strong); color:var(--ink-soft);
  padding:8px 16px; cursor:pointer;
  transform:skewX(var(--skew));
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.filter-btn:hover{border-color:var(--neon); color:var(--neon);}
.filter-btn.active{background:var(--neon); border-color:#000; color:var(--bg); box-shadow:var(--shadow-hard-sm);}

.works-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:48px 34px;}
.work-card{
  --tilt:-1.2deg;
  position:relative; cursor:pointer; text-align:left;
  background:var(--paper); color:var(--bg);
  padding:10px 10px 14px;
  box-shadow:6px 6px 0 rgba(0,0,0,.55), 0 18px 28px rgba(0,0,0,.35);
  transform:rotate(var(--tilt));
  transition:transform .4s var(--spring), box-shadow .25s ease;
}
.work-card:nth-child(3n+2){--tilt:1deg;}
.work-card:nth-child(3n+3){--tilt:-.4deg;}
.work-card::before{
  content:""; position:absolute; z-index:2; top:-12px; left:50%; width:96px; height:24px;
  transform:translateX(-50%) rotate(-3deg);
  background:var(--tape);
  clip-path:polygon(3% 0, 97% 8%, 100% 100%, 0 90%);
}
.work-card:hover{
  transform:rotate(0) translateY(-8px);
  box-shadow:10px 10px 0 rgba(0,0,0,.55), 0 26px 36px rgba(0,0,0,.45);
}
.work-thumb-wrap{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; border:3px solid var(--bg);}
.work-thumb-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease);}
.work-card:hover .work-thumb-wrap img{transform:scale(1.05);}
.play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--neon); background:rgba(59,29,110,.45);
  opacity:0; transition:opacity .18s ease;
}
.work-card:hover .play-overlay, .work-card:focus-visible .play-overlay{opacity:1;}
.play-overlay svg{filter:drop-shadow(3px 3px 0 #000);}
.work-info{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px 0;}
/* single line, so every card is the same height and the grid never
   changes size when the filter swaps videos */
.work-info h3{
  font-size:1.3rem; line-height:1.1; color:var(--bg);
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* empty slot: keeps the 6-slot grid's size, shows nothing */
.work-slot{visibility:hidden; pointer-events:none;}
.works-more{display:flex; justify-content:center; margin-top:48px;}

/* "View all" overlay — a scrollable page of posters over the site */
html.no-scroll{overflow:hidden;}
.works-all-overlay{z-index:790; align-items:flex-start; padding:24px 16px;}
.works-all-panel{
  position:relative; width:100%; max-width:1180px; max-height:calc(100vh - 48px); overflow-y:auto;
  margin:0 auto; padding:34px 36px 56px;
  background:var(--bg-2); border:var(--edge) solid #000; border-top:6px solid var(--neon);
  box-shadow:10px 10px 0 rgba(0,0,0,.5);
}
.works-all-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:40px;}
.works-all-head .modal-close{position:static; flex:0 0 auto;}
.works-all-count{
  display:inline-block; margin-bottom:12px;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bg); background:var(--neon); padding:4px 10px;
  transform:skewX(var(--skew)); box-shadow:3px 3px 0 #000;
}
.works-all-head h3{
  font-size:clamp(2.2rem, 5vw, 3.8rem); line-height:.95;
  transform:skewX(-6deg); transform-origin:left bottom;
  text-shadow:3px 3px 0 var(--violet), 6px 6px 0 #000;
}
@media (max-width:640px){
  .works-all-overlay{padding:0;}
  .works-all-panel{max-height:100vh; height:100vh; padding:24px 18px 48px; border-left:0; border-right:0;}
}
.work-tag{
  flex:0 0 auto; white-space:nowrap;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--violet-ink); color:#fff; padding:4px 9px;
  transform:skewX(var(--skew));
}
.empty-msg{color:var(--ink-faint); font-size:.9rem;}

/* =========================================================
   ABOUT — photo as a taped polaroid; tools as a sticker-bombed set
   of labels in the palette colors.
========================================================= */
/* repeating logo stickers behind About, drifting diagonally very slowly.
   One 360px tile (assets/logo-pattern.webp, two die-cut stickers) repeated
   on an oversized layer that only moves via transform, so it never
   repaints; faded out at the top/bottom so the section edges stay soft */
.about-bg{
  position:absolute; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw;
  z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.about-bg-tile{
  position:absolute; top:-360px; left:-360px; right:0; bottom:0;
  background:0 0 / 360px 360px repeat;
  opacity:.14;
  animation:logo-drift 40s linear infinite;
  will-change:transform;
}
.about-bg.is-near .about-bg-tile{background-image:url("assets/logo-pattern.webp");}
@keyframes logo-drift{to{transform:translate3d(360px, 360px, 0);}}
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .about-photo-wrap{width:min(100%, 300px); margin:0 auto;}
}
.about-photo-wrap{position:relative; transform:rotate(-2.5deg); transition:transform .45s var(--spring);}
.about-photo-wrap:hover{transform:rotate(0) scale(1.02);}
.about-photo-wrap::before, .about-photo-wrap::after{
  content:""; position:absolute; z-index:2; top:-10px; width:90px; height:24px; background:var(--tape);
  clip-path:polygon(3% 0, 97% 8%, 100% 100%, 0 90%);
}
.about-photo-wrap::before{left:-18px; transform:rotate(-38deg);}
.about-photo-wrap::after{right:-18px; transform:rotate(38deg);}
.about-photo-clip{
  background:var(--paper); padding:12px 12px 52px;
  box-shadow:8px 8px 0 rgba(0,0,0,.55), 0 22px 34px rgba(0,0,0,.4);
}
/* square, like a real polaroid print */
.about-photo, .about-photo-placeholder{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:2px solid var(--bg);}
.about-photo-placeholder{background:linear-gradient(160deg, var(--violet-deep), var(--bg));}
/* bio sits on a dark plate so it reads cleanly over the drifting logos */
#about-text{
  margin-top:24px; max-width:58ch; padding:18px 22px;
  font-size:1rem; line-height:1.75; color:#ebe4f7;
  background:rgba(11,5,18,.86); border-left:4px solid var(--neon);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
}
/* score row: big leaning numbers, like a skate-game trick score */
.about-stats{display:flex; flex-wrap:wrap; row-gap:18px; margin-top:32px;}
.stat{display:flex; flex-direction:column; gap:8px; padding:0 28px; border-left:2px solid var(--border-strong);}
.stat:first-child{padding-left:0; border-left:0;}
.stat-num{
  display:inline-block; font-family:var(--font-display); font-size:clamp(2.4rem, 4.4vw, 3.4rem); line-height:.9;
  color:var(--neon); transform:skewX(-6deg); transform-origin:left bottom;
  text-shadow:3px 3px 0 var(--violet), 5px 5px 0 #000;
}
.stat-label{font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#cfc4e6;}
/* small CTA bar closing the section */
.about-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-top:72px; padding:24px 30px;
  background:rgba(11,5,18,.86); border:var(--edge) solid #000; border-left:6px solid var(--violet);
  box-shadow:var(--shadow-hard);
}
.about-cta p{
  font-family:var(--font-display); font-size:clamp(1.3rem, 2.4vw, 1.9rem); line-height:1.05; text-transform:uppercase;
  transform:skewX(-6deg); transform-origin:left bottom;
}
@media (max-width:640px){
  /* three equal columns side by side instead of wrapping one per line */
  .about-stats{display:grid; grid-template-columns:repeat(3, 1fr);}
  .stat{padding:0 10px;}
  .stat-num{font-size:2.1rem;}
  .stat-label{font-size:.56rem; letter-spacing:.1em; line-height:1.4;}
  .about-cta{flex-direction:column; align-items:flex-start; padding:22px 20px;}
}
.tool-badges{display:flex; flex-wrap:wrap; gap:14px 12px; margin-top:30px;}
.tool-badge{
  --tilt:-3deg;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--neon); color:var(--bg);
  border:2px solid #000; box-shadow:3px 3px 0 #000; padding:7px 13px;
  transform:rotate(var(--tilt));
  transition:transform .3s var(--spring);
}
.tool-badge:nth-child(4n+2){--tilt:2deg; background:var(--violet-ink); color:#fff;}
.tool-badge:nth-child(4n+3){--tilt:-1deg; background:var(--paper);}
.tool-badge:nth-child(4n+4){--tilt:3deg; background:#000; color:var(--neon); border-color:var(--neon);}
.tool-badge:hover{transform:rotate(0) scale(1.1);}

/* =========================================================
   CLIENTS / MARQUEE — avatars as round die-cut stickers
========================================================= */
/* no overflow:hidden here on purpose — the marquee below needs to bleed
   past this section's own boundaries out to the real viewport edges;
   main clips horizontally so there's no scrollbar risk */
.marquee-wrap{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  margin-top:48px; padding:18px 0;
  overflow-x:hidden; overflow-y:visible;
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
/* spacing is a right margin on each item (not flex gap / padding) so that
   -50% is exactly one set and the loop never jumps. Duration is set from
   JS (--marquee-dur) to keep a constant speed. */
.marquee-track{
  display:flex; width:max-content;
  animation:marquee var(--marquee-dur, 40s) linear infinite;
}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.client-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:150px; flex:0 0 auto; margin-right:44px;
}
.client-avatar, .client-avatar-fallback{
  width:104px; height:104px; border-radius:50%; margin-bottom:4px;
  border:4px solid var(--paper);
  box-shadow:4px 4px 0 #000;
  transition:transform .3s var(--spring), border-color .2s ease;
}
.client-avatar{object-fit:cover; background:var(--bg-3);}
.client-avatar-fallback{
  background:var(--violet-deep); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.7rem; color:var(--neon);
}
.client-item:nth-child(odd) .client-avatar, .client-item:nth-child(odd) .client-avatar-fallback{transform:rotate(-6deg);}
.client-item:nth-child(even) .client-avatar, .client-item:nth-child(even) .client-avatar-fallback{transform:rotate(5deg);}
.client-item:hover .client-avatar,
.client-item:hover .client-avatar-fallback{transform:rotate(0) scale(1.12); border-color:var(--neon);}
.client-name{
  font-size:.95rem; font-weight:700; color:var(--ink); text-align:center; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* follower / sales count as a small acid chip so it's readable at a glance */
.client-meta{
  font-size:.8rem; font-weight:700; letter-spacing:.04em; text-align:center;
  color:var(--bg); background:var(--neon); padding:2px 9px;
  transform:skewX(var(--skew));
}
@media (max-width:640px){
  .client-item{width:132px; margin-right:24px;}
  .client-avatar, .client-avatar-fallback{width:96px; height:96px;}
  .client-name{font-size:.92rem;}
  .client-meta{font-size:.8rem;}
}

/* =========================================================
   CTA BAND — the creative reel loops behind the call to action,
   darkened, tinted violet and softened so the copy and button
   stay the focus
========================================================= */
.cta-band{padding-top:30px; padding-bottom:90px;}
.cta-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg);
  border:var(--edge) solid #000; box-shadow:var(--shadow-hard);
  min-height:min(560px, 80vh); padding:96px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.cta-reel{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  /* the 480p source upscaled is already soft — no CSS blur, which would
     be recomputed on every video frame */
  opacity:.75; transition:opacity .6s ease;
}
.cta-card:hover .cta-reel{opacity:.95;}
/* dim + violet tint + darker edges, so the copy always reads on top */
.cta-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(11,5,18,.35), rgba(11,5,18,.85)),
    linear-gradient(rgba(59,29,110,.28), rgba(59,29,110,.28));
}
/* opens the full reel (Vimeo) in the video modal */
.cta-reel-label{
  position:absolute; top:18px; left:18px;
  font-family:var(--font); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bg); background:var(--neon); padding:7px 12px;
  border:2px solid #000; cursor:pointer;
  transform:skewX(var(--skew)); box-shadow:3px 3px 0 #000;
  transition:transform .1s var(--ease), box-shadow .1s var(--ease);
}
.cta-reel-label:hover{transform:skewX(var(--skew)) translate(-2px,-2px); box-shadow:5px 5px 0 #000;}
.cta-reel-label:active{transform:skewX(var(--skew)) translate(2px,2px); box-shadow:0 0 0 #000;}
.cta-card .cta-tag{font-family:var(--font-tag); opacity:1; font-size:clamp(1.2rem, 2.4vw, 1.6rem); color:var(--neon); transform:rotate(-4deg);}
.cta-card h2{
  font-size:clamp(2.4rem, 6vw, 4.4rem); line-height:.92; max-width:14ch;
  transform:skewX(-6deg);
  text-shadow:3px 3px 0 var(--violet), 6px 6px 0 #000;
}
.cta-card p{color:var(--ink); opacity:.8; font-size:1rem;}
.cta-card .btn-pill{margin-top:12px;}

/* =========================================================
   SCROLL REVEAL (classes added/removed by initReveal in script.js).
   Uses the individual translate / scale / rotate properties, so it
   stacks on top of each element's own transform (skews, tilts) instead
   of replacing it. `html .rv` outranks the elements' own transitions
   while the reveal runs; the classes are dropped right after.
========================================================= */
html .rv{
  transition:opacity .4s ease, translate .6s var(--spring), scale .55s var(--spring), rotate .55s var(--spring);
}
html .rv-slide:not(.is-in){opacity:0; translate:-56px 0;}
html .rv-slap:not(.is-in){opacity:0; scale:1.16; rotate:-5deg;}
html .rv-pop:not(.is-in){opacity:0; scale:.55; rotate:7deg;}
html .rv-rise:not(.is-in){opacity:0; translate:0 32px;}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{position:relative; z-index:1; border-top:var(--edge) solid #000; background:rgba(0,0,0,.35);}
.footer-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  max-width:1180px; margin:0 auto; padding:28px 32px;
}
.footer-mark{
  justify-self:start; display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:1.1rem; text-transform:uppercase;
  color:var(--ink-soft); transition:color .15s ease;
}
.footer-mark:hover{color:var(--neon);}
.footer-mark-logo{height:36px; width:auto; max-width:120px; object-fit:contain;}
.footer-social{justify-self:center; display:flex; gap:18px;}
.footer-social a{color:var(--ink-faint); transition:color .15s ease;}
.footer-social a:hover{color:var(--neon);}
.footer-copy{justify-self:end; font-size:.7rem; color:var(--ink-faint); text-align:right;}

@media (max-width:640px){
  .footer-inner{grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px;}
  .footer-mark, .footer-copy{justify-self:center; text-align:center;}
}

/* =========================================================
   MODALS — dark panels with an acid top bar
========================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:800; background:rgba(6,3,12,.8);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  position:relative; background:var(--bg-2);
  border:var(--edge) solid #000; border-top:6px solid var(--neon);
  width:100%; max-height:90vh; overflow-y:auto;
  padding:32px; box-shadow:10px 10px 0 rgba(0,0,0,.5);
}
.modal-close{
  position:absolute; top:18px; right:18px; width:34px; height:34px;
  background:#000; border:2px solid var(--border-strong); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transform:skewX(var(--skew));
  transition:color .15s ease, border-color .15s ease;
}
.modal-close:hover{color:var(--neon); border-color:var(--neon);}

.video-modal{max-width:820px; padding:0; overflow:hidden;}
.video-modal .modal-close{background:rgba(0,0,0,.6); border-color:rgba(255,255,255,.2); z-index:2;}
.modal-eyebrow{position:absolute; top:22px; left:24px; z-index:2; font-size:.78rem; font-weight:700; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6);}
.video-frame-wrap{aspect-ratio:16/9; background:#000;}
.video-frame-wrap iframe{width:100%; height:100%; border:0;}

.talk-modal{max-width:440px;}
.talk-modal h3{
  font-size:2rem; line-height:1; margin-bottom:10px;
  transform:skewX(-6deg); transform-origin:left bottom;
  text-shadow:2px 2px 0 var(--violet), 4px 4px 0 #000;
}
.modal-subtitle{color:var(--ink-soft); font-size:.86rem; margin-bottom:24px;}

.channel-list{display:flex; flex-direction:column; gap:10px;}
.channel-row{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--bg-3); border:2px solid var(--border);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.channel-row:hover{border-color:var(--neon); transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-sm);}
.channel-icon{
  width:36px; height:36px; background:rgba(204,255,0,.1); border:1px solid var(--neon);
  color:var(--neon); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transform:skewX(var(--skew));
}
/* the box leans with the menu; the glyph inside stands straight */
.channel-icon svg{transform:skewX(calc(var(--skew) * -1));}
.channel-label{flex:1; font-size:1.05rem; font-family:var(--font-display); letter-spacing:.03em;}
.channel-arrow{color:var(--ink-faint); transition:transform .15s ease;}
.channel-row:hover .channel-arrow{transform:translateX(3px); color:var(--neon);}

.admin-login{max-width:360px;}
.admin-login h3{margin-bottom:18px;}
.admin-error{color:#ff6b6b; font-size:.78rem; font-weight:700; margin-top:10px;}

.admin-panel{max-width:760px;}
.admin-panel h3{margin-bottom:18px;}
.admin-tabs{display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:22px; flex-wrap:wrap;}
.admin-tab-btn{
  font-family:var(--font); font-size:.74rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  background:transparent; color:var(--ink-faint); border:none;
  padding:10px 14px; cursor:pointer;
}
.admin-tab-btn.active{color:var(--neon); box-shadow:inset 0 -3px 0 var(--neon);}
.admin-tab-panel{display:none;}
.admin-tab-panel.active{display:block;}
.admin-tab-panel h4{font-family:var(--font-display); font-size:.92rem; margin:22px 0 4px; color:var(--ink); text-transform:uppercase;}
.admin-tab-panel h4:first-child{margin-top:0;}
.save-btn{margin-top:14px;}

label{display:block; font-size:.74rem; font-weight:700; margin-top:10px; color:var(--ink-soft);}
.input-field, .textarea-field{
  font-family:var(--font); font-size:.86rem;
  width:100%; padding:10px 12px; margin:5px 0 10px;
  border:2px solid var(--border-strong);
  background:var(--bg-3); color:var(--ink);
}
.input-field:focus, .textarea-field:focus{outline:2px solid var(--neon); outline-offset:1px;}

.editor-row{
  display:flex; gap:8px; align-items:center; background:var(--bg-3); border:2px solid var(--border);
  padding:8px; margin-bottom:8px; flex-wrap:wrap;
}
.editor-row input{flex:1; min-width:120px; margin:0;}
/* admin: work blocks + category chips */
.work-editor{background:var(--bg-3); border:2px solid var(--border); padding:14px; margin-bottom:12px;}
.we-top{display:flex; gap:12px; align-items:center;}
.we-thumb{flex:0 0 112px; aspect-ratio:16/9; background:#000; border:2px solid #000; overflow:hidden;}
.we-thumb img{width:100%; height:100%; object-fit:cover;}
.we-fields{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.we-fields .input-field{margin:0;}
.we-label{margin:14px 0 8px; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.new-work-cats{margin-bottom:14px;}
.cat-picker{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.cat-chip{
  font-family:var(--font); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; cursor:pointer;
  background:#000; color:var(--ink-soft); border:2px solid var(--border-strong);
  transform:skewX(var(--skew));
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cat-chip:hover{border-color:var(--neon); color:var(--ink);}
.cat-chip.on{background:var(--violet); color:#fff; border-color:#000; box-shadow:2px 2px 0 #000;}
.cat-new{
  width:150px; padding:6px 9px; font-family:var(--font); font-size:.74rem;
  background:var(--bg-2); color:var(--ink); border:2px dashed var(--border-strong);
}
.cat-new:focus{outline:2px solid var(--neon); outline-offset:1px; border-style:solid;}
.cat-add{
  font-family:var(--font); font-size:.68rem; font-weight:700; text-transform:uppercase; cursor:pointer;
  padding:6px 10px; background:transparent; color:var(--neon); border:2px solid var(--neon);
}
.we-actions{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap;}
.we-spacer{flex:1;}
.we-move{margin:0; padding:5px 11px; font-size:.9rem; line-height:1;}
.we-move:disabled{opacity:.3; cursor:default;}
.we-move:disabled:hover{border-color:var(--border-strong); color:var(--ink-soft);}
@media (max-width:520px){
  .we-top{flex-direction:column; align-items:stretch;}
  .we-thumb{flex-basis:auto; width:100%;}
}
.editor-check{display:flex; align-items:center; gap:7px; margin:0; font-size:.74rem; color:var(--ink-soft); cursor:pointer; white-space:nowrap;}
.editor-check input, .editor-row .editor-check input{flex:0 0 auto; min-width:0; width:16px; height:16px; accent-color:var(--neon);}
.admin-tab-panel > .editor-check{margin:4px 0 14px;}
.editor-row .row-remove, .work-editor .row-remove{
  background:transparent; color:#ff6b6b; border:2px solid rgba(255,107,107,.4);
  padding:7px 12px; cursor:pointer; font-family:var(--font); font-weight:700; font-size:.72rem;
}

/* visible keyboard focus for accessibility */
a:focus-visible, button:focus-visible, .work-card:focus-visible, .filter-btn:focus-visible{
  outline:2px solid var(--neon); outline-offset:2px;
}

/* admin: save feedback (saves go to the server and are live for everyone) */
.save-status{
  position:fixed; left:50%; bottom:18px; z-index:9000;
  translate:-50% 140%; opacity:0; pointer-events:none;
  font:700 12px/1 var(--font); letter-spacing:.06em; text-transform:uppercase;
  padding:10px 14px; background:var(--bg-3); color:var(--ink);
  border:2px solid var(--border-strong); box-shadow:var(--shadow-hard-sm);
  transition:translate .25s var(--ease), opacity .25s var(--ease);
}
.save-status.show{translate:-50% 0; opacity:1;}
.save-status[data-kind="ok"]{border-color:var(--neon); color:var(--neon);}
.save-status[data-kind="error"]{border-color:#ff4d6d; color:#ffb3c1;}