/* Direction A -- "The Reading Room".
 *
 * A scholarly catalogue that happens to be evidence. Records read as entries,
 * findings sit in the margin as annotations. Chosen over a denser console
 * because this is an instrument to sit in front of for months, and because
 * every screen has to survive being a figure in a published report.
 *
 * The legacy GUR review pages still use app.css and base_legacy.html. They
 * migrate to this when their templates are rewritten under angles/gur/.
 */

:root{
  --paper:#f6f3ec; --paper-2:#efeade; --ink:#1c1b18; --ink-2:#57534a;
  --ink-3:#8a8172; --rule:#d6cfbe; --rule-2:#e6dfce;
  --accent:#8c2f2f; --accent-2:#3f5e4a; --warn:#9a6b18; --link:#7a2a2a;
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"SF Pro Text",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e3ded1;color:var(--ink);font:16px/1.55 var(--serif)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.screen{max-width:1080px;margin:0 auto;background:var(--paper);min-height:100vh;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 44px rgba(60,50,30,.14)}
.pad{padding:34px 46px 90px}

/* Standing statement, fixed to the foot of the window so it is on screen
   wherever a reader lands and however far they scroll. The bar spans the
   viewport but its text is held to the sheet's own column and side padding,
   so it reads as part of the page rather than browser furniture. The 90px
   tail on .pad is the reserve that keeps it clear of the last line. */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(246,243,236,.93);border-top:1px solid var(--rule);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.foot-in{max-width:1080px;margin:0 auto;padding:9px 46px;
  font:11.5px/1.5 var(--sans);color:var(--ink-3)}
.foot-src{color:var(--ink-2)}
.foot-short{display:none}
/* Three lines of standing text is a tenth of a phone screen held permanently.
   Narrow keeps the claim and drops the attribution, which is one tap away in
   the method pages anyway. */
@media (max-width:700px){
  .foot-in{padding:8px 18px;font-size:11px}
  .foot-long{display:none}
  .foot-short{display:inline}
}
/* On paper it is a footnote, not a floating bar. */
@media print{.foot{position:static;background:none;border-top:1px solid #ccc;
  -webkit-backdrop-filter:none;backdrop-filter:none}}

.smallcaps{font:600 10.5px/1.5 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* --- masthead --------------------------------------------------------- */
.mast{border-bottom:2px solid var(--ink);padding:20px 46px 14px;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap}
.mast .wordmark{font-size:23px;letter-spacing:.02em;color:var(--ink);
  line-height:1.15}
.mast .wordmark:hover{text-decoration:none}
.mast nav{display:flex;gap:24px;font:13px/1 var(--sans);color:var(--ink-2);
  flex-wrap:wrap}
.mast nav a{color:var(--ink-2);padding-bottom:3px;border-bottom:2px solid transparent}
.mast nav a:hover{color:var(--ink);text-decoration:none}
.mast nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
.mast .mode{font:11px/1 var(--sans);color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase}

.banner{background:#f7ecd8;border-bottom:1px solid #d9c79c;padding:9px 46px;
  font:13px/1.45 var(--sans);color:#6b5320}

/* --- home ------------------------------------------------------------- */
.lede{max-width:37em;margin:0 0 8px;font-size:19.5px;line-height:1.5;color:#2c2a25}
.tally{display:grid;grid-template-columns:repeat(4,1fr);margin:26px 0 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tally > *{padding:20px 14px 18px;border-right:1px solid var(--rule);
  text-align:center;color:inherit;display:block}
.tally > *:last-child{border-right:0}
.tally a{text-decoration:none}
.tally a:hover{background:var(--paper-2);text-decoration:none}
.tally a:hover .n{color:var(--accent)}
.tally .n{font-size:31px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  transition:color .12s}
.tally a .smallcaps:after{content:" \2192";opacity:.45}
/* A stat block that is not the page's hero: same component, one step down in
   weight, so a headline figure inside a page still reads as a headline
   without competing with the masthead tally above it. */
.tally.small .n{font-size:24px}
.tally.small > *{padding:15px 12px 14px}

/* The findings block. Same .tally grid so the numbers keep the one type
   scale in the product, with a sentence and a way in under each: a figure
   the reader cannot follow is most of the value lost on a corpus this size. */
.tally.findings{grid-template-columns:repeat(3,1fr);margin-top:0}
.tally.findings > *{text-align:left;padding:20px 22px 20px 0}
.tally.findings > *:first-child{padding-left:0}
.tally.findings > * + *{padding-left:22px}
.tally.findings .fs{margin:8px 0 0;font:13.5px/1.6 var(--sans);color:var(--ink-2)}
.tally.findings .fc{margin-top:10px;font:12px/1.4 var(--sans);color:var(--accent);
  display:block}
.tally.findings .fc:hover{text-decoration:underline}
.findings-head{margin:34px 0 0;border-top:2px solid var(--ink);padding-top:14px}

/* Planned work. A numbered programme, not a list of apologies: the reader of
   this instrument is served by knowing which questions are still open. */
.planned{list-style:none;counter-reset:pw;margin:0;padding:0}
.planned li{counter-increment:pw;display:grid;grid-template-columns:28px 1fr;
  gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.planned li:before{content:counter(pw);font:600 12px/1.9 var(--sans);
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.planned .t{font-size:17px}
.planned .fam{display:inline-block;margin-left:9px;padding:1px 7px;
  font:600 9.5px/1.7 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--rule);background:var(--paper-2);
  vertical-align:2px}
.planned .d{margin:4px 0 0;font:13.5px/1.55 var(--sans);color:var(--ink-2);
  max-width:44em}

.ways{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;
  border-top:1px solid var(--rule)}
.way{padding:19px 26px 19px 0;border-bottom:1px solid var(--rule)}
.way:nth-child(odd){border-right:1px solid var(--rule);padding-right:30px}
.way:nth-child(even){padding-left:30px}
.way h3{font-size:17.5px;font-weight:600;margin:0}
.way p{margin:5px 0 0;font:14px/1.5 var(--sans);color:var(--ink-2)}
.way .cue{margin-top:9px;font:12px/1.4 var(--sans);color:var(--accent)}
.way .cue a{color:var(--accent)}

.angles{margin-top:34px;border-top:2px solid var(--ink);padding-top:16px}
.angle-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.angle-row .t{font-size:17px;white-space:nowrap}
.angle-row .d{font:13px/1.4 var(--sans);color:var(--ink-2);flex:1}
.angle-row .s{font:12px/1.4 var(--sans);color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pending{color:#a49a86;font-style:italic}

/* --- the shared page head --------------------------------------------- */
/* One anatomy for every page: eyebrow, title, the original underneath, one
   line of definition. Defined here rather than inline in each template
   because twelve templates had twelve slightly different h2 rules. */
.pagehead{margin:0 0 4px}
.pagehead .eyebrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pagehead .eyebrow a{color:var(--ink-3)}
.pagehead .eyebrow a:hover{color:var(--ink)}
.ph-title{font-size:26px;line-height:1.25;font-weight:600;margin:7px 0 0;
  max-width:26em}
.ph-def{margin:9px 0 0;max-width:38em;font:15px/1.6 var(--sans);color:var(--ink-2)}

/* --- families: one hue each ------------------------------------------- */
/* Families are the actual nav taxonomy, so the colour belongs to the family
   and the angle dots inherit their family's hue rather than the reverse.
   The angle dot classes below are unchanged: renaming a family must not
   restyle a mark that is already on a page. */
:root{--fam-patterns:#6b5b7b; --fam-matches:#8c2f2f; --fam-trails:#2f5c8c}
.dot.fam{background:var(--ink-3)}
.dot.fam-patterns{background:var(--fam-patterns)}
.dot.fam-matches{background:var(--fam-matches)}
.dot.fam-paper-trails{background:var(--fam-trails)}

/* --- a family landing page -------------------------------------------- */
.methods{margin-top:26px;border-top:2px solid var(--ink)}
.method-row{padding:16px 0 17px;border-bottom:1px solid var(--rule)}
.mr-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.mr-name{font-size:18px}
.mr-why{margin:6px 0 0;max-width:44em;font:14px/1.55 var(--sans);color:var(--ink-2)}
.state{font:600 10px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap}
.state.on{color:var(--accent-2)}
.state.wip{color:var(--warn)}
.state.off{color:var(--ink-3)}

/* --- marks: one hue per line of inquiry, stated once ------------------- */
/* The marginalia paragraphs on an institution page: one mark, one note,
   with air between them. Without this they set solid. */
.inst-marks{margin-top:18px;max-width:46em}
.inst-marks .note{margin:0 0 10px}

/* Marks grouped by line of inquiry: the colour-dotted name, then its notes
   set off by a rule in the group's ink. */
.marg-group{margin-top:15px}
.marg-group:first-child{margin-top:0}
.marg-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.marg-group .note{margin:0 0 8px 4px;padding-left:13px;
  border-left:2px solid var(--rule)}

.marks-line{margin-top:15px;display:flex;gap:22px;flex-wrap:wrap;
  font:13px/1.5 var(--sans)}
.marks{margin-top:7px;display:flex;gap:14px;flex-wrap:wrap;font:11.5px/1.5 var(--sans)}
.mk{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.gur{background:var(--accent)}
.dot.seizures{background:#2f5c8c}
.dot.time{background:#6b5b7b}
.dot.acquisitions{background:#7b8b3a}
.dot.texty{background:#2f6f6a}
.dot.finder{background:#a8752c}
.dot.none{background:#c9c1ae}
/* Occupied territory is a place, not a line-of-inquiry mark, so it gets its
   own non-mark hue rather than borrowing .dot.gur (which meant "GUR match"
   on the same institutions list). */
.dot.occupied{background:#8a4b2d}

/* --- entries ---------------------------------------------------------- */
.inst-head{border-bottom:1px solid var(--rule);padding-bottom:20px}
.inst-head h2{font-size:26px;line-height:1.25;max-width:24em;font-weight:600;margin:6px 0 0}
.legalname{font:400 13px/1.4 var(--sans);color:var(--ink-3);max-width:38em;margin:4px 0 0}
/* The register's own original beside an English-first name (English-first
   layer, i18n.py): a dim second line, distinct from .legalname which is
   specifically the full legal name and stays only on institution.html. */
.orig{font:400 13px/1.4 var(--sans);color:var(--ink-3);max-width:38em;margin:4px 0 0}
.inst-meta{margin-top:9px;font:13px/1.55 var(--sans);color:var(--ink-2)}

.cols{display:grid;grid-template-columns:200px 1fr;gap:38px;margin-top:26px}
.facet{margin-bottom:24px}
.facet ul{list-style:none;margin:9px 0 0;padding:0;font:13.5px/1.9 var(--sans)}
.facet li{display:flex;justify-content:space-between;gap:10px}
.facet li b{font-weight:500;color:var(--ink)}
.facet li span{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.facet li a{color:var(--ink)}

.entry{display:grid;grid-template-columns:74px 1fr auto;gap:18px;
  padding:17px 0;border-bottom:1px solid var(--rule);align-items:start}
.entry .ttl{font-size:16.5px;line-height:1.35}
.entry .sub{margin-top:4px;font:13px/1.5 var(--sans);color:var(--ink-2)}
.entry .no{text-align:right;font:12px/1.5 var(--sans);color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* A thumbnail that has not been generated yet is not the same as an object
   the register published no photograph for. Showing one placeholder for both
   would misrepresent the corpus. */
.ph{aspect-ratio:1;border:1px solid var(--rule);display:block;
  background:repeating-linear-gradient(45deg,#e2dbc9 0 6px,#e9e3d4 6px 12px)}
.ph.absent{background:#f4f1e8;border-style:dashed}
/* An image the register does publish but our copy has not arrived for. The
   element keeps its own box so lists stay aligned; only the browser's broken
   -image icon is replaced, by the same hatching .ph uses for pending. */
img.ph-fail{background:repeating-linear-gradient(45deg,#e2dbc9 0 6px,#e9e3d4 6px 12px);
  border:1px solid var(--rule)}
.entry img{width:74px;aspect-ratio:1;object-fit:cover;border:1px solid var(--rule)}

/* --- tables ----------------------------------------------------------- */
.rows{width:100%;border-collapse:collapse;margin-top:20px;font:14px/1.5 var(--sans)}
/* Every cell keeps padding on BOTH sides. Zeroing padding-right on the
   right-aligned columns ran the headers together into "RECORDSMARKED" and
   pushed each row's marks hard against its record count. */
.rows th{text-align:left;padding:8px 18px 8px 0;border-bottom:1px solid var(--ink);
  font:600 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;vertical-align:bottom}
.rows td{padding:11px 18px 11px 0;border-bottom:1px solid var(--rule);
  vertical-align:top}
.rows th:last-child,.rows td:last-child{padding-right:0}
.rows td.r,.rows th.r{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.rows tr:hover td{background:var(--paper-2)}
/* The marks column wraps rather than forcing the table wide. */
.rows td .marks{margin-top:0;gap:6px 14px}

/* --- object ----------------------------------------------------------- */
.obj{display:grid;grid-template-columns:1.05fr .95fr;gap:44px}
.plate{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--paper-2);
  border:1px solid var(--rule)}
.plate-cap{margin-top:9px;font:11.5px/1.5 var(--sans);color:var(--ink-3)}
.byline{margin-top:7px;font-size:17px;color:var(--ink-2);font-style:italic}
.obj h2{font-size:25px;line-height:1.28;font-weight:600;margin:8px 0 0}

dl{margin:24px 0 0;display:grid;grid-template-columns:auto 1fr;gap:0 18px}
dt{font:600 10.5px/2.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-top:5px;white-space:nowrap}
dd{margin:0;padding:4px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px;
  font-family:var(--sans)}

.marginalia{margin-top:28px;border-left:3px solid var(--accent);padding:2px 0 2px 18px}
.marginalia h3{font-size:15px;font-weight:600;margin:0 0 10px}
.note{margin:0 0 13px;font:13.5px/1.55 var(--sans);color:#2c2a25}
.note b{font-weight:600}
/* A footnote belongs to the table above it, but sitting flush against the last
   rule reads as another row. Give it air, and set it back from body prose. */
.fn{margin:20px 0 13px;font:13px/1.55 var(--sans);color:var(--ink-2)}
.fn sup{color:var(--ink-3);margin-right:2px}
.note .src{color:var(--ink-3);font-size:12px;display:block;margin-top:3px}

.desc{margin-top:24px;font-size:15px;line-height:1.62;color:#33302a;max-width:38em}

.searchbox{width:100%;padding:11px 14px;font:16px/1.3 var(--serif);
  border:1px solid var(--rule);background:#fff;color:var(--ink)}

.more{padding:18px 0;font:13px/1.4 var(--sans);color:var(--ink-3)}

/* A hover/focus hint: explanation that would otherwise be a block of text
   on the page. tabindex="0" on the trigger keeps it reachable by keyboard;
   :focus-within keeps it open while focused, matching the nav dropdowns. */
.hint{display:inline-block;font:12.5px var(--sans);
  color:var(--ink-2);border-bottom:1px dashed var(--ink-3);cursor:help}
/* The pop anchors to the paragraph (.hint-holder), not the trigger span:
   a trigger at the end of a long line put a trigger-anchored pop past the
   right edge of the screen. */
.hint-holder{position:relative}
.hint-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);
  z-index:30;width:min(460px,84vw);background:#fff;
  border:1px solid var(--rule);box-shadow:0 6px 24px rgba(0,0,0,.12);
  padding:12px 15px;font:12.5px/1.55 var(--sans);color:var(--ink-2);
  /* Inside a table header the pop would inherit smallcaps, letterspacing
     and nowrap; the explanation is prose and must not. */
  white-space:normal;text-transform:none;letter-spacing:normal;
  text-align:left;font-variant-numeric:normal}
.hint:hover .hint-pop,.hint:focus-within .hint-pop{display:block}

/* A sub-page of an angle, listed in its family dropdown one step indented. */
.drop-menu .subnav{padding-left:26px;font-size:12.5px}

@media (max-width:860px){
  /* Wide tables scroll sideways rather than crushing their columns into
     single-word rubble. min-width keeps the row rules spanning the screen
     when the table is naturally narrower than it. */
  .rows{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    min-width:100%}
  .obj,.cols{grid-template-columns:1fr;gap:26px}
  .tally{grid-template-columns:1fr 1fr}
  .tally.findings{grid-template-columns:1fr}
  .tally.findings > *,.tally.findings > * + *{padding-left:0;padding-right:0}
  .ways{grid-template-columns:1fr}
  .way:nth-child(odd){border-right:0;padding-right:0}
  .way:nth-child(even){padding-left:0}
  .pad,.mast,.banner{padding-left:20px;padding-right:20px}
}

/* --- accession vs registration ---------------------------------------- */
/* Two different events, and the register publishes only the second. Showing
   them side by side is the point: the gap between them is the finding. */
.acct{display:flex;align-items:stretch;gap:18px;margin:20px 0 0;max-width:640px}
.accbox{flex:1;border:1px solid var(--rule);background:var(--paper-2);padding:16px 18px 17px}
.accl{font:600 10px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3)}
.accv{font-size:21px;line-height:1.25;margin-top:7px;font-variant-numeric:tabular-nums}
.accs{margin-top:9px;font:12px/1.6 var(--sans);color:var(--ink-2)}
.accarrow{align-self:center;color:var(--ink-3);font-size:20px}

/* The note reads as part of the pair above it, so it takes their width rather
   than the body measure. Sitting wider than the boxes it explains made the
   whole block look misaligned. */
.accnote{max-width:640px;margin-top:14px}
.warnnote{background:#f7ecd8;border-left:3px solid var(--warn);padding:13px 16px}

/* --- proportional bars ------------------------------------------------ */
/* A number in a column is a fact; a bar beside it is a comparison. On a
   corpus this lopsided the comparison is most of the point. */
.bar{height:4px;background:var(--rule-2);margin-top:7px;max-width:190px;
  border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink-3);border-radius:2px}
.rows td .bar i{background:var(--accent)}

/* --- the random specimen ---------------------------------------------- */
.specimen{display:grid;grid-template-columns:220px 1fr;gap:26px;margin-top:34px;
  padding:24px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
/* Hatched while the file is in flight: reads from the object-store mount can
   take tens of seconds, and a bare empty frame for that long looks broken.
   The image paints over this the moment it arrives; if it 404s the whole
   plate is removed (data-onerr="hide"). */
.specimen-plate img{background:repeating-linear-gradient(45deg,#e2dbc9 0 6px,#e9e3d4 6px 12px);
  width:220px;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--rule);display:block;background:var(--paper-2)}
.specimen-body h3{font-size:21px;font-weight:600;margin:8px 0 0;line-height:1.3}
.specimen-meta{margin-top:12px;font:13.5px/1.65 var(--sans);color:var(--ink-2)}
.specimen-cue{margin-top:12px;font:12px/1 var(--sans)}
.specimen-cue a{color:var(--accent)}

/* --- the lines-of-inquiry working pages ------------------------------- */
/* Ported from the dark console styling they were built in. Same markup, so
   the pages keep working; the voice is now the rest of the instrument's. */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 8px;
  padding-bottom:16px;border-bottom:1px solid var(--rule)}
.filters input[type=text],.filters select{padding:7px 10px;font:13.5px/1.3 var(--sans);
  border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:0}
.filters input[type=text]{min-width:230px}
.filters button{padding:7px 14px;font:13.5px/1.3 var(--sans);border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer}
.filters .clear{font:13px/1 var(--sans);color:var(--accent)}
.filters .count{margin-left:auto;font:12px/1 var(--sans);color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase}

.card{border-top:1px solid var(--rule);padding:24px 0 6px;margin-top:8px}
.card > header{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  margin-bottom:16px}
.card > header .t{font-size:19px;font-weight:600}
.card > header .dim{font-size:15px;color:var(--ink-2);font-style:italic}
.card > header .score{margin-left:auto;display:flex;gap:16px;align-items:baseline;
  font:12px/1 var(--sans);color:var(--ink-2)}
.card > header .score b{color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pane{position:relative}
.pane img{width:100%;max-height:min(58vh,620px);object-fit:contain;display:block;
  background:var(--paper-2);border:1px solid var(--rule);cursor:zoom-in}
.pane .side{display:block;margin-bottom:7px;font:600 10px/1.4 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pane .empty{display:flex;align-items:center;justify-content:center;height:220px;
  border:1px dashed var(--rule);color:var(--ink-3);font:13px/1 var(--sans)}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
.facts dt{font:600 10px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-top:12px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:3px 0 0;font:14px/1.5 var(--sans)}
.facts .dim{color:var(--ink-2)}
.mono{font-variant-numeric:tabular-nums}
.dim{color:var(--ink-2)}

.tag{display:inline-block;padding:2px 8px;font:600 10.5px/1.6 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;border:1px solid}
.tag.ok{color:#2c5c42;border-color:#8fb8a1;background:#eaf3ec}
.tag.no{color:#7a2a2a;border-color:#d4a3a3;background:#f7ecec}
.tag.c{color:#2f4d6e;border-color:#a8bdd2;background:#eaf0f6}
.tag.n{color:#6b5320;border-color:#d9c79c;background:#f7ecd8}

.rev-head{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.rev-head h1{font-size:26px;font-weight:600;margin:0}
.rev-count{font:12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--rule-2)}
.actions input[type=text]{flex:1;min-width:200px;padding:7px 10px;
  font:13.5px/1.3 var(--sans);border:1px solid var(--rule);background:#fff}
.actions button{padding:7px 16px;font:13.5px/1.3 var(--sans);cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.actions button.rej{background:var(--paper);color:var(--accent);
  border-color:var(--accent)}
.empty-state{padding:40px 0;text-align:center;color:var(--ink-3);
  font:14px/1.5 var(--sans)}
.legend{margin:18px 0;font:13px/1.7 var(--sans);color:var(--ink-2)}
h1{font-size:26px;font-weight:600;margin:0 0 6px;line-height:1.25}
h2{font-size:20px;font-weight:600;margin:30px 0 4px}

/* lightbox, carried over from the console pages */
.lb{position:fixed;inset:0;background:rgba(28,27,24,.94);display:none;
  align-items:center;justify-content:center;z-index:50;padding:30px}
.lb.on{display:flex}
.lb img{max-width:96vw;max-height:92vh;object-fit:contain}
.lb .hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  color:#bdb6a6;font:12px/1 var(--sans)}

/* --- generic tables inside the working pages -------------------------- */
.tw{margin-top:20px;overflow-x:auto}
.tw table{width:100%;border-collapse:collapse;font:13.5px/1.5 var(--sans)}
.tw thead th{text-align:left;padding:8px 18px 8px 0;vertical-align:bottom;
  border-bottom:1px solid var(--ink);font:600 10.5px/1.5 var(--sans);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap}
.tw td{padding:11px 18px 11px 0;border-bottom:1px solid var(--rule);
  vertical-align:top}
.tw th:last-child,.tw td:last-child{padding-right:0}
.tw tbody tr:hover td{background:var(--paper-2)}
.tw td.r,.tw th.r{text-align:right;font-variant-numeric:tabular-nums}
.tw .bar{max-width:200px}

/* --- tier badge -------------------------------------------------------- */
/* The short name is a second element inside the badge and was running
   straight into the code: "N1NAMED BY GUR". */
.tag .tn{margin-left:7px;padding-left:7px;border-left:1px solid currentColor;
  opacity:.72;font-weight:500}

/* --- tier legend ------------------------------------------------------- */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:22px 0 26px}
.legend .lg{display:block;background:var(--paper);padding:14px 16px 16px;
  text-decoration:none;color:inherit}
.legend .lg:hover{background:var(--paper-2);text-decoration:none}
.legend .lg.on{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--accent)}
.lgh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lgn{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--ink)}
.lgt{margin-top:9px;font:600 13.5px/1.35 var(--sans);color:var(--ink)}
.lgd{margin-top:5px;font:12.5px/1.5 var(--sans);color:var(--ink-2)}

/* --- candidate grid ---------------------------------------------------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:20px;margin-top:22px}
.cc{display:block;text-decoration:none;color:inherit}
.cc:hover{text-decoration:none}
.cc:hover .cct{color:var(--accent)}
.cci{aspect-ratio:1;border:1px solid var(--rule);background:var(--paper-2);
  overflow:hidden}
.cci img{width:100%;height:100%;object-fit:cover;display:block}
.ccb{padding-top:9px}
.cct{margin-top:7px;font:15px/1.35 var(--serif);color:var(--ink)}
.ccm{margin-top:3px;font:12px/1.45 var(--sans);color:var(--ink-2)}
.fno{display:inline-block;margin-left:6px;padding:1px 6px;font:600 10.5px/1.6 var(--sans);
  letter-spacing:.06em;border:1px solid var(--rule);background:var(--paper-2);
  color:var(--ink-2);font-variant-numeric:tabular-nums}

/* --- families in the masthead ----------------------------------------- */
/* Object matching holds every method working from a reference set; the
   dropdown makes that hierarchy visible instead of listing one method as
   though it were the whole family. */
.mast nav .drop{position:relative;display:inline-block}
.drop-label{cursor:pointer;color:var(--ink-2);padding-bottom:3px;
  border-bottom:2px solid transparent}
.drop:hover .drop-label{color:var(--ink)}
.drop-label.on{color:var(--ink);border-bottom-color:var(--accent)}
.drop-label:after{content:" \25be";opacity:.5;font-size:10px}
.drop-menu{display:none;position:absolute;left:-14px;top:100%;padding-top:10px;
  min-width:230px;z-index:20}
/* :focus-within as well as :hover. Without it the menu is a mouse-only
   affordance: a keyboard user tabbing to the family label could never see
   the methods under it. The label itself is a link to the family page, so
   touch, which has no hover, gets there too. */
.drop:hover .drop-menu,.drop:focus-within .drop-menu{display:block}
.drop-menu > *{display:block;background:var(--paper);border:1px solid var(--rule);
  border-bottom:0;padding:10px 14px;font:13px/1.35 var(--sans);color:var(--ink)}
.drop-menu > *:last-child{border-bottom:1px solid var(--rule)}
.drop-menu a:hover{background:var(--paper-2);text-decoration:none;color:var(--accent)}
.drop-menu .off{color:var(--ink-3)}
.drop-menu .off em{display:block;font-style:italic;font-size:11.5px;opacity:.8;
  margin-top:2px}

/* --- parent and child institutions ------------------------------------ */
.kin{margin-top:10px;font:13.5px/1.5 var(--sans);color:var(--ink-2)}
.kin-block{margin-top:24px;padding:16px 18px;background:var(--paper-2);
  border:1px solid var(--rule)}
.kin-list{list-style:none;margin:10px 0 0;padding:0;font:13.5px/1.5 var(--sans);
  columns:2;column-gap:30px}
.kin-list li{break-inside:avoid;padding:4px 0;display:flex;justify-content:space-between;
  gap:12px}
.kin-list li span{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:860px){.kin-list{columns:1}}

/* --- glossary ---------------------------------------------------------- */
.gloss{display:block;margin-top:14px}
.gloss dt{font:600 15px/1.4 var(--serif);color:var(--ink);text-transform:none;
  letter-spacing:0;margin-top:16px;padding-top:0}
.gloss dd{margin:4px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-2);
  font:14px/1.6 var(--sans);color:var(--ink-2);max-width:44em}
.gloss dd b{color:var(--ink)}
/* Baselines headline band: the home tally, six across. */
.tally.six{grid-template-columns:repeat(6,1fr)}
.tally.six .n{font-size:24px}
@media (max-width:900px){.tally.six{grid-template-columns:repeat(3,1fr)}
  .tally.six > *:nth-child(3){border-right:0}}

/* A finding whose object is not where the source says it is. The
   mismatch is the point, so it sits above the photographs. */
.discrepancy{border-left:3px solid #8c2f2f;padding:10px 0 2px 14px;margin:6px 0 18px}
.discrepancy .smallcaps{color:#8c2f2f;margin-bottom:6px}

/* --- the pathway scroll ------------------------------------------------
 * Two scales drawn two ways. The trunk is the register, 751, and draws as
 * bars because 751 is not countable on a screen. The core sample is three
 * cases whose court documents we hold, 120 objects, and draws as one mark
 * each because 120 is. Keeping the two visibly distinct is the honesty here,
 * not the styling.
 *
 * This line of inquiry's hue is set once above, at .dot.seizures.
 */
:root{--seiz:#2f5c8c}

.funnel,.sample{width:100%;height:auto;overflow:visible}
.funnel .bar{fill:var(--ink);opacity:.30;transition:opacity .22s,fill .22s}
.funnel .pipe{stroke:var(--rule);stroke-width:1.5}
.funnel .glabel{font:600 8.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;fill:var(--ink-3);transition:fill .22s}
.funnel .gnum{font:12px/1 var(--serif);fill:var(--ink-2);
  font-variant-numeric:tabular-nums}

/* The active gate. data-gate is set by the observer and never served, so with
   no script none of these rules apply and every gate stays at full strength,
   which is the finished diagram. */
.funnel .cue{fill:none}
.scrolly[data-gate] .funnel .gate .bar{opacity:.14}
.scrolly[data-gate] .funnel .gate .glabel{fill:var(--rule)}
.scrolly[data-gate] .funnel .gate .gnum{fill:var(--rule)}
.scrolly[data-gate] .funnel .gate.done .bar{opacity:.26}
.scrolly[data-gate] .funnel .gate.done .glabel{fill:var(--ink-3)}
.scrolly[data-gate] .funnel .gate.done .gnum{fill:var(--ink-3)}
.scrolly[data-gate] .funnel .gate.on .bar{opacity:1;fill:var(--seiz)}
.scrolly[data-gate] .funnel .gate.on .glabel{fill:var(--ink);font-weight:700}
.scrolly[data-gate] .funnel .gate.on .gnum{fill:var(--ink)}
/* The marker carries the highlight. Bar width spans 751 down to 2, so opacity
   cannot: a dimmed first bar still out-shouts a highlighted last one. */
.scrolly[data-gate] .funnel .gate.on .cue{fill:var(--seiz)}

.sample .obj{fill:var(--ink);opacity:.72}
.sample .obj.lost{fill:none;stroke:var(--ink-3);stroke-width:1.1;opacity:.85}

.apraisals{width:100%;height:auto;margin-top:14px}
.apraisals .alabel{font:10.5px/1 var(--sans);fill:var(--ink-2)}
.apraisals .adeclared{fill:var(--rule-2)}
.apraisals .apublished{fill:var(--seiz);opacity:.72}
.apraisals .anum{font:10px/1 var(--sans);fill:var(--ink-3);
  font-variant-numeric:tabular-nums}
.apraisals .ahole{font:italic 10.5px/1 var(--serif);fill:var(--accent)}
.apraisals .apr.hole .alabel{fill:var(--accent);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .funnel .bar,.funnel .glabel{transition:none}
}

/* Two columns: the funnel sticks, the reading moves past it. The sheet stays
   1080px and nothing bleeds to the viewport, because breaking the paper would
   cost more than a wide graphic is worth. */
/* The rail must stretch to the full height of the row, not shrink to its own
   content, or position:sticky has nowhere to travel and the funnel scrolls
   away after the first screen. Grid's default align-items:stretch is doing
   real work here; do not "tidy" it to start. */
.scrolly{display:grid;grid-template-columns:250px 1fr;gap:40px;margin-top:30px}
.rail{height:100%}
.rail .stick{position:sticky;top:22px}
.railcue{margin-top:14px;font:12px/1.5 var(--sans)}
.gatesec{padding:34px 0 10px;border-top:1px solid var(--rule)}
.gatesec:first-child{border-top:0;padding-top:4px}
.gatesec h3{font-size:21px;font-weight:600;margin:5px 0 0}
.gblurb{margin:9px 0 0;font-size:16px;line-height:1.62;max-width:37em;
  color:#33302a}
.coresample{margin-top:22px;padding:18px 20px;background:var(--paper-2);
  border:1px solid var(--rule)}
.coresample .rows{margin-top:16px}
.beat{margin-top:26px;padding-left:16px;border-left:3px solid var(--rule)}
.beat .bbody{margin:7px 0 0;font-size:15.5px;line-height:1.62;max-width:37em}
.blinks{margin-top:12px;font:12.5px/1.7 var(--sans)}
/* Cap the column so a beat carrying one plate does not blow it up to the full
   measure. An illustration is not a hero image. */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,232px));
  gap:16px;margin-top:16px;justify-content:start}
.plates .pane img{aspect-ratio:4/3;object-fit:cover}
.plates img{width:100%;display:block;border:1px solid var(--rule);
  background:var(--paper-2);cursor:zoom-in}

/* The ladder. One claim per rung, its receipt beside it, and a stopping point
   styled deliberately unlike a finding: the reader must not be able to skim
   past the sentence that says where the evidence ends. */
.ladder{margin:18px 0 0;border-top:1px solid var(--rule)}
.rung{display:grid;grid-template-columns:136px 1fr;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--rule-2);align-items:start}
.rung .claim{font-size:15.5px;line-height:1.6}
.rung .rn{display:inline-block;min-width:1.7em;font:600 11px/1.6 var(--sans);
  color:var(--seiz);vertical-align:2px}
.rung .receipt img{width:100%;display:block;border:1px solid var(--rule);
  background:var(--paper-2);cursor:zoom-in}
.rung.stop{background:#f7ecd8;border-bottom:0;border-left:3px solid var(--warn);
  padding:14px 16px;margin-top:4px}
.rung.stop .claim{font-size:14.5px}
.rung.stop .note{color:#6b5320;margin-top:5px}

@media (max-width:900px){
  .scrolly{grid-template-columns:44px 1fr;gap:18px}
  .rail .funnel .glabel,.rail .funnel .gnum{display:none}
  .railcue{display:none}
  .rung{grid-template-columns:84px 1fr;gap:12px}
}

@media print{
  .scrolly{grid-template-columns:1fr;gap:0}
  .rail .stick{position:static}
  .beat,.rung,.coresample{break-inside:avoid}
  .gatesec{break-inside:avoid-page}
}

/* The card sequence, with the gap in it. 71 and 73 are the Ministry's own
   photographs of two fragments from the same evidence lot; 72 is a museum's
   photograph of an object 900 km away. The middle pane is marked because that
   is the whole point of the graphic. */
.rung.wide{grid-template-columns:1fr;gap:10px}
.gapstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:520px}
.gapstrip .card{text-align:center}
.gapstrip .card img{width:100%;display:block;border:1px solid var(--rule);
  background:var(--paper-2);cursor:zoom-in;aspect-ratio:1;object-fit:cover}
.gapstrip .cn{margin-top:6px;font-size:21px;font-variant-numeric:tabular-nums;
  color:var(--ink-2)}
.gapstrip .cw{font:10.5px/1.4 var(--sans);color:var(--ink-3)}
.gapstrip .card.odd img{border:2px solid var(--accent)}
.gapstrip .card.odd .cn{color:var(--accent);font-weight:600}
.gapstrip .card.odd .cw{color:var(--accent)}

/* An angle that is begun but not ready to be read. Distinct from ".off", which
   means not begun: this one is a live link, it just leads to a notice. */
.drop-menu a.wip{color:var(--ink-3)}
.drop-menu a.wip em{font-style:normal;color:#a49a86;margin-left:6px;font-size:11px}

/* -- signed-in chip in the mast (auth, 2026-08-25) ------------------------- */
.mast .mast-right{display:flex;align-items:baseline;gap:18px}
.mast .who{font:13px/1 var(--sans);color:var(--ink-3)}
.mast .signout{display:inline}
.mast .signout button{background:none;border:none;padding:0;cursor:pointer;
  font:13px var(--sans);color:var(--ink-2)}
.mast .signout button:hover{color:var(--link);text-decoration:underline}

/* -- login page ------------------------------------------------------------ */
.login-page{min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:24px;background:#e3ded1}
.login-card{background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 1px 0 var(--rule),0 18px 50px rgba(28,27,24,.14);
  max-width:430px;width:100%;padding:44px 46px 38px}
.login-card .wordmark{font-size:23px;letter-spacing:.02em;color:var(--ink);
  display:block;text-align:center;line-height:1.15}
.login-card .rule{border:none;border-top:2px solid var(--ink);margin:16px 0 6px;
  position:relative}
.login-card .rule::after{content:"";display:block;border-top:1px solid var(--ink);
  margin-top:2px}
.login-card .tagline{font:11px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;margin:10px 0 28px}
.login-card label{display:block;font:11px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.login-card input[type=email]{width:100%;box-sizing:border-box;
  padding:11px 12px;font:16px var(--serif);color:var(--ink);
  background:#fffdf8;border:1px solid var(--rule);border-radius:2px}
.login-card input[type=email]:focus{outline:none;border-color:var(--ink-2)}
.login-card button[type=submit]{width:100%;margin-top:14px;padding:12px;
  font:13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:none;border-radius:2px;
  cursor:pointer}
.login-card button[type=submit]:hover{background:var(--accent)}
.login-card .hint{font:13px/1.5 var(--sans);color:var(--ink-3);margin-top:18px}
.login-card .error{font:14px/1.5 var(--serif);color:var(--accent);
  border-left:3px solid var(--accent);padding-left:12px;margin-top:18px}
.login-sent h2{font-size:21px;margin:0 0 10px}
.login-sent p{font:15px/1.6 var(--serif);color:var(--ink-2)}
.login-sent .back{font:13px var(--sans);margin-top:22px;display:inline-block}

/* -- derivation cue: a method built from the one above it ------------------ */
.drop-menu a.derived{padding-left:26px;position:relative}
.drop-menu a.derived::before{content:"\21B3";position:absolute;left:11px;
  color:var(--ink-3)}
.angles .t.derived{padding-left:18px;position:relative}
.angles .t.derived::before{content:"\21B3";position:absolute;left:0;
  color:var(--ink-3)}
.method-row.derived{margin-left:22px;position:relative}
.method-row.derived::before{content:"\21B3";position:absolute;left:-18px;
  top:2px;color:var(--ink-3)}

/* Folded explanation blocks (the institutions page's method legend, 2026-09-08).
   A native <details>; the summary is a row with the angle's dot, a bold name
   and a dim count. Body text and bullets share one width with the page's
   notes. Used wherever definitions would otherwise stand as a wall of text. */
details.fold{max-width:42em;margin:0 0 6px;border-top:1px solid var(--rule,#d9d2c5);padding:6px 0 4px}
details.fold>summary{cursor:pointer;list-style:none;display:flex;gap:7px;align-items:center}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .dim{color:var(--ink-3)}
details.fold>p{margin:8px 0 4px;max-width:none}
details.fold>ul{list-style:none;margin:0 0 6px 0;padding:0 0 0 1.4em}
details.fold>ul>li{display:flex;gap:7px;align-items:flex-start;margin-bottom:4px}
details.fold>ul>li>.dot{margin-top:.5em}

/* A section that is its own thing on a page that goes on to something else
   (the convergence block on /institutions, 2026-09-08): a shade darker
   paper, a rule around it, the content inset. */
.panel{background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  padding:20px 24px 6px;margin:34px 0 10px}
.panel details.fold{border-top-color:var(--rule)}
.panel table.rows{margin-bottom:10px}

/* Long-page structure (2026-09-08). Sections are numbered and ruled; a
   contents rail sits in the right margin when a page has three or more;
   reference sections (terms, method notes) sit on darker paper. */
.pad.has-toc{display:flex;gap:44px;align-items:flex-start}
.pad.has-toc>.body{flex:1 1 auto;min-width:0}
.toc{flex:0 0 180px;order:2;position:sticky;top:26px;font:12.5px/1.55 var(--sans);
  padding-top:6px}
.toc .smallcaps{margin-bottom:8px}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc li{margin:0}
.toc a{display:block;padding:3px 0 3px 12px;color:var(--ink-3);text-decoration:none;
  border-left:2px solid transparent;margin-left:-1px}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--accent)}
.body{counter-reset:sec}
section.sec{margin-top:46px;padding-top:16px;border-top:1px solid var(--rule)}
section.sec>h3:first-child{margin:0 0 6px;font-size:20px;font-weight:600}
/* Numbers only on a page with three sections or more (the same rule as the
   rail; the script adds .numbered): two sections, one of them shaded, do
   not need counting. */
.body.numbered section.sec>h3:first-child{counter-increment:sec}
.body.numbered section.sec>h3:first-child::before{content:counter(sec);display:inline-block;min-width:1.6em;
  color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.body.numbered section.sec.plain>h3:first-child{counter-increment:none}
.body.numbered section.sec.plain>h3:first-child::before{content:none}
.sec-lead{margin:0 0 14px;max-width:42em;color:var(--ink-2);font:13.5px/1.55 var(--sans)}
section.sec.ref{background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  padding:18px 24px 8px}
section.sec.ref details.fold{border-top-color:var(--rule)}
p.showall{margin:8px 0 0}
@media (max-width:1000px){
  .pad.has-toc{display:block}
  .toc{position:static;flex:none;order:0;margin:0 0 22px;padding:12px 16px;
    background:var(--paper-2);border:1px solid var(--rule);border-radius:4px}
  .toc ul{border-left:0;columns:2}
  .toc a{border-left:0;margin:0;padding:2px 0}
}
section.sec.panel{padding-top:18px}
section.sec.panel>h3:first-child{margin-top:0}

/* The front page (2026-09-08). A front door, not a report: a large opening
   statement beside one photograph, a search box, the numbers, then plain
   sections with air between them. No rail, no numbering, no rules. */
.home .hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;
  align-items:start;margin-top:6px}
.home .hero-title{font-size:30px;line-height:1.28;font-weight:600;margin:0;
  letter-spacing:-.012em;color:var(--ink)}
.home .hero-sub{margin:16px 0 0;max-width:38em;font:15px/1.6 var(--sans);color:var(--ink-2)}
.home .hero-search{margin-top:18px;max-width:38em}
.home .hero-search .searchbox{width:100%;box-sizing:border-box}
.home .hero-spec .specimen{display:block;margin:0;padding:0;border:0}
.home .hero-spec .specimen-plate img{width:min(230px,100%)}
.home .hero-spec .specimen-body{margin-top:10px}
.home .hero-spec .specimen-body h3{font-size:17px;margin-top:4px}
.home .hero-spec .specimen-meta{margin-top:6px;font-size:12.5px;line-height:1.5}
.home .hero-spec .specimen-cue{margin-top:8px}
.home .hero-spec .byline{font-size:13.5px;display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.home .hero-tally .n{font-size:36px}
.home .hs{margin-top:58px}
.home .hs-title{font-size:23px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.home .hs-lead{margin:0 0 16px;max-width:44em;font:14.5px/1.55 var(--sans);color:var(--ink-2)}
.home .findings-strip{background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  padding:6px 18px 14px}
.home .findings-strip .tally{border:0;margin:0}
.home .findings-strip .tally > *{border-right:1px solid var(--rule);padding:18px 18px 14px;text-align:left}
.home .findings-strip .tally > *:last-child{border-right:0}
.home .findings-strip .n{font-size:34px}
.home .findings-strip .fs{margin:8px 0 6px}
.home .ways{margin-top:6px}
@media (max-width:900px){
  .home .hero{grid-template-columns:1fr}
  .home .hero-spec .specimen-plate img{width:100%;max-width:340px;
    max-height:none}
  .home .findings-strip .tally{grid-template-columns:1fr}
  .home .findings-strip .tally > *{border-right:0;border-bottom:1px solid var(--rule)}
}

.home .angles{border-top:1px solid var(--rule)}

/* The hero's random record keeps one height whatever the caption says, so
   "show me another" never moves the page. */
.home .hero-spec{height:420px;overflow:hidden}
.home .hero-spec .specimen-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home .hero-spec .specimen-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Convergence rows: the full name, and the marks flowing left beside it. */
.home .conv-row{display:grid;grid-template-columns:minmax(0,17em) 1fr;gap:6px 28px;
  padding:12px 0;border-bottom:1px solid var(--rule);align-items:start}
.home .conv-name{font-size:16px;line-height:1.35}
.home .conv-region{font:11.5px/1.4 var(--sans);color:var(--ink-3);margin-top:3px}
.home .conv-marks{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:3px;
  font:12px/1.5 var(--sans);color:var(--ink-2)}
@media (max-width:700px){.home .conv-row{grid-template-columns:1fr}}

/* An "occupied" tag after an institution's name sits on its own line, so a
   two-line name never wraps around it. */
.conv-name .tag,table.rows td .tag{display:inline-block;margin:4px 0 0;vertical-align:top}
.conv-name .tag{display:block;width:max-content}
table.rows td a + .tag{display:block;width:max-content}

/* "show me another" pinned to the foot of the fixed-height block, whatever
   the caption above it runs to. */
.home .hero-spec{position:relative}
.home .hero-spec .specimen{height:100%;display:flex;flex-direction:column}
.home .hero-spec .specimen-body{flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column}
.home .hero-spec .specimen-cue{margin-top:auto;padding-top:14px;
  padding-bottom:2px}

/* Stacked, the plate takes the full column and there is no room left for a
   long caption AND the cue inside a fixed 420px: the caption was clipped and
   the cue sat on top of it. Below 900px the block takes the height it needs
   and the cue returns to the flow. A swap can then move the page a little,
   which is the cheaper of the two faults. Declared here, after the rules it
   overrides, because they share its specificity and the last one wins. */
@media (max-width:900px){
  .home .hero-spec{height:auto;overflow:visible}
  .home .hero-spec .specimen{height:auto}
  .home .hero-spec .specimen-cue{position:static;margin-top:12px}
  .home .hero-spec .specimen-body h3,
  .home .hero-spec .specimen-meta,
  .home .hero-spec .byline{-webkit-line-clamp:none;display:block;
    overflow:visible}
}

/* Beside the contents rail, nothing may run wider than the text column: a
   table's own max-width yields to the column, and its scroll wrapper scrolls. */
.pad.has-toc .body .tw{max-width:100%;overflow-x:auto}
.pad.has-toc .body{min-width:0}
/* A table wider than the column is wrapped by the script in .tw and scrolls
   inside it, so nothing is clipped and nothing runs under the rail. */
.tw.auto{margin:0 0 6px;max-width:100%;overflow-x:auto}
.tw.auto>table{margin-bottom:0}

/* The rewritten page (2026-09-08): the answer first, verdicts in words,
   before-and-after pairs a reader can see. */
.found p{max-width:42em;font-size:16px;line-height:1.55;margin:0 0 10px}
td.verdict{font:12.5px/1.4 var(--sans);color:var(--ink-2)}
.ex-head{margin:20px 0 8px;font-size:14.5px;font-weight:600}
.fold-h{margin:14px 0 6px;font:600 13px/1.4 var(--sans)}
.pairs{display:grid;gap:8px;max-width:46em}
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 12px;align-items:center;
  padding:10px 14px;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  text-decoration:none;color:var(--ink)}
.pair:hover{border-color:var(--ink-3);text-decoration:none}
.pair-a,.pair-b{font-size:13.5px;line-height:1.4}
.pair-a{color:var(--ink-2)}
.pair-arrow{color:var(--accent);font-size:16px}
.pair-who{grid-column:1/-1;font:11.5px/1.4 var(--sans);color:var(--ink-3)}

/* the column the acquisitions tables are ranked by */
table.rows th.sorted{color:var(--ink)}

/* the records browser's filter form: a grid of labelled fields */
.recfilters{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 18px;margin:18px 0 6px;max-width:760px}
.recfilters label{display:flex;flex-direction:column;gap:4px;font:600 12px/1.3 var(--sans);color:var(--ink-2);letter-spacing:.02em}
.recfilters input[type=text],.recfilters select{padding:7px 10px;font:13.5px/1.3 var(--sans);border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink)}
.recfilters small{font-weight:400;color:var(--ink-3)}
.recfilters .recactions{grid-column:1/-1;display:flex;gap:14px;align-items:center;margin-top:4px}
.recfilters button{padding:7px 16px;font:600 13px var(--sans);border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);cursor:pointer}