/* Machine showroom — the palette of content.json (RAL convention); Hubot Sans wide for display, Mona Sans for text (V3's
   preferred list). Numbers use proportional figures (see .head). */
:root {
  --navy: #1a2b3c; --blue: #2271b3; --yellow: #f9a800; --black: #06090d; --surface: #0e141c; --metal: #a5a5a5; --white: #f6f6f6;
  --ink: var(--white); --ink-2: var(--metal); --ink-inv: var(--black); --hair: 245, 247, 250;
  --text: 'Mona Sans', ui-sans-serif, sans-serif;
  --face: 'Hubot Sans', ui-sans-serif, sans-serif;
  --display: clamp(40px, 8.4vw, 132px);
  --gutter: clamp(16px, 2.2vw, 32px);
  /* the measured line reveal: lines from −110 % → 0, power3.out, 0.78–0.94 s, 0.08 s between lines */
  --reveal-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --reveal-dur: 0.86s;
}
html { background: var(--black); }
body { margin: 0; color: var(--ink); transition: color 0.7s var(--reveal-ease); font-family: var(--text); font-weight: 400; -webkit-font-smoothing: antialiased; background: transparent; }
#world { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; display: block; pointer-events: none; }
main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, main input, main label { pointer-events: auto; }


.loader { position: fixed; inset: 0; z-index: 10; background: var(--black); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--gutter); transition: opacity 0.9s var(--reveal-ease), visibility 0s linear 0.9s; }
.loader__n { font-family: var(--face); font-variation-settings: 'wdth' 125; font-size: var(--display); font-weight: 800; line-height: 0.8; letter-spacing: -0.03em; }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* a section: tall for scroll, its words held on screen while the machines answer behind them */
.ch { position: relative; }
.ch__hold { position: sticky; top: 0; height: 100svh; display: grid; padding: calc(var(--gutter) * 3.2) var(--gutter) calc(var(--gutter) * 1.6); box-sizing: border-box; }
.pos-l .ch__hold { align-content: center; justify-items: start; }
.pos-r .ch__hold { align-content: center; justify-items: end; }
.pos-bl .ch__hold { align-content: end; justify-items: start; }
.pos-tl .ch__hold { align-content: start; justify-items: start; }
.pos-tr .ch__hold { align-content: start; justify-items: end; }
.pos-br .ch__hold { align-content: end; justify-items: end; }
.ch--close .ch__hold { align-content: end; }
.ch--close .ch__inner { width: 100%; }
.pos-r .ch__inner, .pos-tr .ch__inner { width: min(460px, 100%); }

.big { font-family: var(--face); font-variation-settings: 'wdth' 125; font-size: var(--display); font-weight: 800; line-height: 0.86; letter-spacing: -0.035em; margin: 0; max-width: 12ch; text-transform: uppercase; }
/* tabular figures are not used: in both faces they carry a slashed zero, which reads as a diameter sign here */
.head { font-family: var(--face); font-variation-settings: 'wdth' 125; font-size: clamp(34px, 4.4vw, 68px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; margin: 0; text-transform: uppercase; }
.mid { font-family: var(--face); font-variation-settings: 'wdth' 112; font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.small { font-size: 14px; line-height: 1.45; margin: 0 0 18px; color: var(--ink-2); max-width: 40ch; }
.small b { color: var(--ink); font-weight: 600; }

/* the gauge of the section: the system's pressure while the visitor holds it */
.gauge { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 0; }
.gauge__n { font-family: var(--face); font-variation-settings: 'wdth' 125; font-size: clamp(40px, 5vw, 76px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } /* the unit sits on the number: a fixed width left «0» alone, far from «bar» (22/10) */
.gauge__u { font-size: 14px; color: var(--ink-2); }
.hold { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.hold__ring { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--hair), 0.35); position: relative; }
.hold__ring::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--yellow); transform: scale(var(--press, 0.35)); transition: transform 0.12s; }

/* the variants: typed morphs from content.json; the active one rebuilds the machine */
.list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.list__item { appearance: none; background: none; border: 0; padding: 4px 0 4px 26px; margin: 0; font: inherit; font-family: var(--face); font-variation-settings: 'wdth' 112; font-size: clamp(20px, 2.1vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: rgba(var(--hair), 0.72); text-align: left; cursor: pointer; position: relative; transition: color 0.35s var(--reveal-ease); }
.list__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--reveal-ease); }
.list__item:hover { color: rgba(var(--hair), 0.84); }
.list__item.is-on { color: var(--ink); }
.list__item.is-on::before { transform: scaleX(1); }
.list__item:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
.list--pack { grid-template-columns: repeat(2, auto); column-gap: 36px; }

