/* Tradition page styles. Values come from tokens.css; nothing here defines a colour. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

/* C-021: avoid a single word alone on the last line of paragraphs, list items, captions and quotes.
   Headings keep their own text-wrap: balance. Browsers without support simply ignore it. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--link-visited); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--button);
  color: var(--button-text);
  font-family: var(--font-ui);
  padding: var(--space-3) var(--space-4);
  z-index: 10;
}
.skip:focus { top: var(--space-3); }
.skip:visited { color: var(--button-text); }
.skip:hover { color: var(--button-text); background: var(--button-hover); }


/* ---------- site header ---------- */
.site-header { padding-block: var(--space-4); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.wordmark {
  font-family: var(--font-text);
  font-weight: 650;
  font-size: var(--step-1);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--heading);
  text-decoration: none;
}
.wordmark:visited { color: var(--heading); }
.wordmark:hover { color: var(--heading); text-decoration: underline; }
/* C-024 (replaces C-022): the Living Folio logo mark before the name. The left leaf and the spine take
   the heading colour; the right leaf is the gold mark colour, so both themes follow the tokens.
   The name stays real text. */
.wordmark { display: inline-flex; align-items: center; gap: 0.4em; }
.wordmark-mark { flex: none; width: 1.45em; height: 1.45em; }
.wordmark-mark .accent { fill: var(--mark); }
@media (max-width: 22rem) { /* 352 px and narrower: keep "Psychoactive" clear of the theme button */
  .wordmark { font-size: 1.25rem; gap: 0.3em; }
  .wordmark-mark { width: 1.2em; height: 1.2em; }
}

.header-tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; }
.wordmark { flex: 1 1 auto; min-width: 0; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
}
.nav-list a { color: var(--heading); text-decoration: none; padding-block: var(--space-2); display: inline-block; }
.nav-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; color: var(--heading); }
.nav-list a:visited { color: var(--heading); }
.nav-list [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 3px; }

.site-nav { width: 100%; }
/* C-028: the theme button now follows the menu in the markup (keyboard order matches the desktop row).
   On phones a grid keeps the button at the top right, beside the name, with the menu below. */
@media (max-width: 56.99rem) { /* C-048: was 47.99rem, matching the new one-row header breakpoint */
  .site-header .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .header-top { grid-column: 1; grid-row: 1; }
  .header-tools { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; }
}

.btn-quiet {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--heading);
  background: transparent;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-height: 2.75rem;
  cursor: pointer;
}
.btn-quiet:hover { background: var(--surface); }

/* ---------- title block ---------- */
/* C-050: pages without a breadcrumb (top-level pages, Words) start with the title; give it the same breathing room */
main > .wrap > .title-block:first-child { padding-top: var(--space-6); }
.crumbs {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--muted);
  margin: var(--space-5) 0 var(--space-4);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--control); }
.crumbs a { color: var(--muted); }

.title-block h1 {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--heading);
  text-wrap: balance;
}
.title-block .own-name {
  margin: var(--space-3) 0 0;
  font-style: italic;
  font-size: var(--step-1);
  color: var(--muted);
}
.title-block .tagline {
  margin: var(--space-4) 0 0;
  font-size: var(--step-1);
  line-height: 1.4;
  max-width: 42ch;
  color: var(--body);
  text-wrap: pretty;
}

/* ---------- hero ---------- */
.hero { margin: var(--space-5) 0 0; }
.hero img {
  width: 100%;
  aspect-ratio: 3 / 2;  /* the whole image at every width (owner, 2026-11-05) */
  object-fit: cover;
  object-position: 50% 60%;
  background: var(--surface);
}
.hero figcaption {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--muted);
  padding-top: var(--space-2);
  max-width: var(--measure);
}
.hero .wrap-bleed { margin-inline: calc(var(--gutter) * -1); }
.hero figcaption { padding-inline: 0; }

