/* America's Critical Lands, direction n1: THE LINE. One kit for every page of this round (KIT.md lists each component
   and its one-line rule). Palette derived from the subject: the ground is a pale cool paper (the color of a plan sheet,
   never a tan), the line is ink, and the one color is stake orange, the flagging tape on a mining claim's corner post,
   used only for what sits inside a line and for the one button. House type only: Archivo 800 tight for titles, DM Sans
   for everything read, IBM Plex Mono for eyebrows, labels and figures. Nothing sets type under 11 px. No serif anywhere.
   The faces come from /design-rounds/_shared/fonts.css, linked first. */

/* @critical: the tokens (the head of the door and /map/ inlines every @critical region before the stylesheet links, lane cl-intro-fix-1020: the sheet's rules are present at the first paint without waiting on this file) */
:root {
  --paper: #F5F7F3;
  --paper-2: #EBEFE8;
  --paper-3: #DFE5DD;
  --ink: #15221E;
  --ink-2: #3F4D48;
  --ink-3: #5C6A65;
  --rule: #C7D0C9;
  --stage: #E2E8DF;
  --stage-off: #EEF1EC;
  --flag: #B8400F;
  --flag-2: #8F300A;
  --flag-wash: #F6E3DA;
  --on-flag: #FFFFFF;
  --focus: #1C4F9C;
  /* the Fable face pass (lane cl-face-fable-1016, Will 2026-10-16: "too monochrome, not alive like Ambler"). A second hue
     that earns its place: the land, BLM's ground marked for care, for every ACEC fill; ink stays the line, the flag stays
     what sits inside. Validated with the dataviz palette script beside the flag and the rights-of-way blue on paper
     (CVD 9.0, 4.8:1 on paper, 4.0:1 on USGS topo tan, 3.3:1 on hillshade gray). */
  --land: #207B54;
  --land-2: #015636;
  --land-wash: #D5F0E0;
  /* the five kinds inside a line, one hue each, in the order the bars rank them; the flag is the mining claim. Validated as a
     set on paper (adjacent CVD 14.8, every one over 3:1); every bar is named, so no kind is color alone. */
  --k-claim: #B8400F;
  --k-row: #0F6190;
  --k-graze: #8F6000;
  --k-oil: #6A4396;
  --k-geo: #008A79;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-read: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --ts-2xs: 11px;
  --ts-xs: 12px;
  --ts-sm: 14px;
  --ts-md: 17px;
  --ts-lg: 21px;
  --ts-xl: 30px;
  --ts-2xl: clamp(40px, 4.4vw, 62px);
  --measure: 62ch;
  --gutter: clamp(20px, 4vw, 56px);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box }
/* @/critical */
/* @critical: the ground */
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { transition: none !important; animation: none !important } }
body { margin: 0; font: 400 var(--ts-md)/1.55 var(--font-read); color: var(--ink) }
img, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .16em }
a:hover { text-decoration-color: var(--ink) }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px }
button { font: inherit; color: inherit }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; color: var(--ink) }
h1 { font-size: var(--ts-2xl); line-height: .98; letter-spacing: -.03em; text-wrap: balance }
h2 { font-size: var(--ts-xl); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance }
h3 { font-size: var(--ts-lg); line-height: 1.2; letter-spacing: -.02em }
p { margin: 0 0 1em; max-width: var(--measure) }
p:last-child { margin-bottom: 0 }
b, strong { font-weight: 600 }
small { font-size: var(--ts-sm) }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) }
.skiplink { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 100; font-family: var(--font-mono); font-size: var(--ts-xs) }
.skiplink:focus { top: 8px }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---- eyebrow, figure, label: the mono voice ---- */
.eyebrow { font: 500 var(--ts-xs)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px }
.eyebrow b { color: var(--ink); font-weight: 600 }
.fig { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0 }
.fig.display { font-family: inherit; font-weight: inherit; letter-spacing: inherit }
.fig.words { font-family: var(--font-read); font-weight: 600 }
.lab { font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }

/* ---- masthead ---- */
/* @/critical */
/* @critical: the masthead's line (the sheet's own masthead sits in its place) */
.mast { display: flex; align-items: center; gap: 18px; min-height: 64px; border-bottom: 1px solid var(--rule); padding: 0 var(--gutter) }
.mast-logo { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px }
.mast-logo img { width: 28px; height: 28px }
.mast-names { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; min-height: 44px; justify-content: center }
.mast-brand { font: 600 var(--ts-xs)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) }
.mast-site { font: 800 var(--ts-lg)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink) }
.mast-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end }
.mast-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; text-decoration: none; font-size: var(--ts-sm); color: var(--ink-2); border-radius: 3px }
.mast-nav a:hover { background: var(--paper-2); color: var(--ink) }
.mast-nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink) }
.pbi { display: inline-flex; flex-direction: column; justify-content: center; text-decoration: none; padding-left: 18px; border-left: 1px solid var(--rule); line-height: 1.15; min-height: 40px }
.pbi span:first-child { font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.pbi span:last-child { font: 700 var(--ts-sm)/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink) }
/* a phone's masthead is two rows and about 110 px (the walk of 2026-10-18 measured 205 px at 390 and 290 px at 320, half
   the screen): row one the logo and the names; row two the nav as one line that scrolls sideways, its last door fading at
   the edge, with Powered by at the row's right. Never a wrapped nav of three or four rows. */
@media (max-width: 899px) {
  .mast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo names names" "nav nav pbi"; column-gap: 12px; row-gap: 0; align-items: center; padding: 8px var(--gutter) 0 }
  .mast-logo { grid-area: logo }
  .mast-names { grid-area: names; min-height: 40px }
  .mast-site { font-size: var(--ts-md) }
  .mast-nav { grid-area: nav; margin: 0 0 0 calc(-1 * var(--gutter)); min-width: 0; justify-content: flex-start; flex-wrap: nowrap; gap: 0; padding: 0 var(--gutter); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent) }
  .mast-nav::-webkit-scrollbar { display: none }
  .mast-nav a { white-space: nowrap; min-height: 44px; flex: none; padding: 0 9px }
  .mast-nav a:first-child { padding-left: 0 }
  .mast-nav a.on { box-shadow: inset 0 -2px 0 var(--ink) }
  .pbi { grid-area: pbi; justify-self: end; border-left: 0; padding-left: 0; align-items: flex-end; text-align: right; min-height: 44px }
  .pbi span:last-child { font-size: var(--ts-xs) }
}
@media (max-width: 420px) { .pbi span:last-child { font-size: var(--ts-2xs) } }
/* a tablet's masthead (600 to 899, the mobile sweep of 2026-10-21 item 1, iPad half): Powered by sits on row one beside the
   names, so the nav has row two to itself and Log in and Sign up end on screen, never under the lockup. A phone's is as above.
   Under 744 the row still scrolls under its fade, as a phone's does */
@media (min-width: 600px) and (max-width: 899px) {
  .mast { grid-template-areas: "logo names pbi" "nav nav nav" }
  /* the nav runs edge to edge, its doors 7 px apart each side: all eight fit from 744 px (an iPad mini) up, none faded */
  .mast-nav { margin-right: calc(-1 * var(--gutter)) }
  .mast-nav a { padding: 0 7px }
}
/* 44 px targets on a phone or a touch screen (the sweep's item 6): the mark and the names */
@media (max-width: 899px), (pointer: coarse) { .mast-logo { min-height: 44px; min-width: 44px } .mast-names { min-height: 44px } }
/* @/critical */

/* ---- the room: one screen, the words and the stage ---- */
.room { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 0 var(--gutter); align-items: center; min-height: calc(100vh - 65px); padding: 40px var(--gutter) 36px; max-width: var(--wrap); margin: 0 auto }
.room-words { grid-column: 1; grid-row: 1 / span 2 }
.room-stage { grid-column: 2; grid-row: 1 }
.room-words { max-width: 640px }
.room-words .dek { font-size: var(--ts-lg); line-height: 1.45; color: var(--ink-2); margin: 22px 0 0; max-width: 34em }
.room-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px }
.room-stage { position: relative; min-width: 0 }
@media (max-width: 899px) {
  .room { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; padding-top: 0; gap: 28px }
  .room-words, .room-stage { grid-column: 1; grid-row: auto }
  .room-words .dek { font-size: 18px; margin-top: 18px }
}

/* ---- buttons and the one input ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 4px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; font-size: var(--ts-md); cursor: pointer; transition: background .15s, color .15s }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2) }
.btn.flag { background: var(--flag); border-color: var(--flag); color: var(--on-flag) }
.btn.flag:hover { background: var(--flag-2); border-color: var(--flag-2) }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--rule) }
.btn.quiet:hover { background: var(--paper-2); border-color: var(--ink) }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; cursor: pointer; background: none; border: 0; padding: 0 }
.textlink:hover { text-decoration-color: var(--ink) }
.field { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end }
.field label { display: flex; flex-direction: column; gap: 6px; font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.field input { font: 500 16px/1 var(--font-mono); letter-spacing: .04em; min-height: 48px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); min-width: 0 }
.field input.zip { width: 9ch }
.field input.mail { width: min(100%, 26ch) }
.field input::placeholder { color: var(--ink-3) }
.field-note { font-size: var(--ts-sm); color: var(--ink-2); margin: 10px 0 0; min-height: 1.2em }
/* the door's note under the ZIP field can run two lines; it keeps two lines of room so the field never nudges when it changes (the walk, 2026-10-18: 2 to 11 px) */
@media (min-width: 900px) { .room .field-note { min-height: 2.6em } }

