/* The Trust and the Bridge — one stylesheet, no external resources, no scripts.
   Light glass design. Every effect is a progressive enhancement over a plain,
   readable document: the page works with this file disabled, with transparency
   reduced, with motion reduced, and in print. */

@layer reset, tokens, base, layout, components, canonical, pages, print;

/* ---------- Fonts (self-hosted, OFL; see /fonts/README.md) ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/Inter.var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Italic.var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4.var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-Italic.var.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, dl, ol, ul, figure, blockquote, pre, table { margin-block: 0; }
  button { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --ink: oklch(23% 0.03 262);
    --ink-2: oklch(38% 0.03 262);
    --ink-3: oklch(50% 0.025 262);
    --accent: oklch(48% 0.17 262);
    --accent-2: oklch(56% 0.19 300);
    --accent-3: oklch(70% 0.13 195);
    --canvas: oklch(98.5% 0.005 250);
    --line: oklch(88% 0.012 260);

    --glass: oklch(100% 0 0 / .66);
    --glass-strong: oklch(100% 0 0 / .84);
    --glass-edge: oklch(100% 0 0 / .85);
    --glass-blur: 18px;
    --shadow-1: 0 1px 2px oklch(25% 0.03 262 / .05), 0 10px 32px -14px oklch(30% 0.06 262 / .22);
    --shadow-2: 0 2px 6px oklch(25% 0.03 262 / .06), 0 24px 60px -24px oklch(30% 0.08 262 / .28);

    --r-lg: 22px; --r-md: 14px; --r-sm: 9px;
    --measure: 68ch;
    --gutter: clamp(1rem, 3vw, 2rem);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  @media (prefers-reduced-transparency: reduce) {
    :root { --glass: oklch(100% 0 0 / .97); --glass-strong: oklch(100% 0 0 / .99); --glass-blur: 0px; }
    .site-header, .menu { background: oklch(100% 0 0 / .97) !important; }
  }
  @supports not (backdrop-filter: blur(1px)) {
    .site-header, .menu { background: oklch(100% 0 0 / .92); }
  }
  @media (prefers-contrast: more) {
    :root { --ink-2: var(--ink); --ink-3: oklch(35% 0.03 262); --line: oklch(70% 0.02 260); --glass: oklch(100% 0 0 / .96); --glass-strong: #fff; }
  }
}

@layer base {
  /* Branded scrollbars: thin, rounded, accent-tinted, on a transparent track. */
  html { scrollbar-width: thin; scrollbar-color: oklch(70% 0.08 270 / .7) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, oklch(72% 0.1 262 / .75), oklch(72% 0.1 300 / .75)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, oklch(60% 0.14 262), oklch(60% 0.14 300)); border: 2px solid transparent; background-clip: padding-box; }
  html { font-family: var(--font-sans); font-size: 106.25%; line-height: 1.6; color: var(--ink); background: var(--canvas); font-optical-sizing: auto; scroll-behavior: smooth; scroll-padding-top: 5.5rem; hanging-punctuation: first last; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-height: 100dvh; display: flex; flex-direction: column; position: relative; isolation: isolate; }
  /* Ambient background: soft color fields behind the glass. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60rem 36rem at 8% -10%, oklch(93% 0.06 262 / .9), transparent 60%),
      radial-gradient(48rem 30rem at 100% 0%, oklch(93% 0.06 300 / .85), transparent 60%),
      radial-gradient(52rem 34rem at 50% 110%, oklch(94% 0.06 195 / .8), transparent 60%),
      var(--canvas);
  }
  a { color: var(--accent); text-decoration-thickness: from-font; text-underline-offset: .18em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.012em; line-height: 1.15; color: var(--ink); text-wrap: balance; }
  h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
  h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); margin-top: 2.2rem; }
  h3 { font-size: 1.2rem; margin-top: 1.6rem; }
  p, li, dd { text-wrap: pretty; }
  p + p, ul + p, ol + p, p + ul, p + ol, p + table, h2 + p, h3 + p, h2 + ul, h2 + ol, h2 + table, h2 + dl, p + dl { margin-top: .9rem; }
  ul, ol { padding-inline-start: 1.3rem; }
  .prose li + li, .canonical li + li, .page li + li { margin-top: .3rem; }
  .nav li, .menu li, .toc li, .site-footer li { margin-top: 0; }
  code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }
  code { background: oklch(96% 0.01 260 / .8); padding: .1em .4em; border-radius: 6px; }
  pre { background: oklch(97% 0.01 260 / .9); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 1rem; }
  pre code { background: none; padding: 0; }
  code.hash { font-size: .78rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
  blockquote { margin: .5rem 0; padding: .6rem 1rem; border-inline-start: 3px solid var(--accent-3); background: oklch(98% 0.01 195 / .7); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--font-serif); font-size: 1.02em; }
  table { border-collapse: collapse; width: 100%; margin-block: 1rem; font-size: .95rem; }
  th, td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
  th { font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
  caption { caption-side: top; text-align: left; font-weight: 600; padding: 0 0 .5rem; color: var(--ink-2); }
  dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
  dt { font-weight: 600; color: var(--ink-2); } dd { margin: 0; }
  small { color: var(--ink-3); }
  q { font-style: italic; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; }
  main { flex: 1; padding-block: 1.5rem 3rem; }
  .skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-2); transition: top .2s var(--ease); }
  .skip:focus { top: .75rem; }

  /* Header: sticky glass bar. */
  /* Transparent bar: the blur frosts whatever scrolls beneath; a faint canvas-tinted veil (never white, never solid) keeps labels legible over dense text. */
  .site-header { position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, oklch(98.5% 0.005 250 / .55), oklch(98.5% 0.005 250 / .3)); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); view-transition-name: site-header; }
  .site-header .wrap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand more" "nav nav"; align-items: center; column-gap: 1rem; min-height: 4rem; padding-block: .5rem; }
  .brand { grid-area: brand; } .more-btn { grid-area: more; } .nav { grid-area: nav; margin-top: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .nav::-webkit-scrollbar { display: none; }
  @media (min-width: 900px) {
    .site-header .wrap { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav more"; }
    .nav { margin: 0; overflow: visible; padding: 0; mask-image: none; justify-self: end; }
  }
  .brand { display: inline-flex; align-items: center; gap: .55rem; line-height: 1; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; margin-inline-end: auto; }
  .brand svg { width: 30px; height: 30px; flex: none; transform: translateY(1px); }
  .brand .amp { color: var(--ink-3); font-weight: 400; }
  .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: .15rem; width: max-content; }
  .nav a, .more-btn { display: inline-flex; align-items: center; white-space: nowrap; min-height: 2.4rem; padding: .35rem .8rem; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .18s var(--ease), color .18s var(--ease); }
  .nav a:hover, .more-btn:hover { background: oklch(100% 0 0 / .7); color: var(--ink); }
  .nav a[aria-current] { background: oklch(100% 0 0 / .9); color: var(--accent); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .9), 0 1px 2px oklch(30% 0.04 262 / .08); }
  .more-btn { border: 1px solid oklch(100% 0 0 / .8); background: oklch(100% 0 0 / .5); cursor: pointer; gap: .4rem; anchor-name: --more; }
  .more-btn svg { width: 14px; height: 14px; }
  .menu { position: fixed; inset: auto var(--gutter) auto auto; top: 4.6rem; margin: 0; padding: .5rem .45rem; min-width: 15.5rem; border: 1px solid oklch(100% 0 0 / .6); border-radius: var(--r-md); background: linear-gradient(to bottom, oklch(98.5% 0.005 250 / .6), oklch(98.5% 0.005 250 / .4)); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); box-shadow: var(--shadow-2); color: var(--ink); }
  @supports (position-area: bottom span-left) {
    .menu { position-anchor: --more; position-area: bottom span-left; inset: auto; top: auto; margin-top: .5rem; }
  }
  .menu ul { list-style: none; margin: 0 0 .35rem; padding: 0; display: grid; gap: 0; }
  .menu ul + .menu-heading { border-top: 1px solid oklch(100% 0 0 / .6); padding-top: .55rem; margin-top: .1rem; }
  .menu a { display: block; padding: .28rem .7rem; min-height: 24px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 400; font-size: .92rem; line-height: 1.35; }
  .menu a:hover { background: oklch(100% 0 0 / .55); color: var(--ink); }
  .menu a[aria-current] { color: var(--accent); }
  .menu-heading { font: 700 .66rem/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: .3rem .7rem .25rem; margin: 0; }
  .menu::backdrop { background: transparent; }

  .site-footer { margin-top: auto; padding-block: 2rem 2rem; color: oklch(46% 0.02 262); font-size: .72rem; line-height: 1.55; border-top: 1px solid oklch(100% 0 0 / .5); background: oklch(100% 0 0 / .3); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
  .site-footer .cols { display: grid; gap: 1.2rem 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .site-footer h2 { font: 700 .62rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .45rem; padding-bottom: .3rem; border-bottom: 1px solid oklch(100% 0 0 / .7); }
  .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .site-footer a { color: oklch(42% 0.03 262); text-decoration: none; display: inline-block; padding: .1rem 0; min-height: 24px; line-height: 24px; font-weight: 400; }
  .site-footer a:hover { color: var(--accent); text-decoration: underline; }
  .site-footer .fine { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid oklch(100% 0 0 / .6); display: grid; gap: .3rem; font-size: .66rem; color: oklch(46% 0.02 262); }
  .site-footer .fine p { margin: 0; max-width: none; }
  .site-footer .fine a { display: inline; padding: 0; min-height: 0; line-height: inherit; color: inherit; text-decoration: underline; text-decoration-color: oklch(70% 0.02 262 / .6); }
}

@layer components {
  .glass { background: var(--glass); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-1), inset 0 1px 0 oklch(100% 0 0 / .9); border-radius: var(--r-lg); }
  /* Long documents: no backdrop blur. Chromium stops painting an element with backdrop-filter once it is several thousand pixels tall, which blanked the canonical texts. A slightly denser fill keeps the glass look. */
  .canonical.glass, .page.glass, .participant.glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: oklch(100% 0 0 / .8); }
  .card { padding: clamp(1.1rem, 2.5vw, 1.7rem); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
  a.card { color: inherit; text-decoration: none; display: block; }
  a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), inset 0 1px 0 oklch(100% 0 0 / .95); }
  .card h2, .card h3 { margin-top: 0; }
  .card .eyebrow + h2, .card .eyebrow + h3 { margin-top: .35rem; }
  .eyebrow { font: 600 .74rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  .grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1.15rem; border-radius: 999px; font-weight: 600; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px -10px oklch(48% 0.17 262 / .7), inset 0 1px 0 oklch(100% 0 0 / .35); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px oklch(48% 0.17 262 / .8), inset 0 1px 0 oklch(100% 0 0 / .4); }
  .btn.secondary { color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-1); }
  .btn svg { width: 16px; height: 16px; }
  .notice { padding: .9rem 1.1rem; border-radius: var(--r-md); background: linear-gradient(90deg, oklch(96% 0.05 90 / .9), oklch(98% 0.02 90 / .9)); border: 1px solid oklch(88% 0.08 90 / .9); color: oklch(30% 0.06 80); margin-block: 1rem; }
  .notice.info { background: linear-gradient(90deg, oklch(96% 0.04 262 / .9), oklch(98.5% 0.01 262 / .9)); border-color: oklch(88% 0.06 262 / .9); color: var(--ink-2); }
  .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: oklch(96% 0.03 262); color: var(--accent); border: 1px solid oklch(90% 0.04 262); }
  .chip.ok { background: oklch(96% 0.05 160); color: oklch(38% 0.12 160); border-color: oklch(88% 0.08 160); }
  .chip.muted { background: oklch(96% 0.005 260); color: var(--ink-3); border-color: var(--line); }
  .meta { color: var(--ink-3); font-size: .92rem; }
  .table-card { padding: .4rem 1rem; overflow-x: auto; }
  .table-card table { margin-block: .4rem; }
  .table-card tr:last-child td { border-bottom: 0; }
  .integrity dl { grid-template-columns: 7.5rem 1fr; }
  .integrity .verify { margin-top: .9rem; font-size: .9rem; color: var(--ink-2); }
  .quotes dt { margin-top: 1rem; }
  .quotes { grid-template-columns: 1fr; }
  .participant { padding: clamp(1rem, 2vw, 1.5rem); margin-top: 1.2rem; }
  .participant h2 { margin-top: 0; }
  .toc-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
  .pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: oklch(100% 0 0 / .7); border: 1px solid var(--glass-edge); text-decoration: none; color: var(--ink-2); font-size: .88rem; font-weight: 500; min-height: 24px; }
  .pill:hover { color: var(--accent); background: #fff; }
}

