/* SNAPSTORYSAVER — "INDUSTRIAL QUOTE GRAMMAR"
 * Read tokens.css first: it carries the palette, the measured contrast, and why the
 * accent splits into a fill and a text value.
 *
 * The grammar in one line: every zone is labelled with its literal quoted name,
 * wayfinding is reading, the hazard stripe runs under whatever matters, and the
 * active thing keeps its orange zip tie on. Nothing here is decorated; a stripe
 * always means the same thing wherever it appears.
 */

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

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--steel-firm) var(--base); }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--face-prose);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- browser surfaces -----------------------------------------------------
 * The parts nobody draws still belong to the design. A default blue selection or a
 * platform focus ring is the tell that a page was assembled rather than built. */
::selection { background: var(--orange); color: var(--on-orange); }
:root { accent-color: var(--orange); caret-color: var(--orange-ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--base-sunk); }
::-webkit-scrollbar-thumb { background: var(--steel-firm); border: 3px solid var(--base-sunk); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

:focus-visible {
  outline: var(--rule-heavy) solid var(--orange);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

a { color: var(--orange-ink); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; }

img { max-width: 100%; display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--orange); color: var(--on-orange);
  font-family: var(--face-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-label); padding: var(--step-2) var(--step-3);
  text-decoration: none;
}
.skip:focus { left: 0; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

/* ---- the quote grammar ----------------------------------------------------
 * Ordinary words in straight quotes, naming the obvious. Applied by class rather
 * than typed into the copy so the same string can appear unquoted in a <title>. */
.q::before { content: '"'; }
.q::after  { content: '"'; }

/* ---- label plates ---------------------------------------------------------
 * The world's utility label: LOT 247-A, ZONE A1, QTY 01. A plate always carries
 * real data. It is never an eyebrow restating the heading beneath it — a caption
 * with no value is not a plate, it is decoration wearing the plate's clothes. */
.plate {
  display: inline-grid; grid-template-rows: auto auto;
  border: var(--rule) solid var(--ink);
  background: var(--base);
  min-width: 5.5rem;
  position: relative;
}
.plate__cap {
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-plate);
  text-transform: uppercase; letter-spacing: var(--track-label);
  padding: 3px var(--step-2) 0;
  color: var(--concrete);
}
.plate__val {
  font-family: var(--face-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.05;
  letter-spacing: var(--track-display);
  padding: 0 var(--step-2) 5px;
  font-variant-numeric: tabular-nums;
}
.plate--tagged::after {
  content: ''; position: absolute; right: calc(var(--tab) * -1); top: 50%;
  transform: translateY(-50%);
  width: var(--tab); height: 60%;
  background: var(--orange);
}
.plate--hazard { border-bottom-width: 0; }
.plate--hazard::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--rule) * -1);
  height: 6px; background: var(--hazard);
}

/* ---- masthead -------------------------------------------------------------- */

.masthead { border-bottom: var(--rule) solid var(--ink); background: var(--base); }
.masthead__row {
  display: flex; align-items: stretch; gap: var(--step-3);
  justify-content: space-between; min-height: 62px;
}

