/* Ritual Row — home draft: appliance stage
   Standalone prototype. Nothing here touches the live homepage peels. */

:root {
  --rr-green: #00ff41;
  --rr-green-dim: #1f8f3c;
  --rr-rust: #b4551e;
  --rr-paper: #e8e2d3;
  --rr-ink: #070807;
  --rr-panel: #101211;
  --rr-panel-2: #171a18;
  --rr-line: #2a2e2b;
  --rr-font-display: "DotGothic16", "VT323", monospace;
  --rr-font-chrome: "Departure Mono", ui-monospace, monospace;
  --rr-font-crt: "VT323", "DotGothic16", monospace;
  --rr-font-ui: "Fragment Mono", ui-monospace, Menlo, monospace;
  --rr-door-ease: cubic-bezier(.18, .82, .2, 1);
  --rr-door-ms: 720ms;
  /* opening run = FLIP travel (480ms pre-swing) + the swing itself */
  --rr-door-open-ms: 1200ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #050605; color: var(--rr-paper); }
/* Clip horizontal overflow at the root. A vw-sized floor strip (and the
   LIVE ticker track) can otherwise widen the scrollport on WebKit, which
   reflows --rr-floor-h and aspect-ratio + max-content appliances into an
   ever-growing page on iPhone Safari. */
html { overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--rr-font-ui);
  font-size: 13px;
  line-height: 1.4;
  background:
    radial-gradient(120% 80% at 50% 0%, #131513 0%, #050605 60%),
    #050605;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* Desktop is the viewport. A 1520px frame used to leave sewer-pipe gutters
   on wide monitors. Phone queries below still lock the small-screen column.
   The pipe strip on the shelf stays; the side-wall tiles do not. */
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--rr-green); color: #000; }

.rr-skip {
  position: absolute; left: 8px; top: -40px; z-index: 100;
  background: var(--rr-green); color: #000; padding: 6px 10px; font-weight: 700;
}
.rr-skip:focus { top: 8px; }

/* ------------------------------------------------------------------ frame */
.rr-frame {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: var(--rr-ink);
  position: relative;
  overflow-x: hidden;
}
.rr-frame::before {
  /* grime vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* Header paint lives in /wp-content/mu-plugins/ritual-site-chrome.css
   so the homepage bar and every other page stay one component. */

/* ------------------------------------------------------------------ grid */
.rr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 0;
  position: relative; z-index: 4;
}
.rr-right {
  background:
    linear-gradient(rgba(6,7,6,.62), rgba(6,7,6,.78)),
    url("assets/metal-corrugated.webp") center / 100% auto repeat-y;
  border-left: 1px solid #000;
  box-shadow: inset 1px 0 0 #23262a;
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ---------------------------------------------------------------- poster */
.rr-poster {
  position: relative; display: block; overflow: hidden;
  border: 2px solid #050605; box-shadow: 0 0 0 1px #2e332e, 0 10px 24px rgba(0,0,0,.6);
  background: #000;
  aspect-ratio: 4 / 3;
}
.rr-poster__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: contrast(1.05) saturate(.9); transition: transform .5s ease; }
.rr-poster:hover .rr-poster__img { transform: scale(1.04); }
.rr-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 35%, transparent 60%, rgba(0,0,0,.75));
}
.rr-poster__kicker, .rr-poster__title, .rr-poster__badge { position: absolute; z-index: 2; font-family: var(--rr-font-display); }
.rr-poster__kicker { left: 8px; top: 8px; font-size: 10px; letter-spacing: .12em; color: #cfe8d3; background: rgba(0,0,0,.6); padding: 3px 6px; }
.rr-poster__title { left: 8px; bottom: 8px; font-size: 17px; color: #fff; text-shadow: 0 0 10px rgba(0,255,65,.6), 0 2px 0 #000; }
.rr-poster__badge { right: 8px; bottom: 8px; font-size: 11px; color: #000; background: var(--rr-green); padding: 4px 8px 3px; box-shadow: 0 0 14px rgba(0,255,65,.5); }
.rr-rail .rr-poster { flex: 0 0 auto; margin: 8px 8px 0; }

/* ------------------------------------------------------------- crt tile */
.rr-crt-tile { display: block; }
.rr-crt-tile__bezel {
  background: linear-gradient(#5c584c, #3b3830);
  border: 1px solid #000; box-shadow: inset 0 1px 0 #75705f, 0 8px 18px rgba(0,0,0,.6);
  padding: 12px 12px 10px; border-radius: 6px 6px 3px 3px;
}
.rr-crt-tile__screen {
  margin: 0; height: 128px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 40%, #0a2612 0%, #030903 90%);
  color: var(--rr-green); font-family: var(--rr-font-crt); font-size: 15px; line-height: 1.15;
  padding: 8px 10px; border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.9), inset 0 0 2px var(--rr-green-dim);
  text-shadow: 0 0 6px rgba(0,255,65,.6);
  position: relative;
}
.rr-crt-tile__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.rr-crt-tile__deck {
  height: 22px; background: linear-gradient(#3b3830, #26241f); border: 1px solid #000; border-top: 0;
  display: flex; gap: 6px; align-items: center; padding: 0 10px; border-radius: 0 0 4px 4px;
}
.rr-crt-tile__deck span { width: 34px; height: 5px; background: #1b1a16; box-shadow: inset 0 1px 0 #000; }
.rr-crt-tile__deck i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--rr-green); box-shadow: 0 0 8px var(--rr-green); animation: rr-blink 2.4s steps(1) infinite; }
@keyframes rr-blink { 50% { opacity: .25; } }

/* ------------------------------------------------------------------ minis */
.rr-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-mini {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  background: linear-gradient(#1a1c19, #0c0d0c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2b2f2b, 0 8px 18px rgba(0,0,0,.55);
  overflow: hidden; padding: 12px;
}
.rr-mini:hover { box-shadow: inset 0 0 0 1px var(--rr-green-dim), 0 8px 18px rgba(0,0,0,.55); }
.rr-mini__label { position: absolute; left: 6px; bottom: 6px; font-family: var(--rr-font-display); font-size: 11px; letter-spacing: .12em; color: #d9d4c6; background: rgba(0,0,0,.65); padding: 2px 5px; }
.rr-mini__img { width: 100%; height: 100%; object-fit: cover; }
.rr-vinyl {
  position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #0b0b0b 0 1px, #1a1a1a 1px 2px),
    #111;
  box-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0,0,0,.7);
  display: grid; place-items: center;
  animation: rr-spin 9s linear infinite;
}
.rr-vinyl img { width: 38%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000; }
.rr-vinyl::after { content: ""; position: absolute; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #050605; }
@keyframes rr-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ stage */
.rr-stage { min-width: 0; display: flex; flex-direction: column; }
.rr-wall {
  position: relative; flex: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 100%),
    url("assets/wall-graffiti.webp") center top / cover no-repeat;
  padding: 8px 18px 14px;
  overflow: hidden;
  isolation: isolate;
  /* Paint containment keeps the floor bleed and any transformed peeks from
     enlarging the document scrollport (WebKit). */
  contain: paint;
}
.rr-wall::before {
  /* moss + drip pass */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 40% at 10% 100%, rgba(30,60,30,.35), transparent 60%),
    radial-gradient(50% 30% at 95% 100%, rgba(50,30,10,.35), transparent 60%);
}
.rr-wall__tags { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rr-tag {
  position: absolute; font-family: var(--rr-font-display); font-weight: 400;
  color: rgba(255,255,255,.14); letter-spacing: .1em; font-size: 28px; transform: rotate(-8deg);
  text-shadow: 0 0 1px rgba(0,0,0,.6);
}
.rr-tag--a { left: 3%; top: 36%; font-size: 30px; transform: rotate(-14deg); color: rgba(0,255,65,.12); }
.rr-tag--b { right: 5%; top: 30%; transform: rotate(6deg); color: rgba(255,255,255,.12); }
.rr-tag--c { left: 47%; top: 52%; font-size: 22px; transform: rotate(-3deg); color: rgba(255,120,120,.14); }
.rr-tag--d { right: 22%; top: 60%; font-size: 40px; transform: rotate(9deg); color: rgba(255,255,255,.08); }
.rr-tag--e { left: 20%; top: 64%; font-size: 26px; transform: rotate(-11deg); color: rgba(200,255,200,.1); }

.rr-wordmark {
  /* sit with the shelf appliances so the cluster packs tight instead of
     floating the wordmark in empty air above the microwave / TV */
  grid-area: logo; align-self: end; justify-self: center;
  margin: 0 0 4px; width: 100%; max-width: 300px; position: relative; z-index: 2; text-align: center;
}
.rr-wordmark__art { position: relative; display: block; }
/* static shadow pool under the wordmark instead of a filter on the image */
.rr-wordmark__art::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 14%; bottom: 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent 80%);
}
.rr-wordmark img { width: 100%; height: auto; }
/* spray-paint reveal: the canvas sits over the (hidden) wordmark img and is
   removed when the paint is dry; layout never changes */
.rr-wordmark__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rr-wordmark__art.is-spraying img { visibility: hidden; }
.rr-wordmark__sub {
  display: block; margin-top: -12px;
  font-family: var(--rr-font-crt); font-size: 18px; color: #c7e6cd; text-shadow: 0 0 8px rgba(0,255,65,.45), 0 1px 0 #000;
}

/* The plumbing run lives inside the shelf so it tracks the appliances, not
   the wall height: its pipe band crosses just above the washer / dryer /
   stove tops and disappears behind every body (the frayed ends hang into
   the gaps). Behind the appliances, never under the labels. */
.rr-pipes {
  position: absolute; z-index: -1; pointer-events: none; max-width: none;
  left: 50%; width: calc(var(--rr-floor-h) * 4.7); height: auto;
  bottom: calc(var(--rr-floor-h) * .36 + 14px);
  translate: -50% 0; rotate: -0.6deg;
  opacity: .9;
}

/* ------------------------------------------------------------------ shelf */
/* Small appliances sit on wall shelves either side of the wordmark; the four
   big ones stand on one floor line underneath, so the wall reads symmetric.
   Columns size to the appliances (not equal 1fr) so the cluster stays tight.
   Every appliance size derives from --rr-floor-h (washer = dryer = stove
   height), so the floor row always shares one top line. */
.rr-shelf {
  --rr-floor-h: 268px;
  position: relative; z-index: 2;
  display: grid;
  /* equal outer columns keep fridge / stove mirrored about the wordmark
     even though their sub-labels differ in length */
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "microwave logo   logo  crt"
    "fridge    washer dryer stove";
  justify-content: center;
  justify-items: center;
  column-gap: 14px;
  row-gap: 22px;
  align-items: end;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2px 8px;
}
/* steel wall shelf under the microwave and TV */
.rr-shelf .rr-app--microwave .rr-app__hit::before,
.rr-shelf .rr-app--crt .rr-app__hit::before {
  left: -9%; right: -9%; bottom: -11px; height: 11px; z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.55)),
    url("assets/steel-plate.webp") center / cover;
  border: 1px solid #000;
  box-shadow: 0 10px 14px -4px rgba(0,0,0,.75);
}
.rr-shelf .rr-app--microwave, .rr-shelf .rr-app--crt { gap: 10px; }
.rr-shelf::after {
  /* floor the big units stand on: starts just above their feet (label
     block ≈ 76px above the shelf bottom) and runs off both wall edges; the
     stencil labels read as painted on it.
     Fixed-pixel bleed only — never vw. A ±N vw strip can widen the
     scrollport on WebKit and feed back into --rr-floor-h. .rr-wall
     { overflow: hidden } clips the excess. */
  content: ""; position: absolute; left: -2400px; right: -2400px; bottom: -16px; height: 104px;
  width: auto; max-width: none; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.58) 16px, rgba(0,0,0,.5) 45%, rgba(0,0,0,.74) 100%);
  z-index: -1;
}

