/* W1 · VantaPlayer.com — the H89 skin, as CSS.
*
* No framework. No client JavaScript. One file, served as-is. The design was accepted as the H89 return
* of the R3.10 Design package (charcoal / champagne, one warm light, the Weave behind every route, Geist,
* supplied product photographs). Its layout branched on a measured width in the review host; here the
* same three branches are media queries: narrow < 768, mid 768–1023, wide ≥ 1024.
*
* Laws:
* - focus is a visible three-ring halo (page, champagne, white), never removed;
* - nothing is wider than its container, so nothing scrolls sideways;
* - every photograph sits in a reserved aspect box at or below its export width — nothing upscales;
* - state switching in the demonstrations is native radio input + CSS `:has()`; without `:has()` the
* first state stands and the controls are inert, which is a still picture, not a broken one.
*/
/* ---- tokens --------------------------------------------------------------- */
:root {
--bg: #090A0A;
--fg: #F4F4F1;
--fg-strong: #FCFCFA;
--fg-muted: #A9AAA7;
--fg-quiet: #6B675E;
--gold: #E5B750;
--gold-light: #F5DA9C;
--gold-deep: #8F6A2E;
--gold-ink: #0A0A0C;
--edge: rgba(255, 255, 255, 0.10);
--edge-warm: rgba(229, 183, 80, 0.28);
--rule: rgba(229, 183, 80, 0.28);
--glass: linear-gradient(180deg, rgba(21, 23, 27, 0.94), rgba(23, 25, 29, 0.94));
--bar: linear-gradient(180deg, rgba(13, 14, 17, 0.985), rgba(11, 12, 15, 0.975));
--bar-edge: rgba(229, 183, 80, 0.13);
--content-max: 1200px;
--pad-x: clamp(1.25rem, 5vw, 4.5rem);
--section-y: clamp(3rem, 7vw, 7rem);
--stack: clamp(1.25rem, 2.5vw, 2rem);
--stack-wide: clamp(1.75rem, 4vw, 3.5rem);
--radius: 12px;
--radius-panel: 20px;
--font: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--h1: clamp(2.375rem, 5.2vw, 4.25rem);
--h2: clamp(1.875rem, 4.2vw, 3.375rem);
--h2-small: clamp(1.75rem, 3.6vw, 2.75rem);
--focus-ring: 0 0 0 2px #090A0A, 0 0 0 4px #E5B750, 0 0 0 6px #FCFCFA;
color-scheme: dark;
}
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/GeistMono-Regular.woff2') format('woff2'); }
/* ---- reset, minimal ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
font-family: var(--font);
font-size: 100%;
line-height: 1.55;
background: var(--bg);
color: var(--fg);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
scroll-padding-top: 76px;
text-wrap: pretty;
}
[id] { scroll-margin-top: 76px; }
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow-x: clip;
overflow-wrap: anywhere;
position: relative;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--fg); }
a:hover { color: var(--fg-strong); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.025em; line-height: 1.06; color: var(--fg-strong); }
h1 { font-size: var(--h1); max-width: 18ch; }
h2 { font-size: var(--h2); max-width: 20ch; }
h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--fg); }
p { margin: 0; }
p + p { margin-top: 0.75em; }
/* ---- motion and user preferences ----------------------------------------- */
a, button, .btn, .skip, summary, .demo-controls label { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.ground-weave, .ground-lit { transform: none !important; }
}
@media (prefers-contrast: more) {
.ground-weave, .ground-lit, .ground-pool { opacity: 0 !important; }
.ground-light { background: none !important; }
a, button { text-decoration-thickness: from-font; }
}
@media (forced-colors: active) {
.ground { display: none !important; }
a, button, input, summary, .btn, [tabindex] { forced-color-adjust: none; color: LinkText; background: Canvas; border: 1px solid CanvasText; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}
/* ---- focus: the halo, never removed -------------------------------------- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius); }
main:focus-visible { box-shadow: none; }
/* ---- skip link ------------------------------------------------------------ */
.skip {
position: absolute; inset-inline-start: 16px; top: -100px; z-index: 20;
display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px;
border-radius: var(--radius);
background: linear-gradient(140deg, #F5DA9C, #E5B750 62%, #8F6A2E);
color: var(--gold-ink); text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.skip:focus-visible { top: 12px; }
/* ---- the Weave: one continuous ground behind every route ------------------ */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); --px: 26%; --py: 0%; }
.ground-weave, .ground-lit, .ground-pool {
position: absolute; inset: -160px -25vw;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%2288%22%20viewBox%3D%220%200%2088%2088%22%3E%3Cg%20fill%3D%22%23E5B750%22%3E%3Cg%20transform%3D%22translate%2816.343%2C15.651%29%20scale%280.13829%29%22%3E%3Cpath%20d%3D%22M%2060.0%2C84.0%20L%20200.0%2C326.0%20L%20340.0%2C84.0%20L%20262.0%2C84.0%20L%20200.0%2C190.4%20L%20138.0%2C84.0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2860.343%2C59.651%29%20scale%280.13829%29%22%3E%3Cg%20transform%3D%22rotate%2890%20200%20205%29%22%3E%3Cpath%20d%3D%22M%2060.0%2C84.0%20L%20200.0%2C326.0%20L%20340.0%2C84.0%20L%20262.0%2C84.0%20L%20200.0%2C190.4%20L%20138.0%2C84.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-27.657%2C-28.349%29%20scale%280.13829%29%22%3E%3Cg%20transform%3D%22rotate%2890%20200%20205%29%22%3E%3Cpath%20d%3D%22M%2060.0%2C84.0%20L%20200.0%2C326.0%20L%20340.0%2C84.0%20L%20262.0%2C84.0%20L%20200.0%2C190.4%20L%20138.0%2C84.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2860.343%2C-28.349%29%20scale%280.13829%29%22%3E%3Cg%20transform%3D%22rotate%2890%20200%20205%29%22%3E%3Cpath%20d%3D%22M%2060.0%2C84.0%20L%20200.0%2C326.0%20L%20340.0%2C84.0%20L%20262.0%2C84.0%20L%20200.0%2C190.4%20L%20138.0%2C84.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-27.657%2C59.651%29%20scale%280.13829%29%22%3E%3Cg%20transform%3D%22rotate%2890%20200%20205%29%22%3E%3Cpath%20d%3D%22M%2060.0%2C84.0%20L%20200.0%2C326.0%20L%20340.0%2C84.0%20L%20262.0%2C84.0%20L%20200.0%2C190.4%20L%20138.0%2C84.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 140px 140px; background-repeat: repeat;
}
/* H90-C5 · the Weave provides atmosphere; the words and the screens lead.
The flat weave is NOT what competed with the heading — at 0.03 it is barely present and it is the
atmosphere the owner asked to keep. The competition came from the two bright layers aimed at
`--px: 26%, --py: 0%`, which is precisely where the headline sits: `.ground-lit` (the weave lit to
0.075 under a radial mask) and `.ground-light` (a gold wash). Both are brought down; neither is
removed, and the mask geometry, the reduced-motion rule and the reduced-transparency rule below are
untouched. */
.ground-weave { opacity: 0.03; }
.ground-lit {
opacity: 0.045;
-webkit-mask-image: radial-gradient(78% 96% at var(--px) var(--py), #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%);
mask-image: radial-gradient(78% 96% at var(--px) var(--py), #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%);
}
.ground-pool { background-image: none; background: radial-gradient(74% 82% at var(--px) var(--py), rgba(31, 29, 38, 0.55) 0%, rgba(12, 12, 16, 0.26) 46%, transparent 72%); }
.ground-light { position: absolute; inset: 0; background: radial-gradient(55% 42% at 26% 0%, rgba(229, 183, 80, 0.085) 0%, rgba(70, 56, 34, 0.12) 34%, rgba(9, 10, 10, 0) 68%); }
@media (max-width: 767px) { .ground-weave { opacity: 0.022; } .ground-lit { opacity: 0.028; } }
header, main, footer { position: relative; z-index: 1; }
/* ---- header --------------------------------------------------------------- */
header {
position: sticky; top: 0; z-index: 5;
background: var(--bar); border-bottom: 1px solid var(--bar-edge);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.bar { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--pad-x); min-height: 64px; display: flex; align-items: center; gap: 16px; }
.brand { margin: 0; }
.brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg-strong); min-height: 44px; }
.brand svg { display: block; width: 20px; height: 18px; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.2em; color: var(--fg-strong); }
.brand-sub { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.34em; color: var(--gold-deep); margin-top: 3px; }
nav[aria-label="Site"] { margin-inline-start: auto; display: flex; align-items: center; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; }
.nav-wide { display: flex; gap: 2px; align-items: center; }
.nav-wide a { display: flex; align-items: center; min-height: 44px; padding: 0 11px; font-size: 0.875rem; color: var(--fg-muted); border-radius: var(--radius); white-space: nowrap; }
.nav-wide a span { padding: 3px 0; border-bottom: 2px solid transparent; }
.nav-wide a:hover { color: var(--gold-light); }
.nav-wide li:first-child { display: none; }
.nav-wide a[aria-current="page"] { color: var(--fg-strong); }
.nav-wide a[aria-current="page"] span { border-bottom-color: var(--gold); }
.nav-menu { display: none; }
.nav-menu summary {
list-style: none; cursor: pointer; user-select: none;
display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 14px;
border-radius: var(--radius); border: 1px solid var(--edge-warm); background: rgba(9, 10, 10, 0.45);
color: var(--gold-light); font-size: 0.875rem; font-weight: 500;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: linear-gradient(180deg, rgba(26, 28, 32, 0.92), rgba(31, 30, 26, 0.9)); }
.nav-narrow {
position: absolute; inset-inline: 0; top: 100%; z-index: 6;
max-width: var(--content-max); margin: 0 auto; padding: 8px var(--pad-x) 12px;
display: flex; flex-direction: column; gap: 2px;
background: var(--bar); border-bottom: 1px solid var(--bar-edge);
/* The panel is absolutely positioned inside a STICKY header, so it is pinned to the viewport:
scrolling the page moves the document underneath it and can never bring its lower items into
view. On a short viewport (400% zoom, short landscape) that left Devices, Features and Security
unreachable by mouse, touch and sight. Constrain the panel to the space beneath the bar and let
it scroll itself, so the last link can always be exposed.
The reservation must FOLLOW the bar's real height, not a constant: at 300px wide with a 32px
browser font the brand block wraps and the bar grows 64px -> 93px, and a fixed 65px allowance
then over-grants the panel and pushes it past the viewport again. This panel is absolutely
positioned, so a percentage in max-height resolves against its containing block — the header
itself. `100%` is therefore the header's own height, whatever it currently is, and
`100dvh - 100%` is exactly the space left beneath it. No circularity: the panel is out of flow,
so it cannot affect the height it is measured against. dvh first where supported. */
max-height: calc(100vh - 100%);
max-height: calc(100dvh - 100%);
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-narrow li { background: linear-gradient(180deg, rgba(21, 23, 27, 0.96), rgba(23, 25, 29, 0.96)); }
.nav-narrow li:first-child { border-radius: var(--radius-panel) var(--radius-panel) 0 0; padding-top: 8px; }
.nav-narrow li:last-child { border-radius: 0 0 var(--radius-panel) var(--radius-panel); padding-bottom: 8px; }
.nav-narrow li { padding-inline: 8px; border-inline: 1px solid var(--edge); }
.nav-narrow li:first-child { border-top: 1px solid var(--edge); }
.nav-narrow li:last-child { border-bottom: 1px solid var(--edge); }
.nav-narrow a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; border-radius: var(--radius); font-size: 1rem; color: var(--fg-muted); }
.nav-narrow a[aria-current="page"] { color: var(--fg-strong); background: rgba(255, 255, 255, 0.04); }
.nav-narrow a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }
@media (max-width: 767px) {
.nav-wide { display: none; }
.nav-menu { display: block; }
}
/* ---- page structure ------------------------------------------------------- */
main { flex: 1 0 auto; }
main:focus { outline: none; }
.section { padding: var(--section-y) 0; }
.section-hero { padding-top: clamp(2rem, 5vw, 5rem); }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--pad-x); }
.stack { display: flex; flex-direction: column; gap: var(--stack); }
.stack-wide { display: flex; flex-direction: column; gap: var(--stack-wide); }
.rule { height: 1px; max-width: var(--content-max); margin: 0 auto; background: linear-gradient(90deg, rgba(143, 106, 46, 0) 0%, rgba(229, 183, 80, 0.5) 46%, rgba(143, 106, 46, 0) 100%); }
.label { margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.head { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.head-title { display: flex; flex-direction: column; gap: 16px; }
.lede { font-size: 1rem; line-height: 1.6; color: var(--fg-muted); max-width: 46ch; }
.lede-wide { max-width: 60ch; }
.note { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-muted); max-width: 64ch; }
.fine { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-quiet); max-width: 70ch; }
/* OWNER RULING 2026-09-09 — lawful-use notice and the illustrative label: readable on phones, normal contrast, never small grey print. */
.lawful { font-size: 0.9375rem; line-height: 1.6; color: var(--fg); max-width: 64ch; }
.illustrative { font-size: 0.875rem; line-height: 1.5; color: var(--fg); max-width: 64ch; margin-top: 8px; }
.demo-stage + .illustrative { margin-top: 12px; }
/* H90 · REGRESSION I INTRODUCED, then found on review.
Widening the copy column from 5fr to 8fr took it from 416px to 666px. The lede is capped at 46ch
(488px) but the notice at 64ch (636px), so the cap that had been doing nothing suddenly bound at a
different measure: the legal notice — and the hairline above it — became the WIDEST text in the
hero, 148px wider than the sentence describing the product. That inverts the hierarchy the whole
correction was for. Matching the lede's measure restores it.
The 2026-09-09 ruling is about READABILITY, not width: size and colour are untouched. */
.hero-copy .lawful { padding-top: 12px; border-top: 1px solid var(--edge); max-width: 46ch; }
.closing .lawful { margin-inline: auto; }
.foot-legal { max-width: 80ch; }
.rule-top { padding-top: 14px; border-top: 1px solid var(--rule); }
.pane { max-width: 100%; }
@media (min-width: 1024px) {
.head { grid-template-columns: 5fr 7fr; }
.head-rev { grid-template-columns: 7fr 5fr; }
}
/* ---- buttons -------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 0.5rem; }
.btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
border-radius: var(--radius); text-decoration: none; font-size: 0.9375rem; text-align: center; line-height: 1.3; padding-block: 10px;
}
.btn-primary { background: linear-gradient(140deg, #F5DA9C, #E5B750 62%, #8F6A2E); color: var(--gold-ink); font-weight: 500; }
.btn-primary:hover { color: var(--gold-ink); filter: brightness(1.05); }
.btn-secondary { border: 1px solid var(--edge-warm); background: rgba(9, 10, 10, 0.45); color: var(--gold-light); }
.btn-secondary:hover { border-color: var(--gold); color: #FFF1D0; }
.link { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--gold); }
.link:hover { color: var(--gold-light); }
/* ---- hero ----------------------------------------------------------------- */
/* DESIGN Site-3 · on one column the order is headline, picture, introduction, actions, compatibility,
notice. That is the DOM order now, so no `order` property is needed and the reading order, the tab
order and the visual order are the same thing. The previous rule put the whole copy block first and
the picture last, which is what left the product beneath the disclaimer on a phone. */
.hero { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-foot { font-size: 0.8125rem; color: var(--fg-muted); }
/* H90-C1 · the headline sets as three deliberate lines on one left edge.
The global `h1 { max-width: 18ch }` is what stranded "Your" above "subscription": the longest
sentence is 18 characters INCLUDING its full stop, so at the hero's heading size it could not fit
the column and broke mid-sentence. The column is widened below and the heading sized down with it,
per the owner's "adjust column proportions and heading size together". The typeface is unchanged. */
/* Selected structurally, not by a class. Adding `class="hero-title"` to this h1 broke a U1
governance assertion that pins the review composition's directed hero as an exact string,
`...
`. Changing that test to accommodate my markup would have weakened an
assertion that exists for a governance reason, so the markup gives way instead. */
.hero > h1 { max-width: 24ch; font-size: clamp(2.25rem, 4.9vw, 4.25rem); }
/* Each sentence is its own box. Inline by default, so narrow widths and enlarged text reflow exactly
as ordinary prose; block only at the desktop breakpoint, where the three lines are a decision.
No `nowrap`, no ` `, no `
` — nothing here can overflow instead of wrapping. */
.hline { display: inline; }
@media (min-width: 1024px) {
/* 8fr/4fr, not 5fr/7fr. Two things had to move together, which is why the first attempt at this was
wrong in both directions at once: the copy column must fit "Your subscription." at the heading
size, and the promoted composition is portrait, so it wants the narrower half. Shrinking the
heading to make it fit left the hero sparse — a 288px picture adrift in a wide empty column.
Widening the copy instead lets the heading stay large AND the picture fill its column. */
/* Named areas put the headline and the copy back into one column beside the picture, so the wide
layout is unchanged by the mobile reordering. The picture spans both rows and is top-aligned. */
.hero {
grid-template-columns: 7.6fr 4.4fr;
grid-template-areas: "title scene" "copy scene";
grid-template-rows: auto 1fr;
gap: clamp(1.5rem, 4vw, 4rem);
row-gap: 20px;
align-items: start;
}
.hero > h1 { grid-area: title; }
.hero-copy { grid-area: copy; }
.hero-scene { grid-area: scene; }
.hline { display: block; }
/* H90-C2 · the composition is balanced against the headline, lede and buttons — NOT the lawful-use
notice, which is a separate obligation sitting below that group. `align-items: start` puts the
television at the top of the column; this offset lowers it to begin around the headline's upper
half rather than level with its first line. */
.hero-scene { margin-top: clamp(0.5rem, 1.4vw, 1.25rem); }
}
/* ---- photographs ---------------------------------------------------------- */
.scene { display: block; position: relative; width: 100%; margin-inline: auto; } /* display: block — the scene is a span; Safari collapses an inline box around its block spacer and leaves an empty frame (2026-09-09) */
.scene::before { content: ""; display: block; width: 100%; padding-top: var(--ratio, 66.7%); }
.scene::after {
content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 16%; z-index: 0;
background: radial-gradient(60% 100% at 50% 100%, rgba(229, 183, 80, 0.10) 0%, rgba(9, 10, 10, 0) 70%); filter: blur(6px);
}
.scene img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.55)); }
.scene-wide { max-width: 1000px; --ratio: 66.7%; }
.scene-tall { max-width: 467px; --ratio: 149.9%; }
.scene-lock { max-width: 350px; --ratio: 200%; }
.scene-framed { max-width: 1000px; }
.scene-framed::after { display: none; }
.scene-framed img { object-fit: cover; border-radius: var(--radius); border: 1px solid var(--edge); filter: none; box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.9); }
/* H90-R1 · the remote is an accessory, not a device plate.
Measured before: Home drew it at 322x483 beside a 582px television (55% of it), and at 322 against
350 on a phone — 92%. It also sat in its own tall row BENEATH the television, which is what made it
read as a second piece of hardware. Seated beside the television's lower edge instead, at roughly
half the former width, proportions preserved (the asset is 467x700 and `object-fit: contain`, so the
cap alone scales it).
`align-items: end` is what puts it at the LOWER edge.
The accessory column is sized in PIXELS, not `auto`. With `auto`, the column asks the scene how wide
it wants to be, but `.scene` is `width: 100%` and gets its height from a percentage `padding-top` —
so the column resolved to zero and the remote rendered at 0x0 while still reporting a 150px cap.
A track that does not depend on its content's width breaks that circularity.
DESIGN Site-3 SUPERSEDES the grid form described above. The remote is seated OVER the television's
lower-right corner as an overlay accessory — 14% wide, 64px floor, 108px ceiling — rather than
occupying a column of its own. Smaller again than the 150px this file had, and it gives back the
column the television was paying for, so the 600px carve-out that existed only to stop the
television collapsing to 236px is no longer needed and has been removed.
`pointer-events: none` because it is decoration, not a control: the same lesson as the R4 wash
layers, which were caught occluding real controls. */
.setup-scene { position: relative; }
.setup-scene .scene-remote {
position: absolute; inset-inline-end: 2%; bottom: 6%; z-index: 2;
width: 14%; min-width: 64px; max-width: 108px; margin: 0; pointer-events: none;
}
/* H90-C3 · one hero composition at every width: television dominant, tablet and phone beneath it.
The previous pair swapped a wide composition in above 480px, in which the smaller devices stood in
front of the television and cropped it. `.scene-tall` already carries the 467px cap and the 149.9%
ratio, so this rule only needs to hold the picture back from filling a wide column. */
.scene-hero { max-width: 440px; }
/* H90-C2 · the composition is SIZED to the copy, not merely positioned against it.
Measured first: at 1440 the picture ran to y=795 while the copy column ended at y=614 — a 181px
overhang that reads as bottom-heavy however it is aligned. A portrait composition beside this copy
block cannot end level with the buttons without shrinking to about 207px wide, so the property
gated here is the objective one — no overhang past the copy — and the distance to the buttons is
reported for the owner's eye rather than silently chosen by me.
Letting the picture simply fill its column does not work either: the column grows with the viewport
while the copy beneath it does not, so a width sweep found the picture overhanging by 26px at 1152
and 23px at 1280 while 1440 passed by 2px. Tuning until 1440 passed would have shipped both.
A cap holds the height under the copy at every desktop width; at 4fr the column is only ~20px wider
than the cap, so the picture still nearly fills it and does not read as adrift. */
@media (min-width: 1024px) { .scene-hero { max-width: 308px; } }
/* DESIGN Site-3 · the composed hero: television above, tablet and phone beneath.
Three separate pictures instead of one composite. The television keeps the full width of the column
and the two smaller devices share the row under it, so the hierarchy is in the layout rather than
baked into an image — and the composition can now use the generous desktop space Design asked for
instead of the 308px cap a portrait composite forced. */
/* The cut-outs carry transparent margins, so the CSS gap is not the gap anyone sees. Measured from the
alpha channel of the delivered files: 02a-tv is empty for 43 of its 667 rows BELOW the television
(6.4%), 02b-tablet for 34 of 667 ABOVE it (5.1%), 02c-phone for 13 of 700 (1.9%). At 1440 that is
~15.6px + ~7px of invisible padding on top of an 18px rule — a 40px visual gap from an 18px setting,
which is why the smaller devices read as detached.
So the rule gap goes to zero and the row is pulled up by a percentage of the rig's WIDTH (percentage
margins resolve against inline size), which tracks the band because the band is a fraction of the
picture. -4% cancels the television's band and leaves the tablet's ~7px as the visible separation. */
.hero-rig { display: flex; flex-direction: column; gap: 0; }
.hero-rig-small { margin-top: -4%; }
.hero-rig-tv .scene { max-width: 100%; }
.hero-rig-small { display: grid; grid-template-columns: 1.62fr 1fr; align-items: end; gap: clamp(10px, 1.6vw, 18px); }
.hero-rig-small .scene { max-width: 100%; }
/* The phone is 2:3 and the tablet 3:2, so an equal split would draw the phone half as tall again as
the tablet. 1.62fr/1fr lands them on roughly the same height without cropping either. */
/* ---- matched pairs and cards ---------------------------------------------- */
.pair { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: end; }
.pair > li, .pair > div { display: grid; grid-template-rows: auto auto; align-content: end; gap: 12px; min-width: 0; }
.pair .box { display: grid; align-content: end; aspect-ratio: 3 / 2; min-width: 0; }
.pair .cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.pair .cap b { font-size: 1.0625rem; font-weight: 500; color: var(--fg); }
.pair .cap span { font-size: 0.9375rem; color: var(--fg-muted); }
.pair .cap-line { padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.9375rem; line-height: 1.6; color: var(--fg); }
.pair .scene-tall { max-width: 100%; }
@media (min-width: 768px) {
.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair .cap-line { min-height: calc(12px + 3.2em); }
.pair .scene-tall { max-width: 84%; }
}
@media (min-width: 1024px) { .pair .scene-tall { max-width: 44%; } }
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.cards > div { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.cards dt, .cards h3 { font-size: 1rem; font-weight: 500; color: var(--fg); margin: 0; }
.cards dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--fg-muted); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 7fr 5fr; } .split-rev { grid-template-columns: 5fr 7fr; } .split-rev > .scene, .split-rev > .stack:last-child { order: 1; } }
.split .head { grid-template-columns: 1fr; }
.split h2 { font-size: var(--h2-small); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.steps .n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--gold); padding-top: 0.45em; }
.steps p { font-size: 0.9375rem; line-height: 1.6; color: var(--fg); }
@media (min-width: 768px) { .steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .steps-row li { grid-template-columns: 1fr; } }
/* ---- glass panel ---------------------------------------------------------- */
.panel { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius-panel); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
/* ---- demonstrations: radio state, no script ------------------------------- */
.demo { display: flex; flex-direction: column; gap: 16px; width: 100%; border: 0; margin: 0; padding: 0; min-width: 0; }
.demo legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-controls input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.demo-controls label {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
border-radius: var(--radius); border: 1px solid var(--edge); background: rgba(9, 10, 10, 0.45);
color: var(--fg-muted); font-size: 0.875rem; cursor: pointer;
/* These labels carry full sentences ("Programme information"). `nowrap` kept each on one line,
which is invisible at ordinary sizes but forces the DOCUMENT wide once the text is large enough:
at 400% zoom with a 32px browser font the widest label measured 378.7px inside a 300px viewport
and Home's scrollWidth went to 418 (118px of horizontal overflow). Neither stressor alone did it.
Let the wording wrap instead of truncating it: the label grows vertically, min-height still
governs at ordinary sizes, and max-width keeps it inside the wrapping row. */
white-space: normal;
max-width: 100%;
}
.demo-controls label::before { content: attr(data-n); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--fg-quiet); }
.demo-controls label:hover { border-color: var(--edge-warm); color: var(--fg); }
.demo-controls input:checked + label { border-color: var(--gold); background: rgba(229, 183, 80, 0.08); color: var(--fg-strong); }
.demo-controls input:checked + label::before { color: var(--gold); }
.demo-controls input:focus-visible + label { box-shadow: var(--focus-ring); }
.demo-stage { width: 100%; margin: 0 auto; }
.demo-state { display: none; }
.demo-state:first-child { display: block; }
.demo-state figcaption, .demo-cap { font-size: 0.9375rem; line-height: 1.6; color: var(--fg); max-width: 70ch; padding-top: 12px; }
figure.demo-state { margin: 0; }
.demo:has(.st-2:checked) .demo-state:first-child, .demo:has(.st-3:checked) .demo-state:first-child, .demo:has(.st-4:checked) .demo-state:first-child { display: none; }
.demo:has(.st-2:checked) .demo-state:nth-child(2) { display: block; }
.demo:has(.st-3:checked) .demo-state:nth-child(3) { display: block; }
.demo:has(.st-4:checked) .demo-state:nth-child(4) { display: block; }
/* the channel deck under the remote demonstration */
.deck { display: flex; flex-direction: column; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.deck legend { padding: 0; margin-bottom: 4px; }
.deck-list input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.deck-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.deck-now { font-size: 1rem; color: var(--fg); }
.deck-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.deck-list label { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--edge); background: rgba(9, 10, 10, 0.45); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--fg-muted); cursor: pointer; }
.deck-list input:checked + label { border-color: var(--gold); color: var(--gold); background: rgba(229, 183, 80, 0.08); }
.deck-list input:focus-visible + label { box-shadow: var(--focus-ring); }
.deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); }
.deck-now span:first-child { display: inline; }
.deck:has(.ch-2:checked) .deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); } .deck:has(.ch-2:checked) .deck-now span:nth-child(2) { display: inline; }
.deck:has(.ch-3:checked) .deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); } .deck:has(.ch-3:checked) .deck-now span:nth-child(3) { display: inline; }
.deck:has(.ch-4:checked) .deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); } .deck:has(.ch-4:checked) .deck-now span:nth-child(4) { display: inline; }
.deck:has(.ch-5:checked) .deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); } .deck:has(.ch-5:checked) .deck-now span:nth-child(5) { display: inline; }
.deck:has(.ch-6:checked) .deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); } .deck:has(.ch-6:checked) .deck-now span:nth-child(6) { display: inline; }
.deck:has(.ch-7:checked) .deck-now span { display: none; }
.deck-now span::after { content: " " attr(data-n); font-family: var(--mono); letter-spacing: 0.14em; color: var(--gold); } .deck:has(.ch-7:checked) .deck-now span:nth-child(7) { display: inline; }
@media (max-width: 479px) { .deck-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---- plates (Devices) ------------------------------------------------------ */
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.plates li { display: grid; grid-template-rows: auto auto; gap: 12px; min-width: 0; }
.plates .box { display: grid; align-content: end; justify-items: center; aspect-ratio: 3 / 2; min-width: 0; }
.plates .box .scene-tall { max-width: 44%; }
/* H90-R1 · the Devices plate remote gets its own restrained size.
It must be written at THIS specificity: my first attempt used `.pair .scene-plate-remote` (0,2,0),
which loses to `.plates .box .scene-tall` (0,3,0) above, so the cap stayed at 44% and the measured
numbers did not move at all. The percentage cap also made the remote GROW as the column narrowed —
154px at 390 against 143px at 1440 — which a fixed accessory cap removes.
DESIGN Site-3 sets this plate to 20%. Adopted, with a pixel ceiling kept on top: a bare percentage
is what let the remote grow as the column narrowed, because the plate box gets WIDER, not narrower,
when the grid drops to one column. */
.plates .box .scene-plate-remote { max-width: min(20%, 72px); }
@media (min-width: 768px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.posters { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 2rem); }
.poster-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.poster-row img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--edge); }
@media (min-width: 768px) { .poster-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .poster-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* ---- platform rows (Devices) ---------------------------------------------- */
.platforms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.platforms li { display: grid; grid-template-columns: 1fr; gap: 6px 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.platforms h3 { font-size: 1.0625rem; }
.platforms p { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-muted); }
@media (min-width: 768px) { .platforms li { grid-template-columns: 1fr 2fr; } }
/* ---- faq ------------------------------------------------------------------- */
.faq { margin: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.faq > div { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.faq dt { font-size: 1.0625rem; font-weight: 500; color: var(--fg); }
.faq dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-muted); max-width: 60ch; }
@media (min-width: 1024px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- closing panel --------------------------------------------------------- */
.closing { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.closing .mark { width: 40px; height: 35px; }
/* ---- Quick Connect steps (review composition) ------------------------------ */
.qc { gap: clamp(1.25rem, 2.5vw, 2rem); }
.steps .qc-row { grid-template-columns: 1fr; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--edge); }
.qc-row:first-child { padding-top: 0; border-top: 0; }
.qc-pic { display: block; }
.qc-pic .scene-tall { max-width: 64%; margin-inline: auto; }
.qc h3 .n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--gold); margin-inline-end: 8px; }
@media (min-width: 768px) { .steps .qc-row { grid-template-columns: 46% minmax(0, 1fr); } .qc-pic .scene-tall { max-width: 58%; } }
@media (min-width: 1024px) { .qc-pic .scene-tall { max-width: 48%; } }
/* ---- review-only banner (never in the public build) ------------------------ */
.review-banner { position: sticky; top: 64px; z-index: 4; background: rgba(229, 183, 80, 0.94); color: var(--gold-ink); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px var(--pad-x); text-align: center; }
/* ---- footer ---------------------------------------------------------------- */
footer { border-top: 1px solid var(--bar-edge); padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.foot { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--fg-strong); }
.foot-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; color: var(--fg-muted); text-decoration: none; }
.foot-nav a:hover { color: var(--gold-light); }
.foot-note { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-quiet); max-width: 72ch; }
@media (min-width: 768px) { .foot { grid-template-columns: 1fr 2fr; } .foot-note { grid-column: 1 / -1; } }
/* ---- 404 ------------------------------------------------------------------- */
.notfound { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; }