/* ===========================================================================
   cropcircles.photos — the field guide, and the gallery as a viewing mode.

   The site is a public reference to a phenomenon, so every formation is an
   entry and every entry gets a PLATE: one illustration with a caption. When
   the illustration cannot be shown — because no photograph exists, or because
   the build was run with imagery limited to cleared sources — the plate
   becomes a drawing made from the archive's own numbers: a map of where the
   formation was reported, or a record plate carrying the date, the place and
   a circle at the formation's own recorded diameter. The page keeps its shape
   either way and nothing is ever labelled "image missing".

   The GALLERY is the same pages in a second skin, chosen from the masthead and
   remembered in the browser (`html[data-view="gallery"]`, set by view.js before
   first paint). It is presentation only: no page is built twice, no link
   changes, and where a picture cannot be shown it falls back to exactly the
   same drawing the field guide falls back to.

   Two webfonts are served from this tree; nothing here loads a third-party
   asset. Layout is CSS grid with `auto-fill`, so every listing reflows from a
   phone to a wide screen without a breakpoint per page.
   =========================================================================== */

/* ---------- webfonts (self-hosted; see static/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  --paper: #F7F3EA;          /* chalk */
  --paper-2: #FFFDF7;        /* card */
  --paper-3: #EFE9DB;        /* sunk */
  --ink: #1A1815;
  --ink-2: #5E584D;
  --ink-3: #8B8375;
  --rule: #DFD7C5;
  --rule-2: #C9C0AC;
  --deep: #1E3A33;           /* the dark green of a hedge: masthead and footer */
  --deep-ink: #EDE8DB;
  --accent: #9A5B21;         /* burnt ochre: the one colour that means "you are here" */
  --accent-soft: #F2E3D2;
  --flag: #8C2F39;           /* the colour of a caveat */
  --flag-soft: #F6E7E8;
  --ok-soft: #E4EDE6;
  --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 1220px;
  --read: 64ch;
  --plate-bg: var(--paper-3);
  --shade: rgba(26, 24, 21, .07);
  --crop: #A79E90;           /* overridden per plate; a crop hue is a label, never a measurement */
}

/* ---------- the drawn figures -------------------------------------------
   Geometry is baked into the SVG; colour is not, so one record plate, one map
   and one ring serve both the guide and the gallery (report section 4.5).
   ------------------------------------------------------------------------ */
