/* ============================================================================
   survey.css — the one stylesheet for richmondcountyroofing.com
   A county survey sheet: rag paper, one ink, printed rules that carry meaning,
   marginalia in the gutter. No gradients, no shadows except the double-rule
   construction, no rounded corners, no motion, no transitions, no webfonts,
   no third-party request of any kind, no JavaScript.
     1 reset · 2 tokens light · 3 tokens dark · 4 type · 5 links + focus
     6 layout · 7 rules · 8 masthead · 9 colophon · 10 homepage
     11 article apparatus · 12 citation system · 13 tables · 14 plates
     15 utilities · 16 print
   ========================================================================== */

/* --- 1. RESET ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding-left:0;list-style:none}
img{max-width:100%;height:auto}
table{border-collapse:collapse;border-spacing:0}

/* --- 2. TOKENS — LIGHT (default) -----------------------------------------
   Four chromatic values on the whole site. Colour is a semantic channel:
   stone = this is a link or a source key. brick = this claim is contested or
   false. frame = this is about combustible wood construction. Nothing is
   coloured for decoration.
   ------------------------------------------------------------------------ */
:root{
  color-scheme:light dark;

  --paper:#F5F2EA;        /* page ground, warm rag                          */
  --paper-tint:#E9E3D3;   /* key figures, quoted code, table header         */
  --frame:#F2E3B0;        /* ONLY the combustible-construction callout      */
  --ink:#16181A;          /* body text, headings              15.91:1       */
  --ink-2:#4F5049;        /* captions, byline, marginalia, limits  7.29:1   */
  --stone:#1F4E63;        /* links, source sigils, figure markers  8.06:1   */
  --brick:#8E2B20;        /* contested rules and labels, debunk    7.46:1   */
  --rule:#C9C2AE;         /* hairline rules — decorative, never a glyph     */
  --rule-strong:#7E7562;  /* borders, plate frames, focus ring      4.07:1  */

  /* zero downloaded fonts, zero third-party requests, zero layout shift */
  --serif:"Iowan Old Style",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;

  /* Root 18px. 1.2 up, 1.25 down, flattened at the top — a survey sheet has
     no billboard type. Nothing on the site uses a size outside this table. */
  --t-xs:.639rem;         /* 11.5 sigils, plate numbers, marginalia, chips  */
  --t-sm:.806rem;         /* 14.5 sans apparatus, captions, table body      */
  --t-base:1rem;          /* 18   body                                      */
  --t-md:1.194rem;        /* 21.5 deck, key-figures values, H3              */
  --t-lg:1.444rem;        /* 26   H2                                        */
  --t-xl:1.722rem;        /* 31   H1, clamped                               */
  --lh-xs:1.4;--lh-sm:1.45;--lh-base:1.6;--lh-md:1.4;--lh-lg:1.25;--lh-xl:1.15;

  /* The 34em / 46em of the plan, expressed in rem so they hold on elements
     that are not set at 18px. Nothing on the site exceeds --measure-wide. */
  --measure:34rem;--measure-wide:46rem;--gutter:12rem;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --s6:32px;--s7:48px;--s8:64px;--s9:96px;
}

/* --- 3. TOKENS — DARK. prefers-color-scheme only. No toggle, no JS. ------ */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14171A;--paper-tint:#1E2226;--frame:#33301F;
    --ink:#E8E4D8;          /* 14.15:1 */
    --ink-2:#A6A79C;        /*  7.39:1 */
    --stone:#8FC3DA;        /*  9.41:1 */
    --brick:#E39A8E;        /*  7.95:1 */
    --rule:#343A3F;--rule-strong:#707885;  /* 4.04:1 */
  }
}

/* --- 4. TYPE -------------------------------------------------------------
   Serif = the site's own prose. Mono = anything transcribed or measured.
   Sans = apparatus. The site's own prose is never set in mono, so the
   boundary between quotation and interpretation is visible across the room.
   ------------------------------------------------------------------------ */
