/* Ember showcase: opening view.
   The page runs one sequence: it starts almost black, the CRT line types out,
   the room appears dark, the lamp on the left comes on, the low sun reaches
   in from the right, then the wordmark and the spec strip appear.
   opening.js adds the classes is-dark, is-lamp, is-sun, is-mark and is-done
   to .opening in that order. Without JavaScript the page shows the end state. */

@property --sun {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

:root {
  --ink: #0b0a09;             /* page: almost black, warm */
  --charcoal: #1c1a18;
  --charcoal-line: #34312c;
  --beige: #d6cdbb;           /* the case's off-white, as text */
  --beige-dim: #8f877a;
  --amber: #ffb24d;           /* CRT text and indicator lamps */
  --amber-dim: #5a3a14;
  --ember: #b84d0f;           /* case wordmark colour (0.72, 0.30, 0.06) */

  --mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
  --wide: 'Michroma', 'Eurostile', 'Arial Black', sans-serif;

  --side: clamp(16px, 4vw, 64px);
  --bar-h: 64px;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--beige);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.4;
}

/* Film grain over the whole window. The tile is SVG noise; the layer is
   larger than the window and moves in small steps to look like film. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 2.2 -.6'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .16;
  mix-blend-mode: overlay;
  animation: grain 1s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-3%, 2%); }
  33%  { transform: translate(2%, -4%); }
  50%  { transform: translate(-4%, -1%); }
  67%  { transform: translate(3%, 3%); }
  83%  { transform: translate(-1%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Layout: landscape screens ---------- */

.opening {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--bar-h) 1fr;
  overflow: clip;
  isolation: isolate;
}

.bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--side);
}

.stage {
  position: relative;
  container-type: size;
  min-height: 0;
}

/* The render, as tall as the stage, moved right of centre so the wordmark
   has the dark wall and the black margin on the left. */
.room {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100cqh;
  aspect-ratio: 3 / 2;
  translate: calc(-50% + 12vw) 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 90%, transparent 100%);
}

/* Squarer screens (4:3, 5:4): a smaller render, further right, so the
   wordmark stays clear of the unit. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  .room { height: 90cqh; translate: calc(-50% + 14vw) 0; }
  .stage { --unit-mid: 43.2; }
}

.room__fade {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
}

.room__layer { position: absolute; inset: 0; }

.room__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the wall behind the wordmark (left, at the unit's midpoint) and
   along the bottom behind the spec strip. */
.stage__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 58% at 0% calc(var(--unit-mid) * 1%), rgba(11, 10, 9, .82), rgba(11, 10, 9, 0) 78%),
    linear-gradient(to top, rgba(11, 10, 9, .9) 0, rgba(11, 10, 9, 0) 22%);
}

.fore {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4cqh, 40px);
  padding: 0 var(--side) clamp(16px, 3cqh, 28px);
}

/* The wordmark and copy sit left of the unit, centred on the unit's
   vertical midpoint. The unit spans 9.4 % to 87 % of the render's height,
   so its midpoint is 48 % down the render, which is as tall as the stage
   (90 % of it on squarer screens). */
.stage { --unit-mid: 48; }
.mark {
  position: absolute;
  z-index: 2;
  left: var(--side);
  top: calc(var(--unit-mid) * 1cqh);
  translate: 0 -50%;
  width: clamp(280px, 29vw, 600px);
}

/* ---------- The light: one image, four layers ---------- */

/* 1. The room with every light off: the image made very dark. */
.room__dark img { filter: brightness(.13) saturate(.45); }

/* 2. The lamp on the left: a warmer, dimmer copy, shown in a pool that is
   brightest at the left edge. */
.room__lamp {
  -webkit-mask-image: radial-gradient(80% 95% at -6% 42%, #000 0%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .3) 62%, transparent 86%);
          mask-image: radial-gradient(80% 95% at -6% 42%, #000 0%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .3) 62%, transparent 86%);
}
.room__lamp img { filter: brightness(.6) sepia(.45) saturate(1.6) hue-rotate(-10deg); }

/* 3. Lamp and sun: the render as it is, uncovered from the right as --sun
   goes from 0 to 1. At 1 the whole image shows. */
.room__sun {
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--sun) * 170% - 70%), transparent calc(var(--sun) * 170%));
          mask-image: linear-gradient(to left, #000 calc(var(--sun) * 170% - 70%), transparent calc(var(--sun) * 170%));
}

/* 4. A soft glow round the brightest parts. */
.room__bloom { mix-blend-mode: screen; opacity: .22; }
.room__bloom img { filter: blur(22px) brightness(1.05) contrast(2.4) saturate(1.2); }