/* ---------- body layout ---------- */
.page-body { padding-block: var(--space-6) var(--space-7); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

/* ---------- the record (at a glance, F2) ---------- */
.record {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  align-self: start;
}
.record h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
  color: var(--heading);
}
.record-group + .record-group { margin-top: var(--space-5); }
.record-group h3 {
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading);
}
/* C-030: a small gold ring before each group heading, the same mark as "What is uncertain" (replaces a 4px side stripe) */
.record-group h3::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border: 2px solid var(--mark); border-radius: 50%; }
.record dl { margin: 0; }
.record .row { padding-block: var(--space-3); border-top: 1px solid var(--border); }
.record .row:first-child { border-top: 0; }
.record .row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); }
.record dt { font-size: var(--step--1); font-weight: 600; color: var(--muted); padding-top: 0.15em; }
.record dd { margin: 0; color: var(--body); }
.record dd p { margin: 0; }
.record dd p + p { margin-top: var(--space-1); }
/* Scientific names: the panel's own sans (Atkinson), slanted. Literata italic was too thin and
   calligraphic at this size (owner feedback 2026-10-31). */
.record .sci { font-style: italic; font-family: var(--font-ui); font-weight: 400; }

/* ---------- article ---------- */
.article > * { max-width: var(--measure); }
.article h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--heading);
  text-wrap: balance;
  max-width: 26ch;
}
.article > h2:first-child { margin-top: 0; }
.article h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.25; color: var(--heading); margin: var(--space-5) 0 var(--space-2); }
.article p { margin: 0 0 var(--space-4); }
.lede { font-size: var(--step-1); line-height: 1.5; }

/* ---------- the ledger (F8) ---------- */
.ledger { max-width: var(--measure); }
.ledger-intro { font-family: var(--font-ui); font-size: 1rem; color: var(--muted); max-width: var(--measure); }
.ledger-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 2px solid var(--heading); }
.ledger-list > li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 2.25rem;
  border-bottom: 1px solid var(--border);
}
.ledger-list > li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: calc(var(--space-4) + 0.45em);
  width: 1rem;
  height: 1rem;
  border: 2.25px solid var(--mark);
  border-radius: 50%;
}
.status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
}
.status svg { flex: none; width: 1.5rem; height: 1.5rem; }
.status circle { stroke: var(--mark); stroke-width: 2.25; fill: none; }
.status .fill { fill: var(--mark); stroke: none; }
.ledger .claim { margin: 0; }
.ledger .cites { margin: var(--space-1) 0 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); }

.research-line {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-top: 2px solid var(--mark); /* C-030: a gold rule along the top (replaces a 4px side stripe) */
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 1rem;
  max-width: var(--measure);
}
.research-line p { margin: 0; }

.sources { margin-top: var(--space-5); font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; max-width: var(--measure); }
.sources h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-2); }
.sources ol { margin: 0; padding-left: 1.5rem; }
.sources li { padding-left: var(--space-1); margin-bottom: var(--space-2); }
.sources .no-link { color: var(--muted); }

/* ---------- related (F6) ---------- */
.related ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-width: var(--measure); }
.related li { padding-block: var(--space-3); border-top: 1px solid var(--border); display: grid; gap: var(--space-1); }
.related li:last-child { border-bottom: 1px solid var(--border); }
.related a { font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.related .why { font-family: var(--font-ui); font-size: 1rem; color: var(--muted); }

/* ---------- cite (F9) ---------- */
.cite { max-width: var(--measure); }
.cite blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.5;
  user-select: all;
}
.cite .note { font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); margin: var(--space-2) 0 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.btn {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--button-text);
  background: var(--button);
  border: 2px solid var(--button);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-height: 2.75rem;
  cursor: pointer;
}
.btn:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn.secondary { background: transparent; color: var(--link); border-color: var(--link); }
.btn.secondary:hover { background: var(--surface); color: var(--link-hover); border-color: var(--link-hover); }
.live { font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); min-height: 1.5em; margin: var(--space-2) 0 0; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: var(--space-6);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
}
.site-footer .wrap { display: grid; gap: var(--space-5); }
.site-footer p { margin: 0 0 var(--space-3); max-width: 56ch; }
.site-footer h2 { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-2); color: var(--heading); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.footer-links a { display: inline-block; padding-block: var(--space-1); }
/* C-057: "page not found": the main sections as a short list of large links */
.nf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); max-width: var(--measure); }
.nf-links a { display: inline-block; padding-block: var(--space-2); font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; }
/* C-039: copyright line, full width under the footer columns */
.site-footer .footer-copy { grid-column: 1 / -1; max-width: none; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); }