html{font-size:112.5%;-webkit-text-size-adjust:100%;hyphens:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:var(--t-base);line-height:var(--lh-base);text-wrap:pretty}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);font-weight:700;text-wrap:balance}
h1{font-size:clamp(26px,5vw,var(--t-xl));line-height:var(--lh-xl);margin-bottom:var(--s5)}
h2{font-size:var(--t-lg);line-height:var(--lh-lg);margin:var(--s8) 0 var(--s4)}
h3{font-size:var(--t-md);line-height:var(--lh-md);margin:var(--s6) 0 var(--s3)}
p{margin-bottom:var(--s4)}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}
cite{font-style:normal}
small{font-size:var(--t-sm)}
::selection{background:var(--paper-tint);color:var(--ink)}

/* --- 5. LINKS AND FOCUS. There are no buttons here; every directive is a
   link. The focus ring is never removed. -------------------------------- */
a{color:var(--stone);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px}
a:hover,a:focus-visible{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--rule-strong);outline-offset:2px}

/* --- 6. LAYOUT: page, measure, gutter ------------------------------------
   The gutter is present only at min-width 62rem and carries sigils, edition
   chips, typology chips and plate numbers. Below 62rem its contents flow
   inline above the block they annotate. float + negative margin, correct DOM
   order for screen readers, no grid gymnastics, no JS.
   ------------------------------------------------------------------------ */
.wrap{max-width:var(--measure-wide);margin-inline:auto;padding-inline:var(--s4)}
main{display:block;padding-bottom:var(--s9)}
main p,main ol,main ul,main dl,main h1,main h2,main h3,main h4{max-width:var(--measure)}
.wide,main .wide{max-width:var(--measure-wide)}
.region{margin-top:var(--s8)}
@media (min-width:62rem){
  .wrap{max-width:calc(var(--measure-wide) + var(--gutter));
    padding-left:var(--gutter);padding-right:var(--s4)}
}

/* --- 7. RULE TREATMENTS — the site's entire ornament ---------------------
   Lifted from the legend of Figure 1609.4.3 sheet (5) of the 2022 New York
   City Building Code. Three rules, three fixed meanings, used everywhere.
   Double = primary source quoted verbatim; the strongest line on the page is
   reserved for the strongest evidence. Dashed = a boundary that is
   interpreted, not stated. Hairline = ordinary division.
   ------------------------------------------------------------------------ */
.rule-double{border-top:2px solid var(--ink);box-shadow:0 3px 0 -2px var(--ink);
  padding-top:var(--s5)}
.rule-double-under{border-bottom:2px solid var(--ink);
  box-shadow:0 3px 0 -2px var(--ink);padding-bottom:var(--s4)}
.rule-dashed{border-top:2px dashed var(--brick);padding-top:var(--s4)}
.rule-hair{border-top:1px solid var(--rule);padding-top:var(--s4)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s7) 0;
  max-width:var(--measure-wide)}

/* --- 8. SKIP LINK, MASTHEAD, NAVIGATION ----------------------------------
   The masthead is byte-identical on every page. Line 3 is not a footer
   disclaimer; it is part of the nameplate, at the same weight as line 2.
   ------------------------------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--paper);
  color:var(--ink);font:var(--t-sm)/var(--lh-sm) var(--sans);
  padding:var(--s3) var(--s4);border:1px solid var(--rule-strong)}
.skip:focus{left:var(--s4);top:var(--s2)}
.masthead{padding:var(--s5) 0 var(--s4);border-bottom:2px solid var(--ink);
  box-shadow:0 3px 0 -2px var(--ink);margin-bottom:var(--s7)}
.mh-name{font:700 var(--t-sm)/1.3 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:var(--s2)}
.mh-name a{color:inherit;text-decoration:none}
.mh-name a:hover,.mh-name a:focus-visible{text-decoration:underline;
  text-decoration-thickness:2px}
.mh-scope,.mh-stance{font:var(--t-sm)/var(--lh-sm) var(--sans);color:var(--ink-2);
  max-width:var(--measure-wide)}
.site-nav{margin-top:var(--s4)}
.site-nav ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.site-nav a{font:var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone)}

/* --- 9. COLOPHON FOOTER -------------------------------------------------- */
.colophon{border-top:1px solid var(--rule);padding:var(--s5) 0 var(--s8);
  font:var(--t-sm)/var(--lh-sm) var(--sans);color:var(--ink-2)}
