/* Kellogg: the page. Built on the kit (brand/tokens.css + brand/components.css); this file only
   composes kit parts for the house: the rail layout, the three modes, the HUD, hotspots, dialogs, the contact links,
   and print. Every value is a --m-* token or derived from one. No new colors, radii, or type sizes.

   Stacking: the WebGL canvas sits at z-index -1 (above the body's propagated ground, below the document),
   so the bleed and corner wordmarks can difference-blend against it. Nothing that holds a blended element
   may set isolation, transform, filter, opacity, or z-index on itself. */

:root {
  --mv-edge: var(--m-layout-edge);
  --mv-pill-h: 38.5px;                 /* .m-pill: 12px + 14.5px + 12px */
  --mv-hud-h: calc(var(--mv-pill-h) + var(--mv-edge) * 2);
  --mv-top-h: calc(var(--mv-pill-h) + var(--mv-edge) * 2);
  --mv-hide: opacity var(--m-duration-slow) var(--m-ease-expo), visibility 0s linear var(--m-duration-slow);
  --mv-show: opacity var(--m-duration-slow) var(--m-ease-expo), visibility 0s linear 0s;
  /* The kit's frost saturates what's behind it (saturate 220%), which is neutral over the kit's monochrome
     imagery but tints a pill warm over the house. Same blur, no chroma: the UI stays monochrome. */
  --m-effect-frost: blur(20px) grayscale(1);
  --m-effect-frost-hover: blur(60px) grayscale(1);
  --m-effect-frost-tooltip: blur(5px) grayscale(1);
}

[hidden] { display: none !important; }   /* components set display on pills and labels; hidden must win */
html { scroll-behavior: smooth; scroll-padding-top: 0; }
html.is-reduced { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.mode-house { scroll-snap-type: y proximity; }
html.mode-house .station { scroll-snap-align: start; }
html.is-solo, html.is-wander { overflow: hidden; }

.nocaps, .m-footer .nocaps { text-transform: none; }   /* emails and domains keep their case */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The terminal's input takes focus while docked: pinned to the viewport, so Tab into it never scrolls the
   document (it sat at the foot of the page, and the scroll covered the canvas mid-flight). */
#screen-input { position: fixed !important; left: 0; top: 0; }

/* A fallback face sized to Inter's metrics, so the hero statement doesn't rewrap (layout shift) when Inter
   arrives. Same family order as the kit's token, with the adjusted local face slotted in after Inter. */
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  size-adjust: 101%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;   /* measured: the hero statement wraps as in Inter at 390, 412 and 1440 */
}
:root { --m-font-sans: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ---------- The canvas ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; touch-action: pan-y; }
html.mode-hero #scene { position: absolute; height: 100svh; pointer-events: none;
  /* the house stands behind the copy's foot and the bleed wordmark (one composition, no dead band), then
     fades into the ink ground at the foot of the first view */
  -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
html:not(.mode-house):not(.mode-hero) #scene { display: none; }

/* ---------- Skip link ---------- */
.skip { position: fixed; left: var(--mv-edge); top: var(--mv-edge); z-index: calc(var(--m-z-nav) + 20); transform: translateY(-200%); }
.skip:focus, .skip:focus-visible { transform: none; }

/* ---------- Top bar: corner mark (its own fixed layer, so difference reaches the canvas) + the nav ---------- */
.corner-mark {
  position: fixed; top: calc(var(--mv-edge) + (var(--mv-pill-h) - 30px) / 2); left: var(--mv-edge);
  z-index: calc(var(--m-z-nav) + 1);
  /* Solid, never difference: difference picks up chroma tints over the warm house (a blue "ME" over
     timber). Over the document it takes the theme's ink or paper; over the house it's paper, and the
     grade rolls the highlights off behind it (engine/grade.js), so it holds 3:1 on any frame. */
  color: var(--m-fg); mix-blend-mode: normal;
  transition: var(--mv-show), color var(--m-duration-slow) var(--m-ease-expo);
}
html.mode-house .corner-mark { color: var(--m-color-paper); }
html.at-top:not(.is-wander):not(.is-solo) .corner-mark { opacity: 0; visibility: hidden; transition: opacity var(--m-duration-quick) var(--m-ease-standard), visibility 0s linear var(--m-duration-quick); }

.topnav {
  position: fixed; top: 0; right: 0; left: calc(var(--mv-edge) * 2 + 30px * 5.96);
  z-index: var(--m-z-nav); padding: var(--mv-edge) var(--mv-edge) var(--mv-edge) 0;
}
.topnav .m-nav { padding-left: var(--m-space-2xs); transition: margin-left var(--m-duration-slow) var(--m-ease-expo); }
/* At the very top the corner mark is hidden (the bleed mark is the hero), so the pills take the edge
   instead of starting beside an empty slot; they ease over when the corner mark arrives. */
html.at-top:not(.is-wander):not(.is-solo) .topnav .m-nav { margin-left: calc(-1 * (var(--mv-edge) + var(--mv-mark-w, 30px * 5.96) + var(--m-space-2xs))); }
.topnav .m-pill { white-space: nowrap; }
/* The section links are one frosted bar of mono labels, not five pills: the active one is paper with a
   hairline under it. Only "Say hello" (and Human | Machine) keep a pill of their own. */
.topnav .m-nav { gap: 0; }
/* The frost is drawn once, behind all five (a pseudo-element sized by hud.js: --mv-bar-x/-w). Frosting each
   item on its own showed seams and tone steps where one blur region met the next. Without JS, per item. */