/* ---- the stage: the West, the lines ---- */
.stage { position: relative; width: 100%; aspect-ratio: 600 / 560; background: transparent }
.stage svg { width: 100%; height: 100%; overflow: visible }
.stage .st { fill: var(--stage); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round }
.stage .st.off { fill: var(--stage-off) }
.stage .stlab { font: 500 11px var(--font-mono); letter-spacing: .06em; fill: var(--ink-2); text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round }
.stage .ln { fill: var(--land); fill-opacity: .92; stroke: var(--land-2); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .12s, stroke .12s }
.stage .ln:hover, .stage .ln:focus-visible, .stage .ln.lit { fill: var(--flag); stroke: var(--flag); fill-opacity: 1 }
.stage .ln:focus-visible, .stage .dot:focus-visible, .ground .ln:focus-visible, .ground .claim:focus-visible, .ground .row:focus-visible, .marks .claim:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
[data-rove]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px }
.stage .dot { fill: var(--land); stroke: var(--paper); stroke-width: 1; cursor: pointer }
.stage .dot:hover, .stage .dot:focus-visible, .stage .dot.lit { fill: var(--flag) }
.stage[data-view="lines"] .dots { display: none }
.stage[data-view="dots"] .lines { display: none }
.stage .pin { fill: var(--flag); stroke: #fff; stroke-width: 2.5; cursor: pointer }
.stage .pinlab { font: 600 12px var(--font-mono); fill: var(--flag); letter-spacing: .04em; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none }
.stage .inset { position: absolute; left: 0; bottom: 0; width: 30%; border: 1px solid var(--rule); background: var(--paper) }
.stage .inset .lab { position: absolute; left: 8px; top: 6px }
.stage-tools { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap }
.stage-tools .lab { margin-right: 6px }
.swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; cursor: pointer; font-size: var(--ts-sm) }
.swatch:hover { border-color: var(--ink) }
.swatch[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.credit { display: block; margin-top: 8px; font: 400 var(--ts-2xs)/1.4 var(--font-mono); color: var(--ink-3) }
.credit a { color: inherit }
/* ground: topographic tiles under the lines */
.ground { position: relative; width: 100%; border: 1px solid var(--rule); background: var(--paper-2); overflow: hidden }
.ground svg { width: 100%; height: auto }
.ground .ln { fill: var(--land); fill-opacity: .14; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill-opacity .12s }
.ground .ln.one { stroke-width: 3; fill-opacity: .09 }
.ground .ln:hover, .ground .ln:focus-visible, .ground .ln.lit { fill: var(--flag); fill-opacity: .22; stroke: var(--flag) }
.ground .claim { fill: var(--flag); fill-opacity: .8; stroke: #fff; stroke-width: .6; cursor: pointer }
.ground .claim.held { fill: var(--ink-3) }
.ground .claim.filed { fill: #fff; stroke: var(--flag); stroke-width: 1.4; fill-opacity: 1 }
.ground .claim.held.filed { stroke: var(--ink-3) }
.ground .claim:hover, .ground .claim:focus-visible, .ground .claim.lit { fill: var(--ink); stroke: var(--flag); stroke-width: 2; fill-opacity: 1 }
.ground .row { fill: var(--k-row); stroke: #fff; stroke-width: .8; cursor: pointer }
.ground .row:hover, .ground .row:focus-visible, .ground .row.lit { fill: var(--ink); stroke: var(--k-row); stroke-width: 2 }
.ground .pin { fill: var(--flag); stroke: #fff; stroke-width: 2.5; cursor: pointer }
.ground .pinlab { font: 600 12px var(--font-mono); fill: var(--flag); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none }
.ground .lnlab { font: 600 11px var(--font-mono); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; letter-spacing: .02em }
.ground-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: var(--ts-sm); color: var(--ink-2) }
.ground-key span { display: inline-flex; align-items: center; gap: 8px }
.key-mark { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--rule) }
.key-mark.claim { background: var(--flag) }
.key-mark.held { background: var(--ink-3) }
.key-mark.filed { background: #fff; border: 2px solid var(--flag) }
.key-mark.held.filed { border-color: var(--ink-3) }
.key-mark.row { background: var(--k-row); border-radius: 1px; display: inline-block; padding: 0; border: 1px solid #fff; grid-template-columns: none }

/* ---- bands ---- */
.band { padding: 64px 0; border-top: 1px solid var(--rule) }
.band .wrap > h2 { margin-bottom: 22px }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 28px }
.band-head .kicker { font-size: var(--ts-lg); line-height: 1.4; color: var(--ink-2); max-width: 36em; margin: 0 }
.band-head .kicker .fig { color: var(--ink); font-weight: 600 }
.cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px var(--gutter); align-items: start }
.cols.even { grid-template-columns: 1fr 1fr }
@media (max-width: 899px) { .cols, .cols.even { grid-template-columns: 1fr } .band { padding: 44px 0 } }
.prose p { max-width: var(--measure) }
.prose .fig { color: var(--ink); font-weight: 600 }
.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; max-width: var(--measure) }
.steps li { position: relative; padding-left: 44px; margin-bottom: 16px }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 600 var(--ts-xs) var(--font-mono) }
.steps li b { display: block; font-weight: 600 }
.note { font-size: var(--ts-sm); color: var(--ink-2) }

/* ---- the law, quoted ---- */
.law { margin: 22px 0; padding: 18px 22px; border-left: 3px solid var(--ink); background: var(--paper-2); max-width: var(--measure); cursor: pointer }
.law q { quotes: "\201C" "\201D"; font-size: var(--ts-md); line-height: 1.55; color: var(--ink) }
.law.sm q { font-size: var(--ts-sm) }
.law cite { display: block; margin-top: 10px; font: 400 var(--ts-xs)/1.4 var(--font-mono); font-style: normal; color: var(--ink-3) }
.law cite a { color: inherit }

/* ---- rows: the one list shape; folds past N ---- */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule) }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit }
.row[hidden] { display: none }
a.row:hover .row-name, a.row:focus-visible .row-name { text-decoration: underline; text-decoration-color: var(--ink) }
.row-name { font-weight: 600 }
.row-sub { grid-column: 1; font-size: var(--ts-sm); color: var(--ink-2) }
.row-fig { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--ts-md); white-space: nowrap }
.row-fig small { display: block; font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) }
.row-fig.z { color: var(--ink-3) }
.row-bar { grid-column: 1 / -1; height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden; margin-top: 2px }
.row-bar i { display: block; height: 100%; background: var(--flag); border-radius: 2px }
.fold { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 0 0 }
.fold button { min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); background: transparent; border-radius: 4px; cursor: pointer; font-size: var(--ts-sm); font-weight: 500 }
.fold button:hover { border-color: var(--ink) }
.fold .left { font: 500 var(--ts-xs) var(--font-mono); color: var(--ink-3); letter-spacing: .04em }

/* ---- bars: one series, one hue, direct labels ---- */
.bars { margin: 0; padding: 0; list-style: none; max-width: 560px }
.bars li { display: grid; grid-template-columns: 15ch minmax(0, 1fr) 7.5ch; align-items: center; gap: 12px; padding: 7px 0; min-height: 40px; cursor: pointer }
.bars .bar-name { font-size: var(--ts-sm); color: var(--ink-2) }
.bars .bar { height: 14px; background: var(--paper-3); border-radius: 2px; overflow: hidden }
.bars .bar i { display: block; height: 100%; background: var(--flag); border-radius: 2px; transition: background .12s }
.bars li[data-kind="hardrock"] .bar i { background: var(--k-claim) }
.bars li[data-kind="infrastructure"] .bar i { background: var(--k-row) }
.bars li[data-kind="grazing"] .bar i { background: var(--k-graze) }
.bars li[data-kind="oil_gas"] .bar i { background: var(--k-oil) }
.bars li[data-kind="geothermal"] .bar i { background: var(--k-geo) }
.bars .bar-name i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; background: var(--flag) }
.bars li[data-kind="hardrock"] .bar-name i { background: var(--k-claim) }
.bars li[data-kind="infrastructure"] .bar-name i { background: var(--k-row) }
.bars li[data-kind="grazing"] .bar-name i { background: var(--k-graze) }
.bars li[data-kind="oil_gas"] .bar-name i { background: var(--k-oil) }
.bars li[data-kind="geothermal"] .bar-name i { background: var(--k-geo) }
.bars li:hover .bar i, .bars li:focus-visible .bar i, .bars li.on .bar i { background: var(--ink) !important }
/* the pending segment (lane cl-counts-1018): claims BLM lists as Filed, Under Review or Submitted, beside the active
   ones in the kind's hue at 45%, a 2 px paper gap between; the legend under the bars names both */
.bars .bar { display: flex }
.bars .bar i { flex: none }
.bars li[data-kind] .bar i.pend { background: color-mix(in srgb, var(--k-claim) 45%, var(--paper)); border-left: 2px solid var(--paper); border-radius: 0 2px 2px 0 }
.bars li[data-kind]:hover .bar i.pend, .bars li[data-kind]:focus-visible .bar i.pend { background: color-mix(in srgb, var(--ink) 45%, var(--paper)) !important }
.bars-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-family: var(--font-mono); font-size: var(--ts-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) }
.bars-key i { display: inline-block; width: 18px; height: 9px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; background: var(--k-claim) }
.bars-key i.pend { background: color-mix(in srgb, var(--k-claim) 45%, var(--paper)) }
.bars li:hover .bar-name { color: var(--ink) }
.bars .bar-fig { text-align: right; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--ts-sm) }
/* a floor's word over its figure, the rows' form (.row-fig small): the claims bar says "at least" on its face, as its card does */
.bars .bar-fig small { display: block; font: 500 var(--ts-2xs)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap }
.bars .bar-fig:has(small) { line-height: 1.1 }
@media (max-width: 420px) { .bars li { grid-template-columns: 11ch minmax(0, 1fr) 7ch } }

/* ---- the clock: four steps of a rule ---- */
.clock { list-style: none; margin: 0; padding: 0; max-width: 520px }
.clock li { position: relative; display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 14px; padding: 12px 0 12px 28px; border-left: 2px solid var(--rule) }
.clock li::before { content: ""; position: absolute; left: -7px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink) }
.clock li.done { border-left-color: var(--ink) }
.clock li.done::before { background: var(--ink) }
.clock li.now::before { background: var(--flag); border-color: var(--flag) }
.clock .when { font-family: var(--font-mono); font-size: var(--ts-sm); font-weight: 500; color: var(--ink) }
.clock .when.none { color: var(--ink-3) }
.clock .what, .clock .step { font-size: var(--ts-md); color: var(--ink) }
.clock .what small, .clock .step small { display: block; color: var(--ink-2); font-size: var(--ts-sm) }
.clock li { cursor: pointer }

/* ---- a photograph: one scrim, white type, a crisp edge ---- */
.plate { position: relative; margin: 36px 0 0; overflow: hidden; background: var(--ink) }
.plate img { width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; display: block }
.plate figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px var(--gutter) 22px; background: linear-gradient(to top, rgba(10, 18, 15, .78), rgba(10, 18, 15, 0)); color: #fff; font-size: var(--ts-sm) }
.plate figcaption b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--ts-lg); letter-spacing: -.02em; margin-bottom: 2px }
.plate figcaption .credit { color: rgba(255, 255, 255, .85); margin-top: 4px }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px }
.plates .plate { margin: 0 }
.plates .plate img { height: clamp(200px, 22vw, 300px) }
.plates .plate figcaption { padding: 40px 18px 14px }
@media (max-width: 599px) { .plates { grid-template-columns: 1fr } }

/* ---- the explainer's rail ---- */
.run { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px var(--gutter); align-items: start }
.rail { position: sticky; top: 20px; list-style: none; margin: 0; padding: 0 }
.rail li a { display: flex; gap: 10px; align-items: baseline; min-height: 36px; text-decoration: none; color: var(--ink-2); font-size: var(--ts-sm); padding: 6px 0; border-bottom: 1px solid var(--rule) }
.rail li a:hover { color: var(--ink) }
.rail li a .n { font: 500 var(--ts-2xs) var(--font-mono); color: var(--ink-3); letter-spacing: .06em }
.run section { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px }
.run section:last-child { border-bottom: 0 }
.run section h2 { margin-bottom: 18px }
.run section h3 { margin: 26px 0 10px }
@media (max-width: 899px) { .run { grid-template-columns: 1fr } .rail { position: static; display: flex; flex-wrap: wrap; gap: 4px 14px } .rail li a { border-bottom: 0; min-height: 44px } }

/* ---- "What this is": one line that opens the house card (lane cl-map-1015; it was a details fold, and opening it moved
   the page: Will 2026-10-15). The line keeps the fold's box and its plus; the paragraph is the card's. ---- */
