/* ------------------------------------------------------------------
   Advanced Metal Research — site stylesheet
   Ice-blue ground, acid yellow, ticket typography, dotted grids.
   ------------------------------------------------------------------ */

:root {
  --ice: #d9e7eb;
  --ice-2: #c9dbe0;
  --paper: #eaf2f4;
  --ink: #1b2a30;
  --ink-2: #4e6068;
  --line: #9db3ba;
  --line-2: #b9cbd0;
  --yellow: #f0b429;   /* signal amber (was acid yellow #f4ff00); token name kept */
  --blue: #0b4fd9;
  --blue-2: #0838a0;
  /* blue as text, rule or stroke on the ground (lifted in dark mode; --blue stays the block fill) */
  --blue-ink: #0b4fd9;
  /* AMR brand red: the logo mark only. --red-live is the "arc on" signal on the dark display */
  --red: #b8020d;
  --red-live: #ff564a;
  /* theme-dependent component values; the dark set is at the end of this file */
  --field: #fff;
  --field-line: #9db3ba;
  --btn-arrow: #f0b429;
  --on-blue: #eaf2f4;
  --draw-blend: multiply;
  --draw-filter: none;
  --screen-edge: transparent;
  --tt-moon: block;
  --tt-sun: none;
  --sans: "Saira", "Titillium Web", "Segoe UI", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 34rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ice); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, ul, ol, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.skip { position: absolute; left: var(--gutter); top: -3rem; background: #1b2a30; color: #eaf2f4; padding: .5rem .75rem; z-index: 100; }
.skip:focus { top: .5rem; }

/* the ticket's micro-labels: the one place caps are allowed, because the board is built from them */
.lbl {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-2); white-space: nowrap;
}
.num { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

h1 { font-size: clamp(3.2rem, 9vw, 8.5rem); line-height: .92; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
p { max-width: var(--measure); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-weight: 600; font-size: .95rem; padding: .85rem 1.2rem; border-radius: 3px;
}
.btn::after { content: ""; width: 8px; height: 8px; background: var(--btn-arrow); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.btn:hover { background: var(--blue); color: var(--on-blue); }
.btn:hover::after { background: var(--yellow); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow::after { background: var(--ink); }
.btn-yellow:hover { background: var(--ink); color: var(--yellow); }
.btn-yellow:hover::after { background: var(--yellow); }
.link { text-decoration: none; border-bottom: 2px solid var(--yellow); font-weight: 600; }
.link:hover { border-bottom-color: var(--ink); }

/* ---------- top bar as a ticket header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
  padding: .7rem var(--gutter); background: var(--ice); border-bottom: 2px solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand-mark { width: 3rem; fill: var(--red); flex: none; }
.brand-name { line-height: 1; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; gap: 1.5rem; justify-content: center; }
.nav a { text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
@media (max-width: 760px) { .top { grid-template-columns: 1fr auto; } .nav { display: none; } }
.nav a, .top .btn { white-space: nowrap; }
/* six nav links: up to 1260px the nav, gaps, mark and header button tighten, and up to 1345px the
   wordmark stacks on two lines, so the bar fits the longest button ("Discuss a deployment") and never
   scrolls. The wordmark may still drop to three lines at the very narrowest widths rather than overflow. */
@media (min-width: 961px) and (max-width: 1260px) {
  .top { gap: .85rem; } .nav { gap: .65rem; } .nav a { font-size: .8rem; } .top-end { gap: .4rem; }
  .brand-mark { width: 2.6rem; }
  .top .btn { font-size: .82rem; padding: .7rem .8rem; } .top .btn::after { display: none; }
}
@media (min-width: 961px) and (max-width: 1345px) { .brand { gap: .55rem; } .brand-name { white-space: normal; max-width: 8em; font-size: .9rem; line-height: 1.1; } }
@media (max-width: 960px) { .top { grid-template-columns: 1fr auto; } .nav { display: none; } }

/* ---------- ticket blocks ---------- */
.ticket {
  position: relative; margin: 0 var(--gutter);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.ticket-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .6rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--ink);
}
.ticket-head .lbl b { color: var(--ink); }
.ticket-head .dots { display: inline-flex; gap: 4px; align-items: center; }
.ticket-head .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); display: block; }
.ticket-head .dots i:nth-child(2) { background: var(--blue-ink); }
.ticket-head .dots i:nth-child(3) { background: var(--yellow); border: 1px solid var(--ink); width: 6px; height: 6px; }

.dotgrid {
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px);
  background-size: 12px 12px;
}

/* ---------- hero ---------- */
.hero { border-bottom: 2px solid var(--ink); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
.hero-copy { display: grid; gap: 1.5rem; align-content: start; }
.seat { display: grid; gap: .2rem; }
.seat .lbl { color: var(--ink); }
.seat h1 { margin-top: .2rem; }
.seat h1 .nb { white-space: nowrap; }
/* the qualified origin line under the homepage headline: second voice of the headline, set off by a ticket rule */
.hero-sub {
  width: fit-content; margin-top: 1rem; padding-top: .8rem; border-top: 2px solid var(--ink);
  font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ink-2);
}
.hero-lede { font-size: 1.1rem; color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; max-height: 72vh; object-fit: contain; object-position: right bottom; mix-blend-mode: var(--draw-blend); filter: var(--draw-filter); }
.hero-figure .lbl-stack { position: absolute; left: 0; top: 0; display: grid; gap: .3rem; }
.hero-figure .lbl-stack .lbl { display: flex; gap: .75rem; }
.hero-figure .lbl-stack .lbl b { color: var(--ink); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure img { max-height: 50vh; object-position: center; }
  .hero-figure .lbl-stack { position: static; margin-bottom: 1rem; }
}

/* ---------- yellow barcode band ---------- */
.band-yellow {
  background: var(--yellow); color: var(--ink);
  padding: 1.25rem var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center;
  border-bottom: 2px solid var(--ink);
}
.barcode {
  height: 54px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px,
    var(--ink) 10px 13px, transparent 13px 15px, var(--ink) 15px 16px, transparent 16px 20px,
    var(--ink) 20px 22px, transparent 22px 23px, var(--ink) 23px 26px, transparent 26px 30px);
}
.band-yellow .lbl { color: var(--ink); }
.band-yellow .lbl-stack { display: grid; gap: .25rem; }
.band-yellow.band-4 { grid-template-columns: auto 1fr auto auto; }
.made { display: flex; align-items: center; gap: .65rem; }
.made-txt { display: grid; gap: .25rem; }
.flag-lg { flex: none; height: calc(.62rem * 1.5 * 2 + .25rem); width: calc((.62rem * 1.5 * 2 + .25rem) * 1.9); outline: 1px solid currentColor; outline-offset: -1px; }
.flag { width: 1.3em; height: auto; vertical-align: -.1em; margin-left: .4em; outline: 1px solid currentColor; outline-offset: -1px; }
@media (max-width: 760px) { .band-yellow, .band-yellow.band-4 { grid-template-columns: 1fr; gap: 1rem; } .barcode { height: 40px; } }

