/* ==========================================================================
   The Shot List / 2001: A Space Odyssey (1968)
   Design system: "black glass set into white light"
   The reading surface is a frosty white wall with faint panel seams, lit from
   within like the ship's interiors. Every picture sits behind black glass set
   into that wall, the way Discovery's readouts sit in its consoles: a bezel,
   a status strip, frame ticks. Chapter openers cut outside to full-width
   black bands where the still hangs on a curved Cinerama screen. Everything
   is silver greys; the single colour is HAL red, and it only ever appears as
   light (a lamp, a glow, a marker), never as a fill. One theme, no dark mode.
   Type: Jost (Futura-like display), Michroma (nameplates), IBM Plex Serif
   (body) and B612 Mono (cockpit readouts).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* white light: the lit interiors */
  --white:      #f4f5f3;
  --white-hi:   #fbfcfb;
  --panel:      #e6e8e6;
  --seam:       #d2d5d3;

  /* lunar greys */
  --lunar-1:    #c3c6c4;
  --lunar-2:    #999d9b;
  --lunar-3:    #6b6f6e;
  --lunar-4:    #3e4140;
  --lunar-5:    #262828;

  /* text on white */
  --ink:        #0d0e10;
  --ink-2:      #2a2c2f;
  --muted:      #5d6164;

  /* black glass */
  --black:      #050506;
  --velvet:     #020203;
  --glass:      #0b0c0e;
  --glass-2:    #15171a;
  --glass-edge: #2b2e32;
  --on-black:   #eef0ef;
  --on-black-muted: #9da2a5;

  /* the one accent: HAL red, a lamp and never a fill */
  --red:        #e3241b;
  --red-hi:     #ff5a4e;
  --red-ink:    #b3150f;
  --red-glow:   rgba(227, 36, 27, 0.5);
  --red-ember:  #4a0b08;

  /* medium inks */
  --lit:        #ffffff;
  --silver:     #d9dddf;
  --bloom:      rgba(255, 255, 255, 0.55);
  --star:       #ffffff;

  /* the exposure wedge, nine steps */
  --wedge: linear-gradient(90deg,
    #ffffff 0 11.1%, #e2e4e3 11.1% 22.2%, #c4c7c5 22.2% 33.3%,
    #a3a7a5 33.3% 44.4%, #828684 44.4% 55.5%, #626664 55.5% 66.6%,
    #434645 66.6% 77.7%, #252727 77.7% 88.8%, #050506 88.8% 100%);

  /* film grain for black fields (static) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='68' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* faint panel seams for the white reading surface */
  --seams: linear-gradient(rgba(13,14,16,.032) 1px, transparent 1px),
           linear-gradient(90deg, rgba(13,14,16,.032) 1px, transparent 1px);

  /* type */
  --f-display: "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --f-plate:   "Michroma", "Eurostile", "Microgramma", "Arial Black", sans-serif;
  --f-body:    "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-mono:    "B612 Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-body: clamp(17.5px, 0.55vw + 15px, 20px);
  --measure: 66ch;
  --wide: 1120px;
  --sheet: 1320px;
  --gutter: 16px;
  --mast-h: 52px;
  --radius-screen: 12px;

  /* the bezel: a screen set into a lit panel */
  --bezel: 0 0 0 6px var(--white-hi), 0 0 0 7px var(--seam), 0 18px 40px -24px rgba(5, 5, 6, 0.45);
  --fig-gap: clamp(56px, 7vw, 88px);
  --plate-gap: clamp(64px, 8.5vw, 112px);
  --chapter-gap: clamp(80px, 11vw, 150px);

  color-scheme: light;
}
@media (min-width: 720px) {
  :root { --gutter: clamp(24px, 4vw, 48px); --mast-h: 56px; }
}
@media (max-width: 599px) {
  :root { --radius-screen: 8px; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--black);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background-color: var(--white);
  background-image: var(--seams);
  background-size: 160px 160px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

::selection { background: rgba(13, 14, 16, 0.12); }

img, canvas, svg { display: block; max-width: 100%; }
figure { margin: 0; }
cite { font-style: italic; }
strong { font-weight: 600; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lunar-2);
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--red-ink); text-decoration-color: var(--red-ink); }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--black);
  color: var(--on-black);
  font: 700 12px/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: calc(var(--mast-h) + 12px); }