/* the line and its panel: the panel is laid over the page (absolute in the wrap), never in the flow, so nothing under it moves */
.what-wrap { position: relative; max-width: var(--measure); margin: 0 0 24px }
.what-is { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; font-weight: 600; font-size: var(--ts-sm); text-align: left; cursor: pointer }
.what-is::after { content: "+"; font-family: var(--font-mono); color: var(--ink-3) }
.what-is:hover, .what-is[aria-expanded="true"] { border-color: var(--ink) }
.what-is[aria-expanded="true"]::after { content: "\2013"; color: var(--ink) }
.what-panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; box-shadow: 0 10px 30px rgba(21, 34, 30, .16); padding: 20px 22px 12px; opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s }
.what-panel[hidden] { display: none }
.what-panel.open { opacity: 1; transform: none }
.what-panel:focus { outline: none }
.what-panel p { margin: 0; font-size: var(--ts-md); line-height: 1.5; color: var(--ink-2) }
.what-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--rule) }
.what-acts a, .what-acts button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 var(--ts-2xs)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--flag-2); text-decoration: none }
.what-acts a:hover, .what-acts button:hover { text-decoration: underline }
.row-bar i[data-kind="hardrock"] { background: var(--k-claim) }
.row-bar i[data-kind="infrastructure"] { background: var(--k-row) }
.row-bar i[data-kind="grazing"] { background: var(--k-graze) }
.row-bar i[data-kind="oil_gas"] { background: var(--k-oil) }
.row-bar i[data-kind="geothermal"] { background: var(--k-geo) }

/* ---- the Watch ---- */
.watch { background: var(--ink); color: var(--paper); padding: 72px 0 }
.watch h2, .watch h1 { color: #fff }
.watch .dek { color: rgba(255, 255, 255, .82); font-size: var(--ts-lg); line-height: 1.45; max-width: 34em; margin: 16px 0 28px }
.watch .field label { color: rgba(255, 255, 255, .7) }
.watch .field input { border-color: transparent }
.watch .field-note { color: rgba(255, 255, 255, .78) }
.watch .gets { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--gutter); max-width: 1100px }
.watch .gets li { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 14px; font-size: var(--ts-sm); color: rgba(255, 255, 255, .85) }
.watch .gets li b { display: block; color: #fff; font-size: var(--ts-md); margin-bottom: 6px }
.watch .gets li .lab { color: rgba(255, 255, 255, .6); margin-bottom: 8px; display: block }
.watch a { color: #fff }
.watch .eyebrow { color: rgba(255, 255, 255, .6) }
.watch .eyebrow b { color: #fff }
.watch .eyebrow::before { background: rgba(255, 255, 255, .6) }
@media (max-width: 899px) { .watch .gets { grid-template-columns: 1fr } .watch { padding: 48px 0 } }

/* ---- the house card on every mark ---- */
/* never taller than the screen: a held card scrolls inside itself, so its source, read day, doors and Close stay reachable on a phone */
.hc { position: fixed; z-index: 70; width: 290px; max-width: min(300px, 92vw); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; box-shadow: 0 8px 28px rgba(21, 34, 30, .18); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; font-size: var(--ts-sm) }
.hc.show { opacity: 1; transform: none }
.hc.held { pointer-events: auto }
.hc-what { padding: 10px 13px 0; font-weight: 600; line-height: 1.3 }
.hc-fig { padding: 2px 13px 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--ts-md); line-height: 1.35; font-variant-numeric: tabular-nums }
/* mono for the figure alone: the words around it ("At least", "active, 684 more ...") are read, in DM Sans; a figure line with no figure is words */
.hc-fig .hc-w, .hc-fig.words { font: 400 var(--ts-sm)/1.4 var(--font-read); color: var(--ink-2) }
.hc-fig.words { font-weight: 600; font-size: var(--ts-md); color: var(--ink) }
.hc-basis { padding: 6px 13px 0; color: var(--ink-2); line-height: 1.4 }
.hc-rows { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 3px 10px; padding: 9px 13px 10px; font: 400 var(--ts-xs)/1.45 var(--font-read); color: var(--ink-2) }
/* the keys and the read day are mono; a value that's a sentence or a name (the floor, the source) is read in DM Sans */
.hc-rows .k { font-family: var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: var(--ts-2xs) }
/* under 600 the floor's sentence folds behind its key, a press opens it (critic r3 note 2; js/ui.js render) */
.hc-rows .hc-fold-row { grid-column: 1 / -1 }
.hc-fold { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; font: 500 var(--ts-2xs) var(--font-mono); text-transform: uppercase; letter-spacing: .06em }
.hc-fold::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .12s }
.hc-fold[aria-expanded="true"]::before { transform: rotate(45deg) }
.hc-fold:hover { color: var(--ink) }
.hc-fold:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px }
.hc-fold-v { display: block; padding-bottom: 4px }
.hc-fold-v[hidden] { display: none }
.hc-rows .d { font-family: var(--font-mono) }
.hc-rows a { color: var(--ink); overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 36px }
/* a key sits on its value's first line, so a key beside a long sentence (the floor) reads as its label */
.hc-rows { align-items: baseline }
.hc-doors { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 13px 8px; border-top: 1px solid var(--rule) }
.hc-doors a, .hc-doors button { display: inline-flex; align-items: center; min-height: 36px; font: 500 var(--ts-2xs)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--flag-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer }
.hc-doors a:hover, .hc-doors button:hover { text-decoration: underline }
/* a thumb's floor: under 900, or on any coarse pointer, the card's doors, its source link and Close are 44 px */
@media (max-width: 899px), (pointer: coarse) { .hc-doors a, .hc-doors button, .hc-rows a { min-height: 44px } .hc-doors button { min-width: 44px } }
[data-card] { cursor: pointer }
.card-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px }
.card-demo .hc { position: static; opacity: 1; transform: none; pointer-events: auto; width: auto; max-width: none }
.card-demo .h3 { margin: 0 0 10px; font-size: var(--ts-lg) }
.card-demo .state { font-size: var(--ts-sm); color: var(--ink-2); margin-bottom: 12px }
@media (max-width: 899px) { .card-demo { grid-template-columns: 1fr } }
.marks { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 18px }
.marks svg { width: 72px; height: 72px; overflow: visible }
.marks .claim { fill: var(--flag); fill-opacity: .8; stroke: #fff; stroke-width: 1.5; cursor: pointer }
.marks .claim.held { fill: var(--ink-3) }
.marks .claim.filed { fill: #fff; stroke: var(--flag); stroke-width: 3; fill-opacity: 1 }
.marks .claim:hover, .marks .claim:focus-visible, .marks .claim.lit { fill: var(--ink); stroke: var(--flag); stroke-width: 4; fill-opacity: 1 }

/* ---- facts: the record's own fields, as a row of readings ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 24px; margin: 26px 0; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.fact { cursor: pointer }
.fact .lab { margin-bottom: 4px }
.fact .fig { font-size: var(--ts-lg); display: block; line-height: 1.2 }
.fact .fig small { font: 400 var(--ts-sm)/1.3 var(--font-read); color: var(--ink-2); display: block; margin-top: 2px }

/* ---- the foot ---- */
.foot { border-top: 1px solid var(--ink); padding: 44px 0 56px; font-size: var(--ts-sm); color: var(--ink-2) }
.foot h3 { margin-bottom: 14px; color: var(--ink) }
.foot ul { padding-left: 1.2em; max-width: 80ch; margin: 0 0 18px }
.foot li { margin-bottom: 8px }
.foot b { color: var(--ink) }
.foot .stamp { font: 400 var(--ts-xs)/1.5 var(--font-mono); color: var(--ink-3) }
.foot a { color: var(--ink) }

/* ---- the index of the round ---- */
.idx .shots { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 22px }
.idx .shot { border: 1px solid var(--rule); background: #fff; padding: 14px }
.idx .shot h3 { margin-bottom: 4px }
.idx .shot p { font-size: var(--ts-sm); color: var(--ink-2) }
.idx .shot .pair { display: grid; grid-template-columns: minmax(0, 1440fr) minmax(0, 390fr); gap: 14px; align-items: start; margin-top: 10px }
.idx .shot img { border: 1px solid var(--rule); width: 100% }
.idx pre { font: 400 var(--ts-xs)/1.5 var(--font-mono); background: var(--paper-2); padding: 14px; overflow-x: auto; max-width: 100% }
.idx .tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch }
.idx table { border-collapse: collapse; font-size: var(--ts-sm); margin: 12px 0; min-width: 900px }
.idx .pair { min-width: 0 } .idx .pair a { min-width: 0 }
.idx td, .idx th { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top }
.idx th { font: 500 var(--ts-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.idx td.fig { font-size: var(--ts-sm) }

/* ======== n2: the plat sheet =   The subject's own material as the visual system: a cadastral plat. Three components carry it and nothing else does:
   the ruled margin (a band's top rule with survey ticks), the title block (a plat's corner box, Plex Mono rows: the
   sheet, the lines, the acres, the years, the read day; the intro's counter and then the stage's credit), and the
   stake (a claim's corner post with its orange flagging, drawn only beside what sits inside a line and the one act). */
.band { border-top: 0; background-image: linear-gradient(var(--rule), var(--rule)), repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px 48px); background-size: 100% 1px, 100% 7px; background-repeat: no-repeat; background-position: 0 0, 0 0 }
.band.plain { background-image: none; border-top: 1px solid var(--rule) }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--ink); vertical-align: middle; margin-right: 10px; position: relative; top: -1px }
.eyebrow.bare::before { display: none }
/* @critical: the title block */
.tb { position: absolute; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto auto; border: 1px solid var(--ink); background: var(--paper); font: 500 var(--ts-xs)/1.3 var(--font-mono); color: var(--ink); min-width: 15ch; cursor: pointer; box-shadow: 0 0 0 4px var(--paper) }
.tb > span { padding: 5px 10px; border-bottom: 1px solid var(--rule); display: flex; align-items: center }
.tb > span:nth-last-child(-n+2) { border-bottom: 0 }
.tb .k { font-size: var(--ts-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-right: 1px solid var(--rule) }
.tb .v { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.tb .v:empty::after { content: "\200b" } /* an empty value (the years while the opening counts) keeps its line box, so the block's height never changes (lane cl-intro-1019) */
.tb .v.big { font-size: var(--ts-xl); line-height: 1; padding: 6px 10px; letter-spacing: -.02em }
.tb .v.sheet { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: var(--ts-sm) }
@media (max-width: 599px) { .tb { position: static; width: 100%; margin-top: 10px; box-shadow: none } }
/* @/critical */
.stake { display: inline-block; width: 14px; height: 16px; position: relative; vertical-align: -3px; flex: none }
.stake::before { content: ""; position: absolute; left: 4px; top: 0; width: 2px; height: 16px; background: var(--ink) }
.stake::after { content: ""; position: absolute; left: 6px; top: 1px; width: 8px; height: 6px; background: var(--flag); clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%) }
.stakes { list-style: none; margin: 0; padding: 0 }
.stakes li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0 }
.on-ink .stake::before { background: #fff }
.h1-alt { margin-top: 18px; max-width: 24em; color: var(--ink-2); font-size: clamp(26px, 2.6vw, 36px) }

/* ---- the intro: the subject draws itself, once ---- */
html.intro { overflow: hidden }
html.intro .intro-layer, html.intro-out .intro-layer { display: grid; position: fixed; inset: 0; z-index: 60; background: var(--paper); grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; padding: 24px var(--gutter) 28px; gap: 18px; transition: opacity .38s ease }
html.intro-out .intro-layer { opacity: 0; pointer-events: none }
.intro-layer { display: none }
.intro-stage { width: min(100%, calc((100vh - 170px) * 600 / 560)); min-height: 0; position: relative }
.intro-say { font: 500 var(--ts-xs)/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin: 0 }
.intro-say b { color: var(--ink); font-weight: 600 }
html.intro .stage .ln { opacity: 0; transition: opacity .16s ease-out }
html.intro .stage .ln.on { opacity: 1 }
html.intro .mast, html.intro .room-words { opacity: 0; transform: translateY(12px) }
.mast, .room-words { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1) }
html.intro .stage .tb { box-shadow: none }
@media (max-width: 599px) { .intro-stage { width: 100% } html.intro .intro-layer, html.intro-out .intro-layer { align-content: center } }
@media (prefers-reduced-motion: reduce) { html.intro .stage .ln { opacity: 1 } }

/* ---- the loader: a township's 36 sections filling in survey order, the line drawing itself around them ---- */
/* @critical: the loader's box */
.loader { position: fixed; inset: 0; z-index: 65; display: none; place-items: center; background: rgba(245, 247, 243, .94) }
/* @/critical */
.loader.show { display: grid }
.loader-box { display: grid; justify-items: center; gap: 18px; padding: 24px }
.loader-box.inline { position: static; display: grid; border: 1px solid var(--rule); background: var(--paper-2); padding: 28px 24px }
.loader-box svg { width: 128px; height: 128px; overflow: visible; display: block }
.sec { fill: var(--paper-3); stroke: var(--paper); stroke-width: 1; opacity: 0; animation: sec-fill 2.4s linear infinite }
.sec.n { fill: var(--flag-wash) }
.bound { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 496; stroke-dashoffset: 496; animation: draw 1.3s .1s cubic-bezier(.45, 0, .2, 1) both }
.corner { fill: var(--flag) }
.loader-say { font: 500 var(--ts-sm)/1.5 var(--font-mono); color: var(--ink); text-align: center; margin: 0; max-width: 30ch }
.loader-say small { display: block; font-size: var(--ts-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px }
@keyframes sec-fill { 0% { opacity: 0 } 8% { opacity: 1 } 82% { opacity: 1 } 100% { opacity: 0 } }
@keyframes draw { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) { .sec { animation: none; opacity: 1 } .bound { animation: none; stroke-dashoffset: 0 } }
.loaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px }
@media (max-width: 699px) { .loaders { grid-template-columns: 1fr } }
.idx .strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px }
.idx .strip figure { margin: 0 } .idx .strip figcaption { font: 500 var(--ts-2xs)/1.4 var(--font-mono); color: var(--ink-3); margin-top: 6px; letter-spacing: .06em; text-transform: uppercase }
@media (max-width: 699px) { .idx .strip { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.idx .settings h2 { margin-bottom: 6px } .idx .settings p.pick { font-size: var(--ts-sm); color: var(--ink-2) }
/* under 600 px the stage's inset and title block sit in flow under the map, never over each other */
@media (max-width: 599px) { .stage { aspect-ratio: auto } .stage > svg { height: auto; aspect-ratio: 600 / 560 } .stage .inset { position: static; width: 44%; margin-top: 10px } .stage .inset .lab { position: static; display: block; padding: 6px 8px 0 } }
.idx code { font-family: var(--font-mono); font-size: var(--ts-xs) }
/* the words under the intro stay painted (the layer covers them; the browser's LCP is the headline at first paint); they settle by position alone when the layer lifts */
html.intro .mast, html.intro .room-words { opacity: 1; transform: translateY(16px) }
.watch .gets .stake { transform: scale(1.35); transform-origin: left bottom; margin-bottom: 8px }
.idx .stamp, .idx .note, .idx p, .idx li, .foot .stamp { overflow-wrap: anywhere }

/* ---- the intro in place (lane cl-door-1015, the n2 critic's D10): the West inks itself where it stands, beside the words,
   never over them; html.inking is set by the door's switch script on a first visit with motion allowed ---- */
/* fresh ink (lane cl-intro-1019): a line lands in the flag, the stake's orange, and settles to the land over a second;
   html.inking is the opening in full. html.sweep is the short form on a later visit: one wipe over the whole group of
   lines from the east, the way the survey ran west, 0.6 s, no count, one animation (never 1,120 transitions). */
html.inking .stage .ln { opacity: 0; fill: var(--flag); stroke: var(--flag-2); transition: none }
html.inking .stage .ln.on { opacity: 1; fill: var(--land); stroke: var(--land-2); transition: opacity .1s ease-out, fill .9s ease-out .15s, stroke .9s ease-out .15s }
html.sweep .stage .lines, html.sweep .stage .dots { animation: sweep-in .6s cubic-bezier(.3, .6, .2, 1) both }
@keyframes sweep-in { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0 0 0 0) } }
@media (prefers-reduced-motion: reduce) { html.inking .stage .ln { opacity: 1; fill: var(--land); stroke: var(--land-2) } html.sweep .stage .lines, html.sweep .stage .dots { animation: none } }

