/* SCOOP-651 — the page that drains.
   One rule runs this sheet: COLOUR IS WHAT THE READER COULD NOT READ. The
   field is the defect. It owns the whole screen at the top, and bone takes it
   back as each repair lands. Every numeral on the page is one ink from the
   first pixel to the last, because no number here was ever wrong. */

.scoop-substrate.story-page {
  --scorch: #B02D06;
  --scorch-deep: #7E1F03;
  --ember: #FF6A1A;
  --bone: #F7F2EA;
  --ink: #16120E;
  --muted: #5E564B;
  --hair: rgba(22, 18, 14, .18);
  --hair-bone: rgba(247, 242, 234, .34);

  /* The repair, 0 at the first paragraph and 1 at the close. The page's script
     writes it from scroll position; this value is the static tier. */
  --repair: 0;

  --measure: min(720px, 100% - 24px);
  --body-measure: min(600px, 100% - 24px);

  --display: Futura, "Jost", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --serif: Baskerville, "Hoefler Text", "Times New Roman", Georgia, serif;

  --scoop-masthead-font-family: var(--display);
  --scoop-masthead-colour: var(--bone);
  --scoop-masthead-scale: .95;

  position: relative;
  z-index: 0;
  background: var(--scorch-deep);
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;

  /* A word the reader's text size makes wider than its box breaks inside the
     box, so intrinsic widths hold at ordinary text size. */
  overflow-wrap: break-word;
}

/* ---- the field: the dashboard nobody could read ---- */

.field {
  position: fixed;
  z-index: -3;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(148deg, var(--scorch) 0%, var(--scorch-deep) 100%);
}

/* Ten tiles, drawn in the ground. Six of them carry the hatch of a tile that
   never painted, and the hatch clears as the repair lands. */
.field__grid {
  position: absolute;
  inset: -2%;
  opacity: calc(.42 - .26 * var(--repair));
  background-image:
    linear-gradient(to right, var(--hair-bone) 0 2px, transparent 2px 100%),
    linear-gradient(to bottom, var(--hair-bone) 0 2px, transparent 2px 100%);
  background-size: 26vw 21vh, 26vw 21vh;
}

/* The skeleton sweep of a tile still loading. It darkens the field, so no text
   on the field ever loses contrast when it passes. */
.field__scan {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 60%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(58, 12, 0, .5) 46%, transparent);
  animation: sweep 9s linear infinite;
  opacity: calc(1 - .8 * var(--repair));
  will-change: transform;
}

@keyframes sweep {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(280%, 0, 0); }
}

/* The round the reader is standing in, drawn into the field. */
.field__round {
  position: absolute;
  right: max(1.2rem, env(safe-area-inset-right));
  bottom: max(.4rem, env(safe-area-inset-bottom));
  margin: 0;
  color: var(--bone);
  opacity: .13;
  font-family: var(--display);
  font-size: clamp(9rem, 30vh, 24rem);
  font-weight: 700;
  line-height: .78;
}

/* ---- the well: bone takes the field back ---- */

.well { position: relative; }

.well::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  /* The band never stands narrower than the frame, so a rig or a plate at
     the frame measure keeps its ground even in the static tier. */
  width: max(var(--measure), calc(660px + (100% - 660px) * var(--repair)));
  max-width: 100%;
  transform: translateX(-50%);
  background: var(--bone);
}

@media (max-width: 751px) {
  .well::before { width: calc(100% - 12px + 12px * var(--repair)); }
}

/* ---- the masthead the service owns ---- */

.masthead-well {
  position: relative;
  z-index: 1;
  width: var(--measure);
  margin-inline: auto;
}

.story-page .masthead-well .scoop-site-masthead,
.story-page .masthead-well .scoop-site-about { width: 100% !important; }

/* ---- the hero, on the field ---- */

.hero {
  width: var(--measure);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 30px) 0 clamp(26px, 5vw, 48px);
  color: var(--bone);
}

