/* ===================================================================
   Shared by privacy.html and terms.html.

   index.html keeps its own styles inline — it is the one page with a
   grid of pictures and a display scale, and it is verified as a single
   file. These two are prose, and they share a sheet rather than
   duplicating a token block twice, because two copies of the same
   palette is exactly how a light and a dark theme drift apart.

   The same planes as the home page: a bar across the top at the
   highest contrast on the page, neutral ground for the words, and a
   quiet foot at 0.8× the standard size. Everything on a grid of 8,
   type included — 16 on 24, 20 on 32, 24 on 32, 32 on 40.
   =================================================================== */
:root {
  color-scheme: light dark;
  --paper:  #ffffff;
  --ink:    #111111;   /* 18.88:1 */
  --grey:   #4a4a4a;   /*  8.86:1 */
  --rule:   #d8d4cc;
  --accent: #002bd4;   /*  9.15:1 */
  --sans: ui-sans-serif, system-ui, 'Segoe UI', Verdana, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, Menlo, 'SF Mono', Consolas, 'DejaVu Sans Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #121212;
    --ink:    #ededed;  /* 16.00:1 */
    --grey:   #b8b8b8;  /*  9.40:1 */
    --rule:   #3a3834;
    --accent: #9bb8ff;  /*  9.54:1 */
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/24px var(--sans); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip {
  position: absolute; left: 16px; top: -200px; z-index: 2;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); text-decoration: none;
}
.skip:focus { top: 8px; }
.shell { max-width: 720px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* The bar: the masthead's wrapper is the one div.shell; the prose is main.shell. */
body > div.shell { max-width: none; background: var(--ink); color: var(--paper); }
.masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; max-width: 672px; margin: 0 auto; min-height: 48px; }
.wordmark { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; letter-spacing: .02em; color: inherit; text-decoration: none; }
.wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }
.updated { margin-left: auto; font: 12px/24px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

main { padding: 64px 0 48px; }
h1 { margin: 0 0 24px; font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -.02em; }
h2 { margin: 48px 0 16px; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 20px; line-height: 32px; font-weight: 800; }
p, li { margin: 0 0 16px; color: var(--grey); }
p strong, li strong { color: var(--ink); }
ul { margin: 0 0 16px; padding-left: 24px; }
li { margin-bottom: 8px; }
.lede { font-size: 20px; line-height: 32px; }
a { color: var(--ink); text-underline-offset: 4px; }
a:hover { color: var(--accent); }
.note { margin: 24px 0; padding: 16px; border: 2px solid var(--ink); font-size: 14px; }
footer { padding: 24px 0 48px; font-size: 13px; color: var(--grey); border-top: 1px solid var(--rule); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
footer a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; }
footer a:hover { color: var(--ink); }