/* offbrand.design, the lab shell: 01 Lab's light paper, flat rounded surfaces and small calm type, plus a dark mode
   from 02 Darkroom (the film's #111313, warm paper ink, one safelight red) and its grease-pencil loop. */

:root {
  --bg: #fbfbfb;
  --surface: #f2f2f2;
  --surface-2: #ececec;
  --chip: #e4e4e4;
  --raised: #ffffff;
  --fg: #171717;
  --text: #3a3a3a;
  --muted: #707070;
  --faint: #9b9b9b;
  --line: rgba(0, 0, 0, 0.08);
  --accent: #e5482d;
  --ok: #2f9e5b;
  --focus: #171717;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pad: 24px;
  --gap: 12px;
  --radius: 20px;
  --header-h: 64px;
  --lv-fg: #171717;
  --lv-bg: #ffffff;
  --lv-accent: #e5482d;
  --lv-muted: #707070;
  --shadow-raised: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.18);
  --on-fg: #ffffff;
  --fg-hover: #000000;
  --hover-2: #e7e7e7;
  --crumb-sep: #c9c9c9;
  --glass: rgba(255, 255, 255, 0.94);
  --sheen: rgba(255, 255, 255, 0.55);
  --tick: #c4c4c4;
  --underline: rgba(0, 0, 0, 0.2);
  --selection: rgba(23, 23, 23, 0.12);
  --pencil: #e5371f;
  --drum-shade: #d6d6d6;
  color-scheme: light;
}
/* dark: 02 Darkroom's room. Warm paper ink on the film's near-black; red lifted where it is read as text */
:root[data-theme="dark"] {
  --bg: #111313;
  --surface: #171919;
  --surface-2: #1c1e1e;
  --chip: #262828;
  --raised: #242626;
  --fg: #ebe6dc;
  --text: #cdc8be;
  --muted: #8f8d87;
  --faint: #5e5d59;
  --line: rgba(235, 230, 220, 0.1);
  --accent: #ff5a3c;
  --ok: #4cc27e;
  --focus: #ebe6dc;
  --lv-fg: #ebe6dc;
  --lv-bg: #171919;
  --lv-accent: #ff5a3c;
  --lv-muted: #8f8d87;
  --shadow-raised: 0 0 0 0.5px rgba(235, 230, 220, 0.09), 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  --on-fg: #111313;
  --fg-hover: #ffffff;
  --hover-2: #222424;
  --crumb-sep: #3a3c3b;
  --glass: rgba(29, 31, 31, 0.94);
  --sheen: rgba(235, 230, 220, 0.06);
  --tick: #3c3e3d;
  --underline: rgba(235, 230, 220, 0.25);
  --selection: rgba(229, 55, 31, 0.4);
  --pencil: #e5371f;
  --drum-shade: #0b0c0c;
  color-scheme: dark;
}
@media (max-width: 639px) { :root { --pad: 16px; --radius: 18px; --header-h: 56px; } }