/* The letter (lane cl-act-wire-1015, KIT.md "The letter"): Opus, mechanical, tokens only; the face is the Fable round's.
   Shown only while the comment window is open. */
.field.wide label { flex: 1 1 100% }
.field textarea { font: 400 16px/1.5 var(--font-read); width: 100%; min-height: 8em; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); resize: vertical; text-transform: none; letter-spacing: 0 }
.picks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.picks label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--ts-sm); color: var(--ink); cursor: pointer }
.picks label:hover { background: var(--paper-2) }
.picks input { width: 24px; height: 24px; margin: -1px 0 0; flex: none; accent-color: var(--ink); cursor: pointer }
.letter { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--ts-sm)/1.6 var(--font-read); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 22px 24px; max-height: 70vh; overflow: auto }
.rows li > .textlink { font-size: var(--ts-sm) }
.letter-print { display: none }
@media print {
  body.print-letter > *:not(.letter-print) { display: none !important }
  body.print-letter .letter-print { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: 400 11pt/1.5 var(--font-read); color: #000 }
}

/* ---- the map (lane cl-map-1015, Will 2026-10-15: "a map section thats full screen here w sidebar etc like our other
   builds"). Opus, a port: the shape of Ambler's atlas and roadless's map with its panel (the panel left at desktop, a
   bottom sheet with a handle on a phone), in this kit's parts and tokens. No new hue: the lines are ink, the flag is for
   the line under the pointer, the one picked and the marks inside. KIT.md "The map". ---- */
.atlas { position: relative; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: 100vh; height: 100dvh; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); scroll-margin-top: 0 }
.atlas.page { height: calc(100vh - var(--mast-h, 65px)); height: calc(100dvh - var(--mast-h, 65px)); border-top: 0 }
.atlas-side { position: relative; min-height: 0; border-right: 1px solid var(--rule); background: var(--paper); z-index: 3 }
.atlas-side-body { height: 100%; overflow-y: auto; padding: 24px 22px 32px; overscroll-behavior: contain }
.atlas-side-body h1, .atlas-side-body h2 { font-size: var(--ts-lg); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 6px }
.atlas-dek { font-size: var(--ts-sm); color: var(--ink-2); margin-bottom: 8px }
.atlas-side-body .what-wrap { margin-bottom: 10px }
.atlas-dek .fig { color: var(--ink); font-weight: 600 }
.atlas-side .field { margin-bottom: 12px }
.atlas-find label { flex: 1 1 100% }
.atlas-find input { width: 100% }
.atlas-side .field-note { margin: 0 0 4px }
.atlas-side .field-note:empty { display: none }
.atlas-zip { flex-wrap: nowrap }
.atlas-zip .btn { flex: 0 0 auto; min-height: 48px; padding-left: 14px; padding-right: 14px }
.atlas-zip .textlink { flex: 0 0 auto; min-height: 48px; padding: 0 2px }
@media (max-width: 340px) { .atlas-zip { flex-wrap: wrap } }
.atlas-filters { margin: 6px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.atlas-filters summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 600 }
.atlas-filters summary::-webkit-details-marker { display: none }
.atlas-filters summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s }
.atlas-filters[open] summary::before { transform: rotate(45deg) }
.atlas-filters summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px }
.atlas-filters-on { margin-left: auto; font: 500 var(--ts-xs)/1 var(--font-mono); color: var(--ink-2) }
.atlas-filters[open] { padding-bottom: 16px }
.atlas-filters .atlas-group:first-of-type { margin-top: 4px }
@media (prefers-reduced-motion: reduce) { .atlas-filters summary::before { transition: none } }
.atlas-hits { margin: -4px 0 14px }
.atlas-hits .note { padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0 }
.atlas-hits button.row { width: 100%; min-height: 44px; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; font: inherit; color: inherit; cursor: pointer }
.atlas-hits button.row:hover .row-name, .atlas-hits button.row:focus-visible .row-name { text-decoration: underline; text-decoration-color: var(--ink) }
.atlas-hits .row.on { box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px }
.atlas-group { margin: 18px 0 0 }
.atlas-group .lab { display: block; margin-bottom: 8px }
.atlas-chips { display: flex; flex-wrap: wrap; gap: 6px }
.atlas-chips .swatch .fig { font-size: var(--ts-xs); color: var(--ink-3) }
.atlas-chips .swatch[aria-pressed="true"] .fig { color: var(--paper) }
.atlas-clear { margin: 10px 0 0 }
.atlas-listh { margin: 18px 0 4px; font-size: var(--ts-lg); line-height: 1.2; letter-spacing: -.02em }
.atlas-count { font-size: var(--ts-sm); color: var(--ink-2); margin-bottom: 10px }
.atlas-count .fig { color: var(--ink); font-weight: 600 }
.atlas-map { position: relative; min-width: 0; min-height: 0 }
/* the wait (Jim 10-20, row cl-6892): while BLM's lines are fetched and drawn the box says so; map.js shows it at wake and hides it on the map's first idle */
.atlas-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; font-size: var(--ts-sm); color: var(--ink-2); white-space: nowrap; pointer-events: none }
.atlas-wait::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, var(--flag) 0 50%, var(--rule) 50% 100%); background-size: 200% 100%; animation: atlas-wait 1.1s linear infinite }
@keyframes atlas-wait { from { background-position: 100% 0 } to { background-position: -100% 0 } }
@media (prefers-reduced-motion: reduce) { .atlas-wait::before { animation: none; background: var(--flag) } }
.atlas-wait[hidden] { display: none }
.atlas-canvas, .atlas .maplibregl-map { position: absolute; inset: 0; background: var(--paper-2); font: 400 var(--ts-sm)/1.4 var(--font-read) }
.atlas-go { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 6px }
.atlas-go .swatch { background: var(--paper) }
.atlas-go .swatch[aria-pressed="true"] { background: var(--ink) }
.atlas-key { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: 320px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px }
.atlas-key .ground-key { margin: 0; gap: 6px 14px; font-size: var(--ts-xs) }
.atlas-key .credit { margin-top: 6px }
.atlas-key [hidden] { display: none }
/* the key folds (Jim 10-20, row cl-61cf): a details at the bottom left, over the Pacific at the West's frame, never over the California desert lines; open on a wide screen, folded under 900 px (map.js at wake) */
.atlas-key summary { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: -8px -4px -4px; padding: 4px; cursor: pointer; list-style: none; font: 500 var(--ts-xs)/1.3 var(--font-read); color: var(--ink) }
.atlas-key summary::-webkit-details-marker { display: none }
.atlas-key summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s }
.atlas-key[open] summary::before { transform: rotate(45deg) }
.atlas-key[open] summary { margin-bottom: 4px }
.atlas-key summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px }
.key-mark.line { width: 16px; height: 11px; border-radius: 1px; background: var(--land); border: 2px solid var(--ink); box-shadow: none }
.atlas-handle { display: none }
.atlas .maplibregl-ctrl-group { border-radius: 4px; box-shadow: 0 0 0 1px var(--rule) }
.atlas .maplibregl-ctrl-group button { width: 40px; height: 40px; cursor: pointer }
.atlas .maplibregl-cooperative-gesture-screen { font-family: var(--font-read); font-size: var(--ts-md) }
@media (max-width: 899px) {
  .atlas { display: block; overflow: hidden }
  .atlas-map { position: absolute; inset: 0 }
  .atlas-side { position: absolute; left: 0; right: 0; bottom: 0; height: 184px; display: flex; flex-direction: column; border-right: 0; border-top: 1px solid var(--ink); border-radius: 10px 10px 0 0; box-shadow: 0 -6px 24px rgba(21, 34, 30, .14); transition: height .3s cubic-bezier(.32, .72, 0, 1) }
  .atlas-side.open { height: 78% }
  .atlas-side.half { height: 52% }
  .atlas-panel-bar { padding: 0 18px }
  .atlas-panel-body { padding: 14px 18px 28px }
  .atlas-side:not(.open):not(.half) .atlas-panel-body { overflow: hidden }
  .atlas-handle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: none; width: 100%; min-height: 48px; padding: 6px 0 4px; border: 0; background: transparent; font: 500 var(--ts-2xs)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); cursor: pointer }
  .atlas-handle::before { content: ""; width: 44px; height: 4px; border-radius: 2px; background: var(--ink-3) }
  .atlas-side-body { height: auto; flex: 1 1 auto; min-height: 0; padding: 4px 18px 28px }
  .atlas-side:not(.open) .atlas-side-body { overflow: hidden }
  .atlas-key { left: 8px; bottom: 192px; max-width: 230px; padding: 8px 10px }
  .atlas-side.open ~ .atlas-map .atlas-key, .atlas-side.half ~ .atlas-map .atlas-key { display: none }
  .atlas-go { left: 8px; top: 8px }
}
/* the smallest phones (320 by 568): the closed sheet takes 150 px, not 184, and the key shrinks so the map keeps most of the screen */
@media (max-width: 360px) {
  .atlas-side { height: 150px }
  .atlas-key { bottom: 158px; max-width: 170px; padding: 6px 8px; font-size: var(--ts-2xs) }
  .atlas-key .credit { display: none }
}

/* ======== the Fable face pass (lane cl-face-fable-1016): the land on screen one, the Wire as a strip, the panel's plate =   Will 2026-10-16: "too monochrome, not alive like Ambler." Four components join the kit here and nothing else draws them. */

/* The room's plate: the photograph under the title block, the ground these lines are drawn on. The West stays the stage; the
   plate sits under it with the plat's corner box bridging the two. On a first visit the lines ink first and the photograph
   develops when they're done (html.inking); reduced motion gets the final frame. */
/* the plate fills what the words leave (Jim 10-20, row cl-9971): the room's second row is the rest of the screen, so a tall screen gets more photograph, never a gap */
.room > .room-plate { grid-column: 2; grid-row: 2; align-self: stretch; margin: 14px 0 0 }
.room > .room-plate { min-height: clamp(170px, 15vw, 230px) }
.room-plate img { position: absolute; inset: 0; width: 100%; height: 100% } /* out of flow, so the photograph never sets the row: the row is the rest of the screen, at least the clamp */
/* The photograph arrives once (lane cl-intro-fix-1020; Will 2026-10-20: "it flashes a bunch"): the head's switch sets html.photo-wait,
   and js/door.js clears it when the image has decoded (one of the sheet's waits, "Pulling the photograph"). Until then a flat
   paper cover of the plate's own size lies over it (::after), never the dark scrim alone and never a half-painted jpeg; then
   the cover fades out over .3 s, one change, with the caption under it. The picture itself is painted at its own load,
   opaque, under the cover: the browser's largest paint is the picture's own time, not the end of a fade (an image faded in
   from opacity 0 is recorded at the fade's end, 350 to 800 ms late on a throttled phone, measured). */
.room-plate::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--paper-2); pointer-events: none; opacity: 0; transition: opacity .3s ease }
html.photo-wait .room-plate::after { opacity: 1; transition: none }
html.photo-wait .room-plate figcaption { visibility: hidden }
.room-plate figcaption { padding: 22px 16px 10px; font-size: var(--ts-xs) }
.room-plate figcaption b { font-size: var(--ts-sm) }
.room-plate figcaption a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); display: inline-block; padding: 9px 0; margin: -9px 0 } /* a 36 px target in a one-line caption */
.room-plate figcaption a:hover { text-decoration-color: #fff }
.room-plate .credit { display: inline; margin: 0 0 0 10px }
@media (max-width: 899px) { .room > .room-plate { grid-column: 1; grid-row: auto; order: -1; margin: 0 calc(-1 * var(--gutter)) 0 } .room-plate { background: var(--paper); min-height: 0 } .room-plate img { position: static; height: 220px } .room-plate figcaption { position: static; background: none; color: var(--ink); padding: 10px var(--gutter) 0 } .room-plate figcaption a { color: var(--ink); text-decoration-color: var(--ink-3) } .room-plate figcaption a:hover { text-decoration-color: var(--ink) } .room-plate figcaption .credit { color: var(--ink-3) } }
@media (prefers-reduced-motion: reduce) { .room-plate::after { transition: none } }

/* The Wire as a strip: what moved last, near the top (it was a band near the foot). The newest three changes, each a door
   with the card; the whole list is /wire/. One ruled strip on paper-2, the stake beside its name, never a card with a
   colored edge. On a phone the first two. */
.wire-strip { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.wire-strip .wrap { display: grid; grid-template-columns: 15ch repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: stretch }
.wire-strip .wire-head { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 0 }
.wire-strip .wire-head .lab { display: flex; align-items: center; gap: 8px; color: var(--ink) }
.wire-strip .wire-head .textlink { min-height: 36px; font-size: var(--ts-sm); color: var(--ink-2) }
.wire-strip .wire-item { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3px; padding: 14px 0 14px var(--gutter); border-left: 1px solid var(--rule); text-decoration: none; color: inherit; min-height: 44px }
.wire-strip .wire-item:hover .wire-words, .wire-strip .wire-item:focus-visible .wire-words { text-decoration: underline; text-decoration-color: var(--ink) }
.wire-strip .wire-when { font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.wire-strip .wire-when b { color: var(--flag-2); font-weight: 600 }
.wire-strip .wire-words { font-size: var(--ts-sm); line-height: 1.4; color: var(--ink); font-weight: 600 }
.wire-strip .wire-sub { font-size: var(--ts-xs); color: var(--ink-2) }
@media (max-width: 899px) {
  .wire-strip .wrap { grid-template-columns: 1fr; gap: 0 }
  .wire-strip .wire-head { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 0 6px }
  .wire-strip .wire-item { padding: 10px 0; border-left: 0; border-top: 1px solid var(--rule) }
  .wire-strip .wire-item:nth-child(n+4) { display: none }
}

/* The panel's plate: when a state office is picked, its photograph from docs/PHOTOS.md at the top of the panel; when an area
   is picked, the photograph whose ground holds it, where one exists. A state with none shows nothing: the gap is the gap. */
.atlas-plate { margin: 0 0 16px }
.atlas-plate .plate { margin: 0 }
.atlas-plate .plate img { height: 132px }
.atlas-plate .plate figcaption { padding: 34px 12px 10px; font-size: var(--ts-xs) }
.atlas-plate .plate figcaption b { font-size: var(--ts-sm); margin-bottom: 0 }
.atlas-plate .plate .credit { margin-top: 2px }
.atlas-plate[hidden] { display: none }

/* The map's list row (lane cl-map-sidebar-1020; Will 2026-10-20, of the stacked list: "this is totally fd"). Three tracks,
   centered: the area's own line as BLM's map draws it at the national level, the words (the name, and the state and acres
   under it, one box, so nothing spans two tracks), the figure. No baseline alignment, no fixed height, and the box's own
   width and height said here at two classes, so no bare class elsewhere (a look's `.sil` at 44 by 36 did it) can shrink it. */
.atlas .atlas-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 0 14px; width: 100%; height: auto; min-height: 60px; overflow: visible; padding: 10px 8px 10px 0; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; transition: background .12s }
.atlas .atlas-row > .row-sil { grid-column: 1; grid-row: 1; width: 40px; height: 32px; display: block }
.atlas .atlas-row > .row-words { grid-column: 2; grid-row: 1; min-width: 0; display: block }
.atlas .atlas-row > .row-fig { grid-column: 3; grid-row: 1; align-self: center }
.atlas .atlas-row .row-name { display: block; line-height: 1.3; overflow-wrap: anywhere }
.atlas .atlas-row .row-sub { display: block; margin-top: 2px; line-height: 1.35 }
.atlas .atlas-row .row-fig { font-size: var(--ts-md); line-height: 1.15 }
.atlas .atlas-row .row-fig small { margin-top: 1px }
.atlas .atlas-row .row-sil path { fill: var(--land); fill-opacity: .9; stroke: var(--land-2); stroke-width: 1; vector-effect: non-scaling-stroke }
/* hover from either side: the row under the pointer, or the line under it on the map, lights the other */
.atlas .atlas-row:hover, .atlas .atlas-row.hov { background: var(--paper-2) }
.atlas .atlas-row:hover .row-name, .atlas .atlas-row.hov .row-name, .atlas .atlas-row:focus-visible .row-name { text-decoration: underline; text-decoration-color: var(--ink) }
.atlas .atlas-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px }
/* the area picked: an ink rule at its left, its silhouette in the flag */
.atlas .atlas-row.on { box-shadow: inset 3px 0 0 var(--ink); padding-left: 0 }
.atlas .atlas-row.on .row-sil path { fill: var(--flag); stroke: var(--flag-2) }

/* The map's panel (lane cl-map-sidebar-1020): a click on a line, a mark or a row opens the area here, the way roadless's
   detail view and the data center tracker's record do. It takes the list's place in the sidebar (on a phone, the sheet's);
   "Back to the list" and Escape bring the list back with the row lit. The kit's parts only: the plate, the facts, a row,
   the label, one button to the area page. */
.atlas-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--paper) }
.atlas-panel[hidden], .atlas-side.paneled .atlas-side-body { display: none }
.atlas-panel-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 22px 0; border-bottom: 1px solid var(--rule) }
.atlas-panel-bar .textlink::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 10px 0 3px }
.atlas-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 32px }
.atlas-panel-body:focus { outline: none }
.atlas-panel-body > .lab { display: block; margin-bottom: 6px }
.atlas-panel-h { font-size: var(--ts-xl); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 8px; overflow-wrap: anywhere }
.atlas-panel-h:focus { outline: none }
.atlas-panel-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.atlas-panel .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 16px 0; padding: 16px 0 }
.atlas-panel .fact.wide { grid-column: 1 / -1 }
.atlas-panel .fact .fig { font-size: var(--ts-lg) }
.atlas-panel .fact .fig.words { font-size: var(--ts-md); line-height: 1.3 }
.atlas-note { font-size: var(--ts-sm); color: var(--ink-2); margin: 0 0 14px }
.atlas-note .fig.words { color: var(--ink) }
.atlas-lab { display: block; margin: 18px 0 6px }
.atlas-panel .rows .row { padding: 10px 0 }
.atlas-door { margin: 22px 0 0 }
.atlas-door .btn { width: 100% }
.atlas-panel .atlas-plate { margin: 0 0 16px }
.atlas-panel-wait { font-size: var(--ts-sm); color: var(--ink-2) }
/* the Watch's carried area (lane cl-walk-fixes-1018): a text link on the ink band reads white, like the band's links */
.watch .textlink { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); font-size: inherit; min-height: 44px }
.watch .textlink:hover { text-decoration-color: #fff }

/* ======== the sheet and the opening (lane cl-intro-1019; Will 2026-10-19: "where's the opening hero screen like roadless and
   where is the loading animation like roadless?") =   THE SHEET is the loader's second face (.loader.sheet; the township is .loader.wait): the plat sheet painted first on every
   load of the door and /map/, the masthead's own line in its own place, the ruled margin, the title block drawing itself with
   the sheet's facts (every figure from data/), and one status line naming the real wait, a tick per wait. js/ui.js lifts it
   the moment the page is ready (fonts, the card map, the map's lines and ground) or at 1,500 ms, whichever is first; never
   held a frame longer. ?sheet=0 never paints it (the proofs). No script: the noscript rule hides it.
   THE OPENING (js/door.js) on a first visit, ?intro=1 or the replay door, never a deep link, never under reduced motion:
     A (html.intro-a, the default): the sheet becomes the screen (.loader.sheet.intro): the West fades up in the middle, the
       title block flies from the sheet's center to the stage's corner, BLM's lines ink in designation order while it counts,
       then the stage flies home to the room and the sheet lifts. The page under it is laid out from the first frame (a
       spacer, .stage-hold, keeps the stage's place), so the layer moves nothing.
     B (html.intro-b): the sheet lifts, the title block flies to the stage's corner at 1.4x and counts there while the lines
       ink in place; it settles to size when they're done. Under 900 px the stage sits below the fold, so B plays as A.
   Any key but Tab, any tap, wheel or touch finishes it; Skip is a visible door; "Watch the lines draw" replays it. */
/* @critical: the sheet */
.loader.sheet { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; place-items: stretch; z-index: 66; background: var(--paper); padding: 0 0 18px; opacity: 1; transition: opacity .4s ease .15s; animation: sheet-cap .4s ease 1500ms forwards }
/* the cap in css too: at 1,500 ms from its first paint the sheet fades out and lets pointers through on its own, even when
   a page's script has the main thread (MapLibre's build), so no reader is ever trapped behind it; the opening holds it open */
@keyframes sheet-cap { to { opacity: 0; pointer-events: none } }
html.inking .loader.sheet, .loader.sheet.intro { animation: none }
.loader.sheet.out { opacity: 0; pointer-events: none }
.loader.sheet.gone, html.no-sheet .loader.sheet { display: none }
.loader.sheet::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); pointer-events: none; background-image: repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px 48px), repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px 48px); background-size: 100% 6px, 100% 6px; background-repeat: no-repeat; background-position: 23px 0, 23px 100% }
.sheet-mast { border-bottom: 0; position: relative; z-index: 1 }
.sheet-mast .mast-logo, .sheet-mast .mast-names { cursor: default }
.sheet-mid { display: grid; place-items: center; align-content: center; min-height: 0; position: relative; padding: 12px var(--gutter); overflow: auto }
.sheet-tb { position: relative; right: auto; bottom: auto; width: auto; margin: 0; font-size: var(--ts-sm); min-width: 24ch; cursor: default; border-color: transparent; animation: tb-border 0s .58s both; box-shadow: 0 0 0 4px var(--paper); will-change: transform }
.sheet-tb > span { padding: 7px 14px; opacity: 0; animation: tb-row .3s ease-out both }
.sheet-tb > span:nth-child(2), .sheet-tb > span:nth-child(3) { animation-delay: .2s }
.sheet-tb > span:nth-child(4), .sheet-tb > span:nth-child(5) { animation-delay: .34s }
.sheet-tb > span:nth-child(6), .sheet-tb > span:nth-child(7) { animation-delay: .48s }
.sheet-tb > span:nth-child(8), .sheet-tb > span:nth-child(9) { animation-delay: .62s }
.sheet-tb > span:nth-child(10), .sheet-tb > span:nth-child(11) { animation-delay: .76s }
.sheet-tb .k { font-size: var(--ts-xs) }
.sheet-tb .v.big { font-size: 44px; padding: 8px 14px }
.sheet-tb .v.sheet { font-size: var(--ts-md) }
.sheet-tb.flown { visibility: hidden }
.tb-draw { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible }
.tb-draw rect { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-tb .6s cubic-bezier(.45, 0, .2, 1) both }
@keyframes draw-tb { to { stroke-dashoffset: 0 } }
@keyframes tb-row { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes tb-border { to { border-color: var(--ink) } }
.sheet-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; min-height: 64px; padding: 0 var(--gutter); font: 500 var(--ts-xs)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); position: relative; z-index: 1; text-align: center }
.sheet-steps { display: inline-flex; gap: 6px }
.sheet-steps i { display: block; width: 22px; height: 2px; background: var(--rule); transition: background .25s }
.sheet-steps i.done { background: var(--ink) }
.sheet-ink { font: 400 var(--ts-sm)/1.4 var(--font-read); letter-spacing: 0; text-transform: none; color: var(--ink-2); max-width: 44em }
.sheet-ink b { color: var(--ink); font-weight: 600 }
.sheet-skip { font: 600 var(--ts-sm)/1.2 var(--font-read); letter-spacing: 0; text-transform: none; color: var(--ink) }
.sheet-skip, .stage-say [data-intro-skip] { min-width: 44px; justify-content: center } /* Skip is a 44 px target both ways */
.sheet-ink[hidden], .sheet-skip[hidden] { display: none }
/* the opening in the sheet (A, and B on a phone): the stage in the middle, the words only after it flies home */
.loader.sheet.intro .sheet-steps, .loader.sheet.intro .sheet-say { display: none }
.loader.sheet.intro .sheet-tb { position: absolute; margin: 0 }
.loader.sheet.intro .stage { width: min(100%, calc((100vh - 210px) * 600 / 560)); opacity: 0; transition: opacity .4s ease }
.loader.sheet.intro .stage.up { opacity: 1 }
.loader.sheet.intro .stage .tb { opacity: 0; transition: opacity .2s ease }
.loader.sheet.intro .stage .tb.in { opacity: 1 }
.stage-hold { width: 100%; aspect-ratio: 600 / 560 }
/* the flight home (lane cl-intro-fix-1020): the stage rides above the sheet while the paper fades out behind it, so there is
   no frame with the stage in neither place (it sat under the opaque sheet for the fade's first 150 ms: the blank frame) */
.stage.flying { z-index: 70 }
/* the opening in place (B): the title block flies in from the sheet and counts at 1.4x, settling when the lines are in */
.room-stage .tb { transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .25s ease }
html.inking-place .room-stage .tb { transform: scale(1.4); transform-origin: 100% 100% }
html.inking-place.tb-wait .room-stage .tb { opacity: 0 }
@media (max-width: 599px) { html.inking-place .room-stage .tb { transform: none } }
/* the words settle when the sheet lifts (transform only: the headline stays painted under the sheet, the page's largest paint) */
html.sheeted .room-words, html.sheeted .mast-nav, html.sheeted .pbi { transform: translateY(14px) }
.mast-nav, .pbi { transition: transform .55s cubic-bezier(.2, .7, .2, 1) }
/* the row under the stage: the ink words and Skip while the opening plays, the replay door otherwise */
.stage-say { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: 0; min-height: 66px; font-size: var(--ts-sm); color: var(--ink-2); max-width: none }
.stage-say .say-ink { flex: 1 1 12em; min-width: 0 }
.stage-say .say-ink b { color: var(--ink) }
/* the ink words and Skip only while the opening plays IN PLACE (html.inking-place, B): in the sheet (A) the sheet's own foot
   carries them, and the row keeps its one height either way so nothing under the stage moves */
.stage-say [data-intro-skip], .stage-say .say-ink, html.inking .stage-say [data-intro-replay] { display: none }
html.inking-place .stage-say [data-intro-skip], html.inking-place .stage-say .say-ink { display: inline-flex }
.stage-say .textlink { font-size: var(--ts-sm) }
@media (prefers-reduced-motion: reduce) {
  .sheet-tb { border-color: var(--ink) } .sheet-tb > span { opacity: 1 } .tb-draw rect { stroke-dashoffset: 0 }
  .stage-say [data-intro-replay] { display: none }
  html.inking-place .room-stage .tb { transform: none }
}
@media (max-width: 599px) { .sheet-tb { position: relative; width: auto; margin: 0; box-shadow: 0 0 0 4px var(--paper); min-width: 0 } .sheet-tb .v.big { font-size: 34px } .loader.sheet.intro .sheet-mid { align-content: start } }
/* @/critical */
/* ======== the run under the map (lane cl-under-map-build-1020 on Will's pick; the three looks were lane cl-under-map-1020's;
   Will 2026-10-20: "not very interactive and one long scroll ... make it engaging"). Five sheets behind one sticky bar, the
   place in the bar, the lights on every West. Every component here joins docs/KIT.md with its one-line rule. No new hue:
   the land for what's drawn, the flag for what's lit or sits inside, ink for the line. A figure inside a sentence is the
   read face, bold (.fig.words), never mono. ======== */
.kicker .fig.words { font-weight: 600; color: var(--ink) }

/* Pull quote: the law's words on paper, a land rule at the left, who wrote it under; the citation lives in the card */
.law.pull { margin: 22px 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--land); background: none; max-width: 40em; position: relative }
.law.pull q { font-size: var(--ts-lg); line-height: 1.4; font-weight: 500; color: var(--ink) }
.law.pull.big q { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em }
.law.pull footer { margin-top: 10px; font-size: var(--ts-sm); color: var(--ink-2) }
.law.pull:hover, .law.pull.lit { border-left-color: var(--flag) }
.pulls .lab { margin: 26px 0 2px }
.pulls .law.pull { margin: 16px 0 }

/* The path: the three steps of a designation, numbered because they are a sequence */
.path { counter-reset: s; list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px }
.path li { position: relative; padding-top: 20px; border-top: 2px solid var(--rule); font-size: var(--ts-sm); color: var(--ink-2); line-height: 1.5 }
.path li::before { counter-increment: s; content: counter(s); position: absolute; top: -15px; left: 0; width: 28px; height: 28px; border: 2px solid var(--ink); background: var(--paper); border-radius: 50%; display: grid; place-items: center; font: 600 var(--ts-xs) var(--font-mono); color: var(--ink) }
.path li b { display: block; color: var(--ink); font-size: var(--ts-md); margin-bottom: 6px; font-weight: 600; line-height: 1.3 }
@media (max-width: 599px) { .path { grid-template-columns: 1fr; gap: 24px } }

/* The values: BLM's eight relevance fields as a row of columns sized by count, each a door and a light on the stage */
.values { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 26px 0 6px; max-width: 680px }
.value { display: grid; grid-template-rows: auto 104px auto; gap: 6px; text-decoration: none; color: inherit; cursor: pointer; align-items: end; padding: 4px 2px; border-radius: 4px }
.value-fig { font-weight: 600; font-size: var(--ts-sm); text-align: center; color: var(--ink) }
.value-bar { display: flex; align-items: flex-end; height: 104px; background: var(--paper-3); border-radius: 3px 3px 0 0; overflow: hidden; margin: 0 6px }
.value-bar i { display: block; width: 100%; background: var(--land); border-radius: 3px 3px 0 0; transition: background .12s }
.value:hover .value-bar i, .value:focus-visible .value-bar i, .value.on .value-bar i { background: var(--flag) }
.value-name { font-size: var(--ts-xs); color: var(--ink-2); text-align: center; line-height: 1.2; min-height: 2.4em }
@media (max-width: 599px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px } .value { grid-template-rows: auto 72px auto } .value-bar { height: 72px; margin: 0 4px } }

/* The offices: eleven rows, each with its silhouette (the states the office's ground reaches, a dot per line), its lines and acres in the read face */
.offices { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 560px }
.office { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit }
.sil { width: 44px; height: 36px; overflow: visible }
.sil .st { fill: var(--stage); stroke: #fff; stroke-width: .8; stroke-linejoin: round }
.sil .dot { fill: var(--land); transition: fill .12s }
.office:hover .sil .dot, .office:focus-visible .sil .dot, .office.on .sil .dot { fill: var(--flag) }

/* One line on real ground: the tiles and the marks arrive when the plate nears (js/under.js) */
.ground-plate { margin-top: 4px }
.ground-plate .tiles image { opacity: 0; transition: opacity .3s }
.ground-plate.tiled .tiles image { opacity: 1 }
.ground-plate .marks.lit .claim:not(.pk), .ground-plate .marks.lit .row:not(.pk) { fill-opacity: .18; stroke-opacity: .3 }
.ground-plate .marks .claim.pk { fill: var(--ink); stroke: var(--flag); stroke-width: 1.6; fill-opacity: 1 }
.proof { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px }
.proof-head h3 { margin-bottom: 6px }
.proof-head p { font-size: var(--ts-sm); color: var(--ink-2); max-width: 60ch }
.proof-ledger h3 { margin-bottom: 10px }
@media (min-width: 900px) { .proof.wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px var(--gutter) } .proof.wide .proof-head { grid-column: 1 / -1 } }
/* under 900 the ground sits directly above the holders it lights (critic r3 item 2): the slot's plate, key and credit become
   the proof's own rows (display: contents), the key over the plate, the credit after the list; while a holder's press holds
   its light (.under.holding-ground, js/under.js) the plate sticks under the tabs and the kit's card opens below it */
@media (max-width: 899px) {
  .proof [data-place-marks] { display: contents }
  .proof .ground-key { order: 1; margin-top: 0 }
  .proof .ground-plate { order: 2; margin-top: 0 }
  .proof > .proof-ledger { order: 3 }
  .proof [data-place-marks] > .credit { order: 4; margin-top: 0 }
  .under.holding-ground .proof .ground-plate { position: sticky; top: var(--under-tabs-h, 98px); z-index: 7; box-shadow: 0 1px 0 var(--rule) }
}

/* a photograph inside a column keeps a landscape frame */
.cols .plate img, .office-fact .plate img { height: clamp(220px, 24vw, 340px) }

/* The ledger: who holds inside one line; a row lights its claims on the ground */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.holder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; width: 100%; min-height: 44px; padding: 9px 0 8px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; align-items: baseline }
.holder-name { font-size: var(--ts-sm); font-weight: 600; overflow-wrap: anywhere }
.holder-fig { font-size: var(--ts-sm); color: var(--ink-2) }
.holder-fig b { color: var(--ink); font-weight: 600 }
.holder:hover .holder-name, .holder.on .holder-name { color: var(--flag-2) }
.ledger-note { margin-top: 12px }
.most { margin-top: 18px; max-width: 60ch }
.most a { font-weight: 600 }
.most a.on, .office-fact .note a.on { text-decoration-color: var(--flag); text-decoration-thickness: 2px }
.note.floor { margin-top: 18px; max-width: 60ch }

/* The timeline: the rule's own clock as one line, dated to today, dashed to not yet; every dot opens its document */
.timeline { position: relative; margin: 34px 0 6px; padding: 150px 0 112px; max-width: 980px }
.tl-axis { position: relative; height: 2px }
.tl-dated { position: absolute; left: 0; width: var(--x); top: 0; height: 2px; background: var(--ink) }
.tl-ahead { position: absolute; left: var(--x); right: 0; top: -1px; border-top: 2px dashed var(--rule) }
.tl-items { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 150px; height: 2px }
.tl-item { position: absolute; left: var(--x); top: 0; width: 0 }
/* the dot is a 36 px button; the 16 px mark is drawn inside it */
.tl-dot { position: absolute; left: -18px; top: -17px; width: 36px; height: 36px; border-radius: 50%; background: none; border: 0; box-shadow: none; cursor: pointer; padding: 0; z-index: 2 }
.tl-dot::before { content: ""; position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--ink) }
.tl-item.yet .tl-dot::before { background: var(--paper); box-shadow: 0 0 0 2px var(--ink-3) }
.tl-item.now .tl-dot::before { background: var(--flag); box-shadow: 0 0 0 2px var(--flag) }
.tl-item.span { width: calc(var(--x2) - var(--x)) }
.tl-item.span .tl-dot { left: 0; right: 0; width: auto; border-radius: 0 }
.tl-item.span .tl-dot::before { left: 0; right: 0; top: 13px; width: auto; height: 10px; border-radius: 5px; background: var(--ink-3); box-shadow: none; border: 0 }
.tl-item.span .tl-lab { left: 50% }
.tl-dot:hover::before, .tl-dot:focus-visible::before, .tl-dot.lit::before { background: var(--flag); box-shadow: 0 0 0 2px var(--flag) }
.tl-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px }
.tl-lab { position: absolute; left: 0; width: 132px; transform: translateX(-50%); text-align: center; line-height: 1.25 }
.tl-item:first-child .tl-lab { left: -6px; transform: none; text-align: left }
.tl-item:last-child .tl-lab { left: auto; right: -6px; transform: none; text-align: right }
.tl-item.up .tl-lab { bottom: 16px }
.tl-item.up2 .tl-lab { bottom: 84px }
.tl-item.down .tl-lab { top: 16px }
.tl-item.up .tl-lab::after, .tl-item.up2 .tl-lab::after, .tl-item.down .tl-lab::before { content: ""; display: block; width: 1px; height: 10px; background: var(--rule); margin: 4px auto }
.tl-item.up2 .tl-lab::after { height: 78px; position: absolute; left: 50%; top: 100%; margin: 4px 0 0 }
.tl-when { display: block; font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) }
.tl-item.now .tl-when { color: var(--flag-2) }
.tl-words { display: block; font-size: var(--ts-sm); font-weight: 600; color: var(--ink); hyphens: manual }
.tl-words .nb { white-space: nowrap }
.tl-item.yet .tl-words { color: var(--ink-2); font-weight: 500 }
@media (max-width: 899px) {
  .timeline { padding: 0; margin-top: 22px }
  .tl-axis { display: none }
  .tl-items { position: static; height: auto; border-left: 2px solid var(--ink); margin-left: 7px }
  .tl-item, .tl-item.span { position: relative; left: auto; width: auto; padding: 0 0 18px 22px }
  .tl-item:first-child .tl-lab, .tl-item:last-child .tl-lab { left: auto; right: auto; text-align: left }
  .tl-item.yet { border-left: 0 }
  .tl-items .tl-item.yet:first-of-type { margin-top: 0 }
  .tl-dot, .tl-item.span .tl-dot { position: absolute; left: -19px; top: -8px; width: 36px; height: 36px; border-radius: 50% }
  .tl-item.span .tl-dot::before { left: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); border: 2px solid var(--paper); background: var(--ink) }
  .tl-item.yet .tl-dot::before { background: var(--paper); box-shadow: 0 0 0 2px var(--ink-3) }
  .tl-item.now .tl-dot::before { background: var(--flag); box-shadow: 0 0 0 2px var(--flag) }
  .tl-lab, .tl-item.span .tl-lab { position: static; width: auto; transform: none; text-align: left }
  .tl-item.up .tl-lab::after, .tl-item.up2 .tl-lab::after, .tl-item.down .tl-lab::before { display: none }
}

/* The days: OIRA's meetings on one axis, a named day each, the no-show hollow; a door to OIRA's page */
.days { list-style: none; margin: 22px 0 0 7px; padding: 0; max-width: 640px }
.day { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--ink); break-inside: avoid }
.day-dot { display: block; min-height: 36px; text-decoration: none; color: inherit }
.day-dot::before { content: ""; position: absolute; left: -9px; top: 3px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); z-index: 2 }
.day-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.day.noshow .day-dot::before { background: var(--paper); box-shadow: 0 0 0 2px var(--ink-3) }
.day-dot:hover::before, .day-dot:focus-visible::before, .day-dot.lit::before { background: var(--flag); box-shadow: 0 0 0 2px var(--flag) }
.day-lab { display: block; line-height: 1.25 }
.day-when { display: block; font: 500 var(--ts-2xs)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) }
.day-who { display: block; font-size: var(--ts-xs); font-weight: 600; color: var(--ink) }
.day-dot:hover .day-who { text-decoration: underline }
.day-sub { display: block; font-size: var(--ts-2xs); color: var(--ink-2) }
/* the meetings are a dated list at every width, folded to five (critic 2026-10-20 items 5 and 12: the August strip's stems ran
   through its labels at Aug 11 and 12 and the two Aug 24s); two columns on a wide screen, each with its own rule */
/* two columns down to a phone's width: the five days shown take three rows, not five */
@media (min-width: 360px) { .days { columns: 2; column-gap: 28px } }

/* The dated list: the legal history, each row a door to its document, the year bold in the read face */
.dated { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 560px }
.dated-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; font-size: var(--ts-sm) }
.dated-row small { color: var(--ink-3); font-size: var(--ts-xs); white-space: nowrap }
.dated-row:hover span, .dated-row:focus-visible span { text-decoration: underline; text-decoration-color: var(--ink) }

/* The plans in motion: each a light on the stage for the lines its notice names */
.plans-lit { list-style: none; margin: 10px 0 0; padding: 0; max-width: 560px }
.plan { display: block; padding: 8px 0; margin: 6px 0; text-decoration: none; color: inherit; min-height: 44px }
.plan:hover b, .plan:focus-visible b, .plan.on b { text-decoration: underline; text-decoration-color: var(--flag); text-decoration-thickness: 2px }
.plan b { display: block; font-weight: 600 }
.plan span { font-size: var(--ts-sm); color: var(--ink-2) }

/* Lighting: a picked set goes flag, the rest fade; a picked office's shape darkens; the caption under the West says what lit */
.stage.lit .ln:not(.pk), .xwest.lit .ln:not(.pk) { fill-opacity: .14; stroke-opacity: .25 }
.stage .ln.pk, .xwest .ln.pk, .stage.lit .ln.pk { fill: var(--flag); stroke: var(--flag-2); fill-opacity: 1; stroke-opacity: 1 }
.stage.lit-st .st:not(.pk) { fill: var(--stage-off) }
.stage .st.pk { fill: var(--paper-3) }

/* The run: one bar of five, one sheet on at a time, the sheet in the address; only the tabs stick (56 px), the place strip
   under them scrolls with the page at every width (critic 2026-10-20 item 4: tabs and strip together stuck at 173 px, 19% of a
   900 px screen) */
.under { padding: 0 }
.under-bar { display: contents }
.under-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: sticky; top: 0; z-index: 8; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.under-tabs [role="tab"] { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px; border: 0; border-right: 1px solid var(--rule); background: none; cursor: pointer; font: 600 var(--ts-sm)/1.2 var(--font-read); color: var(--ink-2); text-align: left }
.under-tabs [role="tab"]:last-child { border-right: 0 }
.under-tabs [role="tab"]:hover { background: var(--paper-2); color: var(--ink) }
.under-tabs [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px }
.under-tabs [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--land) }
.under-sheet { padding: 40px 0 48px; scroll-margin-top: 112px }
.under.js .under-sheet:not(.on) { display: none }
.sheet-head { margin-bottom: 24px }
.sheet-head h2 { max-width: 20em }
.sheet-head .kicker { font-size: var(--ts-lg); line-height: 1.4; color: var(--ink-2); max-width: 40em; margin: 12px 0 0 }
.under-sheet .cols { margin-top: 8px }
.under-sheet h3.sub { margin: 36px 0 8px }
.under-sheet .fig.words { font-weight: 600; color: var(--ink) }
/* the small West: one clone of the room's stage in the slot of the sheet that's on, the caption under it */
.west-slot { min-width: 0 }
/* under 900 the small West moves into the sheet's phone slot, directly above the controls that light it, at a phone size;
   while a press holds a light (.under.holding) it sticks under the tabs, and the kit's card opens below it (js/under.js) */
.west-phone { min-width: 0 }
.west-phone:not(:empty) { margin: 6px 0 14px; padding: 6px 0 2px; background: var(--paper) }
.west-phone .mini-west { max-width: 214px }
.west-phone .mini-say { margin-top: 6px; min-height: 0; font-size: var(--ts-xs) }
@media (max-width: 899px) { .under.holding .west-phone:not(:empty) { position: sticky; top: var(--under-tabs-h, 98px); z-index: 7; box-shadow: 0 1px 0 var(--rule) } }
.mini-west { aspect-ratio: 600 / 560; max-width: 360px; margin: 0 auto }
.mini-west .inset { display: none }
.mini-west svg { overflow: hidden }
.credit.read { font: 400 var(--ts-sm)/1.45 var(--font-read); color: var(--ink-2); margin-top: 8px }
.sheet-head h2 .fig { font-family: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit }
.watch-more { margin-top: 28px }
.xhit { fill: transparent; stroke: none; pointer-events: all }
.pulls > .fold { margin-top: 12px }
.mini-say { position: relative; z-index: 1; font-size: var(--ts-sm); color: var(--ink-2); text-align: center; margin: 14px auto 0; max-width: 40ch; min-height: 2.6em }
@media (max-width: 899px) {
  .under-tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter) }
  .under-tabs::-webkit-scrollbar { display: none }
  .under-tabs [role="tab"] { flex: none; min-height: 48px; padding: 0 12px 0 0; border-right: 0; margin-right: 10px }
  .tl-dot::after { content: ""; position: absolute; inset: -4px }
  .sheet-t { white-space: nowrap }
  .under-sheet { padding: 28px 0 36px; scroll-margin-top: 52px }
  .under-sheet h3.sub { margin-top: 28px }
}

/* The place strip: the line the run answers for, the ZIP field and four picks; in the sticky bar on a wide screen, under it on a phone */
.place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 52px; padding-top: 6px; padding-bottom: 6px; border-top: 1px solid var(--rule) }
.place-for { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.place-name { font-weight: 700; color: var(--ink); font-size: var(--ts-md) }
.place-for .textlink { min-height: 36px }
.place-zip { margin: 0; gap: 8px }
.place-zip label { font-size: var(--ts-2xs) }
.place-zip .zip { width: 7ch; min-height: 38px }
.place-zip .btn { min-height: 38px; padding: 0 12px }
.picks-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.picks-row .lab { margin-right: 4px }
.picks-row .swatch { min-height: 36px }
.place .field-note { flex-basis: 100%; margin: 0; min-height: 0 }
.place .field-note:empty { display: none }
.under.placed .place-name { color: var(--flag-2) }
@media (min-width: 900px) { .place { border-top: 0; border-bottom: 1px solid var(--rule) } }
@media (max-width: 899px) {
  .under-bar .place { position: static; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px }
  .place { border-top: 0; border-bottom: 1px solid var(--rule) }
  /* every target in the strip 44 px on a touch screen (critic 2026-10-20 item 6: the ZIP field and its button were 38, Let go 36) */
  .picks-row .swatch, .place-zip .zip, .place-zip .btn, .place-for .textlink { min-height: 44px }
}

/* The West exploded: each office drawn apart, its lines cloned from the stage; press one for its facts; the place's office pressed and its line lit */
.xwest-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px var(--gutter); align-items: start; margin-top: 10px }
.xwest { position: relative; width: 100% }
.xwest svg { width: 100%; height: auto; overflow: visible }
.xwest .st { fill: var(--stage); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; transition: fill .12s }
.xwest .xshape { cursor: pointer }
.xwest .xshape:hover .st, .xwest .xst.on .st { fill: var(--paper-3) }
.xwest .xshape:focus-visible { outline: none }
.xwest .xshape:focus-visible .st { stroke: var(--focus); stroke-width: 2.5 }
.xwest .lines .ln { fill: var(--land); fill-opacity: .92; stroke: var(--land-2); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .12s }
.xwest .lines .ln:hover, .xwest .lines .ln:focus-visible, .xwest .lines .ln.lit { fill: var(--flag); stroke: var(--flag-2); fill-opacity: 1 }
.xwest .lines .ln:focus-visible { outline: 3px solid var(--focus) }
.xwest .stlab { font: 500 11px var(--font-mono); letter-spacing: .06em; fill: var(--ink-2); text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round }
.xwest.picked .xst:not(.on) { opacity: .32; transition: opacity .15s }
.xwest.lit .ln.pk { stroke-width: 1.6 }
.west-say { position: relative; z-index: 1; font-size: var(--ts-sm); color: var(--ink-2); margin: 6px 0 0; min-height: 2.6em; max-width: 44ch }
.xwest-side { position: sticky; top: 124px }
.office-fact[hidden], .place-where[hidden] { display: none }
.office-line { font-size: var(--ts-md); max-width: 36em }
.office-line b { font-weight: 600 }
.office-fact .plate { margin-top: 18px }
.office-fact .plate img { height: clamp(180px, 20vw, 260px) }
.place-where .ground { margin-top: 14px }
@media (max-width: 899px) { .xwest-grid { grid-template-columns: 1fr } .xwest-side { position: static } }

/* The place on the sheets: the values BLM found here marked, the proof block the place's own, its kinds above its ledger */
.value.here .value-bar i { background: var(--flag) }
.value.here .value-name { color: var(--flag-2); font-weight: 600 }
[data-place-kinds-wrap][hidden] { display: none }
[data-place-kinds-wrap] h3 { margin-bottom: 10px }
[data-place-kinds-wrap] .bars { max-width: none; margin-bottom: 26px }
.under-sheet [data-place-plan]:empty { display: none }
.under-sheet [data-place-plan] b { color: var(--ink) }
[data-place-watch][hidden] { display: none }

/* The Watch's three gets as a ledger: the stake, the thing, its reason, and when */
.watch .gets.ledger { display: block; max-width: 920px; margin-top: 30px }
.watch .gets.ledger li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20ch; gap: 4px 16px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .25); font-size: var(--ts-sm) }
.watch .gets.ledger .get-what b { display: block; color: #fff; font-size: var(--ts-md); margin-bottom: 4px }
.watch .gets.ledger .get-when { font-size: var(--ts-xs); color: rgba(255, 255, 255, .7); text-align: right; padding-top: 5px }
.watch .gets.ledger .stake { margin-top: 2px }
@media (max-width: 599px) { .watch .gets.ledger li { grid-template-columns: 24px minmax(0, 1fr) } .watch .gets.ledger .get-when { grid-column: 2; text-align: left; padding-top: 0 } }

/* The one-line foot: a sentence and the door to How we know */
.foot.one { padding: 34px 0 48px }
.foot.one p { max-width: 72ch; margin: 0 }
.foot.one .stamp { margin-top: 14px }

/* under 600 px the five tabs sit in an even grid, three over two, all five named and on screen, 44 px each (critic 2026-10-20
   item 7: they wrapped 3 + 2 at five widths, Watch floating mid-row); a name wraps inside its tab before it would spill */
/* the mobile sweep of 2026-10-21 (item 5): three over two stuck at 98 px, 17% of a 320 screen; all five now sit in one row
   of 48 px targets, each name wrapping inside its tab at the small size, so the stuck bar is about 50 px and every tab is
   still named and on screen */
@media (max-width: 599px) {
  .under-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 2px; overflow: visible; padding: 0 var(--gutter) }
  .under-tabs [role="tab"] { justify-content: center; min-height: 48px; margin: 0; padding: 0 2px; text-align: center; font-size: var(--ts-xs); line-height: 1.15 }
  .under-tabs .sheet-t { white-space: normal }
}

/* the mobile sweep of 2026-10-21 (docs/critic/2026-10-21-mobile/sweep.md on branch cl-mobile-sweep-1021), its mechanical items */
/* item 6: 44 px targets on a phone or a touch screen, the fold's doors and every swatch (the stage's Lines and Dots, the map's
   filters, the run's picks); a desktop with a mouse is as it was */
@media (max-width: 899px), (pointer: coarse) {
  .fold button, .swatch, .picks-row .swatch { min-height: 44px }
}
/* item 12: a dated list (the Wire) puts its date over the headline under 600, one column, so the headline has the width */
@media (max-width: 599px) {
  .rows.dated .row { grid-template-columns: minmax(0, 1fr) }
  .rows.dated .row-fig { grid-column: 1; grid-row: 1; align-self: start; text-align: left; font-size: var(--ts-sm) }
}
/* item 8: a note that's a sentence reads at 16 px on a phone, as body copy does; the map sidebar's status lines keep theirs */
@media (max-width: 599px) {
  p.note, p.field-note { font-size: 16px }
  .atlas-side p.field-note, .atlas-hits p.note { font-size: var(--ts-sm) }
}