/* Bunker Capital Markets.
   The page is a civil defence shelter seen in section, hung in its own instrument room.
   Four bands on olive black, in the proportions measured off art/ref/control-room.jpg:
   instruments 30%, the section 26.5%, the bays 20%, the console 23.5%.
   Written from scratch for this site. Nothing here came from another build's stylesheet. */

@font-face {
  font-family: "Stencil";
  src: url("../fonts/big-shoulders-stencil-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Mono";
  src: url("../fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 300 800; font-display: swap; font-style: normal;
}

:root {
  /* ground and surfaces */
  --ground: #0C0D0A;
  --wash: #15180F;
  --bay: #1A1E12;
  --sunk: #090A06;

  /* ink. Every one of these is measured over the surface it is painted on: all >= 4.5:1.
     olive / olive-lift / olive-rule are NEVER text: they draw rules, grids and frames. */
  --paper: #EFE9D6;      /* 16.1 : 1 on ground. values, the mint */
  --khaki: #D8CBA4;      /* 12.1 : 1. every sentence and label */
  --yellow: #F2C230;     /* 11.6 : 1. the one accent, the display word, a live reading */
  --blue: #7FB3CE;       /* 8.6 : 1. secondary values, leader labels */
  --blue-dim: #5B8CA6;   /* 5.3 : 1. leader lines */
  --rust: #CC6A3C;       /* 5.3 : 1. behind target, empty, nothing yet */
  --muted: #9A9A82;      /* 6.8 : 1 on the ground, 4.7 : 1 on a key fill. Labels, separators,
                            and the one ink a DISABLED control is written in. A disabled key is
                            dimmed by COLOUR, never by opacity: an opacity cannot be measured,
                            and the audit found the old pair sitting at 3.79 : 1 on the key. */
  --olive: #3F4A2A;
  --olive-lift: #5C6B3E;
  --olive-rule: #6E7F4A;

  /* type. Dark theme, so the mono floor is 16 and the caps tracking is one token.
     ONE display element per screen; everything else stays small. */
  --t-micro: 16px;
  --t-body: 17px;
  --t-val: 20px;
  --t-big: 24px;
  --t-head: 34px;
  --t-display: 84px;
  --track: 0.08em;

  /* measure. One page width, one gutter; every band sits inside it. */
  --page: min(1480px, 100vw - 64px);
  --rail: 184px;
  --gap: 24px;
  --main: calc(var(--page) - var(--rail) - var(--gap));

  /* ONE spacing scale and nothing off it: 4 8 12 16 24 32 48 64 96.
     The old set carried 20, 44, 52 and 88 as well, which is four values that belong to no scale. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 24px;
  --s7: 32px; --s8: 48px; --s9: 48px; --s10: 96px;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--khaki);
  font: 400 var(--t-body)/1.55 "Mono", ui-monospace, monospace;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* an even grain over the whole field, the photocopy of this world, 1 lit row in 4 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: repeating-linear-gradient(0deg, rgba(255,250,230,0.016) 0 1px, transparent 1px 4px);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 61;
  background: radial-gradient(130% 100% at 36% 46%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.42) 100%);
}

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--paper); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ----------------------------------------------------------------- the shell: rail + column */
.shell {
  width: var(--page); margin: 0 auto;
  display: grid; grid-template-columns: var(--rail) var(--main); gap: var(--gap);
  align-items: start;
  padding: var(--s9) 0 var(--s10);
  position: relative; z-index: 2;
}

/* ----------------------------------------------------------------- the ladder: the navigation */
.ladder { position: sticky; top: var(--s7); display: block; }
.ladder-head {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--muted);
  /* the same left inset as a rung, so the heading and the words under it share one edge */
  padding: 0 var(--s6) var(--s3);
  margin: 0;
}
.ladder-rail { display: flex; flex-direction: column; gap: 0; position: relative; }
/* the two stringers of the ladder, drawn as rules of their own */
.ladder-rail::before, .ladder-rail::after {
  content: ""; position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--olive-rule);
}
.ladder-rail::before { left: 6px; }
.ladder-rail::after { right: 6px; }

.rung {
  position: relative; display: block; width: 100%;
  background: #1A1E12; border: 0; border-top: 3px solid var(--olive);
  color: var(--khaki); text-align: left; cursor: pointer;
  padding: var(--s4) var(--s6) var(--s4);
  min-height: 92px;
  font: inherit;
  text-decoration: none;
  transition: background .18s, transform .08s;
}
/* a transparent border, not none: with border-top: 0 the first rung measured 111 px against 114 */
.rung:first-child { border-top-color: transparent; }
.rung:hover { background: #222816; }
.rung:active { transform: translateY(1px); }
.rung .depth {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-big); line-height: 1;
  letter-spacing: 0.04em; color: var(--muted); display: block;
}
/* 00, 04, 08, 12 are metres down the shaft. Without the unit the sequence reads as a broken count. */
.rung .depth .unit { font-size: var(--t-micro); letter-spacing: 0; margin-left: 3px; }
.rung .rname {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro); line-height: 1.12;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--khaki);
  display: block; margin-top: var(--s1);
}
.rung .rcount {
  font-size: var(--t-micro); color: var(--blue); display: block; margin-top: var(--s2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rung[aria-current="page"] {
  background: linear-gradient(90deg, rgba(242,194,48,0.16), rgba(242,194,48,0.02));
  /* declared for tools/audit.mjs: a gradient is a background IMAGE, so the cascade carries no
     colour here and a contrast check has nothing to measure against. This is the lightest point
     of the gradient, 16% of the accent over the rung, which is the worst case for a light ink. */
  --audit-surface: #3C3817;
}
.rung[aria-current="page"] .depth { color: var(--yellow); }
.rung[aria-current="page"] .rname { color: var(--paper); }
/* the torch beam on the open rung: a lit wedge on its left edge */
.rung[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--yellow);
}

/* ----------------------------------------------------------------- bands */
.band { display: block; }
.band + .band { margin-top: var(--s9); }

/* a band head: a rule with its tag printed ON it, the way his frames break their own rules */
.band-head {
  display: flex; align-items: center; gap: var(--s4);
  margin: 0 0 var(--s6);
}
.band-head .tag {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro);
  letter-spacing: var(--track); text-transform: uppercase;
  color: #0C0D0A; background: var(--khaki);
  padding: 10px var(--s4); line-height: 1.1; white-space: nowrap;
}
.band-head .title {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-head); line-height: 1.05;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--paper); margin: 0;
}
.band-head .line { flex: 1 1 auto; height: 3px; background: var(--olive-rule); min-width: 24px; }
.band-head .right { font-size: var(--t-micro); color: var(--blue); white-space: nowrap; }

