/* ============================================================
   Internet of Fine Gold — design system
   ------------------------------------------------------------
   A printed reference work, rendered for screens. The visual
   argument is restraint: hairlines, generous air, one accent
   metal used as a line and never as a fill.

   Contents
     1. Tokens          — colour, type scale, spacing, layout
     2. Base            — reset, body, links, focus
     3. Seal            — the hallmark mark
     4. Header & nav
     5. Typography
     6. Hero
     7. The definition
     8. Questions
     9. Criteria & cards
    10. Tables
    11. Glossary, FAQ
    12. Disclosure & bridge
    13. Utilities
    14. Footer
    15. Responsive
    16. Print
   ============================================================ */


/* ── 0. Faces ───────────────────────────────────────────── */

/* EB Garamond, variable, self-hosted. SIL OFL 1.1 — see
   /assets/fonts/LICENSE-NOTE.txt. Self-hosted rather than served
   from a CDN: compliance officers in the EU read this site, and a
   third-party font request is a conversation we do not need to have.
   One weight axis per file, declared as a range so the browser
   interpolates instead of downloading more files. */

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-var.woff2") format("woff2-variations"),
       url("/assets/fonts/EBGaramond-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-Italic-var.woff2") format("woff2-variations"),
       url("/assets/fonts/EBGaramond-Italic-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}


/* ── 1. Tokens ──────────────────────────────────────────── */

:root {
  /* Paper and ink. Warm, low-contrast, easy on long reading. */
  --paper:        #fcfbf7;
  --paper-tint:   #f6f3e9;
  --paper-deep:   #f1ece0;
  --card:         #ffffff;

  --ink:          #17160f;
  --ink-muted:    #545147;
  --ink-faint:    #8a8477;

  /* Hairlines. Nothing on this site is heavier than 1px. */
  --rule:         #e7e2d4;
  --rule-strong:  #d0c8b3;

  /* The metal. A line and a detail — never a background fill. */
  --gold:         #8a6a1c;
  --gold-bright:  #b3901f;
  --gold-pale:    #f0e8d0;

  --warn:         #8a5a1c;
  --link:         #1f4a70;
  --link-visited: #56457a;

  /* Type. Serif carries the argument, sans carries the apparatus.
     The system stack stays behind EB Garamond as a fallback, so the
     page is readable before the face arrives and if it never does. */
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Modular type scale, fluid where it earns it.
     Garamond has a markedly smaller x-height than Palatino, so every
     serif-set size is up roughly 6–7% against the previous round.
     Sans sizes are untouched — they were already correct. */
  --fs-xs:   0.775rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.14rem, 1.06rem + 0.3vw,  1.25rem);
  --fs-lg:   clamp(1.2rem,  1.1rem  + 0.42vw, 1.34rem);
  --fs-xl:   clamp(1.42rem, 1.26rem + 0.64vw, 1.72rem);
  --fs-2xl:  clamp(2.15rem, 1.6rem  + 2.2vw,  3rem);

  /* Spacing scale. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* Layout. */
  --measure:      36rem;   /* prose column  */
  --measure-wide: 70rem;   /* tables, grids */
  --gutter:       1.6rem;

  --shadow-card: 0 1px 2px rgba(60, 50, 20, 0.03),
                 0 8px 24px -18px rgba(60, 50, 20, 0.25);

  --ease: 0.14s ease;
}


/* ── 2. Base ────────────────────────────────────────────── */

* { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--gold-pale); color: var(--ink); }

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-wide { max-width: var(--measure-wide); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: rgba(31, 74, 112, 0.32);
  transition: color var(--ease), text-decoration-color var(--ease);
}

a:visited { color: var(--link-visited); }

a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold-bright);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 1px;
}

img, svg { max-width: 100%; }


/* ── 3. Seal ────────────────────────────────────────────── */

.seal {
  width: 1.55em;
  height: 1.55em;
  flex: none;
  color: var(--gold-bright);
  vertical-align: -0.32em;
  transition: color var(--ease);
}

.seal-lg {
  width: clamp(3rem, 2.4rem + 2.4vw, 4.1rem);
  height: clamp(3rem, 2.4rem + 2.4vw, 4.1rem);
  color: var(--gold-bright);
  display: block;
  margin: 0 0 var(--s-5);
}


/* ── 4. Header & nav ────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.006em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover,
.wordmark:hover .seal { color: var(--gold); }

.wordmark-abbr {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  color: var(--gold);
  padding-left: 0.6rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--rule-strong);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
  font-size: 0.845rem;
}

.site-header nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.site-header nav a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-bright);
}

.site-header nav a.is-current {
  color: var(--ink);
  border-bottom-color: var(--gold-bright);
}


/* ── 5. Typography ──────────────────────────────────────── */