.rr-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; width: max-content; }
.rr-app--fridge { grid-area: fridge; }
.rr-app--microwave { grid-area: microwave; }
.rr-app--crt { grid-area: crt; }
.rr-app--stove { grid-area: stove; }
.rr-app--washer { grid-area: washer; }
.rr-app--dryer { grid-area: dryer; }

.rr-app__hit {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  width: 100%; display: block; position: relative;
  transition: transform .35s var(--rr-door-ease);
}
/* contact shadow + hover glow are static gradient layers; hover only moves
   the button (transform) and fades the glow (opacity) — nothing re-rasterises */
.rr-app__hit::before, .rr-app__hit::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
}
.rr-app__hit::before {
  left: 4%; right: 4%; bottom: -10px; height: 16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72), rgba(0,0,0,.3) 55%, transparent 80%);
}
.rr-app__hit::after {
  inset: -10% -14%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(0,255,65,.22), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.rr-app__hit:hover, .rr-app__hit:focus-visible {
  transform: translateY(-4px) scale(1.02);
  outline: none;
}
.rr-app__hit:hover::after, .rr-app__hit:focus-visible::after { opacity: 1; }
.rr-app__hit:focus-visible .rr-app__label-tag { box-shadow: 0 0 0 2px var(--rr-green); }
/* Floor units are sized by HEIGHT (width follows each render's aspect), so
   the washer and dryer can never drift apart in scale again; the two shelf
   units are sized by width so they read as a matched pair either side of
   the wordmark. */
.rr-app .rr-app__hit { width: max-content; max-width: none; }
.rr-app--washer .rr-body,
.rr-app--dryer .rr-body {
  /* Identical footprint so the pair reads matched. */
  width: calc(var(--rr-floor-h) * .74);
  height: var(--rr-floor-h);
  aspect-ratio: auto;
}
.rr-app--washer .rr-body__shell,
.rr-app--dryer .rr-body__shell { object-position: center bottom; }
/* Both axes are explicit so width:auto + aspect-ratio never contributes a
   cyclic intrinsic size inside width:max-content ancestors (Safari growth). */
.rr-app--stove .rr-body {
  height: var(--rr-floor-h);
  width: calc(var(--rr-floor-h) * 533 / 785);
  aspect-ratio: auto;
}
.rr-app--fridge .rr-body {
  height: calc(var(--rr-floor-h) * 1.5);
  width: calc(var(--rr-floor-h) * 1.5 * 487 / 1000);
  aspect-ratio: auto;
}
.rr-app--microwave .rr-body {
  width: calc(var(--rr-floor-h) * .7);
  height: calc(var(--rr-floor-h) * .7 * 549 / 860);
  aspect-ratio: auto;
}
.rr-app--crt .rr-body {
  width: calc(var(--rr-floor-h) * .7);
  height: calc(var(--rr-floor-h) * .7 * 616 / 860);
  aspect-ratio: auto;
}

/* Wall peeks — microwave glass + old TV tube only. No fridge polaroid. */
.rr-peek {
  position: absolute; z-index: 8; overflow: hidden; pointer-events: none;
}
.rr-peek__well {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: #050505;
}
.rr-peek__img {
  position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1.15s ease;
}
.rr-peek__img.is-on { opacity: 1; }
.rr-peek__glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
}