.wordmark {
  display: flex; align-items: center;
  font-family: var(--face-display); font-weight: 700;
  font-size: 1.375rem; letter-spacing: var(--track-display);
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.wordmark sup {
  font-size: 0.55em; font-weight: 500; margin-left: 2px;
  font-family: var(--face-data); top: -0.7em;
}
.wordmark:hover { color: var(--orange-ink); }

/* Segmented, pipe-ruled, quoted — the board's navigation bar. The active segment
 * is a filled field, not a coloured word, so it survives greyscale. */
.nav { display: flex; align-items: stretch; flex-wrap: wrap; }
.nav::-webkit-scrollbar { display: none; }
.nav__link {
  display: flex; align-items: center; padding: 0 var(--step-3);
  border-left: var(--rule) solid var(--ink);
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-small);
  text-transform: uppercase; letter-spacing: var(--track-label);
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.nav__link:last-child { border-right: var(--rule) solid var(--ink); }
.nav__link:hover { background: var(--base-sunk); }
.nav__link:active { background: var(--steel); }
.nav__link[aria-current='page'] { background: var(--orange); color: var(--on-orange); }

/* ---- hero ------------------------------------------------------------------ */

.field { padding-block: var(--step-5) var(--step-4); position: relative; overflow: hidden; }

/* The stripe runs diagonally under whatever matters. One band, held at 45 degrees
 * at every width, never tiled across the page as texture. */
.field__stripe {
  position: absolute; inset-inline: -10%; height: 78px;
  background: var(--hazard); opacity: 0.14;
  transform: rotate(-4deg); pointer-events: none;
}
.field__stripe--top { top: 12%; }

h1, .h1 {
  font-family: var(--face-display); font-weight: 700;
  font-size: var(--size-hero); line-height: 0.92;
  letter-spacing: var(--track-display); text-transform: uppercase;
  margin: 0 0 var(--step-3); text-wrap: balance;
}
.page h1 { font-size: var(--size-h1); }

.lede {
  font-size: 1.125rem; line-height: 1.55; max-width: 46ch;
  margin: 0 0 var(--step-4); color: var(--concrete);
}
.lede strong { color: var(--ink); font-weight: 600; }

/* ---- the tool -------------------------------------------------------------- */

.tool { position: relative; }

.paste { display: flex; flex-wrap: wrap; gap: var(--step-3) calc(var(--tab) + var(--step-2)); align-items: flex-end; }

.paste__label {
  display: block;
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-plate);
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--concrete); margin-bottom: var(--step-1);
}

.paste__well { flex: 1 1 22rem; position: relative; }

.paste__input {
  width: 100%; height: 58px;
  border: var(--rule) solid var(--ink); background: var(--base);
  padding: 0 var(--step-3); color: var(--ink);
  font-family: var(--face-data); font-size: 1rem; letter-spacing: 0;
}
.paste__input::placeholder { color: var(--concrete); opacity: 1; }
.paste__input:hover { background: var(--base-sunk); }
.paste__input:focus { outline: var(--rule-heavy) solid var(--orange); outline-offset: 2px; }

/* The zip-tie tab. Present always, orange only once the control is live — the
 * board's text-input default has a grey tab and its active state an orange one. */
.paste__well::after {
  content: ''; position: absolute; right: calc(var(--tab) * -1); top: 50%;
  transform: translateY(-50%); width: var(--tab); height: 34px;
  background: var(--steel-firm);
}
.paste__well:focus-within::after { background: var(--orange); }

.strike {
  flex: 0 0 auto; height: 58px; min-width: 11rem;
  border: var(--rule) solid var(--ink); background: var(--orange);
  color: var(--on-orange); cursor: pointer;
  font-family: var(--face-display); font-weight: 700; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: var(--track-label);
  padding: 0 var(--step-4); position: relative;
}
.strike:hover { background: var(--ink); color: var(--base); }
.strike:active { background: var(--orange-deep); color: var(--on-orange); }
/* The board's active primary button takes the hazard stripe along its foot. */
.strike[data-busy='1']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: var(--hazard-fine);
  animation: crawl 900ms linear infinite;
}
.strike:disabled { cursor: not-allowed; background: var(--base-sunk); color: var(--concrete); border-color: var(--steel-firm); }

@keyframes crawl { to { background-position: 22.6px 0; } }
@media (prefers-reduced-motion: reduce) { .strike[data-busy='1']::after { animation: none; } }

.hint {
  font-family: var(--face-data); font-size: var(--size-small);
  color: var(--concrete); margin: var(--step-3) 0 0; max-width: 60ch;
}

.status { margin: var(--step-3) 0 0; font-family: var(--face-data); font-size: var(--size-small); min-height: 1.5em; }
.status:empty { margin: 0; }
/* An error is struck, not tinted: the hazard bar across its head is the mark, and it
 * is the same material a disabled control takes. A coloured border down one side would
 * be the category's own tell and would say nothing this does not. */