.topnav .m-nav { position: relative; isolation: isolate; }
.topnav .m-nav::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--mv-bar-x, 0); width: var(--mv-bar-w, 0);
  border-radius: var(--m-radius-pill); pointer-events: none;
  background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
}
html:not(.js) .topnav .m-nav > li:not(.m-nav__end) { background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost); }
.topnav .m-nav > li:first-child { border-radius: var(--m-radius-pill) 0 0 var(--m-radius-pill); padding-left: 6px; }
.topnav .m-nav > li:nth-last-child(2) { border-radius: 0 var(--m-radius-pill) var(--m-radius-pill) 0; padding-right: 6px; }
.topnav .m-nav > li:not(.m-nav__end) .m-pill {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 10px;
  color: var(--m-alpha-paper-80); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: 10px calc(100% - 9px);
  transition: color var(--m-duration-quick) var(--m-ease-standard), background-size var(--m-duration-quick) var(--m-ease-expo);
}
.topnav .m-nav > li:not(.m-nav__end) .m-pill:hover { color: var(--m-color-paper); }
.topnav .m-nav > li:not(.m-nav__end) .m-pill.is-active, .topnav .m-nav > li:not(.m-nav__end) .m-pill[aria-current="true"] {
  color: var(--m-color-paper); background-size: calc(100% - 20px) 1px;
}
.topnav .m-nav > li:not(.m-nav__end) .m-pill:focus-visible { background: var(--m-color-paper); color: var(--m-color-ink); }
.topnav .m-nav > li:not(.m-nav__end) .m-pill:focus-visible { outline-offset: -4px; }   /* inside the pill: the bar clips an outer ring to its end arcs */
.topnav .m-nav__end .m-pill.is-active, .topnav .m-nav__end .m-pill[aria-current="true"] { background: var(--m-color-paper); color: var(--m-color-ink); }

/* ---------- Sections: the spine ---------- */
.station { position: relative; }
.station__rail {
  background: var(--m-bg); color: var(--m-fg);
  transition: background-color var(--m-duration-slow) var(--m-ease-expo), color var(--m-duration-slow) var(--m-ease-expo), var(--mv-show);
  padding: var(--m-space-3xl) var(--m-layout-gutter);
}
.station__rail .m-section__head { border-top: var(--m-border-hairline) var(--m-hairline); padding-top: var(--m-space-sm); margin-bottom: var(--m-space-xl); }

/* Rail type. The rail is five columns wide, so the display headline steps down to the h1 size
   (the nearest role) and row titles to h3. Weights stay with their roles. */
.station__rail { container-type: inline-size; }
.rail__display { font-size: min(var(--m-type-h1-size), 12.2cqi); }
.rail__h2 { max-width: 14em; }
.rail__body { margin-top: var(--m-space-lg); }
.rail__small { margin-top: var(--m-space-lg); max-width: 34em; color: var(--m-fg-secondary); }
.rail__meta { margin-top: var(--m-space-md); }
.rail__next { margin: var(--m-space-xl) 0 0; font-size: var(--m-type-body-size); }

.rail__columns { --m-columns: 2; margin-top: var(--m-space-xl); }
.rail__columns > * { padding-bottom: var(--m-space-lg); }
.rail__columns .m-label { margin-bottom: var(--m-space-2xs); }
.rail__cell { margin: 0; font-size: var(--m-type-body-size); line-height: var(--m-type-body-line-height); }

/* The bar: rules, not a box. The station is quiet (its eggs live here), so no ink panel. */
.bar-proof { margin-top: var(--m-space-xl); }
.bar-proof__label { margin: 0 0 var(--m-space-2xs); }
.bar-proof .m-numbered { border-top: var(--m-border-rule) var(--m-rule); }
.bar-proof .m-numbered h3 { font-size: var(--m-type-h3-size); font-weight: var(--m-weight-semibold); line-height: var(--m-type-h3-line-height); }
.bar-proof .m-numbered p { margin-top: var(--m-space-3xs); }

.rail__rows { margin-top: var(--m-space-xl); border-top: var(--m-border-rule) var(--m-rule); }
.rail__rows .m-row { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--m-space-2xs); align-items: start; }
.rail__rows .m-row__title { font-size: var(--m-type-h3-size); font-weight: var(--m-weight-semibold); line-height: var(--m-type-h3-line-height); }
.rail__rows .m-row__num { padding-top: .55em; }
.rail__rows .m-row__desc { grid-column: 2; }
.rail__dock { display: none; }
html.js .rail__dock { display: block; }

.who { display: grid; gap: var(--m-space-xl); margin-top: var(--m-space-xl); }
.who__label { margin-bottom: var(--m-space-2xs); }
.who .m-list > li { font-size: var(--m-type-body-size); line-height: 1.35; }
.who .m-list > li::before { top: 1.2rem; }
.who .m-list--no > li::before { top: .55rem; }
.who .m-list--no > li { color: var(--m-fg-secondary); }   /* body-size text: graphite on concrete is large-text only (3.3:1) */

/* Room descriptions: visually hidden in the 3D modes, the poster caption in flat. */
.station__figure { margin: 0; }
.station__place { display: block; margin-bottom: var(--m-space-3xs); color: var(--m-muted-small); }
.station__room { margin-top: var(--m-space-2xs); font-size: var(--m-type-small-size); line-height: var(--m-type-small-line-height); color: var(--m-fg-secondary); max-width: 40em; }
html.mode-house .station__room { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Posters: hidden in house mode; in flat they stand in for the house. The frame is the placeholder
   (a hairline ground) until the image arrives, so a missing poster never shows a broken icon. */
.station__poster { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--m-hairline); }
.station__poster img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.station__poster.is-missing img { visibility: hidden; }
/* Chrome and Firefox draw ::after only on a broken image: cover the broken-image frame without JS. */
.station__poster img { position: relative; }
.station__poster img::after { content: ""; position: absolute; inset: 0; background: var(--m-bg); }
.station:not(.station--top) .station__poster img::after { background: linear-gradient(var(--m-hairline), var(--m-hairline)), var(--m-bg); } /* flat fill: the placeholder tone */
html.mode-house .station__poster { display: none; }
@media (max-width: 991.98px) {
  #thesis .station__poster, #who .station__poster { aspect-ratio: 4 / 5; }
}

/* ---------- 00 · The threshold ---------- */
.station--top {
  min-height: 100svh; display: flex; flex-direction: column;
  padding-top: calc(var(--mv-top-h) + var(--m-space-lg));
  padding-bottom: calc(var(--mv-hud-h) - var(--m-space-sm));
}
.hero { position: relative; flex: 1 0 auto; padding-bottom: var(--m-space-lg); }
/* The hero hangs from the same edge as the top bar and the bleed mark at every width (a centred container
   put the copy 240px in from the nav at 1920). */
