/* ============================================================
   Lemonspace — implementation of Lemonspace.dc.html
   Every value here is carried over from the design source.
   ============================================================ */

/* ── typefaces, self-hosted ──────────────────────────────────
   Served from this origin rather than fonts.googleapis.com: no
   third party has to stay online for the site to look right, no
   request leaks a visitor's IP to Google (which German courts
   have held to breach GDPR), and one render-blocking round trip
   to an external host disappears. 144 KB total, cached forever.

   Both faces are variable — one file covers 400–700.
   Thai text has no coverage in either family and falls back to
   the system font, exactly as it did before.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0B0B0B;
  --panel: #141414;
  --panel-2: #0E0E0E;
  --field: #1A1A1A;
  --pop: #171717;
  --text: #F2F0EB;
  --muted: #8A8A85;
  /* Lifted from the design's #5C5C58, which measured 2.74:1 on the card
     background — well under the 4.5:1 WCAG AA wants, on 9.5px labels.
     #848480 keeps the same warm grey and measures 4.9:1. */
  --dim: #848480;
  --soft: #B9B9B4;
  --accent: #f8981c;
  --green: #4ADE80;
  --red: #F87171;
  --line: rgba(242, 240, 235, 0.14);
  --line-soft: rgba(242, 240, 235, 0.1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav: 64px;

  /* Layout scale. The bands share these so the vertical rhythm stays
     proportional from a 1280×720 laptop to a 4K panel.

     The vertical values are bounded by BOTH axes. `vw` alone is what made
     the section breaks read as empty screens on a large monitor: a gap
     sized off the width knows nothing about how much height is left to
     fill, so 6vw on a 2560px-wide screen opened a hole a short screen
     would never have shown. min(vw, vh) lets whichever axis is tighter
     win, and the clamp caps both ends. */
  --gutter: clamp(20px, 4vw, 44px);
  --gutter-wide: clamp(20px, 6vw, 110px);
  --band: clamp(38px, min(5vw, 6.5vh), 76px);
  --band-lg: clamp(52px, min(7.5vw, 11vh), 112px);
  --shell: 1560px;
}

@media (max-width: 640px) {
  :root { --nav: 50px; }
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

#app { display: flex; flex-direction: column; min-height: 100svh; }
#app > footer { margin-top: auto; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

/* Watch controls are <a> when the work has a link and <button> when it does
   not — see App.watchEl. Styling is by class, but the generic `a:hover`
   above would repaint the whole card orange on hover, and a <button> that
   became an <a> would inherit the wrong display and text alignment. Pin
   both so the two versions are indistinguishable. */
a.reel-btn, a.case-play, a.clip, a.ep, a.frame {
  color: inherit;
  text-decoration: none;
  font: inherit;
  text-align: left;
}
a.reel-btn:hover, a.case-play:hover, a.clip:hover, a.ep:hover, a.frame:hover { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

button { font-family: inherit; font-variant-numeric: tabular-nums; }
input, select, textarea { font-family: inherit; font-variant-numeric: tabular-nums; }

/* ── animation ───────────────────────────────────────────── */

@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
@keyframes cueFade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes cueRun { 0% { transform: translateY(-16px); } 70%, 100% { transform: translateY(38px); } }
@keyframes selPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.fade-in { animation: fadeIn 400ms ease both; }

/* Transitions off while #app is being rebuilt.

   Every state change replaces the whole tree, so the scroll-driven styles
   are written to brand-new nodes: .reveal starts at opacity 0 in CSS and
   revealTick() immediately sets it to 1, which the browser reads as a
   change worth animating. The result was the entire contact section fading
   and sliding in again on every character typed — 780ms of it, per
   keystroke, which reads as the page reloading under you.

   js/app.js adds this before writing the markup and removes it after the
   new values have been flushed, so they land as the starting style rather
   than as something to animate towards. */
.no-anim, .no-anim * { transition: none !important; }

/* ── a11y utilities ──────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 100px;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms ease;
}
.skip-link:focus { transform: none; color: var(--ink); }

/* The browser default outline is nearly invisible on this palette. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero-h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(48px, 9vw, 96px) 24px;
  text-align: center;
}
.empty-state strong {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: -0.01em;
}
.empty-state span { font-size: 13.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── shared type ─────────────────────────────────────────── */

.eyebrow {
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow-row { display: flex; align-items: center; gap: 10px; }
.eyebrow-row.baseline { align-items: baseline; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; flex: 0 0 6px; }
.dot.sm { width: 5px; height: 5px; flex: 0 0 5px; }
.dot.lg { width: 7px; height: 7px; flex: 0 0 7px; }

.display {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.pill-btn {
  height: 42px;
  padding: 0 22px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.28);
  background: none;
  color: var(--text);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 220ms ease;
}
.pill-btn:hover { border-color: var(--accent); color: var(--accent); }

.solid-btn {
  height: 46px;
  padding: 0 24px;
  border-radius: 100px;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}
.solid-btn:hover { opacity: 0.85; }

/* ── hover cursor chip ───────────────────────────────────── */


/* ── nav ─────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 44px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 400ms ease, border-color 400ms ease;
}
.nav.scrolled {
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(242, 240, 235, 0.12);
}
.nav-inner { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 3.4vw, 46px); }

.nav-logo {
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: opacity 220ms ease;
}
.nav-logo:hover { opacity: 0.75; }
.nav-logo img { display: block; height: 11px; width: 85px; }

.nav-link {
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--muted);
  font-family: Outfit, sans-serif;
  font-size: clamp(9.5px, 2.6vw, 12px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 250ms ease;
}
.nav-link:hover, .nav-link.on { color: var(--text); }

.close-view {
  position: fixed;
  top: calc(var(--nav) + 12px);
  right: clamp(12px, 3vw, 32px);
  z-index: 98;
  width: clamp(38px, 10vw, 46px);
  height: clamp(38px, 10vw, 46px);
  border-radius: 50%;
  border: 1px solid rgba(242, 240, 235, 0.3);
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
/* Entrance animations live on .pop-in, never in the base rule. #app is
   rebuilt on every state change — every keystroke in a form — so an
   animation in the base rule replays each time and reads as the page
   reloading. js/app.js `appeared()` adds the class on arrival only. */
.close-view.pop-in { animation: fadeIn 300ms ease both; }
.close-view:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ── hero ────────────────────────────────────────────────── */

.hero-track { height: 186vh; position: relative; }
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media { position: absolute; inset: -6% -2%; will-change: transform; }
/* With no showreel uploaded the slot fell back to --panel, and a #141414
   rectangle with the striped "drop an image" placeholder read as a grey box
   someone forgot to fill — behind the logo, on the first screen. Black is the
   deliberate empty state: the lockup sits on nothing, and the veil that exists
   to darken footage has no footage to darken. The placeholder still shows in
   the admin, which is where knowing the slot is empty is the point. */
.hero-media .slot { background: #000; }
.hero-media .slot-ph { display: none; }
.hero-media .slot:not([data-filled]) ~ .hero-veil { opacity: 0; }
.hero-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(11, 11, 11, 0.28) 0%, rgba(11, 11, 11, 0.62) 60%, rgba(11, 11, 11, 0.9) 100%);
  pointer-events: none;
}
.hero-ring {
  position: absolute;
  top: -16vw;
  right: -10vw;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  border: 1px solid rgba(248, 152, 28, 0.3);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  bottom: -22vw;
  left: -14vw;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 152, 28, 0.14) 0%, rgba(248, 152, 28, 0) 68%);
  pointer-events: none;
}
.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  will-change: transform, opacity;
}
/* Only on the first arrival — app.js adds .intro once per visit. Leaving the
   animation on .hero-text restarted it on every re-render, so the logo
   re-bounced whenever scrolling flipped the nav state. */