/* ---------- from tablet up ---------- */
/* C-048: the one-row header starts at 57rem (was 48rem), so tablets no longer wrap the menu into two rows */
@media (min-width: 57rem) {
  .header-top { display: contents; }
  .wordmark { order: 1; flex: none; }
  .site-nav { width: auto; order: 2; margin-left: auto; }
  .header-tools { order: 3; }
  .site-header .wrap { flex-wrap: nowrap; justify-content: flex-start; gap: var(--space-5); }
}
@media (min-width: 48rem) {
  .hero .wrap-bleed { margin-inline: 0; }
  .ledger .status { padding-top: 0.2em; }
  .site-footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
}

/* ---------- side-by-side record and article: from 800 px (50rem), narrower sidebar until 1024 px ---------- */
@media (min-width: 50rem) {
  .page-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-5); }
  .record { position: sticky; top: var(--space-5); padding: var(--space-4) var(--space-3); max-height: calc(100vh - 3rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
  .record .row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- desktop ---------- */
@media (min-width: 64rem) {
  .page-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-6); }
  .record { padding: var(--space-5) var(--space-4); }
}

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

[data-theme="dark"] .hero img { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero img { filter: brightness(0.92); } }

/* ---------- additions for real data ---------- */
.cite-ref { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
/* C-011: each citation number is a 24×24 px target (WCAG 2.2, 2.5.8) and underlined, so it is not marked by colour alone.
   The vertical padding is cancelled by a negative margin, so line spacing in the text does not change. */
.cite-ref a { color: var(--link); display: inline-block; box-sizing: border-box; min-width: 1.5rem; min-height: 1.5rem; padding: 0.25rem 0.125rem; margin-block: -0.25rem; line-height: 1rem; text-align: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.cite-ref a:hover { text-decoration-thickness: 2px; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li + li { margin-top: var(--space-1); }
.record .sub { margin: var(--space-1) 0 0; font-size: var(--step--1); color: var(--muted); }
.own { font-family: "Literata Slant", var(--font-text); font-style: italic; font-weight: 600; }

.note-block {
  max-width: var(--measure);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--surface);
  border-top: 2px solid var(--mark); /* C-030: a gold rule along the top (replaces a 4px side stripe) */
  font-size: 1rem;
  line-height: 1.55;
}
.article .note-block h2 { margin: 0 0 var(--space-2); font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.note-block p { margin: 0; }

.ledger > p:first-of-type { max-width: var(--measure); }

/* C-032: the timeline reads as a control: a Paper Surface panel with a 3:1 Slate Control outline, a ringed + / − before the label, and a hover tint */
.timeline { margin-top: var(--space-5); max-width: var(--measure); font-family: var(--font-ui); font-size: 1rem; background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius); }
.timeline summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 700; color: var(--heading); min-height: 2.75rem; border-radius: var(--radius); }
.timeline summary:hover { background: var(--page); }
.timeline summary:hover::before { background: var(--heading); color: var(--surface); border-color: var(--heading); }
.timeline ol { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-3); }
.timeline li { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding-block: var(--space-2); border-top: 1px solid var(--border); line-height: 1.45; }
.timeline .when { font-weight: 600; color: var(--heading); }

.sources li { scroll-margin-top: var(--space-5); }
.sources li:target { background: var(--surface); outline: 2px solid var(--mark); outline-offset: 4px; }
.sources .cit { margin: 0 0 var(--space-2); }
.src-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.chips li { margin: 0; padding: 0.1rem var(--space-2); border: 1px solid var(--control); border-radius: var(--radius); font-size: var(--step--1); color: var(--muted); }
.sources > ol > li { margin-bottom: var(--space-4); }

.plain-h1 { font-family: var(--font-text); font-size: var(--step-3); line-height: 1.1; margin: 0 0 var(--space-4); color: var(--heading); }

@media (min-width: 48rem) { .timeline li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); } }
.timeline > summary { list-style: none; display: flex; justify-content: flex-start; align-items: center; gap: var(--space-3); }
.timeline > summary::-webkit-details-marker { display: none; }
.timeline > summary::before { content: "+"; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 700; line-height: 1; }
.timeline[open] > summary::before { content: "\2212"; }

/* collapsible record groups */
.record-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.75rem; }
.record-group > summary::-webkit-details-marker { display: none; }
.record-group > summary::after { content: "+"; font-family: var(--font-ui); font-weight: 700; color: var(--heading); width: 1.5rem; text-align: center; flex: none; }
.record-group[open] > summary::after { content: "\2212"; }
.record-group > summary h3 { margin: 0; flex: 1; }
.record-group > dl { margin-top: var(--space-2); }