/* ----------------------------------------------------------------- band 1: the instruments */
.instruments {
  display: grid; grid-template-columns: 29fr 38fr 25fr; gap: var(--s6) var(--s7);
  align-items: start;
}
.panel {
  background: var(--wash);
  padding: var(--s5) var(--s6) var(--s6);
  position: relative;
  min-width: 0;
}
/* his corner brackets, drawn as four real corners, not a border */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.panel::before { left: 0; top: 0; border-left: 3px solid var(--khaki); border-top: 3px solid var(--khaki); }
.panel::after { right: 0; bottom: 0; border-right: 3px solid var(--khaki); border-bottom: 3px solid var(--khaki); }

.panel > .plabel {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--s5);
}

/* the masthead column: the only place a display size exists */
.masthead { padding: 0; background: none; }
.masthead::before, .masthead::after { display: none; }
.wordmark {
  font-family: "Stencil"; font-weight: 700; margin: 0;
  font-size: var(--t-display); line-height: 0.88; letter-spacing: 0.02em;
  color: var(--paper); text-transform: uppercase;
}
.wordmark .second { display: block; color: var(--yellow); font-size: 0.44em; letter-spacing: 0.05em; margin-top: 0.12em; }
.premise { margin: var(--s6) 0 0; font-size: var(--t-body); color: var(--khaki); max-width: 42ch; }
.ticker-line {
  margin: var(--s5) 0 0; font-size: var(--t-micro); color: var(--blue);
  letter-spacing: var(--track); text-transform: uppercase;
}

/* a readings strip: label above, value below, every value on one baseline */
.readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s6); }
.reading { min-width: 0; }
.reading .k {
  font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted);
  display: block; line-height: 1.25; min-height: 2.5em;
}