.hero-text.intro { animation: riseIn 800ms var(--ease) both; }
.hero-lockup {
  display: inline-block;
  transform-origin: 50% 60%;
  transform: scale(1);
  transition: transform 620ms var(--ease);
}
.hero-lockup:hover { transform: scale(1.035); }
.hero-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; }
.hero-eyebrow span:last-child {
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.hero-logo {
  display: block;
  width: min(76vw, 860px);
  height: auto;
  margin: 0 auto;
  transform-origin: 50% 50%;
  transform: scale(1);
  transition: transform 620ms var(--ease);
}
.hero-lockup:hover .hero-logo { transform: scale(1.035); }

.reel-btn {
  margin: 46px auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text);
}
.reel-btn:hover { opacity: 0.72; }
.reel-ring {
  width: 52px;
  height: 52px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-tri {
  width: 0;
  height: 0;
  border-left: 9px solid var(--accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.reel-label { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }

.sound-btn {
  position: absolute;
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  right: clamp(20px, 4vw, 44px);
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  opacity: 0.45;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sound-btn:hover { opacity: 1; }

.scroll-cue {
  position: absolute;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  animation: bob 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.scroll-cue-label {
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  animation: cueFade 2.6s ease-in-out infinite;
}
.scroll-cue-rail {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  background: rgba(242, 240, 235, 0.16);
  overflow: hidden;
}
.scroll-cue-rail span {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, rgba(248, 152, 28, 0), var(--accent));
  animation: cueRun 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── work grid ───────────────────────────────────────────── */

.work-sheet {
  position: relative;
  z-index: 3;
  background: var(--ink);
  margin-top: -84vh;
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  padding: clamp(44px, 6vw, 76px) 0 0;
  box-shadow: 0 -40px 80px rgba(11, 11, 11, 0.9);
}
/* Carries the gap to the grid on its own now that the home page has no
   filter row underneath it. */
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  padding: 0 var(--gutter) clamp(22px, 3.4vh, 42px);
}
.work-lede {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
  text-wrap: pretty;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: clamp(30px, 4vw, 48px) clamp(20px, 4vw, 44px) clamp(26px, 3vw, 40px);
}
.filter {
  height: 34px;
  padding: 0 15px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all 220ms ease;
}
.filter.on { border-color: var(--accent); background: var(--accent); color: var(--ink); }

.tile-grid {
  display: grid;
  /* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a
     category holding one project stretched that single tile across the
     whole row — every group on /work ended up a different tile size and a
     different height, which is what made the spacing between them look
     random. auto-fill keeps the tracks, so every group shares one rhythm
     no matter how much work is in it. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(320px, 30vw, 620px)), 1fr));
  gap: var(--grid-gap, 2px);
}
/* The floor belongs to the empty state, not the grid: on the grid it padded
   every short group with dead space and threw the group rhythm out again. */
.tile-grid.archive .empty-state { min-height: 34vh; justify-content: center; }

.tile {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background: var(--panel);
  opacity: 1;
  transition: opacity 400ms var(--ease);
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
/* Hover dim, in CSS rather than JS classes.
   The classes were added by listeners wired up after each render, so closing
   a project rebuilt the grid with every tile at full opacity and only dimmed
   the neighbours once the pointer registered again — a visible flash of a
   flat grid, every time you pressed ✕. `:has()` is evaluated on the first
   style pass, so the dim is already correct in the frame the tile appears,
   and there is nothing to re-apply. */
@media (hover: hover) and (pointer: fine) {
  .tile-grid:has(.tile:hover) .tile:not(:hover) { opacity: 0.55; }
}
.tile-media { position: absolute; inset: 0; transform: scale(1); transition: transform 900ms var(--ease); }
.tile:hover .tile-media { transform: scale(1.03); }
.tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 42%, rgba(11, 11, 11, 0.85) 100%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.tile:hover .tile-shade { opacity: 1; }
.tile-badge {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  left: clamp(16px, 2vw, 24px);
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  background: rgba(11, 11, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 5px 11px 5px 9px;
}
.tile-badge span:last-child {
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

/* Awards sit opposite the category so neither displaces the other, and they
   carry the prize money: "฿150,000" is the part a client reads, and it was
   previously buried in a title attribute no touch device can open. */
/* One line where it fits, two where it does not — driven by the content and
   the tile's own width rather than a breakpoint, because both vary: a 640px
   tile on a 4K grid and a 375px tile on a phone hold the same chip, and
   "Featured on Apple.com" is three times the length of "฿80,000". Wrapping
   beats truncating here: an award chip that ends in "…" is worse than one
   that takes a second line. */
.tile-award {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  right: clamp(16px, 2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1px 7px;
  /* Leaves the category chip its half of the tile. */
  max-width: min(60%, calc(100% - clamp(34px, 5vw, 56px)));
  padding: 5px 11px 6px 9px;
  border-radius: 12px;
  border: 1px solid rgba(233, 195, 112, 0.45);
  background: linear-gradient(140deg, rgba(62, 47, 18, 0.88) 0%, rgba(24, 19, 8, 0.9) 100%);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 235, 184, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #EFCF8C;
  line-height: 1.25;
  text-align: right;
  pointer-events: none;
}
/* The trophy never leaves the amount's side. */
.tile-award-lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tile-award svg { flex: 0 0 auto; }
.tile-award-prize {
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tile-award-place {
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 200, 138, 0.75);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Flat gold reads as yellow; the gradient is what makes it read as metal.
   Guarded, because the fallback for an unsupported background-clip is
   transparent text — an award that vanishes rather than merely dulls. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tile-award-prize {
    background: linear-gradient(180deg, #FFF3CF 0%, #F0CE86 46%, #C79539 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.tile-meta i {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}
.tile-meta i::before { content: ' · '; color: var(--muted); font-weight: 500; }
.tile-cap {
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 22px);
  /* Name on the left, how much is inside on the right. */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  pointer-events: none;
  /* Readable by default. The reveal-on-hover below is an enhancement for
     pointer devices only — it used to be unconditional, which left a phone
     showing a grid of unlabelled images, since touch has no hover. */
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 400ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tile-cap { opacity: 0; transform: translateY(8px); }
  .tile:hover .tile-cap,
  .tile:focus-visible .tile-cap { opacity: 1; transform: translateY(0); }
}
/* Without hover the shade has to carry the text, so keep it on. */
@media not all and (hover: hover) {
  .tile-shade { opacity: 1; }
}
/* Both are spans (a <button> may only contain phrasing content), so they
   need an explicit block display — inline elements ignore margin-top. */
.tile-client {
  display: block;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.tile-cap-main { min-width: 0; flex: 1 1 auto; }
.tile-meta {
  display: block;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 9px;
}
/* The count of what is inside a collection or a series. Right-aligned and
   set apart from the title, so it reads as a quantity rather than as more
   of the name. */
.tile-count {
  flex: 0 0 auto;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  padding-bottom: 1px;
}

/* The home grid is a sample, not the catalogue: one way out of it, straight
   to /work. "Load more" grew the page in place and left the visitor further
   from About and Contact every time they pressed it. */
.work-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(30px, 4.6vh, 52px) var(--gutter) 0;
}
.work-more-note {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}

/* ── studio / services band ──────────────────────────────── */

.studio-wrap { position: relative; z-index: 3; background: var(--ink); }
.studio-panel {
  /* One variable, so the breakpoints below retune the band without having
     to restate the pinned rule's arithmetic. */
  --pad-y: var(--band-lg);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--pad-y) var(--gutter-wide);
  overflow: hidden;
}
/* Pinned flush to the top of the screen, the band's first pixel sits under
   the fixed nav, so the visible space above the content was one nav-height
   shorter than the space below it. js/app.js sets --nav-offset to however
   much of the nav actually covers the band — the whole nav when the band
   fills the screen, nothing once it is capped and floating clear of it. */
.studio-wrap.pinned .studio-panel { padding-top: calc(var(--pad-y) + var(--nav-offset, 0px)); }
.studio-grid {
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 2.4vw, 44px);
  align-items: start;
}
.studio-col { display: flex; flex-direction: column; min-width: 0; gap: clamp(18px, 2.2vw, 26px); }
.studio-heading {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: pretty;
  max-width: 19ch;
}
.studio-blurb {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  max-width: 44ch;
  text-wrap: pretty;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 780ms var(--ease), transform 780ms var(--ease);
}
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }

.kpi-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 18px clamp(18px, 2.2vw, 34px);
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 1.8vw, 22px);
  margin-top: clamp(2px, 0.6vw, 8px);
  /* Dim, not absent. The numbers are scroll-driven, and a block that starts
     at zero opacity leaves a hole where the visitor cannot tell there is
     anything to scroll for. Same reasoning as the service rows. */
  opacity: 0.3;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.kpi { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kpi-value {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.kpi-label {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.studio-cta {
  align-self: flex-start;
  margin-top: clamp(4px, 0.8vw, 10px);
  height: 44px;
  padding: 0 22px;
  border-radius: 100px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Dim but present from the start, and always clickable: the reveal is a
     reward for scrolling, not a gate. Opacity is the only thing the scroll
     effect writes here — the reveal used to animate `transform` too, and an
     inline transform outranks the stylesheet, which is why the hover used
     to fight it and drift upward. */
  opacity: 0.32;
  transform: none;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  transition: transform 320ms var(--ease), box-shadow 320ms ease;
}
/* Grows from its own centre — no lift, so it does not walk up the page. */
.studio-cta:hover,
.studio-cta:focus-visible {
  transform: scale(1.045);
  box-shadow: 0 12px 34px rgba(248, 152, 28, 0.32);
}

.svc-col { display: flex; flex-direction: column; min-width: 0; gap: clamp(14px, 1.6vw, 18px); width: 100%; }
.svc-rail { width: min(100%, 640px); margin-left: max(0px, min(100% - 640px, (100vw - 1000px) * 999)); }
.svc-list { display: flex; flex-direction: column; }
.svc-row {
  border-top: 1px solid var(--line);
  padding: clamp(11px, 1.3vw, 15px) 0;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  will-change: opacity, transform;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease), border-color 320ms ease;
  width: 100%;
}
.svc-row:hover { border-color: rgba(248, 152, 28, 0.5); }
.svc-icon { flex: 0 0 auto; color: var(--accent); display: flex; padding-top: 3px; transition: transform 380ms var(--ease); }
.svc-row:hover .svc-icon { transform: translateX(3px) scale(1.1); }
.svc-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.svc-name { font-family: Outfit, sans-serif; font-weight: 500; font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -0.01em; }
.svc-detail { font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.svc-tail {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(12px, 1.4vw, 16px) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  will-change: opacity, transform;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  width: 100%;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  border-bottom: 1px solid rgba(248, 152, 28, 0.4);
}

/* ── contact ─────────────────────────────────────────────── */

/* The last screen of the home page: heading, form, contact panel and footer
   have to finish inside one viewport, or scrolling to the end leaves the
   heading cut off behind the nav with nothing below it to scroll to. So the
   rhythm here is driven by the height that is left rather than the width. */
.contact-band {
  position: relative;
  z-index: 3;
  background: var(--ink);
  padding: 0 var(--gutter-wide) clamp(30px, 4.6vh, 76px);
  overflow: hidden;
}
.contact-glow {
  position: absolute;
  bottom: -12vw;
  left: -10vw;
  width: 26vw;
  height: 26vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 152, 28, 0.1) 0%, rgba(248, 152, 28, 0) 70%);
  pointer-events: none;
}
.contact-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.contact-heading {
  margin: clamp(16px, 2.8vh, 36px) 0 0;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(30px, min(4.6vw, 6.2vh), 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  position: relative;
}
.contact-cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 3.4vw, 64px);
  margin-top: clamp(24px, 4vh, 56px);
  position: relative;
}
.contact-form-col { flex: 1 1 min(100%, 420px); min-width: 0; }
.contact-side { flex: 0 1 340px; min-width: min(100%, 300px); }

.draft-banner {
  position: fixed;
  top: var(--nav);
  left: 0;
  right: 0;
  z-index: 97;
  background: rgba(248, 152, 28, 0.92);
  color: var(--ink);
  padding: 8px clamp(20px, 4vw, 44px);
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.field-error { font-size: 12px; color: var(--red); line-height: 1.4; }
.line-input.invalid,
.line-input.invalid:focus { border-bottom-color: var(--red); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: flex; flex-wrap: wrap; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.half { flex: 1 1 200px; }
.field-label {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.line-input {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(242, 240, 235, 0.24);
  color: var(--text);
  font-size: 15px;
  padding: 6px 0;
  outline: none;
  border-radius: 0;
}
.line-input:focus { border-bottom-color: var(--accent); }
textarea.line-input { resize: none; line-height: 1.6; }

.form-sent {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.3;
  animation: fadeIn 500ms ease both;
}

.contact-list { display: flex; flex-direction: column; gap: clamp(15px, 1.8vw, 20px); }
.contact-item { display: flex; align-items: center; gap: 13px; }
.contact-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(248, 152, 28, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.contact-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.contact-key {
  font-family: Outfit, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.contact-val { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-val.plain { color: var(--muted); }

/* ── select ──────────────────────────────────────────────── */

.select { display: flex; flex-direction: column; gap: 9px; position: relative; }
.select-label {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(242, 240, 235, 0.24);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color 200ms ease;
}
.select.open .select-trigger { border-bottom-color: var(--accent); }
.select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-caret { flex: 0 0 11px; transition: transform 220ms var(--ease); }
.select.open .select-caret { transform: rotate(180deg); }
.select-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 8px;
  z-index: 70;
  background: var(--pop);
  border: 1px solid rgba(242, 240, 235, 0.16);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.62);
  max-height: min(52vh, 330px);
  overflow: auto;
}
.select-pop.pop-in { animation: selPop 150ms var(--ease) both; }
.select-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  color: var(--soft);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease;
}
.select-opt:hover { background: rgba(242, 240, 235, 0.08); }
.select-opt.on { background: rgba(248, 152, 28, 0.1); color: var(--text); }
.select-opt svg { flex: 0 0 13px; opacity: 0; }
.select-opt.on svg { opacity: 1; }
.select-opt span { flex: 1 1 auto; }

/* ── archive ─────────────────────────────────────────────── */

/* One value for every gap between groups. Uneven spacing on /work was never
   this margin — it was the grid stretching short groups (see .tile-grid). */
.archive-group { margin-top: clamp(38px, min(5vw, 7vh), 64px); }
.archive-group:first-of-type { margin-top: clamp(4px, 1vw, 10px); }
.archive-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(20px, 4vw, 44px) clamp(14px, 1.8vw, 20px);
}
.archive-group-title {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}

/* Every screen that hangs a decorative corner off its edge.

   The rings and glows are positioned with negative viewport offsets, which
   is how /contact came to scroll sideways at 1366px and on a phone: the
   ring reached past the page's edge, and `overflow-x: hidden` on <body>
   does not stop the document reporting that overflow. `clip` rather than
   `hidden` — it clips without turning the element into a scroll container,
   so the form's dropdowns still open past the bottom edge. */
.masthead,
.studio-page-head,
.contact-page,
.episode-head { overflow-x: clip; }

.archive-head {
  padding: 0 clamp(20px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.archive-title { font-size: clamp(34px, 5.6vw, 76px); }
.corner-ring {
  position: absolute;
  top: -8vw;
  right: -8vw;
  width: 26vw;
  height: 26vw;
  border-radius: 50%;
  border: 1px solid rgba(248, 152, 28, 0.22);
  pointer-events: none;
}
.corner-glow {
  position: absolute;
  top: -6vw;
  right: -7vw;
  width: 24vw;
  height: 24vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 152, 28, 0.12) 0%, rgba(248, 152, 28, 0) 70%);
  pointer-events: none;
}
.corner-glow.left { top: -7vw; left: -9vw; right: auto; background: radial-gradient(circle, rgba(248, 152, 28, 0.1) 0%, rgba(248, 152, 28, 0) 70%); }

/* ── case study ──────────────────────────────────────────── */

.case-hero { padding-top: var(--nav); background: #000; }
.case-hero-media { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.case-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 11, 0.35);
  cursor: pointer;
  transition: all 220ms ease;
}
.case-play:hover { background: var(--accent); }
.case-play i {
  width: 0;
  height: 0;
  border-left: 11px solid var(--accent);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 4px;
}

.fact-bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding: 18px clamp(20px, 4vw, 44px);
  gap: 18px 40px;
}
.fact { flex: 1 1 130px; }
.fact-k {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact-v {
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 7px;
}

.case-body {
  padding: clamp(40px, 5vw, 68px) clamp(20px, 4vw, 44px) clamp(56px, 7vw, 96px);
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 68px);
}
.case-main { flex: 1 1 min(100%, 420px); min-width: 0; }
.case-title { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.02; max-width: 16ch; }
.case-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 38px);
  margin-top: clamp(28px, 3.4vw, 44px);
  max-width: 62ch;
}
.case-section-label { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.case-section-label span:last-child {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-copy { margin: 0; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.credit-row {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.credit-role { font-size: 13px; color: var(--muted); }
.credit-name { font-size: 13px; }

.case-gallery {
  flex: 1 1 min(100%, 400px);
  min-width: 0;
  max-width: 660px;
  align-self: flex-start;
  position: sticky;
  top: 88px;
}
.gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 8px;
  margin-top: 14px;
}
.bts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--panel);
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: opacity 220ms ease;
}
.frame:hover { opacity: 0.78; }
.frame.bts { aspect-ratio: 4 / 3; }
.frame-label {
  position: absolute;
  left: 8px;
  bottom: 7px;
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(11, 11, 11, 0.7);
  border-radius: 3px;
  padding: 2px 6px;
}

.pager { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; }
.pager-btn {
  flex: 1 1 300px;
  text-align: left;
  background: none;
  border: 0;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 44px);
  cursor: pointer;
  color: var(--text);
  transition: background 250ms ease;
}
.pager-btn:first-child { border-right: 1px solid var(--line); }
.pager-btn.next { text-align: right; }
.pager-btn:hover { background: var(--panel); }
.pager-kicker {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pager-title {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.1;
  margin-top: 12px;
  letter-spacing: -0.02em;
}

/* ── channel / program ───────────────────────────────────── */

.masthead {
  padding: calc(var(--nav) + clamp(40px, 6vw, 72px)) clamp(20px, 4vw, 44px) 0;
  position: relative;
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
}
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 40px);
  position: relative;
}
.avatar {
  width: clamp(88px, 9vw, 124px);
  height: clamp(88px, 9vw, 124px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(248, 152, 28, 0.4);
  flex: 0 0 auto;
}
.masthead-body { flex: 1 1 300px; min-width: 0; }
.kind-label {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.chan-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead-blurb {
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;
  position: relative;
}

.section-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.section-bar .cap,
.section-bar .cap-muted {
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-bar .cap-muted { color: var(--muted); }

.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(230px, 20vw, 320px)), 1fr));
  gap: clamp(14px, 2vw, 26px);
}
.clip {
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.clip-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--panel);
  overflow: hidden;
  border-radius: 6px;
}
.clip-runtime {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(11, 11, 11, 0.82);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.clip-title { display: block; font-family: Outfit, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.35; }
.clip-role { display: block; font-size: 12px; color: var(--muted); }
.clip-views {
  font-style: normal;
  color: var(--accent);
  font-family: Outfit, sans-serif;
  font-weight: 500;
}
.clip-views::before { content: ' · '; color: var(--muted); }

.list-block-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Home-page work grid picker */
.grid-picker { display: flex; flex-direction: column; gap: 6px; }
.grid-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  background: var(--field);
  border: 1px solid rgba(242, 240, 235, 0.12);
  border-radius: 9px;
  /* Relative so the drop-indicator pseudo-element positions against it. The
     grip, cursor, dragging and drop-line styles are shared with the Work
     screen — see the .work-grip / .work-row block. */
  position: relative;
}
.grid-row-n {
  flex: 0 0 22px;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
}
.grid-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Outfit, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-add { display: flex; flex-direction: column; gap: 7px; padding-top: 6px; }
.icon-btn[disabled] { opacity: 0.3; cursor: default; }
.icon-btn[disabled]:hover { border-color: rgba(242, 240, 235, 0.16); color: var(--muted); }

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.4vw, 34px) clamp(16px, 2vw, 26px);
}
.ep {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
  cursor: pointer;
  color: var(--text);
  opacity: 1;
  transition: opacity 240ms ease;
}
.ep.locked { cursor: default; opacity: 0.5; }
.ep-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 6px;
  overflow: hidden;
}
.ep-cta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(11, 11, 11, 0.82);
  border-radius: 4px;
  padding: 3px 7px;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ep.locked .ep-cta { color: var(--dim); }