.status[data-tone='error'] {
  border: var(--rule) solid var(--ink);
  background: var(--base-sunk);
  padding: var(--step-2) var(--step-3);
  color: var(--ink);
}
.status[data-tone='error']::before {
  content: ''; display: block; height: 8px;
  margin: calc(var(--step-2) * -1) calc(var(--step-3) * -1) var(--step-2);
  background: var(--hazard);
}

/* ---- the record ------------------------------------------------------------ */

.record { margin-top: var(--step-5); }
.record[hidden] { display: none; }

.subject {
  display: flex; gap: var(--step-3); align-items: center;
  border: var(--rule) solid var(--ink); padding: var(--step-3);
  margin-bottom: var(--step-3);
}
.subject__pic {
  width: 72px; height: 72px; flex: 0 0 auto;
  border: var(--rule) solid var(--ink); background: var(--base-sunk);
  object-fit: cover;
}
.subject__name {
  font-family: var(--face-display); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: var(--track-display);
  margin: 0; line-height: 1.1; overflow-wrap: anywhere;
}
.subject__handle { font-family: var(--face-data); font-size: var(--size-small); color: var(--concrete); margin: 2px 0 0; }
.subject__acts { margin-left: auto; display: flex; gap: var(--step-2); flex-wrap: wrap; }

/* The fixed cross-check strip: the same counts in the same order on every profile,
 * so 735 and 0 are read with an identical sweep of the eye. */
.tally { display: flex; flex-wrap: wrap; gap: calc(var(--tab) + var(--step-2)) var(--step-3); margin-bottom: var(--step-4); }

/* ---- zones ------------------------------------------------------------------
 * One <details> per gallery. Native disclosure is not a compromise here: it is
 * keyboard-operable for free, it collapses without script, and a closed one renders
 * none of its thumbnails — which is what lets a phone survive 735 items. */
.zone { border: var(--rule) solid var(--ink); margin-bottom: var(--step-3); background: var(--base); }

.zone__head {
  display: flex; align-items: center; gap: var(--step-3);
  padding: var(--step-2) var(--step-3);
  cursor: pointer; list-style: none;
  background: var(--base);
}
.zone__head::-webkit-details-marker { display: none; }
.zone__head:hover { background: var(--base-sunk); }
.zone__head:focus-visible { outline: var(--rule-heavy) solid var(--orange); outline-offset: -5px; }

.zone__code {
  font-family: var(--face-data); font-weight: 600; font-size: var(--size-plate);
  letter-spacing: 0.06em; text-transform: uppercase;
  border: var(--rule) solid var(--ink); padding: 2px 7px; flex: 0 0 auto;
}
/* No button chrome on the header — the zone's own typed name is the control. */
.zone__name {
  font-family: var(--face-display); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: var(--track-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zone__qty {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--face-data); font-size: var(--size-small); color: var(--concrete);
  font-variant-numeric: tabular-nums;
}
.zone__chev { flex: 0 0 auto; width: 14px; height: 14px; transition: transform var(--snap); }
.zone[open] .zone__chev { transform: rotate(90deg); }
.zone[open] > .zone__head { border-bottom: var(--rule) solid var(--ink); }

.zone__body { padding: var(--step-3); }

.zone__bar {
  display: flex; gap: var(--step-2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--step-3);
}

/* ---- items ------------------------------------------------------------------ */

.grid {
  display: grid; gap: var(--step-3);
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  margin: 0; padding: 0; list-style: none;
}

.item { position: relative; }

/* The whole card is the label: ITEM, its quoted index, then the spec lines. */
.item__box {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: var(--rule) solid var(--ink); background: var(--base);
  padding: 0; color: inherit; font: inherit;
  position: relative;
}
.item__box:hover { background: var(--base-sunk); }
.item__box:focus-visible { outline: var(--rule-heavy) solid var(--orange); outline-offset: 2px; }

.item__shot {
  aspect-ratio: 9 / 16; width: 100%; object-fit: cover;
  background: var(--base-sunk);
  border-bottom: var(--rule) solid var(--ink);
}

.item__spec { padding: var(--step-2); display: grid; gap: 1px; }
.item__k {
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-plate);
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--concrete);
}
.item__v {
  font-family: var(--face-data); font-size: var(--size-plate);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* Selected keeps its orange zip tie on. The tie is a real object hanging off the
 * corner, and selection also fills the foot with hazard — two independent marks, so
 * the state never depends on colour alone. */
.item__tie {
  position: absolute; top: -2px; right: calc(var(--tab) * -1);
  width: var(--tab); height: 38px;
  background: var(--steel-firm); transform-origin: top center;
}
.item__box:hover .item__tie { background: var(--ink); }

.item__box[aria-pressed='true'] { border-color: var(--ink); background: var(--base-sunk); }
.item__box[aria-pressed='true'] .item__tie {
  background: var(--orange);
  animation: swing var(--swing) 1;
}
.item__box[aria-pressed='true']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: var(--hazard);
}
@keyframes swing {
  0% { transform: rotate(0deg); } 35% { transform: rotate(9deg); }
  70% { transform: rotate(-4deg); } 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .item__box[aria-pressed='true'] .item__tie { animation: none; }
  .zone__chev { transition: none; }
}