/* ---------- Bar: CRT line, indicator lamps ---------- */

.crt {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--amber);
  text-shadow: 0 0 1px rgba(255, 210, 150, .9), 0 0 9px rgba(255, 140, 30, .5);
}

.crt__cursor {
  display: inline-block;
  width: .62em;
  height: 1.05em;
  margin-left: .2em;
  vertical-align: -.18em;
  background: var(--amber);
  box-shadow: 0 0 9px rgba(255, 140, 30, .6);
  opacity: 0;
}

.lamps { display: flex; gap: 22px; }

.lamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--beige-dim);
}

.lamp i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe2a8, var(--amber) 45%, #b4600f 100%);
  box-shadow: 0 0 10px rgba(255, 150, 40, .7), inset 0 0 0 1px rgba(0, 0, 0, .25);
  transition: background .3s, box-shadow .3s;
}

.replay {
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--charcoal-line);
  border-radius: 2px;
  background: transparent;
  color: var(--beige-dim);
  font: 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.replay:hover { color: var(--amber); border-color: var(--amber-dim); }
.replay:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

/* ---------- Wordmark ---------- */

.wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wm-frame {
  fill: none;
  stroke: var(--beige);
  stroke-width: .8;
  stroke-linejoin: miter;
  stroke-dasharray: 1 0;
}

.wm-sub {
  fill: var(--beige);
  font-family: var(--wide);
}

.wm-letter { fill: var(--ember); }

/* The copy under the wordmark lines up with the letters: its left edge on
   the E's stem and its right edge on the R's, 3.3 mm in from each side of
   the 63.686 mm frame (0.8 frame line + 2.5 space, as on the case). Sizes
   are in cqi (per cent of the wordmark's width), so the block keeps the
   same proportions at every screen width. */
.mark { container-type: inline-size; }

.lockup { margin: 4.4cqi calc(3.3 / 63.686 * 100%) 0; }

/* "manual dial thermostats." is 15.63 em wide in Michroma; the letters are
   89.64 % of the wordmark's width, so 5.7cqi makes that line reach the R. */
.lockup__line {
  margin: 0;
  font: 400 5.7cqi/1.24 var(--wide);
  color: var(--text);
}
.lockup__line span { display: block; white-space: nowrap; }

.lockup__tags {
  display: flex;
  justify-content: space-between;
  margin: 3.6cqi 0 0;
  padding-top: 2.6cqi;
  border-top: 1px solid rgba(214, 205, 187, .24);
  font: clamp(8.5px, 2.15cqi, 13px)/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 140, 30, .4);
}
.lockup__tags span { white-space: nowrap; }
/* Letter spacing follows the last letter too; pull it back to the R's edge. */
.lockup__tags span:last-child { margin-right: -.2em; }

/* ---------- Spec line ----------
   One line of figures between thin double rules, as in the credit lines on
   early-1990s box covers and novel covers. */

.credits__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  margin: 0;
  padding: 11px 0 10px;
  border-top: 3px double rgba(214, 205, 187, .45);
  border-bottom: 3px double rgba(214, 205, 187, .45);
}
.credits__line > div { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.credits__line dt {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 7px rgba(255, 140, 30, .35);
}
.credits__line dd {
  margin: 0;
  font: 11px/1.4 var(--wide);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beige);
}
/* Units keep their case; Michroma's degree sign sits low, Space Mono's at cap height. */
.credits__line .unit { text-transform: none; }
.credits__line .deg { font-family: var(--mono); }
.credits sup { font-family: var(--mono); font-size: .85em; line-height: 0; vertical-align: .45em; color: var(--amber); }
.credits__note { margin: 7px 0 0; font-size: 9.5px; letter-spacing: .08em; text-align: right; color: var(--beige-dim); }

/* ---------- Layout: portrait screens (phones) ---------- */
/* Same media query as the <source> that picks the phone crop. */

@media (max-aspect-ratio: 1/1) {
  .opening {
    height: auto;
    min-height: 100svh;
    grid-template-rows: auto auto;
  }

  .bar {
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 18px var(--side) 14px;
  }
  .crt { flex-basis: 100%; font-size: 11px; letter-spacing: .08em; white-space: normal; }

  .stage { container-type: normal; }

  /* The phone crop is 1500 x 1600 from the original, centred on the unit. */
  .room {
    position: relative;
    left: auto;
    height: auto;
    width: min(100%, 60svh * .9375);
    margin: 0 auto;
    aspect-ratio: 1500 / 1600;
    translate: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }

  .room__fade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 86%, transparent 100%);
  }

  .stage__shade { display: none; }

  .fore {
    position: relative;
    margin-top: 26px;
    padding-bottom: 28px;
  }

  /* On phones the wordmark follows the picture, overlapping its faded foot. */
  .mark {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    width: auto;
    max-width: calc(520px + 2 * var(--side));
    margin: -6% auto 0;
    padding: 0 var(--side);
  }

  .credits__line { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 12px 0; }
  .credits__line > div { flex-direction: column; gap: 3px; white-space: normal; }
  .credits__line > div:first-child { grid-column: 1 / -1; }
  .credits__note { text-align: left; }
}

