/* =========================================================
   Top Thanakorn — Editor
   v3d-r2-quieter visual system
   Antonio (display) + Archivo Black (sub-display) + IBM Plex Mono (labels)
   ========================================================= */

:root {
  --ink:    #0a0a0a;
  --paper:  #ffffff;
  --soft:   #f4f4f4;
  --rule:   2px;
  --gutter: clamp(32px, 5vw, 72px);
  /* Easing system — pick by intent, not by feel */
  --ease:        cubic-bezier(.2,.7,.2,1);     /* legacy default (still used widely) */
  --ease-out:    cubic-bezier(.16,1,.3,1);     /* smooth deceleration — entrances, focus mode */
  --ease-snappy: cubic-bezier(.32,.72,0,1);    /* quick + responsive — hover, tap */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* subtle overshoot — focus tile lift, mini morph */
  /* Burnt-orange accent — punctuation only */
  --accent: #C25A1F;
  --feat-bg:     #0a0a0a;
  --feat-fg:     #C25A1F;
  --feat-border: #C25A1F;
  --pin-color:   #C25A1F;
  /* Adaptive tokens — dark default; overridden in @media (prefers-color-scheme: light) */
  --body-bg:    #0f0f0f;        /* dark page background */
  --body-color: #f0ede8;        /* warm off-white text */
  --muted:      #8a8685;        /* de-emphasised meta text */
  --accent:     #D06120;        /* orange ~4.94:1 on dark bg — bumped for WCAG AA */
}

*  { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--body-bg); color: var(--body-color); }
body {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* =========================================================
   Debug / staging banner — shows build hash at top of page.
   Fixed so it stays visible while scrolling; z-index 40 sits
   above topbar (30) and all hero layers (max 4).
   ========================================================= */


/* =========================================================
   Top bar
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  isolation: isolate;
  padding: clamp(16px, 2.2vw, 22px) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(20, 20, 20, 0.42);
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(115%);
  backdrop-filter:         blur(40px) saturate(220%) brightness(115%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 8px 28px rgba(0, 0, 0, 0.15);
}
/* Fallback if backdrop-filter unsupported */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(12, 10, 8, 0.92); }
}
.topbar .mark {
  display: flex;
  align-items: center;
  line-height: 1;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
.topbar nav a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity .15s var(--ease-snappy);
}
.topbar nav a:hover { opacity: 0.55; }
.topbar nav .theme-toggle { vertical-align: middle; }

/* =========================================================
   Hero — quiet eyebrow, loud type
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;   /* clip parallax cinema from bleeding below hero */
  padding: clamp(96px, 14vh, 180px) var(--gutter) clamp(24px, 4.5vw, 80px);
  border-bottom: var(--rule) solid var(--ink);
  /* Dark hero — mosaic + marquee earn the contrast flip */
  background: #0a0a0a;
  color: var(--paper);
}

/* ---------- Hero thumbnail mosaic ----------
   Full-bleed 4×3 grid of work thumbnails. Each cell crossfades to a
   different project on a stagger. JS populates and cycles.
   Parallax: mosaic scrolls at 0.5× rate vs foreground text (1×).
   top: -15% extends the grid above the hero so the upward parallax
   shift never reveals a gap at the top. */
.hero-mosaic {
  position: absolute;
  inset: 0;
  top: -15%;                /* extra bleed for parallax headroom */
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  opacity: 0.68;
  pointer-events: none;
  /* Parallax: counteract 50% of the page scroll so the mosaic
     appears to move at half the speed of the foreground content. */
  transform: translate3d(0, calc(var(--scroll-y, 0px) * 0.5), 0);
  will-change: transform;
}
.hero-mosaic .mc {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #050505;
  /* Liquid glass tile border + inner highlight */
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Glass sheen overlay on each mosaic cell */
.hero-mosaic .mc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.00) 55%
  );
  pointer-events: none;
  z-index: 2;
}
/* JS still assigns glitch-a/b/c classes — neutralise them */
.hero-mosaic .mc.glitch-a,
.hero-mosaic .mc.glitch-b,
.hero-mosaic .mc.glitch-c { animation: none; }
.hero-mosaic .mc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-mosaic .mc-img.is-current { opacity: 1; }

/* Soft curved-CRT vignette — sits above mosaic, below text/scanlines. */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    transparent 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/* =========================================================
   Cinematic Still Slideshow — replaces thumbnail mosaic.

   Two-layer design (A + B). Both layers always run cinema-kb
   simultaneously — started at the same moment so they are
   always at an identical scale value. The crossfade swaps
   opacity only; neither layer's scale ever resets while
   visible, eliminating the "shrink on transition" artefact.

   Ken-Burns: alternate infinite (1.0 ↔ 1.10) over 22s so
   the direction reversal (if visible at all) is slow + smooth.
   ========================================================= */

.hero-cinema {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1a1a1a;  /* placeholder while image loads — feels intentional not broken */
  pointer-events: none;
  /* Parallax: image scrolls at 40% speed — text stays at 100% → depth effect */
  transform: translateY(calc(var(--scroll-y, 0px) * 0.4));
  will-change: transform;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.hero-cinema.cinema-loaded { opacity: 1; }
.cinema-still {
  position: absolute;
  inset: -8%;                  /* extra headroom for scale travel */
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  filter: brightness(0.82) saturate(0.75) contrast(1.04);
  /* Opacity crossfade — scale is handled by animation, never by transition */
  transition: opacity 1.5s ease-in-out;
  will-change: transform, opacity;
  transform-origin: center;
  /* Always-on Ken-Burns — both layers in sync from DOM insertion */
  animation: cinema-kb 22s ease-in-out alternate infinite;
}
.cinema-still.is-active {
  opacity: 1;
}
@keyframes cinema-kb {
  from { transform: scale(1.0);  }
  to   { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-still {
    animation: none !important;
    transform: scale(1.0) !important;
    transition: none !important;
  }
  .hero-cinema { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* Teal-orange cinematic colour grade */
.hero-cinema-grade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(14,  52, 66, 0.20) 0%,
    rgba(0,   0,  0,  0.00) 42%,
    rgba(148, 64, 12, 0.16) 100%
  );
}

/* .hero-dot-grid — CRT analog TV design intent, intentionally subtle */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.20) 0.6px, transparent 0.6px);
  background-size: 5px 5px;
}

/* Dark-overlay adjusted for cinematic still — adds bottom-left text-protect */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 58% at 18% 80%, rgba(0,0,0,0.42) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 38%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.20) 75%),
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.28) 100%);
}

/* CRT scanlines — retired in favour of liquid glass aesthetic. */
.hero-scanlines { display: none; }

/* Analog TV motion ====================================== */
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.96; }
  52%      { opacity: 0.85; }   /* brief deeper dropout */
  53%      { opacity: 1; }
  78%      { opacity: 0.93; }
  79%      { opacity: 1; }
}
/* Three per-cell glitch variants — different jitter offsets + dropout
   moments so adjacent cells with different durations + variants never
   sync. Cells stay stable for ~88-92% of each cycle, glitch in brief
   5-10% windows. */