:where(.hero, .opener, .rig, .signoff-band, .site-footer, .masthead, .art--bleed) :focus-visible { outline-color: var(--red-hi); }

/* every anchor clears the fixed masthead */
[id] { scroll-margin-top: calc(var(--mast-h) + 16px); }

/* ---------- Masthead (black glass, fixed) ---------- */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--mast-h);
  background: var(--black);
  border-bottom: 1px solid var(--glass-edge);
  color: var(--on-black);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .masthead {
    background: rgba(5, 5, 6, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.mast-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--on-black);
  text-decoration: none;
}
.brand:hover { color: var(--lit); }
.brand-name {
  font: 400 11.5px/1 var(--f-plate);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the brand mark: HAL's eye at 14px */
.brand-eye {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 0.9px, rgba(255, 210, 200, 0.9) 1.3px, var(--red) 2.2px, #a3130d 3.6px, #2a0604 5px, #08080a 5.6px);
  box-shadow: 0 0 0 1px var(--lunar-3), 0 0 7px 1px rgba(227, 36, 27, 0.45);
}
.brand-eye::after {
  content: "";
  position: absolute;
  inset: 2px 5px 7px 2.5px;
  border-radius: 50% 50% 40% 50%;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  transform: rotate(-20deg);
}
.mast-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-black-muted);
  white-space: nowrap;
}
.mm-clock { display: none; color: var(--on-black-muted); }
.mm-clock b { font-weight: 700; color: var(--on-black); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .mm-clock { display: inline; padding-left: 18px; border-left: 1px solid var(--glass-edge); }
}
@media (max-width: 479px) {
  .mm-kicker { display: none; }
}

/* Reading progress: a 2px line on the masthead's bottom edge, a red lamp at its head */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--glass-2);
  pointer-events: none;
}
.progress-fill {
  position: absolute;
  inset: 0;
  background: var(--on-black);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.progress-lamp {
  position: absolute;
  top: -1px;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 4px 1px var(--red-glow), 0 0 10px 2px rgba(227, 36, 27, 0.25);
  transform: translateX(0);
  opacity: 0;
}
.progress.is-on .progress-lamp { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1200px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--black);
  color: var(--on-black);
}
.hero::after {
  /* static grain until the hero art draws its own */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.035;
  pointer-events: none;
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-block {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 14px rgba(5, 5, 6, 0.75), 0 0 2px rgba(5, 5, 6, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 7vh, 88px);
  text-align: center;
}
.hero-kicker {
  margin: 0 0 18px;
  font: 700 12px/1.3 var(--f-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-black-muted);
}
.hero-kicker .sep { color: var(--lunar-3); }
/* the kicker sits on the bright band of ground just under the horizon */
.hero-kicker { color: var(--on-black); text-shadow: 0 0 3px rgba(5, 5, 6, 0.95), 0 1px 10px rgba(5, 5, 6, 0.9), 0 0 22px rgba(5, 5, 6, 0.7); }
.hero-title {
  margin: 0;
  font-weight: 400;
  color: var(--on-black);
}
.ht-year {
  display: block;
  margin-right: -0.07em;
  font: 300 clamp(76px, 15vw, 176px)/0.86 var(--f-display);
  letter-spacing: 0.07em;
  font-variant-numeric: lining-nums;
}
.ht-name {
  display: block;
  margin-top: 14px;
  margin-right: -0.58em;
  font: 400 clamp(14px, 2vw, 24px)/1.2 var(--f-display);
  letter-spacing: 0.58em;
  text-transform: uppercase;
}
.hero-rule {
  position: relative;
  display: block;
  width: 64px;
  height: 1px;
  margin: 24px auto 22px;
  background: rgba(255, 255, 255, 0.3);
}
.hero-rule i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 5px 1px var(--red-glow);
}
.hero-dek {
  max-width: 40ch;
  margin: 0 auto;
  font: 400 clamp(17px, 1.5vw, 21px)/1.5 var(--f-body);
  color: rgba(238, 240, 239, 0.86);
  text-wrap: balance;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 22px 0 0;
  font: 400 11.5px/1.4 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-black-muted);
}
@media (max-height: 759px) and (min-width: 720px) {
  .ht-year { font-size: clamp(64px, 17vh, 132px); }
  .hero-dek { font-size: 17px; max-width: 52ch; }
  .hero-kicker { margin-bottom: 12px; }
  .hero-rule { margin: 16px auto 14px; }
  .hero-meta { margin-top: 14px; }
}