.station--top > .hero.m-container { max-width: none; margin: 0; padding-left: calc(var(--mv-edge) + 16px); }
.hero .m-kicker { color: var(--m-fg); } /* over the live house: paper. The secondary tone measured ~4.1:1 at glyph level on the graded copy zone */
.hero__statement { max-width: 20.5em; margin-top: var(--m-space-md); }
.nobr { white-space: nowrap; }
.hero__meta { position: relative; margin-top: var(--m-space-md); min-height: 1.2em; }
.hero__seat { display: inline-flex; align-items: center; gap: .6em; color: var(--m-fg); }
.hero__seat[hidden] { display: none; }
.live-dot { width: 7px; height: 7px; border-radius: var(--m-radius-pill); background: currentColor; flex: none; } /* paper, not signal: purple is for selection and focus only */
.hero__intro { position: absolute; left: 0; top: 0; color: var(--m-fg-secondary); opacity: 0; visibility: hidden; transition: var(--mv-hide); }
html.is-intro .hero__intro { opacity: 1; visibility: visible; transition: var(--mv-show); }
html.is-intro .hero__seat { opacity: 0; }
.hero__seat { transition: opacity var(--m-duration-slow) var(--m-ease-expo); }
.hero__links { display: flex; flex-wrap: wrap; gap: var(--m-space-2xs) var(--m-space-md); margin: var(--m-space-md) 0 0; }
.hero__link { display: inline-block; font-size: var(--m-type-body-size); }
.hero__mark { position: relative; flex: none; }

/* Short desktop viewports (1280×720, 1366×768): the copy tightens so the edge-to-edge mark still lands
   whole above the HUD in the first view. */
@media (min-width: 992px) and (max-height: 820px) {
  .station--top { padding-top: calc(var(--mv-top-h) + var(--m-space-xs)); }
  .hero { padding-bottom: 0; }
  .hero .m-statement { font-size: min(var(--m-type-statement-size), 6.1svh); margin-top: var(--m-space-xs); }
  .hero__meta, .hero__links { margin-top: var(--m-space-xs); }
}

.hero__figure { position: absolute; inset: 0; margin: 0; }
.hero__figure .station__poster { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
html.mode-house .hero__figure .station__poster, html.mode-hero .hero__figure .station__poster { display: none; }

/* ---------- Desktop: open columns 1–7, the solid reading rail in 8–12 ---------- */
@media (min-width: 992px) {
  .station:not(.station--top) {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-layout-gutter);
    padding-left: var(--m-layout-gutter); min-height: 100svh;
  }
  .station:not(.station--top) > .station__rail {
    grid-column: 8 / -1; grid-row: 1; min-height: 100svh;
    padding: calc(var(--mv-top-h) + var(--m-space-2xl)) var(--m-layout-gutter) var(--m-space-3xl);
  }
  .station:not(.station--top) > .station__figure {
    grid-column: 2 / span 10; grid-row: 1; align-self: start;
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--mv-top-h) 0 var(--mv-hud-h);
  }
  .station__room { margin-top: var(--m-space-sm); }
  .who { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1600px) {
  .station:not(.station--top) > .station__rail { padding-left: var(--m-space-xl); padding-right: var(--m-space-xl); }
}

/* House mode: the open columns are transparent; the house is the image. */
html.mode-house .station:not(.station--top),
html.mode-house .station--top { background: transparent; }