@keyframes cell-glitch-a {
  0%, 47%, 53%, 88%, 100% { transform: translate(0, 0); opacity: 1; }
  48%                     { transform: translate(0, 1px); opacity: 0.4; }
  50%                     { transform: translate(0, 0); opacity: 1; }
  90%                     { transform: translate(-2px, 1px); opacity: 0.85; }
  91%                     { transform: translate(2px, -1px); opacity: 0.7; }
  92%                     { transform: translate(-1px, 0); opacity: 1; }
}
@keyframes cell-glitch-b {
  0%, 22%, 28%, 76%, 100% { transform: translate(0, 0); opacity: 1; }
  23%                     { transform: translate(2px, 0); opacity: 0.55; }
  25%                     { transform: translate(-2px, 0); opacity: 0.85; }
  26%                     { transform: translate(0, 0); opacity: 1; }
  78%                     { transform: translate(0, 2px); opacity: 0.5; }
  79%                     { transform: translate(0, -1px); opacity: 1; }
}
@keyframes cell-glitch-c {
  0%, 64%, 70%, 100%      { transform: translate(0, 0); opacity: 1; }
  65%                     { transform: translate(-3px, 0); opacity: 0.6; }
  66%                     { transform: translate(3px, 1px); opacity: 0.75; }
  67%                     { transform: translate(0, -1px); opacity: 0.95; }
  68%                     { transform: translate(0, 0); opacity: 1; }
  35%                     { transform: translate(1px, 1px); opacity: 0.85; }
  36%                     { transform: translate(0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mosaic { animation: none !important; transform: none !important; }
  .hero-mosaic .mc { animation: none !important; }
}

/* ---------- Brand marquee — trust strip below tagline ---------- */
.brand-marquee {
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  margin-left: calc(-1 * var(--gutter));
  margin-top: clamp(32px, 3vw, 48px);
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  height: 34px;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;   /* don't let flexbox squish the scrolling content */
  gap: 22px;
  white-space: nowrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  animation: marquee-scroll 28s linear infinite;
  will-change: transform;
}
.brand-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .m-item { display: inline-block; }
.marquee-track .m-sep {
  display: inline-block;
  color: var(--accent);
  opacity: 0.55;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* =========================================================
   Hero ambient glass blobs — soft warm/neutral discs blurred
   heavily under the hero name. Sit behind h1 (z-index: 0),
   shift on scroll via --scroll-y CSS var.
   ========================================================= */

.hero { isolation: isolate; overflow: hidden; }
.hero h1, .hero .role, .hero .bio { position: relative; z-index: 4; }

.hero-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.hero-blobs::before,
.hero-blobs::after,
.hero-blobs > .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  will-change: transform;
  transform: translate3d(0, calc(var(--scroll-y, 0) * 0.10), 0);
}
.hero-blobs::before {
  width: 46vw; height: 46vw;
  top: -8vw; left: -6vw;
  background: radial-gradient(closest-side, #f5e9dc 0%, rgba(245,233,220,0) 70%);
}
.hero-blobs::after {
  width: 38vw; height: 38vw;
  bottom: -10vw; right: -4vw;
  background: radial-gradient(closest-side, #ffe7d1 0%, rgba(255,231,209,0) 70%);
  transform: translate3d(0, calc(var(--scroll-y, 0) * -0.08), 0);
  opacity: 0.2;
}
.hero-blobs > .blob {
  width: 32vw; height: 32vw;
  top: 18vh; right: 22vw;
  background: radial-gradient(closest-side, #ffffff 0%, rgba(255,255,255,0) 70%);
  opacity: 0.28;
  transform: translate3d(0, calc(var(--scroll-y, 0) * 0.12), 0);
}

/* Glass plane riding on top of the blobs to bind them into a frosted layer */
.hero-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(1.15);
  backdrop-filter:         saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .hero-blobs::before,
  .hero-blobs::after,
  .hero-blobs > .blob { transform: none; }
  .hero-mosaic { transform: none !important; }
}

/* =========================================================
   Now Playing HUD (mobile / scroll-driven)
   ========================================================= */

/* Mini player + now-playing pill are deprecated — focus mode uses
   TikTok-style swipe nav now, no morph-to-mini path. Hide them at the
   stylesheet level so the dormant JS state machine can't surface them.
   To revive: remove the two `display: none !important` lines below. */
.mini-player,
.now-playing { display: none !important; }

.now-playing {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 24px);
  z-index: 60;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter:         blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 36px -8px rgba(0, 0, 0, 0.45);
  color: var(--paper);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  opacity: 0;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.now-playing.is-on {
  display: inline-flex;
  opacity: 1;
  transform: translate(-50%, 0);
}
.now-playing .np-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(194, 90, 31, 0.55);
  animation: np-pulse 1.6s var(--ease) infinite;
}
.now-playing .np-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-playing .np-name {
  font-family: "Archivo Black", sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.now-playing .np-dir {
  color: rgba(255, 255, 255, 0.7);
}
@keyframes np-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(194, 90, 31, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(194, 90, 31, 0); }
  100% { box-shadow: 0 0 0 0   rgba(194, 90, 31, 0); }
}
@supports not (backdrop-filter: blur(1px)) {
  .now-playing { background: rgba(0, 0, 0, 0.85); }
}
@media (hover: hover) and (pointer: fine) {
  /* Desktop already gets hover feedback — hide HUD */
  .now-playing { display: none !important; }
}
body.is-mini .now-playing { display: none !important; }

/* =========================================================
   Dim layer (Focus mode) — solid dim + frosted glass refraction
   The pinned tile (z 80), metadata panel (z 85) and mini player
   (z 90) sit above this. No aurora; just plain dark + blur.
   ========================================================= */
.dim-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  /* visibility:hidden (not display:none) keeps the GPU layer composed
     at idle so backdrop-filter doesn't have to be built when focus mode
     triggers — that build was the source of the entrance frame drop. */
  visibility: hidden;
  pointer-events: none;
  transform: translateZ(0);     /* force own GPU layer */
  will-change: opacity;
  /* 50ms exit delay — tile starts retreating first, dim follows for a
     more orchestrated feel. body.is-focus override below cancels delay
     on enter so dim leads in immediately.
     visibility flips AFTER the fade-out completes (.65s + .05s buffer)
     so the layer stays composed throughout the exit animation. */
  transition: opacity .65s var(--ease-out) 50ms,
              visibility 0s linear .7s;
}
body.is-focus .dim-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .65s var(--ease-out) 0ms,
              visibility 0s linear 0ms;
}

/* Glass refraction layer — blurs page tiles behind .dim-layer.
   28px (was 40px) — still clearly frosted but ~40% less GPU work on iOS,
   which helps the entrance compositor. */
.dim-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter:         blur(28px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .dim-layer { background: rgba(0, 0, 0, 0.88); }
}

/* Pre-focus stage: dim already half-on, tile already lifted, but scroll
   still unlocked so we can smooth-center the tile. */
body.is-focus-pending .dim-layer {
  opacity: 0.5;
  visibility: visible;
  pointer-events: none;
  transition: opacity .35s var(--ease),
              visibility 0s linear 0ms;
}
body.is-focus-pending .tile.is-pinned { z-index: 80; }

/* ---------- TikTok feed peek tiles (mobile focus mode) ----------
   Two ghost tile-frames that sit one viewport above (prev) and one below
   (next) the pinned tile. They show the static thumbnail only — no live
   iframe, no audio. Translate together with the pinned tile during a swipe
   so the feed feels continuous. JS positions them via inline transform/
   left/top/width to match the pinned tile's bounding rect. */
.focus-peek {
  position: fixed;
  z-index: 79;                  /* below pinned (80), above dim (70) */
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-100vh);
  will-change: transform;
  box-shadow:
    0 14px 38px -10px rgba(10, 10, 10, 0.32),
    0 4px 14px -8px rgba(10, 10, 10, 0.18);
}
body.is-focus .focus-peek { opacity: 1; }
.focus-peek > .tile-frame {
  position: relative;
  margin: 0;
  /* Inline width/height set by JS to mirror pinned tile rect. */
}
/* Strip pin indicator + caption styling on the cloned ghost */
.focus-peek .cap-pin,
.focus-peek .tile-caption { display: none; }

/* Pinned tile sits above the dim while in focus mode */
body.is-focus .tile.is-pinned { z-index: 80; }