.ep-no {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ep-no i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: block; }
.ep-title { display: block; font-family: Outfit, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.ep-summary { display: block; font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

.back-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}
.back-link:hover { color: var(--accent); }

.ep-clip-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(248, 152, 28, 0.85);
  background: rgba(11, 11, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-clip-play i {
  width: 0;
  height: 0;
  border-left: 7px solid var(--accent);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
}
.tag {
  border: 1px solid rgba(242, 240, 235, 0.2);
  border-radius: 100px;
  padding: 4px 10px;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── studio page ─────────────────────────────────────────── */

.studio-page-head {
  padding: calc(var(--nav) + clamp(50px, 7vw, 96px)) clamp(20px, 6vw, 110px) 0;
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.studio-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(24px, 3vw, 36px);
  position: relative;
}
.studio-hero h1 { flex: 2 1 min(100%, 560px); font-size: clamp(32px, 5.2vw, 72px); line-height: 1.02; }
.studio-hero-col { flex: 1 1 min(100%, 320px); display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.studio-hero-col p:first-child { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.studio-hero-col p:last-child { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

.studio-section {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 6vw, 110px) 0;
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
}
.studio-section.tight { padding-top: clamp(48px, 7vw, 96px); }
.section-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(242, 240, 235, 0.12);
}
.section-rule-left { display: flex; align-items: center; gap: 11px; }
.section-rule-left i { color: var(--accent); display: flex; }
.section-rule-left span {
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-rule-note { font-size: 13px; color: var(--muted); }

.set-shot { width: 100%; aspect-ratio: 2.4 / 1; border-radius: 14px; overflow: hidden; }

.stage-list { display: flex; flex-direction: column; margin-top: clamp(28px, 3.4vw, 42px); }
.stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(18px, 2.4vw, 34px);
}
.stage-rail { display: flex; flex-direction: column; align-items: center; }
.stage-badge {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid rgba(248, 152, 28, 0.35);
  background: rgba(248, 152, 28, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: transform 380ms var(--ease), background 380ms ease, border-color 380ms ease;
}
.stage:hover .stage-badge {
  transform: scale(1.14);
  background: rgba(248, 152, 28, 0.16);
  border-color: rgba(248, 152, 28, 0.75);
}
.stage-line {
  flex: 1 1 auto;
  width: 1px;
  min-height: 18px;
  background: linear-gradient(180deg, rgba(248, 152, 28, 0.3), rgba(242, 240, 235, 0.05));
  display: block;
}
.stage-body { display: flex; flex-direction: column; gap: 9px; padding: 8px 0 clamp(30px, 3.4vw, 46px); }
.stage-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Outfit, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stage-meta i { color: var(--accent); font-style: normal; }
.stage-name { font-family: Outfit, sans-serif; font-weight: 600; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -0.02em; }
.stage-detail { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); max-width: 56ch; text-wrap: pretty; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  column-gap: clamp(30px, 4vw, 72px);
  margin-top: clamp(14px, 1.8vw, 22px);
}
.cap {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  border-top: 1px solid var(--line-soft);
  padding: clamp(20px, 2.2vw, 28px) 0;
  will-change: opacity, transform;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease), border-color 320ms ease;
}
.cap:hover { border-color: rgba(248, 152, 28, 0.5); }
.cap-icon { flex: 0 0 auto; color: var(--accent); display: flex; padding-top: 2px; transition: transform 380ms var(--ease); }
.cap:hover .cap-icon { transform: translateX(3px) scale(1.1); }
.cap-name { font-family: Outfit, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.cap-detail { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.reach { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.reach-value { font-family: Outfit, sans-serif; font-weight: 700; font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: -0.04em; }
.reach-rule { width: 28px; height: 2px; border-radius: 2px; background: var(--accent); display: block; transition: width 420ms var(--ease); }
.reach:hover .reach-rule { width: 64px; }
.reach-label {
  font-family: Outfit, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.award {
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(17px, 2vw, 23px) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  will-change: opacity, transform;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease), border-color 320ms ease, padding-left 320ms var(--ease);
}
.award:hover { border-color: rgba(248, 152, 28, 0.45); padding-left: 10px; }
.award-year { flex: 0 0 62px; font-family: Outfit, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--accent); }
.award-name { flex: 1 1 300px; font-family: Outfit, sans-serif; font-weight: 500; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.35; text-wrap: pretty; }
.award-result { flex: 0 0 auto; font-size: 13px; color: var(--muted); }

.studio-outro {
  padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 110px) clamp(52px, 6vw, 84px);
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.studio-outro-glow {
  position: absolute;
  bottom: -16vw;
  left: 50%;
  transform: translateX(-50%);
  width: 36vw;
  height: 36vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 152, 28, 0.13) 0%, rgba(248, 152, 28, 0) 70%);
  pointer-events: none;
}
.studio-outro-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.6vw, 32px);
  text-align: center;
}
.studio-outro h2 {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: pretty;
}
.studio-outro p { margin: 0; font-size: 14.5px; color: var(--muted); }
.big-cta {
  height: 52px;
  padding: 0 30px;
  border-radius: 100px;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 320ms var(--ease), box-shadow 320ms ease;
}
.big-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 34px rgba(248, 152, 28, 0.32); }