/* ---------- display / screen ---------- */
.display { background: #1b2a30; padding: 8px; border-radius: 4px; display: grid; gap: .5rem; }
.display-screen { aspect-ratio: 16 / 10; background: #000; overflow: hidden; border-radius: 2px; }
.display-screen video { width: 100%; height: 100%; object-fit: cover; }
.display-readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; color: #eaf2f4; padding: .1rem .2rem .2rem; }
.display-readout div { display: grid; gap: .1rem; }
.display-readout dt { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #9fb3ba; font-weight: 600; }
.display-readout dd { margin: 0; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.display-readout dd.on { color: var(--red-live); }

/* ---------- stat ticket row ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); }
.stats div { padding: 1.25rem 1.25rem 1.5rem; border-right: 1px solid var(--ink); display: grid; gap: .5rem; align-content: start; }
.stats div:last-child { border-right: 0; }
.stats .big { font-size: clamp(2rem, 3vw, 3.4rem); line-height: .95; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stats p { font-size: .9rem; color: var(--ink-2); }
.source { margin-top: .75rem; font-size: .8rem; color: var(--ink-2); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } .stats div { border-right: 0; border-bottom: 1px solid var(--ink); } .stats div:last-child { border-bottom: 0; } }

/* ---------- two-column prose ---------- */
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.two .lede { color: var(--ink-2); margin-top: 1.5rem; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }

/* ---------- gates: the three steps as boarding gates ---------- */
.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.gate { background: var(--paper); border: 1px solid var(--ink); padding: 1.25rem; display: grid; gap: .6rem; align-content: start; position: relative; }
.gate .gate-n { font-size: 3.5rem; line-height: 1; font-weight: 600; letter-spacing: -.05em; }
.gate p { font-size: .92rem; color: var(--ink-2); }
.gate::after { content: ""; position: absolute; right: 1rem; top: 1rem; width: 10px; height: 10px; background: var(--yellow); border: 1px solid var(--ink); }
@media (max-width: 760px) { .gates { grid-template-columns: 1fr; } }

/* ---------- blue block: the machine ---------- */
.block-blue { background: var(--blue); color: #eaf2ff; border-bottom: 2px solid var(--ink); }
.block-blue .ticket { border-bottom: 0; }
.block-blue .ticket-head { border-bottom-color: rgba(255,255,255,.55); }
.block-blue .lbl, .block-blue .ticket-head .lbl b { color: #eaf2ff; }
.block-blue .ticket-head .dots i { background: #eaf2ff; }
.block-blue h2 { color: #fff; }
.block-blue .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2rem; }
.block-blue .spec { display: grid; gap: .75rem; }
.block-blue .spec h3 { color: #fff; font-size: 1.6rem; }
.block-blue .spec dl { border-top: 1px solid rgba(255,255,255,.55); }
.block-blue .spec dl div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.28); font-size: .95rem; }
.block-blue .spec dt { color: #c7d6ff; }
.block-blue .spec dd { margin: 0; font-weight: 600; text-align: right; }
.block-blue .drawing { margin-top: 2.5rem; background: #eaf2ff; padding: 1.5rem; border-radius: 3px; }
.block-blue .drawing img { width: auto; max-width: 100%; max-height: 54vh; margin: 0 auto; }
.block-blue .drawing figcaption { color: var(--ink-2); font-size: .8rem; margin-top: .75rem; display: flex; justify-content: space-between; }
.block-blue .btn { background: var(--yellow); color: var(--ink); }
.block-blue .btn::after { background: var(--ink); }
@media (max-width: 760px) { .block-blue .spec-grid { grid-template-columns: 1fr; } }
/* ---------- badges: the four pillars as sponsor patches ---------- */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.badge { display: grid; gap: .9rem; padding: 1.5rem 1.25rem; border: 1px solid var(--line); background: var(--paper); align-content: start; }
.badge svg { width: 64px; height: 64px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.badge .lbl { color: var(--ink); }
.badge p { font-size: .9rem; color: var(--ink-2); }
.badge .val { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
@media (max-width: 900px) { .badges { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .badges { grid-template-columns: 1fr; } }

/* ---------- sensing ---------- */
.sensing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: 2rem; }
.sensing-grid .lede { color: var(--ink-2); margin-top: 1.5rem; }
.modes { border-top: 1px solid var(--ink); }
.modes div { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.25rem; padding: .9rem 0; border-bottom: 1px solid var(--line-2); font-size: .93rem; align-items: baseline; }
.modes dt { font-weight: 600; }
.modes dd { margin: 0; color: var(--ink-2); }
.modes dd.val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .sensing-grid { grid-template-columns: 1fr; } .modes div { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- photos ---------- */
.photo { display: grid; gap: .5rem; }
.photo img { width: 100%; border-radius: 3px; }
.photo figcaption { font-size: .8rem; color: var(--ink-2); }
.photo-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 2rem; }
.photo-row img { aspect-ratio: 16 / 9; object-fit: cover; }
.photo-row .photo:last-child img { aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .photo-row { grid-template-columns: 1fr; } }

/* ---------- roster ---------- */
.roster { list-style: none; padding: 0; border-top: 1px solid var(--ink); margin-top: 1.5rem; }
.roster li { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--line-2); font-size: .95rem; }
.roster .idx { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.roster .name { font-weight: 600; }
.roster .role { color: var(--ink-2); }
@media (max-width: 760px) { .roster li { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------- programs ---------- */
.progs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.prog { border: 1px solid var(--ink); padding: 1.25rem; display: grid; gap: .6rem; align-content: start; background: var(--paper); }
.prog p { font-size: .9rem; color: var(--ink-2); }
.prog .link { justify-self: start; font-size: .9rem; }
@media (max-width: 900px) { .progs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .progs { grid-template-columns: 1fr; } }

/* ---------- contact stub ---------- */
.stub { margin: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); border: 2px solid var(--ink); background: var(--paper); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.stub-main { padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.25rem; }
.stub-main p { color: var(--ink-2); }
.stub-side { border-left: 2px dashed var(--ink); padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1rem; align-content: space-between; background: var(--yellow); }
.stub-side .big { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.stub-side .barcode { height: 44px; }
.stub-ask { display: grid; gap: .8rem; align-content: start; }
.stub-ask .big { text-wrap: balance; }
.stub-ask p { font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) { .stub { grid-template-columns: 1fr; } .stub-side { border-left: 0; border-top: 2px dashed var(--ink); } }

/* ---------- footer ---------- */
.foot { padding: 1.25rem var(--gutter) 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; font-size: .8rem; color: var(--ink-2); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .hero-figure img { clip-path: inset(0 100% 0 0); animation: plot 1.4s cubic-bezier(.65,0,.2,1) .15s forwards; }
}
@keyframes plot { to { clip-path: inset(0 0 0 0); } }

/* Live line drawings (cell-hlr.js, wm-line.js, rosie-program.js): the still <img class="live-still"> keeps the layout
   box but is never painted while the live canvas is on its way. It shows without JS and under reduced motion (the
   renderers then stay idle), and when the renderer can't run (.is-static: no WebGL2, script error) or is slow (.is-slow). */
.is-live img.live-still { visibility: hidden; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  img.live-still { visibility: hidden; clip-path: none; animation: none; }
  .is-static img.live-still, .is-slow img.live-still { visibility: visible; }
  .is-live img.live-still { visibility: hidden; }
}

/* ------------------------------------------------------------------
   Less-is-more pass: fewer boxes, one rule does the work
   ------------------------------------------------------------------ */
.gate, .prog { background: none; border: 0; border-top: 2px solid var(--ink); padding: 1rem 0 0; }
.gate::after { display: none; }
.gates, .progs { gap: clamp(1.5rem, 3vw, 2.5rem); }
.gate .gate-n { color: var(--blue-ink); }
.stats { border: 0; border-top: 2px solid var(--ink); }
.stats div { border-right: 1px solid var(--line); padding: 1rem 1.25rem 0 0; }
.stats div + div { padding-left: 1.25rem; }
.dotgrid { background-image: radial-gradient(var(--line-2) 1px, transparent 1.2px); background-size: 16px 16px; }
.block-blue .spec-grid { margin-bottom: 2.5rem; }
.display-screen video { filter: contrast(1.08) brightness(1.08); }

/* ==================================================================
   Sub-page components (native, no re-skin)
   ================================================================== */

/* site nav current page */
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--yellow); padding-bottom: .1rem; }

/* page hero: same ticket as the homepage, product title set large */
.page-hero .hero-grid { align-items: center; }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6.5rem); }
.page-hero .hero-figure img { max-height: min(64vh, 620px); object-position: center; }

/* facts ticket: one row of numbers under a hero */
.facts { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); border-top: 2px solid var(--ink); }
.facts div { padding: 1rem 1.25rem 0 0; border-right: 1px solid var(--line); display: grid; gap: .35rem; align-content: start; min-width: 0; }
.facts div + div { padding-left: 1.25rem; }
.facts div:last-child { border-right: 0; }
.facts dd { margin: 0; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; overflow-wrap: anywhere; }
.note { margin-top: .9rem; font-size: .8rem; color: var(--ink-2); max-width: 46rem; }
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div, .facts div + div { padding: .9rem 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .facts div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--line-2); }
  .facts div:nth-child(even) { padding-left: 1rem; }
}

/* section intro under a ticket head */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-bottom: 2rem; }
.intro .sub { color: var(--ink-2); margin-top: 1.25rem; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

/* rows: label and description, hairline separated */
.rows { border-top: 2px solid var(--ink); }
.rows > div, .rows > li { display: grid; grid-template-columns: 13rem 1fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line-2); font-size: .95rem; }
.rows dt, .rows strong { font-weight: 600; }
.rows dd { margin: 0; color: var(--ink-2); max-width: 46rem; }
ul.rows, ol.rows { list-style: none; padding: 0; margin: 0; }
.rows li span { color: var(--ink-2); max-width: 46rem; }
@media (max-width: 760px) { .rows > div, .rows > li { grid-template-columns: 1fr; gap: .3rem; } }

/* sequence: numbered steps with blue gate numbers */
.seq { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); counter-reset: s; }
.seq li { counter-increment: s; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-2); font-size: .95rem; color: var(--ink-2); }
.seq li::before { content: counter(s, decimal-leading-zero); font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--blue-ink); }
.seq li strong { color: var(--ink); font-weight: 600; }
.seq-2 { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.seq-2 li { break-inside: avoid; }
@media (max-width: 900px) { .seq-2 { columns: 1; } }

/* cols: parallel items under a single top rule, no boxes */
.cols { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.cols > div { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: .5rem; align-content: start; }
.cols p { font-size: .93rem; color: var(--ink-2); }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }

/* drawing sheets on paper */
.sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sheet-paper { background: var(--paper); border: 1px solid var(--line); padding: clamp(1rem, 2.5vw, 2rem); display: grid; gap: .75rem; margin: 0; }
.sheet-paper img { width: 100%; mix-blend-mode: var(--draw-blend); filter: var(--draw-filter); }
.sheet-paper figcaption { display: flex; justify-content: space-between; gap: 1rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
@media (max-width: 900px) { .sheets { grid-template-columns: 1fr; } }
/* Three sheets: the dimensioned elevation full width, plan and end views below at a shared height */
.sheets-3 { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }
.sheets-3 .sheet-wide { grid-column: 1 / -1; }
.sheets-3 .sheet-wide img { width: auto; max-width: 100%; max-height: min(78vh, 760px); margin: 0 auto; }
.sheets-3 .sheet-paper:not(.sheet-wide) img { height: clamp(320px, 40vw, 600px); object-fit: contain; }
.sheets-3 .sheet-paper { align-content: space-between; }
@media (max-width: 900px) {
  .sheets-3 { grid-template-columns: 1fr; }
  .sheets-3 .sheet-paper:not(.sheet-wide) img { width: auto; height: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; }
}

/* cell plan in site colors */
.plan-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.plan { width: 100%; height: auto; overflow: visible; display: block; }
.plan .room { fill: var(--blue); fill-opacity: 0; transition: fill-opacity .3s ease; }
.plan .room.is-active { fill-opacity: .1; }
.plan .wallOuter, .plan .wallInner, .plan .furn, .plan .door, .plan .reach, .plan .sight { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.plan .wallOuter { stroke: var(--ink); stroke-width: 3; }
.plan .wallInner { stroke: var(--ink); stroke-width: 1.4; }
.plan .furn { stroke: var(--ink-2); stroke-width: 1.1; stroke-linecap: round; }
.plan .door { stroke: var(--line); stroke-width: 1.1; }
.plan .reach { stroke: var(--blue-ink); stroke-width: 1.2; stroke-dasharray: 4 4; }
.plan .sight { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; }
.plan .roomName { font: 700 10px var(--sans); letter-spacing: .14em; fill: var(--ink); }
.plan .roomSub { font: 600 7.5px var(--sans); letter-spacing: .12em; fill: var(--ink-2); }
.plan .dimLine { fill: none; stroke: var(--blue-ink); stroke-width: 1; }
.plan .dimText { font: 700 8.5px var(--sans); letter-spacing: .14em; fill: var(--blue-ink); }
.plan .hit { fill: transparent; cursor: pointer; outline: none; }
.plan .hit:focus-visible { stroke: var(--blue-ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.plan-callout { background: var(--paper); border-top: 2px solid var(--ink); padding: 1.25rem 1.4rem 1.4rem; min-height: 12rem; position: sticky; top: 5.5rem; }
.plan-eyebrow { margin: 0 0 .35rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--blue-ink); }
.plan-title { margin: 0 0 .6rem; font-size: 1.45rem; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.plan-body { margin: 0; color: var(--ink-2); }
.plan-spec { margin: .9rem 0 0; font-size: .8rem; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line-2); padding-top: .7rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .plan[data-draw] .wallOuter, .plan[data-draw] .wallInner, .plan[data-draw] .furn, .plan[data-draw] .door { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .plan[data-draw] .reach, .plan[data-draw] .sight, .plan[data-draw] .labels, .plan[data-draw] .dims, .plan[data-draw] .room { opacity: 0; }
  .plan.is-drawn .wallOuter, .plan.is-drawn .wallInner, .plan.is-drawn .furn, .plan.is-drawn .door { animation: plan-plot .9s cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d, 0s); }
  .plan.is-drawn .reach, .plan.is-drawn .sight { animation: fade .5s ease forwards; animation-delay: var(--d, 0s); }
  .plan.is-drawn .labels { animation: fade .6s ease 2.1s forwards; }
  .plan.is-drawn .dims { animation: fade .6s ease 2.5s forwards; }
  .plan.is-drawn .room { animation: fade .1s ease 2.1s forwards; }
}
@keyframes plan-plot { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } .plan-callout { position: static; } }

/* blue block extras for sub-pages */
.block-blue .photo figcaption { color: #c7d6ff; }
.block-blue .photo img { aspect-ratio: 21 / 9; object-fit: cover; }
.block-blue .intro .sub { color: #c7d6ff; }
.block-blue .rows, .block-blue .seq { border-top-color: #fff; }
.block-blue .rows > div, .block-blue .rows > li, .block-blue .seq li { border-bottom-color: rgba(255,255,255,.28); }
.block-blue .rows dd, .block-blue .rows li span, .block-blue .seq li { color: #c7d6ff; }
.block-blue .rows dt, .block-blue .rows strong, .block-blue .seq li strong { color: #fff; }
.block-blue .seq li::before { color: var(--yellow); }
.block-blue .link { color: #fff; }

/* video tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.tile { display: flex; flex-direction: column; gap: .55rem; min-width: 0; margin: 0; }
.screen { position: relative; aspect-ratio: 16 / 9; background: #0d1519; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--screen-edge); }
.screen iframe, .screen img, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.screen iframe { transform: scale(1.35); }
.screen-idle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tile h3 { font-size: 1rem; }
.tile p { font-size: .88rem; color: var(--ink-2); }
.tile .spec-line { margin-top: auto; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ink); padding-top: .45rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .spec-line span:first-child { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.you-get { font-weight: 600; margin-top: 1rem; text-wrap: pretty; }
.you-get b { background: var(--yellow); padding: 0 .25em; }
@media (max-width: 1000px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }

/* video clip */
.clip { display: grid; gap: .5rem; margin: 0; }
.clip video { width: 100%; border-radius: 3px; background: #000; aspect-ratio: 16 / 7; object-fit: cover; }
.clip figcaption { font-size: .8rem; color: var(--ink-2); }
.clip-tall video { aspect-ratio: 9 / 16; }
/* Full-width lab film (Rosie 1400 in motion), cropped 1280 x 608 */
.film { display: grid; gap: .5rem; margin: 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 608; object-fit: cover; border-radius: 3px; background: #000; }
.film figcaption { font-size: .8rem; color: var(--ink-2); }

/* evidence pair */
.evidence { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 2rem; }
.evidence img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.evidence .photo:last-child img { aspect-ratio: 3 / 4; }
.evidence-3 { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
.evidence-3 img, .evidence-3 .photo:last-child img { aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .evidence, .evidence-3 { grid-template-columns: 1fr; } }
.photo-wide { margin-top: 2rem; }
.photo-wide img { aspect-ratio: 21 / 9; object-fit: cover; }

/* the principle quote */
.principle { border-left: 3px solid var(--yellow); padding-left: 1.25rem; display: grid; gap: .5rem; margin: 0 0 2rem; }
.principle p { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; max-width: 28rem; }
.principle footer { font-size: .8rem; color: var(--ink-2); }

/* order form as a boarding form */
.order { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.order-copy { display: grid; gap: 1.1rem; }
.order-copy p { color: var(--ink-2); }
.order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; background: var(--paper); border: 2px solid var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }
.field { display: grid; gap: .35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field legend { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); padding: 0; }
.field input, .field textarea { font: inherit; font-size: .95rem; color: var(--ink); background: var(--field); border: 1px solid var(--field-line); border-radius: 2px; padding: .6rem .7rem; width: 100%; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--blue-ink); outline-offset: 0; border-color: transparent; }
.field textarea { resize: vertical; min-height: 6rem; }
.field.invalid input { border-color: var(--blue-ink); border-width: 2px; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: .2rem; }
.checks label { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; }
.checks input { accent-color: var(--blue-ink); width: 1rem; height: 1rem; margin: 0; }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.order-actions .btn { font: inherit; font-weight: 600; font-size: .95rem; border: 0; cursor: pointer; }
.form-status { font-size: .85rem; color: var(--ink-2); margin: 0; }
.form-status.error { color: var(--blue-ink); font-weight: 600; }
@media (max-width: 900px) { .order { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .order-form { grid-template-columns: 1fr; } }

/* stub and footer */
.stub-side .lbl { color: var(--ink); }
.foot { margin: 0 var(--gutter); padding-left: 0; padding-right: 0; border-top: 2px solid var(--ink); }
.foot-pages, .foot-agents { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.foot-agents > span { color: var(--ink-3, var(--ink-2)); opacity: .8; }

/* header on phones: the wordmark stacks on two lines; the button is one line, smaller, no arrow */
@media (max-width: 760px) {
  .top { gap: .75rem; }
  .brand { gap: .6rem; }
  .brand-mark { width: 2.5rem; }
  .brand-name { white-space: normal; max-width: 8em; font-size: .85rem; line-height: 1.1; }
  .top .btn { font-size: .78rem; padding: .55rem .8rem; white-space: nowrap; }
  .top .btn::after { display: none; }
}
/* narrowest phones: the header button gives way before the company name (every page repeats it in the hero) */
@media (max-width: 480px) { .top .btn { display: none; } }

/* Copy-audit layout fixes */
.hero:not(.page-hero) h1 { font-size: clamp(3rem, 6.2vw, 6rem); }
.two p + p, .intro p + p { margin-top: 1rem; }
.two p + .lbl { display: block; margin-top: 2rem; }
.two .lbl + .roster { margin-top: .6rem; }

/* ------------------------------------------------------------------
   Rosie drawing details (300 DPI crops, assets/drawings/rosie/detail)
   ------------------------------------------------------------------ */
/* Rosie 1400 specs: the flange and base plate details fill the empty cell
   beside "Installation and interfaces". The wrapper becomes the grid so the
   extracted .spec-grid's children and the figures share one grid. */
#specs .spec-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin: 2.5rem 0; }
#specs .spec-wrap .spec-grid { display: contents; }
#specs .spec-details { align-self: end; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 2.5rem; }
#specs .spec-details figure { margin: 0; display: grid; gap: .6rem; }
#specs .spec-details img { display: block; height: 150px; width: auto; }
#specs .spec-details figcaption { font-size: .78rem; color: #c7d6ff; border-top: 1px solid rgba(255,255,255,.55); padding-top: .45rem; }
@media (max-width: 760px) {
  #specs .spec-wrap { grid-template-columns: 1fr; }
  #specs .spec-details { gap: 1.25rem 1.5rem; }
  #specs .spec-details img { height: 104px; }
}

/* Rosie 1400 specs heading: forearm nameplate and wrist bleeding off the right
   edge, faded on the left so no linework sits under the intro paragraph.
   Only shown where the paragraph leaves room for it. */
#specs { overflow-x: clip; }
#specs .intro { position: relative; isolation: isolate; }
@media (min-width: 1360px) {
  #specs .intro::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: calc(-1 * var(--gutter) - 20px); top: 50%; transform: translateY(-50%);
    width: 560px; aspect-ratio: 1510 / 300;
    background: url("/assets/drawings/rosie/detail/forearm-white.webp") no-repeat center / contain;
    -webkit-mask-image: linear-gradient(to right, transparent 42%, #000 60%);
    mask-image: linear-gradient(to right, transparent 42%, #000 60%);
    opacity: .16;
  }
}

/* Contact stub: elbow joint bleeding off the yellow panel's bottom-right corner */
.stub-side { position: relative; overflow: hidden; isolation: isolate; }
.stub-side::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -70px; bottom: -90px; width: 340px; aspect-ratio: 710 / 640;
  background: url("/assets/drawings/rosie/detail/joint-ink.webp") no-repeat center / contain;
  opacity: .14;
}
@media (max-width: 760px) { .stub-side::after { display: none; } }

/* ------------------------------------------------------------------
   Theme toggle in the header
   ------------------------------------------------------------------ */
.top-end { display: flex; align-items: center; gap: .6rem; }
.theme-toggle {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; margin: 0; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 3px;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .tt-moon { display: var(--tt-moon); }
.theme-toggle .tt-sun { display: var(--tt-sun); }
@media (max-width: 760px) {
  .top-end { gap: .45rem; }
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle::before { content: ""; position: absolute; inset: -4px; }
}

/* Yellow surfaces keep dark ink in both themes (their text, barcode, arrow) */
.band-yellow, .stub-side, .btn-yellow, .block-blue .btn, .you-get b { --ink: #1b2a30; --ink-2: #4e6068; }
.stub-side, .you-get b { color: var(--ink); }

/* ------------------------------------------------------------------
   Dark theme: the same ticket system at night. Deep blue-slate ground,
   raised slate paper, ice ink. Yellow is unchanged; the blue block
   deepens so it does not glare; line drawings are inverted to ice.
   Set by data-theme on <html>, or by the system when nothing is stored.
   ------------------------------------------------------------------ */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ice: #0f1c22; --ice-2: #15252c; --paper: #16262d;
  --ink: #e2edf0; --ink-2: #9bb0b7;
  --line: #3d565e; --line-2: #2b424a;
  --blue: #0a44c0; --blue-ink: #6f9bff;
  --red: #e0343c;
  --field: #0c171c; --field-line: #5f7880;
  --btn-arrow: #0a44c0; --on-blue: #fff;
  --draw-blend: normal; --draw-filter: invert(1) hue-rotate(180deg);
  --screen-edge: #2b424a;
  --tt-moon: none; --tt-sun: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ice: #0f1c22; --ice-2: #15252c; --paper: #16262d;
    --ink: #e2edf0; --ink-2: #9bb0b7;
    --line: #3d565e; --line-2: #2b424a;
    --blue: #0a44c0; --blue-ink: #6f9bff;
    --red: #e0343c;
    --field: #0c171c; --field-line: #5f7880;
    --btn-arrow: #0a44c0; --on-blue: #fff;
    --draw-blend: normal; --draw-filter: invert(1) hue-rotate(180deg);
    --screen-edge: #2b424a;
    --tt-moon: none; --tt-sun: block;
  }
  :root:not([data-theme="light"]) ::selection { background: var(--yellow); color: #1b2a30; }
}
:root[data-theme="dark"] ::selection { background: var(--yellow); color: #1b2a30; }

/* a short cross-fade when the visitor flips the theme, only if motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, fill .18s ease, stroke .18s ease !important;
  }
}

/* ------------------------------------------------------------------
   Option G: flipped band with a brand-red edge. The info band and the
   contact side panel take the opposite ground of the page (dark in light
   mode, light in dark mode) under a brand-red top rule. Amber stays on
   buttons and highlights only.
   ------------------------------------------------------------------ */
.band-yellow, .stub-side {
  --ink: #e2edf0; --ink-2: #9bb0b7;
  background: #16262d; color: var(--ink);
  border-top: 4px solid var(--red);
}
.band-yellow { border-bottom: 0; }
.stub-side::after { background-image: url("/assets/drawings/rosie/detail/joint-white.webp"); opacity: .12; }
:root[data-theme="dark"] .band-yellow, :root[data-theme="dark"] .stub-side {
  --ink: #1b2a30; --ink-2: #4e6068; background: #c9dbe0;
}
:root[data-theme="dark"] .stub-side::after { background-image: url("/assets/drawings/rosie/detail/joint-ink.webp"); opacity: .14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-yellow, :root:not([data-theme="light"]) .stub-side {
    --ink: #1b2a30; --ink-2: #4e6068; background: #c9dbe0;
  }
  :root:not([data-theme="light"]) .stub-side::after { background-image: url("/assets/drawings/rosie/detail/joint-ink.webp"); opacity: .14; }
}

/* ------------------------------------------------------------------
   Red accent system: amber retired. The brand red is the single accent:
   logo mark, band and panel edges, primary button, arrows, link rules,
   current-page marker. The primary button uses the deep brand red in
   both themes so white text keeps AA contrast (6.9:1).
   ------------------------------------------------------------------ */
:root { --yellow: var(--red); --btn-arrow: var(--red); }
:root[data-theme="dark"] { --btn-arrow: #e0343c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --btn-arrow: #e0343c; } }
.btn-yellow { background: #b8020d; color: #fff; }
.btn-yellow::after { background: #fff; }
.btn-yellow:hover { background: #8e0209; color: #fff; }
.btn-yellow:hover::after { background: #fff; }
.block-blue .btn { background: #fff; color: #1b2a30; }
.block-blue .btn::after { background: #b8020d; }
.block-blue .btn:hover { background: #1b2a30; color: #fff; }
.block-blue .seq li::before { color: #fff; }
.you-get b { background: none; color: inherit; padding: 0; border-bottom: 2px solid var(--red); }
::selection, :root[data-theme="dark"] ::selection { background: var(--red); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::selection { background: var(--red); color: #fff; } }

/* ------------------------------------------------------------------
   Navy block: the saturated cobalt is retired so brand red is the only
   vivid colour. The machine block becomes a heavy navy steel panel;
   blue-as-ink (step numbers, plan dimensions, focus rings) follows it.
   ------------------------------------------------------------------ */
:root { --blue: #13294b; --blue-2: #0d1e38; --blue-ink: #13294b; --on-blue: #eaf2f4; --block-sub: #b4c3d6; }
:root[data-theme="dark"] { --blue: #1a355f; --blue-2: #13294b; --blue-ink: #8fb0d9; --block-sub: #b9c8da; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --blue: #1a355f; --blue-2: #13294b; --blue-ink: #8fb0d9; --block-sub: #b9c8da; }
}
.block-blue .spec dt, .block-blue .photo figcaption, .block-blue .intro .sub,
.block-blue .rows dd, .block-blue .rows li span, .block-blue .seq li,
#specs .spec-details figcaption { color: var(--block-sub); }

/* Navy info band: in light mode the flipped band and contact side panel use
   the same navy as the machine block, so the page has a single dark. Dark
   mode keeps the pale steel band. */
.band-yellow, .stub-side { background: var(--blue); --ink-2: #b4c3d6; }
:root[data-theme="dark"] .band-yellow, :root[data-theme="dark"] .stub-side { background: #c9dbe0; --ink-2: #4e6068; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-yellow, :root:not([data-theme="light"]) .stub-side { background: #c9dbe0; --ink-2: #4e6068; }
}

/* Phone overflow fixes: long ticket-head labels wrap, and the contact
   stub's long email address can break instead of widening the page. */
.stub > * { min-width: 0; }
.stub .link, .foot a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .stub { grid-template-columns: minmax(0, 1fr); }
  .ticket-head .lbl { white-space: normal; }
}
.order > * { min-width: 0; }
.order-copy .link { overflow-wrap: anywhere; }
@media (max-width: 760px) { .facts .lbl { white-space: normal; } }

/* Seam display: square frame to match the square source video, so the full
   HUD (depth scale, pool target) shows. Capped so the square stays compact. */
.display-screen { aspect-ratio: 1 / 1; }
.sensing-grid .display, .film ~ * .display { max-width: 560px; }

/* Photo in a hero figure: keep its real colours in dark mode, no drawing wipe */
.hero-figure.is-photo img { filter: none; mix-blend-mode: normal; clip-path: none; animation: none; object-fit: cover; aspect-ratio: 1800 / 925; border: 1px solid var(--ink); }

/* War Machine: the cell plan sits under the four cell columns */
#cell .plan-grid { margin-top: clamp(2.5rem, 5vw, 4rem); }
#sensing .seq + .cols { margin-top: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------------
   Header GitHub link (RosieOS repo), docs nav marker, docs links
   ------------------------------------------------------------------ */
.nav a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--yellow); padding-bottom: .1rem; }
.gh-link {
  flex: none; display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2); text-decoration: none;
  font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.gh-link svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.gh-link:hover { color: var(--ink); border-color: var(--ink); }
@media (min-width: 961px) and (max-width: 1260px) { .gh-link span { display: none; } .gh-link { width: 40px; padding: 0; justify-content: center; } }
@media (max-width: 760px) {
  .gh-link { position: relative; width: 34px; height: 34px; padding: 0; justify-content: center; }
  .gh-link span { display: none; }
  .gh-link::before { content: ""; position: absolute; inset: -4px; }
}
.doc-links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 1.5rem; }
/* Compact site menu for tablets and phones, where the inline nav is hidden. A <details>
   element, so it works without JS; main.js closes it on Escape and outside clicks. */
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; list-style: none;
  color: var(--ink); border: 1px solid var(--line); border-radius: 3px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover, .nav-menu[open] summary { border-color: var(--ink); }
.nav-menu summary svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.nav-menu-panel {
  position: absolute; left: 0; top: calc(100% + .7rem); z-index: 60; min-width: 13rem;
  display: grid; padding: .4rem 0; background: var(--ice); border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 0 18px 40px rgba(8, 18, 24, .2);
}
.nav-menu-panel a { padding: .6rem 1rem; text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--ink-2); border-left: 2px solid transparent; }
.nav-menu-panel a:hover { color: var(--ink); background: var(--paper); }
.nav-menu-panel a[aria-current] { color: var(--ink); border-left-color: var(--red); }
@media (max-width: 960px) { .nav-menu { display: block; } }
@media (max-width: 760px) {
  .nav-menu summary { width: 34px; height: 34px; }
  .nav-menu-panel { left: auto; right: 0; }
}

/* ------------------------------------------------------------------
   Welding automation page: line icons, the sensors-lab-model loop
   drawing, and the two "where it runs" cards
   ------------------------------------------------------------------ */
.wa-icon { width: 38px; height: 38px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wa-icon .wa-knob { fill: var(--ice); }
.wa-loop-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.wa-loop-grid .principle { margin: 2rem 0 1.25rem; }
.wa-loop { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.wa-loop .ring { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 5; }
.wa-loop .node { fill: var(--ice); stroke: var(--ink); stroke-width: 1.6; }
.wa-loop .arrow { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa-loop .pulse { fill: var(--red); }
.wa-loop .n { font: 600 16px var(--sans); fill: var(--ink); }
.wa-loop .name { font: 700 12px var(--sans); letter-spacing: .12em; fill: var(--ink); }
.wa-loop .sub { font: 600 10px var(--sans); letter-spacing: .12em; fill: var(--ink-2); }
.wa-loop .core { font: 700 13px var(--sans); letter-spacing: .12em; fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .wa-loop .pulse { display: none; } }
@media (max-width: 900px) { .wa-loop-grid { grid-template-columns: 1fr; } }
.wa-runs { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .wa-runs { grid-template-columns: 1fr; } }
.wa-draw { position: relative; aspect-ratio: 16 / 9; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
.wa-draw img { position: absolute; inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); object-fit: contain; mix-blend-mode: var(--draw-blend); filter: var(--draw-filter); }

/* text for screen readers and the Markdown twins only */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------
   Homepage platform: the stack drawing beside the agent loop around a
   live Rosie (assets/js/how-loop.js, shared with the deck's slide 5,
   whose deck.css holds the slide's own copy). Everything on the stage
   is sized in cqw of the stage, so the ring and its pills scale as one;
   the stage's aspect ratio reserves the space before the renderer loads.
   ------------------------------------------------------------------ */
.how-home h2 { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.how-home .how-grid { display: grid; grid-template-columns: minmax(14rem, 27fr) minmax(0, 73fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: .9rem clamp(1.5rem, 2.5vw, 2.25rem); }
.how-home .how-stack, .how-home .how-loop { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; }
.how-home .col-head { margin: 0; max-width: none; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.how-home .how-moat { max-width: none; font-size: .95rem; line-height: 1.4; font-weight: 500; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: .7rem; text-wrap: pretty; }
.how-home .how-moat b { color: var(--red); font-weight: 600; }

.how-home .how-stack figure { position: relative; margin: 0; min-height: 0; }
.how-home .how-stack svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.how-home .how-stack .guides path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.how-home .how-stack .layer polygon { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; transition: stroke .35s, fill .35s; }
.how-home .how-stack .layer .top { fill: var(--paper); }
.how-home .how-stack .layer .side { fill: var(--ice); }
.how-home .how-stack .layer .side.r { fill: var(--paper); }
.how-home .how-stack .icon * { fill: none; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .35s; }
.how-home .how-stack .icon .dot { fill: var(--ink-2); stroke: none; }
.how-home .how-stack .icon .scan, .how-home .how-stack .icon .bead { stroke: var(--red); stroke-width: 1.4; }
.how-home .how-stack .lead { fill: none; stroke: var(--line); stroke-width: 1; }
.how-home .how-stack text { font-family: var(--sans); font-size: 15px; font-weight: 600; fill: var(--ink); }
.how-home .how-stack text.tag { font-size: 11.5px; font-weight: 500; fill: var(--ink-2); }
.how-home .how-stack [data-layer="apps"] polygon { stroke: var(--red); }
.how-home .how-stack [data-layer="apps"] text:not(.tag) { fill: var(--red); }
.how-home .how-stack .layer.is-hot polygon { stroke: var(--red); stroke-width: 1.8; }
.how-home .how-stack .layer.is-hot .top { fill: color-mix(in srgb, var(--red) 9%, var(--paper)); }
.how-home .how-stack .layer.is-hot .icon * { stroke: var(--red); }
.how-home .how-stack .layer.is-hot .icon .dot { fill: var(--red); }

.how-home .how-stage { position: relative; aspect-ratio: 1.86; container-type: inline-size; }
.how-home .how-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.how-home .how-poster { position: absolute; left: 32%; top: 28%; width: 36%; height: 52%; object-fit: contain; opacity: .9; mix-blend-mode: var(--draw-blend); filter: var(--draw-filter); }
.how-home .how-node { position: absolute; transform: translate(-50%, -50%); display: grid; gap: .23cqw; padding: .69cqw 1.22cqw .77cqw; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; text-align: center; line-height: 1.25; transition: border-color .3s, box-shadow .3s; }
.how-home .how-node b { font-size: max(11px, 1.76cqw); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.how-home .how-node i { font-style: normal; color: var(--red); font-variant-numeric: tabular-nums; }
.how-home .how-node small { font-size: max(10px, 1.3cqw); line-height: 1.2; color: var(--ink-2); }
.how-home .how-agent { padding: .92cqw 1.38cqw; border-color: var(--ink); }
.how-home .how-agent b { font-size: max(10px, 1.53cqw); letter-spacing: .1em; }
.how-home .how-node.is-on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 2.1cqw color-mix(in srgb, var(--red) 30%, transparent); }
.how-home .how-callout { position: absolute; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto auto; column-gap: .92cqw; align-items: center; padding: .61cqw 1.07cqw; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; line-height: 1.2; transition: border-color .3s, box-shadow .3s; }
.how-home .how-callout::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 1.68cqw; border-left: 1px dashed var(--ink-2); }
.how-home .how-callout small { grid-column: 2; font-size: max(10px, 1.25cqw); color: var(--ink-2); }
.how-home .how-callout small:first-of-type { color: var(--ink); font-weight: 600; }
.how-home .how-pool { grid-row: 1 / 3; width: max(28px, 4.3cqw); height: auto; overflow: visible; }
.how-home .how-pool path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; transform-origin: 24px 12px; }
.how-home .how-pool .iso { stroke-dasharray: 2.5 2.5; }
.how-home .how-callout.is-on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.how-home .how-callout.is-on .pool { stroke: var(--red); fill: color-mix(in srgb, var(--red) 22%, transparent); }
.how-home .how-callout.is-on .iso { stroke: var(--red); animation: how-iso 1.1s ease-in-out infinite alternate; }
.how-home .how-callout.is-on .i2 { animation-delay: .35s; }
@keyframes how-iso { from { transform: scale(.9); opacity: .5; } to { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .how-home .how-callout.is-on .iso { animation: none; } }
.how-home .how-gl-holder { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.how-home .how-gl { display: block; visibility: hidden; }

/* phones: the robot alone on the stage, the six steps as a list that follows the loop */
.how-home .how-steps { display: none; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.how-home .how-steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .4rem; padding: .65rem .75rem .7rem; border-bottom: 1px solid var(--line-2); border-left: 3px solid transparent; transition: background-color .3s, border-color .3s; }
.how-home .how-steps i { grid-row: 1 / 3; font-style: normal; font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }
.how-home .how-steps b { font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.how-home .how-steps small { font-size: .85rem; line-height: 1.35; color: var(--ink-2); }
.how-home .how-steps li.is-on { background: var(--paper); border-left-color: var(--red); }

@media (max-width: 999px) {
  .how-home .how-grid { display: block; }
  .how-home .how-stack { display: block; margin-bottom: 2rem; }
  .how-home .how-stack figure { width: min(100%, 18rem); aspect-ratio: 300 / 406; margin-top: 1rem; }
  .how-home .how-loop { display: grid; gap: .9rem; }
}
@media (max-width: 640px) {
  .how-home .how-stage { aspect-ratio: 4 / 3; }
  .how-home .how-stage > .how-node, .how-home .how-stage > .how-callout { display: none; }
  .how-home .how-poster { left: 8%; top: 8%; width: 84%; height: 84%; }
  .how-home .how-steps { display: block; }
}