/* Taken: the item has already been downloaded this session. A cross-tick, not a
 * colour change. */
.item__box[data-taken='1'] .item__shot { opacity: 0.55; }
.item__box[data-taken='1'] .item__spec::before {
  content: 'TAKEN'; display: block;
  font-family: var(--face-display); font-weight: 700; font-size: var(--size-plate);
  letter-spacing: var(--track-label); color: var(--orange-ink);
}

/* A clip and a still are told apart by a typed word and a drawn glyph, never by
 * colour: PHOTO and CINE are the world naming the obvious. */
.item__kind { display: inline-flex; align-items: center; gap: 4px; }
.item__kind svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* ---- the take bar ----------------------------------------------------------- */

.takebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2) var(--step-3);
  border: var(--rule) solid var(--ink); border-bottom: 0;
  background: var(--base);
  padding: var(--step-2) var(--step-3);
  margin-top: var(--step-4);
}
.takebar::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--rule) * -1 - 6px);
  height: 6px; background: var(--hazard);
}
.takebar[hidden] { display: none; }
.takebar__count {
  font-family: var(--face-display); font-weight: 700; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
}
.takebar__note { font-family: var(--face-data); font-size: var(--size-plate); color: var(--concrete); }
.takebar__acts { margin-left: auto; display: flex; gap: var(--step-2); flex-wrap: wrap; }

/* ---- buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--step-2);
  border: var(--rule) solid var(--ink); background: var(--base); color: var(--ink);
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-small);
  text-transform: uppercase; letter-spacing: var(--track-label);
  padding: 8px var(--step-3); cursor: pointer; text-decoration: none;
  position: relative;
}
.btn:hover { background: var(--ink); color: var(--base); }
.btn:active { background: var(--steel); color: var(--ink); }
.btn--go { background: var(--orange); color: var(--on-orange); font-weight: 700; }
.btn--go:hover { background: var(--ink); color: var(--base); }
.btn--go:active { background: var(--orange-deep); color: var(--on-orange); }

/* Disabled takes the diagonal across it, the way an unavailable thing is struck in
 * a stockroom. Never a grey ghost. */
.btn:disabled, .btn[aria-disabled='true'] {
  cursor: not-allowed; color: var(--concrete); border-color: var(--steel-firm);
  background: var(--base-sunk);
}
.btn:disabled::after, .btn[aria-disabled='true']::after {
  content: ''; position: absolute; inset: 0; background: var(--hazard-fine); opacity: 0.16;
}

/* ---- nothing here ------------------------------------------------------------
 * Two of ten real profiles hold nothing public. That is a finding, so it is
 * composed like one — a plate reading zero, and the reason typed out. It is never
 * dressed as an error. */
