/* Productive Friction · house style.
   Follows the design system of cognitivewallpaper.com: graph-paper ground,
   near-black ink, Inter for text, Courier Prime for labels and records.
   Fonts are served from this repository (SIL Open Font Licence; see fonts/). */

@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/courier-prime-latin-400-normal.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: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/courier-prime-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/courier-prime-latin-700-normal.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: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/courier-prime-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.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: 400; font-display: swap; src: url('fonts/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.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: 500; font-display: swap; src: url('fonts/inter-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.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: 600; font-display: swap; src: url('fonts/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #f0eeea;
  --text: #111111;
  --muted: #555555;
  --grid: rgba(17, 17, 17, 0.05);
  --rule: rgba(17, 17, 17, 0.18);
  --panel: rgba(255, 255, 255, 0.5);
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Courier Prime', ui-monospace, 'Courier New', monospace;
  /* Older names, kept for page-level styles that use them. */
  --paper: var(--bg);
  --ink: var(--text);
  --accent: var(--text);
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

body {
  margin: 0 auto;
  max-width: 780px;
  padding: 3rem 2rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

p, ul, ol, dl { margin: 0 0 1rem; }
p { max-width: 68ch; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: .3rem; }

a { color: var(--text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---- Document header ---- */

.page-header { border-bottom: 2px solid var(--text); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.page-header > p { margin-bottom: .5rem; }
.page-header > p:last-child { margin-bottom: 0; }
.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.eyebrow a { color: var(--muted); }
h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.page-header .metadata {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
}

/* ---- Sections ---- */

main > section, main > div, main > form { margin-bottom: 2.5rem; }
h2 {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--text);
  padding-bottom: .5rem;
  margin: 0 0 1rem;
}
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: 1.5rem 0 .5rem; }
h4 {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 1rem 0 .5rem;
}
.metadata, .status, code, pre, kbd, samp { font-family: var(--mono); }
.metadata { font-size: .875rem; line-height: 1.6; color: var(--muted); }
code { font-size: .9em; }
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 1rem;
  font-size: .85rem;
}
.status {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 1px solid var(--rule);
  padding: .15rem .45rem;
  background: var(--panel);
  white-space: nowrap;
}

.notice {
  border-left: 3px solid var(--text);
  background: var(--panel);
  padding: .75rem 1rem;
}
[role="alert"]:not(:empty) {
  border: 2px solid var(--text);
  background: var(--panel);
  padding: .75rem 1rem;
  font-family: var(--mono);
  font-size: .9rem;
}
[role="status"].metadata:empty { margin: 0; }

/* ---- Forms ---- */

label, legend {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 1.25rem 0 .4rem;
}
legend { font-weight: 700; color: var(--text); padding: 0 .4rem; margin: 0; }
fieldset {
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 1rem 1.25rem 1.25rem;
  margin: 1.25rem 0;
  min-width: 0;
}

input, textarea, select {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .7rem .75rem;
  max-width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select { width: 100%; }
input[type="file"] { border-style: dashed; width: 100%; background: transparent; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--text); width: 1.15rem; height: 1.15rem; margin: 0; flex-shrink: 0; }
input:read-only:not([type="checkbox"]):not([type="radio"]) { background: var(--panel); }
input:disabled, textarea:disabled { color: var(--muted); background: transparent; }

/* Checkbox and radio rows read as ordinary text, not as field labels. */
.done-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
}

button {
  display: inline-block;
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.3;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--text);
  border-radius: 0;
  padding: .8rem 1.4rem;
  min-height: 2.75rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
button:hover { background: var(--text); color: var(--bg); }
button:disabled, button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; border-style: dashed; }
button:disabled:hover, button[aria-disabled="true"]:hover { background: transparent; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.actions label { margin: 0; }

/* ---- Tables ---- */

table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .875rem; margin-bottom: 1rem; }
caption {
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  padding-bottom: .5rem;
}
th, td { text-align: left; vertical-align: top; padding: .75rem .75rem .75rem 0; border-bottom: 1px solid var(--grid); }
thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 700;
  padding-top: 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
td.metadata { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ---- Lists of records ---- */

.tool-list { list-style: none; padding: 0; }
.tool-list li { border-bottom: 1px solid var(--rule); padding: .9rem 0; margin: 0; break-inside: avoid; }
.tool-list h3 { margin: 0 0 .25rem; }
.tool-list p { margin-bottom: .25rem; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.answer-text { white-space: pre-wrap; border: 1px solid var(--rule); background: var(--panel); padding: .75rem 1rem; }

/* ---- Footer ---- */

footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .875rem;
  color: var(--muted);
}
footer p { margin-bottom: .5rem; }
footer a { color: var(--muted); }

/* ---- Utility ---- */

.skip-link { position: absolute; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--bg); border: 2px solid var(--text); font-family: var(--mono); transform: translateY(-200%); z-index: 1; }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.print-only { display: none; }

/* ---- PF-03 Default Diff ---- */

.default-setting { border: 1px solid var(--rule); background: var(--panel); padding: 1rem 1.25rem; margin: 1.25rem 0; break-inside: avoid; }
.default-setting h4 { margin-top: 0; font-size: .8rem; color: var(--text); }
.default-diff { table-layout: fixed; }
.default-diff th, .default-diff td { width: 50%; }

/* ---- PF-01 Audit ---- */

.audit-grid td { text-align: center; min-width: 2.25rem; padding: .5rem .25rem; border: 1px solid var(--grid); }
.audit-grid thead th { text-align: center; padding: 0 .25rem .5rem; }
.audit-grid thead th:first-child, .audit-grid tbody th { text-align: left; padding-right: .5rem; }
.shade-0 { background: transparent; }
.shade-1 { background: rgba(17, 17, 17, .08); }
.shade-2 { background: rgba(17, 17, 17, .18); }
.shade-3 { background: rgba(17, 17, 17, .32); }
.shade-none { color: var(--muted); }
.pattern-key { font-size: .875rem; padding-left: 1.5rem; }
.scale-key span { white-space: nowrap; margin-right: 1em; }

legend .legend-ref { display: block; }
legend .legend-question { display: block; font-family: var(--sans); font-size: 1.125rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); margin-top: .4rem; }
.done-label:has(.pattern-gloss) { align-items: flex-start; padding: .35rem 0; }
.done-label:has(.pattern-gloss) input { margin-top: .3rem; }
.done-label .pattern-name { display: block; font-weight: 500; }
.done-label .pattern-gloss { display: block; font-size: .95rem; color: var(--muted); }
.protocol-purpose { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.7; border: 2px solid var(--text); background: var(--panel); padding: 1rem 1.25rem; }
.protocol-outcome:not(:empty) { font-family: var(--mono); border-left: 3px solid var(--text); padding: .5rem 1rem; background: var(--panel); }
.tally td { text-align: right; }