/* the full width strip of live figures that closes the instruments band: his ticker rows */
.strip {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--wash); border-top: 3px solid var(--olive-rule); border-bottom: 3px solid var(--olive-rule);
}
.strip .cell { padding: var(--s4) var(--s5); min-width: 0; border-left: 2px solid var(--olive); }
.strip .cell:first-child { border-left: 0; }
.strip .cell .k {
  display: block; font-size: var(--t-micro); color: var(--muted);
  letter-spacing: var(--track); text-transform: uppercase; line-height: 1.25; min-height: 2.5em;
}
.strip .cell .v { display: block; font-size: var(--t-val); color: var(--paper); margin-top: var(--s2); overflow-wrap: anywhere; }
.strip .cell .v.accent { color: var(--yellow); }
.strip .cell .v.empty { color: var(--muted); }
.reading .v { font-size: var(--t-val); color: var(--paper); display: block; margin-top: var(--s1); font-weight: 500; }
.reading .v.accent { color: var(--yellow); }
.reading .v.empty { color: var(--muted); }

/* the deficit chart: filled bars over a ruled grid, his amber area panel */
.deficit { display: grid; gap: var(--s4); }
.dbar { min-width: 0; }
.dbar .row { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--t-micro); }
.dbar .row .n { color: var(--khaki); letter-spacing: var(--track); text-transform: uppercase; }
.dbar .row .w { color: var(--paper); white-space: nowrap; }
.dbar .track {
  position: relative; height: 22px; margin-top: var(--s2); background: var(--sunk);
  background-image: repeating-linear-gradient(90deg, rgba(110,127,74,0.35) 0 1px, transparent 1px 10%);
}
.dbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--khaki); }
.dbar.behind .fill { background: var(--rust); }
.dbar.ahead .fill { background: var(--yellow); }
.dbar .target { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--blue); }
.dbar .under { margin-top: var(--s2); font-size: var(--t-micro); color: var(--muted); }

/* the next-buy capsule, with his leader lines */
.leaders { display: grid; gap: var(--s3); }
.leader { display: grid; grid-template-columns: auto minmax(10px, 1fr) auto; align-items: baseline; gap: var(--s3); font-size: var(--t-micro); }
.leader .lk { color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.leader .dots { border-bottom: 2px dotted var(--olive-rule); transform: translateY(-0.3em); min-width: 10px; }
.leader .lv { color: var(--paper); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.leader .lv.ok { color: var(--blue); }
.leader .lv.no { color: var(--rust); }

/* ----------------------------------------------------------------- band 2: the section */
.section-band { position: relative; }
.shelter {
  position: relative; width: 100%; aspect-ratio: 1044 / 470; background: #090A06;
  overflow: hidden;
}
.shelter canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the door plate: the links, on the shelter door, nine-sliced out of a drawn steel plate */
.door {
  margin-top: var(--s7);
  border-image: url("../img/door-plate.png") 68 fill / 34px / 0 stretch;
  padding: var(--s7);
  --audit-surface: #1A1E12;      /* the sunken field door-plate.png paints inside its rivets */
}
.door .dhead {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--khaki);
  margin: 0 0 var(--s5);
}
.door .dhead .state { color: var(--muted); font-family: "Mono"; letter-spacing: 0; text-transform: none; }
.door .dhead .state.live { color: var(--yellow); }

.mintline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: stretch; }
.mint {
  background: var(--sunk); color: var(--paper);
  padding: var(--s4) var(--s5); min-height: 56px;
  display: flex; align-items: center;
  font-size: var(--t-micro); letter-spacing: 0.01em;
  min-width: 0; overflow-wrap: anywhere; word-break: break-all;
  user-select: all; -webkit-user-select: all;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.8), inset 0 -2px 0 rgba(140,155,100,0.18);
}
.mint.empty { color: var(--muted); user-select: none; }