/* Mobile and tablet: a normal stacked kit page. */
@media (max-width: 991.98px) {
  .station:not(.station--top) { display: flex; flex-direction: column; }
  .station:not(.station--top) > .station__rail { padding: var(--m-space-3xl) var(--m-layout-gutter) var(--m-space-xl); }
  .station:not(.station--top) > .station__figure { padding: var(--m-space-xl) var(--m-layout-gutter) var(--m-space-xl); background: var(--m-bg); transition: background-color var(--m-duration-slow) var(--m-ease-expo); }
  .station--top { padding-top: calc(var(--mv-top-h) + var(--m-space-lg)); padding-bottom: calc(var(--mv-pill-h) + var(--mv-edge) * 2); }
  .hero__statement { font-size: var(--m-type-statement-size); }
  .rail__columns { --m-columns: 1; }
}
/* Phones: the caption closes the section; the next section's rail brings its own top space. */
@media (max-width: 767.98px) {
  .station:not(.station--top) > .station__figure { padding-bottom: var(--m-space-lg); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .rail__columns { --m-columns: 2; }
  .who { grid-template-columns: 1fr 1fr; }
}

/* ---------- The close (ink) ---------- */
.cta, .site-footer { position: relative; background: var(--m-bg); transition: background-color var(--m-duration-slow) var(--m-ease-expo), var(--mv-show); }
.cta { padding-top: var(--m-space-3xl); padding-bottom: var(--m-space-3xl); }
@media (min-width: 992px) { .cta { padding-top: var(--m-space-4xl); padding-bottom: var(--m-space-4xl); } }

.site-footer { display: block; padding: var(--m-space-xl) 0 calc(var(--mv-hud-h) + var(--m-space-lg)); }
.site-footer__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-layout-gutter); row-gap: var(--m-space-xl);
  border-top: var(--m-border-hairline) var(--m-hairline); padding-top: var(--m-space-lg);
}
.site-footer .site-footer__links {
  grid-column: 1 / span 6; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--m-space-sm) var(--m-space-2xl);
  list-style: none; margin: 0; padding: 0; align-content: start;
}
.site-footer .site-footer__links a, .site-footer__btn { white-space: nowrap; }
.site-footer__signoff { grid-column: 7 / -1; justify-self: end; align-self: start; margin: 0; font-size: var(--m-type-h3-size); line-height: 1.2; text-transform: none; }
.site-footer__legal { grid-column: 1 / span 6; margin: 0; align-self: end; }
/* The legal line is a sentence with a name in it, so it's Inter in sentence case, not lowercase mono. */
.m-footer .site-footer__legal { font-family: var(--m-font-sans); letter-spacing: var(--m-tracking-brand); font-size: var(--m-type-label-size); text-transform: none; }
.site-footer .site-footer__credit {
  grid-column: 8 / -1; justify-self: start; margin: 0; max-width: 34em; text-align: left;
  font-family: var(--m-font-sans); text-transform: none; letter-spacing: var(--m-tracking-brand);
  font-size: var(--m-type-small-size); font-weight: var(--m-weight-regular); line-height: 1.45; color: var(--m-muted-small);
}
.site-footer__btn { appearance: none; border: 0; background: none; padding-top: 0; padding-bottom: 0; padding-right: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: left; }
.site-footer__house { display: none; }
html.is-chosen-flat .site-footer__flat { display: none; }
html.is-chosen-flat .site-footer__house { display: list-item; }
@media (max-width: 991.98px) {
  .site-footer .site-footer__links, .site-footer__signoff, .site-footer__legal, .site-footer .site-footer__credit { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .site-footer__signoff { order: -1; }
}
@media (max-width: 575.98px) { .site-footer .site-footer__links { grid-template-columns: 1fr; } }

/* ---------- HUD (signature) ---------- */
.hud-index {
  position: fixed; left: var(--mv-edge); bottom: var(--mv-edge); z-index: calc(var(--m-z-nav) - 2);
  height: var(--mv-pill-h); display: flex; align-items: center; padding: 0 16px; border-radius: var(--m-radius-pill);
  /* A frosted ground like the other HUD pills: difference blending went low-contrast over mid-grey render. */
  color: var(--m-color-paper); background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
  transition: var(--mv-show); white-space: nowrap;
}
.hud-left { position: fixed; bottom: var(--mv-edge); left: calc(var(--mv-edge) + var(--m-space-2xs) + var(--mv-index-w, 16.5rem)); z-index: calc(var(--m-z-nav) - 2); display: flex; gap: var(--m-space-2xs); align-items: center; }
.hud-look, .hud-light { transition: var(--mv-show), background-color var(--m-duration-quick) var(--m-ease-standard), color var(--m-duration-quick) var(--m-ease-standard), transform var(--m-duration-quick) var(--m-ease-standard); }
.hud-right { position: fixed; right: var(--mv-edge); bottom: var(--mv-edge); z-index: calc(var(--m-z-nav) - 2); display: flex; gap: var(--m-space-2xs); align-items: center; transition: var(--mv-show); }
.hud-light { white-space: nowrap; }
.hud-light[hidden], .hud-look[hidden] { display: none; }
/* Desktop house: the station index, Look around and the light read as one quiet line on one frosted ground
   (one capsule, not three pills). */
@media (min-width: 992px) {
  /* one ground, drawn once behind all three (two abutting frosts leave a seam) */
  html.mode-house.engine-ready .hud-index { padding-right: 6px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: calc(var(--m-z-nav) - 1); }
  html.mode-house.engine-ready .hud-left { left: calc(var(--mv-edge) + var(--mv-index-w, 16.5rem)); gap: 0; }
  html.mode-house.engine-ready .hud-left::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: calc(-1 * var(--mv-index-w, 16.5rem));
    border-radius: var(--m-radius-pill); background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
  }
  html.is-solo .hud-left::before, html.is-wander .hud-left::before, html.at-end .hud-left::before { opacity: 0; visibility: hidden; transition: var(--mv-hide); }
  html.mode-house .hud-left > .m-pill { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding-left: 10px; padding-right: 10px; color: var(--m-alpha-paper-80); }
  html.mode-house .hud-left > .m-pill:hover { color: var(--m-color-paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  html.mode-house .hud-left > .m-pill:focus-visible { background: var(--m-color-paper); color: var(--m-color-ink); text-decoration: none; }
  html.mode-house .hud-left > .m-pill:last-child { border-radius: 0 var(--m-radius-pill) var(--m-radius-pill) 0; padding-right: 16px; }
  html.mode-house .hud-left > .hud-look::before { content: "·"; margin: 0 10px 0 -4px; color: var(--m-alpha-paper-80); }
  html.mode-house .hud-left > .hud-light::before { content: "·"; margin: 0 10px 0 -4px; }
}

/* Human | Machine: one segmented pill. */
.hm { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--m-radius-pill); background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost); }
.hm a {
  font-family: var(--m-font-mono); text-transform: uppercase; letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1;
  padding: 8.25px 12px; border-radius: var(--m-radius-pill); color: var(--m-color-paper); text-decoration: none;
  transition: background-color var(--m-duration-quick) var(--m-ease-standard), color var(--m-duration-quick) var(--m-ease-standard);
}
.hm a:hover { background: var(--m-alpha-frost-hover); }
.hm a[aria-current="page"] { background: var(--m-color-paper); color: var(--m-color-ink); }

/* The HUD bows out when the close (CTA band, footer) is on screen: the house is covered there. */
html.at-end .hud-index, html.at-end .hud-look, html.at-end .hud-light, html.at-end .hud-right { opacity: 0; visibility: hidden; transition: var(--mv-hide); }

/* Mobile: the HUD row lives at the foot of the hero and scrolls away with it. */
@media (max-width: 991.98px) {
  .hud-index, .hud-right, .hud-left { position: absolute; top: calc(100svh - var(--mv-pill-h) - var(--mv-edge)); bottom: auto; }
  .hud-left { left: var(--mv-edge); }
  .hud-index { left: var(--mv-edge); }
  .hud-right { right: var(--mv-edge); }
  .hud-look { display: none; }
  html.at-end .hud-index, html.at-end .hud-right, html.at-end .hud-light { opacity: 1; visibility: visible; }
  html.mode-hero .hud-index { display: none; }   /* the light meta takes the left slot on phones */
}
@media (max-width: 575.98px) {
  .hud-index { display: none; }
}