.lede { font-size: 1.25rem; line-height: 1.55; }
@media (min-width: 64rem) {
  .lede { font-size: var(--step-1); }
}

/* Substance list in the record: plants nested under each substance */
.record .sub-list { margin-top: var(--space-1); }
.record dd > ul.plain > li + li { margin-top: var(--space-3); }


/* Italics in running text (scientific names, native terms): slanted upright, not Literata italic. */
.article em, .note-block em { font-family: "Literata Slant", var(--font-text); font-style: italic; }

/* ---------- all-traditions list (F3) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.list-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.filters { font-family: var(--font-ui); }
.f-search label { display: block; font-weight: 600; color: var(--heading); margin-bottom: var(--space-2); }
.f-search input {
  width: 100%; min-height: 2.75rem; padding: var(--space-2) var(--space-3);
  font: inherit; font-size: 1.0625rem; color: var(--body); background: var(--surface);
  border: 1px solid var(--control); border-radius: var(--radius);
}
.f-search input::placeholder { color: var(--muted); opacity: 1; }
.f-panel { margin-top: var(--space-4); border-top: 1px solid var(--border); }
.f-panel > summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding-block: var(--space-2); font-weight: 700; color: var(--heading); list-style: none; }
.f-panel > summary::-webkit-details-marker { display: none; }
.f-panel > summary::before { content: "+"; width: 1.25rem; text-align: center; color: var(--heading); }
.f-panel[open] > summary::before { content: "\2212"; }
.f-active { font-weight: 400; color: var(--muted); }
.f-group { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.f-group legend { padding: 0; font-size: var(--step--1); font-weight: 600; color: var(--muted); margin-bottom: var(--space-2); }
.f-group li { margin: 0; }
.f-group label { display: flex; align-items: baseline; gap: var(--space-2); min-height: 2.25rem; padding-block: 0.3rem; cursor: pointer; color: var(--body); }
.f-group input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--button); align-self: center; }
.f-group .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.f-group label.is-zero { color: var(--muted); } /* C-010: this option would show no traditions */
/* C-012: each filter group folds; Region starts open, a group with a ticked option opens on load */
.f-fold { border-top: 1px solid var(--border); }
.f-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; font-size: 1rem; font-weight: 600; color: var(--heading); }
.f-fold > summary::-webkit-details-marker { display: none; }
.f-fold > summary::after { content: "+"; margin-left: auto; width: 1.5rem; text-align: center; font-weight: 700; color: var(--heading); flex: none; }
.f-fold[open] > summary::after { content: "\2212"; }
.f-fold .f-sel { font-weight: 400; color: var(--muted); }
.f-fold > .f-group { margin: 0 0 var(--space-3); }
.filters { scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
.f-note { font-size: var(--step--1); color: var(--muted); margin: 0; }
.r-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 2.75rem; border-bottom: 2px solid var(--heading); padding-bottom: var(--space-2); }
.r-count { margin: 0; font-family: var(--font-ui); font-weight: 600; color: var(--heading); }
.t-list { list-style: none; margin: 0; padding: 0; }
.t-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.t-item[hidden] { display: none; }
.t-text { display: contents; } /* phones: one column in the order title, picture, text */
.t-thumb { order: 1; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--surface); margin-bottom: var(--space-3); }
.t-tag, .t-meta { order: 2; }
.t-title { margin: 0 0 var(--space-2); font-size: var(--step-1); line-height: 1.25; }
.t-title a { text-decoration: none; font-weight: 600; }
.t-title a::after { content: ""; position: absolute; inset: 0; }
.t-title a:hover { text-decoration: underline; }
.t-tag { margin: 0 0 var(--space-2); }
.t-meta { margin: 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); }
.r-empty { padding-block: var(--space-5); font-family: var(--font-ui); }
.r-empty h2 { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.r-empty[hidden], .r-head [hidden] { display: none; }
@media (min-width: 40rem) {
  .t-item { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); }
  .t-text { display: block; }
  .t-thumb { order: 0; margin-bottom: 0; }
  .t-title { margin-bottom: var(--space-1); }
}
@media (min-width: 50rem) {
  .list-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .filters { position: sticky; top: var(--space-5); max-height: calc(100vh - 3rem); overflow-y: auto; padding-right: var(--space-1); }
  .f-panel > summary { pointer-events: none; }
  .f-panel > summary::before, .f-panel[open] > summary::before { content: none; } /* C-012: no toggle sign where the panel cannot close */
}
@media (min-width: 64rem) { .list-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-6); } }