.rp-bg { fill: var(--paper-3); }
.rp-disc { fill: var(--crop); fill-opacity: .20; stroke: var(--crop); }
.rp-nodisc { fill: none; stroke: var(--ink-3); opacity: .6; }
.rp-big { fill: var(--ink); opacity: .88; }
.rp-sub, .rp-cnr { fill: var(--ink-3); }
.rp-crop { fill: var(--crop); }
.sb-frame { fill: none; stroke: var(--rule); }
.sb-fill { fill: var(--deep); opacity: .72; }
.sb-label { fill: var(--ink); }
.sb-ref { fill: var(--ink-3); }
.mp-dot { fill: var(--ink); opacity: .5; }
.mp-dot.soft { fill: var(--rule-2); opacity: .45; }
.mp-mon { fill: none; stroke: var(--ink-3); }
.mp-key { fill: var(--ink-3); }
.mp-scale { fill: none; stroke: var(--ink-3); }
.mp-ring { fill: var(--accent); fill-opacity: .10; stroke: var(--accent); }
.mp-mark { fill: none; stroke: var(--accent); }
.mp-mark-dot { fill: var(--accent); }
.sr-band { fill: var(--accent); fill-opacity: .09; }
.sr-hub, .sr-tick { fill: none; stroke: var(--rule); }
.sr-spoke { stroke: var(--deep); opacity: .8; }
.sr-month { fill: var(--ink-3); }
.sr-peak { fill: var(--deep); }
.yb-bar { fill: var(--deep); opacity: .55; }
.yb-bar.on { fill: var(--accent); opacity: 1; }
.yb-year { fill: var(--ink-3); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* the browser default of 1em 40px silently narrows every plate tile by 80px inside its grid
   track, which is most of this design (found by the design scout, report section 4.5) */
figure { margin: 0; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 var(--sans); font-feature-settings: "kern" 1;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.008em; margin: 0; }
code, .mono { font-family: var(--mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-2); }
.small, .tiny { font-size: 13px; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.nowrap { white-space: nowrap; }
.empty { color: var(--ink-2); font-style: italic; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 90; background: var(--paper-2); padding: 8px 12px; }

/* ---------- masthead ---------- */
.top { background: var(--deep); color: var(--deep-ink); }
.top .bar { max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 18px; min-height: 58px; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 20px; text-decoration: none; color: #fff; white-space: nowrap; }
.brand .dot { color: #C79B5E; }
.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
.top nav a { font-size: 14.5px; text-decoration: none; color: #C9C6B8; padding: 6px 10px; border-radius: 3px; }
.top nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.top nav a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.top form { margin-left: auto; display: flex; align-items: center; }
.top input[type="search"] {
  font: inherit; font-size: 14px; padding: 7px 12px; width: 220px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff;
}
.top input[type="search"]::placeholder { color: #9BA79D; }
@media (max-width: 900px) { .top form { margin-left: 0; width: 100%; padding-bottom: 8px; }
  .top input[type="search"] { width: 100%; } }

/* the view switch: shown only where the script that makes it work is running */
.viewswitch { display: none; align-items: center; gap: 0; margin-left: 6px; }
html.js .viewswitch { display: flex; }
.viewswitch button {
  font: inherit; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .22); background: transparent;
  color: #C9C6B8; cursor: pointer;
}
.viewswitch button:first-child { border-radius: 3px 0 0 3px; }
.viewswitch button:last-child { border-radius: 0 3px 3px 0; border-left-width: 0; }
.viewswitch button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.viewswitch button:hover { color: #fff; }

/* ---------- section furniture ---------- */
main { display: block; }
.band { padding: 48px 0; border-bottom: 1px solid var(--rule); }
.band.sunk { background: var(--paper-3); }
.band-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.band-head h2 { font-size: 26px; }
.band-head .more { margin-left: auto; font-size: 14px; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.kicker { font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px; }
.lede { font-size: 16.5px; color: var(--ink-2); max-width: var(--read); margin: 0 0 6px; }
.page-head { padding: 34px 0 6px; }
.section-body { padding: 32px 0 48px; }
.section-body > h1 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.06; letter-spacing: -.018em; }
.section-body > h2 { font-size: 24px; margin: 34px 0 8px; }
.section-body > p { max-width: var(--read); color: var(--ink-2); }
.section-body > p.hint { max-width: 78ch; }
.range { display: flex; gap: 6px; }
.range input { min-width: 84px; }
.filters label.check { flex-direction: row; align-items: flex-start; gap: 7px; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--ink-2); max-width: 30ch; }
.filters .actions { display: flex; gap: 8px; align-items: center; }
.filters a.btn { font-size: 14px; padding: 7px 14px; border: 1px solid var(--rule-2); border-radius: 2px;
  color: var(--ink-2); text-decoration: none; }
details summary { cursor: pointer; font-size: 14px; color: var(--accent); margin: 14px 0; }
.page-head h1 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.06; letter-spacing: -.018em; }
.page-head .sub { font-size: 16.5px; color: var(--ink-2); margin: 8px 0 0; }
.page-head .count { font: 13px/1 var(--mono); color: var(--ink-3); }
.cols2 { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cols3 { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stack > * + * { margin-top: 14px; }

/* counters under the hero */
.counters { display: flex; flex-wrap: wrap; margin: 26px 0 0; border-top: 1px solid var(--rule); }
.counters div { padding: 14px 26px 4px 0; margin-right: 26px; border-right: 1px solid var(--rule); }
.counters div:last-child { border-right: 0; margin-right: 0; }
.counters b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.counters span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }

/* the older stat strip, kept for the index summaries */
.stats { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--rule); }
.stat { padding: 12px 24px 4px 0; margin-right: 24px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1; }
.stat span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }

/* ---------- the hero ---------- */
.hero { border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  padding-top: 40px; padding-bottom: 34px; }
@media (min-width: 1000px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) 470px; gap: 52px;
  align-items: center; } }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; max-width: 16ch; letter-spacing: -.02em; }