/* ── contact page ────────────────────────────────────────── */

.contact-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav) + clamp(50px, 7vw, 96px)) clamp(20px, 6vw, 110px) clamp(52px, 6vw, 84px);
  position: relative;
}
.contact-page h1 { margin: clamp(24px, 3vw, 40px) 0 0; font-size: clamp(32px, 5.2vw, 72px); line-height: 1.02; position: relative; }

/* ── footer ──────────────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 3;
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 26px clamp(20px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.footer span { font-size: 11.5px; color: var(--muted); text-align: center; }
.footer a { font-size: 11.5px; color: #1E1E1C; }

/* ── lightbox ────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 60px);
}
.lightbox.pop-in { animation: fadeIn 300ms ease both; }
.lightbox-inner { width: min(94vw, 1500px); display: flex; flex-direction: column; gap: 16px; }
.lightbox-media { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.lightbox-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.lightbox-title { font-family: Outfit, sans-serif; font-weight: 600; font-size: clamp(16px, 1.8vw, 22px); letter-spacing: -0.015em; }
.lightbox-meta { font-size: 13px; color: var(--muted); }
.lightbox-close {
  position: absolute;
  top: clamp(16px, 3vw, 30px);
  right: clamp(16px, 3vw, 30px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(242, 240, 235, 0.3);
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.lightbox-close:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ── media slots ─────────────────────────────────────────── */