/* Microwave: warm plate glow, light mesh so the sample stays readable. */
.rr-peek--microwave {
  border-radius: 3%;
}
.rr-peek--microwave .rr-peek__well {
  background:
    radial-gradient(75% 65% at 48% 55%, rgba(255,180,100,.35), transparent 68%),
    #1a100a;
}
.rr-peek--microwave .rr-peek__img {
  filter: saturate(.95) contrast(1.1) brightness(1.08);
}
.rr-peek--microwave .rr-peek__mesh {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: .38;
}
.rr-peek--microwave .rr-peek__glass {
  background:
    radial-gradient(90% 70% at 28% 22%, rgba(255,220,170,.16), transparent 48%),
    radial-gradient(100% 100% at 50% 55%, transparent 48%, rgba(0,0,0,.4));
  box-shadow: inset 0 0 14px rgba(0,0,0,.4);
}

/* Old TV: readable tube picture, light scanlines, soft vignette — not crushed. */
.rr-peek--crt {
  border-radius: 5% / 7%;
}
.rr-peek--crt .rr-peek__well {
  background: #000;
  border-radius: inherit;
}
.rr-peek--crt .rr-peek__img {
  filter: saturate(.9) contrast(1.08) brightness(1.0);
}
.rr-peek--crt .rr-peek__glass {
  background:
    radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.65)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    radial-gradient(70% 50% at 30% 18%, rgba(255,255,255,.1), transparent 45%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.65);
}

.rr-app.is-ghost .rr-peek { opacity: .15; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .rr-peek__img { transition: none; }
}

/* appliance body: layered shell / cavity / door */
.rr-body {
  position: relative; width: 100%;
  aspect-ratio: var(--w) / var(--h);
}
/* The swinging door has its own 3D box (.rr-door-rig). The body stays flat
   so the cavity's contents (shop tiles, cards, shelves) paint on phones. */
.rr-body--focus { transform-style: flat; }
.rr-door-rig {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  perspective: 1400px; transform-style: preserve-3d;
}
.rr-door-rig .rr-door { pointer-events: auto; }
.rr-body__shell { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* full-size render fades in over the half-size one in the focus copy */
.rr-hd { opacity: 0; transition: opacity .25s ease; }
.rr-hd.is-ready { opacity: 1; }
.rr-cavity {
  position: absolute; overflow: hidden; background: #050505;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9);
  /* clip the interior photo even when an ancestor is preserve-3d (mobile
     otherwise lets the picture paint a hair past the shell) */
  contain: paint;
}
.rr-cavity--round { border-radius: 50%; contain: none; }
.rr-cavity__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  min-width: 0; min-height: 0; max-width: 100%; max-height: 100%;
  filter: brightness(.88) contrast(1.06);
}
/* bulb / element light, positioned per appliance */
.rr-cavity__light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .8;
  background: radial-gradient(var(--ls, 60% 60%) at var(--lx, 50%) var(--ly, 50%), var(--lc, rgba(255,255,255,.4)), transparent 70%);
}
.rr-cavity__content { position: absolute; inset: var(--safe, 3%); z-index: 2; }
/* gasket + lip: dark outer edge, hairline light inner edge, depth vignette */
.rr-cavity__rim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.9),
    inset 0 0 0 3px rgba(255,255,255,.07),
    inset 0 0 22px 6px rgba(0,0,0,.72),
    inset 0 -16px 28px rgba(0,0,0,.45),
    inset 0 10px 18px rgba(0,0,0,.35);
}
.rr-cavity--round .rr-cavity__rim { box-shadow: inset 0 0 0 3px rgba(0,0,0,.9), inset 0 0 0 4px rgba(255,255,255,.06), inset 0 0 26px 10px rgba(0,0,0,.75); }
.rr-cavity--crt .rr-cavity__rim { box-shadow: inset 0 0 0 2px #000, inset 0 0 18px 4px rgba(0,0,0,.8), inset 0 0 40px rgba(0,255,65,.12); }
.rr-glow {
  /* window light leak at rest */
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,255,65,.35), rgba(0,255,65,0) 75%);
}
.rr-glow--round { border-radius: 50%; }
.rr-app__hit:hover .rr-glow, .rr-app__hit:focus-visible .rr-glow { opacity: .8; }

/* Doors swing with keyframes (not transitions): a keyframe animation is
   composited from its first frame even when the main thread is busy decoding
   the interior images, so the swing never snaps. The opening run starts with
   the FLIP: ~15° while the appliance travels (first 40%), then the full swing. */
.rr-door {
  position: absolute; overflow: hidden;
  transform-style: preserve-3d;
}
.is-opening .rr-door, .is-closing .rr-door {
  will-change: transform;
  animation-fill-mode: both;
  animation-delay: var(--door-delay, 0ms);
}
.is-opening .rr-door { animation-duration: var(--rr-door-open-ms); animation-timing-function: linear; }
.is-closing .rr-door { animation-duration: var(--rr-door-ms); animation-timing-function: var(--rr-door-ease); }
.is-opening .rr-door--hinge-right { animation-name: rr-door-right; }
.is-opening .rr-door--hinge-left { animation-name: rr-door-left; }
.is-opening .rr-door--hinge-bottom { animation-name: rr-door-bottom; }
.is-closing .rr-door--hinge-right { animation-name: rr-door-right-close; }
.is-closing .rr-door--hinge-left { animation-name: rr-door-left-close; }
.is-closing .rr-door--hinge-bottom { animation-name: rr-door-bottom-close; }
/* Signs matter: the free edge must come TOWARD the viewer (+z). For a hinge
   on the right the free edge is at x<0, so rotateY must be positive; hinge on
   the left → negative; hinge at the bottom (free edge y<0) → negative rotateX.
   With the signs the other way the door swings into the cavity and is hidden
   behind it until it clears the body — which reads as "snapping open". */