/* Site pages (About, How this site was created) */
.prose ol, .prose ul { margin: 0 0 var(--space-4); padding-left: 1.5rem; }
.prose li { margin-bottom: var(--space-2); }
.prose h2 { margin-top: var(--space-6); }
.more { border-block: 1px solid var(--control); margin: 0 0 var(--space-4); max-width: var(--measure); }
.more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; padding-block: var(--space-2); font-weight: 700; color: var(--heading); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; width: 1.5rem; text-align: center; flex: none; }
.more[open] > summary::after { content: "\2212"; }
.more > p:last-child { margin-bottom: var(--space-3); }

/* ---------- home page (version B, owner 2026-11-06; docs/prompts/home-page-redesign.md) ---------- */
.home { padding-block: var(--space-5) var(--space-7); }
.promise {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--heading);
  max-width: 21ch;
  text-wrap: balance;
}
.curated { margin: var(--space-4) 0 0; max-width: 60ch; font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.55; color: var(--body); }

/* four equal ways in, same order as the main menu: rows on phones, four columns from 50rem */
.ways { margin-top: var(--space-6); }
.ways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.way { border-top: 2px solid var(--mark); }
.way a { display: grid; gap: 0.125rem; min-height: 44px; padding-block: var(--space-3) var(--space-2); color: inherit; text-decoration: none; }
.way-name {
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.15;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.way-line { font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.4; color: var(--body); }
.way a:hover .way-name { color: var(--link-hover); text-decoration-thickness: 2px; }

.home-lead { margin: 0 0 var(--space-5); font-family: var(--font-text); font-size: var(--step-2); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--heading); text-wrap: balance; } /* same as section headings on tradition pages */
.home-lead a { text-underline-offset: 0.2em; } /* C-016: an ordinary link (colour, hover, visited from a) */

/* every question, id order: a strip of all its answering traditions, the question, the count */
.home-qs, .home-purposes, .home-words { margin-top: var(--section-gap); } /* owner 2026-11-06: sections clearly apart */
.home { --section-gap: clamp(5rem, 3.5rem + 4vw, 7.5rem); }
/* C-035: "contact sheet" layout (chosen in live mode, variant 3): the question first, its count, then the
   answering traditions' scenes, larger and in their own 3:2 frame, four to a row. Markup order is unchanged
   (strip, title, line); flex order puts the title and count first. */
.hq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7); }
.hq { position: relative; display: flex; flex-direction: column; padding-top: var(--space-4); border-top: 1px solid var(--border); }
/* C-037: two to a row (was three, C-036), each picture named and linked to that tradition's answer */
.hq-strip { order: 3; list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); align-items: start; }
.hq-strip a, .hq-strip a:visited { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.hq-strip span { display: block; margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.35; color: var(--body); }
.hq-strip a:hover span { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hq-strip a:hover img { filter: brightness(1.06); }
.hq-strip img, .hq-blank { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); border-radius: var(--radius); }
.hq-title { order: 1; margin: 0; font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; line-height: 1.2; color: var(--heading); text-wrap: balance; }
.hq-title a { text-underline-offset: 0.2em; } /* C-016: an ordinary link */
.hq-line { order: 2; margin: var(--space-1) 0 0; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.45; color: var(--body); }

/* C-046: "measured bars" (chosen in live mode, variant 1): each purpose with a slim gold bar showing its share of
   the 26 traditions (--n set per item). Phones: name and count on one line, bar below; from 50rem one row each. */
.pur-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3) 0; max-width: 44rem; }
.pur-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "bar bar"; align-items: baseline; column-gap: var(--space-3); row-gap: var(--space-1); font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.5; }
.pur-list a { grid-area: name; justify-self: start; padding-block: 0.55rem; } /* 44 px tall target with the line height */
.pur-list .n { grid-area: n; color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.pur-list .num { display: inline-block; min-width: 2ch; text-align: right; } /* C-047: digits line up; the first row adds "traditions" */
.pur-list .bar { grid-area: bar; display: block; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--mark) calc(var(--n) / 26 * 100%), var(--border) 0); }
@media (min-width: 50rem) {
  .pur-list li { grid-template-columns: 15rem minmax(0, 1fr) 7.5rem; grid-template-areas: "name bar n"; align-items: center; } /* C-047: room for "24 traditions" */
}
.pur-note { margin: 0 0 var(--space-5); max-width: var(--measure); font-family: var(--font-ui); font-size: var(--step--1); color: var(--body); } /* C-047: caption above the bars, explains the counts */
.home-purposes .home-lead { margin-bottom: var(--space-2); }