/* ---------- The flow grid ---------- */
.entry { overflow-x: clip; }
.flow,
.opener,
.ch-head,
.art--bleed,
.signoff-band {
  --wide-extra: calc((var(--wide) - var(--measure)) / 2);
  --flow-cols:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--wide-extra))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter))
    [text-end] minmax(0, var(--wide-extra))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.flow {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-cols);
}
.flow > * { grid-column: text; min-width: 0; }
.flow > * + * { margin-top: 1.25em; }

.flow > p {
  margin-bottom: 0;
  text-wrap: pretty;
  hanging-punctuation: first;
}
.flow > p:first-child { margin-top: 0; }
@media (max-width: 559px) {
  .flow > p { hyphens: auto; -webkit-hyphens: auto; }
}

.flow > :is(figure, aside, .divider) { margin-top: var(--fig-gap); }
.flow > :is(figure, aside, .divider) + * { margin-top: var(--fig-gap); }
.flow > :is(.art, .rig) { margin-top: var(--plate-gap); }
.flow > :is(.art, .rig) + * { margin-top: var(--plate-gap); }
.flow > .pull { margin-top: clamp(40px, 5vw, 64px); }
.flow > .pull + * { margin-top: clamp(40px, 5vw, 64px); }
/* a still that is not on the page leaves no gap */
html:not(.show-placeholders) .flow > .is-missing { display: none; }
html:not(.show-placeholders) .flow > .is-missing + p { margin-top: 1.25em; }
html:not(.show-placeholders) .flow > .is-missing + :is(figure, aside) { margin-top: var(--fig-gap); }

.chapter--intro { padding-top: clamp(64px, 9vw, 120px); }
.chapter + .chapter { margin-top: var(--chapter-gap); }
.chapter:last-of-type { padding-bottom: 0; }

/* ---------- Drop cap: a black slab with the letter lit on it ---------- */
p.dropcap::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  padding: 0.1em 0.16em 0.06em;
  font: 500 4.3em/0.86 var(--f-display);
  color: var(--on-black);
  background: var(--black);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
}

/* ---------- Chapter openers: cut outside ---------- */
.opener {
  grid-column: full;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--flow-cols);
  padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 6vw, 88px);
  overflow: hidden;
  background-color: var(--black);
  color: var(--on-black);
}
.opener::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.035;
  pointer-events: none;
}
.op-stars {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}
.op-top {
  grid-column: wide;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "no titles clock";
  align-items: end;
  column-gap: clamp(18px, 3vw, 44px);
}
.op-no {
  grid-area: no;
  font: 200 clamp(72px, 12vw, 168px)/0.8 var(--f-display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  color: rgba(238, 240, 239, 0.92);
}
.op-titles {
  grid-area: titles;
  min-width: 0;
  padding-bottom: 0.2em;
}
.ch-title {
  margin: 0;
  font: 500 clamp(26px, 3.6vw, 42px)/1.12 var(--f-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: balance;
}
.opener .ch-title { color: var(--on-black); margin-right: -0.16em; }
.op-slate {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.op-slate li {
  padding: 5px 8px;
  border: 1px solid var(--glass-edge);
  border-radius: 2px;
  background: rgba(21, 23, 26, 0.6);
  font: 400 11px/1.2 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-black-muted);
}
.op-clock {
  grid-area: clock;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  padding-bottom: 0.3em;
  text-align: right;
}
.op-clock-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 10.5px/1 var(--f-plate);
  letter-spacing: 0.2em;
  color: var(--on-black-muted);
}
.op-clock-k::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lunar-4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.op-clock-v {
  font: 700 clamp(20px, 2.2vw, 28px)/1 var(--f-mono);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--on-black);
}
@media (max-width: 599px) {
  .op-top {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "no clock" "titles titles";
    row-gap: 18px;
    align-items: end;
  }
  .op-clock { align-self: end; }
}