/* ---------- Sequence (only with JavaScript) ---------- */

.js .opening:not(.is-dark) .room__dark { opacity: 0; }
.js .room__dark { transition: opacity 1.6s ease-out; }

.js .opening:not(.is-lamp) .room__lamp { opacity: 0; }
/* The page's one flicker: the lamp catches once, then comes up. */
.js .opening.is-lamp .room__lamp { animation: lamp-on 1.9s ease-out both; }
@keyframes lamp-on {
  0%   { opacity: 0; }
  5%   { opacity: .5; }
  9%   { opacity: .1; }
  15%  { opacity: .65; }
  100% { opacity: 1; }
}

.js .opening:not(.is-sun) .room__sun { --sun: 0; opacity: 0; }
.js .room__sun { transition: --sun 3s cubic-bezier(.45, .05, .3, 1), opacity .8s ease-out; }

.js .opening:not(.is-sun) .room__bloom { opacity: 0; }
.js .room__bloom { transition: opacity 2.6s ease-in-out .9s; }

.js .opening:not(.is-lamp) .lamp--lamp i,
.js .opening:not(.is-sun) .lamp--sun i {
  background: var(--amber-dim);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}

.js .opening:not(.is-typing) .crt__text { visibility: hidden; }
.js .opening.is-typing .crt__cursor { opacity: 1; animation: blink 1.05s steps(1) infinite; }
.js .opening.is-done .crt__cursor { opacity: 0; transition: opacity .6s 2.2s; animation: none; }
@keyframes blink { 50% { opacity: 0; } }

.js .opening:not(.is-mark) .wm-frame { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .opening.is-mark .wm-frame {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s cubic-bezier(.6, 0, .25, 1);
}

.js .opening:not(.is-mark) .wm-letter { opacity: 0; transform: translateY(1.2px); }
.js .wm-letter { transition: opacity .7s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.35s + var(--i) * .09s); }

.js .opening:not(.is-mark) .wm-sub { opacity: 0; }
.js .wm-sub { transition: opacity .8s ease-out 1.1s; }

.js .opening:not(.is-done) .lockup,
.js .opening:not(.is-done) .credits { opacity: 0; translate: 0 6px; }
.js .lockup, .js .credits { transition: opacity .9s ease-out, translate .9s ease-out; }
.js .credits { transition-delay: .25s; }

.js .opening:not(.is-done) .replay { opacity: 0; pointer-events: none; }
.js .replay { transition: opacity .6s, color .2s, border-color .2s; }

/* Skip or reset: no transitions for one frame. */
.opening.is-instant *,
.opening.is-instant *::before,
.opening.is-instant *::after {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}


/* =====================================================================
   Sections below the opening view
   ===================================================================== */

:root {
  --text: #ece5d6;            /* headings */
  --beige-2: #b3aa99;         /* body text */
  --deep: #0e0d0c;            /* inside panels and readouts */
  --index-h: 48px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 140, 30, .35);
}

.fine {
  margin: 18px 0 0;
  max-width: 64ch;
  font-size: 11px;
  line-height: 1.7;
  color: var(--beige-dim);
}

/* ---------- Section index (appears after the opening view) ---------- */

.index {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--index-h);
  padding: 0 var(--side);
  background: rgba(11, 10, 9, .88);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(214, 205, 187, .1);
  font: 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.no-js .index { display: none; }
.js .index { translate: 0 -100%; transition: translate .45s cubic-bezier(.3, .7, .2, 1); }
.js .index.is-shown { translate: 0 0; }

.index__home {
  font-family: var(--wide);
  letter-spacing: .22em;
  color: var(--ember);
  text-decoration: none;
}