html:not(.js) .hud-index { display: none; }
/* Light meta and Look around exist only where there's a house. */
html.mode-flat .hud-light, html.mode-flat .hud-look, html.mode-hero .hud-look { display: none; }
html:not(.engine-ready) .hud-look { display: none; }

/* ---------- Focus on the fixed controls ----------
   They float over the house, so the kit's focus (frost-hover grey + a theme-colored ring) can drop to ~3:1
   or lose its ring against the render. Focused, they turn paper with ink text (about 13:1) and keep the
   signal ring: the same in every mode, theme, and light. */
.leave:focus-visible, .hud-look:focus-visible, .hud-light:focus-visible, .topnav .m-pill:focus-visible, .skip:focus-visible,
.hm a:focus-visible, .hs:focus-visible .hs__label, .hs--wander:focus-visible .hs__num, .fs__bar .m-pill:focus-visible {
  background: var(--m-color-paper); color: var(--m-color-ink);
  outline: 2px solid var(--m-color-signal); outline-offset: 3px;
}

/* ---------- Leave pill + wander caption ---------- */
.leave { position: fixed; top: var(--mv-edge); right: var(--mv-edge); z-index: calc(var(--m-z-nav) + 2); }
.leave[hidden] { display: none; }
.wander-caption {
  position: fixed; left: var(--mv-edge); bottom: var(--mv-edge); z-index: calc(var(--m-z-nav) - 1);
  display: flex; align-items: center; gap: var(--m-space-2xs);
  opacity: 0; visibility: hidden; transition: var(--mv-hide);
}
/* Two frosted pills like the rest of the HUD (difference went unreadable over mid-grey and tinted over timber). */
.wander-caption > p {
  margin: 0; height: var(--mv-pill-h); display: flex; align-items: center; padding: 0 16px; white-space: nowrap;
  border-radius: var(--m-radius-pill); color: var(--m-color-paper);
  background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
}
.wander-caption__hint { color: var(--m-alpha-paper-80); }
html.is-wander .wander-caption { opacity: 1; visibility: visible; transition: var(--mv-show); }

/* ---------- Solo (dock, card, plan, sit) and wander: their own surface ---------- */
html.is-solo .topnav, html.is-wander .topnav,
html.is-solo main, html.is-wander main,
html.is-solo .site-footer, html.is-wander .site-footer,
html.is-solo .hud-index, html.is-wander .hud-index,
html.is-solo .hud-look, html.is-wander .hud-look,
html.is-solo .hud-light, html.is-wander .hud-light,
html.is-solo #hotspots, html.is-solo .hs-slot { opacity: 0; visibility: hidden; transition: var(--mv-hide); }
html.is-solo .hud-right .hm { opacity: 1; }
.topnav, main, .hud-look, .hud-light { transition: var(--mv-show); }
html.is-solo .wander-caption { opacity: 0; visibility: hidden; }

/* ---------- Hotspots (positioned by the engine: transform on .hs = the anchor point) ---------- */
#hotspots, .hs-slot { position: fixed; inset: 0; z-index: 5; pointer-events: none; transition: var(--mv-show); }
html:not(.mode-house) #hotspots, html:not(.engine-ready) #hotspots,
html:not(.mode-house) .hs-slot, html:not(.engine-ready) .hs-slot { display: none; }
html.is-intro #hotspots, html.is-intro .hs-slot { visibility: hidden; } /* the draw-in is the loader: no labels until the house has landed */
.hs {
  position: absolute; left: 0; top: 0; translate: 0 -100%;
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--m-color-paper);
  text-decoration: none; cursor: pointer; pointer-events: auto; will-change: transform;
  transition: opacity var(--m-duration-quick) var(--m-ease-expo);
}
.hs[hidden] { display: none; }
.hs__label {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  font-family: var(--m-font-mono); text-transform: uppercase; letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1;
  padding: 9px 13px; border-radius: var(--m-radius-pill);
  background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
  transition: background-color var(--m-duration-quick) var(--m-ease-standard), color var(--m-duration-quick) var(--m-ease-standard);
}
.hs__label::before { content: "→"; }
.hs::after { content: ""; width: 1px; height: 36px; margin-left: 0; background: var(--m-alpha-paper-80); }
.hs::before { content: ""; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: var(--m-radius-pill); background: var(--m-color-paper); }
.hs__label { margin-left: -1px; }
.hs:hover .hs__label { background: var(--m-color-paper); color: var(--m-color-ink); }
.hs:focus-visible { outline: none; }
.hs:focus-visible .hs__label { outline: 2px solid var(--m-color-signal); outline-offset: 3px; }
.hs:active .hs__label { transform: scale(.94); }
.hs.is-off { opacity: 0; pointer-events: none; }
.hs.is-off:focus-visible { opacity: 1; }                       /* never hide a focused control */
/* Near the rail the engine flips the label to the anchor's left. */
.hs[data-align="end"] { translate: -100% -100%; align-items: flex-end; }
.hs[data-align="end"]::before { left: auto; right: -3px; }
.hs[data-align="end"] .hs__label { margin-left: 0; margin-right: -1px; }
/* Wander: one label per place, numbered like the index ("03 The table"). Num + label read as one pill. */
.hs--wander { flex-direction: row; flex-wrap: wrap; }
.hs--wander::after { flex: 0 0 100%; height: 44px; background: none; border-left: 1px solid var(--m-alpha-paper-80); }
.hs--wander .hs__num {
  font-family: var(--m-font-mono); letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1;
  padding: 9px 0 9px 13px; border-radius: var(--m-radius-pill) 0 0 var(--m-radius-pill); color: var(--m-alpha-paper-80);
  background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
  transition: background-color var(--m-duration-quick) var(--m-ease-standard), color var(--m-duration-quick) var(--m-ease-standard);
}
.hs--wander .hs__label { border-radius: 0 var(--m-radius-pill) var(--m-radius-pill) 0; padding-left: 9px; margin-left: 0; }
.hs--wander .hs__label::before { content: none; }
.hs--wander:hover .hs__num { background: var(--m-color-paper); color: var(--m-color-ink); }
.hs--wander[data-align="end"] { align-items: flex-start; justify-content: flex-end; }
.hs--wander[data-align="end"]::after { border-left: 0; border-right: 1px solid var(--m-alpha-paper-80); }
/* Wander: a place outside the view pins to the nearer side edge, pointing the way to turn (no tick, no dot). */
.hs--wander.is-edge { translate: 0 -50%; }
.hs--wander.is-edge[data-edge="right"] { translate: -100% -50%; }
.hs--wander.is-edge::after, .hs--wander.is-edge::before { content: none; display: none; }
.hs--wander.is-edge[data-edge="left"] .hs__num::before { content: "← "; }
.hs--wander.is-edge[data-edge="right"] .hs__num::before { content: "→ "; }
.hs--wander.is-behind { opacity: .72; }
/* Wander: the places folded past the two pinned per edge ("4 more"). Not a control: 0–6 reach every place. */
.hs-more {
  position: absolute; left: 0; top: 0; translate: 0 -50%; pointer-events: none; white-space: nowrap;
  font-family: var(--m-font-mono); text-transform: uppercase; letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1;
  color: var(--m-alpha-paper-80); padding: 6px 2px;
}
.hs-more[data-edge="right"] { translate: -100% -50%; }
.hs-more[hidden], html:not(.is-wander) .hs-more { display: none; }
.hs--egg { opacity: 0; }
.hs--egg .hs__label::before { content: "+"; }
.hs--egg:hover, .hs--egg:focus-visible { opacity: 1; }
/* See-through eggs take the mouse only in a 40 px circle around their anchor dot, not across their whole
   label box (the card's box covered the chair's anchor at the table). The 3D picker still finds the object
   itself anywhere on it; keyboard focus reaches the whole button. */
.hs--egg:not(:focus-visible) { pointer-events: none; }
.hs--egg:not(:focus-visible)::before {
  pointer-events: auto; width: 40px; height: 40px; left: -20px; bottom: -20px;
  background: radial-gradient(circle, var(--m-color-paper) 3.5px, transparent 4px);
}
.hs--egg[data-align="end"]:not(:focus-visible)::before { left: auto; right: -20px; }

#hover-label {
  position: fixed; left: 0; top: 0; z-index: var(--m-z-tooltip); pointer-events: none;
  font-family: var(--m-font-mono); text-transform: uppercase; letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1;
  padding: 11px 16px; border-radius: var(--m-radius-pill); white-space: nowrap;
  color: var(--m-color-ink); background: var(--m-alpha-paper-80);
  -webkit-backdrop-filter: var(--m-effect-frost-tooltip); backdrop-filter: var(--m-effect-frost-tooltip);
  opacity: 0; transition: opacity var(--m-duration-instant) var(--m-ease-standard);
}
#hover-label.is-on, #hover-label.is-visible { opacity: 1; }
#hover-label:empty { opacity: 0; }

#plan-labels { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; }
html[data-solo="plan"] #plan-labels { display: block; }
#plan-labels span {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap;
  font-family: var(--m-font-mono); text-transform: uppercase; letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1;
  color: var(--m-color-paper); mix-blend-mode: var(--m-effect-blend-difference);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--mv-hud-h) + var(--m-space-2xs)); translate: -50% 0; z-index: var(--m-z-tooltip);
  max-width: calc(100vw - var(--mv-edge) * 2); width: max-content;
  /* A sentence, so Inter in sentence case (mono caps are for short labels) */
  font-family: var(--m-font-sans); text-transform: none; letter-spacing: var(--m-tracking-brand); font-size: .9375rem; font-weight: var(--m-type-small-weight); line-height: 1.35; text-align: center;
  padding: 10px 18px; border-radius: var(--m-radius-pill); color: var(--m-color-paper);
  background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--m-duration-quick) var(--m-ease-expo), transform var(--m-duration-quick) var(--m-ease-expo), visibility 0s linear var(--m-duration-quick);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--m-duration-quick) var(--m-ease-expo), transform var(--m-duration-quick) var(--m-ease-expo), visibility 0s; }
.toast:empty { display: none; }
@media (max-width: 991.98px) { .toast { position: fixed; bottom: var(--mv-edge); } }
/* Beside a rail, a toast belongs to the house: centred on the open columns, never straddling the rail's edge. */
@media (min-width: 992px) {
  html.mode-house:not(.at-top):not(.is-solo):not(.is-wander) .toast {
    left: calc((100% * 7 + var(--m-layout-gutter) * 12) / 24);
    max-width: calc((100% * 7 + var(--m-layout-gutter) * 12) / 12 - var(--mv-edge) * 2);
  }
}

/* ---------- Dialogs: the Keys sheet and the flat terminal ---------- */
.sheet {
  border: var(--m-border-hairline) var(--m-alpha-paper-10); border-radius: 0; padding: 0; margin: auto;
  background: var(--m-color-ink); color: var(--m-color-paper);
  max-width: calc(100vw - var(--mv-edge) * 2); max-height: calc(100svh - var(--mv-edge) * 2);
}
.sheet::backdrop { background: var(--m-alpha-ink-75); }
.sheet[open] { animation: mv-sheet-in var(--m-duration-quick) var(--m-ease-expo); }
@keyframes mv-sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.keys { width: 30rem; padding: var(--m-space-lg); }
.keys__title { color: var(--m-muted-small); border-bottom: var(--m-border-hairline) var(--m-hairline); padding-bottom: var(--m-space-sm); margin: 0 0 var(--m-space-2xs); font-weight: var(--m-weight-regular); }
.keys__list { margin: 0; }
.keys__list > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--m-space-sm); align-items: baseline; padding: .7rem 0; border-bottom: var(--m-border-hairline) var(--m-hairline); }
.keys__list dt { font-family: var(--m-font-mono); font-size: var(--m-type-label-size); letter-spacing: 0; color: var(--m-fg-secondary); text-transform: uppercase; }
.keys__list dd { margin: 0; font-size: var(--m-type-small-size); }
.keys__list dt kbd + kbd { margin-left: .2em; }
kbd { font-family: var(--m-font-mono); font-size: var(--m-type-label-size); letter-spacing: 0; display: inline-block; min-width: 1.9em; padding: .25em .45em; text-align: center; border: var(--m-border-hairline) var(--m-alpha-paper-42); color: var(--m-color-paper); }
html:not(.mode-house) .keys__house, html.mode-flat .keys__3d { display: none; }
.keys__toggle { display: flex; align-items: center; gap: .7em; margin-top: var(--m-space-md); font-size: var(--m-type-small-size); cursor: pointer; }
.keys__toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--m-color-paper); }
.keys__close { margin-top: var(--m-space-lg); }