main { padding: var(--s-7) 0 var(--s-8); }

h1 {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 var(--s-4);
  /* Garamond is already narrow; it does not want much negative track. */
  letter-spacing: -0.011em;
}

/* Section rule with a hallmark lozenge sitting on the line. */
h2 {
  position: relative;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.005em;
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}

h2::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  transform: rotate(45deg);
}

h2.no-rule {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-6);
}

h2.no-rule::before { display: none; }

h3 {
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.4;
  margin: var(--s-6) 0 var(--s-2);
}

p { margin: 0 0 1.1rem; }

.lead {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: 1.56;
  color: var(--ink-muted);
  margin-bottom: var(--s-6);
  max-width: 40rem;
}

.kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-4);
}

.note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.62;
}

.note-block {
  border-left: 2px solid var(--rule-strong);
  background: var(--paper-tint);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.note-block p:last-child { margin-bottom: 0; }


/* ── 6. Hero ────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #faf7ed 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-7) 0 var(--s-6);
}

/* Engine-turned texture, the way a certificate is engraved.
   Barely visible by design — it should read as paper, not pattern. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(138, 106, 28, 0.035) 0 1px,
    transparent 1px 7px
  );
}

.hero > * { position: relative; }

.hero h1 { margin-bottom: var(--s-3); }

.hero .hero-sub {
  font-size: var(--fs-sm);
  letter-spacing: 0.015em;
  color: var(--ink-faint);
  margin: 0 0 var(--s-6);
  max-width: 34rem;
}

main.has-hero { padding-top: 0; }
main.has-hero > .container { padding-top: var(--s-7); }


/* ── 7. The definition ──────────────────────────────────── */

.definition {
  position: relative;
  margin: 0 0 var(--s-5);
  padding: var(--s-6) 2.1rem var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-card);
}

/* Engraved corner brackets. */
.definition::before,
.definition::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid var(--gold-bright);
  opacity: 0.8;
}

.definition::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}

.definition::after {
  bottom: -1px; right: -1px;
  border-left: 0; border-top: 0;
}

.definition p.def-text {
  font-family: var(--serif);
  font-size: clamp(1.27rem, 1.13rem + 0.62vw, 1.5rem);
  line-height: 1.48;
  letter-spacing: -0.003em;
  margin: 0 0 var(--s-5);
  color: var(--ink);
}

.definition .def-meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}


/* ── 8. Questions ───────────────────────────────────────── */

ol.questions {
  list-style: none;
  counter-reset: q;
  margin: var(--s-5) 0;
  padding: 0;
}

ol.questions li {
  counter-increment: q;
  position: relative;
  padding: 1.15rem 0 1.15rem 3.7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.48;
}

ol.questions li:last-child { border-bottom: 1px solid var(--rule); }

/* Large ghost numeral, as set in a printed reference. */
ol.questions li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  top: 0.72rem;
  font-family: var(--serif);
  font-size: 2.55rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.34;
  font-variant-numeric: lining-nums;
}

ol.questions li .why {
  display: block;
  font-family: var(--sans);
  font-size: 0.855rem;
  color: var(--ink-muted);
  line-height: 1.58;
  margin-top: var(--s-2);
  max-width: 34rem;
}


/* ── 9. Criteria & cards ────────────────────────────────── */

.criterion {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) 0 var(--s-1);
  scroll-margin-top: var(--s-6);
}

.criterion:last-of-type {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-5);
}

.criterion h3 {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0 0 var(--s-2);
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 500;
  letter-spacing: -0.003em;
}

.criterion h3 .num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid var(--rule-strong);
  padding: 0.2rem 0.42rem;
  border-radius: 2px;
  background: var(--card);
  position: relative;
  top: -0.12em;
}

.criterion p { margin-bottom: var(--s-3); }

/* Card grid — the criteria summary on the home page.
   Hairline gaps, so the grid reads as ruled paper. The column
   count is fixed rather than auto-fit: eight cells always fill
   the grid, and an empty cell would show as a grey block. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: var(--s-5) 0;
}

@media (min-width: 34rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--card);
  padding: 1.35rem 1.4rem 1.25rem;
  transition: background var(--ease);
}

.card:hover { background: #fffdf5; }

/* Closing cell: the way through to the full text. */
.card-more {
  display: flex;
  align-items: center;
  background: var(--paper-tint);
}

.card-more a {
  font-family: var(--serif);
  font-size: 1.11rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: border-color var(--ease);
}

.card-more:hover { background: var(--paper-deep); }
.card-more:hover a { border-bottom-color: var(--gold-bright); }

.card-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  color: var(--gold);
  margin: 0 0 var(--s-2);
}

