/* Shared styles for the policy and contact pages. Same tokens as the
   holding page, set for long-form reading. */
:root {
  --bg: #F3F1EC; --fg: #121212; --muted: #5C5A55; --accent: #2F3BFF; --accent-hover: #2430E0;
  --f-display: "Instrument Serif", Georgia, serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-label: "Fragment Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --hair: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.65 var(--f-body); min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
p, li { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.label { font: 400 12px/1.4 var(--f-label); text-transform: uppercase; letter-spacing: .05em; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }

header { padding-top: 20px; }
.title { display: block; font: 400 clamp(36px, 6vw, 64px)/.95 var(--f-display); text-align: center; padding: 6px 0 10px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.title i { color: var(--accent); }
.title:hover { color: var(--fg); }
.strap { border-top: 3px double var(--fg); border-bottom: 1px solid var(--fg); padding: 9px 0; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }

main.wrap { flex: 1; padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 68ch); gap: clamp(28px, 5vw, 72px); }
nav.toc ul { list-style: none; padding: 0; display: grid; gap: 10px; position: sticky; top: 24px; }
nav.toc a { color: var(--muted); text-decoration: none; }
nav.toc a:hover, nav.toc a[aria-current="page"] { color: var(--fg); }
nav.toc a[aria-current="page"]::before { content: "→ "; color: var(--accent); }

article h1 { font: 400 clamp(36px, 5vw, 56px)/1.02 var(--f-display); }
article .updated { color: var(--muted); margin-top: 10px; }
article .lede { font-size: 18px; margin-top: 20px; }
article h2 { font: 400 28px/1.15 var(--f-display); margin-top: 40px; padding-top: 16px; border-top: var(--hair); }
article h3 { font: 600 16px/1.4 var(--f-body); margin-top: 22px; }
article p, article ul, article ol, article dl { margin-top: 12px; }
article ul, article ol { padding-left: 22px; }
article li + li { margin-top: 6px; }
article .card { margin-top: 20px; border: 1px solid var(--fg); background: #fff; padding: 20px 22px; }
article .card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; }
article .card dt { color: var(--muted); }
article .card dd { margin: 0; }

footer.wrap { border-top: var(--hair); padding-top: 18px; padding-bottom: 24px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { color: var(--muted); }

@media (max-width: 820px) {
  main.wrap { grid-template-columns: 1fr; }
  nav.toc ul { position: static; display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .strap span:last-child { display: none; }
  article .card dl { grid-template-columns: 1fr; gap: 2px; }
  article .card dd + dt { margin-top: 10px; }
}