.op-still {
  grid-column: full;
  justify-self: center;
  position: relative;
  width: min(100%, 1280px);
  margin-top: clamp(44px, 6vw, 76px);
}
@media (min-width: 720px) {
  .op-still { width: min(100% - 2 * var(--gutter), 1280px); }
}
.op-screen { position: relative; }
.op-arcs {
  position: absolute;
  left: -3%;
  width: 106%;
  max-width: none;
  pointer-events: none;
  overflow: visible;
}
.opener .op-still > figcaption {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: clamp(30px, 2.2vw + 22px, 64px) auto 0;
  padding: 0 var(--gutter);
  font: 400 15.5px/1.5 var(--f-body);
  color: var(--on-black-muted);
}
.opener .cap-tag {
  background: var(--glass-2);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.opener + * { margin-top: clamp(56px, 7vw, 96px) !important; }
html:not(.show-placeholders) .op-still.is-missing { display: none; }

/* ---------- Chapter heads without an opener ---------- */
.flow > .ch-head {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--flow-cols);
}
.ch-strip {
  grid-column: wide;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 26px;
  border-bottom: 1px solid var(--seam);
}
.ch-slab {
  align-self: flex-end;
  width: 10px;
  height: 26px;
  margin-bottom: -1px;
  background: var(--black);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
}
.ch-no {
  font: 400 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--muted);
}
.ch-wedge {
  width: 54px;
  height: 6px;
  border: 1px solid var(--seam);
  background: var(--wedge);
}
.ch-clock {
  margin-left: auto;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.ch-head .ch-title {
  grid-column: text;
  margin-top: 18px;
  color: var(--ink);
}
.ch-head + * { margin-top: 1.4em; }

/* ---------- Sidenotes ---------- */
.sn { white-space: normal; }
.sn-ref {
  position: relative;
  top: -0.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: 0 0.08em 0 0.16em;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--glass);
  color: var(--on-black);
  font: 700 10px/1 var(--f-mono);
  vertical-align: baseline;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.sn-ref::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 4px 1px var(--red-glow);
  opacity: 0;
  transition: opacity 160ms ease;
}
.sn-ref::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
:root:not(.sn-margin) .sn-ref[aria-expanded="true"]::before,
.sn.is-hot .sn-ref::before { opacity: 1; }
@media (hover: hover) {
  .sn-ref:hover::before { opacity: 1; }
}
.sn-note {
  display: none;
  font: 400 14.5px/1.5 var(--f-body);
  color: var(--muted);
  text-wrap: pretty;
  hyphens: manual;
}
.sn-num {
  margin-right: 0.7em;
  font: 700 11px/1 var(--f-mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
/* inline (narrow): tap to open a block under the line */
.no-js .sn-note,
.sn.is-open .sn-note {
  display: block;
  margin: 0.8em 0 0.9em;
  padding: 10px 14px;
  border-left: 2px solid var(--black);
  background: var(--white-hi);
  color: var(--ink-2);
}
/* margin rail (1200px and up), placed by page.js */
.sn-margin .sn-note {
  display: block;
  position: absolute;
  top: 0;
  max-width: 230px;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--seam);
  background: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.sn-margin .sn.sn-inline .sn-note {
  position: static;
  max-width: none;
  margin: 0.8em 0 0.9em;
  padding: 10px 14px;
  border-left: 2px solid var(--black);
  background: var(--white-hi);
  color: var(--ink-2);
}
.sn-margin .sn.is-hot .sn-note { color: var(--ink); border-left-color: var(--ink); }

/* ---------- Captions ---------- */
figcaption {
  font: 400 15.5px/1.5 var(--f-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-width: 599px) {
  figcaption, .op-still > figcaption { font-size: 14.5px; }
}
.cap-tag {
  display: inline-block;
  margin-right: 0.45em;
  padding: 3px 6px;
  border-radius: 2px;
  background: var(--glass);
  color: var(--on-black);
  font: 700 10.5px/1.15 var(--f-mono);
  letter-spacing: 0.08em;
  vertical-align: 0.12em;
}
.still > figcaption,
.art > figcaption,
.rig > figcaption {
  max-width: 74ch;
  margin-top: 22px;
}
.pair > figcaption,
.cut > figcaption {
  display: grid;
  gap: 10px;
  max-width: none;
}
@media (min-width: 720px) {
  .pair > figcaption,
  .cut > figcaption { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cut > figcaption { column-gap: calc(26px + 28px); }
}

/* ---------- Stills: screens set into the wall ---------- */
.flow > .still:not(.op-still) { grid-column: wide; }
.screen-glass {
  position: relative;
  padding: 10px 10px 0;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-screen);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 18%, rgba(255, 255, 255, 0) 32%),
    var(--glass);
  box-shadow: var(--bezel);
}
@media (max-width: 599px) {
  .screen-glass { padding: 6px 6px 0; }
  .ss-ar { display: none; }
}
.screen-unit { position: relative; min-width: 0; }
.screen-img {
  position: relative;
  aspect-ratio: 2.2 / 1;
  border-radius: 4px;
  background: var(--black);
}
.screen-img > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: contain;
}
.screen-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}
.op-img,
.op-img > img,
.op-img::after { border-radius: 0; }
.op-img::after { box-shadow: none; }