.index ol {
  display: flex;
  gap: 2px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.index li a {
  display: flex;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 2px;
  color: var(--beige-dim);
  text-decoration: none;
  transition: color .2s;
}
.index li a b { font-weight: 400; color: #5d5649; transition: color .2s, text-shadow .2s; }
.index li a:hover { color: var(--beige); }
.index li a.is-current { color: var(--beige); }
.index li a.is-current b { color: var(--amber); text-shadow: 0 0 8px rgba(255, 140, 30, .6); }
.index a:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

@media (max-width: 1180px) { .index li a span { display: none; } }
@media (max-width: 480px) {
  .index { gap: 8px; }
  .index li a { padding: 9px 4px; }
}

/* Indicator lamps: off, half and on. */
.led {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2118;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .06);
}
.led.is-half {
  background: radial-gradient(circle at 35% 35%, #c98a3e, #7a4a14);
  box-shadow: 0 0 5px rgba(255, 150, 40, .25);
}
.led.is-on {
  background: radial-gradient(circle at 35% 35%, #ffe2a8, var(--amber) 45%, #b4600f 100%);
  box-shadow: 0 0 9px rgba(255, 150, 40, .65);
}

.drawing-note {
  margin: 14px 0 0;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--beige-dim);
}

/* ---------- Spreads: each section as a technical-readout page ----------
   After the Star Wars Technical Journal's fold-outs (1993-94): a thin border
   round each section with the EMBER plate breaking its top line, parts
   labelled with thin orange lines at right angles, a title between two
   rules. Data in boxes with a title tab and a hard offset shadow, after the
   West End Games sourcebooks (1987-89). sections.js draws the borders and
   the label lines. */

.section {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--side);
  scroll-margin-top: var(--index-h);
}
/* Padding, not a margin on the last child: that margin would collapse
   through the section and the border would sit on the last box. */
.spread { margin-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(48px, 5vw, 70px); }
.spread > * { position: relative; }

/* The border, drawn by sections.js as a line with 45-degree corners and
   breaks where the plate and the section code sit. */
.spread__frame {
  position: absolute !important;
  inset: 0 var(--side);
  --line: 1.5px;
  --cut: 18px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(214, 205, 187, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 205, 187, .04) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 16px 16px;
}
.fr__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fr__line path { fill: none; stroke: var(--beige); stroke-width: var(--line); stroke-linejoin: miter; }
.fr__label { position: absolute; top: calc(var(--line) / 2); translate: 0 -50%; white-space: nowrap; }
.spread__plate { left: 48px; width: clamp(150px, 15vw, 210px); }
.spread__plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.spread__code {
  right: 48px;
  font: 11px/1 var(--wide);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--beige);
}

.spread__head {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 18px 56px;
  align-items: end;
  padding: clamp(64px, 7vw, 92px) clamp(22px, 4vw, 56px) 0;
}
.spread__head .crt { grid-column: 1 / -1; font-size: 12px; white-space: normal; }
.spread__intro {
  margin: 0;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.75;
  color: var(--beige-2);
}

/* The lockup, as under the opening wordmark: the longest line fills the
   column (sections.js sets the size), a rule, capitals pushed to both ends. */
.lock { min-width: 0; }
.lock .fit { margin: 0; font-family: var(--wide); font-weight: 400; line-height: 1.22; color: var(--text); }
.lock .fit span { display: block; white-space: nowrap; }
.lock__tags {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(214, 205, 187, .24);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 140, 30, .4);
}
.lock__tags > span:last-child { margin-right: -.26em; }
/* Units keep their case: uppercase would turn mAh into MAH and µA into MA. */
.lock__tags .unit { text-transform: none; letter-spacing: .12em; }

/* Content inside a spread sits within the border's padding. */
.spread > .readout, .spread > .titleplate, .spread > .figs, .spread > .tboxes, .spread > .drive,
.spread > .drivelog, .spread > .steps, .spread > .power, .spread > .circuit, .spread > .history, .spread > .gbox {
  margin-left: clamp(22px, 4vw, 56px);
  margin-right: clamp(22px, 4vw, 56px);
}