/* the calculator: F = p · A, the machine follows the numbers */
.calc { display: grid; gap: 18px; margin-top: 10px; width: 100%; }
.calc__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; }
.calc__row label { font-size: 14px; color: var(--ink-2); }
.calc__row output { font-size: 15px; font-weight: 600; }
.calc__row input { grid-column: 1 / -1; width: 100%; appearance: none; height: 22px; background: none; margin: 0; cursor: pointer; }
.calc__row input::-webkit-slider-runnable-track { height: 1px; background: rgba(var(--hair), 0.3); }
.calc__row input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); margin-top: -7px; transition: transform 0.2s; }
.calc__row input:active::-webkit-slider-thumb { transform: scale(1.3); background: var(--yellow); }
.calc__row input::-moz-range-track { height: 1px; background: rgba(var(--hair), 0.3); }
.calc__row input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(var(--hair), 0.16); }
.calc__out p { margin: 0; font-size: 13px; color: var(--ink-2); }
.calc__out strong { display: block; font-family: var(--face); font-variation-settings: 'wdth' 125; font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1.05; }
.calc__out strong small { font-size: 0.36em; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-left: 6px; font-family: var(--text); }

/* the edges (core/edges.css): an instrument bar. Square corners and signal yellow like the machines' own controls; the
   readout is the line pressure under the visitor's hand. The footer ends on the name, solid, inside the margins. */
:root {
  --edge-accent: var(--yellow); --edge-accent-ink: var(--black); --edge-face: var(--face); --edge-text: var(--text);
  --edge-backdrop: rgba(6, 9, 13, 0.74); --edge-line: rgba(var(--hair), 0.14);
  --edge-sheet-bg: #0a1018; --edge-sheet-ink: var(--white); --edge-foot-bg: var(--surface); --edge-foot-ink: var(--white);
  --edge-radius: 2px;
}
.edge-head { color: var(--ink); }
.edge-brand svg { height: 20px; }
.edge-brand__word, .edge-sheet__label, .edge-foot__statement, .edge-foot__mark { font-variation-settings: 'wdth' 125; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.edge-brand__word { font-size: 16px; letter-spacing: 0.01em; }
.edge-mark__rod, .edge-mark__piston { transform: translate3d(calc(var(--k, 0) * 14px), 0, 0); transition: transform 0.25s var(--reveal-ease); }
.edge-live { padding-left: 14px; border-left: 1px solid var(--edge-line); }
.edge-sheet__label { letter-spacing: -0.03em; }
.edge-foot__mark { letter-spacing: -0.045em; }
.edge-tile__label { font-variation-settings: 'wdth' 125; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.edge-form__row input, .edge-form__row textarea { cursor: text; }

/* the close: the hall from above and the two ways to ask */
.wordmark { font-family: var(--face); font-variation-settings: 'wdth' 125; font-size: 12vw; font-weight: 800; letter-spacing: -0.045em; line-height: 0.8; margin: 0; white-space: nowrap; width: max-content; text-transform: uppercase; }
.close__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 28px; font-size: 15px; }
.close__ctas { display: flex; gap: 10px; }
.cta { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 2px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); border: 1px solid rgba(var(--hair), 0.4); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.cta:hover { border-color: var(--ink); }
.cta--primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.cta--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-inv); }

/* the labels of the exploded machine: a point on the part, a leader, the spec word */
.labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.label { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.4s var(--reveal-ease); }
.label__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.label__line { position: absolute; left: 0; bottom: 0; width: 1px; height: 64px; background: rgba(var(--hair), 0.55); transform-origin: bottom; }
.label__text { position: absolute; left: 10px; bottom: 54px; white-space: nowrap; font-family: var(--face); font-variation-settings: 'wdth' 112; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.label.is-hot .label__text { color: var(--yellow); }

/* the line reveal: each line is a mask, its inner moves from below (play on enter, reverse on leave) */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform var(--reveal-dur) var(--reveal-ease); transition-delay: calc(var(--i, 0) * 0.08s); will-change: transform; }
.is-in .line > span { transform: none; }
.fade { opacity: 0; transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.35s; }
.is-in .fade { opacity: 1; }

/* the hand: a dot; a ring over a part it can read; a yellow ring while it presses the system */
.cursor { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: 0; height: 0; color: var(--ink); }
.cursor span { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-sizing: border-box; border: 1px solid transparent; transition: width 0.45s var(--reveal-ease), height 0.45s var(--reveal-ease), left 0.45s var(--reveal-ease), top 0.45s var(--reveal-ease), background-color 0.3s, border-color 0.3s; }
.cursor.is-hot span { width: 46px; height: 46px; left: -23px; top: -23px; background: transparent; border-color: currentColor; }
.cursor.is-press span { width: 64px; height: 64px; left: -32px; top: -32px; background: transparent; border-color: var(--yellow); }
body.is-pressing { user-select: none; }
@media (pointer: fine) { html, body { cursor: none; } a, button, input { cursor: none; } }
@media (pointer: coarse) { .cursor { display: none; } }