/* viewfinder frame ticks, drawn by page.js on the black margin only */
.tick {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  border: 0 solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.tick--tl { top: -5px; left: -5px; border-top-width: 1px; border-left-width: 1px; }
.tick--tr { top: -5px; right: -5px; border-top-width: 1px; border-right-width: 1px; }
.tick--bl { bottom: -5px; left: -5px; border-bottom-width: 1px; border-left-width: 1px; }
.tick--br { bottom: -5px; right: -5px; border-bottom-width: 1px; border-right-width: 1px; }
@media (max-width: 599px) {
  .tick { width: 8px; height: 8px; }
  .tick--tl, .tick--tr { top: -4px; }
  .tick--bl, .tick--br { bottom: -4px; }
  .tick--tl, .tick--bl { left: -4px; }
  .tick--tr, .tick--br { right: -4px; }
}

.screen-status {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  margin-top: 3px;
  padding: 0 2px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: 0.12em;
  color: var(--on-black-muted);
  white-space: nowrap;
}
.ss-id { font-weight: 700; color: var(--on-black); }
.ss-ar { color: var(--lunar-3); letter-spacing: 0.08em; }
/* the exposure wedge as a strip of console keys */
.ss-wedge {
  flex: none;
  width: 54px;
  height: 6px;
  margin-left: auto;
  background: var(--wedge);
  box-shadow: 0 0 0 1px var(--glass-edge);
  opacity: 0.8;
}
.ss-lamp {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lunar-4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ss-lamp.lamp--hal {
  background: var(--red);
  box-shadow: 0 0 6px 1px var(--red-glow), 0 0 0 1px rgba(255, 90, 78, 0.4);
}

/* while page.js confirms the files, the picture stays undrawn (no fade) */
html.stills-probing .screen-unit:not(.is-found) > .screen-img > img { visibility: hidden; }
.screen-unit.is-missing > .screen-img > img { display: none; }

/* placeholders (draft or ?placeholders): a test card */
.ph { display: none; }
html.show-placeholders .screen-unit.is-missing > .screen-img > .ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: var(--black);
}
.ph-bars {
  position: absolute;
  inset: 0 0 34% 0;
  background: var(--wedge);
  opacity: 0.85;
}
.ph-target {
  position: absolute;
  left: 50%;
  top: 33%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)) center / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)) center / 100% 1px no-repeat;
}
.ph-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 10px 14px 12px;
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: 0.04em;
  color: var(--on-black-muted);
}
.ph-id { font-weight: 700; letter-spacing: 0.12em; color: var(--on-black); }
.ph-file { color: var(--lunar-3); }
@media (max-width: 599px) {
  .ph-scene { display: none; }
}