.hero__kicker {
  margin: 0 0 clamp(14px, 3vw, 26px);
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.scoop-substrate.story-page .hero h1 {
  margin: 0;
  color: var(--bone);
  font-family: var(--display);
  font-size: clamp(2.2rem, 7.4vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-wrap: balance;
}

.hero__legend {
  display: flex;
  margin: clamp(20px, 4vw, 34px) 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: .6rem 2.2rem;
  list-style: none;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero__legend b {
  display: block;
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.1;
}

/* ---- the poster and the cleared plates ---- */

.poster,
.plate {
  width: var(--measure);
  margin: 0 auto clamp(22px, 4vw, 38px);
}

.plate {
  width: var(--body-measure);
  margin-block: clamp(26px, 5vw, 46px);
}

.poster img,
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair);
}

.poster img { border-color: var(--hair-bone); }

.poster figcaption,
.plate figcaption {
  display: flex;
  padding-top: .55rem;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .04em;
  line-height: 1.5;
}

.poster figcaption { color: var(--bone); }
.plate figcaption { color: var(--muted); }

.plate__credit { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

/* The dashboard is one long page. Cap its height so the reader sees the whole
   of it at once, which is what the caption is about. */
.plate--dash img {
  width: auto;
  max-width: 100%;
  max-height: min(78vh, 900px);
  margin-inline: auto;
}

.plate--tile img { background: #fff; }

/* ---- byline and dateline, in the article column ---- */

.scoop-substrate.story-page .story-page__byline,
.scoop-substrate.story-page .story-page__dateline {
  width: var(--body-measure);
  margin: 0 auto;
  color: var(--muted);
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.scoop-substrate.story-page .story-page__byline {
  padding-top: clamp(22px, 4vw, 40px);
  font-weight: 700;
}

.scoop-substrate.story-page .story-page__byline a { color: var(--ink); }

.scoop-substrate.story-page .story-page__dateline {
  padding-bottom: clamp(14px, 3vw, 24px);
}

.scoop-substrate.story-page .story-page__dateline [data-scoop="reader-live"] { flex-wrap: wrap; }
.scoop-substrate.story-page .story-page__dateline [data-scoop="reader-label"] { white-space: normal; }

/* ---- the body: one size, first paragraph to last ---- */

.prose {
  width: var(--body-measure);
  margin-inline: auto;
}

.prose p {
  margin: 0 0 1.35rem;
  font-size: 19px;
  line-height: 1.7;
}

.prose a { color: var(--scorch); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.prose .mark {
  margin: clamp(34px, 6vw, 58px) 0 1.1rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.16;
}

/* The rejections are the spine of the second half. Each one takes the defect
   colour, because each one is a thing the reader could not read. */
.sent {
  color: var(--scorch);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .01em;
}

.signoff {
  margin-top: clamp(24px, 4vw, 40px);
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .04em;
}

.seat:empty { display: none; }

/* Without the seating script the shipped block stands where it is authored.
   It takes the body measure there, so a rig or a plate inside it steps out to
   the frame by the same 60px and the page keeps one width. */
[data-shipped] {
  width: var(--body-measure);
  margin-inline: auto;
}

/* ---- the rigs ---- */

.rig {
  margin: clamp(34px, 6vw, 62px) 0;
  padding: clamp(18px, 3.4vw, 30px) 0 clamp(20px, 3.6vw, 32px);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hair);
}

.rig__no,
.rig__title,
.rig__lede,
.rig__out,
.rig__reads,
.rig__acts,
.gate,
.door,
.chart {
  margin-inline: auto;
}

.rig__no {
  margin: 0 0 .5rem;
  color: var(--scorch);
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rig__title {
  margin: 0 0 .7rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.14;
}

.rig__lede {
  margin: 0 0 1.3rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.rig__reads {
  display: grid;
  margin: 1.3rem 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem 1.4rem;
  list-style: none;
}

.read {
  display: grid;
  min-width: 0;
  padding-top: .5rem;
  border-top: 1px solid var(--hair);
  align-content: start;
}

.read__label {
  min-width: 0;
  color: var(--muted);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.read__value {
  min-width: 0;
  padding-top: .18rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.read__unit {
  color: var(--muted);
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rig__acts {
  display: flex;
  margin-top: 1.2rem;
  flex-wrap: wrap;
  gap: .6rem;
}

.act {
  min-height: 44px;
  padding: .5rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.act:hover { background: var(--ink); color: var(--bone); }
.act:focus-visible { outline: 3px solid var(--scorch); outline-offset: 3px; }

.act[aria-pressed="true"] {
  border-color: var(--scorch);
  background: var(--scorch);
  color: var(--bone);
}

.act--small { min-height: 44px; padding: .4rem .8rem; font-size: .74rem; }

.rig__out {
  margin: 1.1rem 0 0;
  min-height: 4.6em;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- rig 01: sixteen requests, one file ---- */

.door {
  display: grid;
  gap: .9rem;
  padding: 1rem 0 0;
}

.door__queue {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.q {
  width: 26px;
  height: 26px;
  border: 2px solid var(--scorch);
  background: transparent;
  transition: background-color 160ms linear, border-color 160ms linear, opacity 160ms linear;
}

.q[data-state="through"] { border-color: var(--ink); background: var(--ink); }
.q[data-state="second"] { border-style: dashed; }

.door__gate {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.door__gateword {
  padding: .3rem .7rem;
  border: 2px solid var(--ink);
  color: var(--ink);
}

.door__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.door__slots i {
  display: block;
  width: 10px;
  height: 22px;
  background: var(--ember);
}

/* ---- rig 02: the tile that took four rounds ---- */

.rig--chart { border-bottom-width: 2px; border-bottom-color: var(--ink); }

.chart {
  padding: 1rem 0 0;
}

.chart__stamp {
  display: flex;
  margin: 0 0 .7rem;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chart__stamp b { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }

.chart[data-state="4"] .chart__stamp span { color: var(--ink); }
.chart__stamp span { color: var(--scorch); }

.chart__plot { background: #fff; border: 1px solid var(--hair); }

.plot { display: block; width: 100%; height: auto; }
.plot__grid line { stroke: rgba(22, 18, 14, .1); stroke-width: 1; }
.plot__frame line { stroke: rgba(22, 18, 14, .45); stroke-width: 1.5; }
.plot__line { fill: none; stroke-width: 3; }
.plot__line--med { stroke: #17805F; }
.plot__line--p90 { stroke: #C05F12; }
.plot__dot--med { fill: #17805F; }
.plot__dot--p90 { fill: #C05F12; }
/* The dates sit under the plot as text, not as shapes inside it. The row a date
   stands in holds every second tick, so each date owns two tick widths and is
   centred on its own tick. A date can never reach its neighbour; at large text
   sizes it wraps inside its own slot and the row grows to fit. */
.plot__dates {
  margin: .2rem 0 .4rem;
  color: var(--muted);
  font-family: var(--display);
  font-size: .78rem;
  line-height: 1.25;
}
.plot__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 86.4696%;
  text-align: center;
  word-break: normal;
  overflow-wrap: normal;
}
.plot__row--high { margin-left: -0.2%; }
.plot__row--low { margin-left: 10.6087%; }

.plot__callout line { stroke: var(--scorch); stroke-width: 2; }
.plot__callout text { fill: var(--scorch); font-family: var(--display); font-size: 19px; font-weight: 700; }
.plot__empty { fill: var(--ember); fill-opacity: .16; }
.plot__emptytext {
  fill: var(--scorch);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  text-anchor: end;
}

.plot__series { transition: transform 220ms ease; }

/* State 1: the first week is not drawn at all. */
.chart[data-state="1"] [data-first] { display: none; }

/* The value the record names is called out only where the point is drawn whole.
   On the edge, the point is half off the plot, so no figure is shown at all. */
.chart[data-state="1"] .plot__callout,
.chart[data-state="2"] .plot__callout { display: none; }
.chart[data-state="1"] .plot__empty,
.chart[data-state="1"] .plot__emptytext { display: none; }

/* State 2: the point is back, shoved onto the plot edge, and a third of the
   plot stands empty on the right. */
.chart[data-state="2"] .plot__series { transform: translateX(-51px); }

/* States 3 and 4: every position correct. */
.chart[data-state="3"] .plot__empty,
.chart[data-state="3"] .plot__emptytext,
.chart[data-state="4"] .plot__empty,
.chart[data-state="4"] .plot__emptytext { display: none; }

.chart__legend {
  display: flex;
  margin: .7rem 0 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.chart__key { display: inline-block; width: 13px; height: 13px; border-radius: 50%; }
.chart__key--med { background: #17805F; }
.chart__key--p90 { background: #C05F12; margin-left: .8rem; }
.chart[data-state="4"] .chart__legend { color: var(--ink); }
.chart__legend { color: var(--scorch); }

/* ---- rig 03: what the gate caught ---- */

.gate { margin: 1rem 0 0; padding: 0; list-style: none; }

.gate__row {
  display: grid;
  padding: .9rem 0;
  border-top: 1px solid var(--hair);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem .9rem;
  align-items: start;
}

.gate__round {
  margin: 0;
  grid-column: 1;
  color: var(--muted);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gate__what { margin: 0; grid-column: 1; grid-row: 2; font-size: 1rem; line-height: 1.55; }

.gate__state {
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  color: var(--ink);
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gate__row[data-passed] .gate__state { color: var(--scorch); }

.gate__row .act { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }

.gate__ship {
  display: none;
  margin: .3rem 0 0;
  grid-column: 1 / -1;
  grid-row: 3;
  padding: .55rem .7rem;
  border-left: 4px solid var(--ember);
  background: rgba(255, 106, 26, .1);
  color: var(--scorch);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
}

.gate__row[data-passed] .gate__ship { display: block; }

/* ---- the close: the ground the page stands on ---- */

.close {
  width: var(--body-measure);
  margin: clamp(40px, 7vw, 76px) auto 0;
  padding-top: clamp(20px, 4vw, 34px);
  border-top: 2px solid var(--ink);
}

.close__label {
  margin: 0 0 .5rem;
  color: var(--scorch);
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.close__title {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
}

/* The floor: one slab, one seam, and the ground under it. */
.floor { display: grid; margin: 0 0 1.3rem; }

.floor__slab {
  height: clamp(56px, 11vw, 88px);
  border: 2px solid var(--ink);
  border-bottom: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--hair) 46px 47px),
    var(--bone);
}

.floor__seam { height: 8px; background: var(--ember); }

.floor__under {
  height: clamp(30px, 6vw, 48px);
  background:
    repeating-linear-gradient(38deg, rgba(247, 242, 234, .22) 0 4px, transparent 4px 14px),
    linear-gradient(180deg, var(--scorch), var(--scorch-deep));
}

.close__reads {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: .9rem 1.4rem;
  list-style: none;
}

.close__gloss {
  margin: 1.3rem 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- closing furniture: aligned with the article measure ---- */

[data-scoop="closing"] {
  width: min(320px, 100%);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 54px) 0 clamp(50px, 7vw, 74px);
  color: var(--ink);
}

/* The assembly is 320 narrow and the article measure wide, so the site's own
   compensating pull is not wanted here. */
.scoop-substrate.story-page [data-scoop="closing"] > .reaction-assembly { margin-left: 0; }

.story-page [data-scoop="closing"] .base-matter,
.story-page [data-scoop="closing"] > p { color: var(--muted); line-height: 1.5; }

.scoop-substrate.story-page [data-scoop="closing"] .base-matter,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a,
.scoop-substrate.story-page [data-scoop="closing"] nav a,
.scoop-substrate.story-page [data-scoop="closing"] > a {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scoop-substrate.story-page [data-scoop="closing"] .base-matter a,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:visited,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:hover,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:focus-visible,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:active { color: var(--muted); }

.scoop-substrate.story-page [data-scoop="closing"] nav a { color: var(--ink); }

/* ---- the running commentary a screen reader hears ---- */

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

/* ---- wide ---- */

@media (min-width: 752px) {
  [data-scoop="closing"] { width: min(720px, 100% - 24px); }

  /* Above the fold-down both measures are fixed, so a rig seated in the body
     column steps out by the same 80px each side to reach the frame. */
  .rig,
  .plate { margin-inline: -60px; }

  .plate { width: auto; }

  /* The tile rig is the story's staged moment: it owns the page width. */
  .rig--chart {
    width: 100vw;
    background: var(--bone);
    margin-inline: calc(50% - 50vw);
    padding-inline: max(24px, calc(50vw - 600px));
  }
}

/* ---- narrow ---- */

@media (max-width: 751px) {
  /* The column under 752px is 320px, the width of the fixed reaction
     assembly, so the article and the closing furniture stand on one measure. */
  .scoop-substrate.story-page {
    --measure: min(320px, 100% - 16px);
    --body-measure: min(320px, 100% - 16px);
  }

  .rig { padding-inline: 0; }

  /* The tile is a wide, short strip in life. It keeps that shape here and
     takes the whole screen, and its own text grows so it reads at arm's
     length. Sizes are in the plot's own units, which scale with it. */
  .rig--chart {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 12px;
    background: var(--bone);
  }

  .plot__dates { font-size: .62rem; }
  .plot__callout text { font-size: 31px; }
  .plot__callout line { stroke-width: 3; }
  .plot__emptytext { font-size: 31px; }
  .plot__line { stroke-width: 5; }
  .plot__dot { r: 9; }
  .plate { width: var(--body-measure); margin-inline: auto; }
  .rig__out { min-height: 7.4em; }
  .gate__row { grid-template-columns: minmax(0, 1fr); }
  .gate__state { grid-column: 1; grid-row: auto; }
  .gate__row .act { grid-column: 1; grid-row: auto; justify-self: start; }
  .hero__legend b { font-size: 1.75rem; }
}

@media (max-width: 359px) {
  .rig__reads,
  .close__reads { grid-template-columns: minmax(0, 1fr); }
  .q { width: 22px; height: 22px; }
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .field__scan { animation: none; transform: translate3d(140%, 0, 0); }
  .plot__series,
  .q { transition: none; }
}

/* ---- forced colours: every pressed state keeps a border and a word ---- */

@media (forced-colors: active) {
  .act[aria-pressed="true"] { border-color: Highlight; }
  .q[data-state="through"] { background: Highlight; border-color: Highlight; }
  .gate__ship { border-left-color: Highlight; }
  .floor__seam { background: Highlight; }
  .door__slots i { background: Highlight; }
}