/* Lock page scroll while in focus — gesture is captured as tear-away intent */
body.is-focus {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

/* =========================================================
   Mini player (floating glass, bottom-right)
   ========================================================= */
.mini-player {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 280px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter:         blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 24px 60px -16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  /* transform animation handled inline via FLIP; opacity handled via class */
  transition: opacity .35s var(--ease);
  cursor: pointer;
}
.mini-player.is-open {
  opacity: 1;
  pointer-events: auto;
}
@supports not (backdrop-filter: blur(1px)) {
  .mini-player { background: rgba(10, 10, 10, 0.92); }
}
.mini-host {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
/* (Plan B: tiles + mini show thumbnails only; YouTube iframe lives only in
   the modal player. No iframe rules needed for the mini-host.) */
.mini-controls {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}
.mini-btn {
  pointer-events: auto;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter:         blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.mini-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); }
.mini-meta {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  display: flex; gap: 8px; align-items: baseline;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  min-width: 0;
}
.mini-title {
  font-family: "Archivo Black", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-dir { color: rgba(255, 255, 255, 0.7); flex-shrink: 0; }
@media (max-width: 480px) {
  .mini-player { width: min(280px, 70vw); right: 14px; bottom: 14px; }
}
.hero .role {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 1.5vw, 24px);
  color: rgba(255, 255, 255, 0.65);
}
.hero h1 {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 17vw, 280px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 6px 36px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero h1 .name-1,
.hero h1 .name-2 { display: inline-block; will-change: transform, opacity; }
.hero .bio {
  margin-top: clamp(24px, 2vw, 32px);
  max-width: 56ch;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Kinetic name reveal (first session load only) ---------- */
@keyframes hero-reveal-large {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-reveal-small {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
body.hero-anim .hero .role         { animation: hero-reveal-small .55s var(--ease) 0s    both; }
body.hero-anim .hero h1 .name-1    { animation: hero-reveal-large .65s var(--ease) .2s   both; }
body.hero-anim .hero h1 .name-2    { animation: hero-reveal-large .65s var(--ease) .4s   both; }
body.hero-anim .brand-marquee      { animation: hero-reveal-small .55s var(--ease) .65s  both; }
@media (prefers-reduced-motion: reduce) {
  body.hero-anim .hero .role,
  body.hero-anim .hero h1 .name-1,
  body.hero-anim .hero h1 .name-2,
  body.hero-anim .brand-marquee { animation: none; }
}

/* =========================================================
   Section header
   ========================================================= */

.section-head {
  padding: clamp(24px, 3.5vw, 56px) var(--gutter) clamp(40px, 5vh, 72px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* =========================================================
   About — work history + education panel between work and footer.
   Dark band for visual contrast against the light work grid above
   and the frosted-glass contact footer below. Sarabun body, single
   centered column, max-width 720px. Eyebrow in mono accent caps.
   ========================================================= */

.about-band {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #1a1a1a 0%, #0a0a0a 70%);
  color: var(--paper);
  border-top: var(--rule) solid var(--ink);
  isolation: isolate;
}
.about-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  animation: grain-drift 40s linear infinite;
  background-position: 0 calc(var(--scroll-y, 0px) * -0.3);
  will-change: background-position;
}
.about-band > * {
  position: relative;
  z-index: 1;
}
.about {
  position: relative;
  overflow: visible;
  background: transparent;
  padding: clamp(80px, 12vh, 132px) var(--gutter) clamp(42px, 7vh, 74px);
}
.about::before {
  content: none;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-12px, -8px); }
  50%  { transform: translate(8px, -16px); }
  75%  { transform: translate(-4px, 12px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .about-band::before { animation: none; background-position: 0 0; }
}
.about-inner {
  max-width: 720px;
  margin: 0 auto;
}
.about-eyebrow {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: clamp(24px, 3.5vh, 40px);
}
.about-body {
  font-family: "Sarabun", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 clamp(16px, 2.5vh, 24px);
  letter-spacing: 0.005em;
}
.about-body em.accent {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}
.about-co {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.875em;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}
/* .about-band stays dark in both themes, so .about-co remains white. */
.about-meta {
  margin: clamp(20px, 3vh, 32px) 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 600px) {
  .about { padding: clamp(64px, 10vh, 96px) var(--gutter) 34px; }
  .about-body { font-size: 15px; line-height: 1.65; }

  /* Gap 1: hero bottom + section-head top (mobile tightening) */
  .hero { padding-bottom: 24px; }
  .section-head { padding-top: 24px; padding-bottom: 24px; }
  /* Mobile: tighten the tagline→marquee gap (base has 32-48px clamp, mobile uses 24px) */
  .brand-marquee { margin-top: 24px; }
}

/* =========================================================
   Beyond The Cut — hidden backplane behind a glass skin
   ========================================================= */

.beyond {
  --beyond-bg: #0a0a0a;
  --beyond-glass: rgba(16, 17, 17, 0.24);
  --beyond-glass-edge: rgba(255, 255, 255, 0.1);
  --beyond-leak: #41f4d2;
  --beyond-leak-2: #f3a94c;
  --beyond-parallax: 0px;
  --beyond-scan-parallax: 0px;
  --base-glass-x: 17%;
  --base-glass-y: 22%;
  --glass-x: var(--base-glass-x);
  --glass-y: var(--base-glass-y);
  --hit-1-x: var(--base-glass-x);
  --hit-1-y: var(--base-glass-y);
  --hit-2-x: var(--base-glass-x);
  --hit-2-y: var(--base-glass-y);
  --hole-top: 63px;
  --hole-bottom: 81px;
  --hole-left: 38px;
  --hole-right: min(232px, calc(100% - 184px));
  padding: clamp(8px, 1.4vh, 18px) var(--gutter) clamp(84px, 12vh, 128px);
  background: transparent;
  color: var(--paper);
  overflow: hidden;
  scroll-margin-top: 86px;
  margin-top: -1px;
}
.beyond-shell {
  position: relative;
  max-width: 720px;
  min-height: 268px;
  margin: 0 auto;
  border-radius: 8px;
  perspective: 1000px;
  overflow: visible;
}
.beyond-shell::before,
.beyond-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: opacity .36s var(--ease-out);
}
.beyond-shell::before {
  inset: -18px;
  z-index: 2;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 18% 78%, rgba(255, 255, 255, 0.11)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 17% 78%, rgba(255, 255, 255, 0.1)),
    radial-gradient(ellipse at 50% 48%, transparent 43%, rgba(0, 0, 0, 0.28) 66%, rgba(0, 0, 0, 0.66) 100%);
  box-shadow:
    inset 34px 0 52px rgba(0, 0, 0, 0.62),
    inset 0 34px 54px rgba(0, 0, 0, 0.58),
    inset -24px 0 36px rgba(255, 255, 255, 0.08),
    inset 0 -24px 38px rgba(255, 255, 255, 0.08);
  opacity: 0;
}
.beyond-shell::after {
  inset: -7px;
  z-index: 4;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.68) rgba(255, 255, 255, 0.16) rgba(255, 255, 255, 0.18) rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 14px 0 24px rgba(0, 0, 0, 0.62),
    inset 0 14px 24px rgba(0, 0, 0, 0.58),
    inset -12px 0 22px rgba(255, 255, 255, 0.13),
    inset 0 -12px 24px rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.68),
    -10px -10px 28px -24px rgba(0, 0, 0, 0.92),
    12px 18px 34px -24px rgba(255, 255, 255, 0.08),
    0 24px 42px -28px rgba(0, 0, 0, 0.82);
  opacity: 0;
}
.beyond.is-glass-hit-1 .beyond-shell::before,
.beyond.is-glass-hit-2 .beyond-shell::before {
  opacity: 0.26;
}
.beyond.is-revealed .beyond-shell::before {
  opacity: 0.68;
}
.beyond.is-glass-hit-1 .beyond-shell::after,
.beyond.is-glass-hit-2 .beyond-shell::after {
  opacity: 0.2;
}
.beyond.is-revealed .beyond-shell::after {
  opacity: 0.84;
}
.beyond-backplane {
  position: relative;
  z-index: 1;
  min-height: 268px;
  padding: 26px 30px 28px;
  overflow: hidden;
  border: 1px solid rgba(65, 244, 210, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 36%, rgba(65, 244, 210, 0.18), transparent 26%),
    radial-gradient(circle at 84% 68%, rgba(243, 169, 76, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(10, 14, 13, 0.96), rgba(8, 8, 8, 0.98));
  box-shadow:
    inset 0 30px 58px rgba(0, 0, 0, 0.68),
    inset 28px 0 58px rgba(0, 0, 0, 0.64),
    inset 0 -26px 44px rgba(255, 255, 255, 0.06),
    inset -24px 0 42px rgba(255, 255, 255, 0.055),
    inset 0 -46px 96px rgba(0, 0, 0, 0.5),
    inset 0 0 42px rgba(65, 244, 210, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 0 12px rgba(0, 0, 0, 0.24),
    0 18px 42px -34px rgba(0, 0, 0, 0.86);
  opacity: 0.86;
  transform: translateZ(-34px) scale(1.018);
  pointer-events: none;
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out), clip-path .24s var(--ease-out);
}
.beyond.is-revealed .beyond-backplane:not(.beyond-hit-leak) {
  opacity: 1;
  transform: translateZ(-18px) scale(1.01);
  pointer-events: auto;
  clip-path: inset(0 round 8px);
}
.beyond:not(.is-revealed) .beyond-backplane:not(.beyond-hit-leak) {
  border-color: transparent;
  box-shadow: none;
  filter: brightness(0.94) contrast(1.08);
  -webkit-mask-image: linear-gradient(96deg, transparent 0 3%, #000 6% 15%, rgba(0, 0, 0, 0.55) 16% 18%, #000 20% 31%, transparent 33% 35%, #000 38% 48%, rgba(0, 0, 0, 0.3) 51% 58%, transparent 62% 100%);
  mask-image: linear-gradient(96deg, transparent 0 3%, #000 6% 15%, rgba(0, 0, 0, 0.55) 16% 18%, #000 20% 31%, transparent 33% 35%, #000 38% 48%, rgba(0, 0, 0, 0.3) 51% 58%, transparent 62% 100%);
  clip-path: polygon(3% 18%, 7% 14%, 12% 18%, 15% 12%, 19% 21%, 25% 19%, 29% 24%, 34% 17%, 38% 22%, 43% 20%, 48% 25%, 54% 21%, 61% 24%, 64% 26%, 61% 28%, 55% 27%, 50% 30%, 44% 33%, 40% 27%, 34% 31%, 29% 28%, 23% 33%, 18% 28%, 13% 30%, 8% 24%, 3% 27%);
}
.beyond-hit-leak {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-color: transparent;
  box-shadow: none;
  filter: brightness(0.9) contrast(1.06);
  opacity: 0;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
  clip-path: polygon(
    calc(var(--hit-1-x) - 2px) calc(var(--hit-1-y) - 2px),
    calc(var(--hit-1-x) + 2px) calc(var(--hit-1-y) - 1px),
    calc(var(--hit-1-x) + 1px) calc(var(--hit-1-y) + 2px),
    calc(var(--hit-1-x) - 2px) calc(var(--hit-1-y) + 1px)
  );
  transition: opacity .22s var(--ease-out), clip-path .22s var(--ease-out);
}
.beyond-hit-leak a,
.beyond-hit-leak button {
  pointer-events: none;
}
.beyond.is-glass-hit-1:not(.is-revealed) .beyond-hit-leak-1 {
  opacity: 0.66;
  clip-path: polygon(
    calc(var(--hit-1-x) - 58px) calc(var(--hit-1-y) - 9px),
    calc(var(--hit-1-x) - 31px) calc(var(--hit-1-y) - 38px),
    calc(var(--hit-1-x) - 8px) calc(var(--hit-1-y) - 19px),
    calc(var(--hit-1-x) + 24px) calc(var(--hit-1-y) - 31px),
    calc(var(--hit-1-x) + 49px) calc(var(--hit-1-y) - 5px),
    calc(var(--hit-1-x) + 34px) calc(var(--hit-1-y) + 27px),
    calc(var(--hit-1-x) + 4px) calc(var(--hit-1-y) + 39px),
    calc(var(--hit-1-x) - 19px) calc(var(--hit-1-y) + 24px),
    calc(var(--hit-1-x) - 47px) calc(var(--hit-1-y) + 13px)
  );
}
.beyond.is-glass-hit-2:not(.is-revealed) .beyond-hit-leak-1 {
  opacity: 0.52;
  clip-path: polygon(
    calc(var(--hit-1-x) - 58px) calc(var(--hit-1-y) - 9px),
    calc(var(--hit-1-x) - 31px) calc(var(--hit-1-y) - 38px),
    calc(var(--hit-1-x) - 8px) calc(var(--hit-1-y) - 19px),
    calc(var(--hit-1-x) + 24px) calc(var(--hit-1-y) - 31px),
    calc(var(--hit-1-x) + 49px) calc(var(--hit-1-y) - 5px),
    calc(var(--hit-1-x) + 34px) calc(var(--hit-1-y) + 27px),
    calc(var(--hit-1-x) + 4px) calc(var(--hit-1-y) + 39px),
    calc(var(--hit-1-x) - 19px) calc(var(--hit-1-y) + 24px),
    calc(var(--hit-1-x) - 47px) calc(var(--hit-1-y) + 13px)
  );
}
.beyond.is-glass-hit-2:not(.is-revealed) .beyond-hit-leak-2 {
  opacity: 0.8;
  clip-path: polygon(
    calc(var(--hit-2-x) - 154px) calc(var(--hit-2-y) - 28px),
    calc(var(--hit-2-x) - 98px) calc(var(--hit-2-y) - 88px),
    calc(var(--hit-2-x) - 24px) calc(var(--hit-2-y) - 62px),
    calc(var(--hit-2-x) + 42px) calc(var(--hit-2-y) - 96px),
    calc(var(--hit-2-x) + 138px) calc(var(--hit-2-y) - 34px),
    calc(var(--hit-2-x) + 178px) calc(var(--hit-2-y) + 24px),
    calc(var(--hit-2-x) + 104px) calc(var(--hit-2-y) + 96px),
    calc(var(--hit-2-x) + 18px) calc(var(--hit-2-y) + 128px),
    calc(var(--hit-2-x) - 76px) calc(var(--hit-2-y) + 104px),
    calc(var(--hit-2-x) - 138px) calc(var(--hit-2-y) + 48px)
  );
}
.beyond.is-revealed .beyond-hit-leak {
  display: none;
}
.beyond-circuit,
.beyond-backplane::before,
.beyond-backplane::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.beyond-circuit {
  inset: -46px -36px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(65, 244, 210, 0.42) 8% 8.35%, transparent 8.35% 100%),
    linear-gradient(90deg, transparent 0 32%, rgba(243, 169, 76, 0.32) 32% 32.25%, transparent 32.25% 100%),
    linear-gradient(0deg, transparent 0 22%, rgba(65, 244, 210, 0.34) 22% 22.35%, transparent 22.35% 100%),
    linear-gradient(0deg, transparent 0 68%, rgba(255, 255, 255, 0.16) 68% 68.2%, transparent 68.2% 100%),
    radial-gradient(circle at 8% 22%, rgba(65, 244, 210, 0.8) 0 2px, transparent 2.8px),
    radial-gradient(circle at 32% 68%, rgba(243, 169, 76, 0.75) 0 2px, transparent 2.8px),
    radial-gradient(circle at 76% 22%, rgba(65, 244, 210, 0.7) 0 2px, transparent 2.8px);
  background-size: 150px 80px, 210px 120px, 150px 80px, 240px 110px, 150px 80px, 210px 120px, 240px 110px;
  opacity: 0.58;
  z-index: 0;
  transform: translate3d(0, var(--beyond-parallax), 0);
  will-change: transform, background-position;
  animation: circuit-run 3.8s linear infinite;
}
.beyond-backplane::before {
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), transparent 17% 78%, rgba(255, 255, 255, 0.085)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 16% 79%, rgba(255, 255, 255, 0.075)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 24% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(65, 244, 210, 0.12),
    inset 0 1px 0 rgba(0, 0, 0, 0.62),
    inset 1px 0 0 rgba(0, 0, 0, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.09),
    inset 0 20px 36px rgba(0, 0, 0, 0.42),
    inset 20px 0 36px rgba(0, 0, 0, 0.4),
    inset 0 -22px 38px rgba(255, 255, 255, 0.055),
    inset -18px 0 34px rgba(255, 255, 255, 0.05);
  opacity: 0.88;
}
.beyond-backplane::after {
  inset: -18px 0;
  z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.34));
  background-position: 0 var(--beyond-scan-parallax), 0 0;
  opacity: 0.46;
  transform: translate3d(0, var(--beyond-scan-parallax), 0);
}
.beyond-kicker,
.beyond-copy,
.beyond-links {
  position: relative;
  z-index: 2;
}
.beyond-kicker {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(65, 244, 210, 0.62);
  text-shadow: 0 0 18px rgba(65, 244, 210, 0.24);
}
.beyond-copy {
  max-width: 650px;
  margin-top: 9px;
}
.beyond-copy h2 {
  font-family: "Antonio", "Archivo Black", sans-serif;
  font-size: 34px;
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow:
    0 0 22px rgba(65, 244, 210, 0.34),
    2px 0 0 rgba(243, 169, 76, 0.2);
}
.beyond-copy p {
  margin-top: 12px;
  font-family: "Sarabun", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.68);
}
.beyond-copy .beyond-site-note {
  max-width: 610px;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.52);
}
.beyond-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 18px;
}
.beyond-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(65, 244, 210, 0.22);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: color .18s var(--ease-snappy), border-color .18s var(--ease-snappy), text-shadow .18s var(--ease-snappy);
}
.beyond-link:hover {
  border-bottom-color: rgba(243, 169, 76, 0.74);
  color: #fff;
  text-shadow: 0 0 12px rgba(243, 169, 76, 0.38);
}
.beyond-link-type {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(65, 244, 210, 0.46);
}
.beyond-cover {
  position: absolute;
  inset: -1px;
  display: block;
  min-height: 210px;
  width: calc(100% + 2px);
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.055), transparent 0 10px, transparent 58px),
    linear-gradient(116deg, transparent 0 25%, rgba(255, 255, 255, 0.012) 34%, transparent 43% 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--body-color);
  cursor: pointer;
  overflow: hidden;
  transform-origin: var(--glass-x) var(--glass-y);
  box-shadow:
    none;
  z-index: 3;
  transition:
    transform .16s var(--ease-snappy),
    border-color .22s var(--ease-out),
    box-shadow .22s var(--ease-out);
}
.beyond-cover:hover {
  border-color: rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}