html { background: var(--bg); scrollbar-gutter: stable; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.5 "Timeless Sans", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: "STYL" 100;
  font-kerning: normal;
  display: flex;
  flex-direction: column;
}
main { flex: 1; outline: none; }
::selection { background: var(--selection); }
.num, .seg-n, .pager-i, .step-n { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; pointer-events: none; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 8px 12px; border-radius: 10px;
  background: var(--fg); color: var(--on-fg); font-size: 13px; transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: var(--header-h); padding: 0 var(--pad);
  background: var(--bg);
  view-transition-name: site-header;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.site-header.is-stuck::after { opacity: 1; }
.brand { display: block; padding: 6px 4px; margin: -6px -4px; border-radius: 8px; flex: none; }
.brand svg { width: 78px; height: auto; fill: var(--fg); overflow: visible; }
.crumb {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 14px; color: var(--muted); white-space: nowrap;
  view-transition-name: crumb;
}
.crumb > * { overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--crumb-sep); }
.crumb a { transition: color 0.15s; }
.crumb a:hover { color: var(--fg); }
.crumb [aria-current] { color: var(--fg); }
.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a {
  position: relative; padding: 6px 10px; border-radius: 10px; font-size: 14px; color: var(--muted);
  transition: color 0.15s, background-color 0.15s;
}
.nav a:hover { color: var(--fg); }
.nav a[aria-current] { color: var(--fg); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--fg);
}
.cta, .btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 12px;
  background: var(--fg); color: var(--on-fg); font-size: 14px; white-space: nowrap; flex: none;
  transition: background-color 0.15s, scale 0.15s var(--ease);
}
.cta:hover, .btn:hover { background: var(--fg-hover); }
.cta:active, .btn:active { scale: 0.97; }
.btn .arr { width: 12px; height: 12px; transition: translate 0.25s var(--ease); }
.btn:hover .arr { translate: 2px -2px; }
.theme-btn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 12px;
  background: none; color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s;
}
.theme-btn:hover { color: var(--fg); background: var(--surface-2); }
.theme-btn svg { width: 16px; height: 16px; transition: rotate 0.5s var(--ease); }
[data-theme="dark"] .theme-btn svg { rotate: 180deg; }
.is-intro .theme-btn { opacity: 0; }
.intro-chrome .theme-btn { opacity: 1; animation: header-in 0.5s var(--ease) 90ms both; }
.vt-theme::view-transition-old(root), .vt-theme::view-transition-new(root) { animation-duration: 0.35s; }
.menu-btn {
  display: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 12px;
  background: var(--surface-2); color: var(--fg); font-size: 14px; cursor: pointer;
}
.menu-btn i { position: relative; width: 12px; height: 8px; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-btn i::before { top: 0; }
.menu-btn i::after { top: 6.5px; }
.menu-open .menu-btn i::before { top: 3.25px; transform: rotate(45deg); }
.menu-open .menu-btn i::after { top: 3.25px; transform: rotate(-45deg); }

@media (max-width: 899px) { .crumb { display: none; } }
@media (max-width: 719px) {
  .site-header { gap: 8px; }
  .cta { margin-left: auto; height: 34px; font-size: 13px; padding: 0 12px; }
  .menu-btn { display: inline-flex; height: 34px; }
  .nav {
    position: absolute; left: 8px; right: 8px; top: calc(100% - 4px); margin: 0;
    flex-direction: column; gap: 0; padding: 6px; border-radius: 16px;
    background: var(--raised); box-shadow: var(--shadow-raised), var(--shadow-pop);
    opacity: 0; translate: 0 -6px; filter: blur(4px); pointer-events: none; visibility: hidden;
    transition: opacity 0.2s var(--ease), translate 0.25s var(--ease), filter 0.2s var(--ease), visibility 0s 0.25s;
  }
  .menu-open .nav { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav a { padding: 12px 12px; font-size: 16px; color: var(--fg); }
  .nav a[aria-current]::after { left: auto; right: 14px; top: 50%; bottom: auto; margin-top: -2px; }
}

/* --------------------------------------------------------------- catalogue */

.catalogue { padding-bottom: 72px; }
.controls {
  display: flex; align-items: center; gap: 8px;
  padding: 18px var(--pad) 22px;
  view-transition-name: controls;
  transition: opacity 0.5s var(--ease), translate 0.5s var(--ease), filter 0.5s var(--ease);
}
/* the controls arrive once the drum has dealt its first card onto the grid */
.catalogue:not(.is-dealt) .controls:not(:focus-within) { opacity: 0; translate: 0 -12px; filter: blur(4px); pointer-events: none; }
.seg {
  position: relative; display: flex; gap: 2px; padding: 4px; height: 36px; flex: none; max-width: 100%;
  border-radius: 12px; background: var(--surface-2);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  font-size: 13px; color: var(--muted); white-space: nowrap; cursor: pointer;
  transition: color 0.15s;
}
.seg button:hover, .seg button[aria-checked="true"] { color: var(--fg); }
.seg button:focus-visible { outline-offset: -2px; }
.seg-n { display: inline-block; min-width: 2ch; font-size: 11px; color: var(--faint); text-align: center; }
.seg-n.bump { animation: count-in 0.32s var(--ease); }
.seg-hl {
  position: absolute; left: 4px; top: 4px; height: 28px; width: 0; border-radius: 8px;
  background: var(--raised); box-shadow: var(--shadow-raised);
  transition: transform 0.38s var(--ease), width 0.38s var(--ease);
}
.search {
  display: flex; align-items: center; gap: 8px; width: 240px; height: 36px; padding: 0 6px 0 11px;
  border-radius: 12px; background: var(--surface-2); color: var(--muted); cursor: text;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.search:hover { background: var(--hover-2); }
.search:focus-within { background: var(--raised); box-shadow: var(--shadow-raised); }
.search:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.search-ic { width: 15px; height: 15px; flex: none; }
.search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 13px; color: var(--fg); }
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { display: none; }
.search kbd {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px;
  background: var(--raised); box-shadow: var(--shadow-raised); font: inherit; font-size: 12px; color: var(--muted);
  transition: opacity 0.15s;
}
.search:focus-within kbd { opacity: 0; }
.avail { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.avail i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 158, 91, 0.14); }
@media (max-width: 1099px) { .controls .avail { display: none; } }
@media (max-width: 719px) {
  .controls { flex-wrap: wrap; }
  .seg { order: 2; width: 100%; }
  .search { order: 1; width: 100%; }
}

/* masonry: positions computed in catalogue.js, rendered by the grid */
.grid {
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-rows: 4px; column-gap: var(--gap);
  padding: 0 var(--pad);
}
.piece {
  position: relative; grid-column: var(--c); grid-row: var(--r) / span var(--s);
  height: calc(var(--s) * 4px - var(--gap));
}
.tile {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--surface);
  transition: scale 0.15s ease-out;
  -webkit-tap-highlight-color: transparent;
}
a.tile:active { scale: 0.985; }
a.tile:focus-visible { outline-offset: 3px; border-radius: var(--radius); }
.tile img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0;
  -webkit-user-drag: none; user-select: none;
  transition: opacity 0.5s var(--ease);
}
.is-loaded .tile img { opacity: 1; }
/* skeleton sheen while media loads: a transformed gradient, never a background-position paint loop */
.piece:not(.is-loaded) .tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen 1.5s ease-in-out infinite;
}
.is-live .tile { container-type: size; }
.is-live .lv-cap { transition: opacity 0.2s var(--ease); }

.pill {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px);
  height: 26px; padding: 0 10px; border-radius: 13px;
  background: var(--glass); box-shadow: var(--shadow-raised);
  font-size: 12px; line-height: 1; color: var(--fg); white-space: nowrap;
  opacity: 0; translate: 0 4px; filter: blur(2px); pointer-events: none;
  transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), filter 0.2s var(--ease);
}
.pill-t { overflow: hidden; text-overflow: ellipsis; }
.pill-m { color: var(--muted); }
.pill .arr { width: 10px; height: 10px; color: var(--muted); transition: translate 0.2s var(--ease), color 0.15s; }
a.pill { pointer-events: auto; }
a.pill:hover .arr { color: var(--fg); translate: 1px -1px; }
.piece:hover .pill, .piece:focus-within .pill { opacity: 1; translate: 0 0; filter: none; }
.piece.is-live:hover .lv-cap, .piece.is-live:focus-within .lv-cap { opacity: 0; }
@media (hover: none) {
  .pill { opacity: 1; translate: 0 0; filter: none; }
  .is-live .lv-cap { display: none; }
}

.empty { padding: 72px var(--pad); text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
.btn-quiet {
  height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2);
  font-size: 13px; color: var(--fg); cursor: pointer; transition: background-color 0.15s;
}
.btn-quiet:hover { background: var(--chip); }

/* filter + search: blur-shift leave / arrive */
.piece.is-leaving { animation: piece-leave 0.16s var(--ease) both; pointer-events: none; }
.piece.is-arriving { animation: piece-arrive 0.3s var(--ease) both; }


/* ---------------------------------------------------------------- hero: the drum under a viewer */

.hero {
  --p: 0;
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: calc(100svh - var(--header-h)); min-height: 520px;
  padding: 10px var(--pad) 18px;
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.hero > * { opacity: calc(1 - var(--p) * 1.4); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; translate: 0 calc(var(--p) * -28px); }
.hero-line { max-width: 23em; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); text-wrap: balance; }
.hero-meta { display: grid; justify-items: end; gap: 2px; padding-top: 3px; font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-stage { position: relative; margin: 14px 0 12px; opacity: calc(1 - var(--p) * 1.6); }
/* viewfinder corners: they open outward as the drum sinks */
.tick { position: absolute; width: 14px; height: 14px; border: 0 solid var(--tick); }
.tick.tl { left: 0; top: 0; border-width: 1px 0 0 1px; translate: calc(var(--p) * -40px) calc(var(--p) * -40px); }
.tick.tr { right: 0; top: 0; border-width: 1px 1px 0 0; translate: calc(var(--p) * 40px) calc(var(--p) * -40px); }
.tick.bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; translate: calc(var(--p) * -40px) calc(var(--p) * 40px); }
.tick.br { right: 0; bottom: 0; border-width: 0 1px 1px 0; translate: calc(var(--p) * 40px) calc(var(--p) * 40px); }
.hero.no-drum .hero-stage, .hero.no-drum .hero-read, .hero.no-drum .spec-hint { visibility: hidden; }