/* ---------- Readout: a picture with labelled parts ---------- */
.readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--fig-w, 620px)) minmax(0, 1fr);
  gap: 0 48px;
  margin-top: clamp(40px, 5vw, 64px);
}
.readout--tall { --fig-w: 360px; }
.readout__fig { position: relative; margin: 0; grid-column: 2; grid-row: 1; }
.readout__fig img { display: block; width: 100%; height: auto; }
.readout__fig--dwg img { filter: drop-shadow(0 0 2px rgba(214, 205, 187, .22)); }
.readout__fig--sq { --fig-w: 520px; }
.readout:has(.readout__fig--sq) { --fig-w: 520px; }
.readout__col { position: relative; margin: 0; padding: 0; list-style: none; grid-row: 1; }
.readout__col--l { grid-column: 1; }
.readout__col--r { grid-column: 3; }
.readout__col li {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.readout__col--l li { text-align: right; }
.readout__col li b { display: block; font-weight: 700; }
.readout__col li span { display: block; letter-spacing: .04em; text-transform: none; color: var(--beige-dim); }
.readout__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.readout__lines polyline { fill: none; stroke: #e2712b; stroke-width: 1.2; }
.readout__lines circle { fill: var(--amber); }
.readout__mark { display: none; }

/* A title between two rules. */
.titleplate {
  justify-self: end;
  width: fit-content;
  min-width: min(100%, 340px);
  margin-top: clamp(28px, 4vw, 44px);
  margin-left: auto !important;
  padding: 12px 0 10px;
  border-top: 1px solid var(--beige);
  border-bottom: 1px solid var(--beige);
  text-align: right;
}
.titleplate__name { margin: 0; font: 20px/1.25 var(--wide); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.titleplate__sub { margin: 6px 0 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }

/* Figures with a key letter in a square, as in the sourcebooks. */
.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 22px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
}
.fig { min-width: 0; }
.fig .frame__open { display: block; width: 100%; padding: 6px; border: 1px solid rgba(214, 205, 187, .5); background: transparent; cursor: zoom-in; transition: border-color .2s; }
.fig .frame__open:hover { border-color: var(--amber); }
.fig .frame__open:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; }
.fig img { display: block; width: 100%; height: auto; }
.fig p { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--beige-2); }
.fig p b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; background: var(--beige); color: var(--ink); font: 11px/1 var(--wide); }
.readout__fig .frame__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* ---------- Boxes with a title tab (and a hard offset shadow) ---------- */
.gbox { --cut: 14px; position: relative; isolation: isolate; padding-top: 12px; }
.gbox::before {
  content: '';
  position: absolute;
  inset: 12px 0 0 0;
  translate: 10px 10px;
  z-index: -1;
  background: var(--ember);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.gbox--flat::before { display: none; }
.gbox__in {
  height: 100%;
  padding: 1.5px;
  background: var(--beige);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.gbox--flat .gbox__in { background: rgba(214, 205, 187, .55); }
.gbox__face {
  --c: calc(var(--cut) - .6px);
  height: 100%;
  padding: 34px clamp(18px, 2.6vw, 30px) 24px;
  background: var(--ink);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.gbox__tab {
  position: absolute;
  top: 0;
  left: 26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px 5px;
  background: var(--beige);
  color: var(--ink);
  font: 10.5px/1 var(--wide);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gbox__tab .led { width: 7px; height: 7px; }

/* Label: value lines, as in a sourcebook stat block. */
.gstats { display: grid; gap: 12px; margin: 0; }
.gstats > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; font-size: 12.5px; line-height: 1.55; }
.gstats dt { font-weight: 700; letter-spacing: .03em; color: var(--text); }
.gstats dd { margin: 0; color: var(--beige-2); }
.gstats i { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-left: 6px; }
.gstats--spec > div { grid-template-columns: 150px minmax(0, 1fr) auto; padding-bottom: 12px; border-bottom: 1px solid rgba(214, 205, 187, .1); }
.gstats--spec em { font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.gstats--log > div { grid-template-columns: 44px minmax(0, 1fr); }
.gstats--log dt { color: var(--amber); }
.gstats--log .is-current dd { color: var(--text); }

/* ---------- How it works: the sequence under the model ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px 16px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
}
.steps h3 { margin: 0 0 10px; font: 400 14px/1.4 var(--wide); color: var(--text); }
.steps p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--beige-2); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 02 Features ---------- */
.tboxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px;
  margin-top: clamp(40px, 5vw, 60px);
  padding: 0;
  list-style: none;
}
.tboxes h3 { margin: 0 0 10px; font: 400 14px/1.45 var(--wide); color: var(--text); }
.tboxes p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--beige-2); }

/* ---------- 04 Drive ---------- */
.drive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: clamp(48px, 6vw, 72px);
}
.drivesvg { display: block; width: 100%; height: auto; overflow: visible; }
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 0; }
.readout-cell dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--beige-dim); }
.readout-cell dd { margin: 6px 0 0; font: 700 clamp(22px, 2.4vw, 30px)/1 var(--mono); color: var(--amber); text-shadow: 0 0 2px rgba(255, 220, 170, .6), 0 0 12px rgba(255, 140, 30, .45); }
.drive__controls .slider { margin-top: 30px; }
.drivelog { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- 05 Power ---------- */
/* The bay drawing across the spread, the two boxes side by side below it. */
.power { display: grid; gap: 0; }
.power .titleplate { margin-left: auto; }
.power .readout { --fig-w: 340px; }
.power__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: clamp(48px, 6vw, 72px);
}
.power .vfd { margin-top: 4px; }
.power .switch { margin: 22px 0 18px; }

