/* Rocky River Apps: app rooms and doors (home, /apps, /table-torch, /backmarker, 404).
   A room is the app icon's material as the ground plus the app's own light. Each room re-declares
   the studio roles locally. Colour values live only in the room token blocks. */

@property --light { syntax: '<color>'; inherits: true; initial-value: #FFB46B; } /* token: Table Torch default light */
/* The menu card's paper under the light: hot spot, near, mid, far (text-safe), edge. Initial values are Candlelight. */
@property --paper-hot { syntax: '<color>'; inherits: true; initial-value: #FFCE9F; }
@property --paper-near { syntax: '<color>'; inherits: true; initial-value: #FFAD60; }
@property --paper-mid { syntax: '<color>'; inherits: true; initial-value: #D69150; }
@property --paper-far { syntax: '<color>'; inherits: true; initial-value: #B37943; }
@property --paper-edge { syntax: '<color>'; inherits: true; initial-value: #442E19; }

/* ---------- Room tokens ---------- */
.room--torch {
  --tt-navy: #101C31;
  --tt-deep-red: #B40000; --tt-warm-red: #C83200; --tt-amber: #FF9329;
  --tt-candle: #FFB46B; --tt-soft-white: #FFC896; --tt-white: #FFFFFF;
  /* Bright and Party palettes (from the app's source) */
  --tt-b1: #FFFFFF; --tt-b2: #FFC896; --tt-b3: #98FF98; --tt-b4: #4682B4; --tt-b5: #FF0000; --tt-b6: #800000;
  --tt-p1: #FF00FF; --tt-p2: #FF19C8; --tt-p3: #BF00FF; --tt-p4: #7F00FF; --tt-p5: #0064FF; --tt-p6: #BA55D3;
  --tt-cream: #FFF8F0; --tt-mist: #CBD3DF; --tt-fog: #B8C2D0;
  --tt-bezel: #070C16; --tt-glass: rgb(255 255 255 / .12); --tt-chip-on: rgb(255 255 255 / .10); --tt-deep: rgb(0 0 0 / .7);
  --tt-ink: #120C09; /* menu ink: warm black */
  --tt-ink-red: #000000; /* menu ink under the reds: the only ink that keeps 4.95:1 on pure red paper */
  --menu-ink: var(--tt-ink);
  /* The menu card under each light: far side, near (phone) side. Ink stays >= 5.2:1 everywhere. */
  --paper-hot: #FFCE9F; --paper-near: #FFAD60; --paper-mid: #D69150; --paper-far: #B37943; --paper-edge: #442E19;
  --src: 112% 50%; --fall: 28rem; /* where the phone is, and how far its light reaches */
  --bg: var(--tt-navy); --ink: var(--tt-cream); --ink-2: var(--tt-mist); --ink-3: var(--tt-fog);
  --rule: var(--tt-glass); --focus: var(--tt-candle); --link: var(--tt-cream); --accent: var(--light);
  --device: var(--tt-bezel); --device-rim: var(--tt-glass); --device-shadow: var(--tt-deep);
  --light: var(--tt-candle); --app-light: var(--tt-candle);
  --lit-stone: color-mix(in srgb, var(--tt-navy) 74%, var(--frost));
  --lit-ink: color-mix(in oklab, var(--light) 24%, var(--tt-cream));
  background-color: var(--bg); color: var(--ink);
  transition: --light 450ms ease;
}
.room--torch:has(input[value="deep-red"]:checked) { --light: var(--tt-deep-red); --menu-ink: var(--tt-ink-red); --vig-k: .5; --paper-hot: #FF3A18; --paper-near: #FF1206; --paper-mid: #FF0000; --paper-far: #FF0000; --paper-edge: #3A0000; }
.room--torch:has(input[value="warm-red"]:checked) { --light: var(--tt-warm-red); --menu-ink: var(--tt-ink-red); --vig-k: .6; --paper-hot: #FF6D12; --paper-near: #FF3D00; --paper-mid: #FA3C00; --paper-far: #F53B00; --paper-edge: #3E0F00; }
.room--torch:has(input[value="amber"]:checked) { --light: var(--tt-amber); --paper-hot: #FFBB7C; --paper-near: #FF8D25; --paper-mid: #E27D20; --paper-far: #C86F1D; --paper-edge: #4C2A0B; }
.room--torch:has(input[value="candlelight"]:checked) { --light: var(--tt-candle); --paper-hot: #FFCE9F; --paper-near: #FFAD60; --paper-mid: #D69150; --paper-far: #B37943; --paper-edge: #442E19; }
.room--torch:has(input[value="soft-white"]:checked) { --light: var(--tt-soft-white); --paper-hot: #FFD9B6; --paper-near: #FFC086; --paper-mid: #CE9B6C; --paper-far: #A77D58; --paper-edge: #3F3021; }
.room--torch:has(input[value="white"]:checked) { --light: var(--tt-white); --paper-hot: #FFF9EF; --paper-near: #FFF4E4; --paper-mid: #BCB4A8; --paper-far: #8B857C; --paper-edge: #35332F; }

.room--bm {
  --bm-asphalt: #2C2D2F; --bm-asphalt-hi: #38393B; --bm-asphalt-lo: #232425;
  --bm-yellow: #F4C024; --bm-paint: #ECEDE7; --bm-mist: #C9CAC4; --bm-fog: #BDBEB8;
  --bm-bezel: #141516; --bm-glass: rgb(255 255 255 / .09); --bm-deep: rgb(0 0 0 / .8);
  --bg: var(--bm-asphalt); --ink: var(--bm-paint); --ink-2: var(--bm-mist); --ink-3: var(--bm-fog);
  --rule: var(--bm-glass); --focus: var(--bm-yellow); --link: var(--bm-paint); --accent: var(--bm-yellow);
  --device: var(--bm-bezel); --device-rim: var(--bm-glass); --device-shadow: var(--bm-deep);
  --app-light: var(--bm-yellow);
  --lit-stone: color-mix(in srgb, var(--bm-asphalt) 74%, var(--frost));
  background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(90% 70% at 40% 30%, var(--bm-asphalt-hi) 0%, var(--bm-asphalt) 55%, var(--bm-asphalt-lo) 100%);
}
.chip[data-c="deep-red"] { --c: var(--tt-deep-red); } .chip[data-c="warm-red"] { --c: var(--tt-warm-red); }
.chip[data-c="amber"] { --c: var(--tt-amber); } .chip[data-c="candlelight"] { --c: var(--tt-candle); }
.chip[data-c="soft-white"] { --c: var(--tt-soft-white); } .chip[data-c="white"] { --c: var(--tt-white); }

/* ---------- Shared room parts ---------- */
.room { position: relative; overflow: clip; }
.room a { color: var(--link); }
.room :focus-visible { outline-color: var(--focus); }
.grain::before { /* fine aggregate on asphalt, very quiet */
  content: ""; position: absolute; inset: 0; opacity: .2; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.room-wrap { position: relative; padding-block: clamp(4rem, 8vw, 7rem); }
.app-head { display: flex; align-items: center; gap: 1rem; }
.app-head .icon { width: 3rem; height: 3rem; flex: none; }
.app-head h2, .app-head h1 { font-size: var(--step-2); font-weight: 700; line-height: 1.15; }
.app-head p { font-size: var(--step--1); color: var(--ink-2); }
.app-head--page .icon { width: 5rem; height: 5rem; }
.app-head--page h1 { font-size: var(--step-3); font-weight: 800; }
.display { font-size: var(--step-5); line-height: 1; font-weight: 800; letter-spacing: -.02em; word-spacing: -.04em; margin-top: 1.75rem; text-wrap: balance; }
.room--torch .display { color: var(--lit-ink); font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.25rem); }
.body-copy { font-size: var(--step-1); line-height: 1.5; margin-top: 1.25rem; max-width: 30em; color: var(--ink-2); }
.facts { display: grid; gap: .625rem; margin-top: 1.75rem; }
.facts li { position: relative; padding-left: 1.25rem; color: var(--ink-2); max-width: 34em; }
.facts li::before { content: ""; position: absolute; left: 0; top: .65em; width: .5rem; height: 2px; background: var(--accent); }
.facts strong { color: var(--ink); }
.buy .requires { flex-basis: 100%; color: var(--ink-2); font-size: var(--step--1); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.room .status { color: var(--ink); }
.room--bm .status { color: var(--bm-yellow); }
.device { position: relative; padding: .5625rem; border-radius: 17% / 7.8%; background: var(--device); box-shadow: inset 0 0 0 1.5px var(--device-rim), 0 3rem 5rem -2rem var(--device-shadow); }
.device img { width: 100%; border-radius: 14.5% / 6.6%; }
.device--ipad { padding: .625rem; border-radius: 1.875rem; }
.device--ipad img { border-radius: 1.3125rem; aspect-ratio: 3 / 4; }
.made-by { display: flex; align-items: center; gap: .75rem; color: var(--ink-2); }
.made-by .mark { width: 2.25rem; height: auto; aspect-ratio: 49.5 / 43.5; flex: none; --rr-stone: var(--lit-stone); --rr-cut: var(--app-light); }
.legal { font-size: var(--step--1); color: var(--ink-3); max-width: 60em; }

/* ---------- Doors: each app's entry, a slice of its room ---------- */
/* Home and 404: two doors side by side, their rows shared (subgrid) so names, status lines, the badge slot
   and the links sit on the same lines in both doors. */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(var(--art-h, clamp(14rem, calc(100svh - 34rem), 22rem)), 1fr) auto auto auto auto; column-gap: clamp(.75rem, 1.5vw, 1.25rem); }
.door { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: center; align-items: start; text-align: center; row-gap: .75rem; padding: clamp(1.75rem, 3vw, 3rem); border-radius: var(--radius); overflow: clip; }
.door-art { position: relative; align-self: center; display: block; }
.door .icon { position: relative; width: clamp(10rem, 14.5vw, 13rem); height: auto; aspect-ratio: 1; box-shadow: 0 1.5rem 3rem -1rem var(--device-shadow); }
.door-name { display: grid; gap: .375rem; justify-items: center; margin-top: .5rem; }
.door-actions { display: contents; }
.door h2 { font-size: var(--step-3); font-weight: 700; line-height: 1.1; }
.door p { color: var(--ink-2); max-width: 26em; }
.door-slot { min-height: 2.75rem; display: grid; align-content: center; justify-items: inherit; gap: .5rem; }
.door .door-note { font-size: var(--step--1); max-width: 22em; }
.door .requires { font-size: var(--step--1); }
.door .status { padding-left: 0; text-wrap: balance; }
.door .status::before { position: static; display: inline-block; margin-right: .5rem; vertical-align: .05em; }
.door-link { color: var(--ink); text-decoration: none; }
.door-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* the whole door is the link */
.door-link:focus-visible { outline: 0; }
.door:has(.door-link:focus-visible) { outline: 3px solid var(--ring); outline-offset: 3px; }
.door:hover .door-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.door--torch .door-art::before { /* the flame lights the door */
  content: ""; position: absolute; left: 50%; top: 45%; width: 300%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tt-candle) 30%, transparent), color-mix(in srgb, var(--tt-candle) 8%, transparent) 55%, transparent);
}
.door-art .line { position: absolute; right: 100%; width: 100vw; top: 44%; height: 6.64%; background: var(--bm-yellow); } /* the icon's painted line, run in from the door's edge */
.door-shot { display: none; }

/* /apps: one wide door per app: icon | name, facts and actions | one real screen */
.doors--rows { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 1.25rem; }
.doors--rows .door { grid-row: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art name shot" "art actions shot"; justify-items: start; text-align: left; row-gap: 1rem; column-gap: clamp(2rem, 4vw, 3.5rem); align-content: center; }
.doors--rows .door-art { grid-area: art; }
.doors--rows .door-name { grid-area: name; justify-items: start; margin: 0; }
.doors--rows .door-actions { grid-area: actions; display: grid; gap: .625rem; justify-items: start; }
.doors--rows .door-slot { justify-items: start; }
.doors--rows .door .status { padding-left: 1rem; }
.doors--rows .door .status::before { position: absolute; margin: 0; }
.doors--rows .door .facts { margin-top: .75rem; }
.doors--rows .door-shot { grid-area: shot; display: block; align-self: center; width: 11rem; }
.door-shot .device { padding: .375rem; }
.door-shot--crop .device { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.door-shot--crop img { aspect-ratio: 644 / 1050; object-fit: cover; object-position: top; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Table Torch: a menu on a dark table, lit by the phone ---------- */
.torch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro scene" "act scene"; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tt-intro { grid-area: intro; } .tt-act { grid-area: act; } .scene { grid-area: scene; }
.lit { background-image: radial-gradient(55% 65% at 75% 50%, color-mix(in oklab, var(--light) 18%, var(--bg)) 0%, var(--bg) 70%); }
.scene { position: relative; align-self: center; display: grid; place-items: center; padding: 2rem 0 2.5rem; min-height: 34rem; }
.scene::before { /* light pooling on the table around the phone */
  content: ""; position: absolute; left: 74%; top: 52%; width: 120%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--light) 34%, transparent), color-mix(in srgb, var(--light) 10%, transparent) 55%, transparent);
}
.menu-card {
  position: relative; z-index: 1; width: min(24.5rem, calc(100% - 10.5rem)); margin-right: 10.5rem; padding: 2.75rem 2.75rem 2.5rem; rotate: -2.5deg; border-radius: .375rem;
  color: var(--menu-ink); text-align: center;
  /* Paper lit by the phone: a hot spot and a falloff centred on the phone (--src). The far stop sits at the
     text block's farthest corner and keeps >= 5.3:1 with the ink; only the margins fall to the dark edge. */
  background:
    radial-gradient(circle calc(var(--fall) * .42) at var(--src), var(--paper-hot), transparent),
    radial-gradient(circle var(--fall) at var(--src), var(--paper-near) 0%, var(--paper-mid) 50%, var(--paper-far) 100%);
  box-shadow: inset 0 0 calc(var(--vig, 2.5rem) * var(--vig-k, 1)) 0 var(--paper-edge), 0 2rem 3rem -1.25rem var(--device-shadow), 0 0 0 1px var(--tt-glass);
  transition: --paper-hot 450ms ease, --paper-near 450ms ease, --paper-mid 450ms ease, --paper-far 450ms ease, --paper-edge 450ms ease;
}
.menu-card h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.menu-card ul { margin-top: 1.25rem; display: grid; gap: .875rem; }
.menu-card li strong { display: block; font-size: 1.0625rem; line-height: 1.3; }
.menu-card li span { display: block; font-size: .9375rem; line-height: 1.4; }
.menu-card .menu-foot { margin-top: 1.25rem; padding-top: .875rem; border-top: 1px solid currentColor; font-size: .9375rem; }
.scene .device { position: absolute; right: 2%; top: 50%; width: clamp(7.5rem, 11vw, 9.5rem); translate: 0 -50%; rotate: 7deg; padding: .4rem;
  box-shadow: inset 0 0 0 1.5px var(--device-rim), 0 0 4rem .5rem color-mix(in srgb, var(--light) 45%, transparent), 0 2rem 3rem -1rem var(--device-shadow); }
.scene .device img { aspect-ratio: 1320 / 2868; object-fit: cover; }

.picker { margin: 2rem 0 0; padding: 0; border: 0; min-width: 0; }
.picker legend { padding: 0; font-weight: 700; }
.picker-hint { color: var(--ink-3); font-size: var(--step--1); margin-top: .2rem; }
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-top: .875rem; max-width: 34rem; }
.chip { position: relative; display: grid; justify-items: center; gap: .5rem; padding: .625rem .25rem .5rem; border-radius: .875rem; cursor: pointer; text-align: center; font-size: .875rem; line-height: 1.2; color: var(--ink-2); }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--tt-glass); forced-color-adjust: none; }
.chip:has(input:checked) { background: var(--tt-chip-on); color: var(--ink); font-weight: 700; }
.chip:has(input:checked) .chip-dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.chip:has(input:focus-visible), .picker[data-kbd] .chip:has(input:focus) { outline: 3px solid var(--focus); outline-offset: 2px; }
.readout { margin-top: .75rem; font-size: var(--step--1); color: var(--ink-3); }
.readout strong { color: var(--lit-ink); }

/* /table-torch palettes */
.palettes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); margin-top: 2.25rem; align-items: center; }
.palette { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 1.5rem; align-items: center; padding-block: 1.125rem; border-top: 1px solid var(--rule); }
.palette h3 { font-size: var(--step-1); font-weight: 700; }
.palette p { grid-column: 2; color: var(--ink-2); font-size: var(--step--1); }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatches i { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--s); box-shadow: inset 0 0 0 1px var(--tt-glass); forced-color-adjust: none; }
.swatches--own i { background: none; box-shadow: inset 0 0 0 2px var(--rule); }
.swatches--low i:nth-child(1) { --s: var(--tt-deep-red); } .swatches--low i:nth-child(2) { --s: var(--tt-warm-red); } .swatches--low i:nth-child(3) { --s: var(--tt-amber); } .swatches--low i:nth-child(4) { --s: var(--tt-candle); } .swatches--low i:nth-child(5) { --s: var(--tt-soft-white); } .swatches--low i:nth-child(6) { --s: var(--tt-white); }
.swatches--bright i:nth-child(1) { --s: var(--tt-b1); } .swatches--bright i:nth-child(2) { --s: var(--tt-b2); } .swatches--bright i:nth-child(3) { --s: var(--tt-b3); } .swatches--bright i:nth-child(4) { --s: var(--tt-b4); } .swatches--bright i:nth-child(5) { --s: var(--tt-b5); } .swatches--bright i:nth-child(6) { --s: var(--tt-b6); }
.swatches--party i:nth-child(1) { --s: var(--tt-p1); } .swatches--party i:nth-child(2) { --s: var(--tt-p2); } .swatches--party i:nth-child(3) { --s: var(--tt-p3); } .swatches--party i:nth-child(4) { --s: var(--tt-p4); } .swatches--party i:nth-child(5) { --s: var(--tt-p5); } .swatches--party i:nth-child(6) { --s: var(--tt-p6); }
.palettes figure { justify-self: center; width: min(15rem, 70vw); }
.palettes figcaption { margin-top: 1rem; font-size: var(--step--1); color: var(--ink-3); text-align: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .625rem 2rem; font-variant-numeric: tabular-nums; }
.details dt { color: var(--ink-3); }
.details dd { font-weight: 600; }
.details a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
.room-section { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.room-section h2 { font-size: var(--step-3); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; word-spacing: -.04em; }
.room-section .h3 { font-size: var(--step-1); }
.room-section h2 + p { margin-top: .875rem; color: var(--ink-2); font-size: var(--step-1); max-width: 34em; }
.cross { display: flex; align-items: center; gap: 1rem; }
.cross .icon { width: 3.5rem; height: 3.5rem; }

/* ---------- Backmarker: asphalt and one painted line ---------- */
.bm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.room--bm .display { font-size: var(--step-4); margin-top: 1.25rem; }
.hero-device { position: relative; z-index: 1; justify-self: center; width: min(100%, 32rem); }
.head-icon { position: relative; flex: none; display: block; }
.head-icon .line { position: absolute; right: 100%; width: 100vw; top: 44%; height: 6.64%; background: var(--bm-yellow); } /* the icon's painted line, run in from the page edge (clipped by the room) */
.rows { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.row:nth-child(even) > :first-child { order: 2; } /* alternate on wide screens; no focusable content inside */
.row h3 { font-size: var(--step-3); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.row p { margin-top: .875rem; color: var(--ink-2); font-size: var(--step-1); max-width: 30em; }
.row figure { justify-self: center; width: var(--phone-w, 17rem); }
.row figure .device img { aspect-ratio: 644 / 1400; object-fit: cover; }
.device--cropped { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* the screen cut at a clean line, above its results list */
.row figure .device--cropped img, .device--cropped img { aspect-ratio: 644 / 1050; object-position: top; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.made-by + .legal { margin-top: 1.5rem; }
.rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; }
.rest h3 { font-size: var(--step-1); font-weight: 700; }
.rest p { margin-top: .375rem; color: var(--ink-2); }
.name-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; }
.name-note .icon { width: 8rem; height: 8rem; }
.status-note { margin-top: .375rem; color: var(--ink-2); }

/* ---------- Media ---------- */
@media (max-width: 900px) {
  .doors { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: .75rem; }
  .door { grid-row: auto; grid-template-rows: auto; }
  .torch-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "scene" "act"; }
  .scene { min-height: 0; padding-block: 2rem 1rem; }
  .picker { margin-top: 0; }
  .bm-grid, .row, .split, .palettes { grid-template-columns: minmax(0, 1fr); }
  .row:nth-child(even) > :first-child { order: 0; }
  .rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors--rows .door-shot { width: 9rem; }
}
@media (max-width: 600px) {
  .room-wrap { padding-block: 2.5rem; }
  .door { padding: 1.5rem 1.25rem; row-gap: .5rem; }
  .door .icon { width: 10rem; }
  .doors--rows .door { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art name" "actions actions" "shot shot"; column-gap: 1.25rem; }
  .doors--rows .door .icon { width: 5.5rem; }
  .doors--rows .door-art { align-self: start; }
  .doors--rows .door-shot { width: 8rem; justify-self: start; }
  .display { margin-top: 1.25rem; }
  .body-copy { margin-top: 1rem; }
  .facts { margin-top: 1.25rem; gap: .5rem; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room--torch { --src: 84% 106%; --fall: 40rem; } /* on phones the phone lies below the card's corner */
  .menu-card { width: 100%; margin-right: 0; padding: 2rem 1.75rem 1.75rem; rotate: -1.25deg; --vig: 1.5rem; }
  .menu-card ul { gap: .625rem; }
  .scene { padding-block: 1.25rem 5.75rem; }
  .hero-device { width: 82%; }
  .tt-act .picker-hint { margin-top: .125rem; }
  .scene .device { top: auto; bottom: -.25rem; right: 2.75rem; translate: 0 0; width: 4.25rem; rotate: 78deg; padding: .3rem; }
  .scene::before { top: 86%; left: 84%; width: 140%; }
  .rest { grid-template-columns: minmax(0, 1fr); }
  .row figure { --phone-w: 12rem; }
  .rows { gap: 3rem; }
  .palette { grid-template-columns: minmax(0, 1fr); }
  .palette p { grid-column: 1; }
  .name-note { grid-template-columns: minmax(0, 1fr); }
  .name-note .icon { width: 6rem; height: 6rem; }
}
@media (forced-colors: active) {
  .chip { border: 1px solid CanvasText; }
  .chip:has(input:checked) { outline: 3px solid Highlight; outline-offset: 2px; }
  .chip:has(input:focus-visible) { outline: 3px dashed Highlight; }
  .facts li::before { forced-color-adjust: auto; background: CanvasText; }
  .menu-card { forced-color-adjust: auto; border: 1px solid CanvasText; }
  .door { border: 1px solid CanvasText; }
}