.nothing { border: var(--rule) solid var(--ink); padding: var(--step-4) var(--step-3); text-align: left; }
.nothing::before { content: ''; display: block; height: 10px; background: var(--hazard); margin: calc(var(--step-4) * -1) calc(var(--step-3) * -1) var(--step-3); }
.nothing h3 {
  font-family: var(--face-display); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: var(--track-display); margin: 0 0 var(--step-2);
}
.nothing p { margin: 0 0 var(--step-2); max-width: 58ch; color: var(--concrete); }
.nothing p:last-child { margin-bottom: 0; }

/* ---- prose -------------------------------------------------------------------
 * Sentence case, Archivo, a real measure. The board's all-caps body rule is written
 * for garment copy; an FAQ answer set in caps is unreadable and clarity wins. */
.prose { max-width: var(--measure); }
.prose h2 {
  font-family: var(--face-display); font-weight: 700; font-size: var(--size-h2);
  text-transform: uppercase; letter-spacing: var(--track-display); line-height: 1.05;
  margin: var(--step-5) 0 var(--step-2); text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--face-display); font-weight: 700; font-size: var(--size-h3);
  text-transform: uppercase; letter-spacing: var(--track-label);
  margin: var(--step-4) 0 var(--step-1);
}
.prose p, .prose li { color: var(--ink); }
.prose p { margin: 0 0 var(--step-3); }
.prose ul, .prose ol { margin: 0 0 var(--step-3); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--step-1); }
.prose strong { font-weight: 600; }
.prose code {
  font-family: var(--face-data); font-size: 0.9em;
  background: var(--base-sunk); border: 1px solid var(--steel); padding: 1px 5px;
}
.prose blockquote {
  margin: 0 0 var(--step-3); padding-left: var(--step-3);
  border-left: var(--rule) solid var(--ink); color: var(--concrete);
}
.table-scroll { overflow-x: auto; margin-bottom: var(--step-3); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--size-small); }
.prose th, .prose td {
  border: 1px solid var(--steel-firm); padding: var(--step-1) var(--step-2);
  text-align: left; font-variant-numeric: tabular-nums;
}
.prose th {
  font-family: var(--face-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-label); font-size: var(--size-plate);
  background: var(--base-sunk);
}

/* ---- figures -------------------------------------------------------------------
 * A recording of the real interface, mounted the way this world mounts anything: hard
 * rule around it, a caption plate under it, and a hazard strip separating the two so
 * the picture cannot be mistaken for part of the page it sits on.
 *
 * The image carries its own width and height, taken from the recorder's manifest, so
 * the box is held before the file lands and nothing below it jumps. */
.shot {
  margin: var(--step-5) 0;
  border: var(--rule) solid var(--ink);
  background: var(--base-sunk);
  /* The recordings are 700px wide. Letting the figure span the full 1180px shell
   * upscaled them by 1.68x and turned crisp condensed type to mush, so the frame is
   * capped at the file's own size. Recording larger would have cost roughly double
   * the bytes for detail nobody gains. */
  max-width: 700px;
}
.shot img {
  display: block; width: 100%; height: auto;
  border-bottom: var(--rule) solid var(--ink);
}
.shot figcaption {
  position: relative;
  font-family: var(--face-data); font-size: var(--size-plate);
  line-height: 1.5; color: var(--concrete);
  padding: calc(var(--step-2) + 6px) var(--step-3) var(--step-2);
}
.shot figcaption::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 6px; background: var(--hazard);
}

/* ---- notes -------------------------------------------------------------------- */

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step-3); }
.note { border: var(--rule) solid var(--ink); padding: var(--step-3); }
.note:hover { background: var(--base-sunk); }
.note__title {
  font-family: var(--face-display); font-weight: 700; font-size: 1.375rem;
  text-transform: uppercase; letter-spacing: var(--track-display);
  margin: 0 0 var(--step-1); line-height: 1.1;
}
.note__title a { color: var(--ink); text-decoration: none; }
.note__title a:hover { color: var(--orange-ink); text-decoration: underline; text-decoration-thickness: 3px; }
.note__date {
  font-family: var(--face-data); font-size: var(--size-plate); color: var(--concrete);
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--step-2);
}
.note p:last-child { margin-bottom: 0; color: var(--concrete); }