/* ---------- 06 Circuit ---------- */
.circuit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 60px);
}
.circuit__side { display: grid; gap: 34px; }
.wgroup { margin: 18px 0 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.wgroup:first-child { margin-top: 0; }
.wires { display: grid; margin: 0; }
.wires > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(214, 205, 187, .1);
  font-size: 12px;
}
.wires dt { font-weight: 700; color: var(--text); }
.wires dd { grid-column: 3; margin: 0; color: var(--text); }
/* The line between the two ends. */
.wires > div::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 1px;
  background: #e2712b;
}
.wires dt { grid-column: 1; grid-row: 1; }
.wires em { grid-column: 4; font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--beige-dim); text-align: right; }
.wspare { margin: 16px 0 0; font-size: 11px; letter-spacing: .1em; color: var(--beige-dim); }

/* ---------- 07 History ---------- */
.history {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px 18px;
  margin-top: clamp(40px, 5vw, 60px);
  padding: 0;
  list-style: none;
}
.card .gbox__face { display: flex; flex-direction: column; }
.card img { display: block; width: 100%; height: 130px; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 0 2px rgba(214, 205, 187, .2)); }
.card p { margin: 0 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--beige-2); }
.card p.verdict { margin: auto 0 0; padding-top: 10px; border-top: 1px solid rgba(214, 205, 187, .14); color: var(--amber); }
.card p.verdict b { color: var(--text); }
.card--current .gbox__in { background: var(--amber); }

/* ---------- 08 Spec, 09 Status ---------- */
.spec { max-width: 980px; margin-top: clamp(40px, 5vw, 60px); }
.status { max-width: 980px; margin-top: clamp(40px, 5vw, 60px); }
.statusrows { margin: 0; padding: 0; list-style: none; }
.statusrows li {
  display: grid;
  grid-template-columns: 10px minmax(0, 250px) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(214, 205, 187, .1);
  font-size: 12.5px;
  line-height: 1.55;
}
.statusrows li:last-child { border-bottom: 0; }
.statusrows b { font-weight: 700; color: var(--text); }
.statusrows span { color: var(--beige-2); }

/* ---------- Footer ---------- */
.foot {
  max-width: 1320px;
  margin: clamp(110px, 12vw, 170px) auto 0;
  padding: 0 calc(var(--side) + clamp(22px, 4vw, 56px)) 60px;
  display: grid;
  gap: 14px;
}
.foot__rule { display: flex; align-items: center; gap: 22px; }
.foot__rule span { flex: 1; height: 7px; border-top: 1px solid var(--beige); border-bottom: 1px solid var(--beige); }
.foot__rule svg { width: 170px; height: auto; overflow: visible; }
.foot__tags { margin-top: 10px; }
.foot .fine { margin: 0; max-width: none; }
.foot__top { justify-self: start; display: inline-block; margin-top: 10px; text-decoration: none; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .history { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .spread__head { grid-template-columns: minmax(0, 1fr); }
  .tboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drive, .circuit, .power__side { grid-template-columns: minmax(0, 1fr); }

  /* Readouts become a picture with numbered marks and a numbered list. */
  .readout { grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: part; }
  .readout__fig, .readout__col--l, .readout__col--r { grid-column: 1; grid-row: auto; }
  .readout__fig { order: -1; max-width: 560px; justify-self: center; width: 100%; }
  .readout--tall .readout__fig { max-width: 300px; }
  .readout__col { display: grid; gap: 10px; }
  .readout__col--l { margin-top: 24px; }
  .readout__col--r { margin-top: 10px; }
  .readout__col li { position: static; text-align: left !important; padding-left: 32px; counter-increment: part; }
  .readout__col li::before {
    content: counter(part);
    position: absolute;
    margin-left: -32px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--amber);
    border-radius: 50%;
    font-size: 10px;
    color: var(--amber);
  }
  .readout__lines { display: none; }
  .readout__mark {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--amber);
    border-radius: 50%;
    background: rgba(11, 10, 9, .85);
    font: 700 10px/1 var(--mono);
    color: var(--amber);
    z-index: 2;
  }
}