/* a pair: two pictures in one housing */
.pair-glass { display: grid; gap: 0; }
.pair-glass > .screen-unit + .screen-unit { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--glass-edge); }
@media (min-width: 720px) {
  .pair-glass { grid-template-columns: 1fr 1fr; }
  .pair-glass > .screen-unit:first-child { padding-right: 10px; }
  .pair-glass > .screen-unit + .screen-unit { margin-top: 0; padding-top: 0; padding-left: 10px; border-top: 0; border-left: 2px solid var(--glass-edge); }
}
html:not(.show-placeholders) .pair-glass > .screen-unit.is-missing { display: none; }
html:not(.show-placeholders) .pair-glass.has-missing { grid-template-columns: 1fr; }
html:not(.show-placeholders) .pair-glass.has-missing > .screen-unit { padding: 0; margin: 0; border: 0; }
html:not(.show-placeholders) .pair-cap.is-missing { display: none; }

/* the match cut: two screens and a splice */
.cut-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.splice {
  position: relative;
  height: 26px;
  margin: 7px 18% 7px;
  overflow: hidden;
  border: 1px solid var(--seam);
  background: var(--white-hi);
  box-shadow: inset 0 0 0 3px rgba(230, 232, 230, 0.7);
}
.splice-tape {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 1px;
  background: var(--lunar-2);
  transform: rotate(-4deg);
}
.splice-word {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0 8px;
  transform: translate(-50%, -50%);
  background: var(--white-hi);
  font: 400 10px/1 var(--f-plate);
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  color: var(--ink);
}
@media (min-width: 720px) {
  .cut-strip { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); column-gap: 14px; }
  .splice { height: auto; margin: 22px 0; }
  .splice-tape {
    left: 50%;
    right: auto;
    top: -10%;
    bottom: -10%;
    width: 1px;
    height: auto;
    transform: rotate(7deg);
  }
  .splice-word { transform: translate(-50%, -50%) rotate(90deg); padding: 0 10px; }
}
.cut-chip {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}
.cut-chip span {
  position: relative;
  padding: 7px 12px 7px 26px;
  border-radius: 3px;
  background: var(--glass);
  color: var(--on-black);
  font: 700 11px/1.2 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px var(--white-hi), 0 0 0 5px var(--seam);
}
.cut-chip span::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--lunar-3);
}
.cut > figcaption { margin-top: 26px; }
html:not(.show-placeholders) .cut.has-missing .splice,
html:not(.show-placeholders) .cut.has-missing .cut-chip { display: none; }
html:not(.show-placeholders) .cut.has-missing .cut-strip { grid-template-columns: minmax(0, 1fr); }
html:not(.show-placeholders) .cut-glass.is-missing { display: none; }
html:not(.show-placeholders) :is(.cut, .pair).has-missing > figcaption { grid-template-columns: minmax(0, 1fr); max-width: 74ch; }

/* ---------- Plates (art-a.js / art-b.js draw inside .art-canvas) ---------- */
.flow > .art { grid-column: wide; }
.art { position: relative; }
.art > .art-canvas { position: relative; }
/* until a plate is drawn: an unlit screen of the right shape */
.art > .art-canvas:empty {
  display: block;
  aspect-ratio: 1600 / 1136;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-screen);
  background-color: var(--glass);
  background-image: linear-gradient(var(--glass-2), var(--glass-2)), var(--grain);
  background-size: 100% 36px, 220px 220px;
  background-repeat: no-repeat, repeat;
  box-shadow: var(--bezel);
}

/* chemicals: full-bleed on a black band */
.flow > .art--bleed {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--flow-cols);
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
  background-color: var(--black);
  color: var(--on-black);
  isolation: isolate;
  position: relative;
}
.art--bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.035;
  pointer-events: none;
}
.art--bleed > .art-canvas { grid-column: full; }
.art--bleed > .art-canvas:empty {
  aspect-ratio: 2200 / 1000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--velvet);
}
.art--bleed > figcaption {
  grid-column: text;
  max-width: none;
  margin-top: 24px;
  color: var(--on-black-muted);
}
.art--bleed .cap-tag { background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--glass-edge); }

