/* Obligation pages (Block 14), in the brand of 17 October 2026: Paper,
   Ink, one green line per page, Source Serif 4 and IBM Plex Sans, type
   only. Light only: the brand has no dark page. Logical properties only. */
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #1B2A3A;
  --paper: #F8F6F1;
  --sand: #ECE8DF;
  --green: #2F6B57;
  --body: #2E3A48;
  --muted: #6A7179;
  --rule: #D9D4C7;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--body); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.55; }

.page { max-inline-size: 42rem; margin-inline: auto; padding-inline: 1.25rem; }
.top { border-block-end: 1px solid var(--rule); }
.top .page { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.brand { font-family: var(--sans); font-weight: 500; font-size: 0.9375rem; color: var(--ink); text-decoration: none; }
.brand span { color: var(--muted); font-weight: 400; margin-inline-start: 0.5rem; }
.crumbs { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

main.page { padding-block: 3rem 4rem; }
h1 { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: clamp(1.875rem, 4.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; margin-block: 0 1rem; }
h2 { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.375rem; line-height: 1.25; margin-block: 2.5rem 0.75rem; }
p { margin-block: 0 1rem; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

.statement { color: var(--body); }
.fine { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

/* Facts as a table: label, value. */
dl.facts { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; margin: 0; border-block-start: 1px solid var(--rule); }
dl.facts div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-block: 0.75rem; border-block-end: 1px solid var(--rule); }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; color: var(--body); }
@media (max-width: 34rem) { dl.facts div { grid-template-columns: 1fr; gap: 0.125rem; } }

/* Stacked lines separated by a thin rule, never boxes in a row. */
ul.lines { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--rule); }
ul.lines li { padding-block: 0.75rem; border-block-end: 1px solid var(--rule); }
ul.lines.index li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
ul.lines.index .when { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); }

figure.shot { margin: 1.5rem 0 0; }
figure.shot img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--rule); border-radius: 6px; }
figure.shot figcaption { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-block-start: 0.5rem; }

/* The one green line on the page. */
.close { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); }
.close a { color: var(--green); font-weight: 600; }

footer { border-block-start: 1px solid var(--rule); }
footer .page { padding-block: 1.5rem 2.5rem; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
footer a { color: var(--muted); }