/* The radio: the original photograph, sliced at its seams. Only the dial glass
   stretches; knobs, wordmark and lettering never do. Source slices are 404px tall
   (cut from the cleaned radio photo, rows 162–566; source in git history), so every offset below is photo pixels × --u.
   Labels are live text lit like the photograph's own printing. */
@property --rh { syntax: '<length>'; inherits: true; initial-value: 120px; }

.radio-set { --rh: 120px; --u: calc(var(--rh) / 404); position: sticky; top: 0; z-index: 60; padding: var(--space-xs) var(--space-2xl) 0; background: linear-gradient(180deg, var(--marketing-room) 70%, color-mix(in srgb, var(--marketing-room) 0%, transparent)); transition: --rh var(--motion-slow) var(--ease-standard); }
.tape-home .radio-set { position: fixed; inset: 0 0 auto; background: none; }
.tape-home .radio-set.is-docked { background: linear-gradient(180deg, var(--marketing-room) 70%, color-mix(in srgb, var(--marketing-room) 0%, transparent)); }
/* One size on every page and at every scroll position (owner, 2026-09-24): no big-to-docked shrink. */

.rs-body { position: relative; display: flex; width: min(100%, 1240px); height: var(--rh); margin-inline: auto; filter: drop-shadow(0 14px 22px var(--marketing-room)); }
.rs-piece { display: block; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; }
.rs-left { flex: 0 0 calc(var(--u) * 280); background-image: url('/assets/radio-left.webp'); }
.rs-glass { flex: 1 1 auto; background-image: url('/assets/radio-glass.webp'); }
.rs-right { flex: 0 0 calc(var(--u) * 280); background-image: url('/assets/radio-right.webp'); }

/* Nameplate: the Michroma wordmark, same letters as the plate, never stretched. */
.rs-brand { position: absolute; left: calc(var(--u) * 149); top: calc(var(--u) * 25); width: calc(var(--u) * 403); height: calc(var(--u) * 105); }
.rs-wordmark { display: block; width: 100%; height: 100%; background: url('/assets/brand/wordmark-dark.svg') left center / contain no-repeat; mix-blend-mode: screen; }
.rs-brand:focus-visible { outline-offset: 2px; }
.rs-motto { position: absolute; right: calc(var(--u) * 300); top: calc(var(--u) * 64); color: color-mix(in srgb, var(--set-ivory) 82%, var(--set-glow)); font: 600 max(10px, calc(var(--u) * 26))/1 var(--font-radio); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 0 6px color-mix(in srgb, var(--set-glow) 35%, transparent); opacity: .86; transition: opacity var(--motion-base); }
.rs-motto { display: none; }

/* Knob faces are cut from the photograph so they can turn and rock for real. */
.rs-knob { position: absolute; display: block; border-radius: 50%; background: no-repeat 0 0 / 100% 100%; transition: transform var(--motion-slow) var(--ease-standard), filter var(--motion-base); }
.rs-home { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 175); width: calc(var(--u) * 160); height: calc(var(--u) * 160); border-radius: 50%; }
.rs-home .rs-knob { inset: 0; background-image: url('/assets/radio-knob-left.webp'); }
.rs-home:hover .rs-knob, .rs-home:focus-visible .rs-knob { transform: rotate(-38deg); filter: brightness(1.18); }
.rs-home.is-turning .rs-knob { transform: rotate(-150deg); filter: brightness(1.3); transition-duration: 240ms; }
.rs-home[aria-current='page'] .rs-knob { filter: brightness(1.12); }
/* Knob words are cut through the metal and lit from behind: a dark upper cut edge, amber light in the letters, no drop shadow (a drop shadow makes them float). */
.rs-knob-word, .rs-rock-word { position: absolute; left: 50%; top: 50%; color: color-mix(in srgb, var(--set-glow) 55%, var(--set-ivory)); font: 600 max(10px, calc(var(--u) * 30))/1 var(--font-radio); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 -1px 0 color-mix(in srgb, var(--marketing-room) 85%, transparent), 0 0 2px color-mix(in srgb, var(--set-glow) 80%, transparent), 0 0 9px color-mix(in srgb, var(--set-glow) 40%, transparent); opacity: .88; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; }
.rs-home:focus-visible, .rs-rock:focus-visible { outline-offset: -2px; }