.beyond-cover:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.beyond-glass-pane,
.beyond-glass-sheen,
.beyond-glass-impact,
.beyond-glass-hole,
.beyond-glass-crack,
.beyond-glass-crack::before,
.beyond-glass-crack::after,
.beyond-glass-shard,
.beyond-cover::before,
.beyond-cover::after {
  position: absolute;
  pointer-events: none;
}
.beyond-glass-pane {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.028), transparent 16% 84%, rgba(255, 255, 255, 0.018)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.06)),
    var(--beyond-glass);
  opacity: 0.012;
  transition: opacity .22s var(--ease-out), background .22s var(--ease-out);
}
.beyond-glass-sheen {
  inset: -16px;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, 0.08) 47%, transparent 52% 100%),
    linear-gradient(22deg, transparent 0 68%, rgba(255, 255, 255, 0.035) 72%, transparent 78% 100%);
  opacity: 0.06;
  transform: translateX(-16px);
}
.beyond-cover::before,
.beyond-cover::after {
  content: "";
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .18s var(--ease-out);
}
.beyond-cover::before {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.17) 0 2px, transparent 3px 16px, rgba(255, 255, 255, 0.07) 17px 18px, transparent 19px),
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(65, 244, 210, 0.12), transparent 86px);
}
.beyond-cover::after {
  background: radial-gradient(circle at var(--glass-x) var(--glass-y), transparent 0 44px, rgba(0, 0, 0, 0.26) 78px, transparent 126px);
}
.beyond-glass-impact {
  left: var(--glass-x);
  top: var(--glass-y);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.26),
    0 0 16px rgba(65, 244, 210, 0.24);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  transition: opacity .14s var(--ease-out), transform .18s var(--ease-snappy);
}
.beyond-glass-hole {
  left: var(--glass-x);
  top: var(--glass-y);
  width: 86px;
  height: 58px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.3) 58%, transparent 62%),
    radial-gradient(ellipse at 44% 42%, rgba(65, 244, 210, 0.42), transparent 60%);
  clip-path: polygon(8% 38%, 22% 6%, 48% 18%, 70% 0, 100% 34%, 82% 72%, 57% 100%, 30% 82%, 0 90%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42) rotate(-8deg);
  filter: blur(0.2px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-snappy);
}
.beyond-glass-crack {
  --angle: 0deg;
  --len: 120px;
  --anchor-x: var(--glass-x);
  --anchor-y: var(--glass-y);
  --crack-x: 0px;
  --crack-y: 0px;
  --main-y: 0px;
  --branch-x: 42%;
  --branch-y: -5px;
  --branch-len: 40px;
  --branch-angle: 28deg;
  --branch-opacity: 0.28;
  left: var(--anchor-x);
  top: var(--anchor-y);
  width: var(--len);
  height: 28px;
  background: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.08)) drop-shadow(0 0 12px rgba(65, 244, 210, 0.08));
  opacity: 0;
  transform: translate(var(--crack-x), var(--crack-y)) rotate(var(--angle)) scaleX(0);
  transform-origin: left center;
  transition: opacity .18s var(--ease-out), transform .24s var(--ease-snappy);
}
.beyond-glass-crack::before {
  content: "";
  left: 0;
  top: calc(50% - 4px + var(--main-y));
  width: 100%;
  height: 9px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.66) 0 10%, transparent 10% 12%, rgba(210, 255, 247, 0.5) 12% 31%, transparent 31% 34%, rgba(255, 255, 255, 0.48) 34% 58%, transparent 58% 62%, rgba(65, 244, 210, 0.12) 62% 82%, transparent 82%) 0 4px / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 17%, rgba(255, 255, 255, 0.28) 17% 29%, transparent 29% 43%, rgba(210, 255, 247, 0.28) 43% 56%, transparent 56%) 0 2px / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 36%, rgba(255, 255, 255, 0.22) 36% 48%, transparent 48% 68%, rgba(65, 244, 210, 0.1) 68% 76%, transparent 76%) 0 7px / 100% 1px no-repeat;
}
.beyond-glass-crack::after {
  content: "";
  left: var(--branch-x);
  top: calc(50% + var(--branch-y));
  width: var(--branch-len);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.46), rgba(210, 255, 247, 0.24) 58%, transparent);
  opacity: var(--branch-opacity);
  transform: rotate(var(--branch-angle));
  transform-origin: left center;
}
.glass-crack-a { --anchor-x: var(--base-glass-x); --anchor-y: var(--base-glass-y); --angle: -11deg; --len: 154px; --crack-x: -4px; --crack-y: 2px; --main-y: -1px; --branch-x: 38%; --branch-y: -8px; --branch-len: 46px; --branch-angle: 24deg; --branch-opacity: 0.34; }
.glass-crack-b { --anchor-x: var(--base-glass-x); --anchor-y: var(--base-glass-y); --angle: 27deg; --len: 94px; --crack-x: 5px; --crack-y: -3px; --main-y: 1px; --branch-x: 30%; --branch-y: 5px; --branch-len: 34px; --branch-angle: -38deg; --branch-opacity: 0.24; }
.glass-crack-c { --anchor-x: var(--base-glass-x); --anchor-y: var(--base-glass-y); --angle: -61deg; --len: 76px; --crack-x: 1px; --crack-y: 5px; --main-y: 0px; --branch-x: 48%; --branch-y: 4px; --branch-len: 26px; --branch-angle: 36deg; --branch-opacity: 0.18; }
.glass-crack-d { --anchor-x: var(--hit-1-x); --anchor-y: var(--hit-1-y); --angle: 6deg; --len: 214px; --crack-x: -7px; --crack-y: 1px; --main-y: 2px; --branch-x: 54%; --branch-y: -7px; --branch-len: 52px; --branch-angle: -23deg; --branch-opacity: 0.3; }
.glass-crack-e { --anchor-x: var(--hit-1-x); --anchor-y: var(--hit-1-y); --angle: 73deg; --len: 102px; --crack-x: 4px; --crack-y: -5px; --main-y: -2px; --branch-x: 46%; --branch-y: 5px; --branch-len: 30px; --branch-angle: -44deg; --branch-opacity: 0.24; }
.glass-crack-f { --anchor-x: var(--hit-2-x); --anchor-y: var(--hit-2-y); --angle: -31deg; --len: 132px; --crack-x: -2px; --crack-y: 7px; --main-y: 1px; --branch-x: 36%; --branch-y: -6px; --branch-len: 38px; --branch-angle: 31deg; --branch-opacity: 0.22; }
.beyond-glass-shard {
  left: var(--glass-x);
  top: var(--glass-y);
  width: 74px;
  height: 46px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.018)),
    rgba(12, 16, 15, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(0 16%, 72% 0, 100% 52%, 22% 100%);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.42);
  transition: opacity .18s var(--ease-out), transform .34s cubic-bezier(.18,.78,.16,1);
}
.glass-shard-a { width: 96px; height: 54px; }
.glass-shard-b { width: 70px; height: 78px; }
.glass-shard-c { width: 104px; height: 42px; }
.glass-shard-d { width: 56px; height: 60px; }
.beyond:not(.is-revealed) .beyond-cover::before {
  opacity: 0.28;
}
.beyond:not(.is-revealed) .glass-crack-a,
.beyond:not(.is-revealed) .glass-crack-b,
.beyond:not(.is-revealed) .glass-crack-c {
  opacity: 0.66;
  transform: translate(var(--crack-x), var(--crack-y)) rotate(var(--angle)) scaleX(1);
}
.beyond:not(.is-revealed) .glass-crack-b {
  opacity: 0.46;
}
.beyond:not(.is-revealed) .glass-crack-c {
  opacity: 0.38;
}
.beyond.is-glass-hit-1 .beyond-cover::before,
.beyond.is-glass-hit-2 .beyond-cover::before,
.beyond.is-shattering .beyond-cover::before {
  opacity: 1;
}
.beyond.is-glass-hit-2 .beyond-cover::after,
.beyond.is-shattering .beyond-cover::after {
  opacity: 1;
}
.beyond.is-glass-hit-1 .beyond-glass-impact,
.beyond.is-glass-hit-2 .beyond-glass-impact,
.beyond.is-shattering .beyond-glass-impact {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1);
}
.beyond.is-glass-hit-2 .beyond-glass-hole,
.beyond.is-shattering .beyond-glass-hole {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1) rotate(-8deg);
}
.beyond.is-glass-hit-1 .glass-crack-a,
.beyond.is-glass-hit-1 .glass-crack-b,
.beyond.is-glass-hit-1 .glass-crack-c,
.beyond.is-glass-hit-1 .glass-crack-d,
.beyond.is-glass-hit-1 .glass-crack-e,
.beyond.is-glass-hit-2 .beyond-glass-crack,
.beyond.is-shattering .beyond-glass-crack {
  opacity: 1;
  transform: translate(var(--crack-x), var(--crack-y)) rotate(var(--angle)) scaleX(1);
}
.beyond.is-glass-hit-2 .beyond-glass-pane {
  opacity: 0.36;
}
.beyond.is-shattering .beyond-cover {
  pointer-events: none;
  animation: glass-cover-release .62s cubic-bezier(.2,.72,.14,1) forwards;
}
.beyond.is-shattering .beyond-glass-pane,
.beyond.is-shattering .beyond-glass-sheen {
  opacity: 0;
}
.beyond.is-shattering .glass-shard-a {
  opacity: 0.85;
  transform: translate(calc(-50% - 142px), calc(-50% + 142px)) rotate(-24deg) scale(1);
}
.beyond.is-shattering .glass-shard-b {
  opacity: 0.7;
  transform: translate(calc(-50% + 128px), calc(-50% + 118px)) rotate(32deg) scale(0.86);
}
.beyond.is-shattering .glass-shard-c {
  opacity: 0.62;
  transform: translate(calc(-50% + 8px), calc(-50% + 168px)) rotate(4deg) scale(0.9);
}
.beyond.is-shattering .glass-shard-d {
  opacity: 0.58;
  transform: translate(calc(-50% + 244px), calc(-50% + 162px)) rotate(46deg) scale(0.82);
}
.beyond.is-fallen .beyond-cover {
  display: none;
}
.beyond.is-glass-hit-1 .beyond-cover,
.beyond.is-glass-hit-2 .beyond-cover {
  animation: glass-hit .18s var(--ease-snappy);
  -webkit-backdrop-filter: blur(1.2px) saturate(1.08);
  backdrop-filter: blur(1.2px) saturate(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    inset 0 0 36px rgba(255, 255, 255, 0.012),
    inset 0 -36px 64px rgba(0, 0, 0, 0.14);
}
@keyframes circuit-run {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 150px 0, -210px 0, 0 80px, 0 -110px, 150px 80px, -210px 120px, 240px -110px; }
}
@keyframes glass-hit {
  0% { transform: translate3d(0, 0, 0); }
  42% { transform: translate3d(1px, -1px, 0) rotate(0.12deg); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes glass-cover-release {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0);
  }
  34% { opacity: 0.78; transform: translate3d(0, 6px, 0) scale(1.01); }
  100% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(1.06);
  }
}
@media (max-width: 760px) {
  .beyond {
    --hole-top: 61px;
    --hole-bottom: 79px;
    --hole-left: 30px;
    --hole-right: min(214px, calc(100% - 132px));
    padding-top: 4px;
    padding-bottom: 70px;
  }
  .beyond-shell,
  .beyond-backplane {
    min-height: 332px;
  }
  .beyond-backplane {
    padding: 24px 22px 26px;
  }
  .beyond-copy h2 {
    font-size: 28px;
  }
  .beyond-cover {
    min-height: 260px;
  }
  .beyond-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .beyond-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .beyond-circuit,
  .beyond.is-shattering .beyond-cover,
  .beyond.is-glass-hit-1 .beyond-cover,
  .beyond.is-glass-hit-2 .beyond-cover {
    animation: none;
  }
  .beyond.is-shattering .beyond-cover {
    opacity: 0;
  }
}