.key {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 56px; padding: var(--s3) var(--s6);
  background: #2B3219; color: var(--khaki);
  border: 0; border-top: 2px solid #4A5531; border-left: 2px solid #4A5531;
  border-bottom: 2px solid #121609; border-right: 2px solid #121609;
  font: 700 var(--t-micro)/1.1 "Stencil"; letter-spacing: var(--track); text-transform: uppercase;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .18s, color .12s, transform .08s;
}
.key:hover { background: #38411F; color: var(--paper); }
.key:active { transform: translateY(2px); }
.key[aria-disabled="true"], .key:disabled {
  cursor: not-allowed; color: var(--muted);
  background: #222815; border-color: #3A4327 #0F1308 #0F1308 #3A4327;
}
.key[aria-disabled="true"]:hover, .key:disabled:hover { background: #2B3219; color: var(--muted); }
.key img { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.key[aria-disabled="true"] img, .key:disabled img { filter: grayscale(1) brightness(0.85); }

.key.primary {
  width: 100%; margin-top: var(--s3); min-height: 60px;
  background: var(--yellow); color: #16180C;
  border-top-color: #FFE07A; border-left-color: #FFE07A;
  border-bottom-color: #8F7014; border-right-color: #8F7014;
  font-size: var(--t-val);
}
.key.primary:hover { background: #FFD24F; color: #16180C; }
.key.primary[aria-disabled="true"], .key.primary:disabled {
  background: #222815; color: var(--muted); border-color: #3A4327 #0F1308 #0F1308 #3A4327;
}

.keyrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.copied { font-size: var(--t-micro); color: var(--yellow); margin: var(--s4) 0 0; min-height: 1.55em; }
.copied.fail { color: var(--rust); }

/* ----------------------------------------------------------------- band 3: the bays */
/* His monitor wall, kept unequal, but read properly: his first two tubes measure 18.6 and 18.9,
   which is the same tube twice, and only the last is markedly wider at 30.6. Three shelf bays are
   three of the same thing, so they are the same width; the payout bay keeps the wide share. The old
   186 / 189 / 249 / 306 made three identical cards wrap their values three different ways. */
.bays { display: grid; grid-template-columns: repeat(3, 1fr) 1.62fr; gap: var(--s4); align-items: stretch; }
.baybox {
  border-image: url("../img/bay-plate.png") 60 fill / 30px / 0 stretch;
  padding: 0; min-width: 0; display: flex; flex-direction: column;
}
.baybox .bhead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); min-height: 44px;
  /* declared for tools/audit.mjs: the surface here is painted by bay-plate.png, not by a
     background-color, so a contrast check that walks background-color alone measures the page
     ground instead and passes something that is really sitting on this strip */
  --audit-surface: #1E2413;
}
.baybox .bhead .chip {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro); line-height: 1;
  letter-spacing: var(--track); text-transform: uppercase;
  color: #0C0D0A; background: var(--khaki); padding: 11px var(--s4);
}
/* The name of the card. It used to be --muted, which measures 5.56:1 on the strip the plate paints
   under it: over the floor, but dimmer than every value inside the card, so the one word that says
   what the card IS read as the weakest thing on it. Explicit colour, no opacity. */
.baybox .bhead .cap {
  font-size: var(--t-micro); color: var(--paper); letter-spacing: var(--track); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1;
}
.baybox .bbody {
  padding: var(--s6); flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s4); min-width: 0;
  --audit-surface: #13170D;      /* the field bay-plate.png paints under the card body */
}
.baybox .big { font-size: var(--t-big); color: var(--paper); line-height: 1.1; font-weight: 500; }
.baybox .big.empty { color: var(--muted); }
.baybox .big.accent { color: var(--yellow); }
/* A label column and a value column, not a flex row. With space-between the long label of the
   payout card ("In the snapshot", 187 px) ate the row and left the value 35 px, which wrapped it
   into a 174 px tall stack one word per line. */
.brow {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s4); align-items: baseline; font-size: var(--t-micro); min-width: 0;
}
.brow .bk { color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; }
.brow .bv { color: var(--khaki); text-align: right; min-width: 0; overflow-wrap: break-word; }
/* an address is the one value that has no spaces to break at */
.brow .bv.mintcell, .brow .bv a { overflow-wrap: anywhere; }
.brow .bv.accent { color: var(--yellow); }
.brow .bv.no { color: var(--rust); }
.bhr { height: 2px; background: var(--olive); }
.brow a { color: var(--blue); text-decoration-thickness: 1px; }
.brow a:hover { color: var(--paper); text-decoration-color: var(--paper); }
.brow a:active { color: var(--yellow); }
.brow a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; text-decoration: none; }

/* the tank inside the payout bay */
.tankrow { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--s5); align-items: stretch; }
.tankcol { position: relative; background: var(--sunk); border: 3px solid var(--olive-rule); min-height: 132px; }
/* at zero the tank still shows its floor mark: an empty frame reads as a thing that failed to load */
.tankcol .lvl {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 8px;
  background: linear-gradient(180deg, var(--yellow), #B98F15);
}
.tankcol .lvl[data-empty="1"] { background: var(--muted); }
.tankcol .marks { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(110,127,74,0.55) 0 2px, transparent 2px 20%); }