.card-title {
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.28;
  margin: 0 0 var(--s-2);
  letter-spacing: -0.003em;
}

.card-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--gold-bright), var(--gold-bright));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--ease), color var(--ease);
}

.card:hover .card-title a,
.card-title a:focus-visible {
  color: var(--gold);
  background-size: 100% 1px;
}

.card p.card-text {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.55;
  margin-bottom: 0;
}

.anchor-link {
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: var(--s-2);
  font-family: var(--mono);
  opacity: 0;
  transition: opacity var(--ease);
}

.criterion:hover .anchor-link,
.term:hover .anchor-link,
.qa:hover .anchor-link,
.anchor-link:focus-visible { opacity: 1; }

.anchor-link:hover { color: var(--gold); }


/* ── 10. Tables ─────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  margin: var(--s-5) 0;
  border: 1px solid var(--rule-strong);
  background: var(--card);
  /* Edge shadows appear only when there is more table to reach. */
  background-image:
    linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--card) 70%),
    linear-gradient(to right, rgba(90, 75, 30, 0.11), rgba(255, 255, 255, 0)),
    linear-gradient(to left,  rgba(90, 75, 30, 0.11), rgba(255, 255, 255, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.82rem 0.95rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

th:last-child, td:last-child { border-right: 0; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

thead th {
  background: var(--paper-tint);
  font-size: 0.695rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
  line-height: 1.35;
}

thead th .note {
  display: block;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-faint);
  margin-top: var(--s-1);
}

/* Row labels stay put while the grid scrolls sideways. */
tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 600;
  color: var(--ink);
  background: #fbf9f2;
  min-width: 11.5rem;
  font-size: 0.815rem;
  border-right: 1px solid var(--rule-strong);
}

tbody tr td { transition: background var(--ease); }
tbody tr:hover td { background: #fdfcf6; }
tbody tr:hover td.ours { background: #fffbe9; }
tbody tr:hover th { background: #f7f4ea; }

/* The column describing our own model: marked, not favoured. */
td.ours { background: #fffdf5; }

thead th.ours {
  background: var(--gold-pale);
  color: var(--gold);
  box-shadow: inset 0 3px 0 var(--gold-bright);
}

/* The cells where our own column loses. Set in the serif italic, so
   the admissions read as an aside in the author's own voice rather
   than as small print. */
.cell-weak {
  display: block;
  margin-top: var(--s-2);
  padding-top: 0.4rem;
  border-top: 1px dotted var(--rule-strong);
  font-family: var(--serif);
  font-size: 0.885rem;
  font-style: italic;
  color: var(--warn);
  line-height: 1.4;
}

caption.note {
  caption-side: bottom;
  padding: 0.82rem 0.95rem;
  text-align: left;
  border-top: 1px solid var(--rule);
  background: var(--paper-tint);
}

/* Lets a table breathe wider than the text column it sits in. */
.bleed {
  width: min(var(--measure-wide), calc(100vw - 3.2rem));
  margin-left: 50%;
  transform: translateX(-50%);
}


/* ── 11. Glossary, FAQ ──────────────────────────────────── */

.term, .qa {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) 0 var(--s-1);
  scroll-margin-top: var(--s-6);
}

.term:last-of-type, .qa:last-of-type {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-5);
}

.term h3, .qa h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.003em;
}

.term p:last-child, .qa p:last-child { margin-bottom: var(--s-3); }


/* ── 12. Disclosure & bridge ────────────────────────────── */

.bridge {
  margin: var(--s-7) 0 var(--s-4);
  padding: var(--s-6) 1.9rem var(--s-5);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold-bright);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.bridge h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 1.33rem;
}

.bridge h2::before { display: none; }
.bridge p:last-child { margin-bottom: 0; }


/* ── 13. Utilities ──────────────────────────────────────── */

ul.plain {
  padding-left: 1.2rem;
  margin: var(--s-4) 0 var(--s-5);
}

ul.plain li {
  margin-bottom: 0.62rem;
  padding-left: 0.2rem;
}

ul.plain li::marker { color: var(--gold-bright); }

.btn-print {
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color var(--ease), color var(--ease), box-shadow var(--ease);
}

.btn-print:hover {
  border-color: var(--gold-bright);
  color: var(--gold);
  box-shadow: var(--shadow-card);
}

.page-nav {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-5);
}

.page-nav a { color: var(--ink-muted); text-decoration: none; }
.page-nav a:hover { color: var(--gold); text-decoration: underline; }

code, .mono { font-family: var(--mono); font-size: 0.85em; }

/* Print-only masthead and colophon. Once the site chrome is stripped
   for print, a sheet has to carry its own provenance: what it is,
   where it came from, and that it may be copied. */