/* Sign knob is a three-position rocker: rests level, tips up (sign up) or down (sign in). */
.rs-rocker { position: absolute; right: calc(var(--u) * 39); top: calc(var(--u) * 175); width: calc(var(--u) * 160); height: calc(var(--u) * 160); border-radius: 50%; perspective: calc(var(--u) * 420); }
.rs-rocker .rs-knob { inset: 0; background-image: url('/assets/radio-knob-right.webp'); transform-origin: 50% 50%; }
.rs-rocker[data-commit][data-state='up'] .rs-knob { transform: rotateX(22deg); filter: brightness(1.16); }
.rs-rocker[data-commit][data-state='down'] .rs-knob { transform: rotateX(-22deg); filter: brightness(1.16); }
.rs-rock-word { font-size: max(10px, calc(var(--u) * 24)); opacity: .45; transition: opacity var(--motion-base), transform var(--motion-slow) var(--ease-standard); }
.rs-rock-word.up { top: 24%; }
.rs-rock-word.mid { font-size: max(10px, calc(var(--u) * 30)); opacity: .95; }
.rs-rock-word.down { top: 76%; }
.rs-rocker[data-state='up'] .rs-rock-word.up, .rs-rocker[data-state='down'] .rs-rock-word.down { opacity: 1; text-shadow: 0 0 4px var(--set-glow), 0 0 12px var(--set-glow); }
.rs-rock { position: absolute; left: min(0px, calc(50% - 12px)); right: min(0px, calc(50% - 12px)); z-index: 1; }
/* Each half is at least 24×24 CSS px (WCAG 2.5.8). On a small knob the halves grow outward, away from each other, so they never overlap; the links are invisible, so the knob looks the same. */
.rs-rock-up { top: min(0px, calc(50% - 24px)); bottom: 50%; border-radius: 999px 999px 0 0; }
.rs-rock-down { top: 50%; bottom: min(0px, calc(50% - 24px)); border-radius: 0 0 999px 999px; }

/* Dial glass: stations printed above the photographed ticks, numbers below. */
.rs-dial { position: absolute; left: calc(var(--u) * 262); right: calc(var(--u) * 266); top: calc(var(--u) * 172); bottom: calc(var(--u) * 60); }
.rs-stations { position: absolute; inset: 0 2% auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 44%; }
.rs-stations { top: -10%; height: 36%; }
.rs-stations a { position: relative; min-height: 0; height: 100%; }
.rs-stations a::after { content: ''; position: absolute; inset: -6px -4px; min-height: var(--space-touch-target); }
.rs-stations a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-touch-target); padding: 0 var(--space-md); color: color-mix(in srgb, var(--set-ivory) 72%, var(--set-glow)); font: 600 max(11px, calc(var(--u) * 27))/1 var(--font-radio); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 6px color-mix(in srgb, var(--set-glow) 40%, transparent); opacity: .8; transition: opacity var(--motion-base), text-shadow var(--motion-base), color var(--motion-base); }
.rs-stations a:hover, .rs-stations a:focus-visible, .rs-stations a[aria-current='page'], .rs-stations a.is-tuned { color: var(--set-ivory); opacity: 1; text-shadow: 0 0 4px var(--set-glow), 0 0 14px var(--set-glow); }
.rs-stations a:focus-visible { outline-offset: -3px; }
.rs-numbers { position: absolute; left: 5%; right: 5%; bottom: 4%; display: flex; justify-content: space-between; color: color-mix(in srgb, var(--set-ivory) 70%, var(--set-glow)); font: 500 max(10px, calc(var(--u) * 24))/1 var(--font-radio); font-variant-numeric: tabular-nums; text-shadow: 0 0 5px color-mix(in srgb, var(--set-glow) 40%, transparent); opacity: .75; transition: opacity var(--motion-base); }
.rs-numbers i { font-style: normal; }
.rs-numbers { display: none; }
.rs-needle { position: absolute; top: 34%; bottom: 20%; left: var(--needle); width: 2px; margin-left: -1px; background: var(--set-glow); box-shadow: 0 0 6px var(--set-glow), 0 0 14px color-mix(in srgb, var(--marketing-accent) 70%, transparent); transition: left 420ms cubic-bezier(.3, 1.4, .5, 1); }
.rs-tune { display: none; }