.fs { width: min(1100px, calc(100vw - var(--mv-edge) * 2)); padding: var(--mv-edge); }
.fs__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--m-space-sm); padding-bottom: var(--mv-edge); }
.fs__bar .m-label { color: var(--m-muted-small); }
.fs__frame { position: relative; aspect-ratio: 4 / 3; background: var(--m-color-ink); border: var(--m-border-hairline) var(--m-hairline); max-height: calc(100svh - 7rem); margin: 0 auto; }
.fs__frame:focus { outline: none; }
.fs__frame:focus-visible { outline: none; border-color: var(--m-alpha-paper-42); }
.fs__frame canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; touch-action: none; }
.fs__frame .fs__idle { position: absolute; left: 1.5rem; top: 1.25rem; margin: 0; font-family: var(--m-font-mono); letter-spacing: 0; color: var(--m-color-paper); }
@media (max-width: 575.98px) {
  .fs { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: var(--mv-edge) 0 0; }
  .fs__bar { padding: 0 var(--mv-edge) var(--mv-edge); }
  .fs__frame { border-left: 0; border-right: 0; }
}

/* ---------- Say hello: the door's contact links ---------- */
.contact { margin-top: var(--m-space-xl); scroll-margin-top: calc(var(--mv-top-h) + var(--m-space-md)); }
.contact p { margin: 0; }
.contact__links { list-style: none; margin: var(--m-space-lg) 0 0; padding: var(--m-space-md) 0 0; border-top: var(--m-border-hairline) var(--m-hairline); display: flex; flex-wrap: wrap; gap: var(--m-space-2xs) var(--m-space-lg); font-size: var(--m-type-body-size); }