/* =========================================================
   Filter block — sits above the work grid
   ========================================================= */

.filter-block {
  padding-bottom: clamp(12px, 1.2vw, 18px);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

/* =========================================================
   Filter chips — quiet, mono, no pill
   ========================================================= */

.filter-section-label {
  padding: 0 var(--gutter);
  margin: 0 0 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.5;
}
.filter-section-label[hidden] { display: none; }
#brand-section-label { margin-top: 20px; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 0 var(--gutter) 12px;
}
.filter-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Liquid Glass pill — dark default */
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter:         blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--body-color);
  opacity: 0.78;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0  rgba(255, 255, 255, 0.03),
    0 2px 10px -4px rgba(0, 0, 0, 0.35);
  transition: opacity .2s var(--ease-snappy), color .2s var(--ease-snappy),
              border-color .2s var(--ease-snappy), background .25s var(--ease-snappy),
              box-shadow .2s var(--ease-snappy),
              transform .2s var(--ease-snappy);
}
.filter-pill:hover { opacity: 1; transform: translateY(-1px); }
.filter-pill.is-active {
  opacity: 1;
  color: var(--accent);
  border-color: rgba(208, 97, 32, 0.50);
  background: rgba(208, 97, 32, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(208, 97, 32, 0.28),
    0 4px 14px -4px rgba(208, 97, 32, 0.28);
}
.filter-pill .count {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
@supports not (backdrop-filter: blur(1px)) {
  .filter-pill { background: rgba(24, 22, 19, 0.96); }
}

/* =========================================================
   Brand search — frosted glass input + horizontal chip row
   ========================================================= */

.brand-search-wrap {
  padding: 0 var(--gutter) clamp(8px, 1vw, 12px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.bs-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 64px;
  gap: 8px;
  padding: 4px 0;             /* prevent chip box-shadow clip */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
  /* Edge-fade gradient — implies scrollability; updates with scroll position */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
}
.bs-chips::-webkit-scrollbar { display: none; }
.bs-chips:empty { display: none; }
.bs-chips.is-expanded {
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 280px;
  padding-bottom: 8px;
  -webkit-mask-image: none;
          mask-image: none;
}

.brand-chip {
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter:         blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--body-color);
  opacity: 0.72;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 8px -4px rgba(0, 0, 0, 0.30);
  transition: opacity .2s var(--ease-snappy), background .2s var(--ease-snappy),
              border-color .2s var(--ease-snappy), color .2s var(--ease-snappy),
              transform .15s var(--ease-snappy);
}
.brand-chip:hover { opacity: 1; transform: translateY(-1px); }
.brand-chip.is-active {
  opacity: 1;
  color: var(--accent);
  border-color: rgba(208, 97, 32, 0.50);
  background: rgba(208, 97, 32, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(208, 97, 32, 0.28),
    0 4px 14px -4px rgba(208, 97, 32, 0.28);
}
.brand-chip .chip-count {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}
.chips-expand-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  background: rgba(208, 97, 32, 0.08);
  border: 1px solid rgba(208, 97, 32, 0.28);
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.88;
  transition: background .15s var(--ease-snappy), opacity .15s var(--ease-snappy);
  -webkit-tap-highlight-color: transparent;
}
.chips-expand-btn:hover {
  background: rgba(208, 97, 32, 0.16);
  opacity: 1;
}
@supports not (backdrop-filter: blur(1px)) {
  .brand-chip { background: rgba(24, 22, 19, 0.96); }
}

/* Load-more action inside brand chips — ghost outline, not a filter chip */
.chips-load-more {
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.30);
  color: var(--body-color);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity .2s var(--ease-snappy), border-color .2s var(--ease-snappy);
}
.chips-load-more:hover { opacity: 0.85; border-color: rgba(255, 255, 255, 0.50); }
html.theme-light .chips-load-more { border-color: rgba(10, 10, 10, 0.25); }
html.theme-light .chips-load-more:hover { border-color: rgba(10, 10, 10, 0.45); }

.empty-filtered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.empty-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(208, 97, 32, 0.16);
  border: 1px solid rgba(208, 97, 32, 0.32);
  color: var(--accent);
  font-size: 11px;
}
.empty-clear-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 18px;
  min-height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--body-color);
  cursor: pointer;
  transition: background .2s var(--ease-snappy);
}
.empty-clear-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* =========================================================
   Load More — progressive reveal for the work grid.
   Initial state shows INITIAL_VISIBLE tiles; the rest carry
   `.tile.is-hidden` until the user clicks the button below
   the grid. Filter changes reset to this collapsed state.
   ========================================================= */

.tile.is-hidden { display: none; }

.load-more-row {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(56px, 8vh, 96px);
}
.load-more {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* Accent-orange liquid glass — tinted fill, orange border, white text.
     Orange text on orange bg fails WCAG AA (~3.5:1), so text stays white
     (#fff on the dark+orange effective bg = 12:1+). */
  padding: 14px 28px;      /* ≥48px touch target */
  min-height: 48px;
  border-radius: 999px;
  background: rgba(208, 97, 32, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.9) brightness(1.05);
  backdrop-filter:         blur(20px) saturate(1.9) brightness(1.05);
  border: 1px solid rgba(208, 97, 32, 0.42);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(208, 97, 32, 0.15),
    0 4px 20px -4px rgba(208, 97, 32, 0.28),
    0 0 0 1px rgba(208, 97, 32, 0.12);
  /* Slow drifting sheen across the pill surface */
  background-image: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.00) 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: border-color .2s var(--ease-snappy), background-color .25s var(--ease-snappy),
              box-shadow .25s var(--ease-snappy),
              transform .2s var(--ease-spring),
              background-position 0.8s var(--ease);
}
.load-more:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(208, 97, 32, 0.65);
  background-color: rgba(208, 97, 32, 0.28);
  background-position: 100% 0;  /* slide sheen across on hover */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(208, 97, 32, 0.20),
    0 8px 32px -6px rgba(208, 97, 32, 0.50),
    0 0 0 1px rgba(208, 97, 32, 0.28),
    0 0 0 5px rgba(208, 97, 32, 0.10);
}
.load-more:active { transform: translateY(0) scale(0.98); }
.load-more.is-hidden { display: none; }
@supports not (backdrop-filter: blur(1px)) {
  .load-more { background: rgba(160, 72, 18, 0.90); color: #fff; }
}

/* =========================================================
   Work — Mosaic + slot-machine spotlight
   6-up grid, featured = 4-col span. Frame is the only rounded
   surface; all metadata sits in a clean caption block BELOW
   the frame in monochrome typography. Nothing overlays the
   thumbnail / video preview.
   ========================================================= */

.work {
  padding: 0 var(--gutter) clamp(8px, 1vh, 16px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  column-gap: clamp(10px, 1.2vw, 18px);
  row-gap:    clamp(28px, 3vh, 44px);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  grid-column: span 2;
  /* container-level transitions for any future tile-wide effects */
  transition: transform .35s var(--ease);
}
/* All tiles are uniform — no featured override. */

/* The rounded frame is the visual unit. Nothing else lives inside it. */
.tile-frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink);
  border: 1px solid var(--ink);
  aspect-ratio: 16 / 9;
  outline: 0px solid var(--accent);
  outline-offset: 0px;
  transform-origin: center center;
  /* Slower, more breathing scale for spotlight; snappy for outline tweaks. */
  transition: transform .5s var(--ease-out),
              box-shadow .5s var(--ease-out),
              outline-width .25s var(--ease-snappy),
              outline-offset .25s var(--ease-snappy);
  /* Pre-compose for GPU compositing during scale + drop-shadow animations */
  transform: translateZ(0);
}
/* Only put will-change on tiles that are actually doing work right now —
   a blanket will-change on all 64 frames eats memory. */
.tile.is-spotlight .tile-frame,
.tile.is-pinned    .tile-frame { will-change: transform, box-shadow; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-frame { will-change: transform, box-shadow; }
}
/* (was: .tile.feat .tile-frame { border-radius: 22px; } — featured tiles removed) */

/* Spotlight + pinned: subtle scale + lift drop shadow */
.tile.is-spotlight .tile-frame,
.tile.is-pinned    .tile-frame {
  transform: scale(1.04);
  box-shadow:
    0 14px 38px -10px rgba(10, 10, 10, 0.32),
    0 4px 14px -8px rgba(10, 10, 10, 0.18);
}
.tile.is-spotlight,
.tile.is-pinned { z-index: 5; }

/* Pinned indicator OUTSIDE the frame: orange outline offset by 6px */
.tile.is-pinned .tile-frame {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  box-shadow:
    0 14px 38px -10px rgba(194, 90, 31, 0.32),
    0 4px 14px -8px rgba(10, 10, 10, 0.18);
}

/* In FOCUS mode: enable pointer-events on the pinned iframe so the user
   can tap the YouTube player controls. Without this, taps fall through
   the pointer-events:none iframe-slot to the tile's click handler which
   calls setPinned(null) — closing focus instead of playing the video. */
body.is-focus .tile.is-pinned .tile-frame .iframe-slot,
body.is-focus .tile.is-pinned .tile-frame .iframe-slot iframe,
body.is-focus .tile.is-pinned .tile-frame .iframe-slot video { pointer-events: auto; }

/* In FOCUS mode: lift the pinned tile-frame OUT of the mosaic grid and
   anchor it to a fixed viewport rect.
   IMPORTANT: WebKit has a bug where elements with mask-image/clip-path
   ignore `position: fixed` and stay in their original flow. We neutralise
   those properties here, and use !important to defeat any cascade fights
   with the spotlight transform: scale(1.04) rule. */
body.is-focus .tile.is-pinned,
body.is-focus-pending .tile.is-pinned {
  z-index: 80;
  /* Neutralise any property that would create a fixed-positioning
     containing block at the parent level — the .tile must NOT trap its
     fixed-positioned child. */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}
body.is-focus .tile.is-pinned .tile-frame,
body.is-focus-pending .tile.is-pinned .tile-frame {
  position: fixed !important;
  left: 50% !important;
  /* On short viewports (< ~930px), shift center up so video clears focus-meta.
     Crossover at 15vh = 140px → 933px viewport height. */
  top: min(35vh, calc(50vh - 140px)) !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100vw - 48px) !important;
  max-width: 600px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: calc(100vh - 280px) !important;
  /* Neutralise the WebKit fixed-positioning bug triggered by mask-image / clip-path.
     The rounded corners are still enforced by border-radius + overflow: hidden. */
  -webkit-mask-image: none !important;
          mask-image: none !important;
  -webkit-clip-path: none !important;
          clip-path: none !important;
  outline: none !important;   /* kill browser focus ring — often renders as blue dashed outline */
  outline-offset: 0;
  box-shadow:
    0 24px 60px -16px rgba(10, 10, 10, 0.55),
    0 8px 24px -10px rgba(194, 90, 31, 0.28);
  /* Springy, deliberate lift into the hero rect — feels alive, not snappy. */
  transition: width .6s var(--ease-spring),
              top .6s var(--ease-spring),
              transform .6s var(--ease-spring),
              box-shadow .6s var(--ease-out);
}
@media (min-width: 760px) {
  body.is-focus .tile.is-pinned .tile-frame,
  body.is-focus-pending .tile.is-pinned .tile-frame {
    width: min(min(calc(100vw - 96px), 720px), calc((100vh - 280px) * 16 / 9)) !important;
    max-width: 90vw !important;
  }
}
@media (min-width: 1280px) {
  body.is-focus .tile.is-pinned .tile-frame,
  body.is-focus-pending .tile.is-pinned .tile-frame {
    width: min(min(calc(100vw - 160px), 900px), calc((100vh - 280px) * 16 / 9)) !important;
    max-width: 90vw !important;
  }
}
/* Very narrow viewports (dragged-down desktop window or small phone):
   collapse to near-full-width video with minimal gutters. */
@media (max-width: 580px) {
  body.is-focus .tile.is-pinned .tile-frame,
  body.is-focus-pending .tile.is-pinned .tile-frame {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100vh - 240px) !important;
  }
}

.tile-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Full colour always — no dim. Lift on hover handles the feedback. */
  filter: none;
  transition: opacity .35s var(--ease);
  z-index: 2;
  will-change: transform, opacity;
}
/* Hover lift — fine-pointer only to prevent stuck-hover on iOS first-tap */
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-frame {
    transform: translate3d(0, -4px, 0);
    box-shadow:
      0 16px 40px -10px rgba(10, 10, 10, 0.26),
      0 4px 14px -6px rgba(10, 10, 10, 0.16);
  }
  .tile:hover .tile-frame img { filter: none; }
}
.tile.is-active .tile-frame img { filter: none; }
/* When PLAYING: thumbnail crossfades out, iframe shows through */
.tile.is-playing .tile-frame img {
  opacity: 0;
  transition: opacity .3s var(--ease), filter .5s var(--ease);
}
/* has-player: iframe mounted but not yet playing (e.g. iOS autoplay blocked).
   Hide thumbnail immediately so the iframe/stream element is interactive. */
.tile.has-player .tile-frame img {
  opacity: 0;
  pointer-events: none;
}

/* Iframe sits below the thumbnail until .is-playing reveals it */
.tile-frame .iframe-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}

/* Tile / focus-mode iframe — full video, no crop. YouTube UI may show on
   the edges; accepted trade-off so the video itself isn't clipped. */
.tile-frame .iframe-slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* Mini player iframe — keep the 5% scale crop. Mini is smaller, so the
   bit of YouTube UI the crop hides matters more visually than the slight
   magnification. */
.mini-host iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  transform: scale(1.10);
  transform-origin: center center;
}

/* Focus-mode nav arrows — prev / next project. Liquid Glass pills
   matching the mini-player buttons. Visible only while body.is-focus
   or is-focus-pending. z-index 86 sits above the dim layer (70),
   pinned tile (80), and metadata panel (85).
   Position is driven by four CSS custom properties (--nav-y, --nav-x,
   --nav-tx, --nav-ty) so that switching between the desktop layout
   (vertically centred on left/right edges) and the mobile layout
   (horizontally centred at top/bottom) animates smoothly: every
   anchor stays a concrete length and `top`, `left`, `transform`
   are all in the transition list. Width-based breakpoint so dragging
   a desktop browser window narrow also fires the animation. */
.focus-nav {
  position: fixed;
  top:  var(--nav-y);
  left: var(--nav-x);
  z-index: 86;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter:         blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--paper);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--nav-tx, 0), var(--nav-ty, -50%));
  transition: opacity    .35s var(--ease-out),
              top        .4s  var(--ease-out),
              bottom     .4s  var(--ease-out),
              left       .4s  var(--ease-out),
              right      .4s  var(--ease-out),
              transform  .4s  var(--ease-out),
              background .25s var(--ease-snappy);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0  rgba(255, 255, 255, 0.05),
    0 8px 24px -10px rgba(0, 0, 0, 0.55);
}
.focus-nav svg { width: 22px; height: 22px; }
/* Default (desktop / wide): show horizontal chevrons (← →), hide vertical */
.focus-nav .icon-vertical { display: none; }
.focus-nav-prev {
  --nav-y: min(35vh, calc(50vh - 140px)); /* tracks constrained video center */
  --nav-x: max(16px, calc(50% - 530px)); /* ~36px outside 900px video edge */
  --nav-tx: 0;
  --nav-ty: -50%;
}
.focus-nav-next {
  --nav-y: min(35vh, calc(50vh - 140px));
  --nav-x: calc(100vw - max(16px, calc(50% - 530px)) - 44px);
  --nav-tx: 0;
  --nav-ty: -50%;
}
body.is-focus .focus-nav,
body.is-focus-pending .focus-nav {
  opacity: 1;
  pointer-events: auto;
}
.focus-nav:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: translate(var(--nav-tx, 0), var(--nav-ty, -50%)) scale(1.06);
}
@supports not (backdrop-filter: blur(1px)) {
  .focus-nav { background: rgba(0, 0, 0, 0.78); }
}

/* ── Focus close button (×) ─────────────────────────────────────────
   Sits top-right on all viewports. Same glass style as .focus-nav. */
.focus-close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 16px;
  z-index: 86;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter:         blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--paper);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-out), background .25s var(--ease-snappy);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    0 8px 24px -10px rgba(0, 0, 0, 0.55);
}
body.is-focus .focus-close,
body.is-focus-pending .focus-close {
  opacity: 1;
  pointer-events: auto;
}
.focus-close:hover { background: rgba(180, 60, 20, 0.65); }
@supports not (backdrop-filter: blur(1px)) {
  .focus-close { background: rgba(0, 0, 0, 0.78); }
}

/* Narrow viewports (601–760px, small tablets) — stack arrows vertically.
   Width-based so a resize animates. Icon swap (↑ / ↓) lives here. */
@media (max-width: 760px) {
  .focus-nav     { width: 56px; height: 56px; }
  .focus-nav svg { width: 24px; height: 24px; }
  .focus-nav .icon-horizontal { display: none; }
  .focus-nav .icon-vertical   { display: block; }
  .focus-nav-prev {
    top: calc(env(safe-area-inset-top, 0px) + 52px);
    left: 50%;
    transform: translateX(-50%);
  }
  .focus-nav-next {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 272px);
    left: 50%;
    transform: translateX(-50%);
  }
  .focus-nav:hover {
    transform: translateX(-50%) scale(1.06);
  }
}
/* Very short tablet viewports */
@media (max-width: 760px) and (max-height: 600px) {
  .focus-nav-next {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  }
}
/* ── Phone viewports (≤ 600px) — left/right arrows in thumb zone ──
   Both arrows sit at the same height: in the gap between the video
   bottom and the meta panel top — prime thumb-reach territory. */
@media (max-width: 600px) {
  .focus-nav .icon-horizontal { display: block; }
  .focus-nav .icon-vertical   { display: none; }
  .focus-nav-prev {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 276px);
    left: 12vw;
    right: auto;
    transform: none;
  }
  .focus-nav-next {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 276px);
    right: 12vw;
    left: auto;
    transform: none;
  }
  .focus-nav:hover { transform: scale(1.06); }
}
/* Short phone viewports (compact strip) */
@media (max-width: 600px) and (max-height: 600px) {
  .focus-nav-prev,
  .focus-nav-next {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  }
}

/* iOS Safari rounded-clip belt-and-suspenders */
.tile-frame {
  -webkit-clip-path: inset(0 round 16px);
          clip-path: inset(0 round 16px);
  -webkit-mask-image: linear-gradient(white, white);
          mask-image: linear-gradient(white, white);
}
/* (was: .tile.feat .tile-frame { clip-path 22px } — featured tiles removed) */
.mini-host {
  -webkit-clip-path: inset(0 round 16px);
          clip-path: inset(0 round 16px);
  -webkit-mask-image: linear-gradient(white, white);
          mask-image: linear-gradient(white, white);
}


/* ---------- Ken-Burns animation (active tile thumbnails + mini) ---------- */
@keyframes ken-burns {
  0%   { transform: scale(1.00) translate( 0%,  0%); }
  100% { transform: scale(1.08) translate( 2%, -2%); }
}
.tile.is-active .tile-frame img,
.mini-player.is-open .mini-host img {
  animation: ken-burns 10s cubic-bezier(.4, .0, .2, 1) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .tile.is-active .tile-frame img,
  .mini-player.is-open .mini-host img { animation: none; }
}

/* Mini player play CTA — repurposed: tap = expand back to focus */
.mini-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter:         blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 14px -6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mini-play svg { width: 16px; height: 16px; transform: translateX(1px); }
.mini-player.is-open .mini-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
@supports not (backdrop-filter: blur(1px)) {
  .mini-play { background: rgba(0, 0, 0, 0.78); }
}

/* mini-thumb fills the host as a poster underneath the iframe; crossfade
   out once mini.is-playing flips on. */
.mini-host img.mini-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  filter: saturate(1) brightness(1);
  z-index: 2;
  transition: opacity .3s var(--ease);
}
.mini-player.is-playing .mini-host .mini-thumb { opacity: 0; }
.mini-host iframe { z-index: 1; }

/* Hide mini-play once iframe is actually playing — it's no-op visual then */
.mini-player.is-open.is-playing .mini-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

/* ---------- Caption (lives BELOW the frame, never on top) ---------- */
.tile-caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
  align-items: flex-start;
  /* Fade in/out smoothly when entering/exiting focus mode (rule below) */
  transition: opacity .35s var(--ease-out);
}
/* In focus mode the caption is redundant with the metadata panel below
   the video — hide it without changing layout (visibility + opacity, NOT
   display:none, so the grid cell stays put and FLIP math stays correct). */
body.is-focus .tile.is-pinned .tile-caption,
body.is-focus-pending .tile.is-pinned .tile-caption {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.tile-caption .cap-pin {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(194, 90, 31, 0.18);
  margin-bottom: 2px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.tile.is-pinned .tile-caption .cap-pin { opacity: 1; transform: scale(1); }

.tile-caption .cap-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--body-color);
  margin: 0;
}
/* (was: .tile.feat .tile-caption .cap-title — featured tiles removed) */

.tile-caption .cap-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6a6a6a);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.tile-caption .cap-meta > * {
  display: inline-flex;
  align-items: baseline;
}
.tile-caption .cap-meta > * + *::before {
  content: "·";
  margin-right: 10px;
  opacity: 0.4;
}
.tile-caption .cap-cat  { opacity: 0.65; }
/* (was: .tile-caption .cap-feat — featured tiles removed) */
.tile-caption .cap-dir-muted { opacity: 0.45; }
.tile-caption .cap-year    { font-variant-numeric: tabular-nums; opacity: 0.75; }
.tile-caption .cap-country { opacity: 0.55; letter-spacing: 0.12em; }


/* Pinned: nudge title color to ink (already there) + show outline-offset border */
/* Featured caption gets a touch more left padding so the pin dot sits aligned */

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* =========================================================
   Contact
   ========================================================= */

.contact {
  position: relative;
  border-top: var(--rule) solid rgba(255, 255, 255, 0.10);
  padding: clamp(96px, 14vh, 180px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 64px);
  /* Liquid Glass plane — dark default */
  background: rgba(14, 12, 9, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter:         blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 -10px 40px -16px rgba(0, 0, 0, 0.40);
}
@supports not (backdrop-filter: blur(1px)) {
  .contact { background: #0f0d0a; }
}
.contact .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Contact channels — calm glass pills: email / line */
.contact-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-channels .ch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 52px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter:         blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 10px -4px rgba(0, 0, 0, 0.35);
  justify-content: center;
  transition: opacity .2s var(--ease-snappy), color .2s var(--ease-snappy),
              background .25s var(--ease-snappy), transform .2s var(--ease-snappy),
              box-shadow .2s var(--ease-snappy);
}
.contact-channels .ch:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 6px 20px -6px rgba(208, 97, 32, 0.28);
}
@supports not (backdrop-filter: blur(1px)) {
  .contact-channels .ch { background: rgba(30, 27, 23, 0.95); }
}
.contact-channels .ch-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  line-height: 1;
}
.contact-channels .ch-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.25;
  overflow-wrap: break-word;
}
@media (max-width: 600px) {
  .contact-channels {
    flex-direction: column;
  }
  .contact-channels .ch {
    border-radius: 14px;
    padding: 14px 22px;
    min-height: 56px;
  }
}
.contact .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: var(--rule) solid rgba(255, 255, 255, 0.10);
  padding-top: clamp(20px, 3vh, 32px);
}
.contact .row .links { display: flex; gap: 24px; }
.contact .row a { transition: color .2s var(--ease), opacity .2s var(--ease); }
.contact .row a:hover { color: var(--accent); opacity: 1; }

/* Brand anchor — logo-mono at micro size, faint, centered above fine-print */
.contact .footer-logo {
  display: flex;
  justify-content: center;
  opacity: 0.22;
  color: rgba(240, 237, 232, 1);
}
.contact .footer-logo svg {
  display: block;
  height: 20px;
  width: auto;
}

/* Fine-print AI note — sits below the copyright row, very faint */
.contact .made-with-ai {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.28);
  text-align: center;
}

/* Build identifier — even fainter than made-with-ai. Substituted at
   deploy time via deploy.command (sed replaces `{{BUILD_HASH}}` with
   a yymmdd.HHMM timestamp). Useful for debugging "is this the latest
   deploy?" without having to inspect headers. */
.contact .build-id {
  margin: 6px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.16);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Inline Focus Metadata Panel — replaces the modal player
   Glass card pinned to the bottom of the viewport while in
   focus mode; sits above the dim layer so the spec is legible.
   ========================================================= */

.focus-meta {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 600px;
  margin: 0 auto;
  padding: 18px 22px 20px;
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter:         blur(28px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 60px -16px rgba(0, 0, 0, 0.55);
  color: var(--paper);
  z-index: 85;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-spring);
  pointer-events: none;
  max-height: calc(42vh - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
/* 80ms entrance stagger — dim & tile lead, panel follows for a produced feel.
   Default rule (above) has zero delay so the EXIT slides down immediately. */
body.is-focus #focus-meta,
body.is-focus-pending #focus-meta { transition-delay: 80ms; }
@supports not (backdrop-filter: blur(1px)) {
  .focus-meta { background: rgba(20, 20, 20, 0.93); }
}
body.is-focus #focus-meta,
body.is-focus-pending #focus-meta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.is-mini #focus-meta {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

.focus-meta .fm-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.focus-meta .fm-eyebrow .fm-sep { opacity: 0.45; margin: 0 6px; }

.focus-meta .fm-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 32px);
  letter-spacing: -0.005em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--paper);
  word-break: break-word;
}

.focus-meta .fm-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 0;
}
.focus-meta .fm-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.focus-meta .fm-row dt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.focus-meta .fm-row dd {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.93);
  word-break: break-word;
}
/* Stream iOS play-button overlay — full-tile tap zone, shown instead of SDK embed */
.stream-ios-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sio-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow:
    0 8px 32px rgba(208, 97, 32, 0.55),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.18s ease;
}
.stream-ios-overlay:active .sio-btn { transform: scale(0.91); }
.sio-btn svg { width: 36px; height: 36px; margin-left: 4px; }
.sio-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}


@media (max-width: 360px) {
  .focus-meta { left: 16px; right: 16px; padding: 16px 18px 18px; }
  .focus-meta .fm-spec { gap: 10px 14px; }
}

/* ── Description prose in focus meta ── */
.fm-desc-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fm-desc {
  margin: 0;
  font-family: "Sarabun", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fm-desc.is-expanded {
  display: block;
  overflow: visible;
}
.fm-desc-more {
  margin-top: 5px;
  padding: 0;
  background: none;
  border: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  opacity: 0.8;
}
.fm-desc-more:hover { opacity: 1; }


/* ── Compact strip — phones with short viewports (≤ 500px wide AND ≤ 599px tall)
   Hides the full card and shows a single-line truncated strip.
   Tall portrait phones (≥ 600px height) get the full card instead. */
.fm-compact {
  display: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
@media (max-width: 600px) and (max-height: 600px) {
  .focus-meta {
    padding: 11px 16px;
    max-height: none;
    border-radius: 10px;
    overflow: visible;
  }
  .focus-meta .fm-eyebrow,
  .focus-meta .fm-title,
  .focus-meta .fm-spec { display: none !important; }
  .fm-compact { display: block; }
}
/* ── Full card on tall portrait phones (≤ 600px wide, ≥ 601px tall) ── */
@media (max-width: 600px) and (min-height: 601px) {
  .focus-meta {
    left: 12px;
    right: 12px;
    padding: 14px 16px 16px;
    border-radius: 12px;
    max-height: 45vh;
  }
  .focus-meta .fm-title { font-size: clamp(18px, 5.5vw, 26px); margin-bottom: 12px; }
  .focus-meta .fm-spec  { gap: 10px 12px; }
}

/* ── Landscape phones (height ≤ 500px) — video-left / panel-right layout ──
   Video is offset right by env(safe-area-inset-left) to clear the Dynamic
   Island. Panel is exactly 200px wide on every device. */
@media (orientation: landscape) and (max-height: 500px) {
  /* CSS variables scoped to this layout — avoids repeating the same calc */
  body {
    --ls-left: env(safe-area-inset-left, 0px);
    --ls-right: env(safe-area-inset-right, 0px);
    /* Video width: tallest 16:9 that still leaves 200px for the panel */
    --ls-vid: min(
      calc(100vh * 16 / 9),
      calc(100vw - var(--ls-left) - var(--ls-right) - 200px)
    );
  }

  /* VIDEO: starts after Dynamic Island safe area, fills height */
  body.is-focus .tile.is-pinned .tile-frame,
  body.is-focus-pending .tile.is-pinned .tile-frame {
    left: var(--ls-left) !important;
    top: 0 !important;
    transform: none !important;
    width: var(--ls-vid) !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  /* RIGHT PANEL: snug 200px strip, content vertically centred */
  .focus-meta {
    left: calc(var(--ls-left) + var(--ls-vid));
    right: var(--ls-right);
    top: 0;
    bottom: 0;
    max-width: none;
    padding: 12px 12px 72px;
    border-radius: 0;
    max-height: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(24px);
    background: rgba(14, 14, 14, 0.82);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.13);
  }
  body.is-focus #focus-meta,
  body.is-focus-pending #focus-meta { transform: none; }

  /* Full meta in panel — single-column, compact spacing */
  .focus-meta .fm-eyebrow { display: block; margin-bottom: 4px; font-size: 9.5px; }
  .focus-meta .fm-title {
    display: block;
    font-size: clamp(12px, 2.2vw, 15px);
    margin-bottom: 8px;
    line-height: 1.1;
  }
  .focus-meta .fm-spec {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-template-columns: unset;
  }
  .focus-meta .fm-row dt { font-size: 8px; }
  .focus-meta .fm-row dd { font-size: 11px; }
  .fm-compact { display: none !important; }

  /* X close: inside the panel zone, above right safe area */
  .focus-close {
    top: 8px;
    right: calc(var(--ls-right) + 8px);
    width: 34px;
    height: 34px;
  }

  /* ARROWS: side-by-side at bottom-right, safe-area aware */
  .focus-nav { width: 38px; height: 38px; }
  .focus-nav svg { width: 18px; height: 18px; }
  .focus-nav .icon-horizontal { display: block; }
  .focus-nav .icon-vertical   { display: none; }
  .focus-nav-prev {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: calc(var(--ls-right) + 16px + 38px + 8px);
    left: auto; top: auto;
    transform: none;
  }
  .focus-nav-next {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: calc(var(--ls-right) + 16px);
    left: auto; top: auto;
    transform: none;
  }
  .focus-nav:hover { transform: scale(1.06); }
}

/* =========================================================
   Animation
   ========================================================= */

.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.fade-up.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1280px) {
  .work { grid-template-columns: repeat(4, 1fr); }
}
/* Desktop: reduce name by ~30% vs the uncapped 280px max. Keeps hierarchy
   readable on large monitors without the name dominating the viewport. */
@media (min-width: 1024px) {
  .hero h1 { font-size: clamp(48px, 6.5vw, 110px); }
}
@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .work {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .tile-caption .cap-title { font-size: 14.5px; }
  .tile-caption .cap-meta  { font-size: 10.5px; }
  .topbar nav a { margin-left: 14px; }
  .hero h1 { font-size: clamp(56px, 18vw, 120px); }
}

/* =========================================================
   Landscape phone (orientation + low height) — DISABLED for
   playback diagnostic. The block is preserved as a comment so
   it can be restored once playback is confirmed unrelated.

@media (orientation: landscape) and (max-height: 540px) {
  .mini-player { width: 200px; }
  body.is-focus .topbar,
  body.is-focus-pending .topbar,
  body.is-focus #focus-meta,
  body.is-focus-pending #focus-meta,
  body.is-focus .now-playing,
  body.is-focus-pending .now-playing { display: none !important; }
  body.is-focus .tile.is-pinned .tile-frame,
  body.is-focus-pending .tile.is-pinned .tile-frame {
    top: 50vh !important;
    left: 50vw !important;
    transform: translate(-50%, -50%) !important;
    width: min(100vw, calc(100vh * 16 / 9)) !important;
    max-width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }
  body.is-focus .dim-layer,
  body.is-focus-pending .dim-layer { background: rgba(0, 0, 0, 0.82); }
}
   ========================================================= */

/* ---- Theme color transition ---- */
html, body { transition: background-color 0.2s ease, color 0.2s ease; }
.topbar, .filter-pill, .filter-pill.is-active, .load-more, .contact, .contact-channels .ch, .brand-chip, .brand-chip.is-active { transition: background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }

/* =========================================================
   Light mode — class-based (html.theme-light) + OS preference via JS
   Default CSS is dark; this block restores warm off-white
   surfaces for OS-light visitors.

   Accent deepened to #A84D17 for WCAG AA on warm-white bg
   (#A84D17 on #f5f1ea = 4.99:1 ✓). Always-dark sections
   (hero/about) are explicitly given the dark-safe #D06120
   so their eyebrow text keeps contrast on their dark bg.
   ========================================================= */

/* ---- Page tokens ---- */
html.theme-light {
  --body-bg:    #f5f1ea;   /* warm off-white — not pure white, softer */
  --body-color: #1a1a1a;   /* deep near-black — 14.3:1 on bg ✓ */
  --muted:      #6a6a6a;
  --accent:     #A84D17;   /* 4.99:1 on #f5f1ea ✓ */
}

/* ---- Topbar: dark glass → frosted white glass ---- */
html.theme-light .topbar {
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(108%);
  backdrop-filter:         blur(40px) saturate(180%) brightness(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 8px 28px rgba(0, 0, 0, 0.05);
}
@supports not (backdrop-filter: blur(1px)) {
  html.theme-light .topbar { background: #f5f1ea; }
}

/* ---- Always-dark sections: force dark-safe accent on fixed dark bg ---- */
html.theme-light .about-eyebrow { color: #D06120; }
html.theme-light .beyond {
  --beyond-bg: #0a0a0a;
  --beyond-glass: rgba(16, 17, 17, 0.24);
  --beyond-glass-edge: rgba(255, 255, 255, 0.1);
  color: var(--paper);
}

/* ---- Section dividers: restore dark ink borders on light bg ---- */
html.theme-light .contact     { border-top-color: var(--ink); }
html.theme-light .contact .row { border-top-color: var(--ink); }

/* ---- Filter pills: dark glass → frosted white glass ---- */
html.theme-light .filter-pill {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(10, 10, 10, 0.10);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 10px -4px rgba(10, 10, 10, 0.12);
}
html.theme-light .filter-pill.is-active {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(168, 77, 23, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 0 0 1px rgba(168, 77, 23, 0.25),
    0 4px 14px -4px rgba(168, 77, 23, 0.25);
}
@supports not (backdrop-filter: blur(1px)) {
  html.theme-light .filter-pill { background: rgba(255, 255, 255, 0.92); }
}

/* ---- Load-more: accent-orange glass on warm light bg.
       Dark ink text (#1a1a1a) on orange-tinted light bg = 11:1+ WCAG AAA. ---- */
html.theme-light .load-more {
  background-color: rgba(168, 77, 23, 0.13);
  border-color: rgba(168, 77, 23, 0.38);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(168, 77, 23, 0.10),
    0 4px 20px -4px rgba(168, 77, 23, 0.22),
    0 0 0 1px rgba(168, 77, 23, 0.10);
}
html.theme-light .load-more:hover {
  background-color: rgba(168, 77, 23, 0.22);
  border-color: rgba(168, 77, 23, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(168, 77, 23, 0.15),
    0 8px 32px -6px rgba(168, 77, 23, 0.40),
    0 0 0 1px rgba(168, 77, 23, 0.22),
    0 0 0 5px rgba(168, 77, 23, 0.08);
}
@supports not (backdrop-filter: blur(1px)) {
  html.theme-light .load-more { background: rgba(168, 77, 23, 0.85); color: #fff; }
}

/* ---- Contact: dark glass → frosted white glass ---- */
html.theme-light .contact {
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 -10px 40px -16px rgba(10, 10, 10, 0.12);
}
@supports not (backdrop-filter: blur(1px)) {
  html.theme-light .contact { background: rgba(255, 255, 255, 0.92); }
}
html.theme-light .contact-channels .ch {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(10, 10, 10, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 10px -4px rgba(10, 10, 10, 0.12);
}
html.theme-light .contact-channels .ch:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 6px 20px -6px rgba(168, 77, 23, 0.22);
}
@supports not (backdrop-filter: blur(1px)) {
  html.theme-light .contact-channels .ch { background: rgba(255, 255, 255, 0.92); }
}
/* Fine-print: restore dark-on-light */
html.theme-light .contact .made-with-ai { color: rgba(10, 10, 10, 0.32); }
html.theme-light .contact .build-id     { color: rgba(10, 10, 10, 0.18); }

html.theme-light .brand-chip {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(10, 10, 10, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 8px -4px rgba(10, 10, 10, 0.12);
}
html.theme-light .brand-chip.is-active {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(168, 77, 23, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 0 0 1px rgba(168, 77, 23, 0.25),
    0 4px 14px -4px rgba(168, 77, 23, 0.25);
}
@supports not (backdrop-filter: blur(1px)) {
  html.theme-light .brand-chip { background: rgba(255, 255, 255, 0.92); }
}
html.theme-light .chips-expand-btn {
  background: rgba(168, 77, 23, 0.08);
  border-color: rgba(168, 77, 23, 0.28);
}
html.theme-light .chips-expand-btn:hover { background: rgba(168, 77, 23, 0.16); }
html.theme-light .empty-clear-btn {
  background: rgba(10, 10, 10, 0.07);
  border-color: rgba(10, 10, 10, 0.12);
}
html.theme-light .empty-clear-btn:hover { background: rgba(10, 10, 10, 0.14); }
html.theme-light .empty-tag {
  background: rgba(168, 77, 23, 0.12);
  border-color: rgba(168, 77, 23, 0.30);
  color: #A84D17;
}

/* =========================================================
   Theme toggle button (topbar)
   ========================================================= */

.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}
.theme-toggle:active { transform: scale(0.90); }
html.theme-light .theme-toggle {
  background: rgba(10, 10, 10, 0.07);
  border-color: rgba(10, 10, 10, 0.12);
}
html.theme-light .theme-toggle:hover {
  background: rgba(10, 10, 10, 0.14);
  border-color: rgba(10, 10, 10, 0.22);
}
.theme-toggle svg { transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease; }
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
html.theme-light .theme-toggle .icon-sun  { display: none; }
html.theme-light .theme-toggle .icon-moon { display: block; }

/* =========================================================
   Mobile spacing — tighten gaps that don't scale with clamp
   (must be last so it overrides the clamp() defaults above)
   ========================================================= */
@media (max-width: 600px) {
  .topbar nav { gap: 10px; }
  .theme-toggle {
    height: 32px;
    min-width: 32px;
  }

  /* Gap 2: category chips → brand label */
  .filters { padding-bottom: 4px; }
  #brand-section-label { margin-top: 8px; }

  /* Gap 3: filter-block bottom → work grid */
  .filter-block { padding-bottom: 20px; margin-bottom: 16px; }
}

/* =========================================================
   Topbar — shrink on scroll
   JS toggles .topbar.scrolled when scrollY > 50px.
   Override the shared theme-transition so padding and
   font-size animate alongside background/shadow changes.
   ========================================================= */
.topbar {
  transition:
    padding          0.25s ease,
    background       0.2s  ease,
    background-color 0.2s  ease,
    border-color     0.2s  ease,
    color            0.2s  ease,
    box-shadow       0.25s ease;
}
.topbar .mark svg {
  transition: width 0.25s ease, height 0.25s ease;
}
.topbar nav a {
  transition: font-size 0.25s ease, opacity .15s var(--ease-snappy);
}
@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar .mark svg, .topbar nav a { transition: none !important; }
}

.topbar.scrolled {
  padding-top:    clamp(6px, 0.9vw, 10px);
  padding-bottom: clamp(6px, 0.9vw, 10px);
  background: rgba(12, 10, 8, 0.60);
  -webkit-backdrop-filter: blur(48px) saturate(260%) brightness(118%);
  backdrop-filter:         blur(48px) saturate(260%) brightness(118%);
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 12px 36px rgba(0, 0, 0, 0.28);
}
.topbar.scrolled .mark svg {
  width:  20px;
  height: 20px;
}
.topbar.scrolled nav a {
  font-size: 10.8px;
}

/* Mobile: tighter height economy */
@media (max-width: 600px) {
  .topbar.scrolled {
    padding-top:    6px;
    padding-bottom: 6px;
  }
}

/* Light mode scrolled */
html.theme-light .topbar.scrolled {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(110%);
  backdrop-filter:         blur(48px) saturate(200%) brightness(110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 30px rgba(0, 0, 0, 0.06);
}