.print-only, .print-head, .print-source { display: none; }

/* Spoken affordance for wide tables. Hidden where there is room. */
.scroll-hint {
  display: none;
  margin: 0 0 calc(-1 * var(--s-2));
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}


/* ── 14. Footer ─────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-tint);
  padding: var(--s-7) 0 var(--s-8);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.62;
}

.site-footer p {
  margin: 0 0 var(--s-3);
  max-width: 42rem;
}

.site-footer .meta-links {
  color: var(--ink-faint);
  font-size: 0.79rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-5);
}


/* ── 15. Responsive ─────────────────────────────────────── */

@media (max-width: 52rem) {
  .header-inner { justify-content: flex-start; }
}

@media (max-width: 40rem) {
  :root { --gutter: 1.15rem; }

  body { font-size: 16px; }
  main { padding-top: var(--s-6); }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }

  /* One tidy row that scrolls, rather than a ragged two-line wrap.
     The soft right edge says "there is more" in the same language
     the wide tables use. */
  .site-header nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    gap: 0 1.25rem;
    font-size: 0.82rem;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15) 100%);
  }

  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { white-space: nowrap; }

  .scroll-hint { display: block; }

  /* A more insistent edge shadow where the screen is narrow. */
  .table-scroll { background-size: 40px 100%, 40px 100%, 22px 100%, 22px 100%; }

  /* Compression on small screens is done by tightening rhythm, never
     by hiding content. Nothing here is display:none — a phone reader
     sees the same grid, the same admissions and the same criteria as
     a desktop reader, just set closer together. */
  .hero { padding: var(--s-5) 0 var(--s-4); }
  .hero .hero-sub { margin-bottom: var(--s-5); }
  .definition { padding: var(--s-4) 1.15rem 0.9rem; }
  .definition p.def-text { margin-bottom: var(--s-4); }

  main.has-hero > .container { padding-top: var(--s-5); }

  .lead { margin-bottom: var(--s-5); }

  ol.questions { margin: var(--s-4) 0; }
  ol.questions li { padding: 0.9rem 0 0.9rem 2.9rem; }
  ol.questions li::before { font-size: 2rem; top: 0.6rem; }

  .cards { margin: var(--s-4) 0; }
  .card { padding: 1rem 1.05rem 0.95rem; }
  .card p.card-text { font-size: 0.84rem; line-height: 1.5; }
  .card-num { margin-bottom: var(--s-1); }

  .bridge {
    margin: var(--s-6) 0 var(--s-4);
    padding: var(--s-5) 1.2rem var(--s-4);
  }

  h2 { margin-top: var(--s-6); padding-top: var(--s-5); }
  h2.no-rule { margin-top: var(--s-5); }

  .table-scroll { margin: var(--s-4) 0; }
  th, td { padding: 0.7rem 0.8rem; }

  .site-footer { padding: var(--s-6) 0 var(--s-7); }

  /* Touch devices have no hover: reveal the affordances. */
  .anchor-link { opacity: 1; }

  /* Sticky row labels cost too much width on a phone. */
  tbody th { position: static; min-width: 9rem; }

  .bleed { width: 100%; margin-left: 0; transform: none; }
}


/* ── 16. Print ──────────────────────────────────────────── */

@page { margin: 16mm; }

@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }

  .site-header, .site-footer, .btn-print, .page-nav, .no-print, .scroll-hint { display: none !important; }
  .print-only, .print-head, .print-source { display: block !important; }

  /* Masthead: seal, what the sheet is, and where it came from. */
  .print-head { margin-bottom: 1.5rem; }
  .print-head .seal-lg { width: 1.9rem; height: 1.9rem; margin: 0 0 0.45rem; }

  .print-head p {
    margin: 0;
    font-size: 8pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #666;
  }

  /* Colophon: provenance and licence, so a handout can be reused. */
  .print-source {
    margin-top: 1.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid #999;
    font-size: 8pt;
    line-height: 1.5;
    color: #444;
  }

  main, main.has-hero > .container { padding: 0; }

  .hero { background: none; border: 0; padding: 0 0 var(--s-4); }
  .hero::before { display: none; }

  .container, .container-wide { max-width: 100%; padding: 0; }

  a { color: #000; text-decoration: none; }

  .definition { border: 1px solid #999; box-shadow: none; }
  .definition::before, .definition::after { border-color: #999; }

  .table-scroll { overflow: visible; background-image: none; border-color: #999; }
  tbody th { position: static; }

  .bleed { width: 100%; margin-left: 0; transform: none; }
  .cards { border-color: #999; background: #999; }
  .bridge { box-shadow: none; }

  ol.questions li, .criterion, .term, .qa, .card { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }

  .seal, .seal-lg { color: #666; }
}