.slot { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--panel); }
.slot.static { position: relative; width: 100%; height: 100%; }
.slot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.slot[data-filled] .slot-ph { display: none; }
.slot.circle, .slot.circle img { border-radius: 50%; }
.slot-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3A3A37;
  background:
    repeating-linear-gradient(135deg, rgba(242, 240, 235, 0.022) 0 10px, transparent 10px 20px),
    var(--panel);
  pointer-events: none;
}
.graded .slot img { filter: saturate(0.76) contrast(1.05) brightness(0.96); }

/* ── admin ───────────────────────────────────────────────── */

.admin { min-height: 100svh; background: var(--ink); }
.admin-login { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.admin-login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 34px);
}
/* The card is a column flex, so `align-items: stretch` was pulling the
   wordmark to the full card width while `height` held it at 13px — 290x13
   against a natural 5690x768, three times too wide. An <img> in a flex
   column needs to opt out of the stretch or its aspect ratio is not its
   own. */
.admin-login-card img { display: block; align-self: flex-start; height: 15px; width: auto; }
.admin-login-title { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.admin-login-note { font-size: 12.5px; color: var(--dim); }

.admin-shell { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100svh; }

/* The sidebar is pinned. It used to scroll away with the page, so changing
   section from the bottom of a 3,400px list meant scrolling all the way back
   up first — on every single switch. `align-self: flex-start` is the part
   that matters: the shell stretches its children by default, and an item
   with no room to move inside its container cannot stick. */
.admin-side {
  width: max(210px, min(100%, (900px - 100vw) * 999));
  flex: 0 0 auto;
  align-self: flex-start;
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel-2);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 14px;
}
.admin-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.admin-brand img { display: block; height: 11px; width: auto; }
.admin-brand span {
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-nav-btn {
  flex: 1 1 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  transition: background 180ms ease, color 180ms ease;
}
.admin-nav-btn:hover { background: rgba(242, 240, 235, 0.06); }
.admin-nav-btn.on { background: rgba(248, 152, 28, 0.14); color: var(--accent); border-color: rgba(248, 152, 28, 0.4); }
.admin-nav-btn i { font-size: 12px; opacity: 0.9; font-style: normal; }

.admin-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-ghost {
  flex: 0 0 auto;
  padding: 0 12px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(242, 240, 235, 0.16);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: color 180ms ease, border-color 180ms ease;
}
.admin-ghost:hover { color: var(--accent); border-color: var(--accent); }
.admin-ghost.danger { border-color: transparent; color: var(--dim); }
.admin-ghost.danger:hover { color: var(--red); border-color: transparent; }

.admin-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; }
.admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(14px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 20;
}
.admin-title {
  font-family: Outfit, sans-serif;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-right: auto;
}
.admin-top-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.save-chip { display: flex; align-items: center; gap: 8px; background: rgba(242, 240, 235, 0.05); border-radius: 100px; padding: 6px 12px; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block; transition: background 220ms ease; }
.save-dot.busy { background: var(--accent); }
.save-label { font-family: Outfit, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }

.admin-body { flex: 1 1 auto; padding: clamp(14px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 16px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-count { flex: 0 0 auto; font-family: Outfit, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--dim); }

.box-input {
  width: 100%;
  background: var(--field);
  border: 1px solid rgba(242, 240, 235, 0.16);
  border-radius: 8px;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  padding: 9px 11px;
  outline: none;
  transition: border-color 180ms ease;
}
.box-input:focus { border-color: var(--accent); }
.box-input.lg { border-radius: 9px; font-size: 14px; padding: 11px 12px; }
.box-input.search { flex: 1 1 220px; padding: 10px 12px; border-radius: 9px; }
textarea.box-input { line-height: 1.6; padding: 10px 11px; resize: vertical; }

.add-btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px;
  border-radius: 100px;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}
.add-btn:hover { opacity: 0.85; }

.rows { display: flex; flex-direction: column; gap: 8px; }

/* ── the Work screen, grouped by category ─────────────────────
   Sections mirror /work: a draggable heading reorders the categories, a
   draggable row reorders the work inside one. The admin hint above them
   says so once. */
.admin-hint {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim);
  text-wrap: pretty;
}
.admin-hint strong { color: var(--muted); font-weight: 600; }
.work-cat { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(16px, 2.4vw, 26px); }
.work-cat:first-of-type { margin-top: 6px; }
.work-cat-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(248, 152, 28, 0.07);
  border: 1px solid rgba(248, 152, 28, 0.18);
}
.work-cat-name {
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.work-cat-count {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(248, 152, 28, 0.14);
  border-radius: 100px;
  padding: 2px 9px;
}
.work-cat-head.orphan {
  background: rgba(242, 240, 235, 0.04);
  border-color: rgba(242, 240, 235, 0.12);
  flex-wrap: wrap;
}
.work-cat-head.orphan .work-cat-name { color: var(--muted); }
.work-cat-note { flex: 1 1 100%; font-size: 11.5px; color: var(--dim); }
.work-cat-empty { font-size: 12px; color: var(--dim); padding: 8px 12px; }

/* One grip for every draggable list in the admin. */
.work-grip, .grid-grip {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .work-row[draggable="true"], .work-cat-head[draggable="true"], .grid-row[draggable="true"] { cursor: grab; }
  .work-row[draggable="true"]:active, .work-cat-head[draggable="true"]:active, .grid-row[draggable="true"]:active { cursor: grabbing; }
  .work-row:hover .work-grip, .work-cat-head:hover .work-grip, .grid-row:hover .grid-grip { color: var(--accent); }
}
/* No HTML5 drag on touch. The grip would be a lie; the whole card still
   opens the editor by tap, and reordering there is desktop-only for now. */
@media not all and (hover: hover) {
  .work-grip { display: none; }
}
.work-cat-head.dragging, .work-row.dragging, .grid-row.dragging { opacity: 0.4; }
.work-cat-head.drop-above::before, .work-cat-head.drop-below::after,
.work-row.drop-above::before, .work-row.drop-below::after,
.grid-row.drop-above::before, .grid-row.drop-below::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.work-cat-head.drop-above::before, .work-row.drop-above::before, .grid-row.drop-above::before { top: -4px; }
.work-cat-head.drop-below::after, .work-row.drop-below::after, .grid-row.drop-below::after { bottom: -4px; }

.work-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid rgba(242, 240, 235, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color 180ms ease, opacity 180ms ease;
}
.work-row:hover { border-color: rgba(248, 152, 28, 0.45); }
.work-row.draft { opacity: 0.62; }
.work-thumb { flex: 0 0 auto; position: relative; display: block; width: 88px; height: 50px; border-radius: 7px; overflow: hidden; background: var(--ink); }
.work-open {
  flex: 1 1 200px;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.work-name {
  font-family: Outfit, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-sub { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.status-chip {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 11px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.18);
  background: rgba(242, 240, 235, 0.06);
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status-chip.live { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.12); color: var(--green); }

.icon-row { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(242, 240, 235, 0.16);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.card.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.card.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card.grid.media { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.card.stack { display: flex; flex-direction: column; gap: 12px; }

.mini-label {
  font-family: Outfit, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.mini-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mini-note { font-size: 11.5px; line-height: 1.5; color: var(--dim); text-wrap: pretty; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 32px;
  padding: 0 15px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.18);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 180ms ease;
}
.chip.on { border-color: var(--text); background: var(--text); color: var(--ink); }

.edit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.edit-btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.16);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.edit-btn.status { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.edit-btn.status.live { color: var(--green); }
.edit-btn.preview {
  border-color: rgba(248, 152, 28, 0.5);
  background: rgba(248, 152, 28, 0.12);
  color: var(--accent);
  font-weight: 600;
}
.edit-btn.preview:hover { background: rgba(248, 152, 28, 0.22); }

.edit-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.edit-main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.edit-aside {
  width: max(280px, min(100%, (1100px - 100vw) * 999));
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.edit-aside-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--ink); }
.edit-aside-title { font-family: Outfit, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); text-wrap: pretty; }
.edit-aside-meta {
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.edit-aside-sub { font-size: 11.5px; color: var(--dim); }

/* media cards — link + cover management */

.media-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.media-card-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid transparent;
  transition: border-color 160ms ease;
}
.media-card-frame.dropping { border-color: var(--accent); }
.media-card-frame.dropping::after {
  content: 'Drop to set cover';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 152, 28, 0.18);
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.media-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(11, 11, 11, 0.82);
  border-radius: 4px;
  padding: 3px 7px;
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.media-card-badge.cover { left: auto; right: 6px; background: rgba(248, 152, 28, 0.9); color: var(--ink); }

.box-input.tiny { font-size: 12px; padding: 7px 9px; }

.media-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.media-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.18);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.media-btn:hover { color: var(--accent); border-color: var(--accent); }
.media-btn.danger:hover { color: var(--red); border-color: var(--red); background: rgba(248, 113, 113, 0.1); }

.media-card-status { font-size: 10.5px; line-height: 1.45; color: var(--dim); text-wrap: pretty; }
.media-card-status.warn { color: var(--accent); }

.hint {
  background: rgba(248, 152, 28, 0.07);
  border: 1px solid rgba(248, 152, 28, 0.28);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--soft);
  text-wrap: pretty;
}
.hint strong { color: var(--text); font-weight: 600; }
.hint-count {
  display: inline-block;
  margin-left: 6px;
  font-family: Outfit, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.notice {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--soft);
  text-align: right;
  animation: fadeIn 220ms ease both;
}
.notice.ok { color: var(--green); }
.notice.warn { color: var(--accent); }
.notice.error { color: var(--red); }

.save-dot.bad { background: var(--red); }
.save-error {
  background: rgba(248, 113, 113, 0.12);
  border-bottom: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--red);
  font-size: 12.5px;
  padding: 10px clamp(14px, 2.4vw, 26px);
}