@keyframes rr-door-right {
  0% { transform: rotateY(0deg); animation-timing-function: ease-in-out; }
  40% { transform: rotateY(15deg); animation-timing-function: cubic-bezier(.18, .82, .2, 1); }
  100% { transform: rotateY(108deg); }
}
@keyframes rr-door-left {
  0% { transform: rotateY(0deg); animation-timing-function: ease-in-out; }
  40% { transform: rotateY(-15deg); animation-timing-function: cubic-bezier(.18, .82, .2, 1); }
  100% { transform: rotateY(-108deg); }
}
@keyframes rr-door-bottom {
  0% { transform: rotateX(0deg); animation-timing-function: ease-in-out; }
  40% { transform: rotateX(-14deg); animation-timing-function: cubic-bezier(.18, .82, .2, 1); }
  100% { transform: rotateX(-96deg); }
}
/* Hold the open pose even if a parent transform drops the keyframe (phones). */
.is-open .rr-door--hinge-right { transform: rotateY(108deg); }
.is-open .rr-door--hinge-left { transform: rotateY(-108deg); }
.is-open .rr-door--hinge-bottom { transform: rotateX(-96deg); }
@keyframes rr-door-right-close { from { transform: rotateY(108deg); } to { transform: rotateY(0deg); } }
@keyframes rr-door-left-close { from { transform: rotateY(-108deg); } to { transform: rotateY(0deg); } }
@keyframes rr-door-bottom-close { from { transform: rotateX(-96deg); } to { transform: rotateX(0deg); } }
.rr-door--round { border-radius: 50%; }
.rr-door--hinge-right { transform-origin: 100% 50%; }
.rr-door--hinge-left { transform-origin: 0 50%; }
.rr-door--hinge-bottom { transform-origin: 50% 100%; }
.rr-door__img {
  position: absolute; max-width: none; pointer-events: none; user-select: none;
  width: calc(100% / var(--fw)); height: calc(100% / var(--fh));
  left: calc(-1 * var(--fl) / var(--fw) * 100%); top: calc(-1 * var(--ft) / var(--fh) * 100%);
  backface-visibility: hidden;
}
.rr-door__back {
  position: absolute; inset: 0; backface-visibility: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.35)),
    #cfc8b8;
  box-shadow: inset 0 0 0 6px #b8b1a1, inset 0 0 40px rgba(0,0,0,.35);
}
.rr-door--round .rr-door__back { border-radius: 50%; }
.rr-door--hinge-right .rr-door__back, .rr-door--hinge-left .rr-door__back { transform: rotateY(180deg); }
.rr-door--hinge-bottom .rr-door__back { transform: rotateX(180deg); }

/* stencil label under each appliance */
/* labels never size a column: they take the appliance width plus a small
   bleed each side and wrap (balanced) when the wall is scaled down */
.rr-app__label { margin: 0 -16px; text-align: center; align-self: stretch; contain: inline-size; }
/* shelf units have the wordmark between them, so their labels can bleed wider */
.rr-app--microwave .rr-app__label, .rr-app--crt .rr-app__label { margin: 0 -30px; }
.rr-app__label-tag {
  display: inline-block; font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .16em;
  color: #e9e3d4; background: rgba(8,9,8,.82); border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #323632; padding: 5px 10px 4px;
  position: relative;
}
.rr-app__label-tag::before { content: "▸ "; color: var(--rr-green); }
.rr-app__label-sub { display: block; font-family: var(--rr-font-ui); font-size: 10px; color: #9aa79c; letter-spacing: .04em; margin-top: 4px; text-shadow: 0 1px 0 #000, 0 0 6px #000; text-wrap: balance;
  /* two lines reserved on every label, so a wrap (scaled wall, fallback
     font before Fragment Mono lands) never lifts one unit off the shared
     floor / shelf line */
  min-height: 2.8em; }

/* ------------------------------------------------------------------ strip */
.rr-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 12px 12px; background: linear-gradient(#0d0f0d, #070807); border-top: 2px solid #000; box-shadow: inset 0 1px 0 #262a26;
}
.rr-strip__panel { background: #0a0b0a; border: 1px solid #000; box-shadow: inset 0 0 0 1px #212421; padding: 8px 10px 10px; min-width: 0; }
.rr-strip__head { margin: 0 0 8px; font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .04em; color: #d9d4c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-strip__head span { color: var(--rr-green); }
.rr-strip__head em { font-style: normal; color: #b7c9ba; }
.rr-strip__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rr-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 1px solid #000; box-shadow: inset 0 0 0 1px #2a2e2a; }
.rr-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.85) contrast(1.05); transition: transform .4s ease; }
.rr-thumb:hover img { transform: scale(1.06); }
.rr-thumb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); pointer-events: none; }
.rr-thumb__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30px; height: 30px; border-radius: 50%;
  background: var(--rr-green); color: #000; display: grid; place-items: center; font-size: 12px; box-shadow: 0 0 14px rgba(0,255,65,.6); z-index: 1;
}
.rr-thumb__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3px 6px; font-size: 10px; background: rgba(0,0,0,.7); color: #dfe8df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-thumb--square { aspect-ratio: 1; }

/* ------------------------------------------------------------------- rail */
/* the rail is taken out of flow so it fills the column exactly (never taller than the stage)
   and the compose form can sit on the column's bottom edge */