.hero .stand { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; margin: 18px 0 0; }
.hero .stand strong { color: var(--ink); font-weight: 600; }
.hero figure { margin: 0; }
.hero figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }
.hero figcaption b { color: var(--ink-2); font-weight: 600; }

/* ---------- the plate ---------- */
.plate { background: var(--paper-2); border: 1px solid var(--rule); position: relative; height: 100%; }
.plate .art { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: var(--plate-bg); overflow: hidden; }
.plate .art img { width: 100%; height: 100%; object-fit: cover; }
.plate .art svg { width: 100%; height: 100%; display: block; }
/* what a tile is: a photograph of the field, somebody's drawing of it, or neither */
.plate .rolebadge { position: absolute; top: 9px; left: 9px; z-index: 2; display: none;
  font: 500 10px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 1px 8px; background: rgba(0, 0, 0, .55); color: #F2F1EE; }
/* the caption is a <span> so that the whole plate can be one anchor; it is blockified here,
   because an inline box would paint its border-top across the first line of text instead */
.plate .cap { display: block; padding: 11px 13px 13px; border-top: 1px solid var(--rule); }
.plate .cap .name { display: block; font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.plate .cap .meta { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px;
  line-height: 1.4; }
.plate .cap .credit { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.plates { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); }
.plates > a { text-decoration: none; color: inherit; display: block; }
.plates > a:hover .plate { border-color: var(--accent); }
.plates > a:hover .cap .name { text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; }
.plates.tight { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }

/* ---------- the year ribbon ---------- */
.ribbon { background: var(--paper-2); border: 1px solid var(--rule); padding: 16px 18px; }
.ribbon svg.yearbars { width: 100%; height: 92px; display: block; }
.ribbon .years { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 14px; }
.ribbon .years a { font: 12.5px/1 var(--mono); text-decoration: none; color: var(--ink-2);
  padding: 5px 7px; border-radius: 2px; }
.ribbon .years a:hover { background: var(--accent-soft); color: var(--accent); }
.ribbon .years a.big { color: var(--ink); font-weight: 600; }
svg.ring, svg.map { width: 100%; height: auto; display: block; }
.framed { background: var(--paper-2); border: 1px solid var(--rule); padding: 12px; }
.framed figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.5; }

/* ---------- the formation page ---------- */
.rec { padding: 32px 0 0; }
.rec-head { display: flex; gap: 10px 20px; align-items: flex-end; flex-wrap: wrap; }
.rec-head h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -.02em; }
.rec-head .id { font: 13px/1 var(--mono); color: var(--ink-3); padding-bottom: 9px; }
.rec-sub { font-size: 17px; color: var(--ink-2); margin: 6px 0 0; }
.rec-sub .sep { color: var(--rule-2); margin: 0 8px; }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 24px 0 0; }
@media (min-width: 980px) { .rec-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: 40px; align-items: start; } }
.figbox { margin: 0; }
.figbox .frame { background: var(--paper-2); border: 1px solid var(--rule); padding: 12px; }
.figbox .art { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: var(--plate-bg); overflow: hidden; }
.figbox .art img { width: 100%; height: 100%; object-fit: contain; }
.figbox .art svg { width: 100%; height: 100%; display: block; }
.figbox figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.5; }
.figbox figcaption b { color: var(--ink); font-weight: 600; }
.filmstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.filmstrip a { display: block; text-decoration: none; background: var(--paper-2);
  border: 1px solid var(--rule); }