/* ---------- Sub-pages: 404 ---------- */
.solo-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.solo-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--m-color-ink); }
.solo-hero__media { position: absolute; inset: 0; margin: 0; }
.solo-hero__media .station__poster { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
.solo-hero__copy { position: relative; padding-top: var(--m-space-3xl); padding-bottom: var(--m-space-3xl); }
.solo-hero__label { color: var(--m-fg-secondary); margin-bottom: var(--m-space-md); }
.solo-hero__link { margin: var(--m-space-lg) 0 0; font-size: var(--m-type-body-size); }
.page-solo .site-footer { padding-bottom: var(--m-space-xl); }


/* ---------- Print-only block (screen hides it) ---------- */
.print-only { display: none; }

/* ---------- Clean shots for posters (?clean=1): only the canvas ---------- */
html.qa-clean body > *:not(#scene) { visibility: hidden !important; }

/* ---------- Mobile top bar ----------
   The section pills scroll sideways; "Say hello" (the site's main action) stays pinned at the end. */
/* Below 992px the bar is the corner mark plus one pill, "Say hello" (the site's main action); the page
   is a normal scrolling document there, so the section links aren't needed. Each section keeps its own
   ground there (scrollspy.js), and past the hero the bar takes the ground of the section under it, with a
   hairline: ink over the thesis and the close, concrete over model to the door. Copy never runs under the
   mark or the pill, and the bar never hides. On concrete the mark is ink and the pill is an ink pill. */
@media (max-width: 991.98px) {
  .topnav { transform: none !important; }
  .topnav .m-nav > li:not(.m-nav__end) { display: none; }
  .site-header::before {
    content: ""; position: fixed; inset: 0 0 auto 0; height: var(--mv-top-h); z-index: var(--m-z-nav); pointer-events: none;
    background: var(--m-color-ink); border-bottom: var(--m-border-hairline) var(--m-alpha-paper-10);
    opacity: 0; transition: opacity var(--m-duration-quick) var(--m-ease-standard), background-color var(--m-duration-quick) var(--m-ease-standard), border-color var(--m-duration-quick) var(--m-ease-standard);
  }
  html:not(.at-top) .site-header::before { opacity: 1; }
  html:not(.at-top) .corner-mark { color: var(--m-color-paper); transition: var(--mv-show), color var(--m-duration-quick) var(--m-ease-standard); }
  html[data-top-ground="light"]:not(.at-top) .site-header::before { background: var(--m-color-concrete); border-bottom-color: var(--m-alpha-ink-10); }
  html[data-top-ground="light"]:not(.at-top) .corner-mark { color: var(--m-color-ink); }
  html[data-top-ground="light"]:not(.at-top) .topnav .m-nav__end .m-pill {
    background: var(--m-color-ink); color: var(--m-color-paper); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-top-ground="light"]:not(.at-top) .topnav .m-nav__end .m-pill:hover { background: var(--m-alpha-ink-75); }
  /* active (the door is in view): the pill stays ink; the hairline under the label says "you're here" */
  html[data-top-ground="light"]:not(.at-top) .topnav .m-nav__end .m-pill.is-active { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
@media (max-width: 767.98px) {
  .corner-mark { top: calc(var(--mv-edge) + (var(--mv-pill-h) - 24px) / 2); }
  .topnav { left: calc(var(--mv-edge) * 2 + 24px * 5.96);  --mv-mark-w: calc(24px * 5.96); }
}

/* House mode: the bar sits over the room, never over reading text, so it stays put and "Say hello" is
   always one click away (the flat document keeps the kit's auto-hide). */
html.mode-house .topnav { transform: none !important; }

/* Owner option (?quiet=1): with the house graded back to ground, its labels wait for the pointer or the keyboard. */
html.is-quiet-house:not(.is-wander):not(.at-top) #hotspots .hs:not(:hover):not(:focus-visible),
html.is-quiet-house:not(.is-wander):not(.at-top) .hs-slot .hs:not(:hover):not(:focus-visible) { opacity: 0; }

/* Short desktop viewports (1440×900 and below 940px tall): each station's rail fits one screen, down to its
   next link, so a settled station never cuts a line off under the Human | Machine strip. */
@media (min-width: 992px) and (max-height: 939.98px) {
  .station:not(.station--top) > .station__rail { padding-top: calc(var(--mv-top-h) + var(--m-space-lg)); padding-bottom: calc(var(--mv-hud-h, 72px) + var(--m-space-sm)); }
  .station__rail .m-section__head { margin-bottom: var(--m-space-lg); }
  .rail__h2 { font-size: min(var(--m-type-h2-size), 5.6vh); }
  .rail__body { margin-top: var(--m-space-md); }
  .rail__columns, .rail__rows { margin-top: var(--m-space-lg); }
  .rail__columns > * { padding-bottom: var(--m-space-md); }
  .rail__rows .m-row { padding-block: var(--m-space-sm); }
  .rail__next { margin-top: var(--m-space-lg); }
}

/* ---------- Reduced motion: nothing travels ---------- */
html.is-reduced *, html.is-reduced *::before, html.is-reduced *::after { scroll-behavior: auto !important; }
html.is-reduced .sheet[open] { animation: none; }

/* ---------- Print: a one-page, sheet-theme leave-behind ---------- */
@media print {
  @page { size: auto; margin: 14mm 16mm; }
  :root { --m-bg: var(--m-color-sheet); --m-fg: var(--m-color-ink); --m-fg-secondary: var(--m-alpha-ink-75); --m-muted-small: var(--m-alpha-ink-65); --m-rule: var(--m-color-graphite); --m-hairline: var(--m-alpha-ink-10); }
  html, body, .m-root { background: transparent !important; color: var(--m-color-ink) !important; }
  body.m-root, .m-root .m-theme-dark, .m-root .m-theme-light { --m-bg: var(--m-color-sheet); --m-fg: var(--m-color-ink); --m-fg-secondary: var(--m-alpha-ink-75); --m-muted-small: var(--m-alpha-ink-65); --m-hairline: var(--m-alpha-ink-10); background: transparent; color: var(--m-color-ink); }
  * { transition: none !important; animation: none !important; }
  #scene, .skip, .topnav, #hotspots, .hs-slot, #hover-label, #plan-labels, .hud-index, .hud-left, .hud-look, .hud-light, .hud-right, .leave, .wander-caption, .toast,
  .station__figure, .hero__figure, .hero__mark, .hero__meta, .hero__links, .rail__next, .rail__small, .rail__meta,
  #model, #how, #who, #door, .cta, dialog, .m-tooltip, .site-footer__links, .site-footer__legal, .site-footer__credit { display: none !important; }
  .site-header::before { content: none !important; display: none !important; }   /* the phone top bar's ink strip (print is under 992px wide) */
  .corner-mark { display: block !important; position: static; color: var(--m-color-ink) !important; mix-blend-mode: normal !important; opacity: 1 !important; visibility: visible !important; height: 0.25in; margin-bottom: 8mm; } /* the kit's print minimum */
  .station, .station--top, .station__rail { display: block !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; color: var(--m-color-ink) !important; }
  .hero { padding: 0; }
  .m-kicker { font-size: 9pt; color: var(--m-alpha-ink-65); }
  .hero__statement { font-size: 17pt; max-width: none; margin-top: 2mm; }
  #thesis { margin-top: 7mm; }
  .station__rail .m-section__head { margin: 0 0 2mm; padding-top: 2mm; border-top: 0.5pt solid var(--m-color-graphite); }
  .station__rail .m-section__head .m-label { font-size: 7.5pt; color: var(--m-alpha-ink-65); }
  .rail__display { font-size: 21pt; line-height: 1.05; }
  .rail__h2 { font-size: 13pt; max-width: none; }
  .rail__body { font-size: 9.5pt; max-width: none; margin-top: 2.5mm; }
  #bar { margin-top: 6mm; }
  .bar-proof { margin-top: 2mm; }
  .bar-proof__label { font-size: 7.5pt; }
  .bar-proof .m-numbered { border-top: 0.5pt solid var(--m-alpha-ink-10); }
  .bar-proof .m-numbered > li { padding: 1.4mm 0; grid-template-columns: 8mm 1fr; border-bottom: 0.5pt solid var(--m-alpha-ink-10); }
  .bar-proof .m-numbered h3 { font-size: 10pt; margin: 0; }
  .bar-proof .m-numbered p { font-size: 8.5pt; color: var(--m-alpha-ink-75); }
  .bar-proof .m-numbered__num { font-size: 7.5pt; padding-top: .3em; }
  .print-only { display: block !important; margin-top: 6mm; break-inside: avoid; }
  .print-only > .m-label { font-size: 7.5pt; border-top: 0.5pt solid var(--m-color-graphite); padding-top: 2mm; color: var(--m-alpha-ink-65); }
  .print__lede { font-size: 9.5pt; margin: 2mm 0 0; }
  .print__template { background: transparent; color: var(--m-color-ink); padding: 0; margin-top: 2.5mm; font-size: 7.4pt; line-height: 1.4; }
  .site-footer { display: block !important; padding: 0 !important; margin-top: 6mm; background: transparent !important; }
  .site-footer__grid { display: block; border: 0; padding: 0; }
  .site-footer__signoff { display: block; font-size: 13pt; color: var(--m-color-ink); }
  .station, .site-footer, .print-only { break-inside: avoid; }
}

/* Flat desktop: with no reading rail, each poster sits centred and whole in its screen. */
@media (min-width: 992px) {
  html.mode-flat .station:not(.station--top) > .station__figure .station__poster,
  html.mode-flat .station:not(.station--top) > .station__figure .station__room { width: min(100%, calc((100svh - var(--mv-top-h) - var(--mv-hud-h) - 6rem) * 16 / 9)); margin-inline: auto; max-width: none; }
}