/* Narrow screens: the glass becomes one tuning button; stations drop down under it. */
@media (max-width: 820px) {
  .radio-set { --rh: 84px; padding: var(--space-xs) var(--space-md) 0; }
  .rs-motto, .rs-numbers { display: none; }
  .rs-tune { position: absolute; inset: 8% 4%; display: grid; place-items: center; border: 0; background: none; color: var(--set-ivory); font: 600 12px/1 var(--font-radio); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 0 4px var(--set-glow), 0 0 12px var(--set-glow); cursor: pointer; }
  .rs-tune span::after { content: ' ▾'; }
  .rs-tune[aria-expanded='true'] span::after { content: ' ▴'; }
  .rs-stations { grid-template-columns: none; position: fixed; top: calc(var(--rh) + var(--space-md)); left: var(--space-md); right: var(--space-md); display: none; flex-direction: column; height: auto; padding: var(--space-lg); border-radius: var(--rounded-md); background: linear-gradient(180deg, color-mix(in srgb, var(--set-glass) 92%, var(--set-glow)), var(--set-glass)); box-shadow: 0 16px 34px var(--marketing-room), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 40%, transparent); }
  .rs-stations[data-open] { display: flex; }
  .rs-stations a { justify-content: flex-start; font-size: 16px; }
  .rs-needle { top: 12%; bottom: 12%; }
  /* The knob is small on phones: each half gets a larger invisible hit area (at least 24px tall). */
  .rs-rock::after { content: ''; position: absolute; left: -10px; right: -10px; }
  .rs-rock-up::after { top: -12px; bottom: 0; }
  .rs-rock-down::after { top: 0; bottom: -12px; }
}
html:not(.js) .rs-stations { display: flex; }
html:not(.js) .rs-tune { display: none; }

.set-footer { border-top-color: color-mix(in srgb, var(--set-brass) 40%, transparent); }
.set-footer .brand { font-family: var(--font-brand); }