.login-error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
}

.cloud-dot::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: baseline;
  background: var(--dim);
}
.cloud-dot.ok::before { background: var(--green); }
.cloud-dot.connecting::before { background: var(--accent); }
.cloud-dot.offline::before,
.cloud-dot.error::before { background: var(--red); }

.lead-meta a { color: var(--accent); }

/* Site fields sit in their own grid inside a page card. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

/* The single place a project's video link is entered. */
.work-link { display: flex; flex-direction: column; gap: 8px; }
.work-link .box-input { font-size: 14px; padding: 11px 12px; }

.pager-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 4px;
}
.media-btn[disabled] { opacity: 0.35; cursor: default; }
.media-btn[disabled]:hover { color: var(--muted); border-color: rgba(242, 240, 235, 0.18); background: none; }

.boot-error {
  max-width: 460px;
  margin: 22vh auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 5vw, 36px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.boot-error strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 600; color: var(--text); }
.boot-error span { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.boot-error button {
  height: 42px;
  padding: 0 22px;
  border-radius: 100px;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.boot-error code {
  font-size: 11px;
  color: var(--dim);
  word-break: break-all;
  font-family: ui-monospace, Menlo, monospace;
}

.storage-rows { display: flex; flex-direction: column; }
.storage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(242, 240, 235, 0.08);
  font-size: 12.5px;
  color: var(--muted);
}
.storage-row span:last-child { font-family: Outfit, sans-serif; font-weight: 500; color: var(--text); }

.lightbox-embed { display: block; width: 100%; height: 100%; border: 0; }
.lightbox-src {
  align-self: flex-start;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.lightbox-src:hover { color: var(--accent); }

.media-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.media-cell-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--ink); }
.media-cell-label { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-group-head { display: flex; flex-direction: column; gap: 3px; }
.media-group-title {
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.media-group-note { font-size: 11.5px; color: var(--dim); }
.media-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }

.lead { background: var(--panel); border: 1px solid rgba(242, 240, 235, 0.12); border-radius: 12px; overflow: hidden; }
.lead-head {
  width: 100%;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  background: none;
  border: 0;
  padding: 13px 14px;
  cursor: pointer;
}
.lead-tone { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; display: block; }
.lead-who { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lead-name { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 600; color: var(--text); }
.lead-sub { font-size: 11.5px; color: var(--dim); }
.lead-budget { flex: 0 0 auto; font-family: Outfit, sans-serif; font-size: 11px; font-weight: 500; color: var(--muted); }
.lead-status {
  flex: 0 0 auto;
  font-family: Outfit, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lead-chev { flex: 0 0 auto; font-size: 9px; color: var(--dim); }
.lead-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(242, 240, 235, 0.08);
}
.lead-msg { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--soft); text-wrap: pretty; }
.lead-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--dim); }
.lead-step {
  height: 30px;
  padding: 0 13px;
  border-radius: 100px;
  border: 1px solid rgba(242, 240, 235, 0.18);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 180ms ease;
}
.lead-step.on { background: var(--text); color: var(--ink); }

.list-block { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.list-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(242, 240, 235, 0.12);
}
.list-block-title {
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.list-block-note { font-size: 11.5px; color: var(--dim); }
.list-block-add {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid rgba(248, 152, 28, 0.5);
  background: rgba(248, 152, 28, 0.12);
  color: var(--accent);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms ease;
}
.list-block-add:hover { background: rgba(248, 152, 28, 0.22); }
.list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(242, 240, 235, 0.08);
}
.list-item-n { flex: 0 0 22px; font-family: Outfit, sans-serif; font-size: 11px; font-weight: 600; color: var(--dim); padding-top: 9px; }
.list-item-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
}
.list-item-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding-top: 7px; }