@media (max-width: 640px) {
  :root { --side: 10px; }
  .spread__frame { --cut: 12px; }
  .spread__plate { left: 22px; width: 120px; }
  .spread__code { right: 22px; font-size: 9px; }
  .spread__head { padding: 52px 18px 0; }
  .spread > .readout, .spread > .titleplate, .spread > .figs, .spread > .tboxes, .spread > .drive,
  .spread > .drivelog, .spread > .steps, .spread > .power, .spread > .circuit, .spread > .history, .spread > .gbox { margin-left: 18px; margin-right: 18px; }
  .lock__tags { letter-spacing: .14em; font-size: 10px; }
  /* Long tab labels wrap instead of widening the page. */
  .gbox__tab { max-width: calc(100% - 44px); white-space: normal; line-height: 1.35; }
  .tboxes, .history { grid-template-columns: minmax(0, 1fr); }
  .figs { grid-template-columns: minmax(0, 1fr); }
  .gstats > div, .gstats--spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gstats--spec em { justify-self: start; }
  .gstats--log > div { grid-template-columns: 40px minmax(0, 1fr); }
  .wires > div { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); }
  .wires em { display: none; }
  .statusrows li { grid-template-columns: 10px minmax(0, 1fr); row-gap: 3px; }
  .statusrows span { grid-column: 2; }
  .titleplate { min-width: 0; width: auto; margin-left: 18px !important; }
  .lbar { grid-template-columns: 62px minmax(0, 1fr) 54px; gap: 8px; font-size: 10px; }
  .axis { margin: 6px 62px 0 70px; }
  .foot { padding-left: 28px; padding-right: 28px; }
}

/* ---------- Drive model, controls and chart (kept from the first layout) ---------- */