/* Sub-pages under the docked radio: walnut, brass and lamp-light. */
.set-room { background: radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--set-glow) 7%, transparent), transparent 70%), var(--marketing-bg); }
.set-room .eyebrow { color: var(--set-brass-light); font: 500 14px/1.2 var(--font-engrave); letter-spacing: .14em; }
.set-room .route-hero, .set-room .site-footer { border-color: color-mix(in srgb, var(--set-brass) 30%, transparent); }
.set-room .product-shot { padding: 10px; border: 0; border-radius: var(--rounded-sm); background: linear-gradient(180deg, var(--set-walnut-light), var(--set-walnut-deep)); box-shadow: 0 24px 50px var(--marketing-room), inset 0 1px 0 color-mix(in srgb, var(--set-brass-light) 30%, transparent); }
.set-room .product-shot img { border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--set-brass) 55%, transparent); }
.set-room .product-shot figcaption { padding: var(--space-lg) var(--space-sm) 0; border: 0; color: var(--set-brass-light); font: 500 13px/1.3 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.set-room .evidence-card, .set-room .platform-card, .set-room .agent-step, .set-room .price-plan, .set-room .price-plan.pro { border-color: color-mix(in srgb, var(--set-brass) 30%, transparent); border-radius: var(--rounded-xs); background: linear-gradient(180deg, color-mix(in srgb, var(--set-walnut) 70%, var(--marketing-bg)), var(--set-walnut-deep)); }
.set-room .evidence-card small, .set-room .platform-card small, .set-room .agent-step small, .set-room .price-plan small { color: var(--set-brass-light); font: 500 14px/1.2 var(--font-engrave); letter-spacing: .14em; }
.set-room .price-plan.pro { border-color: var(--marketing-accent); box-shadow: inset 0 6px 0 var(--marketing-accent); }
@media (max-width: 820px) {
  .rs-stations { height: auto; }
  .rs-stations a { height: auto; min-height: var(--space-touch-target); }
  .rs-stations a::after { display: none; }
  .rs-rock-word.up, .rs-rock-word.down { opacity: 0; }
  .rs-rocker[data-state='up'] .rs-rock-word.up, .rs-rocker[data-state='down'] .rs-rock-word.down { opacity: 1; }
  .rs-rocker[data-state='up'] .rs-rock-word.mid, .rs-rocker[data-state='down'] .rs-rock-word.mid { opacity: 0; }
}

/* ── Cabinet (photograph) ────────────────────────────── */
.cabinet-bay { --cq: 1cqw; position: relative; aspect-ratio: 1024 / 430; perspective: 1700px; transform-style: preserve-3d; container-type: inline-size;
  background: url('/assets/door-blank.webp') left top / 50% 100% no-repeat, url('/assets/door-right.jpg') right top / 50% 100% no-repeat, var(--marketing-room); }

.door { position: absolute; top: 3.49%; height: 91.86%; z-index: 3; backface-visibility: hidden; will-change: transform; background-repeat: no-repeat; box-shadow: calc(var(--doors, 0) * -18px) 0 36px color-mix(in srgb, var(--marketing-room) 70%, transparent); }
.door-left { left: 6.84%; width: 43.16%; transform-origin: left center; transform: rotateY(calc(var(--doors, 0) * -106deg)); background-image: url('/assets/door-blank.webp'); background-size: 115.84% 108.86%; background-position: 100% 42.86%; }
.door-right { left: 50%; width: 40.33%; transform-origin: right center; transform: rotateY(calc(var(--doors, 0) * 106deg)); background-image: url('/assets/door-right.jpg'); background-size: 123.97% 108.86%; background-position: 0 42.86%; }
.door-open { position: absolute; left: 0; top: 62%; width: 24%; height: 16%; border: 0; background: none; cursor: pointer; }
.door-open:focus-visible { outline-offset: -2px; }

/* Carved into the left door (see "Carved, not printed" below for the cut). */
.door-engraving { position: absolute; left: 17%; top: 20%; width: 66%; }
.door-title span { display: block; }
.door-rule { display: block; width: 86%; height: 2px; margin: 2.2cqw 0 1.8cqw; }
.door-motto { max-width: 100%; }
/* Home: the audience, one line above the headline (phones read it in the plate). */
.tape-home .door-eyebrow { white-space: nowrap; }


/* ── One room across pages ──────────────────────────────
   Every page opens with the radio on the cabinet. Home swings the doors open;
   the other stations engrave their own headline on the left door. The radio is
   fixed on every page so docking never moves the content. */
:root { --stage-top: 150px; }
.set-room { background: var(--marketing-room); }
.set-room .radio-set { position: fixed; inset: 0 0 auto; background: none; }
.set-room .radio-set.is-docked { background: linear-gradient(180deg, var(--marketing-room) 70%, color-mix(in srgb, var(--marketing-room) 0%, transparent)); }
.set-room main { padding-top: var(--stage-top); }
.set-room main.wrap { width: auto; max-width: none; padding-inline: 0; }
.set-room main.wrap > :not(.station) { width: min(calc(100% - var(--space-page)), 1180px); margin-inline: auto; }

.station { padding-bottom: var(--space-page); background: radial-gradient(ellipse 60% 70% at 50% 30%, color-mix(in srgb, var(--set-glow) 6%, transparent), transparent 70%); }
.station-cabinet { --cab-w: min(94vw, 1240px, calc((100vh - var(--stage-top) - 2vh) * 1024 / 430)); width: var(--cab-w); margin: 0 auto; filter: drop-shadow(0 26px 36px var(--marketing-room)); }
.station .door-engraving { left: 15%; top: 16%; width: 68%; }
.door-eyebrow { margin-bottom: 1.8cqw; }
.station .door-rule { width: 70%; }
.station-inside { position: absolute; left: 6.84%; width: 83.5%; top: 3.49%; height: 91.86%; overflow: hidden;
  background: radial-gradient(ellipse 55% 60% at 50% 55%, color-mix(in srgb, var(--set-glow) calc(var(--doors, 0) * 18%), transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--marketing-room) 58%, transparent), color-mix(in srgb, var(--marketing-room) 88%, transparent)), url('/assets/door-blank.webp') 30% 40% / 170% auto;
  box-shadow: inset 0 0 90px var(--marketing-room), inset 0 0 0 2px var(--marketing-room); }