/* ---------- Rigs: black glass consoles ---------- */
.flow > .rig { grid-column: wide; }
.rig-box {
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-screen);
  background: var(--glass);
  color: var(--on-black);
  box-shadow: var(--bezel);
}
.rig-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--glass-edge);
  background: var(--glass-2);
}
.rig-no {
  font: 400 10.5px/1 var(--f-plate);
  letter-spacing: 0.18em;
  color: var(--on-black-muted);
  white-space: nowrap;
}
.rig-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 13px/1 var(--f-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-black);
}
.rig-lamp {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--lunar-4);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.rig.is-live .rig-lamp { background: var(--lit); box-shadow: 0 0 6px 1px var(--bloom); }
.rig.is-exposing .rig-lamp { background: var(--red); box-shadow: 0 0 6px 1px var(--red-glow); }

.rig-panes {
  display: grid;
  gap: 10px;
  padding: 10px;
}
@media (min-width: 900px) {
  .rig-panes { grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.2fr); align-items: start; }
}
.rig-pane {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 6px;
  background: var(--velvet);
}
.rig-pane--plan,
.rig-pane--machine { aspect-ratio: 16 / 10; }
.rig-pane--camera,
.rig-pane--frame { aspect-ratio: 2.2 / 1; }
.pane-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pane-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 2px;
  background: rgba(5, 5, 6, 0.72);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  font: 400 11px/1.1 var(--f-mono);
  letter-spacing: 0.12em;
  color: var(--on-black-muted);
  pointer-events: none;
}
.no-js .rig-panes,
.no-js .rig-controls,
.no-js .rig-status { display: none; }

.rig-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding: 14px;
  border-top: 1px solid var(--glass-edge);
  background: var(--panel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
  color: var(--ink);
}
.key-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kg-label {
  font: 700 10.5px/1.2 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kg-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--seam);
  border-radius: 3px;
  background: var(--white-hi);
  color: var(--ink);
  font: 700 12px/1.1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(13, 14, 16, 0.06), 0 2px 4px -2px rgba(13, 14, 16, 0.18);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.key-lamp {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lunar-1);
  box-shadow: inset 0 1px 1px rgba(13, 14, 16, 0.18);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
@media (hover: hover) {
  .key:hover { border-color: var(--lunar-2); }
}
.key:active { transform: translateY(1px); }
.key[aria-pressed="true"],
.key.is-active {
  border-color: var(--glass);
  background: var(--glass);
  color: var(--on-black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(13, 14, 16, 0.1);
}
.key[aria-pressed="true"] .key-lamp,
.key.is-active .key-lamp {
  background: var(--red);
  box-shadow: 0 0 6px 1px var(--red-glow);
}
.key:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }
.key--primary {
  border-color: var(--lunar-2);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(13, 14, 16, 0.06), 0 2px 5px -2px rgba(13, 14, 16, 0.3);
}
.key[disabled] { opacity: 0.45; cursor: default; }

.rig-status {
  min-height: calc(1.45em * 2 + 20px);
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--glass-edge);
  font: 400 12px/1.45 var(--f-mono);
  letter-spacing: 0.02em;
  color: var(--on-black-muted);
}
.rig-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lunar-3);
  vertical-align: 0.1em;
}
.rig.is-exposing .rig-status::before { background: var(--red); box-shadow: 0 0 6px 1px var(--red-glow); }

.rig-readout {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--glass-edge);
  background: var(--glass-2);
}
.readout {
  display: grid;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 12px/1.45 var(--f-mono);
  color: var(--on-black-muted);
}
@media (min-width: 720px) {
  .readout { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
}
@media (max-width: 599px) {
  .readout { font-size: 11px; }
}
.readout li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  transition: color 200ms ease;
}
.ro-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(157, 162, 165, 0.6);
  border-radius: 50%;
  font: 700 10.5px/1 var(--f-mono);
  color: var(--on-black);
}
.ro-t { padding-top: 2px; }
.readout li.is-key .ro-n {
  border-color: var(--red);
  color: var(--red-hi);
  box-shadow: 0 0 6px rgba(227, 36, 27, 0.35);
}
.readout li.is-hot { color: var(--on-black); }
.readout li.is-hot .ro-n { border-color: var(--on-black); }
.readout li.is-key.is-hot .ro-n { border-color: var(--red-hi); }