.colophon p{max-width:var(--measure-wide);margin-bottom:var(--s4)}
.colophon-nav ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-bottom:var(--s4)}
.colophon-nav a{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase}
.colophon-meta{font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase}

/* --- 10. HOMEPAGE REGIONS ------------------------------------------------ */
.notice{margin-bottom:var(--s7)}
.notice-start{font-size:var(--t-md);line-height:var(--lh-md)}
.notice-start a{font-weight:700}

.index-note{font:var(--t-sm)/var(--lh-sm) var(--sans);color:var(--ink-2);
  max-width:var(--measure-wide);margin-bottom:var(--s4)}
.fault-index{width:100%;max-width:var(--measure-wide);font-size:var(--t-sm)}
.fault-index td{font-family:var(--serif);vertical-align:top}

/* The stock bar: four citable facts about buildings. It says where this is by
   describing what is here, never by repeating the borough name. */
.stock-bar{display:flex;flex-wrap:wrap;max-width:var(--measure-wide);
  border:1px solid var(--rule-strong)}
.stock-bar>div{flex:1 1 12rem;padding:var(--s3) var(--s4);
  border-top:1px solid var(--rule);font:var(--t-sm)/var(--lh-sm) var(--mono);
  font-variant-numeric:tabular-nums}
.stock-bar>div:first-child{border-top:0}
@media (min-width:46rem){
  .stock-bar>div{border-top:0;border-left:1px solid var(--rule)}
  .stock-bar>div:first-child{border-left:0}
}
.stock-note{font:var(--t-xs)/var(--lh-xs) var(--sans);color:var(--ink-2);
  max-width:var(--measure-wide);margin-top:var(--s3)}

/* The four bands. Each band head is a sourced sentence, hairline ruled. */
.band{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s7)}
.band-name{font:var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.band h2{margin:0 0 var(--s5)}
.entries>li{border-top:1px solid var(--rule);padding:var(--s4) 0}
.entries>li:first-child{border-top:0;padding-top:0}
.entries h3{margin:0 0 var(--s2)}
.entries .deck{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--ink-2)}
.plain-list>li{border-top:1px solid var(--rule);padding:var(--s3) 0}
.plain-list>li:first-child{border-top:0}

/* --- 11. ARTICLE APPARATUS ----------------------------------------------- */
.deck{font-size:var(--t-md);line-height:var(--lh-md);margin-bottom:var(--s5)}

/* Byline bar. The site advertises its own gaps in its header, so the
   "n items not established" field is never omitted and never zero-suppressed. */
.byline{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s3) 0;margin-bottom:var(--s6);
  font:var(--t-sm)/var(--lh-sm) var(--sans);color:var(--ink-2);
  max-width:var(--measure-wide)}
.scope-note{border:1px solid var(--rule-strong);padding:var(--s4) var(--s5);
  margin-bottom:var(--s6);max-width:var(--measure-wide);font-size:var(--t-sm);
  line-height:var(--lh-sm);color:var(--ink-2)}

/* Applies-to typology chips: a reader identifies their own house before
   reading a sentence. Filled = applies; outline = does not apply. */
.applies-to{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6);
  max-width:var(--measure-wide)}
.tchip{font:var(--t-xs)/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:2px var(--s2);background:var(--paper-tint);border:1px solid var(--ink);
  color:var(--ink)}
.tchip--no{background:transparent;border-color:var(--rule-strong);color:var(--ink-2)}