.station-veil, .station-hint { display: none; }
/* Static (no script, reduced motion): the closed cabinet, then the intro under it. */
.station-copy { display: grid; gap: var(--space-2xl); max-width: 760px; margin: var(--space-page) auto 0; padding-inline: var(--space-2xl); text-align: center; justify-items: center; }
.station-copy .lead { color: var(--marketing-muted); font-size: 18px; line-height: 1.6; }
.station-copy .actions { justify-content: center; }
.station-copy .small-note { color: var(--marketing-muted); }

/* Live: the page scrolls you into the cabinet. Doors open, the camera moves in
   until the back wall fills the screen, and the intro appears inside. */
html.station-live .set-room main:has(.station) { padding-top: 0; }
html.station-live .station { height: calc(100vh + 130vh); padding: 0; background: none; }
html.station-live .station .station-view { position: sticky; top: 0; height: 100vh; overflow: hidden; padding-top: var(--stage-top); }
html.station-live .station .station-cabinet { transform-origin: 0 0; will-change: transform; }
html.station-live .station .station-veil { position: absolute; inset: 0; z-index: 4; display: block; pointer-events: none; opacity: var(--veil, 0); background: radial-gradient(ellipse 70% 70% at 50% 55%, color-mix(in srgb, var(--marketing-room) 45%, transparent), color-mix(in srgb, var(--marketing-room) 82%, transparent)); }
html.station-live .station .station-copy { position: absolute; left: 50%; top: calc(var(--dock-h, 148px) + (100vh - var(--dock-h, 148px)) / 2); z-index: 5; width: min(760px, calc(100vw - var(--space-page))); margin: 0; padding: 0; opacity: var(--copy, 0); transform: translate(-50%, calc(-50% + (1 - var(--copy, 0)) * 24px)); }
.station-recap { display: none; }
html.station-live .station .station-recap { display: block; color: color-mix(in srgb, var(--set-brass-light) 80%, var(--set-glow)); font: 700 clamp(26px, 2.8vw, 42px)/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 0 18px color-mix(in srgb, var(--set-glow) 30%, transparent), 0 2px 10px var(--marketing-room); }
html.station-live .station .station-copy .lead { color: color-mix(in srgb, var(--set-ivory) 90%, var(--set-glow)); font-size: 20px; text-shadow: 0 1px 12px var(--marketing-room); }
html.station-live .station .station-hint { position: absolute; left: 50%; bottom: 22px; z-index: 5; display: block; transform: translateX(-50%); color: var(--set-brass-light); font: 500 13px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; opacity: calc(1 - var(--doors, 0) * 3); pointer-events: none; }
html.station-live .station .station-hint span::after { content: ''; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--set-brass-light), transparent); }
/* Beyond the stage you are inside the cabinet: the back wall stays behind the page. */
html.station-live .set-room:has(.station) { background: linear-gradient(180deg, color-mix(in srgb, var(--marketing-room) 86%, transparent), color-mix(in srgb, var(--marketing-room) 93%, transparent)), url('/assets/door-blank.webp') 22% 45% / max(260vw, 300vh) auto fixed, var(--marketing-room); }
html.station-live .set-room:has(.station) .route-main > .section:first-child { padding-top: var(--space-page-lg); }