/* ----------------------------------------------------------------- band 4: the console */
.console { display: grid; grid-template-columns: 62fr 38fr; gap: var(--s7); align-items: start; }
.tape { width: 100%; border-collapse: collapse; font-size: var(--t-micro); }
.tape caption { text-align: left; color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; padding-bottom: var(--s3); }
.tape th {
  text-align: left; font-weight: 400; color: var(--muted);
  letter-spacing: var(--track); text-transform: uppercase;
  padding: var(--s2) var(--s4); border-bottom: 2px solid var(--olive-rule); white-space: nowrap;
}
.tape td { padding: var(--s3) var(--s4); border-bottom: 2px solid rgba(63,74,42,0.55); color: var(--khaki); vertical-align: top; }
.tape tr:nth-child(even) td { background: rgba(255,250,230,0.016); }
.tape td.num { text-align: right; color: var(--paper); white-space: nowrap; }
.tape td.kind { color: var(--blue); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; }
.tape td.kind.burn { color: var(--yellow); }
.tape td.kind.payout { color: var(--rust); }
.tape td a { overflow-wrap: anywhere; }
.tape .idle td { color: var(--muted); }

/* the split, drawn as one stacked bar of three real shares */
.split { display: flex; height: 34px; background: var(--sunk); }
.split span { display: block; }
.split .s-stock { background: var(--khaki); }
.split .s-burn { background: var(--yellow); }
.split .s-work { background: var(--olive-lift); }
.splitkeys { display: grid; gap: var(--s3); margin-top: var(--s5); font-size: var(--t-micro); }
.splitkey { display: flex; align-items: center; gap: var(--s3); }
.splitkey i { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.splitkey .t { color: var(--khaki); }
.splitkey .p { margin-left: auto; color: var(--paper); }

/* ----------------------------------------------------------------- shared blocks */
.prose { font-size: var(--t-body); color: var(--khaki); max-width: 68ch; }
.prose p { margin: 0 0 var(--s5); }
.prose strong { color: var(--paper); font-weight: 500; }
.note { background: var(--wash); padding: var(--s6); font-size: var(--t-micro); color: var(--khaki); }
.note .nh {
  font-family: "Stencil"; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--rust); display: block; margin-bottom: var(--s3);
}
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.step img { width: 100%; display: block; background: #101309; }
.step .sh {
  font-family: "Stencil"; font-weight: 700; font-size: var(--t-micro); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--yellow); margin: var(--s4) 0 var(--s2);
}
.step p { margin: 0; font-size: var(--t-micro); color: var(--khaki); }

.formrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); }
input[type="text"] {
  background: var(--sunk); color: var(--paper); border: 2px solid var(--olive-rule);
  padding: var(--s4) var(--s5); min-height: 56px; font: 400 var(--t-micro)/1.4 "Mono", monospace;
  min-width: 0;
}
input[type="text"]::placeholder { color: var(--muted); }