@media (max-width: 599px) {
  .rig-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .key-group { display: grid; gap: 6px; }
  .kg-keys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .key { padding: 10px 8px; font-size: 11.5px; }
  .rig-head { gap: 10px; padding: 0 12px; }
}

/* ---------- Pull quotes ---------- */
.pull {
  position: relative;
  padding-left: 30px;
}
@media (min-width: 900px) {
  .flow > .pull { margin-left: -2rem; }
}
.pull::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.2em;
  width: 6px;
  background: var(--black);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.25);
}
.pull blockquote { margin: 0; }
.pull blockquote p {
  margin: 0;
  font: 300 clamp(26px, 3.4vw, 40px)/1.24 var(--f-display);
  color: var(--ink);
  text-wrap: balance;
  hanging-punctuation: first;
}
.pull figcaption {
  margin-top: 16px;
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Dividers ---------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-block: 48px !important;
}
.divider i { width: 120px; height: 1px; background: var(--seam); }
.divider b { width: 7px; height: 16px; background: var(--black); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28); }

/* ---------- Sign-off band and footer (the page ends outside) ---------- */
.signoff-band {
  position: relative;
  isolation: isolate;
  margin-top: var(--chapter-gap);
  padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(48px, 6vw, 80px);
  background-color: var(--black);
  color: var(--on-black);
  text-align: center;
}
.signoff-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.035;
  pointer-events: none;
}
.art--signoff {
  max-width: 960px;
  margin: 0 auto;
}
.art--signoff > .art-canvas:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.art--signoff > .art-canvas:empty::before {
  content: "REZA";
  margin-right: -0.6em;
  font: 300 clamp(40px, 7vw, 76px)/1 var(--f-display);
  letter-spacing: 0.6em;
  color: var(--on-black);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}
.signoff-line {
  margin: 28px 0 0;
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-black-muted);
}

.site-footer {
  background: var(--black);
  color: var(--on-black-muted);
  border-top: 1px solid var(--glass-edge);
}
.footer-inner {
  display: grid;
  gap: 16px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
  font: 400 11.5px/1.6 var(--f-mono);
  letter-spacing: 0.04em;
}
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; }
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--on-black);
  text-decoration: none;
}
.footer-name {
  font: 400 11px/1 var(--f-plate);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.colophon { margin: 0; max-width: 72ch; }
.colophon cite { font-style: italic; }
.footer-links { display: flex; gap: 22px; margin: 0; white-space: nowrap; }
.site-footer a { color: var(--on-black); text-decoration-color: var(--lunar-3); }
.site-footer a:hover { color: var(--red-hi); text-decoration-color: var(--red-hi); }
.footer-brand:hover { color: var(--lit); }

/* ---------- Draft bar ---------- */
.draft-bar {
  position: relative;
  z-index: 40;
  margin-top: var(--mast-h);
  padding: 10px var(--gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--seam);
  font: 400 12px/1.4 var(--f-mono);
}
.draft-text { margin: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .op-stars { transform: none !important; }
}

/* ---------- Print ---------- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 11pt; }
  .masthead, .skip-link, .progress, .rig-controls, .rig-status, .op-stars, .back-top { display: none !important; }
  .hero { height: auto; min-height: 0; max-height: none; padding: 0; background: #fff; color: #000; }
  .hero::after { display: none; }
  .hero-art { position: relative; inset: auto; height: 60vh; }
  .hero-block { height: auto; padding: 24px 0; }
  .hero-title, .hero-dek, .hero-kicker, .hero-meta { color: #000; }
  .opener { background: #fff !important; color: #000; padding: 24px 0; }
  .opener::after { display: none; }
  .opener .ch-title, .op-no, .op-clock-v, .op-still > figcaption { color: #000; }
  .op-slate li { color: #000; background: none; border-color: #999; }
  .opener .op-screen { padding: 8px; background: var(--glass); border-radius: 6px; }
  .art--bleed { background: #fff !important; }
  .art--bleed > figcaption { color: #000; }
  .signoff-band, .site-footer { background: #fff !important; color: #000; }
  .site-footer a, .footer-brand { color: #000; }
  .sn-note { display: block; }
  figure, .rig { break-inside: avoid; }
  .screen-glass, .rig-box { box-shadow: none; }
  .op-arcs { display: none; }
}