/* Page changes: the radio and cabinet hold still; the words on the door re-engrave. */
@view-transition { navigation: auto; }
.radio-set { view-transition-name: radio; }
.station .cabinet-bay, .tape-home.vt-closed .cabinet-bay { view-transition-name: cabinet; }
.station .door-engraving, .tape-home.vt-closed .door-left .door-engraving { view-transition-name: engraving; }
::view-transition-group(radio), ::view-transition-group(cabinet) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
/* Quick and quiet: the page underneath swaps in about a quarter of a second, like changing station. */
::view-transition-old(root) { animation: vt-dim 140ms ease-out both; }
::view-transition-new(root) { animation: vt-rise 220ms 40ms ease-out both; }
::view-transition-old(engraving) { animation: vt-unengrave 150ms ease-out both; }
::view-transition-new(engraving) { animation: vt-engrave 320ms 60ms cubic-bezier(.2, 0, 0, 1) both; }
@keyframes vt-dim { to { opacity: 0; filter: brightness(.55); } }
@keyframes vt-rise { from { opacity: 0; } }
@keyframes vt-unengrave { to { opacity: 0; filter: blur(2px) brightness(1.4); } }
@keyframes vt-engrave { from { opacity: 0; filter: blur(2px) brightness(1.5); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Tuning: the glass flares as the needle lands on a new station. */
.rs-dial.is-tuning .rs-needle { box-shadow: 0 0 10px var(--set-glow), 0 0 26px var(--set-glow); }
.rs-dial.is-tuning::after { content: ''; position: absolute; inset: -4% -1%; border-radius: 6px; background: radial-gradient(ellipse 30% 90% at var(--needle) 50%, color-mix(in srgb, var(--set-glow) 40%, transparent), transparent 70%); mix-blend-mode: screen; animation: tune-flare 260ms ease-out both; pointer-events: none; }
@keyframes tune-flare { from { opacity: 0; } 50% { opacity: 1; } to { opacity: .7; } }

@media (max-width: 820px) {
  :root { --stage-top: 104px; }
  .door-motto, .tape-home .door-eyebrow { display: none; }
  /* Phones: one door, big enough to read the engraving. */
  .station-cabinet { --cab-w: min(94vw, 480px); }
  .station .cabinet-bay { aspect-ratio: 1368 / 1149; background: url('/assets/door-blank.webp') center / cover no-repeat; }
  .station .door-left { left: 0; top: 0; width: 100%; height: 100%; background: none; }
  .station .door-right { display: none; }
  .station-inside { left: 0; top: 0; width: 100%; height: 100%; }
  .station .door-engraving { left: 12%; top: 16%; width: 70%; }
  .door-eyebrow { margin-bottom: 4cqw; }
  .station-copy { text-align: left; justify-items: start; }
  .station-copy .actions { justify-content: flex-start; }
  html.station-live .station .station-copy .lead { font-size: 16px; }
}

/* ── Buttons: set hardware, not web chrome ───────────────
   Primary: an amber enamel push-button with a lit face and real travel.
   Secondary: a brass-rimmed walnut button. Both press down when clicked. */
.button { position: relative; min-height: var(--space-touch-target); padding: 0 var(--space-3xl); border-radius: var(--rounded-sm); font: 500 14px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; transform: translateY(0); transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter var(--motion-base), color var(--motion-base), border-color var(--motion-base); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(3px); }
.button.primary { border: 1px solid color-mix(in srgb, var(--marketing-accent) 55%, var(--set-walnut-deep)); color: var(--marketing-accent-ink); text-shadow: 0 1px 0 color-mix(in srgb, var(--set-ivory) 40%, transparent);
  background: radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--set-glow) 55%, transparent), transparent 70%), linear-gradient(180deg, var(--marketing-accent-hover), var(--marketing-accent) 55%, color-mix(in srgb, var(--marketing-accent) 72%, var(--set-walnut-deep)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-ivory) 55%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--set-walnut-deep) 35%, transparent), 0 3px 0 color-mix(in srgb, var(--marketing-accent) 40%, var(--set-walnut-deep)), 0 8px 18px color-mix(in srgb, var(--marketing-room) 80%, transparent), 0 0 18px color-mix(in srgb, var(--marketing-accent) 25%, transparent); }