.rr-right { position: relative; }
.rr-rail {
  position: absolute; inset: 12px;
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(5,6,5,.7); border: 1px solid #000; box-shadow: inset 0 0 0 1px #222622;
}
.rr-rail__head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .1em; color: #e9e3d4;
  background: linear-gradient(#1b1e1b, #0e100e); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #2d312d;
}
.rr-rail__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rr-green); box-shadow: 0 0 10px var(--rr-green); animation: rr-blink 1.8s steps(1) infinite; }
.rr-rail__more { margin-left: auto; color: var(--rr-green); font-size: 11px; }
.rr-feed { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; overflow: auto; flex: 1 1 0; min-height: 0; scrollbar-width: thin; scrollbar-color: #2b302b transparent; }
.rr-post { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 7px 8px; background: rgba(12,14,12,.9); border: 1px solid #000; box-shadow: inset 0 0 0 1px #1f231f; }
.rr-post:hover { box-shadow: inset 0 0 0 1px var(--rr-green-dim); }
.rr-post__avatar { width: 34px; height: 34px; background: #182018; border: 1px solid #000; display: grid; place-items: center; font-family: var(--rr-font-display); color: var(--rr-green); font-size: 14px; overflow: hidden; }
.rr-post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rr-post__name { font-family: var(--rr-font-display); font-size: 12px; color: #f0ebe0; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.rr-post__name small { font-family: var(--rr-font-ui); font-size: 9px; color: #7f8f82; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-post__body { font-size: 11px; color: #aab5ab; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-post__meta { font-size: 10px; color: var(--rr-green-dim); margin-top: 3px; }
.rr-post__img { margin-top: 6px; grid-column: 1 / -1; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border: 1px solid #000; filter: saturate(.85); }
.rr-say { display: grid; grid-template-columns: 1fr auto; margin-top: auto; border-top: 1px solid #000; box-shadow: inset 0 1px 0 #262a26; }
.rr-say__input { background: #060706; border: 0; color: #dfe8df; padding: 10px; font: inherit; font-family: var(--rr-font-crt); font-size: 16px; min-width: 0; }
.rr-say__input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--rr-green-dim); }
.rr-say__btn { background: var(--rr-green); border: 0; color: #000; font-family: var(--rr-font-display); font-size: 12px; padding: 0 14px; cursor: pointer; }

/* ------------------------------------------------------------------- foot */
.rr-foot {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 11px; color: #a6b0a7;
  background: linear-gradient(#0d0f0d, #050605); border-top: 2px solid #000; box-shadow: inset 0 1px 0 #262a26;
  position: relative; z-index: 6;
}
.rr-foot a { color: #d9d4c6; }
.rr-foot a:hover { color: var(--rr-green); }
.rr-foot__links { display: flex; gap: 18px; }
.rr-foot__donate { color: var(--rr-green) !important; font-family: var(--rr-font-display); letter-spacing: .1em; }

/* ------------------------------------------------------------------ focus */
/* While an appliance is open the page behind it cannot scroll. Body is
   fixed at the current scroll offset so the view does not jump. */
html.is-rr-locked, html.is-rr-locked body { overflow: hidden; height: 100%; }
html.is-rr-locked body {
  position: fixed; left: 0; right: 0; width: 100%;
  top: calc(-1 * var(--rr-lock-y, 0px));
}
.rr-focus { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.rr-focus[hidden] { display: none; }
.rr-focus__backdrop {
  /* plain darkening, no backdrop blur: a blur re-filters the whole page
     every frame the appliance moves */
  position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 50%, rgba(2,3,2,.82), rgba(2,3,2,.92));
  opacity: 0; transition: opacity .35s ease;
}
.rr-focus.is-visible .rr-focus__backdrop { opacity: 1; }
.rr-focus__dialog {
  position: relative; z-index: 1; outline: none;
  display: grid; grid-template-columns: minmax(0, auto) 300px; gap: 28px; align-items: center;
  width: min(96vw, 1180px); max-height: 96vh; padding: 20px;
}
.rr-focus__app {
  position: relative; justify-self: center;
  width: min(100%, calc((92vh - 40px) * var(--w) / var(--h)));
  transform-origin: 0 0;
}
/* floor shadow as a gradient layer (a drop-shadow filter on the FLIP-ing
   element would be re-run every frame of the travel) */
.rr-focus__app::before {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -4%; height: 14%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85), rgba(0,0,0,.4) 55%, transparent 80%);
}
.rr-focus__app.is-flipping { will-change: transform; transition: transform .5s var(--rr-door-ease), opacity .3s ease; }
.rr-focus__app .rr-body { width: 100%; }
.rr-focus__close {
  position: absolute; right: 12px; top: 8px; z-index: 5;
  background: #0a0b0a; border: 1px solid var(--rr-green-dim); color: var(--rr-green);
  font-family: var(--rr-font-display); font-size: 13px; padding: 7px 10px 6px; cursor: pointer;
}
.rr-focus__close span { font-size: 10px; color: #7f8f82; margin-left: 6px; }
.rr-focus__close:hover, .rr-focus__close:focus-visible { background: var(--rr-green); color: #000; outline: none; }
.rr-focus__close:hover span { color: #000; }
.rr-focus__panel {
  background: rgba(8,9,8,.9); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2a2e2a, 0 20px 40px rgba(0,0,0,.6);
  padding: 18px 18px 16px; opacity: 0; transform: translateX(14px); transition: opacity .4s ease .25s, transform .4s ease .25s;
}
.rr-focus.is-visible .rr-focus__panel { opacity: 1; transform: none; }
.rr-focus__kicker { font-family: var(--rr-font-ui); font-size: 10px; letter-spacing: .2em; color: var(--rr-green); }
.rr-focus__title { margin: 4px 0 8px; font-family: var(--rr-font-display); font-size: 26px; line-height: 1.05; color: #fff; text-shadow: 0 0 12px rgba(0,255,65,.35); }
.rr-focus__blurb { margin: 0 0 14px; color: #b3bdb4; font-size: 12px; }
.rr-focus__hint { margin: 14px 0 0; font-size: 10px; color: #6d7a6f; }

.rr-btn {
  display: inline-block; font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 14px 8px; border: 1px solid var(--rr-green-dim); color: var(--rr-green); background: rgba(0,0,0,.6);
}
.rr-btn:hover, .rr-btn:focus-visible { background: var(--rr-green); color: #000; outline: none; }
.rr-btn--primary { background: var(--rr-green); color: #000; box-shadow: 0 0 18px rgba(0,255,65,.35); }
.rr-btn--primary:hover { background: #fff; }
.rr-btn--tiny { font-size: 10px; padding: 5px 8px 4px; }

/* ------------------------------------------------------- interior widgets */
/* interiors sit back in the cavity, then come forward once the door is ~40% open */
.rr-int {
  position: absolute; inset: 0; font-family: var(--rr-font-ui); color: #eae4d6;
  opacity: 0; transform: scale(.93) translateY(2%); transform-origin: 50% 60%;
  transition: opacity .45s ease var(--int-delay, 300ms), transform .7s var(--rr-door-ease) var(--int-delay, 300ms);
}
.is-open .rr-int { opacity: 1; transform: none; }
.rr-int a { color: inherit; }

/* fridge: freezer band + tiles standing on the rendered shelves (rows are
   positioned inline from FRIDGE_SHELVES in app.js) */
.rr-fridge__freezer {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 3% 8% 2%;
  background: linear-gradient(180deg, rgba(210,240,225,.06), rgba(0,0,0,.28));
}
.rr-fridge__freezer h3 { margin: 0; font-family: var(--rr-font-display); font-size: clamp(14px, 2.6vw, 24px); color: #fff; text-shadow: 0 0 10px rgba(180,255,200,.6), 0 2px 0 #000; letter-spacing: .06em; }
.rr-fridge__freezer p { margin: 0; font-size: clamp(9px, 1.1vw, 12px); color: #cfe3d4; text-shadow: 0 1px 0 #000; }
.rr-fridge__freezer .rr-btn { align-self: flex-start; }
.rr-shelf-row {
  position: absolute; left: 9%; right: 9%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; align-items: end; padding-bottom: 1.2%;
}
.rr-shelf-row--drawer { left: 12%; right: 12%; padding-bottom: 5%; }
.rr-fridge__all { position: absolute; right: 8%; bottom: 1.5%; }
.rr-tile { display: grid; gap: 3px; text-align: center; transform-origin: 50% 100%; transition: transform .25s ease; }
.rr-tile:hover, .rr-tile:focus-visible { transform: translateY(-3px) scale(1.04); outline: none; }
.rr-tile:hover .rr-tile__name { color: var(--rr-green); }
.rr-tile__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border: 2px solid #f2f2f2; background: #000; box-shadow: 0 6px 8px rgba(0,0,0,.65); }
.rr-tile__img--emoji { display: grid; place-items: center; font-size: clamp(16px, 2.6vw, 30px); background: #101610; }
.rr-tile__name { font-family: var(--rr-font-display); font-size: clamp(8px, 1vw, 11px); letter-spacing: .04em; color: #f5f2ea; text-shadow: 0 1px 0 #000, 0 0 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-shelf-row--drawer .rr-tile__name { color: #cfe3d4; }

/* microwave: cards standing on the turntable (positions driven by app.js) */
.rr-micro { position: absolute; inset: 0; }
.rr-turntable { position: absolute; inset: 0; }
.rr-turntable__seat {
  position: absolute; translate: -50% -100%;
  transform: scale(var(--depth, 1)) rotate(var(--tilt, 0deg)); transform-origin: 50% 100%;
}
.rr-turntable__seat::after {
  /* contact shadow on the plate */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 8%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.7), transparent 80%); z-index: -1;
}
.rr-micro .rr-card { margin: 0; }

/* orbit primitive (washer + dryer drums) */
.rr-orbit { animation: rr-spin var(--spin, 50s) linear infinite; pointer-events: none; }
.rr-orbit__arm, .rr-orbit__seat, .rr-orbit__spin { pointer-events: none; }
.rr-orbit__spin > * { pointer-events: auto; }
.rr-orbit__arm { position: absolute; inset: 0; transform: rotate(var(--a)); }
.rr-orbit__seat {
  position: absolute; left: 50%; top: calc(50% - var(--r)); width: var(--size);
  translate: -50% -50%; transform: rotate(calc(-1 * var(--a)));
}
.rr-orbit__spin { animation: rr-counter var(--spin, 50s) linear infinite; }
.rr-orbit:hover, .rr-orbit:hover .rr-orbit__spin, .rr-orbit:focus-within, .rr-orbit:focus-within .rr-orbit__spin { animation-play-state: paused; }
@keyframes rr-counter { to { rotate: -360deg; } }
.rr-micro__hud {
  position: absolute; left: 4%; right: 4%; top: 3%; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--rr-font-crt); font-size: clamp(12px, 1.6vw, 20px); color: #ffd28a; text-shadow: 0 0 8px rgba(255,180,80,.6);
  background: rgba(0,0,0,.5); padding: 4px 8px; border: 1px solid rgba(255,210,138,.25);
}
.rr-micro__hud b { font-weight: 400; color: #fff; }

.rr-card {
  display: grid; gap: 4px; background: rgba(14,16,14,.94); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2c312c, 0 8px 20px rgba(0,0,0,.6);
  padding: 6px; text-align: left; transition: transform .25s ease;
}
.rr-card:hover, .rr-card:focus-visible { box-shadow: inset 0 0 0 1px var(--rr-green), 0 8px 20px rgba(0,0,0,.6); outline: none; }
.rr-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #000; background: #000; }
.rr-card__img--square { aspect-ratio: 1; }
.rr-card__kicker { font-size: clamp(7px, .8vw, 9px); letter-spacing: .12em; color: var(--rr-green); }
.rr-card__title { font-family: var(--rr-font-display); font-size: clamp(9px, 1.1vw, 12px); color: #fff; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-card__meta { font-size: clamp(7px, .85vw, 10px); color: #8ea093; }
.rr-card__price { font-family: var(--rr-font-crt); font-size: clamp(11px, 1.4vw, 16px); color: var(--rr-green); }

/* drums: washer (shop) + dryer (gallery); ring width = drum floor, set by orbit() */
.rr-drum { position: absolute; inset: 0; }
.rr-drum__ring { position: absolute; left: 50%; top: 50%; width: var(--ring, 100%); aspect-ratio: 1; translate: -50% -50%; }
.rr-drum__center {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 4px;
  background: radial-gradient(circle, rgba(0,0,0,.85), rgba(0,0,0,.6) 60%, transparent 100%);
}
.rr-drum__center .rr-btn { white-space: nowrap; }
.rr-drum__center h3 { margin: 0; font-family: var(--rr-font-display); font-size: clamp(11px, 1.4vw, 16px); color: #fff; text-shadow: 0 0 12px rgba(0,255,65,.5); }
.rr-gal { display: block; border: 3px solid #f3f0e8; background: #000; transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease; box-shadow: 0 8px 12px rgba(0,0,0,.75); }
.rr-gal img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rr-gal:hover, .rr-gal:focus-visible { transform: rotate(0deg) scale(1.06); outline: none; }
/* shop tile: square, image first, price badge; name only on hover / focus */
.rr-item {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #0b0d0b;
  border: 2px solid #ece7db; transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease;
  box-shadow: 0 8px 12px rgba(0,0,0,.75);
}
.rr-item img { width: 100%; height: 100%; object-fit: cover; }
.rr-item__price { position: absolute; left: 0; bottom: 0; font-family: var(--rr-font-crt); font-size: clamp(10px, 1.3vw, 15px); line-height: 1; color: #000; background: var(--rr-green); padding: 2px 5px 1px; }
.rr-item__name {
  position: absolute; inset: auto 0 0 0; padding: 18px 5px 4px; font-family: var(--rr-font-display); font-size: clamp(7px, .8vw, 10px); line-height: 1.15;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.9)); opacity: 0; transition: opacity .2s ease; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rr-item:hover, .rr-item:focus-visible { transform: rotate(0deg) scale(1.08); outline: none; border-color: var(--rr-green); }
.rr-item:hover .rr-item__name, .rr-item:focus-visible .rr-item__name { opacity: 1; }
.rr-item:hover .rr-item__price, .rr-item:focus-visible .rr-item__price { z-index: 1; }

/* stove: oven only — hero on the upper rack (front edge ≈ 49%), trays on the lower rack (≈ 86%) */
.rr-oven { position: absolute; inset: 0; }
.rr-oven__hero {
  position: absolute; left: 6%; right: 6%; bottom: 51%; height: 38%;
  display: flex; gap: 4%; align-items: flex-end;
}
.rr-oven__hero img { height: 100%; width: auto; flex: none; aspect-ratio: 1; object-fit: cover; border: 2px solid #f3e6c7; box-shadow: 0 0 24px rgba(255,120,40,.35), 0 8px 10px rgba(0,0,0,.8); }
.rr-oven__hero-text { display: grid; gap: 3px; padding-bottom: 2%; min-width: 0; flex: 1 1 0; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.rr-oven__hero strong { font-family: var(--rr-font-display); font-size: clamp(11px, 1.4vw, 17px); color: #fff; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-oven__hero small { font-size: clamp(8px, .9vw, 10px); color: #ffd28a; letter-spacing: .12em; }
.rr-oven__hero em { font-style: normal; font-family: var(--rr-font-crt); font-size: clamp(10px, 1.2vw, 14px); color: var(--rr-green); }
.rr-oven__hero:hover strong, .rr-oven__hero:focus-visible strong { color: var(--rr-green); }
.rr-oven__hero:focus-visible { outline: none; }
.rr-oven__trays {
  position: absolute; left: 10%; right: 10%; bottom: 14%; height: 26%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%; align-items: end;
}
.rr-oven__tray { display: grid; gap: 2px; justify-items: center; min-width: 0; transition: transform .25s ease; transform-origin: 50% 100%; }
.rr-oven__tray img { width: 100%; max-height: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #f3e6c7; box-shadow: 0 0 14px rgba(255,120,40,.3), 0 6px 8px rgba(0,0,0,.8); }
.rr-oven__tray span { font-family: var(--rr-font-display); font-size: clamp(7px, .8vw, 9px); color: #ffe3b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 0 #000; }
.rr-oven__tray:hover, .rr-oven__tray:focus-visible { transform: translateY(-4px) scale(1.05); outline: none; }
.rr-oven__tray:hover span { color: var(--rr-green); }

/* crt: video screen */
.rr-cavity--crt { background: #000; border-radius: 4% / 5%; }
.rr-screen {
  position: absolute; inset: 0; overflow: hidden; background: radial-gradient(110% 100% at 50% 50%, #0b1a0f 0%, #020402 85%);
  transform: scaleY(.004); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1) .15s, opacity .2s ease .15s;
}
.is-open .rr-screen { transform: scaleY(1); opacity: 1; }
.rr-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.rr-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(100% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.7)); }
.rr-screen__hud { position: absolute; left: 4%; right: 4%; top: 4%; z-index: 2; display: flex; justify-content: space-between; font-family: var(--rr-font-crt); font-size: clamp(12px, 1.6vw, 20px); color: var(--rr-green); text-shadow: 0 0 8px rgba(0,255,65,.7); }
.rr-screen__grid { position: absolute; left: 4%; right: 4%; top: 17%; bottom: 5%; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3%; }
.rr-vid { position: relative; display: block; overflow: hidden; border: 1px solid var(--rr-green-dim); background: #000; }
.rr-vid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.1); }
.rr-vid:hover img, .rr-vid:focus-visible img { filter: saturate(1) contrast(1.1); }
.rr-vid:focus-visible { outline: 1px solid var(--rr-green); }
.rr-vid__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: clamp(7px, .85vw, 10px); background: rgba(0,0,0,.75); color: #dfe8df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-vid__ch { position: absolute; left: 0; top: 0; padding: 2px 5px; font-size: clamp(6px, .7vw, 8px); letter-spacing: .12em; background: var(--rr-green); color: #000; }
.rr-vid__play { position: absolute; left: 50%; top: 45%; translate: -50% -50%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: rgba(0,255,65,.9); color: #000; display: grid; place-items: center; font-size: clamp(8px, 1vw, 12px); }

/* ghost the wall copy while the focus copy is open */
.rr-app.is-ghost .rr-app__hit { opacity: .18; transform: none; }
.rr-app.is-ghost .rr-app__hit::before, .rr-app.is-ghost .rr-app__hit::after { opacity: 0; }

/* all continuous motion pauses while the tab is hidden (app.js toggles the class) */
.is-hidden .rr-ticker__track, .is-hidden .rr-vinyl, .is-hidden .rr-orbit, .is-hidden .rr-orbit__spin,
.is-hidden .rr-rail__dot, .is-hidden .rr-crt-tile__deck i { animation-play-state: paused; }

/* ------------------------------------------------------------ responsive */
/* the shelf is ≈ 2.91 × --rr-floor-h + 46px wide; shrink the whole wall
   together (never one appliance) so ~30px of wall stays either side */
@media (max-width: 1240px) {
  .rr-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .rr-shelf { --rr-floor-h: min(268px, calc((100vw - 404px) / 2.91)); }
}
@media (max-width: 1024px) {
  .rr-shelf { --rr-floor-h: min(268px, calc((100vw - 144px) / 2.91)); }
  .rr-grid { grid-template-columns: 1fr; }
  .rr-right { order: 2; border-left: 0; border-top: 1px solid #000; }
  .rr-stage { order: 1; }
  .rr-rail { position: static; inset: auto; }
  .rr-feed { max-height: 360px; }
  .rr-focus__dialog { grid-template-columns: 1fr; gap: 14px; overflow: auto; align-content: start; }
  .rr-focus__app { width: min(100%, calc((70vh) * var(--w) / var(--h))); }
}
@media (hover: none) {
  .rr-thumb:hover img,
  .rr-poster:hover .rr-poster__img,
  .rr-app__hit:hover,
  .rr-app__hit:hover .rr-body { transform: none; }
}
@media (max-width: 720px), (max-device-width: 540px) {
  /* Scrollable phone page. Two equal columns, labels under each appliance.
     Width comes from the layout viewport (pinned in px by app.js), never from
     image intrinsic size or 100vw, so Safari cannot grow the document.
     never lock overflow-y — the page stays a normal scrollable document. */
  html.rr-draft .rr-frame {
    width: var(--rr-lock-w, 100%);
    max-width: 100%;
    overflow-x: clip;
  }
  .rr-wall { padding: 12px 12px 20px; overflow: hidden; }
  html.rr-draft .rr-shelf {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "logo logo"
      "fridge microwave"
      "washer crt"
      "stove dryer";
    column-gap: 12px;
    row-gap: 16px;
    justify-content: stretch;
    justify-items: stretch;
    align-items: start;
  }
  html.rr-draft .rr-shelf::after { left: 0; right: 0; }
  .rr-shelf .rr-app--microwave .rr-app__hit::before,
  .rr-shelf .rr-app--crt .rr-app__hit::before { display: none; }
  .rr-shelf .rr-app--microwave, .rr-shelf .rr-app--crt { gap: 8px; }
  html.rr-draft .rr-app,
  html.rr-draft .rr-app .rr-app__hit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  html.rr-draft .rr-app { gap: 8px; align-items: center; }
  html.rr-draft .rr-app--fridge .rr-body,
  html.rr-draft .rr-app--microwave .rr-body,
  html.rr-draft .rr-app--crt .rr-body,
  html.rr-draft .rr-app--washer .rr-body,
  html.rr-draft .rr-app--dryer .rr-body,
  html.rr-draft .rr-app--stove .rr-body {
    width: 88%;
    max-width: 88%;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
    margin-inline: auto;
  }
  html.rr-draft .rr-app__label {
    margin: 0;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
  .rr-wordmark { width: min(260px, 72%); max-width: 260px; margin-inline: auto; }
  .rr-wordmark__sub { font-size: 15px; }
  .rr-pipes { display: none; }
  .rr-strip { grid-template-columns: 1fr; }
  .rr-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The open appliance sits in the middle of the visible screen. The note
     panel is pinned under it. Touch on the scrim does not scroll the page. */
  .rr-focus {
    inset: 0;
    height: 100dvh; max-height: 100dvh;
    touch-action: none;
    overscroll-behavior: none;
  }
  .rr-focus__dialog {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: block;
  }
  .rr-focus__app {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    --rr-fit: min(42dvh, calc(100dvh - 300px));
    width: min(92%, calc(var(--rr-fit) * var(--w) / var(--h)));
    max-height: var(--rr-fit);
    min-height: 0;
  }
  .rr-focus__app .rr-body { width: 100%; max-height: var(--rr-fit); }
  .rr-focus__panel {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    transform: none;
    max-height: min(24dvh, 200px);
    overflow: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  /* Interiors were opacity 0 until .is-open. On a phone that paint often
     never lands, then flashes for a frame as the door shuts. Show them as
     soon as they mount; the door still covers them until it swings. */
  .rr-focus .rr-int, .rr-focus .rr-screen { opacity: 1; transform: none; transition: none; }
  /* Shop and gallery tiles: no rotate/spin. Those transforms inside the
     round porthole are what a phone fails to paint. */
  .rr-focus .rr-orbit, .rr-focus .rr-orbit__spin { animation: none; }
  .rr-focus .rr-orbit__arm { transform: none; }
  .rr-focus .rr-orbit__seat {
    transform: none; translate: none;
    left: calc(var(--x) - var(--size) / 2);
    top: calc(var(--y) - var(--size) / 2);
  }
  .rr-focus .rr-item, .rr-focus .rr-gal { transform: none; }
  .rr-focus .rr-item__name { opacity: 1; }
  /* Tuck the fridge photo inside the shell. Cover-fit was painting a hair
     past the metal on a narrow screen. */
  .rr-body--fridge .rr-cavity__img {
    inset: auto;
    left: 1.5%; top: 1.5%;
    width: 97%; height: 97%;
  }
  .rr-foot { justify-content: center; text-align: center; }
}

/* Phone layout follows the screen, not the layout viewport. A max-width
   query drops once iOS widens the viewport, and the desktop shelf (wordmark
   beside the fridge) comes back and keeps growing. html.rr-phone is set from
   screen.width before first paint. Sizes are px from --rr-lock-w so a
   percentage + aspect-ratio cycle cannot run. never lock overflow-y. */
html.rr-phone {
  width: var(--rr-lock-w);
  max-width: var(--rr-lock-w);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
html.rr-phone body {
  width: var(--rr-lock-w);
  max-width: var(--rr-lock-w);
  overflow-x: hidden;
}
html.rr-phone .rr-frame,
html.rr-phone .rr-grid,
html.rr-phone .rr-stage,
html.rr-phone .rr-wall,
html.rr-phone .rr-top,
html.rr-phone .rr-strip,
html.rr-phone .rr-foot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html.rr-phone .rr-frame { overflow-x: hidden; }
html.rr-phone .rr-grid { grid-template-columns: minmax(0, 1fr); }
html.rr-phone .rr-right { order: 2; border-left: 0; border-top: 1px solid #000; }
html.rr-phone .rr-stage { order: 1; }
html.rr-phone .rr-rail { position: static; inset: auto; }
html.rr-phone .rr-feed { max-height: 360px; }
html.rr-phone .rr-wall { padding: 12px 12px 20px; overflow: hidden; contain: paint; }
html.rr-phone .rr-shelf {
  --rr-floor-h: 160px;
  width: 100%;
  max-width: 100%;
  contain: inline-size;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
    "logo logo"
    "fridge microwave"
    "washer crt"
    "stove dryer";
  column-gap: 12px;
  row-gap: 16px;
  justify-content: stretch;
  justify-items: stretch;
  align-items: start;
}
html.rr-phone .rr-shelf::after { left: 0; right: 0; }
html.rr-phone .rr-shelf .rr-app--microwave .rr-app__hit::before,
html.rr-phone .rr-shelf .rr-app--crt .rr-app__hit::before { display: none; }
html.rr-phone .rr-pipes { display: none; }
html.rr-phone .rr-app,
html.rr-phone .rr-app .rr-app__hit {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html.rr-phone .rr-app { gap: 8px; align-items: center; }
html.rr-phone .rr-app--fridge .rr-body,
html.rr-phone .rr-app--microwave .rr-body,
html.rr-phone .rr-app--crt .rr-body,
html.rr-phone .rr-app--washer .rr-body,
html.rr-phone .rr-app--dryer .rr-body,
html.rr-phone .rr-app--stove .rr-body {
  width: calc(var(--rr-lock-w) * 0.36);
  height: calc(var(--rr-lock-w) * 0.36 * var(--h) / var(--w));
  max-width: calc(var(--rr-lock-w) * 0.36);
  aspect-ratio: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin-inline: auto;
}
html.rr-phone .rr-app__label {
  margin: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
html.rr-phone .rr-wordmark {
  width: calc(var(--rr-lock-w) * 0.62);
  max-width: calc(var(--rr-lock-w) * 0.62);
  margin-inline: auto;
}
html.rr-phone .rr-wordmark__sub { font-size: 15px; }
html.rr-phone .rr-strip { grid-template-columns: 1fr; }
html.rr-phone .rr-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.rr-phone .rr-thumb {
  aspect-ratio: auto;
  width: 100%;
  height: calc(var(--rr-lock-w) * 0.16);
  max-height: calc(var(--rr-lock-w) * 0.16);
}
html.rr-phone .rr-thumb--square {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1;
}
html.rr-phone .rr-foot { justify-content: center; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .rr-ticker__track, .rr-vinyl, .rr-orbit, .rr-orbit__spin, .rr-rail__dot, .rr-crt-tile__deck i { animation: none !important; }
  .rr-door { transition: opacity .3s ease; }
  .is-opening .rr-door, .is-closing .rr-door { animation: none !important; }
  .is-open .rr-door { transform: none !important; opacity: 0; pointer-events: none; }
  .rr-focus__app.is-flipping { transition: opacity .25s ease; }
  .rr-int { transition: opacity .3s ease; transform: none; }
  .rr-app__hit, .rr-tile, .rr-gal, .rr-item, .rr-oven__tray, .rr-thumb img, .rr-poster__img { transition: none; }
  .rr-screen { transition: opacity .3s ease; transform: none; }
}