/* Key figures: answers the page's question for someone who reads nothing else. */
.key-figures{background:var(--paper-tint);border-top:2px solid var(--ink);
  box-shadow:0 3px 0 -2px var(--ink);padding:var(--s5);margin:var(--s7) 0;
  max-width:var(--measure-wide)}
.key-figures h2{font:700 var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s4)}

/* The only use of --frame on the site. */
.callout-fire{background:var(--frame);border:1px solid var(--rule-strong);
  padding:var(--s4) var(--s5);margin:var(--s6) 0;max-width:var(--measure-wide)}

.limits{border:1px solid var(--rule-strong);padding:var(--s5);margin:var(--s7) 0;
  max-width:var(--measure-wide);color:var(--ink-2);font-size:var(--t-sm);
  line-height:var(--lh-sm)}
.limits h2,.limits h3{color:var(--ink);margin-top:0}
.not-established{list-style:decimal;padding-left:1.6em;font-size:var(--t-sm);
  line-height:var(--lh-sm)}
.not-established>li{margin-bottom:var(--s3)}
.related>li{border-top:1px solid var(--rule);padding:var(--s3) 0;
  font-size:var(--t-sm);line-height:var(--lh-sm)}

/* --- 12. THE CITATION SYSTEM ---------------------------------------------
   Citation is the product, so it gets the gutter, the mono face and the
   double rule.
   ------------------------------------------------------------------------ */

/* 12.1 The rule row — the atom of every key-figures block. The edition is a
   required field: a rule row without an edition does not render. */
.rule-row{display:grid;
  grid-template-columns:minmax(13rem,1fr) minmax(8rem,auto) minmax(15rem,1.2fr);
  gap:0 var(--s5);border-bottom:1px solid var(--rule);padding:var(--s3) 0;
  align-items:baseline;margin:0;max-width:none}
.rr-label{font:var(--t-base)/1.4 var(--serif)}
.rr-value{font:var(--t-md)/1.4 var(--mono);font-variant-numeric:tabular-nums;margin:0}
.rr-qual{font-family:var(--serif);font-size:var(--t-sm);color:var(--ink-2)}
.rr-auth{font:var(--t-xs)/1.4 var(--mono);color:var(--ink-2);margin:0}
.rr-sec{font-style:normal;display:block}
.rr-ed{display:block}          /* edition always on its own line, always present */
@media (max-width:40rem){.rule-row{grid-template-columns:1fr;row-gap:2px}}

/* 12.2 Inline sourced numbers, sigils and gutter marginalia. Every verified
   figure in running prose is mono and carries a human-readable sigil — the
   section number itself, not an anonymous superscript. */
.datum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95em}
.sigil{font:var(--t-xs)/1 var(--mono);color:var(--stone);text-decoration:none;
  border-bottom:1px dotted currentColor;margin-left:.25em;white-space:nowrap}
.sigil:hover,.sigil:focus-visible{border-bottom-style:solid}
.cite-margin{display:block;font:var(--t-xs)/var(--lh-xs) var(--mono);
  color:var(--ink-2);margin-bottom:var(--s2)}
@media (min-width:62rem){
  .cite-margin{float:left;clear:left;margin-left:-13rem;margin-bottom:0;width:11rem;
    text-align:right;border-right:1px solid var(--rule);padding-right:.7rem}
}

/* 12.3 Provenance chips. Three states, in the rule row's authority cell and in
   table cells only — never inline in prose, where they would become noise. A
   DERIVED chip must have its formula printed in the adjacent gutter note. */
.chip{display:inline-block;font:var(--t-xs)/1.5 var(--mono);letter-spacing:.04em;
  text-transform:uppercase;padding:0 var(--s1);border:1px solid var(--rule-strong);
  color:var(--ink-2);white-space:nowrap}
.chip--verbatim{border-color:var(--ink);color:var(--ink)}
.chip--derived{border-style:dashed}
.chip--reported{border-style:dotted}
.chip-edition{font:var(--t-xs)/var(--lh-xs) var(--mono);color:var(--ink-2);
  letter-spacing:.04em}