/* ---- the reserved slot -------------------------------------------------------
 * No advertising ships at launch. The space is held so adding one later does not
 * reflow the page, and it is drawn as an empty labelled bay rather than left as a
 * silent gap that looks like a bug. */
.bay { margin: var(--step-5) 0; }
.bay__frame {
  border: var(--rule) dashed var(--steel-firm); min-height: 90px;
  display: grid; place-items: center;
}
.bay__frame span {
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-plate);
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--steel-firm);
}

/* ---- colophon ----------------------------------------------------------------- */

.colophon {
  border-top: var(--rule) solid var(--ink); margin-top: var(--step-6);
  padding: var(--step-4) 0 var(--step-5); background: var(--base);
}
.colophon__row { display: flex; flex-wrap: wrap; gap: var(--step-2) var(--step-3); align-items: center; }
.colophon__row a {
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-small);
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink); text-decoration: none;
}
.colophon__row a:hover { color: var(--orange-ink); text-decoration: underline; text-decoration-thickness: 2px; }
.colophon__note {
  font-family: var(--face-data); font-size: var(--size-plate); color: var(--concrete);
  margin: var(--step-3) 0 0; max-width: 70ch;
}

/* ---- language rack ---------------------------------------------------------------
 * A rack of quoted plates in the colophon. The current language is filled the same way
 * the current nav tab is, so "where am I" is answered by the same visual rule twice
 * rather than by two different ones. */
.rack {
  display: flex; flex-wrap: wrap; gap: var(--step-1);
  margin-top: var(--step-4);
  border-top: var(--rule) solid var(--steel); padding-top: var(--step-3);
}
.rack__link, .rack__here {
  font-family: var(--face-display); font-weight: 500; font-size: var(--size-plate);
  text-transform: uppercase; letter-spacing: var(--track-label);
  border: var(--rule) solid var(--ink);
  padding: 5px var(--step-2);
  text-decoration: none; color: var(--ink);
}
.rack__link:hover { background: var(--ink); color: var(--base); }
.rack__link:active { background: var(--steel); color: var(--ink); }
.rack__here { background: var(--orange); color: var(--on-orange); font-weight: 700; }

/* ---- responsive --------------------------------------------------------------
 * One dominant organising force on a phone rather than a shrunken desktop: the
 * grid narrows to two columns and the furniture stacks, but the stripe holds 45
 * degrees and the plates keep their size — a label plate that shrinks stops being
 * readable, which is the one thing it exists to be. */
@media (max-width: 760px) {
  .masthead__row { flex-direction: column; align-items: stretch; }
  .wordmark { padding: var(--step-2) 0; }
  .nav { border-top: var(--rule) solid var(--ink); }
  .nav__link { flex: 1 1 auto; justify-content: center; }
  .nav__link { padding: var(--step-2) var(--step-3); }
  .nav__link:first-child { border-left: 0; }
  .nav__link:last-child { border-right: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--step-2); }
  /* Room for the last column's tie to hang without landing on the zone border. */
  .zone__body { padding-right: calc(var(--step-3) + var(--tab)); }
  .paste__well { margin-right: var(--tab); }

  /* A truncated zone name is a zone you cannot identify, which defeats the one thing
   * the header exists for. Two lines beat an ellipsis at this width. */
  .zone__head { flex-wrap: wrap; row-gap: var(--step-1); }
  .zone__name { white-space: normal; overflow: visible; flex: 1 1 60%; line-height: 1.15; }
  .zone__qty { margin-left: 0; order: 3; flex: 1 0 100%; }
  .subject { flex-wrap: wrap; }
  .subject__acts { margin-left: 0; width: 100%; }
  .paste { gap: var(--step-3); }
  .strike { width: 100%; }
  .takebar__acts { margin-left: 0; width: 100%; }
  .field__stripe { height: 54px; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}