@layer canonical {
  .canonical-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; container-type: inline-size; max-width: 72rem; }
  .canonical-wrap > * { min-width: 0; }
  .toc { overflow-wrap: anywhere; }
  @media (min-width: 960px) {
    .canonical-wrap { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
    .toc { position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: oklch(75% 0.06 270 / .6) transparent; }
  }
  .toc { padding: 1rem 1.1rem; font-size: .9rem; }
  .toc h2 { font: 600 .74rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .5rem; }
  .toc-list { list-style: none; padding: 0; margin: 0; }
  .toc-list > li + li { margin-top: .15rem; }
  .toc-list a { display: block; padding: .3rem .55rem; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; min-height: 24px; line-height: 1.35; }
  .toc-list a:hover { background: oklch(100% 0 0 / .8); color: var(--ink); }
  .toc-l1 > a { font-weight: 600; }
  .toc details { margin: 0 0 .2rem; }
  .toc summary { cursor: pointer; color: var(--ink-3); font-size: .8rem; padding: .2rem .55rem; min-height: 24px; list-style: none; display: flex; align-items: center; gap: .35rem; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary::before { content: ""; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); margin-inline-start: .1rem; }
  .toc details[open] > summary::before { transform: rotate(45deg); }
  .toc-sub { list-style: none; padding-inline-start: .6rem; margin: 0; border-inline-start: 1px solid var(--line); }
  .toc-sub a { font-size: .86rem; color: var(--ink-3); }

  .canonical { padding: clamp(1.2rem, 3vw, 2.6rem); font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.62; }
  .canonical .doc-header { font-family: var(--font-sans); margin-bottom: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
  .canonical .doc-header .eyebrow { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
  .canonical .rev { font-family: var(--font-sans); font-weight: 500; color: var(--ink-3); font-size: .55em; vertical-align: .35em; letter-spacing: 0; }
  .canonical h1:not(#doc-title) { font-size: 2rem; margin-top: 1.2rem; }
  .canonical h2 { font-size: 1.55rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
  .canonical h3 { font-size: 1.2rem; }
  .canonical p, .canonical li, .canonical .doc-header { max-width: 72ch; }
  .canonical ol > li, .canonical ul > li { margin-top: .55rem; }
  .canonical ol { padding-inline-start: 1.6rem; }
  .canonical table { font-family: var(--font-sans); font-size: .9rem; }
  .canonical .para { display: block; margin-top: .45rem; padding-inline-start: 1.1rem; text-indent: -1.1rem; }
  .canonical .para + br { display: none; }
  .canonical :target:not(.para), .para:target { background: oklch(97% 0.05 90 / .9); box-shadow: 0 0 0 6px oklch(97% 0.05 90 / .9), 0 0 0 7px oklch(85% 0.1 90 / .8); border-radius: 6px; }
  .pilcrow { font-family: var(--font-sans); display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; text-decoration: none; color: var(--ink-3); opacity: 0; margin-inline-start: .15em; transition: opacity .15s; }
  :hover > .pilcrow, .pilcrow:focus, :target > .pilcrow, li:hover .pilcrow, .para:hover .pilcrow { opacity: 1; }
  @media (hover: none) { .pilcrow { opacity: .45; } }
  .doc-footer { margin-top: 2.5rem; font-family: var(--font-sans); font-size: .95rem; }
  .integrity { padding: 1.1rem 1.3rem; }
  .integrity h2 { font: 600 .74rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; border: 0; padding: 0; }
  .quoted-canonical { padding: 1.2rem 1.4rem; margin-block: 1rem; }
  .record-text { white-space: pre-wrap; }
  .canonical .attribution { font-family: var(--font-sans); font-size: .92rem; }
}

@layer pages {
  .page { padding: clamp(1.2rem, 3vw, 2.4rem); }
  .page > h1:first-child, .page .lede { margin-bottom: .6rem; }
  .page .prose > :is(p, ul, ol, dl, blockquote, h2, h3, h4, .notice), .page > :is(p, .notice) { max-width: var(--measure); }
  .table-wrap { overflow-x: auto; max-width: 100%; margin-block: 1rem; }
  .table-wrap > table { margin-block: 0; }
  .lede { font-size: 1.18rem; color: var(--ink-2); text-wrap: pretty; max-width: 62ch; }
  /* Home background: one image behind the hero, semi-transparent so the canvas and glass read through it, fading out before the prose. The globe sits in the upper half and is kept in frame at every width. */
  .hero-art { position: absolute; inset: 0 0 auto 0; height: clamp(34rem, 78vh, 52rem); z-index: -1; pointer-events: none; opacity: .85; background: url(/img/home-hero-960.webp) center 18% / cover no-repeat; mask-image: linear-gradient(to bottom, #000 45%, transparent 96%); -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 96%); }
  @media (min-width: 720px) { .hero-art { background-image: url(/img/home-hero.jpg); background-image: image-set(url(/img/home-hero.webp) type("image/webp"), url(/img/home-hero.jpg) type("image/jpeg")); } }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .hero-art { display: none; } }
  .hero { position: relative; padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); }
  .hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); max-width: 18ch; letter-spacing: -.02em; }
  .hero .lede { margin-top: 1rem; font-size: 1.22rem; }
  .hero .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
  .hero-grid { margin-top: 1.5rem; }
  .status { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
  .kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem; font-size: .9rem; }
  .kv dt { color: var(--ink-3); font-weight: 500; }
  .section { margin-top: 2rem; }
  .verify-line { margin-top: 1rem; font-size: .88rem; }
  .section > h2:first-child { margin-top: 0; }
  .revisions td:first-child { white-space: nowrap; }

  /* Entry animation for cards (once, on load). */
  @media (prefers-reduced-motion: no-preference) {
    .card { animation: rise .5s var(--ease) both; }
    .grid > :nth-child(2) { animation-delay: .06s; } .grid > :nth-child(3) { animation-delay: .12s; }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
    /* Header deepens its shadow once the page has scrolled (scroll-driven, no script). */
    @supports (animation-timeline: scroll()) {
      .site-header { animation: header-shadow linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
      @keyframes header-shadow { to { box-shadow: 0 10px 30px -14px oklch(30% 0.06 262 / .22); } }
    }
  }
}

@layer print {
  @media print {
    body::before, .hero-art, .site-header, .skip, .pilcrow, .site-footer, .hero .actions, .more-btn, .menu { display: none !important; }
    html { font-size: 11pt; background: #fff; }
    .glass, .card, .canonical, .toc, .page { background: #fff !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; padding: 0 !important; }
    .canonical-wrap { display: block; }
    .toc { position: static; max-height: none; page-break-after: always; }
    .toc details { display: block; } .toc summary { display: none; } .toc details:not([open]) > * { display: block; }
    a { color: inherit; text-decoration: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
    .canonical :target, .para:target { background: none; box-shadow: none; }
    h1 { page-break-after: avoid; } pre, table { page-break-inside: avoid; }
  }
}