.empty-note { color: var(--muted); font-size: var(--t-micro); }

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------------- narrower windows */
@media (max-width: 1240px) {
  :root { --page: min(1040px, 100vw - 48px); --main: var(--page); --t-display: 68px; }
  .shell { grid-template-columns: 1fr; gap: var(--s7); padding-top: var(--s7); }
  .ladder { position: static; }
  .ladder-rail { flex-direction: row; }
  .ladder-rail::before, .ladder-rail::after { display: none; }
  .rung { border-top: 0; border-left: 3px solid var(--olive); min-height: 78px; }
  .rung:first-child { border-left-color: transparent; }
  .rung[aria-current="page"]::before { right: 0; bottom: auto; width: auto; height: 5px; }
  .instruments { grid-template-columns: 1fr 1fr; }
  .masthead { grid-column: 1 / -1; order: -1; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip .cell:nth-child(4) { border-left: 0; }
  .bays { grid-template-columns: 1fr 1fr; }
  .console { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --page: min(640px, 100vw - 32px); --t-display: 52px; --t-head: 28px; --s9: 48px; --s10: 64px; }
  .ladder-rail { flex-wrap: wrap; }
  .rung { flex: 1 1 45%; min-height: 72px; border-left: 0; border-top: 3px solid var(--olive); }
  .rung:first-child { border-top: 0; }
  .instruments { grid-template-columns: 1fr; gap: var(--s7); }
  .bays { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .keyrow { grid-template-columns: 1fr; }
  .mintline { grid-template-columns: 1fr; }
  .readings { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip .cell:nth-child(odd) { border-left: 0; }
  /* the section turns upright: the brief's own phone order, earth, shaft, shelves, tank */
  .shelter { aspect-ratio: 390 / 620; }
}

@media (max-width: 400px) {
  :root { --page: calc(100vw - 24px); --t-display: 42px; }
  .readings { grid-template-columns: 1fr; }
  .rung { flex: 1 1 100%; }
}

/* the split, on the first screen, under the premise: the clearest statement of the mechanic
   and what keeps the masthead column as deep as the panels beside it */
.splitbar { margin-top: var(--s7); }

/* the foot of the weight panel: the three shelves added up, and the rule in words */
.dtotal {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s3); font-size: var(--t-micro);
}
.dtotal .n { color: var(--khaki); letter-spacing: var(--track); text-transform: uppercase; }
.dtotal .w { color: var(--yellow); }
.dnote { margin: var(--s3) 0 0; font-size: var(--t-micro); color: var(--khaki); }

/* Grid and flex items default to a min-width of their own min-content, which lets one wide table or
   one unbreakable label push the whole page sideways. Every container on this page may shrink. */
.shell > *, main > *, .band > *, .instruments > *, .console > *, .bays > *, .steps > *,
.mintline > *, .keyrow > *, .formrow > *, .tankrow > * { min-width: 0; }
.tape { table-layout: fixed; }
@media (max-width: 900px) {
  .tape th { white-space: normal; }
}

/* The band head keeps its rule on a wide window and folds under it on a narrow one. */
.band-head { flex-wrap: wrap; }
@media (max-width: 900px) {
  .band-head .right { white-space: normal; flex: 1 1 100%; order: 3; }
  .band-head .line { min-width: 24px; }
}

/* On a phone nothing is allowed to be unbreakable: a single wide label used to push the page sideways. */
@media (max-width: 900px) {
  .brow { flex-wrap: wrap; }
  .brow .bk, .brow .bv { white-space: normal; overflow-wrap: anywhere; }
  .leader { grid-template-columns: auto minmax(8px, 1fr) auto; }
  .leader .lk, .leader .lv { white-space: normal; overflow-wrap: anywhere; }
  .tape td.kind, .tape td.num { white-space: normal; overflow-wrap: anywhere; }
  .baybox .bhead { flex-wrap: wrap; }
  .baybox .bhead .cap { white-space: normal; }
  .dtotal { flex-wrap: wrap; }
}

/* A phone has no room for a fourth column, so the signature rides under what it signed. */
.sigline { display: none; }
@media (max-width: 900px) {
  .tape th:nth-child(4), .tape td:nth-child(4) { display: none; }
  .tape th, .tape td { padding: var(--s3) var(--s4); }
  .sigline { display: block; margin-top: var(--s1); }
}

/* the filter row on the log, and the pager under the tape */
.filters { display: grid; gap: var(--s3); }
.filters .key { width: 100%; justify-content: flex-start; }
.filters .key[aria-pressed="true"] { background: var(--khaki); color: #14170D; border-color: #EFE9D6 #6E6450 #6E6450 #EFE9D6; }
.pager { display: flex; gap: var(--s4); margin-top: var(--s6); }
.pager .key { min-width: 160px; }

/* a payout card on My share: the same bay object, one per payout */
.payoutcard + .payoutcard { margin-top: var(--s6); }
.payoutcard .rows { display: grid; gap: var(--s3); }
.payoutcard .actions { display: block; }

/* the manual's mint table shows the issuer under the address at every width */
#mints .sigline { display: block; font-size: var(--t-micro); margin-top: var(--s1); }

/* A four column tape cannot survive a phone, so on a narrow window every row becomes a block.
   The head stays in the document for a screen reader; it is moved out of sight, never rotated. */
@media (max-width: 700px) {
  .tape thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tape tr { display: block; border-bottom: 2px solid rgba(63,74,42,0.55); padding: var(--s3) 0; }
  .tape tr:nth-child(even) { background: rgba(255,250,230,0.016); }
  .tape td { display: block; border: 0; padding: var(--s2) var(--s5); }
  .tape td:nth-child(4) { display: none; }
  .tape td.num { text-align: left; }
  .tape td.kind { font-size: var(--t-micro); }
}
#mints td, #mints a, #mints .sigline { overflow-wrap: anywhere; }

/* a memo shape is quoted exactly as the chain carries it, so this one line keeps its own case */
.ticker-line.shapes code { text-transform: none; color: var(--paper); font: inherit; }