tr.withdrawn th, tr.withdrawn td { color: var(--muted); }

/* ---- PF-06 Field Observations ---- */

.specimen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.specimen-card { border: 1px solid var(--rule); background: var(--panel); padding: .85rem 1rem; break-inside: avoid; }
.specimen-card h3 { font-size: 1.15rem; margin: .4rem 0 .4rem; }
.specimen-card .metadata { margin: 0; font-size: .875rem; }
.catalogue-number { font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .12em; margin: 0; border-bottom: 1px solid var(--rule); padding-bottom: .35rem; }
.specimen-metadata { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; font-family: var(--mono); font-size: .9rem; border: 1px solid var(--grid); background: var(--panel); padding: 1rem 1.25rem; }
.specimen-metadata dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: .1rem; }
.specimen-metadata dd { margin: 0; }
#sp-figure { margin: 1.5rem 0; }
#sp-figure img { max-width: 100%; height: auto; border: 1px solid var(--rule); }

/* ---- Small screens ---- */

@media (max-width: 600px) {
  body { padding: 1.75rem 1.25rem; }
  .page-header { padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
  fieldset { padding: .85rem 1rem 1rem; }
  .actions button { flex: 1 1 100%; }
  .specimen-metadata { grid-template-columns: 1fr; gap: 0; }
  .audit-grid { font-size: .8rem; table-layout: fixed; }
  .audit-grid td { min-width: 0; padding: .45rem 0; }
  .audit-grid thead th { padding: 0 0 .4rem; }
  .audit-grid thead th:first-child, .audit-grid tbody th { width: 28%; overflow-wrap: anywhere; padding-right: .35rem; }
  .specimen-metadata dd { margin-bottom: .6rem; }

  /* Tables marked .stack collapse to one entry per row, with labels taken
     from each cell's data-label, as on cognitivewallpaper.com. */
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack caption, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; width: auto; }
  table.stack tr { border-bottom: 1px solid var(--rule); padding: .9rem 0; }
  table.stack th, table.stack td { border: 0; padding: 0 0 .3rem; white-space: normal; }
  table.stack tbody tr:last-child > * { border-bottom: 0; }
  table.stack [data-label]::before {
    content: attr(data-label) " ";
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Print: A5 ---- */

@page { size: A5; margin: 12mm; }
@media print {
  html { background: white; }
  body { max-width: none; padding: 0; font-size: 9.5pt; color: black; }
  h1 { font-size: 20pt; }
  h2 { font-size: 8pt; }
  h3 { font-size: 11pt; }
  h1, h2, h3, h4 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  a { color: black; }
  .skip-link, .actions, .no-print, button { display: none !important; }
  .print-only { display: block; }
  main > section, main > div { margin-bottom: 1rem; }
  .notice, fieldset, .default-setting, .specimen-card, .specimen-metadata, pre, .answer-text { background: none; }
  .tool-list li { padding: .3rem 0; }
  .columns { display: block; }
  table { font-size: 7.5pt; }
  thead { display: table-header-group; }
  tr, img, fieldset { break-inside: avoid; }
  .audit-grid td { min-width: 0; padding: .2rem; }
  .shade-1, .shade-2, .shade-3 { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .page-header > p:last-child { display: none; }
  footer { margin-top: 1rem; }
}

/* ---- Site navigation ---- */
.site-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--rule); padding-bottom: .75rem; margin-bottom: 2rem; }
.site-nav-home { font-weight: 700; color: var(--text); text-decoration: none; margin-right: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a { color: var(--muted); text-decoration: none; padding: .35rem 0; display: inline-block; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 600px) {
  .site-nav { font-size: .75rem; gap: .25rem; }
  .site-nav-home { width: 100%; }
  .site-nav ul { gap: 0 .9rem; }
}
@media print { .site-nav { display: none; } }

/* ---- Home and notebook ---- */
.notebook-card { border: 2px solid var(--text); background: var(--panel); padding: 1rem 1.25rem; margin-bottom: 2.5rem; }
.notebook-card h2 { border: 0; padding: 0; margin-bottom: .5rem; }
.notebook-card p:last-child { margin-bottom: 0; }
.method { list-style: none; padding: 0; counter-reset: stage; }
.method > li { counter-increment: stage; border-top: 1px solid var(--rule); padding: 1rem 0 .5rem; margin: 0; }
.method > li > h3 { margin-top: 0; }
.method > li > h3::before { content: counter(stage, decimal-leading-zero) " · "; font-family: var(--mono); font-size: .85rem; color: var(--muted); letter-spacing: .08em; }
.method-tools { padding-left: 1.2rem; }
.pattern-list { padding-left: 1.8rem; }
.pattern-list li::marker { font-family: var(--mono); color: var(--muted); }
.next-steps { list-style: none; padding: 0; }
.next-steps li { border-left: 3px solid var(--text); background: var(--panel); padding: .75rem 1rem; margin: 0 0 .75rem; }
.next-steps a { font-family: var(--mono); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* ---- Home header with the zine cover ---- */
.page-header.with-cover { display: grid; grid-template-columns: 1fr 13rem; gap: 2rem; align-items: start; }
.page-header.with-cover .header-text > p:last-child { margin-bottom: 0; }
.based-on { font-family: var(--mono); font-size: .875rem; color: var(--muted); }
.based-on a { color: var(--text); }
.zine-cover { margin: 0; }
.zine-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); box-shadow: 0 1px 6px rgba(17, 17, 17, .12); }
.zine-cover figcaption { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: .5rem; text-align: center; }
@media (max-width: 600px) {
  .page-header.with-cover { grid-template-columns: 1fr; gap: 1.25rem; }
  .zine-cover { max-width: 7.5rem; }
  .zine-cover figcaption { font-size: .65rem; letter-spacing: .06em; white-space: nowrap; text-align: left; }
}
@media print { .zine-cover { display: none; } .page-header.with-cover { display: block; } }

/* ---- Instrument icons ---- */
.page-header.has-icon { position: relative; }
.page-header .tool-icon { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
.notebook-card .tool-icon { float: right; width: 3rem; height: 3rem; margin: 0 0 .5rem 1rem; }
.method-tools { list-style: none; padding-left: 0; }
.method-tools li { display: flex; gap: .85rem; align-items: flex-start; margin: .6rem 0; }
.method-icon { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; margin-top: .1rem; }
@media print { .tool-icon, .method-icon { display: none; } }

/* ---- Record blocks, after the pattern headers in CW-PUB-001 ----
   A reference line, then label and value pairs, between dashed rules. */
.record-block {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
  border-top: 1px dashed var(--text);
  border-bottom: 1px dashed var(--text);
  padding: .6rem 0;
  margin: .25rem 0 1rem;
  max-width: 40rem;
}
.record-block .record-ref { font-weight: 700; margin: 0 0 .2rem; }
.record-block dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem .75em; margin: 0; }
.record-block dt::after { content: ":"; }
.record-block dd { margin: 0; overflow-wrap: anywhere; }
.page-header > .record-block + p { margin-top: .75rem; }
@media (max-width: 600px) {
  .record-block { font-size: .75rem; letter-spacing: .04em; }
}
@media print {
  .record-block { font-size: 7.5pt; padding: .3rem 0; }
}