.filmstrip .art { aspect-ratio: 1 / 1; background: var(--plate-bg); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.filmstrip .art img { width: 100%; height: 100%; object-fit: cover; }
.filmstrip .lab { display: block; padding: 5px 6px; font-size: 10.5px; line-height: 1.3;
  color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .filmstrip { grid-template-columns: repeat(3, 1fr); } }

/* the sentence: what the archive knows, said in words */
.sentence { font-family: var(--serif); font-size: 20px; line-height: 1.5; max-width: 52ch;
  color: var(--ink); margin: 0 0 18px; }
.sentence em { font-style: normal; box-shadow: inset 0 -.45em 0 var(--accent-soft); }

/* the record card */
.card { background: var(--paper-2); border: 1px solid var(--rule); padding: 18px 20px; }
.card h3 { font-size: 12.5px; font-family: var(--sans); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.card + .card { margin-top: 18px; }
.card > :last-child { margin-bottom: 0; }
dl.entry { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px;
  font-size: 14.5px; }
dl.entry dt { color: var(--ink-3); white-space: nowrap; }
dl.entry dd { margin: 0; overflow-wrap: anywhere; }
dl.entry dd .qual { color: var(--ink-3); font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 2px 9px;
  border-radius: 2px; background: var(--paper-3); color: var(--ink-2); white-space: nowrap; }
.chip .swatch { width: 8px; height: 8px; border-radius: 50%; }
.chip.src, .chip.tier { font-family: var(--mono); font-size: 11.5px; }
.chip.warn { background: var(--flag-soft); color: var(--flag); }
.chip.ok { background: var(--ok-soft); color: var(--deep); }
.smallmap { border: 1px solid var(--rule); background: var(--paper-2); margin-top: 12px; }
.sizebar { width: 100%; height: auto; display: block; margin-top: 6px; }

/* sections down the record */
.sec { padding: 32px 0; border-top: 1px solid var(--rule); }
.sec > h2 { font-size: 23px; margin-bottom: 4px; }
/* a section with nothing in it still says so, in one quiet line rather than a full band */
.sec.quiet { padding: 15px 0; }
.sec.quiet > h2 { font-size: 16px; display: inline; margin-right: 10px; }
.sec.quiet > .empty { display: inline; font-size: 14px; }
.sec > .lede { margin-bottom: 16px; }
.sec h3 { font-size: 17px; margin: 22px 0 8px; }
.sec h4 { font-size: 15px; margin: 16px 0 6px; }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px;
  font-size: 14.5px; }
.facts dt { color: var(--ink-3); white-space: nowrap; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
ol.tight, ul.tight { margin: 0; padding-left: 1.2em; }
.url { word-break: break-all; font-size: 13px; }
/* a source URL is a link to follow, not a column to read: it is clipped inside a table cell
   so that one long address cannot push the rest of the row off the page */
table.grid .url { display: inline-block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; word-break: normal; }
.hint, .warn-text { color: var(--flag); }

/* the honesty panel: a designed object, not a grey warning */
.notice, .caveat { background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--flag); padding: 16px 20px; max-width: 78ch; margin: 18px 0; }
.notice > :first-child, .caveat > :first-child { margin-top: 0; }
.notice > :last-child, .caveat > :last-child { margin-bottom: 0; }
.notice p, .caveat p { margin: .45em 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.notice b, .caveat strong { color: var(--ink); }
.caveat h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--flag); margin: 0 0 8px; }

/* tables */
.scroll { overflow-x: auto; }
table.grid, table.fields { width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--paper-2); margin: 10px 0; }
table.grid th, table.grid td, table.fields th, table.fields td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid thead th, table.fields thead th { font: 600 11.5px/1.4 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); background: var(--paper-3); white-space: nowrap; }
table.grid tbody th, table.fields tbody th { font-weight: 400; color: var(--ink-3);
  white-space: nowrap; width: 1%; }