@media (max-width: 720px) {
  .pos-r .ch__hold, .pos-tr .ch__hold { justify-items: start; }
  .pos-r .ch__inner, .pos-tr .ch__inner { max-width: none; }
  .list--pack { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .close__row { flex-direction: column; align-items: start; }
  .label__text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .line > span, .fade { transition: none; transform: none; opacity: 1; }
}

/* the test bay in daylight: dark ink on the lit hall. The lights go out at the close, where the wall writes the name. */
body.is-day { --ink: #0b1118; --ink-2: #353d46; --ink-inv: var(--white); --hair: 11, 17, 24; --edge-backdrop: rgba(228, 231, 234, 0.8); --edge-line: rgba(11, 17, 24, 0.14); }
/* over the wall's rods the bar keeps a pale scrim by day, so the links read before it pins */
body.is-day .edge-head:not([data-state='pinned']) { background: linear-gradient(rgba(214, 218, 222, 0.92), rgba(214, 218, 222, 0)); }
body.is-day .edge-nav__link { opacity: 0.86; }

/* by day the calculator sits on a frosted instrument plate: its readings cross the machine behind it */
body.is-day .calc { background: rgba(232, 235, 238, 0.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 18px 20px 20px; box-sizing: border-box; border-radius: 2px; }
/* on a phone the lists stand over the machines: by day they get the same plate */
@media (max-width: 720px) { body.is-day .ch__inner:has(.list), body.is-day .ch__inner:has(.gauge) { background: rgba(232, 235, 238, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 16px 18px; box-sizing: border-box; border-radius: 2px; } }
/* by day the eyebrows take the full ink, the readout's key too, and a part's name sits on a small tag over the steel */
body.is-day .small, body.is-day .edge-live__k { color: var(--ink); opacity: 1; }
body.is-day .small { display: inline-block; max-width: none; background: rgba(232, 235, 238, 0.88); padding: 3px 8px; border-radius: 2px; }
@media (max-width: 720px) { body.is-day .ch__inner:has(.list) .small, body.is-day .ch__inner:has(.gauge) .small { background: none; padding: 0; } }
body.is-day .label__text { background: rgba(232, 235, 238, 0.88); padding: 3px 8px; border-radius: 2px; }

/* the intro reads over the perforated wall: its dark holes pulled the 10th percentile to 2.97:1 (gate on the dist, 22/10) */
@media (min-width: 721px) { body.is-day .pos-tr .ch__inner { background: rgba(232, 235, 238, 0.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 18px 20px 20px; box-sizing: border-box; border-radius: 2px; } }

/* the cursor shows only while a pointer is over the page: at rest it was a dot parked on the scene, in every screenshot and card video (22/10) */
.cursor { opacity: 0; transition: opacity 0.3s; } .cursor.is-in { opacity: 1; }

/* what a stop says besides its headline (22/10): one sentence and its numbers on the instrument plate — dark glass at
   night, frosted aluminium by day. No rules between the facts. */
:root { --plate: rgba(6, 9, 13, 0.72); }
body.is-day { --plate: rgba(232, 235, 238, 0.8); }
.stop { width: min(420px, 100%); box-sizing: border-box; margin-top: 22px; padding: 16px 18px 18px; border-radius: 2px; background: var(--plate); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; }
.stop__line { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); max-width: 46ch; }
.stop__line--live { margin-top: 18px; min-height: 2.9em; padding: 10px 14px; background: var(--plate); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 2px; width: min(420px, 100%); box-sizing: border-box; }
.stop__spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 14px; margin: 14px 0 0; }
.stop > .stop__spec:first-child { margin-top: 0; }
.stop__fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 3px; margin: 0; }
.stop__fact dd { margin: 0; font-family: var(--face); font-variation-settings: 'wdth' 112; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); }
.stop__fact dt { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.about { margin: 20px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.45; color: var(--ink); padding: 12px 16px; background: var(--plate); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 2px; }
.pos-tr .stop, .pos-r .stop { margin-left: auto; }
/* inside a block that already sits on a plate, the stop does not stack a second one */
@media (min-width: 721px) { body.is-day .pos-tr .stop { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; } }
@media (max-width: 720px) {
  body.is-day .ch__inner:has(.list) .stop, body.is-day .ch__inner:has(.gauge) .stop, body.is-day .ch__inner:has(.list) .stop__line--live { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .stop { margin-top: 16px; padding: 14px 16px 16px; } .stop__fact dd { font-size: 16px; } .about { font-size: 15px; } .pos-tr .stop, .pos-r .stop { margin-left: 0; }
}
/* the plate's padding is there by night too: lines are split at load, and padding added later by day pushed the last
   words of the intro past the plate's edge, clipped by their masks (22/10) */
@media (min-width: 721px) { .pos-tr .ch__inner { padding: 18px 20px 20px; box-sizing: border-box; } }
/* the hero's sentence stands at the bottom right: under the title it lifted the title onto the mounting feet */
@media (min-width: 721px) { .ch[data-id='hero'] .about { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) * 1.6); margin: 0; } }
.stop { width: min(460px, 100%); }
.stop__fact dd { font-size: 17px; white-space: nowrap; }
/* by day the ranges sit on the plate at every width: the names not chosen read at 2.5:1 over the power unit (gate, 22/10) */
body.is-day .ch__inner:has(.list) { background: rgba(232, 235, 238, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 16px 20px 18px; box-sizing: border-box; border-radius: 2px; }
body.is-day .ch__inner:has(.list) .stop, body.is-day .ch__inner:has(.list) .stop__line--live, body.is-day .ch__inner:has(.list) .small { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }