/* The home page: the Repri headline and the bento of tiles. The left rail and the page
   margins are in rail.css. Spacing, type, radius and colour all come from the tokens.
   The grid is .bt-grid, never .bento: About's old tiles own that name and paint it
   --paper-2, which showed up as the wrong colour in the gaps. */
.has-rail .home-about { justify-content: start; }
/* A line under the hero (where the brands strip used to run) and one above About. Every gap
   either side of a line is --section-y: hero to line, line to cards, cards to line, line to
   About. */
.has-rail .nb-hero { padding-bottom: var(--section-y); }
.has-rail #work { padding-bottom: var(--section-y); }
.has-rail .home-about { padding-top: var(--section-y); }
.has-rail .home-about__face { border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--bt-edge); }

/* ---- The headline: the same page title as every other page. Everything else is
   the hero's own layout: the sentence and the screen on the left, Repri's details
   and links on the right. The screen stays the size the home page gives it, 6.5em
   of the display tier, whatever size the headline is. !important because
   now-building.js sets the column's width inline, to the sentence's. */
@media (min-width: 861px) {
  .has-rail .nb-col { width: calc(var(--type-display) * 6.5) !important; font-size: var(--type-page-title); line-height: 1.05; letter-spacing: -.025em; }
  /* Laid out at the phones' desktop width and scaled to fit, so a small laptop
     gets the same picture and not the demo's zoomed-in narrow layout. */
  .has-rail .nb-frame { --nb-ref: 800px; width: 100%; border-radius: var(--radius-lg); }
  .has-rail .nb-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--bt-edge); pointer-events: none; }
  .has-rail .nb-frame iframe { width: var(--nb-ref); height: calc(var(--nb-ref) * var(--nb-crop-w) / 3.2); left: calc(-1 * var(--nb-ref) * var(--nb-crop-x) * var(--nb-k, 1)); transform: scale(var(--nb-k, 1)); transform-origin: 0 0; }
}
.nb-about a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.nb-about a:hover { color: var(--accent-text); }

/* ---- The bento ---- */
.bt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
/* Four columns once a tile is big enough for its words (about 275px). Three is an odd
   number, so the alternating list makes a checkerboard by itself; four would make stripes,
   so row two runs in its own order. Twelve cards fill both exactly: four rows of three,
   three rows of four (user, 2026-11-08: Seaglass and the campaign row came off). */
@media (min-width: 1720px) {
  .bt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bt-grid:not(.bt-grid--plain) > :nth-child(-n+4) { order: 1; }
  .bt-grid:not(.bt-grid--plain) > :nth-child(6) { order: 2; }
  .bt-grid:not(.bt-grid--plain) > :nth-child(5) { order: 3; }
  .bt-grid:not(.bt-grid--plain) > :nth-child(8) { order: 4; }
  .bt-grid:not(.bt-grid--plain) > :nth-child(7) { order: 5; }
  .bt-grid:not(.bt-grid--plain) > :nth-child(n+9) { order: 6; }
}
/* The home bento stays three across at every width (user, 2026-11-09): at four the
   cards were too small to read on a wide screen. Twelve cards, four rows. */
@media (min-width: 861px) { .bt-grid.bt-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The Playground's bento (build.py writes it): every tile a picture, in the list's own
   order, no checkerboard. A lab thumbnail is drawn 16:9 with the name at its left, so the
   square keeps that side. */
.bt-art--lab > img { object-position: 0 50%; }
.bt {
  --bt-reveal: 52%;   /* bento.js sets the exact height its words need */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  overflow: hidden;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bt-surface);
  color: var(--ink);
  text-decoration: none;
}
.bt-title { margin: 0 0 var(--space-3); font: 600 var(--type-lead)/1.25 var(--face-sans, sans-serif); }
.bt-text { margin: 0; font-size: var(--type-small); line-height: 1.55; color: var(--ink-70); }
.bt-meta { margin: var(--space-4) 0 0; font-size: var(--type-small); font-style: italic; color: var(--ink-40); }
.bt-go { display: inline-block; margin-inline-start: var(--space-1); color: var(--ink-40); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
a.bt:hover .bt-go, a.bt:focus-visible .bt-go { color: var(--accent-text); transform: translate(2px, -2px); }
a.bt:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
/* One hairline around every card, drawn over the picture so nothing can break it. */
.bt::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--bt-edge); pointer-events: none; }

/* A picture that moves. Rest on it and it slides down to show what it is. */
/* The card's grey only arrives on hover. Behind a resting picture it leaked out
   round the corners as a thin rim. */
.bt-media { justify-content: flex-start; background: none; transition: background-color var(--dur) var(--ease); }
.bt-media:is(:hover, :focus-visible, .is-open) { background: var(--bt-surface); }
.bt-media .bt-title { display: block; margin-bottom: var(--space-1); }
.bt-media .bt-meta { display: block; margin: var(--space-2) 0 0; }
.bt-line { display: block; font-size: var(--type-small); line-height: 1.4; color: var(--ink-70); }
.bt-stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: var(--type-small); line-height: 1.3; color: var(--ink-70); }
.bt-stats b { font-weight: 600; color: var(--accent-text); }
.bt-info { opacity: 0; transition: opacity var(--dur) var(--ease); }
.bt-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: inset var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}
.bt-art img, .bt-art video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Video files carry stray pixels in their last columns. Just enough scale to push them
   off the edge of the card, so the hairline meets clean picture. */
.bt-art > video, .bt-art:not(.ground-repri) > img { scale: 1.02; }
.bt-art video { opacity: 0; transition: opacity var(--dur) var(--ease); }
.bt-art video.is-on { opacity: 1; }
.bt-media:is(:hover, :focus-visible, .is-open) .bt-info { opacity: 1; }
/* The radius drops by the inset, so the picture's corners stay parallel to the card's. */
.bt-media:is(:hover, :focus-visible, .is-open) .bt-art {
  inset: var(--bt-reveal) var(--space-2) var(--space-2);
  border-radius: calc(var(--radius-lg) - var(--space-2));
}

/* Thumbnails are composed for the square: the product's own screen, whole, on
   its own ground, not a crop that happens to fill the tile. */
.bt-screen {
  position: absolute;
  z-index: 1;
  left: 9%;
  right: 9%;
  top: 50%;
  translate: 0 -50%;
  aspect-ratio: var(--shot, 16 / 10);
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 var(--space-3) var(--space-6) calc(var(--space-2) * -1) rgb(0 0 0 / .6);
}
/* Tall art is sized by the ground's height, so on hover it travels and shrinks
   with the ground as one piece. */
.bt-screen--tall { left: 50%; right: auto; top: 50%; translate: -50% -50%; height: 80%; aspect-ratio: 4 / 5; }
/* Repri: the closing section of repri.in, redrawn for the square: its sky, its line, and
   its island going through the same two prompts, resting small between them. One loop
   drives the island's size and both prompts, so they can't drift apart. */
.ground-repri { --rp-loop: 11s; container-type: inline-size; }
.rp-island { position: absolute; left: 50%; top: 5cqw; translate: -50% 0; overflow: hidden; background: #08080a; box-shadow: 0 1.4cqw 4cqw rgb(0 30 60 / .35); animation: rp-island var(--rp-loop) cubic-bezier(.5, 0, .2, 1) infinite; }
.rp-prompt { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; }
.rp-back { gap: 3cqw; padding-inline: 3.4cqw; animation: rp-back var(--rp-loop) ease infinite; }
.rp-sit { justify-content: center; gap: 2cqw; animation: rp-sit var(--rp-loop) ease infinite; }
.rp-disc { flex: none; display: grid; place-items: center; width: 10.5cqw; height: 10.5cqw; border-radius: 50%; background: rgb(100 210 255 / .2); }
.rp-eye { width: 6cqw; height: 6cqw; fill: none; stroke: #64d2ff; stroke-width: 1.8; }
.rp-eye circle { fill: #64d2ff; stroke: none; }
.rp-words { display: grid; gap: .5cqw; white-space: nowrap; }
.rp-words b, .rp-sit b { font: 600 3.9cqw/1.15 var(--face-sans, sans-serif); color: #fff; white-space: nowrap; }
.rp-words span { font: 400 3.1cqw/1.15 var(--face-sans, sans-serif); color: #8e8e93; }
.rp-fig { flex: none; width: 7.5cqw; height: 7.5cqw; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rp-chair { stroke: #8e8e93; }
.rp-head { fill: #fff; stroke: none; }
.rp-line { position: absolute; left: 6cqw; bottom: 6cqw; font: 600 8cqw/1.05 var(--face-display, sans-serif); letter-spacing: -.025em; color: #fff; }
@keyframes rp-island {
  0%, 8%, 47%, 53%, 92%, 100% { width: 25cqw; height: 7cqw; border-radius: 3.5cqw; }
  13%, 42% { width: 76cqw; height: 16cqw; border-radius: 8cqw; }
  58%, 87% { width: 46cqw; height: 11cqw; border-radius: 5.5cqw; }
}
@keyframes rp-back { 0%, 11%, 43%, 100% { opacity: 0; } 15%, 40% { opacity: 1; } }
@keyframes rp-sit { 0%, 56%, 88%, 100% { opacity: 0; } 60%, 85% { opacity: 1; } }

/* Clario: the whole case as one calm 15s story, after rachelchen.tech's cards (user,
   2026-11-08). A sponsored post with the shoe photo is live in a social app. The platform
   pauses it, quietly, because the photo was cleared for the web and the app but never for
   social. The scene rewinds; the check is typed and run against the day the campaign ends;
   the batch gets its verdicts and the shoe is swapped; the same post runs again with the
   new photo. Clario's colours are local here, like every product card's, and the app is a
   made-up one. Everything sits on a 100u stage sized by the shorter side, so it stays
   whole when the card opens. The frames come from scripts/make_clario_loop.py (seconds in,
   percentages out): change the times there and run it, which rewrites this block and the
   card's markup. Reduced motion shows the batch with its verdicts, still. */
.ground-clario {
  --cl-loop: 15s;
  --cl-base: var(--clario-card-base); --cl-blue: var(--clario-card-glow);
  --cl-r: #ff6b5e; --cl-a: #e0a23c; --cl-g: #4fc97c;
  --cl-dim: color-mix(in srgb, #5b6474 30%, var(--cl-base));
  --cl-calm: color-mix(in srgb, var(--cl-g) 20%, var(--cl-base));
  --cl-ui: #0f1115; --cl-ui-2: #6b7280; --cl-ui-line: #e7e8eb;
  container-type: size;
  background: var(--cl-base);
  animation: clv-ground var(--cl-loop) linear infinite;
}
.ground-clario::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 15% 100%, color-mix(in srgb, var(--cl-blue) 45%, transparent), transparent 70%); pointer-events: none; }
.clv { --u: min(1cqw, 1cqh); position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 100); height: calc(var(--u) * 100); translate: -50% -50%; font-family: var(--face-sans, sans-serif); color: #fff; }
.clv > * { position: absolute; }
.clv svg { display: block; width: 100%; height: 100%; overflow: visible; }
.clv :is(i, u, em, b) { font-style: normal; text-decoration: none; }

/* 1 and 6 · A post in a made-up social app: status bar, header, the account, the photo,
   likes, the caption and the tab bar. The platform's notice is calm and grey. */
/* A plain app window, not a phone (user, 2026-11-09): no bezel, no outline ring,
   no status bar. A rounded rectangle on a soft drop shadow, the way Fleet's card sits. */
.clv-phone { left: calc(var(--u) * 26); top: calc(var(--u) * 5); width: calc(var(--u) * 48); height: calc(var(--u) * 90); box-sizing: border-box; padding: 0; border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgb(0 20 50 / .4); opacity: 0; }
.clv-phone.is-a { animation: clv-phone-a var(--cl-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.clv-phone.is-b { animation: clv-phone-b var(--cl-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.clv-app { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: inherit; padding-top: calc(var(--u) * 1.5); background: #fff; color: var(--cl-ui); font-size: calc(var(--u) * 2.4); line-height: 1.25; }
.clv-app svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.clv-status { display: none; align-items: center; justify-content: space-between; height: calc(var(--u) * 5); padding: calc(var(--u) * .6) calc(var(--u) * 4) 0; font-weight: 600; font-size: calc(var(--u) * 2.3); }
.clv-status span { display: flex; gap: calc(var(--u) * .8); align-items: center; }
.clv-status svg { width: calc(var(--u) * 3); height: calc(var(--u) * 1.8); }
.clv-status svg.is-fill { fill: currentColor; stroke: none; }
.clv-head { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 3); }
.clv-head b { font: 600 calc(var(--u) * 3.8)/1 var(--face-display, sans-serif); letter-spacing: -.03em; }
.clv-head span { display: flex; gap: calc(var(--u) * 2.4); }
.clv-head svg, .clv-acts svg, .clv-tabs svg { width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); }
.clv-who { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 3); }
.clv-who > u { display: grid; place-items: center; flex: none; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border-radius: 50%; background: #1d2633; color: #fff; font: 600 calc(var(--u) * 2.2)/1 var(--face-display, sans-serif); }
.clv-who > span { display: grid; flex: 1; }
.clv-who b { font-weight: 600; }
.clv-who i { color: var(--cl-ui-2); font-size: calc(var(--u) * 2.1); }
.clv-who > em { color: var(--cl-ui-2); letter-spacing: .1em; font-weight: 700; }
.clv-pic { position: relative; flex: none; height: calc(var(--u) * 45.6); overflow: hidden; background: #e9e9ec; }
.clv-pic b { position: absolute; inset: 0; background-position: center 60%; background-size: cover; }
.is-a .clv-pic b { background-image: url(media/asset-clearance/clario-loop-shoe.webp); animation: clv-soft var(--cl-loop) ease infinite both; }
.is-b .clv-pic b { background-image: url(media/asset-clearance/clario-loop-runner.webp); background-position: center 40%; }
.clv-veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--u) * 1.2); background: rgb(255 255 255 / .28); color: #2b2f36; font-weight: 600; font-size: calc(var(--u) * 2.4); opacity: 0; animation: clv-veil var(--cl-loop) ease infinite both; }
.clv-veil svg { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.clv-acts { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 1.8) calc(var(--u) * 3) calc(var(--u) * .8); }
.clv-acts .is-save { margin-left: auto; }
.is-a .clv-acts .is-like svg { transform-origin: 50% 60%; animation: clv-like var(--cl-loop) cubic-bezier(.3, 1.5, .5, 1) infinite both; }
.is-b .clv-acts .is-like svg { fill: #ff3b5c; stroke: #ff3b5c; }
.clv-cap { display: grid; gap: calc(var(--u) * .6); padding: 0 calc(var(--u) * 3); }
.clv-cap b { font-weight: 600; }
.clv-tabs { display: flex; justify-content: space-around; margin-top: auto; padding: calc(var(--u) * 1.6) 0 calc(var(--u) * 3); border-top: 1px solid var(--cl-ui-line); }
.clv-note { position: absolute; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.8); top: calc(var(--u) * 5.6); z-index: 2; display: flex; gap: calc(var(--u) * 1.6); align-items: center; padding: calc(var(--u) * 1.8); border-radius: calc(var(--u) * 3.2); background: rgb(246 246 248 / .94); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgb(0 0 0 / .18); color: var(--cl-ui); opacity: 0; }
.is-a .clv-note { animation: clv-notice var(--cl-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.is-b .clv-note { animation: clv-notice-b var(--cl-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.clv-note > u { display: grid; place-items: center; flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: calc(var(--u) * 1.3); background: #8a909b; color: #fff; }
.is-b .clv-note > u { background: var(--cl-g); }
.clv-note > u svg { width: calc(var(--u) * 3); height: calc(var(--u) * 3); stroke-width: 2.2; }
.clv-note > span { display: grid; gap: calc(var(--u) * .4); min-width: 0; }
.clv-note b { font-weight: 600; font-size: calc(var(--u) * 2.5); }
.clv-note i { color: #4b5160; font-size: calc(var(--u) * 2.2); text-wrap: balance; }

/* 3 · Rewind. */
.clv-rew { left: 50%; top: 50%; width: calc(var(--u) * 22); height: calc(var(--u) * 15); margin: calc(var(--u) * -7.5) 0 0 calc(var(--u) * -11); opacity: 0; fill: #fff; animation: clv-rew var(--cl-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }

/* 4 · The check, typed, and run. The key words are Clario's blue. */
.clv-ask { left: calc(var(--u) * 10); top: calc(var(--u) * 30); width: calc(var(--u) * 80); height: calc(var(--u) * 40); box-sizing: border-box; padding: calc(var(--u) * 5) calc(var(--u) * 5.5); border-radius: calc(var(--u) * 4.5); background: #fff; color: #0e1722; box-shadow: 0 calc(var(--u) * 2.5) calc(var(--u) * 8) rgb(0 0 0 / .35); opacity: 0; animation: clv-ask var(--cl-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.clv-q { display: block; font: 500 calc(var(--u) * 5)/1.38 var(--face-sans, sans-serif); letter-spacing: -.01em; }
.clv-q i { opacity: 0; animation: clv-word var(--cl-loop) linear infinite both; animation-delay: calc(var(--i) * 160ms); }
.clv-q em { color: var(--cl-blue); }
.clv-run { position: absolute; right: calc(var(--u) * 3.6); bottom: calc(var(--u) * 3.6); width: calc(var(--u) * 10); height: calc(var(--u) * 10); padding: calc(var(--u) * 2.6); box-sizing: border-box; border-radius: 50%; background: var(--cl-blue); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: clv-run var(--cl-loop) ease-out infinite both; }
.clv-cursor { left: calc(var(--u) * 81); top: calc(var(--u) * 61); width: calc(var(--u) * 6.5); height: calc(var(--u) * 9.5); opacity: 0; fill: #111; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; transform-origin: 10% 10%; animation: clv-cursor var(--cl-loop) cubic-bezier(.65, 0, .35, 1) infinite both; }

/* 5 · The batch: every photo gets its verdict, and the one at risk is swapped. */
.clv-grid { left: calc(var(--u) * 10.4); top: calc(var(--u) * 13.1); display: grid; grid-template-columns: repeat(4, calc(var(--u) * 18)); grid-auto-rows: calc(var(--u) * 23); gap: calc(var(--u) * 2.4); animation: clv-grid var(--cl-loop) linear infinite both; }
.clv-tile { position: relative; border-radius: calc(var(--u) * 2.2); background: #1a2433 center / cover; animation: clv-tile var(--cl-loop) cubic-bezier(.3, 1.3, .5, 1) infinite both; animation-delay: calc(var(--i) * 40ms); }
.clv-swap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; animation: clv-flag var(--cl-loop) ease infinite both; }
.clv-pics { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.clv-pics b { position: absolute; inset: 0; background-position: center; background-size: cover; }
.clv-out { background-image: url(media/asset-clearance/clario-loop-shoe.webp); animation: clv-out var(--cl-loop) cubic-bezier(.65, 0, .35, 1) infinite both; }
.clv-in { background-image: url(media/asset-clearance/clario-loop-runner.webp); translate: 0 105%; animation: clv-in var(--cl-loop) cubic-bezier(.65, 0, .35, 1) infinite both; }
.clv-chip { position: absolute; z-index: 1; top: calc(var(--u) * -1.8); right: calc(var(--u) * -1.8); width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); box-sizing: border-box; padding: calc(var(--u) * 1.3); border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * .6) var(--cl-base); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: clv-chip var(--cl-loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; animation-delay: calc(var(--i) * 60ms); }
.clv-chip.is-g { background: var(--cl-g); } .clv-chip.is-a { background: var(--cl-a); } .clv-chip.is-r { background: var(--cl-r); }
.clv-swap .clv-chip.is-r { animation: clv-chip-flag var(--cl-loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; }
.clv-late { scale: 0; animation: clv-chip-in var(--cl-loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; }

@keyframes clv-ground {
  0%, 23.33% { background-color: var(--cl-base); }
  27.33%, 40% { background-color: var(--cl-dim); }
  42.67%, 86% { background-color: var(--cl-base); }
  90.67%, 97.33% { background-color: var(--cl-calm); }
  100% { background-color: var(--cl-base); }
}
@keyframes clv-phone-a {
  0% { opacity: 0; translate: 0 calc(var(--u) * 14); filter: blur(0); }
  5.33%, 40% { opacity: 1; translate: 0 0; filter: blur(0); }
  44.67%, 100% { opacity: 0; translate: 0 calc(var(--u) * 40); filter: blur(calc(var(--u) * 1)); }
}
@keyframes clv-like {
  0%, 12.67% { scale: 1; fill: transparent; stroke: currentColor; }
  13.47% { scale: 1.35; fill: #ff3b5c; stroke: #ff3b5c; }
  14.67%, 100% { scale: 1; fill: #ff3b5c; stroke: #ff3b5c; }
}
@keyframes clv-soft {
  0%, 24.67% { filter: none; }
  28%, 100% { filter: blur(calc(var(--u) * 1.4)) grayscale(.7) brightness(.85); }
}
@keyframes clv-veil {
  0%, 26% { opacity: 0; }
  28.67%, 100% { opacity: 1; }
}
@keyframes clv-notice {
  0%, 22.67% { opacity: 0; translate: 0 calc(var(--u) * -9); }
  25.33%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes clv-rew {
  0%, 40% { opacity: 0; translate: calc(var(--u) * 6) 0; }
  41.33%, 44.67% { opacity: 1; translate: 0 0; }
  46%, 100% { opacity: 0; translate: calc(var(--u) * -6) 0; }
}
@keyframes clv-ask {
  0%, 45.33% { opacity: 0; translate: 0 calc(var(--u) * 6); scale: .96; }
  47.67%, 64% { opacity: 1; translate: 0 0; scale: 1; }
  65.67%, 100% { opacity: 0; translate: 0 0; scale: .96; }
}
@keyframes clv-word {
  0%, 48.33% { opacity: 0; }
  48.73%, 100% { opacity: 1; }
}
@keyframes clv-cursor {
  0%, 58.33% { opacity: 0; translate: calc(var(--u) * 12) calc(var(--u) * 20); scale: 1; }
  59.33% { opacity: 1; }
  61.33% { opacity: 1; translate: 0 0; scale: 1; }
  62.40% { scale: .82; }
  63.07%, 64% { opacity: 1; translate: 0 0; scale: 1; }
  65.67%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes clv-run {
  0%, 62% { scale: 1; box-shadow: 0 0 0 0 transparent; }
  62.40% { scale: .86; box-shadow: 0 0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--cl-blue) 30%, transparent); }
  63.67%, 100% { scale: 1; box-shadow: 0 0 0 calc(var(--u) * 3.4) transparent; }
}
@keyframes clv-grid {
  0%, 64.67% { opacity: 0; }
  65%, 85% { opacity: 1; }
  86.67%, 100% { opacity: 0; }
}
@keyframes clv-tile {
  0%, 65% { opacity: 0; scale: .7; }
  66.20% { opacity: 1; scale: 1.04; }
  67%, 100% { opacity: 1; scale: 1; }
}
@keyframes clv-chip {
  0%, 69% { scale: 0; }
  69.80% { scale: 1.25; }
  70.47%, 100% { scale: 1; }
}
@keyframes clv-flag {
  0%, 72.33% { box-shadow: inset 0 0 0 0 transparent; }
  73.33%, 78.33% { box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--cl-r); }
  81.33%, 82% { box-shadow: inset 0 0 0 0 transparent; }
  82.80% { box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--cl-g); }
  85%, 100% { box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--cl-g); }
}
@keyframes clv-chip-flag {
  0%, 71% { scale: 0; }
  71.80% { scale: 1.25; }
  72.47%, 78.33% { scale: 1; }
  79.33%, 100% { scale: 0; }
}
@keyframes clv-out {
  0%, 78.33% { translate: 0 0; }
  81.33%, 100% { translate: 0 -105%; }
}
@keyframes clv-in {
  0%, 78.67% { translate: 0 105%; }
  81.67%, 100% { translate: 0 0; }
}
@keyframes clv-chip-in {
  0%, 82% { scale: 0; }
  82.80% { scale: 1.25; }
  83.47%, 100% { scale: 1; }
}
@keyframes clv-phone-b {
  0%, 86% { opacity: 0; translate: 0 calc(var(--u) * 14); }
  90.67%, 97.33% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}
@keyframes clv-notice-b {
  0%, 90% { opacity: 0; translate: 0 calc(var(--u) * -9); }
  92.67%, 100% { opacity: 1; translate: 0 0; }
}

/* Still: the batch with its verdicts. */
@media (prefers-reduced-motion: reduce) {
  .ground-clario, .ground-clario * { animation: none !important; }
  .clv-swap::after { box-shadow: inset 0 0 0 calc(var(--u) * .8) var(--cl-r); }
}

/* Chata-gata: the assistant doing what its case study says, as one calm 13s loop, after
   rachelchen.tech's cards (user, 2026-11-08). The panel opens on its real welcome and its
   three real starter questions; a visitor picks the Anubhuti one; the source comes first,
   then the answer; then they type "What's his notice period?" and get the honest no it
   really gives, with the Contact page as the source, shown first. The panel is the product's own night look on
   the site's orange, so it never reads as a copy card. Everything sits on a 100u stage
   sized by the shorter side. The frames come from scripts/make_chata_loop.py (seconds in,
   percentages out): change the times there and run it, which rewrites this block and the
   card's markup. Reduced motion shows the answered question, still. */
.ground-chata {
  --ch-loop: 13s;
  --ch-orange: var(--accent);
  --ch-panel: #0b0c0e; --ch-line: rgb(255 255 255 / .12); --ch-mute: #9aa0aa;
  container-type: size;
  background:
    radial-gradient(110% 80% at 18% 0%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, transparent 60%),
    linear-gradient(160deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #1a0703) 100%);
}
.chv { --u: min(1cqw, 1cqh); position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 100); height: calc(var(--u) * 100); translate: -50% -50%; font-family: var(--face-sans, sans-serif); color: #fff; }
.chv > * { position: absolute; }
.chv svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chv :is(i, u, em, b) { font-style: normal; text-decoration: none; }

.chv-panel { left: calc(var(--u) * 11); top: calc(var(--u) * 5); width: calc(var(--u) * 78); height: calc(var(--u) * 90); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(var(--u) * 4); background: var(--ch-panel); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 9) rgb(40 10 0 / .45), inset 0 0 0 1px var(--ch-line); animation: chv-panel var(--ch-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.chv-head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 2.2); height: calc(var(--u) * 10.5); padding: 0 calc(var(--u) * 4.5); border-bottom: 1px solid var(--ch-line); }
/* .bt-art img makes every picture a full-card layer; the avatar sits in the header instead. */
.chv-head img { position: static; inset: auto; scale: 1; flex: none; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); border-radius: 50%; }
.chv-head b { flex: 1; font: 400 calc(var(--u) * 3.2)/1 var(--face-mono, monospace); letter-spacing: .04em; }
.chv-head i { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); margin-left: calc(var(--u) * 2.6); color: var(--ch-mute); }
.chv-body { position: relative; flex: 1; }
.chv-body > * { position: absolute; inset: 0; box-sizing: border-box; padding: calc(var(--u) * 4.5); }
.chv-welcome { animation: chv-welcome var(--ch-loop) ease infinite both; }
.chv-hello { display: block; font: 600 calc(var(--u) * 5.4)/1.15 var(--face-display, sans-serif); letter-spacing: -.02em; }
.chv-note { display: block; margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 3.6); color: var(--ch-mute); font-size: calc(var(--u) * 2.5); line-height: 1.45; }
.chv-prompt { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin: 0 calc(var(--u) * -1.6); padding: calc(var(--u) * 2.3) calc(var(--u) * 1.6); border-top: 1px solid var(--ch-line); border-radius: calc(var(--u) * 1); font-size: calc(var(--u) * 2.7); line-height: 1.3; }
.chv-prompt i { flex: none; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); color: var(--ch-mute); }
.chv-prompt.is-picked { animation: chv-pick var(--ch-loop) ease infinite both; }
.chv-q { display: block; width: fit-content; max-width: calc(var(--u) * 52); margin-left: auto; padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * .8) calc(var(--u) * 3); background: #f4f4f6; color: #111; font-size: calc(var(--u) * 2.8); line-height: 1.3; transform-origin: 100% 0; }
.chv-src { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 calc(var(--u) * 2); margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 2.2); border-top: 1px solid var(--ch-line); border-bottom: 1px solid var(--ch-line); }
.chv-src.is-first { border-left: calc(var(--u) * .5) solid var(--ch-orange); }
.chv-src b { font-weight: 600; font-size: calc(var(--u) * 2.8); }
.chv-src u { grid-column: 1; margin-top: calc(var(--u) * .8); color: var(--ch-mute); font: 400 calc(var(--u) * 1.9)/1.3 var(--face-mono, monospace); letter-spacing: .06em; text-transform: uppercase; }
.chv-src i { grid-row: 1 / span 2; grid-column: 2; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); color: var(--ch-mute); }
.chv-ans { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 3.3); line-height: 1.45; }
.chv-b { animation: chv-b var(--ch-loop) cubic-bezier(.65, 0, .35, 1) infinite both; }
.chv-b .chv-q { animation: chv-bubble var(--ch-loop) cubic-bezier(.3, 1.3, .5, 1) infinite both; }
.chv-b .chv-src { animation: chv-src-b var(--ch-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.chv-b .chv-ans i { animation: chv-word-b var(--ch-loop) linear infinite both; animation-delay: calc(var(--i) * 120ms); }
.chv-c { animation: chv-c var(--ch-loop) ease infinite both; }
.chv-c .chv-q { animation: chv-bubble-c var(--ch-loop) cubic-bezier(.3, 1.3, .5, 1) infinite both; }
.chv-c .chv-ans i { animation: chv-word-c var(--ch-loop) linear infinite both; animation-delay: calc(var(--i) * 120ms); }
.chv-c .chv-src { animation: chv-src-c var(--ch-loop) cubic-bezier(.22, 1, .36, 1) infinite both; }
.chv-compose { flex: none; padding: calc(var(--u) * 3) calc(var(--u) * 4.5) calc(var(--u) * 3.2); border-top: 1px solid var(--ch-line); }
.chv-input { position: relative; display: flex; align-items: center; height: calc(var(--u) * 9); padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * 3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); font-size: calc(var(--u) * 2.9); }
.chv-hint, .chv-typed { position: absolute; left: calc(var(--u) * 3); top: 50%; translate: 0 -50%; white-space: nowrap; }
.chv-hint { color: var(--ch-mute); animation: chv-hint var(--ch-loop) linear infinite both; }
.chv-typed { opacity: 0; animation: chv-typed var(--ch-loop) linear infinite both; }
.chv-typed i { animation: chv-key var(--ch-loop) linear infinite both; animation-delay: calc(var(--i) * 140ms); }
.chv-send { margin-left: auto; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); box-sizing: border-box; padding: calc(var(--u) * 1.8); border-radius: 50%; color: #fff; background: color-mix(in srgb, var(--ch-orange) 35%, #111); animation: chv-send var(--ch-loop) ease infinite both; }
.chv-foot { display: block; margin-top: calc(var(--u) * 1.8); color: var(--ch-mute); font: 400 calc(var(--u) * 1.9)/1.3 var(--face-mono, monospace); }
.chv-cursor { left: 0; top: 0; width: calc(var(--u) * 6.2); height: calc(var(--u) * 9); opacity: 0; transform-origin: 10% 10%; animation: chv-cursor var(--ch-loop) cubic-bezier(.65, 0, .35, 1) infinite both; }
.chv-cursor svg { fill: #111; stroke: #fff; stroke-width: 1.3; }

@keyframes chv-panel {
  0% { opacity: 0; translate: 0 calc(var(--u) * 10); }
  5.38%, 95.38% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}
@keyframes chv-welcome {
  0%, 21.54% { opacity: 1; translate: 0 0; }
  23.85%, 100% { opacity: 0; translate: 0 calc(var(--u) * -4); }
}
@keyframes chv-pick {
  0%, 15.77% { background-color: transparent; }
  16.15%, 21.54% { background-color: rgb(255 255 255 / .08); }
  23.85%, 100% { background-color: transparent; }
}
@keyframes chv-cursor {
  0%, 8.46% { opacity: 0; translate: calc(var(--u) * 90) calc(var(--u) * 96); scale: 1; }
  9.62% { opacity: 1; }
  14.62% { opacity: 1; translate: calc(var(--u) * 62) calc(var(--u) * 45); scale: 1; }
  16.15% { scale: .82; }
  16.92% { scale: 1; }
  20% { opacity: 1; translate: calc(var(--u) * 62) calc(var(--u) * 45); }
  21.54%, 50% { opacity: 0; translate: calc(var(--u) * 76) calc(var(--u) * 98); scale: 1; }
  51.15% { opacity: 1; }
  53.46% { opacity: 1; translate: calc(var(--u) * 44) calc(var(--u) * 85); scale: 1; }
  54.62% { scale: .82; }
  55.38% { scale: 1; }
  57.69% { opacity: 1; translate: calc(var(--u) * 44) calc(var(--u) * 85); }
  59.23%, 100% { opacity: 0; translate: calc(var(--u) * 44) calc(var(--u) * 85); scale: 1; }
}
@keyframes chv-b {
  0%, 23.08% { opacity: 0; }
  23.46%, 56.92% { opacity: 1; translate: 0 0; }
  60%, 100% { opacity: 0; translate: 0 calc(var(--u) * -10); }
}
@keyframes chv-bubble {
  0%, 23.08% { opacity: 0; scale: .9; }
  25%, 100% { opacity: 1; scale: 1; }
}
@keyframes chv-src-b {
  0%, 26.92% { opacity: 0; translate: 0 calc(var(--u) * 3); }
  29.23%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes chv-word-b {
  0%, 30.77% { opacity: 0; }
  31.23%, 100% { opacity: 1; }
}
@keyframes chv-c {
  0%, 63.85% { opacity: 0; }
  64.23%, 95.38% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes chv-bubble-c {
  0%, 63.85% { opacity: 0; scale: .9; }
  65.77%, 100% { opacity: 1; scale: 1; }
}
@keyframes chv-word-c {
  0%, 71.54% { opacity: 0; }
  72%, 100% { opacity: 1; }
}
@keyframes chv-src-c {
  0%, 67.69% { opacity: 0; translate: 0 calc(var(--u) * 3); }
  70%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes chv-hint {
  0%, 55.38% { opacity: 1; }
  55.77%, 63.08% { opacity: 0; }
  63.85%, 100% { opacity: 1; }
}
@keyframes chv-typed {
  0%, 55.77% { opacity: 1; }
  63.08% { opacity: 1; }
  63.85%, 100% { opacity: 0; }
}
@keyframes chv-key {
  0%, 55.77% { opacity: 0; }
  56.08%, 100% { opacity: 1; }
}
@keyframes chv-send {
  0%, 55.77% { background-color: color-mix(in srgb, var(--ch-orange) 35%, #111); scale: 1; }
  56.54%, 62.31% { background-color: var(--ch-orange); scale: 1; }
  62.77% { scale: .86; }
  63.54% { background-color: var(--ch-orange); scale: 1; }
  65.38%, 100% { background-color: color-mix(in srgb, var(--ch-orange) 35%, #111); scale: 1; }
}

/* Still: the answered question, source first. */
@media (prefers-reduced-motion: reduce) {
  .ground-chata, .ground-chata * { animation: none !important; }
  .chv-welcome, .chv-c, .chv-cursor { opacity: 0; }
}

/* Minimal: the eye from that page's name, on that page's paper, and the way in now the
   switch has gone. It watches the pointer from anywhere on the page (bento.js). Sized by
   the picture's shorter side, so it stays whole when the card opens. */
.ground-eye { container-type: size; display: grid; place-items: center; background: #f0efe9; }
.bt-eye { display: block; width: min(76cqw, 120cqh); height: auto; overflow: visible; }
.bt-eye .eye-outline, .bt-eye .eye-pupil path { fill: #101820; filter: url(#ink-grain); }

/* Anubhuti: the shop's type and button above a token panel, on the shop's own light
   palette: ivory into sand into copper, so it stands apart from the copy cards around it
   in either theme. Quiet like a real design tool: hairlines, one accent. One row changes at
   a time, and the specimen above it answers, because that's what the tokens do. All values
   are the system's own. It runs by itself; rest the pointer on a row and that row changes. */
@font-face { font-family: 'Gilda Display'; src: url('fonts/gilda-display-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; src: url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); font-display: swap; }
.ground-anu {
  --t-action: #a73c24; --t-radius: .7cqw; --t-pad: 4cqw; --t-face: 'Gilda Display', serif;
  --t-ink: #2a1d15; --t-ink2: #6b5646; --t-line: rgb(42 29 21 / .16);
  container-type: inline-size;
  background: linear-gradient(155deg, #fbf7f0 0%, #f3e8d8 50%, #e6b181 118%);
}
.ak { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 4cqw; padding: 7cqw; color: var(--t-ink); }
.ak-stage { display: grid; justify-items: start; gap: 4cqw; }
.ak-word { font: 400 8.6cqw/1.06 var(--t-face); }
.ak-btn { padding: 2cqw var(--t-pad); border-radius: var(--t-radius); background: var(--t-action); font: 400 3.1cqw/1.1 'Instrument Sans', sans-serif; color: #fbf7f0; transition: background-color .6s var(--ease), padding .6s var(--ease), border-radius .6s var(--ease); }
.ak-panel { display: grid; border-top: 1px solid var(--t-line); }
.ak-row { display: grid; grid-template-columns: 1fr 5.4cqw minmax(0, 1.5fr); align-items: center; gap: 2.4cqw; padding: 2.05cqw 1.4cqw; border-bottom: 1px solid var(--t-line); font: 400 3.15cqw/1.15 'Instrument Sans', sans-serif; color: var(--t-ink2); transition: background-color .35s var(--ease), color .35s var(--ease); }
.ak-row b { justify-self: end; font: 400 2.85cqw/1.15 var(--face-mono, monospace); color: var(--t-ink); }
.ak-row.is-on { background: rgb(42 29 21 / .07); color: var(--t-ink); }
.ak-ico { display: block; justify-self: center; font-style: normal; }
.ak-ico-colour { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--t-action); transition: background-color .6s var(--ease); }
.ak-ico-type { font: 400 3.6cqw/1 var(--t-face); color: var(--t-ink2); }
.ak-ico-radius { width: 3.2cqw; height: 3.2cqw; box-sizing: border-box; border: 1px solid var(--t-ink2); border-right: 0; border-bottom: 0; border-top-left-radius: calc(var(--t-radius) * .9); transition: border-radius .6s var(--ease); }
.ak-ico-space { position: relative; width: 3.8cqw; height: 2.6cqw; box-sizing: border-box; border-inline: 1px solid var(--t-ink2); }
.ak-ico-space::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--t-ink2); }
/* Opened, the card's own title says the rest: the panel and the button stay. */
.bt-media:is(:hover, :focus-visible, .is-open) .ak-word { display: none; }
.bt-media:is(:hover, :focus-visible, .is-open) .ak { gap: 2.4cqw; padding: 4cqw 5cqw; }
.bt-media:is(:hover, :focus-visible, .is-open) .ak-row { padding-block: 1.3cqw; }

/* Purr, on its own flat ground, plays what using it feels like, on one slow loop: it rests,
   the keys go down, the bubble fills with waves while you talk, you let go. Every part shares
   --purr-loop, so they can't drift apart. The bars' shape comes from two layers: the i opens
   and closes with the loop, and its ::before breathes at its own offset, so the wave never
   moves as one block. --u is 1% of the card, or less when it opens and the picture gets short. */
.ground-purr {
  --purr-loop: 9s;
  --pk-ground: #fff; --pk-plate: #f6f6f6; --pk-plate-top: #fff; --pk-lip: #e2e2e2; --pk-side-a: #ededed; --pk-side-b: #dcdcdc;
  --pk-line: rgb(0 0 0 / .16); --pk-top: #fff; --pk-top-down: #f7f7f7; --pk-ink: #7a7a7a; --pk-ink-down: #2e2e2e;
  container-type: size; display: grid; place-items: center; background: var(--pk-ground);
}
/* On the white day page a white card disappears, so the card and keys reverse. The pill
   doesn't, so the ground stops short of black to keep the pill visible on it. */
:root:not(.theme-dark) .ground-purr {
  --pk-ground: #33373e; --pk-plate: #2a2e34; --pk-plate-top: #3b4048; --pk-lip: #1f2226; --pk-side-a: #24272c; --pk-side-b: #1b1e22;
  --pk-line: rgb(0 0 0 / .5); --pk-top: #474c55; --pk-top-down: #3d4148; --pk-ink: #c3c8d0; --pk-ink-down: #fff;
}
/* The overlay at the app's own proportions: 42 x 8 at rest, 132 x 34 recording, here at
   0.56u to the pixel. It sits at the exact centre of the card and grows from there. */
.purr-scene { --u: min(1cqw, 1.2cqh); position: absolute; inset: 0; }
.purr-bubble { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4.5); overflow: hidden; width: calc(var(--u) * 23.5); height: calc(var(--u) * 4.5); border-radius: var(--radius-pill); background: rgb(16 18 21 / .86); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13), 0 calc(var(--u) * 3.4) calc(var(--u) * 10) rgb(0 0 0 / .28); animation: purr-pill var(--purr-loop) cubic-bezier(.2, .8, .2, 1) infinite; }
.purr-dot { flex: none; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border-radius: 50%; background: #ff5a5f; opacity: 0; animation: purr-show var(--purr-loop) linear infinite, purr-tally 1.6s ease-out infinite; }
.purr-wave { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.1); height: calc(var(--u) * 10); opacity: 0; animation: purr-show var(--purr-loop) linear infinite; }
.purr-wave i { display: block; width: calc(var(--u) * 1.4); height: calc(var(--h) * 100%); animation: purr-open var(--purr-loop) ease-in-out infinite; animation-delay: calc(var(--i) * 14ms); }
.purr-wave i::before { content: ''; display: block; height: 100%; border-radius: var(--radius-pill); background: #f2f3f5; animation: purr-talk 1.15s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.37s); }

/* Two keys in a white keypad. Each kbd is a whole key and always fills its space, so nothing
   behind it ever shows. At rest you see its top (the span) and its front side below it, with
   a shadow on the plate. Pressed, the top spreads down over the side until the key is flush,
   and the shadow closes. The drop takes about a tenth of a second, the way a key does, with a
   small bounce on the way back. The second key follows the first, the way a hand does. */
/* The keypad sits midway between the open pill's bottom edge and the card's bottom edge, so
   the gap above it matches the gap below it. Half the pill is 9.5u; the plate's lip adds 1.6u
   under its box, so its box sits half of that higher. */
.purr-keys { position: absolute; left: 50%; top: calc(75% + var(--u) * 3.95); translate: -50% -50%; display: flex; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 4.2); background: var(--pk-plate); box-shadow: inset 0 1px 0 var(--pk-plate-top), 0 calc(var(--u) * 1.6) 0 var(--pk-lip), 0 calc(var(--u) * 3.6) calc(var(--u) * 5) rgb(0 0 0 / .14); }
.purr-keys kbd { position: relative; display: block; overflow: hidden; width: calc(var(--u) * 20); height: calc(var(--u) * 21); border-radius: calc(var(--u) * 2.6); background: linear-gradient(var(--pk-side-a), var(--pk-side-b)); box-shadow: 0 0 0 1px var(--pk-line), 0 calc(var(--u) * 1.6) calc(var(--u) * 1.8) rgb(0 0 0 / .2); animation: purr-seat var(--purr-loop) linear infinite; }
.purr-keys span { position: absolute; inset: 0 0 auto; height: calc(var(--u) * 15.4); display: grid; place-items: center; border-radius: calc(var(--u) * 2.6); background: var(--pk-top); font: 500 calc(var(--u) * 4.4)/1 var(--face-sans, sans-serif); color: var(--pk-ink); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1) rgb(0 0 0 / .14); animation: purr-press var(--purr-loop) linear infinite; }
.purr-keys kbd + kbd, .purr-keys kbd + kbd span { animation-delay: 90ms; }
.purr-win svg { display: block; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); fill: currentColor; }
@keyframes purr-pill {
  0%, 18.2%, 82.8%, 100% { width: calc(var(--u) * 23.5); height: calc(var(--u) * 4.5); background: rgb(16 18 21 / .86); }
  20.6%, 80.4% { width: calc(var(--u) * 74); height: calc(var(--u) * 19); background: rgb(16 18 21 / .95); }
}
@keyframes purr-show { 0%, 19.2%, 80.6%, 100% { opacity: 0; } 20.6%, 80% { opacity: 1; } }
@keyframes purr-tally { from { box-shadow: 0 0 0 0 rgb(255 90 95 / .55); } to { box-shadow: 0 0 0 calc(var(--u) * 4.5) rgb(255 90 95 / 0); } }
@keyframes purr-open { 0%, 21.5%, 83%, 100% { transform: scaleY(.12); } 28%, 78% { transform: scaleY(1); } }
@keyframes purr-talk { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@keyframes purr-press {
  0%, 16% { height: calc(var(--u) * 15.4); background: var(--pk-top); color: var(--pk-ink); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1) rgb(0 0 0 / .14); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  17.2%, 80% { height: calc(var(--u) * 21); background: var(--pk-top-down); color: var(--pk-ink-down); box-shadow: inset 0 calc(var(--u) * .9) calc(var(--u) * 1.5) rgb(0 0 0 / .13); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  81.6% { height: calc(var(--u) * 14.9); background: var(--pk-top); color: var(--pk-ink); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1) rgb(0 0 0 / .14); animation-timing-function: ease-in-out; }
  83%, 100% { height: calc(var(--u) * 15.4); background: var(--pk-top); color: var(--pk-ink); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1) rgb(0 0 0 / .14); }
}
@keyframes purr-seat {
  0%, 16%, 83%, 100% { box-shadow: 0 0 0 1px var(--pk-line), 0 calc(var(--u) * 1.6) calc(var(--u) * 1.8) rgb(0 0 0 / .2); }
  17.2%, 80% { box-shadow: 0 0 0 1px var(--pk-line), 0 0 0 rgb(0 0 0 / 0); }
}

/* Every card that is only copy has its top right corner peeled over, and rest the
   pointer there and it lifts further. The sheet is the ::after, cut with clip-path so
   no edge or rounding is left in the corner. The card itself isn't cut, so the corner
   stays hoverable as the sheet pulls away from under the pointer. The size is a
   registered property: the cut and the flap move as one. */
@property --bt-peel { syntax: '<length>'; inherits: true; initial-value: 48px; }
.bt:not(.bt-media) {
  --bt-peel: var(--space-7);
  /* The card's colour: the site's orange at 10%, easing away to the page. */
  --bt-tint: color-mix(in srgb, var(--accent) 10%, var(--paper));
  isolation: isolate;
  background: none;
  transition: --bt-peel var(--dur) var(--ease);
}
.bt:not(.bt-media):has(.bt-corner:hover) { --bt-peel: calc(var(--space-9) + var(--space-6)); }
.bt:not(.bt-media)::after {
  z-index: -1;
  background: linear-gradient(150deg, var(--bt-tint), color-mix(in srgb, var(--accent) 3%, var(--paper)));
  clip-path: polygon(0 0, calc(100% - var(--bt-peel)) 0, 100% var(--bt-peel), 100% 100%, 0 100%);
}
.bt-corner {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--space-8) + var(--space-5));
  height: calc(var(--space-8) + var(--space-5));
  filter: drop-shadow(calc(var(--bt-peel) / -14) calc(var(--bt-peel) / 14) calc(var(--bt-peel) / 6) rgb(0 0 0 / .32));
}
.bt-corner::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: var(--bt-peel);
  height: var(--bt-peel);
  border-bottom-left-radius: calc(var(--bt-peel) / 4);
  background: linear-gradient(225deg, color-mix(in srgb, var(--ink) 30%, var(--bt-tint)) 50%, color-mix(in srgb, var(--ink) 12%, var(--bt-tint)) 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}


/* Small tiles: the one-liner and the numbers matter most, so the subtext steps aside
   and the picture keeps a real share of the card. */
@media (min-width: 861px) and (max-width: 1200px) {
  .bt { padding: var(--space-4); }
  .bt-media .bt-meta { display: none; }
}
@media (max-width: 860px) {
  .bt-grid { grid-template-columns: minmax(0, 1fr); }
  /* No peel on phones (user, 2026-11-08): the copy cards keep a whole, rounded corner. */
  .bt:not(.bt-media)::after { clip-path: none; }
  .bt-corner { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-info, .bt-art, .bt-art video, .bt-go { transition: none; }
  .purr-wave i, .purr-wave i::before { animation: none; }
  .purr-keys kbd { animation: none; box-shadow: 0 0 0 1px var(--pk-line); }
  .purr-keys span { animation: none; height: calc(var(--u) * 21); background: var(--pk-top-down); color: var(--pk-ink-down); box-shadow: inset 0 calc(var(--u) * .9) calc(var(--u) * 1.5) rgb(0 0 0 / .13); }
  .rp-island, .rp-sit { animation: none; }
  .rp-island { width: 76cqw; height: 16cqw; border-radius: 8cqw; }
  .rp-back { animation: none; opacity: 1; }
  .purr-bubble { animation: none; width: calc(var(--u) * 74); height: calc(var(--u) * 19); }
  .purr-dot, .purr-wave { animation: none; opacity: 1; }
  .bt:not(.bt-media) { transition: none; }
}

/* ---- Fleet, CSS Toolkit and Museum as live scenes (2026-11-09) -----------
   Drawn the way Purr, Chata-gata and Clario are: the product's own UI on its
   own ground, at the card's centre, sized in --u (1% of the card, or less
   when the card opens and the ground gets short), so on hover the scene
   shrinks and travels as one piece and nothing is cut. One loop each. */

/* Fleet: what the crew confirms is what the customer sees. The customer's
   card waits on "Checking stop"; the crew's bar drops in, its button is
   pressed, and the chip turns to a green "Confirmed". Fleet's cranberry. */
.ground-fleet { --fl-loop: 8s; container-type: size; background: linear-gradient(135deg, #b51f30 12%, #e23744 68%); }
.flv { --u: min(1cqw, 1cqh); position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 100); height: calc(var(--u) * 100); translate: -50% -50%; font-family: var(--face-sans, sans-serif); color: #1c1c1c; }
.flv-crew { position: absolute; left: 50%; top: calc(var(--u) * 9); translate: -50% 0; display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 3.2); border-radius: var(--radius-pill); background: #141414; color: #fff; font-size: calc(var(--u) * 3.1); white-space: nowrap; box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgb(0 0 0 / .35); animation: flv-crew var(--fl-loop) cubic-bezier(.2, .8, .2, 1) infinite; }
.flv-crew i { font: 400 calc(var(--u) * 2.2)/1 var(--face-mono, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .6; font-style: normal; }
.flv-crew b { padding: calc(var(--u) * 1.3) calc(var(--u) * 2.6); border-radius: var(--radius-pill); background: #e23744; font-weight: 600; animation: flv-press var(--fl-loop) linear infinite; }
.flv-card { position: absolute; left: 50%; top: calc(var(--u) * 23); translate: -50% 0; width: calc(var(--u) * 70); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgb(60 0 10 / .35); }
.flv-name { display: block; font: 700 calc(var(--u) * 4.6)/1.15 var(--face-display, sans-serif); letter-spacing: -.02em; }
.flv-rate { display: inline-block; margin-top: calc(var(--u) * 1.4); padding: calc(var(--u) * .5) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1); background: #1f8a4c; color: #fff; font-size: calc(var(--u) * 2.4); font-weight: 600; }
.flv-where { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.9); color: #666; }
.flv-where svg { width: calc(var(--u) * 3); height: calc(var(--u) * 3); fill: none; stroke: currentColor; stroke-width: 2; }
.flv-slot { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 2.4); background: #fdeced; color: #b51f30; }
.flv-slot b { display: block; font-size: calc(var(--u) * 3.6); font-weight: 700; }
.flv-slot span { font-size: calc(var(--u) * 2.6); color: #8a4a52; }
/* Two chips in one place: the amber wait, then the green answer. */
.flv-status { position: relative; display: block; height: calc(var(--u) * 6.4); margin-top: calc(var(--u) * 3); }
.flv-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); height: 100%; padding: 0 calc(var(--u) * 2.8); border-radius: var(--radius-pill); font-size: calc(var(--u) * 3); font-weight: 600; white-space: nowrap; }
.flv-wait { background: #fff4d6; color: #8a5a00; animation: flv-wait var(--fl-loop) linear infinite; }
.flv-wait i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; border: calc(var(--u) * .5) solid currentColor; border-right-color: transparent; animation: flv-spin 1s linear infinite; }
.flv-ok { background: #e3f5ea; color: #1f8a4c; opacity: 0; animation: flv-ok var(--fl-loop) cubic-bezier(.2, .8, .2, 1) infinite; }
.flv-ok svg { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); fill: none; stroke: currentColor; stroke-width: 3; }
.flv-cta { display: block; margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 2.4); background: #e23744; color: #fff; text-align: center; font-size: calc(var(--u) * 3.1); font-weight: 600; opacity: .35; animation: flv-cta var(--fl-loop) linear infinite; }
@keyframes flv-crew { 0%, 22% { opacity: 0; translate: -50% calc(var(--u) * -6); } 28%, 78% { opacity: 1; translate: -50% 0; } 84%, 100% { opacity: 0; translate: -50% calc(var(--u) * -6); } }
@keyframes flv-press { 0%, 38% { scale: 1; filter: none; } 40%, 43% { scale: .9; filter: brightness(.85); } 46%, 100% { scale: 1; filter: none; } }
@keyframes flv-wait { 0%, 44% { opacity: 1; } 47%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes flv-ok { 0%, 44% { opacity: 0; scale: .85; } 49%, 90% { opacity: 1; scale: 1; } 94%, 100% { opacity: 0; scale: 1; } }
@keyframes flv-cta { 0%, 46% { opacity: .35; } 52%, 90% { opacity: 1; } 95%, 100% { opacity: .35; } }
@keyframes flv-spin { to { rotate: 1turn; } }

/* CSS Toolkit: the desk photo the user made after a calendar-wallpaper reel
   (2026-11-09), with the real app on its monitor. The screen cuts, a beat
   each, through the toolkit's own pages: all tools, PX / REM, CSS to inline,
   CSS to Tailwind, then the Figma plugin. The room never moves.
   The photo is square, so the scene is a 100u square (--u, as in the other
   scenes): it shrinks whole when the card opens and the screen stays on the
   monitor. The screen box is the green area measured in the photo:
   x 263-979, y 411-813 of 1254, with a hair of bleed so no green shows. */
.ground-csstk { --ck-loop: 6.5s; container-type: size; background: #c49c7c; }
.ckv { --u: min(1cqw, 1cqh); position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 100); height: calc(var(--u) * 100); translate: -50% -50%; scale: 1.02; }   /* overscan, like the other pictures, so no sliver of the card shows at the edge (2026-11-10) */
.ckv { transition: width var(--dur) var(--ease), height var(--dur) var(--ease), translate var(--dur) var(--ease); }
/* Hover zooms in on the monitor instead of shrinking the room: the scene grows
   until the monitor fills the window that is left, centred on the screen
   (user, 2026-11-10). The monitor is about 68% of the room wide, 44% tall. */
.bt-media:is(:hover, :focus-visible, .is-open) .ckv {
  width: min(calc(100cqw / .68), calc(100cqh / .44));
  height: min(calc(100cqw / .68), calc(100cqh / .44));
  translate: -49.5% -48.85%;
}
.bt-art .ckv img { position: absolute; scale: none; }
.bt-art .ckv .ckv-room { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ckv-screen { position: absolute; left: 20.85%; top: 32.7%; width: 57.35%; height: 32.3%; overflow: hidden; background: #16181b; }
.bt-art .ckv .ckv-shot { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; animation: ckv-cut var(--ck-loop) step-end infinite; animation-delay: calc((5 - var(--n)) * var(--ck-loop) / -5); }
.bt-art .ckv .ckv-shot:first-child { opacity: 1; }
@keyframes ckv-cut { 0% { opacity: 1; } 20% { opacity: 0; } }

/* Museum, version 2 (2026-11-09): drawn from the site itself. A flat, top-down
   floor of cream cells; saved objects snap to the cells in groups under bold
   labels, with the site's own headline, "From the internet." The floor drags
   from group to group and rests at each, the way a visitor pans it. Positions
   are in cells (--c, a tenth of the card), set on each item as --x, --y, --w, --h. */
.ground-museum { --ms-loop: 16s; container-type: size; overflow: hidden; background: #e9e6df; }
.msv { --u: min(1cqw, 1cqh); --c: calc(var(--u) * 10); position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 100); height: calc(var(--u) * 100); translate: -50% -50%; overflow: hidden; }
.msv-floor { position: absolute; left: 0; top: 0; width: calc(var(--c) * 22); height: calc(var(--c) * 20); background-image: linear-gradient(rgb(0 0 0 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / .08) 1px, transparent 1px); background-size: var(--c) var(--c); animation: msv-drag var(--ms-loop) cubic-bezier(.65, 0, .35, 1) infinite; }
.msv-floor > * { position: absolute; left: calc(var(--c) * var(--x)); top: calc(var(--c) * var(--y)); }
.msv-floor figure { margin: 0; width: calc(var(--c) * var(--w)); height: calc(var(--c) * var(--h)); overflow: hidden; background: #fff; }
.msv .msv-floor img { position: static; width: 100%; height: 100%; object-fit: cover; scale: none; }
.msv-label { display: flex; align-items: flex-start; gap: calc(var(--u) * .6); height: var(--c); align-items: center; font: 700 calc(var(--u) * 3.4)/1 var(--face-display, sans-serif); letter-spacing: -.01em; text-transform: uppercase; color: #141414; white-space: nowrap; }
.msv-label sup { font: 400 calc(var(--u) * 1.6)/1 var(--face-mono, monospace); color: #d2470e; }
.msv-head { width: calc(var(--c) * 5); font: 800 calc(var(--u) * 7)/.92 var(--face-display, sans-serif); letter-spacing: -.03em; text-transform: uppercase; color: #141414; }
/* Rest, drag, rest: four stops round the floor and back to the start. */
@keyframes msv-drag {
  0%, 14%   { translate: calc(var(--c) * -1) calc(var(--c) * -.5); }
  25%, 39%  { translate: calc(var(--c) * -9) calc(var(--c) * -3.5); }
  50%, 64%  { translate: calc(var(--c) * -10) calc(var(--c) * -8.5); }
  75%, 89%  { translate: calc(var(--c) * -1) calc(var(--c) * -6.5); }
  100%      { translate: calc(var(--c) * -1) calc(var(--c) * -.5); }
}

@media (prefers-reduced-motion: reduce) {
  .flv *, .ckv *, .msv-floor { animation: none !important; }
  .flv-crew { opacity: 1; } .flv-wait { opacity: 0; } .flv-ok, .flv-cta { opacity: 1; }
  .bt-art .ckv .ckv-shot { opacity: 0; } .bt-art .ckv .ckv-shot:first-child { opacity: 1; }
}

/* ---- Reduce motion, from the rail's switch (2026-11-09) ---------------------
   The same still frames the system's reduced-motion setting gets (each block
   above), on html.motion-off, which script.js sets from the switch. The films
   stop and their posters stay. Generated from the blocks above: keep in step. */
html.motion-off .bt-art video { display: none !important; }
html.motion-off .ground-anu * { transition: none !important; }
html.motion-off .ground-clario, html.motion-off .ground-clario * { animation: none !important; }
html.motion-off .clv-swap::after { box-shadow: inset 0 0 0 calc(var(--u) * .8) var(--cl-r); }
html.motion-off .ground-chata, html.motion-off .ground-chata * { animation: none !important; }
html.motion-off .chv-welcome, html.motion-off .chv-c, html.motion-off .chv-cursor { opacity: 0; }
html.motion-off .bt-info, html.motion-off .bt-art, html.motion-off .bt-art video, html.motion-off .bt-go { transition: none; }
html.motion-off .purr-wave i, html.motion-off .purr-wave i::before { animation: none; }
html.motion-off .purr-keys kbd { animation: none; box-shadow: 0 0 0 1px var(--pk-line); }
html.motion-off .purr-keys span { animation: none; height: calc(var(--u) * 21); background: var(--pk-top-down); color: var(--pk-ink-down); box-shadow: inset 0 calc(var(--u) * .9) calc(var(--u) * 1.5) rgb(0 0 0 / .13); }
html.motion-off .rp-island, html.motion-off .rp-sit { animation: none; }
html.motion-off .rp-island { width: 76cqw; height: 16cqw; border-radius: 8cqw; }
html.motion-off .rp-back { animation: none; opacity: 1; }
html.motion-off .purr-bubble { animation: none; width: calc(var(--u) * 74); height: calc(var(--u) * 19); }
html.motion-off .purr-dot, html.motion-off .purr-wave { animation: none; opacity: 1; }
html.motion-off .bt:not(.bt-media) { transition: none; }
html.motion-off .flv *, html.motion-off .ckv *, html.motion-off .msv-floor { animation: none !important; }
html.motion-off .flv-crew { opacity: 1; }
html.motion-off .flv-wait { opacity: 0; }
html.motion-off .flv-ok, html.motion-off .flv-cta { opacity: 1; }
html.motion-off .bt-art .ckv .ckv-shot { opacity: 0; }
html.motion-off .bt-art .ckv .ckv-shot:first-child { opacity: 1; }

/* ---- Wide cards on hover: the picture keeps the card's full size (2026-11-09).
   Shrinking it to fit under the words left a small box inside the card, and
   cropping it cut logos off. So the picture stays exactly where it is, and the
   words arrive over its bottom. */
.bt--wide .bt-info { position: absolute; z-index: 1; inset: auto 0 0; padding: var(--space-8) var(--space-5) var(--space-4); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* Option C, chosen 2026-11-09: no panel. The picture blurs slightly and darkens
   toward the bottom edge, and the words sit on it in white. Shared with the craft
   tiles (styles.css). */
.bt--wide .bt-info::before, .ct-info::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .38) 55%, transparent); }
/* The whole picture goes slightly soft on hover (user, 2026-11-09), so the words read
   first. It is grown a touch as it blurs, or the blur would pull in a pale rim. */
.bt--wide .bt-art > :is(img, video), .tile.ct .ct-art img { transition: filter var(--dur) var(--ease), scale var(--dur) var(--ease); }
.bt--wide.bt-media:is(:hover, :focus-visible, .is-open) .bt-art > :is(img, video),
.sheet .tile.ct:is(:hover, :focus-visible) .ct-art img { filter: blur(3px); scale: 1.06; }
@media (prefers-reduced-motion: reduce) { .bt--wide .bt-art > :is(img, video), .tile.ct .ct-art img { transition: none; } }
.bt--wide .bt-info .bt-title, .bt--wide .bt-info .bt-go { color: #fff; }
.bt--wide .bt-info .bt-line { color: rgb(255 255 255 / .85); }
.bt--wide .bt-info .bt-meta { color: rgb(255 255 255 / .7); }
.bt--wide.bt-media:is(:hover, :focus-visible, .is-open) .bt-art { inset: 0; border-radius: var(--radius-lg); }

/* Touch screens have no hover (user, 2026-11-10), so a picture card shows its
   words underneath instead: the name, the one-liner, the numbers and the meta,
   below the whole picture, which keeps its own shape. A tap opens the page.
   Phone-width windows get the same, whatever the pointer says (2026-11-10). */
@media (hover: none), (max-width: 760px) {
  .bt.bt-media { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-3); padding: 0; overflow: visible; border-radius: 0; background: none; }
  .bt.bt-media::after { content: none; }
  .bt.bt-media .bt-art,
  .bt.bt-media:is(:hover, :focus-visible, .is-open) .bt-art { position: relative; inset: auto; order: 0; aspect-ratio: 1; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--bt-edge); }
  .bt--wide.bt-media .bt-art,
  .bt--wide.bt-media:is(:hover, :focus-visible, .is-open) .bt-art { aspect-ratio: 16 / 9; }
  .bt.bt-media .bt-info { order: 1; position: static; inset: auto; padding: 0 var(--space-1); opacity: 1; border-radius: 0; }
  .bt--wide .bt-info::before { content: none; }
  .bt--wide .bt-info .bt-title, .bt--wide .bt-info .bt-go { color: var(--ink); }
  .bt--wide .bt-info .bt-line { color: var(--ink-70); }
  .bt--wide .bt-info .bt-meta { color: var(--ink-40); }
  .bt-media .bt-meta { display: block; }
  .bt--wide.bt-media:is(:hover, :focus-visible, .is-open) .bt-art > :is(img, video) { filter: none; scale: 1.02; }
  /* Craft tiles wider than the phone stack: the headline and brand stay on, over the fade. */
  .sheet .tile.ct .ct-info { opacity: 1; }
}

/* Phones: a shorter Work list (user, 2026-11-10). Anubhuti, Repri, Chata-gata, Purr,
   Fleet, then Minimal; the other six wait behind See more and follow it once opened. */
.bt-more-wrap { display: none; }
@media (max-width: 860px) {
  .bt-grid .bt--minimal { order: 1; }
  .bt-grid .bt--more { order: 2; }
  .bt-grid:not(.is-all) .bt--more { display: none; }
  .bt-more-wrap { display: flex; justify-content: center; padding-top: var(--space-6); }
  .bt-grid.is-all + .bt-more-wrap { display: none; }
}

/* Phones (user, 2026-11-10): the Hello playground's box alone comes first (index.html
   swaps it in for the Repri hero on phones), then About (photo and statement, with its
   own See the work button down to the first card), then the work. Only the order
   changes: wider screens keep the hero first and About last. */
.home-about__work { display: none; }
@media (max-width: 760px) {
  .nb-side { display: none; }
  #main:has(> .home-about) { display: grid; grid-template-columns: minmax(0, 1fr); }
  #main:has(> .home-about) > * { order: 5; }
  #main:has(> .home-about) > :is(.nb-hero, .nx-hero) { order: 0; }
  #main:has(> .home-about) > hr.home-rule:nth-of-type(1) { order: 1; display: none; }
  #main:has(> .home-about) > .home-about { order: 2; }
  #main:has(> .home-about) > hr.home-rule:nth-of-type(2) { order: 3; }
  #main:has(> .home-about) > #work { order: 4; }
  .home-about { grid-template-areas: "face hi" "facts facts" "work work"; }
  .home-about__work { display: inline-flex; grid-area: work; justify-self: start; margin-top: var(--space-2); }
  #w-anubhuti { scroll-margin-top: calc(var(--bar-h) + var(--space-4)); }
}

/* Phones: the Hello hero is just its box, the halo and the floating toys, with
   nothing around it: no line above, no headline or Minimal button under it. */
@media (max-width: 760px) {
  .nx-hero :is(.hero-meta, .nx-mob-title, .nx-ctas) { display: none !important; }
}