/* 12.4 Verbatim primary text. Quotation marks are retained inside .quoted
   because the document's exact words are the point. Never an italic statute. */
.quoted{font:var(--t-sm)/1.6 var(--mono);background:var(--paper-tint);
  padding:var(--s5);margin:var(--s6) 0;max-width:var(--measure-wide);
  border-top:2px solid var(--ink);box-shadow:0 3px 0 -2px var(--ink)}
.quoted p{max-width:none}
.quoted footer{font:var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-top:var(--s3)}

/* 12.5 Source list. Double rule above, sigil-keyed. */
.sources{border-top:2px solid var(--ink);box-shadow:0 3px 0 -2px var(--ink);
  padding-top:var(--s5);margin-top:var(--s8);font-size:var(--t-sm);
  line-height:var(--lh-sm);max-width:var(--measure-wide)}
.sources h2{margin-top:0}
.sources dt{font:var(--t-xs)/var(--lh-xs) var(--mono);color:var(--stone)}
.sources dd{margin:0 0 var(--s4);max-width:var(--measure-wide)}
.retrieved{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2)}

/* 12.6 CONTESTED. Both claims printed at full strength under the heavy dashed
   rule, with an explicit Position row. The site never averages two contested
   figures and never silently picks one. */
.contested{border-top:2px dashed var(--brick);padding-top:var(--s4);
  margin:var(--s6) 0;max-width:var(--measure-wide)}
.contested-label{font:var(--t-xs)/var(--lh-xs) var(--sans);text-transform:uppercase;
  letter-spacing:.08em;color:var(--brick);margin:0 0 var(--s3)}
.contested table{width:100%}
.contested tfoot th{font-style:normal;text-align:left;white-space:nowrap;
  padding-right:var(--s4)}

/* 12.7 The absence is drawn. A cell with no opened source renders an explicit
   blank, in the same table and the same shape as the numbers that were
   verified, which is the only way absence becomes visible. */
.absent{color:var(--ink-2);font-family:var(--mono)}
.tnote{font:var(--t-sm)/1.5 var(--sans);color:var(--ink-2)}

/* --- 13. TABLES. Hairline row rules, no zebra, no vertical rules. -------- */
table{width:100%;max-width:var(--measure-wide);font-size:var(--t-sm);
  line-height:var(--lh-sm);margin:var(--s5) 0}
caption{font:var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);text-align:left;
  padding-bottom:var(--s3)}
th{text-align:left;font-weight:700}
thead th{font:700 var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.08em;
  text-transform:uppercase;background:var(--paper-tint);
  border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
  padding:var(--s2) var(--s3);vertical-align:bottom}
tbody th,tbody td,tfoot th,tfoot td{border-bottom:1px solid var(--rule);
  padding:var(--s3);vertical-align:top}
thead th:first-child,tbody th:first-child,tbody td:first-child,
tfoot th:first-child,tfoot td:first-child{padding-left:0}
td .datum,th .datum,.num{font-variant-numeric:tabular-nums}

/* --- 14. PLATES AND FIGURES ----------------------------------------------
   Because the generated art carries no lettering, the page letters it:
   markers positioned over the plate in CSS at percentage coordinates, with a
   numbered key beneath. Labels stay selectable, zoomable and correctable in a
   text editor. Plates carry geometry; inline diagrams carry data.
   ------------------------------------------------------------------------ */
.plate{margin:var(--s7) 0;max-width:var(--measure-wide)}
.plate-img{position:relative;border:1px solid var(--rule-strong);padding:12px;
  background:var(--paper)}
.plate img{display:block;width:100%;height:auto}
.mk{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:1.7em;height:1.7em;border-radius:50%;background:var(--stone);
  color:var(--paper);font:var(--t-xs)/1.7em var(--sans);text-align:center}
.plate-key{font:var(--t-sm)/1.5 var(--sans);color:var(--ink-2);
  margin:var(--s3) 0 0;padding-left:1.4em;list-style:decimal}
.plate figcaption{font:var(--t-sm)/1.5 var(--sans);color:var(--ink-2);
  border-top:1px solid var(--rule);margin-top:var(--s3);padding-top:var(--s3)}
.plate figcaption b{font-family:var(--mono);letter-spacing:.04em;color:var(--ink)}
@media (prefers-color-scheme:dark){
  .plate img{filter:invert(1) hue-rotate(180deg)}   /* one asset, not two */
}
.diagram{margin:var(--s7) 0;max-width:var(--measure-wide)}
.diagram svg{display:block;width:100%;height:auto;color:var(--ink)}

/* The list of figures. Same plate frame at a smaller size, so the index reads as the
   same object as the page it points at rather than as a gallery of thumbnails. */
.figure-list{list-style:none;margin:var(--s6) 0 0;padding:0}
.figure-list>li{margin:0 0 var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--rule)}
.figure-list>li:first-child{border-top:0;padding-top:0}
.fig-no{font:var(--t-xs)/1.4 var(--mono);letter-spacing:.04em;color:var(--ink);
  margin:0 0 var(--s3)}
.fig-thumb{display:block;border:1px solid var(--rule-strong);padding:8px;
  background:var(--paper)}
.fig-thumb img{display:block;width:100%;height:auto}
.fig-cap{font:var(--t-sm)/1.5 var(--sans);color:var(--ink-2);margin:var(--s3) 0 0}
.fig-src{font:var(--t-sm)/1.5 var(--sans);margin:var(--s2) 0 0}
@media (prefers-color-scheme:dark){
  .fig-thumb img{filter:invert(1) hue-rotate(180deg)}
}

/* --- 15. UTILITIES ------------------------------------------------------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.mono{font-family:var(--mono)}
.quiet{color:var(--ink-2)}
.label{font:var(--t-xs)/var(--lh-xs) var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}

/* A numbered list whose numbers are load-bearing: the five checks in the
   /contact.html notice are referred to by number in the prose below them. */
.numbered{list-style:decimal;padding-left:1.6em;margin-bottom:var(--s4)}
.numbered>li{margin-bottom:var(--s3)}

/* The printable checklist on /contact.html. Tick boxes are drawn in CSS; no
   form control of any kind exists in the HTML of this site. */
.checklist>li{position:relative;padding:var(--s2) 0 var(--s2) 2em;
  border-bottom:1px solid var(--rule);font-size:var(--t-sm);line-height:var(--lh-sm)}
.checklist>li::before{content:"";position:absolute;left:0;top:.75em;width:.9em;
  height:.9em;border:1px solid var(--rule-strong)}

/* --- 16. PRINT -----------------------------------------------------------
   /contact.html prints to one sheet: masthead, navigation and related block
   suppressed, URLs expanded. Give <body> class="checklist-page" and wrap the
   checklist region in class="checklist-region".
   ------------------------------------------------------------------------ */
@media print{
  html{font-size:100%}
  body{background:#fff;color:#000}
  .skip,.site-nav,.masthead,.colophon,.related,.noprint{display:none !important}
  .wrap{max-width:none;padding:0}
  main p,main ol,main ul,main dl,main h1,main h2,main h3{max-width:none}
  a{color:#000;text-decoration:underline}
  a::after{content:" [" attr(href) "]";font-family:monospace;font-size:.85em;
    word-break:break-all}
  a[href^="#"]::after{content:""}
  .key-figures,.quoted,thead th{background:transparent;border-color:#000}
  .plate,.diagram{break-inside:avoid}
  h2,h3{break-after:avoid}
  .checklist-page main>*:not(.checklist-region){display:none}
  .checklist-page .checklist-region{margin:0}
  .checklist>li{padding:4pt 0 4pt 2em}
  .checklist>li::before{border-color:#000}
}