.home-words .home-lead { margin-bottom: var(--space-2); }
.hw-line { margin: 0; font-family: var(--font-ui); color: var(--body); }

@media (min-width: 50rem) {
  .ways { margin-top: var(--space-7); }
  .ways-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-5); }
  .way a { padding-block: var(--space-3) 0; }
  .way-name { font-size: var(--step-2); }
  .hq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
  .hq-title { font-size: var(--step-2); }
}

/* home image under the heading (owner 2026-11-06); text width on wide screens so it does not fill the screen */
.home-figure { margin: var(--space-6) 0 0; max-width: 48rem; }
.home-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); border-radius: var(--radius); }
.home-figure figcaption { margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-figure img { filter: brightness(0.92); } }
:root[data-theme="dark"] .home-figure img { filter: brightness(0.92); }

/* words page (/words): each tradition by its own word for its medicine, A to Z across rows (owner 2026-11-05) */
.hn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6); }
.hn-list li { break-inside: avoid; padding-block: var(--space-2); }
.hn-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
.hn-head a { display: inline-block; padding-block: 0.25rem; min-height: 44px; }
.hn-word {
  font-family: "Literata Slant", var(--font-text);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.2;
  text-underline-offset: 0.18em; /* C-016: colour, hover and visited come from a */
}
.hn-common { font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.5; padding-block: 0.6rem; } /* the link style shows it goes elsewhere */
span.hn-common { color: var(--body); }
.hn-how { margin: var(--space-3) 0 0; max-width: 60ch; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
.hn-where { display: block; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.4; color: var(--muted); }
@media (min-width: 50rem) { .hn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- all substances ---------- */
.m-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.m-list .t-item:first-child { border-top: 1px solid var(--border); }
/* C-053 (pilot): from 64rem a small world map beside the list shows where each entry is used.
   At rest every area is a neutral dot (no entry singled out); hovering or focusing an entry lights its areas in gold. */
.m-map { display: none; }
@media (min-width: 64rem) {
  .m-layout { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .m-map { display: block; position: sticky; top: var(--space-5); }
}
.m-map-svg { display: block; width: 100%; height: auto; }
.m-map .map-sea { fill: var(--map-sea); }
.m-map .map-land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 0.75px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.m-dot { fill: var(--control); stroke: var(--surface); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 160ms ease-out, opacity 160ms ease-out, fill 160ms ease-out; }
.m-map[data-active] .m-dot { opacity: 0.35; }
.m-map[data-active] .m-dot.is-on { opacity: 1; fill: var(--mark); transform: scale(1.6); }
.m-map-caption { margin: var(--space-3) 0 0; min-height: 3em; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.45; color: var(--body); }
.m-map-now { font-weight: 600; color: var(--heading); }
.m-map[data-active] .m-map-rest { display: none; }

/* ---------- copy all sources ---------- */
.src-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.src-copy[hidden] { display: none; }
.src-copy-label { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--heading); } /* C-033: was 0.875rem muted; easier to read */
.src-copy-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.src-copy .live { flex-basis: 100%; margin: 0; min-height: 1.25em; }
.src-copy-hint { flex-basis: 100%; margin: 0; font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; color: var(--body); } /* C-033: was 0.875rem muted */

/* ---------- Questions across traditions (F7) ----------
   Two voices on one page: the question page's own sentences (body serif) and the article's exact words
   (slanted serif behind the mark rule). The rule marks "this is the article speaking". */
.tr-intro { max-width: 52ch; }
.tr-list { list-style: none; margin: 0; padding: 0; max-width: 62rem; }
/* phone and small tablet: one column. Name and place, then the image across the full screen width,
   then the text and the quote (owner, 2026-11-06). The thumbnail link is hidden from screen readers,
   so moving it visually does not change the reading order. */
.tr-answer {
  display: flex; flex-direction: column;
  padding-block: var(--space-6); border-top: 1px solid var(--border);
}
.tr-answer:first-child { border-top: 0; padding-top: 0; }
.tr-body { display: contents; }
.tr-name { order: 1; }
.tr-place { order: 2; }
.tr-thumb { order: 3; margin: 0 calc(var(--gutter) * -1) var(--space-4); }
.tr-text { order: 4; }
.tr-quote { order: 5; }
.tr-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.tr-name { margin: 0; font-size: var(--step-1); font-weight: 600; line-height: 1.25; color: var(--heading); text-wrap: balance; }
.tr-name a { text-underline-offset: 0.18em; } /* C-016: an ordinary link */
.tr-place { margin: var(--space-1) 0 var(--space-4); font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); }
/* The answer is read at the article's body size; the quote differs by voice (slanted, mark rule)
   and, on wide screens only, by size. */
.tr-text { margin: 0; max-width: var(--measure); font-size: 1.1875rem; line-height: 1.6; }
.tr-text em { font-family: "Literata Slant", var(--font-text); font-style: italic; }
.tr-quote { margin: var(--space-5) 0 0; max-width: var(--measure); }
.tr-quote blockquote { margin: 0; padding-left: var(--space-4); border-left: 3px solid var(--mark); }
.tr-quote blockquote p {
  margin: 0; font-family: "Literata Slant", var(--font-text); font-style: italic;
  font-size: 1.1875rem; line-height: 1.5; color: var(--heading);
}
.tr-quote blockquote p::before { content: "\201C"; }
.tr-quote blockquote p::after { content: "\201D"; }
.tr-quote figcaption { margin-top: var(--space-2); padding-left: calc(var(--space-4) + 3px); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.tr-quote figcaption a { color: var(--link); }
@media (min-width: 800px) {
  /* image beside the answer, larger than before (owner, 2026-11-06) */
  .tr-answer { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .tr-body { display: block; }
  .tr-thumb { order: 0; margin: 0; }
  .tr-thumb img { border-radius: var(--radius); }
  .tr-text { font-size: 1.25rem; }
  .tr-quote blockquote p { font-size: var(--step-1); line-height: 1.4; }
}
@media (min-width: 1024px) {
  .tr-answer { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--space-6); }
}

/* Questions index: one block per question (F7-4) */
.home-question { margin-top: var(--space-7); }
.home-question .home-lead { margin-bottom: var(--space-2); }
.ht-line { margin: 0 0 var(--space-4); max-width: var(--measure); font-family: var(--font-ui); color: var(--body); } /* C-044: reading width for the longer lines */
.ht-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); } /* C-038: two across on phones (was three) */
@media (min-width: 40rem) { .ht-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* C-038: three across from 640px until the desktop row */
.ht-list img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); border-radius: var(--radius); }
.ht-list span { display: block; margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.35; color: var(--body); }
.ht-go { margin: var(--space-5) 0 0; font-family: var(--font-ui); font-weight: 600; }
/* C-008: each picture links to that tradition's answer */
.ht-list a, .ht-list a:visited { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.ht-list a:hover span { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ht-list a:hover img { filter: brightness(1.06); }
.tr-answer { scroll-margin-top: var(--space-5); }
@media (min-width: 800px) { .ht-list { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); } } /* at least 6 columns, so cards with 5 to 7 answers keep about the same image size */
.tr-more { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); max-width: 62rem; font-family: var(--font-ui); }
.tr-more h2 { margin: 0 0 var(--space-2); font-size: 1rem; font-weight: 700; color: var(--heading); }
.tr-more ul { list-style: none; margin: 0; padding: 0; }
.tr-more li { padding-block: var(--space-1); font-size: var(--step-0); }
.questions-index .home-question:first-child { margin-top: 0; }
.title-block .q-lead { max-width: 60ch; font-size: var(--step-0); line-height: 1.6; } /* Questions index: a full paragraph, so body size, not the large tagline */
@media (min-width: 800px) { .title-block .q-lead { font-size: 1.25rem; } }
/* C-049: question pages open with a full paragraph too, so the same rule: body size on phones, 1.25rem from 800px */
.title-block .tr-intro { max-width: 60ch; font-size: var(--step-0); line-height: 1.6; }
@media (min-width: 800px) { .title-block .tr-intro { font-size: 1.25rem; } }
.q-links { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.q-links li { margin: 0 0 var(--space-2); }
.q-links a { font-weight: 600; }

/* ---------- contents list on article pages (C-002) ----------
   Only pages whose grid has .has-toc use this layout; other article pages are unchanged.
   Phone: record, then a closed "Contents" row, then the article.
   50rem+: record and contents in the left column; contents sticks while reading.
   75rem+: contents moves to its own right-hand column. */
.toc { font-family: var(--font-ui); font-size: 1rem; line-height: 1.35; border-block: 1px solid var(--border); align-self: start; }
.toc-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.75rem; }
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::after { content: "+"; font-weight: 700; color: var(--heading); width: 1.5rem; text-align: center; flex: none; }
.toc-box[open] > summary::after { content: "\2212"; }
.toc h2 { margin: 0; flex: 1; font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; line-height: 1.2; color: var(--heading); }
.toc ol { list-style: none; margin: 0; padding: 0 0 var(--space-3); }
.toc li.toc-gap { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.toc a, .toc a:visited { display: block; padding-block: var(--space-2); color: var(--muted); text-decoration: none; text-wrap: pretty; }
.toc a:hover { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1px; }
.toc a[aria-current="location"] { color: var(--heading); font-weight: 700; }
.article h2[id], .sources h3[id] { scroll-margin-top: var(--space-5); }

@media (min-width: 50rem) {
  .has-toc { grid-template-rows: auto 1fr; }
  .has-toc > .record { grid-column: 1; grid-row: 1; position: static; max-height: none; overflow: visible; }
  .has-toc > .toc { grid-column: 1; grid-row: 2; position: sticky; top: var(--space-5); max-height: calc(100vh - 3rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
  .has-toc > .article { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 75rem) {
  .has-toc { grid-template-columns: 15rem minmax(0, 1fr) 12rem; gap: var(--space-6); }
  .has-toc > .record { grid-row: 1 / span 2; }
  .has-toc > .toc { grid-column: 3; grid-row: 1 / span 2; }
  .has-toc > .article { grid-column: 2; }
}

/* ---------- title beside the hero image (C-004) ----------
   Only pages whose top .wrap has .head-split. From 64rem the title and tagline sit left and the
   picture right, so the article starts about one screen sooner. The picture keeps its whole
   3:2 frame (owner, 2026-11-05); it is narrower, never cropped. */
@media (min-width: 64rem) {
  .head-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-6); align-items: start; }
  .head-split > .crumbs { grid-column: 1 / -1; }
  .head-split > .title-block { grid-column: 1; padding-top: var(--space-5); }
  .head-split > .hero { grid-column: 2; }
}

/* ---------- print (C-058) ----------
   Black on white whatever the screen theme; only the article and its record print, in one column.
   Menus, buttons, the contents list, filters and the small map are left out. The footer keeps who runs
   the site, the disclaimer and the copyright line. A short script on each page opens every
   <details> (record groups, timeline, contents) while printing, so nothing folded is lost. */
@page { margin: 18mm 16mm; }
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --page: #FFFFFF; --surface: #FFFFFF; --heading: #000000; --body: #000000; --muted: #333333;
    --link: #000000; --link-hover: #000000; --link-visited: #000000; --border: #999999; --control: #555555;
    --mark: #A8700F; --map-sea: #FFFFFF; --map-land: #DDDDDD; --map-coast: #666666;
  }
  body { font-size: 11.5pt; line-height: 1.5; }
  a, a:visited { color: #000; text-decoration: underline; }
  .skip, .site-nav, .header-tools, .toc, .btn-row, .src-copy, .live, .m-map, .filters,
  .site-footer .wrap > div:not(:first-child) { display: none !important; }
  .wrap { max-width: none; padding-inline: 0; }
  .site-header { padding-block: 0 4mm; border-bottom: 1px solid var(--border); }
  .page-body { padding-block: 6mm 0; }
  .page-grid, .head-split, .m-layout, .list-grid { display: block; }
  .record { position: static; max-height: none; overflow: visible; margin-bottom: 6mm; }
  .record-group > summary::after, .toc-box > summary::after { content: none; }
  .hero .wrap-bleed { margin-inline: 0; }
  .hero img, .home-figure img { width: auto; max-width: 100%; max-height: 9cm; filter: none !important; }
  .site-footer { margin-top: 8mm; padding-top: 4mm; }
  .site-footer .wrap { display: block; }
  h1, h2, h3, summary { break-after: avoid; }
  figure, blockquote, .record .row, .timeline li, .related li, .t-item, .ht-list li, .hn-list li, .hq { break-inside: avoid; }
  .hq-list { display: block; }
  .hq + .hq { margin-top: 8mm; }
  .hq-strip, .ht-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}