table.grid tr.differs td { background: #FBF1E4; }
table.grid.counts td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* image tiles */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  margin: 12px 0; }
a.tile { position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--paper-2); border: 1px solid var(--rule); }
a.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--plate-bg); }
a.tile .role { position: absolute; top: 6px; left: 6px; font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; background: rgba(26, 24, 21, .62); color: #fff; padding: 2px 7px; }
a.tile .cap { display: block; padding: 7px 9px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
a.tile .cap b { display: block; }
.filmstrip .art { display: flex; }
a.tile .cap b { color: var(--ink); font-weight: 600; }
a.tile:hover { border-color: var(--accent); }
.attachment { border-left: 2px solid var(--rule-2); padding-left: 16px; margin: 18px 0; }

/* texts and claims */
.text-doc { background: var(--paper-2); border-left: 2px solid var(--rule-2); padding: 16px 20px;
  margin: 16px 0; }
.text-doc p { font-family: var(--serif); font-size: 16.5px; line-height: 1.62; max-width: var(--read);
  margin: .55em 0; }
.text-doc p.small, .text-doc p.url, .text-doc .small { font-family: var(--sans); font-size: 13px;
  line-height: 1.5; }
.quotes, .claims { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.quotes li, .claims li { border-left: 2px solid var(--accent); background: var(--paper-2);
  padding: 11px 15px; max-width: 76ch; font-family: var(--serif); font-size: 16px; line-height: 1.55; }
.quotes li .who, .claims li .who, .quotes li .small, .claims li .small {
  font-family: var(--sans); color: var(--ink-3); }
.refs { margin: 10px 0; padding-left: 1.2em; font-size: 14px; }

/* neighbours */
.near { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  margin-top: 10px; }
.near a { text-decoration: none; color: inherit; display: flex; gap: 11px; background: var(--paper-2);
  border: 1px solid var(--rule); padding: 9px; }
.near a:hover { border-color: var(--accent); }
.near .thumb { width: 62px; height: 62px; flex: 0 0 auto; background: var(--plate-bg);
  overflow: hidden; display: flex; align-items: center; justify-content: center; }
.near .thumb img { width: 100%; height: 100%; object-fit: cover; }
.near .thumb svg { width: 100%; height: 100%; }
.near .who { min-width: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.near .who b { display: block; font-family: var(--serif); font-size: 15.5px; font-weight: 500;
  color: var(--ink); }
.near .dist { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ---------- listings, months and the pager ---------- */
.month-head { display: flex; align-items: baseline; gap: 14px; margin: 30px 0 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--rule); }
.month-head h3 { font-size: 22px; margin: 0; }
.month-head .n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pills { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 0; }
.pills a { text-decoration: none; font-size: 13.5px; padding: 5px 13px; border: 1px solid var(--rule-2);
  border-radius: 100px; color: var(--ink-2); background: var(--paper-2); }
.pills a.on { background: var(--deep); border-color: var(--deep); color: #fff; }
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 28px 0 0;
  padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; }
.pager a, .pager span.here { text-decoration: none; padding: 5px 11px; border: 1px solid var(--rule-2);
  border-radius: 2px; color: var(--ink-2); background: var(--paper-2); font-variant-numeric: tabular-nums; }
.pager span.here { background: var(--deep); border-color: var(--deep); color: #fff; }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .of { color: var(--ink-3); margin-right: auto; }
.pager .gap { border: 0; background: none; color: var(--ink-3); padding: 5px 2px; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cards a { display: block; text-decoration: none; color: inherit; background: var(--paper-2);
  border: 1px solid var(--rule); padding: 14px 16px; }
.cards a:hover { border-color: var(--accent); }
.cards .card-title { font-family: var(--serif); font-size: 19px; display: block; }
.cards .card-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; display: block; }
.cards .card-id { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ---------- diagram section ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 16px 18px;
  background: var(--paper-2); border: 1px solid var(--rule); margin: 18px 0; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.filters select, .filters input { font: inherit; font-size: 14px; padding: 6px 9px;
  border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); border-radius: 2px;
  min-width: 130px; }
.filters button { font: inherit; font-size: 14px; padding: 7px 14px; border: 1px solid var(--deep);
  background: var(--deep); color: #fff; border-radius: 2px; cursor: pointer; }
.dgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  margin-top: 18px; }
.dtile { background: var(--paper-2); border: 1px solid var(--rule); }
.dtile > a { text-decoration: none; color: inherit; display: block; }
.dtile img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--plate-bg); }
.dtile .cap { display: block; padding: 8px 10px 0; font-size: 12px; line-height: 1.4;
  color: var(--ink-2); }
.dtile .cap b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 500;
  color: var(--ink); }
.dtile .dim { color: var(--ink-3); }
.dtile .dmeta { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 10px 10px; font-size: 11px; }
.dtile .dmeta a { color: var(--accent); }
.dcols { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- search ---------- */
#search-results { margin-top: 18px; }
#search-status { color: var(--ink-2); font-size: 14px; }
.panel { background: var(--paper-2); border: 1px solid var(--rule); padding: 18px 20px; margin: 18px 0; }

/* ---------- footer ---------- */
.foot { background: var(--deep); color: #B9C3B9; padding: 40px 0 56px; font-size: 13.5px;
  line-height: 1.65; margin-top: 0; }
.foot .wrap { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.foot h4 { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #7F8D80; margin: 0 0 9px; }
.foot a { color: #DCE3DA; }
.foot p { margin: .35em 0; }
.foot code { color: #CBD5C9; }

/* ---------- the lightbox (built by site.js) ---------- */
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(11, 11, 12, .93); display: flex;
  flex-direction: column; }
.lb[hidden] { display: none; }
.lb .stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 26px; min-height: 0; }
.lb .stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb .state { position: absolute; color: #C6C3BD; font-size: 14px; }
.lb .state[hidden] { display: none; }
.lb .idx { position: absolute; top: 14px; left: 20px; color: #A6A49E; font: 12px/1 var(--mono); }
.lb button { position: absolute; background: rgba(255, 255, 255, .08); color: #F2F1EE;
  border: 1px solid rgba(255, 255, 255, .18); font-size: 24px; line-height: 1; width: 44px;
  height: 44px; cursor: pointer; border-radius: 3px; }
.lb button:disabled { opacity: .3; cursor: default; }
.lb .prev { left: 14px; top: 50%; margin-top: -22px; }
.lb .next { right: 14px; top: 50%; margin-top: -22px; }
.lb .close { right: 14px; top: 14px; font-size: 20px; }
.lb .cap { padding: 14px 24px 22px; color: #C6C3BD; font-size: 13px; line-height: 1.6;
  max-width: 90ch; margin: 0 auto; }
.lb .cap b { color: #F2F1EE; }
.lb .cap a { color: #D8A657; }

/* ===========================================================================
   THE GALLERY VIEW
   The same markup, dark, with the picture given the room and the photographer
   promoted to the first line of every caption. Where a picture cannot be
   shown, the plate drawing stays exactly as the field guide draws it — this
   view never becomes a wall of empty boxes.
   =========================================================================== */
html[data-view="gallery"] {
  --paper: #0B0B0C;
  --paper-2: #131416;
  --paper-3: #1C1E21;
  --ink: #F2F1EE;
  --ink-2: #A6A49E;
  --ink-3: #7B7974;
  --rule: #26282B;
  --rule-2: #34373B;
  --deep: #08090A;
  --deep-ink: #D8D6D1;
  --accent: #D8A657;
  --accent-soft: #33291A;
  --flag: #D2654F;
  --flag-soft: #2A1A18;
  --ok-soft: #16241B;
  --plate-bg: #1C1E21;
  --shade: rgba(0, 0, 0, .5);
}
html[data-view="gallery"] body { background: var(--paper); color: var(--ink); }
html[data-view="gallery"] .top { border-bottom: 1px solid var(--rule); }
html[data-view="gallery"] .top nav a.on { box-shadow: inset 0 -2px 0 var(--accent); }
html[data-view="gallery"] .foot { background: var(--deep); color: var(--ink-2);
  border-top: 1px solid var(--rule); }
html[data-view="gallery"] h1, html[data-view="gallery"] h2,
html[data-view="gallery"] h3, html[data-view="gallery"] h4 { font-weight: 400; }
html[data-view="gallery"] table.grid tr.differs td { background: #241D14; }
html[data-view="gallery"] .sentence em { box-shadow: inset 0 -.45em 0 var(--accent-soft); }
html[data-view="gallery"] .pills a.on,
html[data-view="gallery"] .pager span.here { background: var(--accent); border-color: var(--accent);
  color: #17130B; }
html[data-view="gallery"] .filters button { background: var(--accent); border-color: var(--accent);
  color: #17130B; }
html[data-view="gallery"] .top input[type="search"] { background: rgba(255, 255, 255, .06); }
/* the briefing's second column is reading furniture, so in this view the hero is one column */
html[data-view="gallery"] .hero .wrap { grid-template-columns: minmax(0, 1fr); }
html[data-view="gallery"] .band { padding: 30px 0; }

/* the wall: plates lose their frame and their gap, and the caption rides on the picture */
html[data-view="gallery"] .plates { gap: 2px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
html[data-view="gallery"] .plates.tight { gap: 2px; }
html[data-view="gallery"] .plate { border: 0; background: var(--paper-3); overflow: hidden; }
html[data-view="gallery"] .plate .art { aspect-ratio: 3 / 2; }
html[data-view="gallery"] .plate .art img { transition: transform .5s ease; }
html[data-view="gallery"] .plates > a:hover .plate .art img { transform: scale(1.04); }
/* The caption is an OPAQUE band over the foot of the picture, not a gradient: 9,018 of the
   archive's diagrams are cropcirclecenter's near-white house style, and a scrim that fades to
   transparent leaves white type on white paper. An opaque band also makes every tile in a mixed
   row line up, which a band-below-the-art for drawings and an overlay for photographs did not. */
html[data-view="gallery"] .plate .cap { position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 0; padding: 10px 12px 11px; background: rgba(8, 9, 10, .82); }
html[data-view="gallery"] .plate .cap .name { font-size: 16px; color: #fff; }
html[data-view="gallery"] .plate .cap .meta { color: #C6C3BD; }
html[data-view="gallery"] .plate .cap .credit { color: var(--accent); }
html[data-view="gallery"] .plate .rolebadge { display: block; }
/* the drawn plate on a dark ground: the same SVG, told which inks to use */
html[data-view="gallery"] .rp-bg { fill: #101613; }
html[data-view="gallery"] .rp-big { fill: #EFEBE1; opacity: .92; }
html[data-view="gallery"] .rp-sub, html[data-view="gallery"] .rp-cnr { fill: #7E8A81; }
html[data-view="gallery"] .rp-nodisc { stroke: #55605A; }
html[data-view="gallery"] .rp-disc { fill-opacity: .30; }
html[data-view="gallery"] .plate .rp-cnr, html[data-view="gallery"] .plate .rp-crop { display: none; }
/* a plate that is a drawing keeps its frame: a drawing is not a photograph and must not pretend */
/* a drawn plate keeps its frame, because a drawing is not a photograph and must not pretend;
   its caption is the same band as every other tile's, so the grid reads as one component */
html[data-view="gallery"] .plate.drawn { border: 1px solid var(--rule); }
html[data-view="gallery"] .plate.drawn .art { background: var(--paper-2); }

/* the record's own plate: give the picture the height it deserves */
html[data-view="gallery"] .figbox .frame { border: 0; padding: 0; background: var(--paper-3); }
html[data-view="gallery"] .figbox .art { aspect-ratio: auto; max-height: 76vh; min-height: 320px; }
html[data-view="gallery"] .figbox .art img { object-fit: contain; }
html[data-view="gallery"] .figbox figcaption { padding: 12px 2px 0; }
html[data-view="gallery"] .figbox .drawn .art { min-height: 0; aspect-ratio: 4 / 3; }
html[data-view="gallery"] a.tile img, html[data-view="gallery"] .filmstrip .art img {
  object-fit: cover; }
html[data-view="gallery"] .dtile img { background: #fff; }

/* the credit line, promoted: in this view the photographer is the first thing said */
.credit-first { display: none; }
html[data-view="gallery"] .credit-first { display: block; font-size: 13px; letter-spacing: .04em;
  color: var(--accent); margin: 0 0 8px; text-transform: uppercase; }
html[data-view="gallery"] .guide-only { display: none; }
.gallery-only { display: none; }
html[data-view="gallery"] .gallery-only { display: block; }

@media print {
  .top, .foot, .pager, .viewswitch { display: none; }
  body { background: #fff; }
}