.dv-slice { fill: #1f1d1a; stroke: var(--beige); stroke-width: .35; }
.dv-cord { fill: none; stroke: var(--amber); stroke-width: .75; filter: drop-shadow(0 0 1px rgba(255, 150, 40, .9)); }
.dv-sleds rect { fill: #2d2a26; stroke: var(--beige); stroke-width: .3; }
.dv-hub { fill: #2a2723; stroke: var(--beige); stroke-width: .35; }
.dv-dhole { fill: var(--ink); stroke: var(--beige-dim); stroke-width: .3; }
.dv-lip { fill: #1f1d1a; stroke: var(--beige); stroke-width: .35; }
.dv-wrap { fill: none; stroke: var(--amber); stroke-width: 1; filter: drop-shadow(0 0 1px rgba(255, 150, 40, .9)); }
.dv-notch { stroke: var(--beige); stroke-width: .6; }
.dv-shaft { fill: var(--ink); stroke: var(--beige-dim); stroke-width: .3; }
.dv-needle line { stroke: var(--amber); stroke-width: .6; filter: drop-shadow(0 0 1px rgba(255, 150, 40, .9)); }
.dv-needle circle { fill: var(--amber); }
.dv-scale line { stroke: var(--beige-dim); stroke-width: .3; }
.dv-scale line.major { stroke: var(--beige); stroke-width: .4; }
.dv-scale text { fill: var(--beige-dim); font: 2.7px var(--mono); }
.dv-scale .zone { fill: none; stroke: var(--amber); stroke-width: 1.1; opacity: .55; }
.dv-scale .zone-text { fill: var(--amber); }
.dv-scale .track { fill: none; stroke: var(--beige-dim); stroke-width: .35; }
.dv-scale line.mark { stroke: var(--beige); stroke-width: .5; }
.dv-scale .mark-text { fill: var(--beige); font: 3.4px var(--wide); }
.dv-scale line.stop { stroke: #e2712b; stroke-width: .6; }
.dv-scale .stop-text { fill: #e2712b; font-size: 2.3px; }
.dv-label { fill: var(--beige-dim); font: 2.5px var(--mono); letter-spacing: .4px; }

.thermo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.thermo.is-on { color: var(--beige); }

.slider { display: block; margin: 26px 0 16px; }
.slider input {
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  height: 34px;
  margin: 8px 0 0;
  background:
    repeating-linear-gradient(to right, rgba(214, 205, 187, .3) 0 1px, transparent 1px calc((100% - 17px) / 18)) 8px 0 / calc(100% - 16px) 6px no-repeat,
    transparent;
  cursor: pointer;
}
.slider input::-webkit-slider-runnable-track { height: 4px; border: 1px solid #3c3833; border-radius: 1px; background: #24211e; }
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 28px;
  margin-top: -13px;
  border: 1px solid #0b0a09;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 7px, #3b362f 7px 9px, transparent 9px), linear-gradient(#e4dccd, #b9b09f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.slider input::-moz-range-track { height: 4px; border: 1px solid #3c3833; border-radius: 1px; background: #24211e; }
.slider input::-moz-range-thumb {
  width: 14px;
  height: 26px;
  border: 1px solid #0b0a09;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 6px, #3b362f 6px 8px, transparent 8px), linear-gradient(#e4dccd, #b9b09f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.slider input:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }

.buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.key {
  flex: 1 1 140px;
  padding: 15px 16px 14px;
  border: 1px solid #45403a;
  border-radius: 3px;
  background: linear-gradient(#2c2925, #1d1b18);
  box-shadow: 0 2px 0 #050505, inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--beige);
  font: 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.key:active { translate: 0 1px; box-shadow: 0 1px 0 #050505; }
.key--on {
  border-color: #6e2c06;
  background: linear-gradient(#c75a1c, #a5440e);
  box-shadow: 0 2px 0 #3d1703, inset 0 1px 0 rgba(255, 220, 190, .25);
  color: #fbeedd;
}
.key:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; }

.vfd { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 8px; }
.vfd b {
  font: 400 clamp(64px, 8.5vw, 108px)/1 var(--wide);
  letter-spacing: -.02em;
  color: var(--amber);
  text-shadow: 0 0 2px rgba(255, 220, 170, .7), 0 0 24px rgba(255, 140, 30, .45);
}
.vfd span { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--beige); }
.vfd-sub { margin: 0; font-size: 12px; line-height: 1.6; color: var(--beige-2); }

.charge { display: grid; margin: 30px 0 0; }
.charge div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--charcoal-line);
  font-size: 12px;
}
.charge dt { color: var(--beige-dim); }
.charge dd { margin: 0; font-weight: 700; color: var(--beige); white-space: nowrap; }

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--charcoal-line);
  border-radius: 3px;
}
.switch button {
  padding: 8px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--beige-dim);
  font: 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.switch button[aria-pressed="true"] { background: #2c2925; color: var(--amber); }
.switch button:focus-visible { outline: 1px solid var(--amber); }

/* One series, one colour; the chosen bar is lit and labelled. */
.bars { display: grid; gap: 2px; }
.lbar {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 68px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--beige-dim);
  font: 11px/1 var(--mono);
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
}
.lbar__track {
  position: relative;
  height: 12px;
  background: linear-gradient(90deg, rgba(214, 205, 187, .09) 1px, transparent 1px) 0 0 / 25% 100%;
  box-shadow: inset -1px 0 0 rgba(214, 205, 187, .09);
}
.lbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 4 * 100%);
  border-radius: 0 4px 4px 0;
  background: #4f3f2a;
  transition: width .5s cubic-bezier(.3, .7, .2, 1), background .25s, box-shadow .25s;
}
.lbar > span:first-child { white-space: nowrap; }
.lbar__value { font-weight: 700; color: var(--beige); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.lbar:hover .lbar__fill { background: #6d5636; }
.lbar:hover .lbar__value, .lbar:focus-visible .lbar__value, .lbar.is-selected .lbar__value { opacity: 1; }
.lbar.is-selected { color: var(--beige); }
.lbar.is-selected .lbar__fill { background: var(--amber); box-shadow: 0 0 10px rgba(255, 150, 40, .35); }
.lbar:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

.axis {
  position: relative;
  height: 16px;
  margin: 6px 80px 0 86px;
  font-size: 10px;
  color: var(--beige-dim);
}
.axis span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.axis span:nth-child(1) { left: 0; }
.axis span:nth-child(2) { left: 25%; }
.axis span:nth-child(3) { left: 50%; }
.axis span:nth-child(4) { left: 75%; }
.axis span:nth-child(5) { left: 100%; translate: -14px 0; }

/* A printed warning label on beige. */
.warning {
  --cut: 10px;
  padding: 20px 22px;
  background: linear-gradient(#e0d8c8, #cfc6b4);
  color: #17140f;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.warning__title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 10px;
  font: 700 12px/1.45 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.warning__title::before {
  content: '!';
  flex: none;
  display: grid;
  place-items: end center;
  width: 20px;
  height: 18px;
  padding-bottom: 1px;
  background: #17140f;
  color: #e0d8c8;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  font-size: 10px;
  line-height: 1;
}
.warning p:last-child { margin: 0; font-size: 12px; line-height: 1.65; }

/* ---------- Lightbox ---------- */

.lightbox {
  max-width: 96vw;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(5, 5, 4, .92); }
.lightbox form { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.lightbox__close {
  padding: 7px 12px;
  border: 1px solid var(--charcoal-line);
  border-radius: 2px;
  background: #0b0a09;
  color: var(--beige);
  font: 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.lightbox img { display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto; }

/* ---------- Appear on scroll (only with JavaScript) ---------- */

.js .reveal { opacity: 0; translate: 0 18px; transition: opacity .8s ease-out, translate .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; transition: none; }
}