.hero-read {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.read-idx { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.read-idx b { display: inline-block; font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.read-idx span { font-size: 13px; color: var(--faint); }
.read-t { display: grid; min-width: 0; line-height: 1.3; }
.read-title { display: block; font-size: 15px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-sub { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-sub .m-only { display: none; }
.read-cats { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.read-cat { position: relative; z-index: 1; display: flex; align-items: center; height: 26px; padding: 0 10px; font-size: 12.5px; color: var(--faint); transition: color 0.3s var(--ease); }
.read-cat.on { color: var(--fg); }
.read-hl {
  position: absolute; left: 0; top: 4px; height: 26px; width: 0; border-radius: 8px;
  background: var(--raised); box-shadow: var(--shadow-raised);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}
.hero-spec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; font-size: 13px; color: var(--muted); }
.hero-cue {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; color: var(--fg); cursor: pointer; transition: background-color 0.15s;
}
.hero-cue:hover { background: var(--chip); }
.hero-cue i { font-style: normal; display: inline-block; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 3px; } }

/* the drum's canvas: above the page so cards can fly onto tiles, below the header */
.drum { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.grid.drumming .piece.mapped:not(.landed):not(:focus-within) > * { opacity: 0; }
.dpill {
  position: fixed; left: 0; top: 0; z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  background: var(--glass); box-shadow: var(--shadow-raised);
  font-size: 12px; line-height: 1; color: var(--fg); white-space: nowrap; pointer-events: none;
  opacity: 0; filter: blur(2px); transition: opacity 0.18s var(--ease), filter 0.18s var(--ease);
}
.dpill.on { opacity: 1; filter: none; }
.dpill .arr { width: 10px; height: 10px; color: var(--muted); }
.hero.is-hot { cursor: pointer; }
/* the grease-pencil loop round the hovered card, and its index number (from 02 Darkroom) */
.pencil { position: fixed; inset: 0; z-index: 21; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 0.2s linear; }
.pencil.on { opacity: 1; }
.pencil path { fill: none; stroke: var(--pencil); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pencil-n {
  position: fixed; left: 0; top: 0; z-index: 21; pointer-events: none; color: var(--pencil); font-size: 12px;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.2s linear; will-change: transform;
}
.pencil-n.on { opacity: 1; }

@media (max-width: 899px) { .hero-meta span:last-child { display: none; } }
@media (max-width: 719px) {
  .hero { padding-top: 6px; min-height: 480px; }
  .hero-top { display: grid; gap: 6px; }
  .hero-meta { justify-items: start; text-align: left; padding-top: 0; }
  .hero-read { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .read-cats { display: none; }
  .read-sub .m-only { display: inline; }
  .read-idx b { font-size: 26px; }
  .spec-hint { font-size: 12px; }
}

/* ------------------------------------------------------------------ intro */

.is-intro body { overflow: hidden; }
.is-intro { overflow: hidden; }
.is-intro .nav, .is-intro .cta, .is-intro .crumb, .is-intro .menu-btn, .is-intro .site-footer,
.is-intro .hero > * { opacity: 0; }

.intro-chrome .nav, .intro-chrome .cta, .intro-chrome .crumb, .intro-chrome .menu-btn {
  opacity: 1; animation: header-in 0.5s var(--ease) both;
}
.intro-chrome .nav { animation-delay: 60ms; }
.intro-chrome .cta, .intro-chrome .menu-btn { animation-delay: 120ms; }
.intro-chrome .hero > * { opacity: 1; animation: hero-in 0.6s var(--ease) both; }
.intro-chrome .hero-top { animation-delay: 0.05s; }
.intro-chrome .hero-stage { animation-delay: 0.15s; }
.intro-chrome .hero-read { animation-delay: 0.32s; }
.intro-chrome .hero-spec { animation-delay: 0.42s; }
.intro-chrome .site-footer { opacity: 1; }
.intro-fast .nav, .intro-fast .cta, .intro-fast .crumb, .intro-fast .menu-btn, .intro-fast .theme-btn, .intro-fast .hero > * { animation-duration: 0.32s; animation-delay: 0s; }

/* a logo prelude (15–18) draws the logo on the canvas first: the header's own logo waits for it, and the header lets
   the canvas show through while the intro runs */
.is-intro.has-prelude .site-header { background: transparent; }
.is-intro.has-prelude .brand { opacity: 0; }
.is-intro.has-prelude.brand-on .brand { opacity: 1; }
.is-intro.has-prelude.brand-on.brand-chrome .brand,
.is-intro.has-prelude.brand-on.intro-fast .brand { animation: header-in 0.5s var(--ease) both; }
.has-prelude.brand-inking .brand { opacity: 0 !important; }

.intro { position: fixed; inset: 0; z-index: 50; cursor: default; }
.intro.is-leaving { animation: header-out 0.38s var(--ease) both; pointer-events: none; }
.intro-logo {
  position: absolute; left: calc(50% - var(--lw) / 2); top: calc(50% - var(--lw) * 0.2534 / 2);
  --lw: min(400px, 68vw);
  width: var(--lw); transform-origin: 0 0; will-change: transform;
}
.intro-logo svg { width: 100%; height: auto; fill: var(--fg); overflow: visible; }
.intro-logo.is-static { animation: header-in 0.4s var(--ease) both; }
.intro-skip {
  position: absolute; right: max(var(--pad), env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px;
  border: 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13px; cursor: pointer;
  animation: header-in 0.5s var(--ease) 0.6s both;
  transition: color 0.15s, background-color 0.15s;
}
.intro-skip:hover { color: var(--fg); background: var(--chip); }
.intro-skip kbd {
  display: grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 7px;
  background: var(--raised); box-shadow: var(--shadow-raised); font: inherit; font-size: 11px;
}
@media (hover: none) { .intro-skip kbd { display: none; } .intro-skip { padding-right: 12px; } }

/* ------------------------------------------------------------ piece page */

.piece-page { padding: 8px var(--pad) 72px; }
.piece-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.stage {
  position: relative; display: grid; place-items: center; overflow: hidden;
  height: calc(100vh - var(--header-h) - 32px); min-height: 460px; max-height: 1000px;
  padding: clamp(24px, 5vw, 72px); border-radius: 24px; background: var(--surface);
  view-transition-name: stage;
}
.stage.is-live { padding: 0; container-type: size; }
.stage-frame {
  position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--ar);
  border-radius: 10px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 48px -28px rgba(0, 0, 0, 0.3);
}
@supports not (aspect-ratio: 1) { .stage-frame { width: 60%; } }
.stage-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
.stage-frame.is-loaded img { opacity: 1; }
.stage-frame:not(.is-loaded)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen 1.5s ease-in-out infinite;
}
.meta {
  position: sticky; top: calc(var(--header-h) + 8px);
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 22px 18px; border-radius: 24px; background: var(--surface);
}
.meta-k { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tag-live { height: 20px; padding: 0 7px; border-radius: 6px; background: var(--raised); color: var(--accent); font-size: 11px; display: inline-flex; align-items: center; box-shadow: var(--shadow-raised); }
.meta h1 { margin-top: -12px; font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; outline: none; }
.meta-sum { font-size: 15px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.outcome { padding: 14px 14px 15px; border-radius: 14px; background: var(--raised); box-shadow: var(--shadow-raised); }
.outcome .meta-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.outcome p:last-child { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--fg); text-wrap: pretty; }
.facts { display: grid; gap: 0; font-size: 14px; }
.facts > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--muted); }
.facts dd a { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.facts dd a:hover { text-decoration-color: currentColor; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags li { height: 22px; padding: 0 8px; border-radius: 7px; background: var(--chip); font-size: 12px; display: inline-flex; align-items: center; }
.meta .btn { align-self: flex-start; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.pager-a { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px; margin: -6px; border-radius: 10px; font-size: 14px; transition: background-color 0.15s; }
.pager-a:hover { background: var(--surface-2); }
.pager-a span { display: grid; min-width: 0; }
.pager-a small { font-size: 12px; color: var(--muted); }
.pager-a.is-next { justify-content: flex-end; text-align: right; }
.pager-i { font-size: 12px; color: var(--faint); }
.chev { width: 12px; height: 12px; flex: none; color: var(--muted); }
.more { margin-top: 56px; }
.more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.more-head h2 { font-size: 15px; font-weight: 400; }
.link-quiet { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); transition: color 0.15s; }
.link-quiet:hover { color: var(--fg); }
.link-quiet .arr { width: 11px; height: 11px; transition: translate 0.2s var(--ease); }
.link-quiet:hover .arr { translate: 1px -1px; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mini { display: grid; gap: 2px; }
.mini-media { display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 16px; overflow: hidden; background: var(--surface); transition: scale 0.15s ease-out; }
.mini:active .mini-media { scale: 0.985; }
.mini-media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
.mini:hover .mini-media img { scale: 1.02; }
.mini-live { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--muted); }
.mini-t { font-size: 14px; }
.mini-m { font-size: 13px; color: var(--muted); }
@media (max-width: 979px) {
  .piece-grid { grid-template-columns: 1fr; }
  .stage { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; }
  .stage.is-live { aspect-ratio: 1; }
  .meta { position: static; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) { .stage { padding: 20px; border-radius: 20px; } .meta { border-radius: 20px; padding: 18px 16px 16px; } }

/* ------------------------------------------------------------------ pages */

.page { padding: 24px var(--pad) 72px; max-width: 1280px; }
.page-head { display: grid; gap: 14px; padding: 24px 0 40px; max-width: 900px; }
.page-head h1 {
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 450;
  text-wrap: balance; outline: none;
}
.card { padding: 20px; border-radius: 20px; background: var(--surface); }
.cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.prose { display: grid; gap: 14px; max-width: 38em; font-size: 17px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.prose.narrow { font-size: 15px; color: var(--muted); max-width: 36em; }
.studio-facts .facts > div { grid-template-columns: 110px 1fr; }
.block { margin-top: 72px; display: grid; gap: 16px; justify-items: start; }
.block-h { font-size: 15px; font-weight: 400; color: var(--muted); }
.process { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.process li { display: grid; gap: 8px; align-content: start; min-height: 220px; }
.step-n { font-size: 12px; color: var(--faint); }
.process h3 { margin-top: auto; padding-top: 48px; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.process p { font-size: 14px; line-height: 1.5; color: var(--text); }
.clients { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.clients li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.clients .num { font-size: 12px; color: var(--faint); }
.clients a { transition: color 0.15s; }
.clients a:hover { color: var(--muted); }
.closing {
  margin-top: 88px; padding: 28px; border-radius: 24px; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.closing p { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em; }

.caps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cap { display: grid; gap: 18px; align-content: start; }
.cap-head { display: grid; gap: 40px; }
.cap h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.cap-items { display: grid; }
.cap-items li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.cap .link-quiet { margin-top: 4px; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.contact-grid .card { display: grid; gap: 16px; align-content: start; }
.contact-main { align-content: space-between !important; min-height: 280px; }
.big-mail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
.big-mail a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--underline); text-underline-offset: 5px; transition: text-decoration-color 0.15s; }
.big-mail a:hover { text-decoration-color: currentColor; }
.copy { min-width: 64px; font-variant-numeric: tabular-nums; }
.contact-main .avail { margin-left: 0; }
.contact-main .btn { justify-self: start; }
.send { display: grid; }
.send li { display: grid; grid-template-columns: 28px 1fr; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.send .num { font-size: 12px; color: var(--faint); padding-top: 2px; }
.fine { font-size: 13px; color: var(--muted); }
.social { display: grid; gap: 4px; }
.social a { display: inline-flex; align-items: center; gap: 6px; }
.social .arr { width: 10px; height: 10px; color: var(--muted); }

@media (max-width: 979px) {
  .cols, .contact-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .process, .caps-grid, .clients { grid-template-columns: 1fr; }
  .process li { min-height: 0; }
  .process h3 { padding-top: 20px; }
  .cap-head { gap: 20px; }
  .prose { font-size: 16px; }
  .closing { padding: 20px; }
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  padding: 20px var(--pad) max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.footer-d { margin-right: auto; }
.site-footer a, .replay { transition: color 0.15s; }
.site-footer a:hover, .replay:hover { color: var(--fg); }
.replay { border: 0; padding: 0; background: none; font-size: 13px; color: var(--muted); cursor: pointer; }

/* -------------------------------------------------------------- keyframes */

@keyframes piece-leave { to { opacity: 0; translate: var(--piece-shift, 0) 0; filter: blur(4px); } }
@keyframes piece-arrive { from { opacity: 0; translate: var(--piece-shift, 0) 0; filter: blur(4px); } }
@keyframes hero-in { from { opacity: 0; filter: blur(4px); translate: 0 8px; } }
@keyframes header-out { to { opacity: 0; filter: blur(4px); } }
@keyframes header-in { from { opacity: 0; filter: blur(4px); } }
@keyframes controls-out { to { opacity: 0; filter: blur(4px); translate: 0 -12px; } }
@keyframes controls-in { from { opacity: 0; filter: blur(4px); translate: 0 -12px; } }
@keyframes page-settle { from { opacity: 0; translate: 0 8px; } }
@keyframes page-out { to { opacity: 0; filter: blur(4px); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes count-in { from { opacity: 0; filter: blur(2px); translate: 0 3px; } }
@keyframes sheen { to { transform: translateX(100%); } }

/* page transitions (View Transitions): blur-fade out, settle in; header stays put */
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
.vt-page::view-transition-old(root) { animation: 0.16s var(--ease) both page-out; }
.vt-page::view-transition-new(root) { animation: 0.32s var(--ease) 0.12s both page-settle; }
.vt-page::view-transition-group(crumb), .vt-page::view-transition-group(controls), .vt-page::view-transition-group(stage) { animation: none; }
.vt-page::view-transition-old(crumb) { animation: 0.15s var(--ease) both header-out; }
.vt-page::view-transition-new(crumb) { animation: 0.26s var(--ease) 0.06s both header-in; }
.vt-page::view-transition-old(controls) { animation: 0.2s var(--ease) both controls-out; }
.vt-page::view-transition-new(controls) { animation: 0.32s var(--ease) 0.1s both controls-in; }
.vt-page::view-transition-old(stage) { animation: 0.14s var(--ease) both fade-out; }
.vt-page::view-transition-new(stage) { animation: 0.3s var(--ease) 0.12s both page-settle; }

@media (prefers-reduced-motion: reduce) {
  .piece.is-leaving { animation: fade-out 0.12s ease both; }
  .piece.is-arriving { animation: fade-in 0.2s ease both; }
  .intro-chrome .nav, .intro-chrome .cta, .intro-chrome .crumb, .intro-chrome .menu-btn, .intro-chrome .hero > * { animation: fade-in 0.3s ease both; }
  .controls { transition: opacity 0.3s ease; }
  .catalogue:not(.is-dealt) .controls:not(:focus-within) { translate: none; filter: none; }
  .hero-top, .tick { translate: none !important; }
  .intro.is-leaving { animation: fade-out 0.3s ease both; }
  .seg-hl, .pill, .nav { transition-duration: 0s; }
  .piece:not(.is-loaded) .tile::after, .stage-frame:not(.is-loaded)::after, .hero-cue i { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}