.reset-btn {
  align-self: flex-start;
  height: 34px;
  padding: 0 15px;
  border-radius: 100px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: none;
  color: var(--red);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.reset-btn:hover { background: rgba(248, 113, 113, 0.12); }

/* ── section rhythm on small screens ──────────────────────────
   On a phone the bands ran into each other: the studio panel's padding
   collapses to its minimum and the contact band has no top padding at
   all, so Work → About → Contact met with a 0px gap. Desktop already has
   room, so the extra breathing space is scoped to narrow screens.

   The rules used to draw a hairline between the bands as well. The space
   alone separates them; the lines only chopped the page into slabs. */

@media (max-width: 780px) {
  .work-sheet { padding-bottom: clamp(40px, 9vw, 64px); }

  .studio-panel { --pad-y: clamp(56px, 13vw, 88px); }

  .contact-band { padding-top: clamp(56px, 13vw, 88px); }

  /* The two columns inside each band need air between them too. */
  .studio-grid { gap: clamp(34px, 9vw, 56px); }
  .contact-cols { gap: clamp(38px, 10vw, 60px); }
}

/* ── short desktops ───────────────────────────────────────────
   A laptop is wide but short: 1366×768 and 1440×900 leave under 840px
   once the nav is taken off. Two things have to fit inside that.

   The contact band is the last screen of the home page, so it has to land
   whole rather than be clipped by the top of the viewport at the end of
   the scroll. And the About band has to stay under one screen or it does
   not pin at all — the pin is what drives the KPI count, so a band one
   row too tall silently drops the whole effect on the single most common
   laptop resolution there is.

   Everything here is vertical. Nothing changes on a tall monitor, where
   the extra air is welcome. */

@media (min-width: 781px) and (max-height: 900px) {
  .form { gap: clamp(15px, 2.3vh, 24px); }
  .form-row { gap: clamp(15px, 2.3vh, 24px); }
  .contact-list { gap: clamp(10px, 1.6vh, 20px); }
  .contact-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .contact-cols { margin-top: clamp(20px, 3.4vh, 56px); }
  .contact-heading { margin-top: clamp(12px, 2.4vh, 36px); }
  /* rows="4" is a fixed number of lines and the tallest single thing in the
     form. Height in vh lets the one element with slack give it up. */
  textarea.line-input { height: clamp(58px, 11vh, 108px); }
  .footer { padding-top: clamp(18px, 2.6vh, 26px); padding-bottom: clamp(18px, 2.6vh, 26px); }

  .studio-panel { --pad-y: clamp(34px, 5.4vh, 74px); }
  .studio-col { gap: clamp(13px, 2.1vh, 24px); }
  .studio-blurb { font-size: clamp(14px, 1.75vh, 16px); line-height: 1.6; }
  .svc-col { gap: clamp(9px, 1.5vh, 16px); }
  .svc-row { padding: clamp(8px, 1.35vh, 15px) 0; }
  .svc-detail { line-height: 1.5; }
  .svc-tail { padding: clamp(9px, 1.5vh, 16px) 0; }
  .kpi-block { padding-top: clamp(11px, 1.8vh, 22px); gap: 14px clamp(18px, 2.2vw, 34px); }
}

/* ── large desktops and 4K ────────────────────────────────────
   Past ~1600px the type stopped growing while the bands kept filling the
   screen, so the About band became a small block of text adrift in a
   screen of black — which is what read as an enormous gap between Work
   and About. Scaling the band's content with the screen closes it from
   the other side; js/app.js caps the band's height from this side. */

@media (min-width: 1600px) {
  .studio-heading { font-size: clamp(44px, 3.1vw, 60px); }
  .studio-blurb { font-size: clamp(17px, 1.05vw, 21px); max-width: 46ch; }
  .kpi-value { font-size: clamp(30px, 2vw, 40px); }
  .svc-rail { width: min(100%, 720px); margin-left: max(0px, min(100% - 720px, (100vw - 1100px) * 999)); }
  .svc-row { padding: clamp(15px, 1.15vw, 24px) 0; }
  .svc-name { font-size: clamp(18px, 1.15vw, 22px); }
  .svc-detail { font-size: clamp(13.5px, 0.86vw, 16px); }
  .svc-tail { padding: clamp(16px, 1.2vw, 24px) 0; font-size: clamp(13.5px, 0.86vw, 16px); }
  .link-btn { font-size: inherit; }
}

/* ── the admin on a phone ─────────────────────────────────────
   The sidebar's width trick collapses it to a full-width block above the
   content below 900px, which put 208px of navigation ahead of anything
   worth reading and then scrolled it away — so switching section on a
   phone meant scrolling to the top of a 3,400px page first.

   Below 900px it becomes a fixed bottom tab bar instead: four targets,
   always reachable, in the half of the screen a thumb can actually get
   to. Everything here is layout only; nothing about the desktop admin
   changes. */

@media (max-width: 899px) {
  .admin-shell { display: block; min-height: 100svh; }

  .admin-side {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    background: rgba(14, 14, 14, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 60;
  }
  /* The wordmark is in the top bar's title; a second one in the tab bar is
     four tab widths of nothing. */
  .admin-brand { display: none; }

  .admin-nav { flex: 1 1 auto; flex-wrap: nowrap; gap: 2px; }
  .admin-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    /* 52px, not 38: a tab bar is touched, not clicked. */
    height: 52px;
    padding: 0 4px;
    border: 0;
    border-radius: 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-align: center;
  }
  .admin-nav-btn i { font-size: 15px; line-height: 1; }
  .admin-nav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .admin-nav-btn.on { border-color: transparent; }

  /* Clear of the tab bar, or the last row of every list is unreachable. */
  .admin-body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  .admin-top { padding: 12px clamp(14px, 4vw, 20px); gap: 8px 10px; }
  .admin-top-right { gap: 6px; }
  .admin-ghost { height: 30px; padding: 0 10px; font-size: 10.5px; }
}

/* Narrow phones: the save chip keeps its dot and drops its sentence — the
   colour is the status, the words are a courtesy. */
@media (max-width: 560px) {
  .save-label { display: none; }
  .save-chip { padding: 6px; }
  .admin-title { font-size: 15px; }
}

/* Touch targets everywhere in the admin, not only the tab bar. The icon
   buttons on each row were 26px, which is half of what a thumb needs. */
@media (max-width: 899px) and (pointer: coarse) {
  .icon-btn { width: 38px; height: 38px; }
  .box-input { min-height: 40px; }
  .list-item { padding: 14px 12px; }
  .list-item-tools { gap: 8px; }
  /* The Published/Draft toggle and the image buttons were 26 and 28px. */
  .status-chip { height: 34px; padding: 0 14px; }
  .media-btn { height: 34px; padding: 0 12px; }
  .chip { min-height: 34px; }
  .filter { height: 38px; }
}