.button.primary:hover { background: radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--set-glow) 75%, transparent), transparent 70%), linear-gradient(180deg, var(--marketing-accent-hover), var(--marketing-accent) 55%, color-mix(in srgb, var(--marketing-accent) 72%, var(--set-walnut-deep))); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-ivory) 65%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--set-walnut-deep) 35%, transparent), 0 4px 0 color-mix(in srgb, var(--marketing-accent) 40%, var(--set-walnut-deep)), 0 10px 22px color-mix(in srgb, var(--marketing-room) 80%, transparent), 0 0 26px color-mix(in srgb, var(--marketing-accent) 40%, transparent); }
.button.primary:active { box-shadow: inset 0 2px 4px color-mix(in srgb, var(--set-walnut-deep) 45%, transparent), 0 0 0 color-mix(in srgb, var(--marketing-accent) 40%, var(--set-walnut-deep)), 0 2px 6px color-mix(in srgb, var(--marketing-room) 80%, transparent); }
.button.secondary { border: 1px solid color-mix(in srgb, var(--set-brass) 75%, transparent); color: var(--set-brass-light); text-shadow: 0 -1px 0 var(--set-walnut-deep);
  background: linear-gradient(180deg, color-mix(in srgb, var(--set-walnut-light) 70%, var(--set-walnut)), var(--set-walnut-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-brass-light) 35%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--set-walnut-deep) 80%, transparent), 0 3px 0 var(--set-walnut-deep), 0 8px 18px color-mix(in srgb, var(--marketing-room) 80%, transparent); }
.button.secondary:hover { border-color: var(--set-brass-light); color: var(--set-ivory); }
.button.secondary:active { box-shadow: inset 0 2px 4px var(--marketing-room), 0 0 0 var(--set-walnut-deep); }
.button:focus-visible { outline: 2px solid var(--set-glow); outline-offset: 4px; }
.text-link { color: var(--set-brass-light); font: 500 14px/1.2 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; text-decoration-color: color-mix(in srgb, var(--marketing-accent) 80%, transparent); text-decoration-thickness: 1px; }
.text-link:hover { color: var(--set-ivory); }
@media (prefers-reduced-motion: reduce) { .button, .button:hover, .button:active { transform: none; } }

/* Carved, not printed: every door headline is a groove cut into the walnut.
   The groove floor is darker than the door; the #engrave filter (inline SVG on
   each page) shades the upper wall of every stroke and lets the lamp catch the
   lower wall, clipped inside the letters so nothing sits on top of the wood.
   Exo 2 bold (DESIGN.md: live door engravings) gives strokes wide enough to
   read as cuts; Michroma stays on the brand badge. */
.engrave-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.engrave-shade { flood-color: var(--marketing-room); flood-opacity: .88; }
.engrave-lit { flood-color: var(--set-glow); flood-opacity: .85; }
.door-title, .station h1, .door-motto, .door-eyebrow {
  color: color-mix(in srgb, var(--set-walnut-light) 70%, var(--set-brass));
  text-transform: uppercase; text-shadow: none;
  -webkit-text-fill-color: currentColor; background: none;
}
.door-title, .station h1 { display: grid; gap: .06em; font: 700 3.15cqw/1.06 var(--font-display); letter-spacing: .035em; text-wrap: balance; filter: url('#engrave'); }
.station h1 { display: block; font: 700 3.2cqw/1.1 var(--font-display); letter-spacing: .035em; }
.door-title span { width: max-content; }
.door-motto { font: 700 1.2cqw/1.7 var(--font-display); letter-spacing: .14em; white-space: nowrap; filter: url('#engrave-fine'); }
.door-motto .keep-case { text-transform: none; }
.door-eyebrow { font: 700 max(11px, 1.2cqw)/1.4 var(--font-display); letter-spacing: .28em; filter: url('#engrave-fine'); }
.door-rule { background: color-mix(in srgb, var(--marketing-room) 70%, var(--set-walnut-deep)); box-shadow: 0 1px 0 color-mix(in srgb, var(--set-glow) 55%, transparent); }
@media (max-width: 820px) {
  .station h1 { font-size: calc(var(--cq) * 7.4); }
  .door-eyebrow { font-size: calc(var(--cq) * 3); }
}

/* What is BugTape facts: the same walnut plate as the other set cards. */
.set-room .route-list li { background: linear-gradient(180deg, color-mix(in srgb, var(--set-walnut) 70%, var(--marketing-bg)), var(--set-walnut-deep)); }