/* Shared by the legal and support pages.
   index.html deliberately does not use this: it embeds its own fonts and image
   so it stays a single portable file that renders anywhere, including in a
   preview pane with no network. These pages are read rarely and always from the
   site itself, so a shared, cacheable stylesheet is the better trade there. */

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/newsreader-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/intertight.woff2) format('woff2');
}

:root {
  --paper: #FAF9F7;
  --ink: #0A0A0A;
  --secondary: #57534E;
  --muted: #8A857C;
  --hairline: #DEDAD2;
  --accent: #9A3F3F;
  --ink-hover: #33302C;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1613;
    --ink: #F3F0EA;
    --secondary: #B4AEA4;
    --muted: #8C857A;
    --hairline: #37312B;
    --accent: #C96C6C;
    --ink-hover: #DCD7CE;
  }
}

/* An explicit choice, when someone makes one. Attribute selectors outrank the
   plain :root above and are unaffected by the media query, so these win in both
   directions: forcing light on a dark system, or dark on a light one.
   Without JavaScript nothing sets the attribute and the system preference
   simply stands, which is the correct fallback rather than a broken page. */
:root[data-theme="light"] {
  --paper: #FAF9F7;
  --ink: #0A0A0A;
  --secondary: #57534E;
  --muted: #8A857C;
  --hairline: #DEDAD2;
  --accent: #9A3F3F;
  --ink-hover: #33302C;
}
:root[data-theme="dark"] {
  --paper: #1A1613;
  --ink: #F3F0EA;
  --secondary: #B4AEA4;
  --muted: #8C857A;
  --hairline: #37312B;
  --accent: #C96C6C;
  --ink-hover: #DCD7CE;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A 680px measure keeps a legal paragraph readable. Wider and the eye
   loses the line returning to the left margin. */
.wrap { max-width: 680px; margin: 0 auto; padding: 0 28px; }
/* The landing page runs two columns and needs more room than a column of
   prose does; the legal pages keep the narrower measure. */
body.home .wrap { max-width: 1060px; }

header {
  padding: 44px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

/* Language switcher. The current language is not a link, so there is never a
   control that does nothing. */
/* Flex so the separator rule below controls the spacing rather than whatever
   whitespace happens to sit between the elements in the markup. */
.langs-nav { display: flex; align-items: baseline; font-size: 14px; color: var(--muted); }

/* A separator before every item except the first, so this works unchanged for
   two languages or six. Nothing to edit here when a language is added. */
.langs-nav > * + *::before {
  content: "";
  /* A drawn bar, not a "|" glyph: consistent weight whatever the font does,
     and it scales with the text size.
     inline-block matters for more than layout. The separator belongs to the
     link that follows it, so as inline content it picked up that link's hover
     underline. text-decoration does not cross into an inline-block. */
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 10px;
  background: var(--hairline);
  vertical-align: -0.06em;
}
.langs-nav a { color: var(--muted); text-decoration: none; }
.langs-nav a:hover { color: var(--ink); text-decoration: underline; }
.langs-nav .here { color: var(--ink); }

/* The theme control lives in the footer, with the other site-wide links. It is
   a preference, not navigation, so it does not compete with the wordmark and
   the language switcher for the top of the page.
   Styled as a link because it behaves like one; it stays a <button> because it
   performs an action rather than going somewhere. */
.theme-toggle {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.theme-toggle:hover { color: var(--ink); }
/* Revealed by script, so a control that cannot work is never shown. */
.theme-toggle[hidden] { display: none; }
.wordmark {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

p { margin: 0 0 16px; color: var(--secondary); }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 64px 0 0; }

footer { padding: 34px 0 72px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
.links { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 20px; }