/* Readster public pages (/privacy) — "Paper & Ink", tuned for long reading on phones.
   The tokens mirror admin.css; this sheet stands alone so public pages load nothing from the panel. */

@font-face { font-family: "Inter"; src: url("fonts/Inter.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #FAF8F4;
  --container: #F3F0EA;
  --ink: #1C1A17;
  --ink-2: #5E5850;
  --hairline: #DDD7CD;
  --ember: #8F3F24;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-md: 12px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #141311;
    --container: #221F1C;
    --ink: #ECE6DD;
    --ink-2: #B8B0A5;
    --hairline: #3A3632;
    --ember: #F0B49B;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.65 var(--font-ui); font-feature-settings: "cv11", "ss01";
}

.skip-link { position: absolute; left: var(--s4); top: -100px; padding: var(--s3) var(--s4); background: var(--ink); color: var(--paper); border-radius: 8px; z-index: 10; }
.skip-link:focus { top: var(--s4); }

a { color: var(--ember); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

.page { max-width: calc(var(--measure) + 2 * var(--s4)); margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); }
@media (min-width: 768px) { .page { padding-top: var(--s7); } }

.masthead { border-bottom: 1px solid var(--hairline); padding-bottom: var(--s5); margin-bottom: var(--s5); }
.wordmark { font: 600 15px/1 var(--font-display); letter-spacing: 0.18em; color: var(--ink); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
h1 { font-size: clamp(30px, 7vw, 40px); margin: var(--s5) 0 var(--s2); }
h2 { font-size: 24px; margin: var(--s7) 0 var(--s3); scroll-margin-top: var(--s4); }
h3 { font-size: 19px; margin: var(--s5) 0 var(--s2); }
.meta { color: var(--ink-2); font-size: 15px; margin: 0; }

p, ul { margin: 0 0 var(--s4); }
ul { padding-left: 1.25em; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--ink-2); }
strong { font-weight: 600; }

.summary { background: var(--container); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: var(--s5) 0; }
.summary h2 { margin-top: 0; font-size: 20px; }
.summary ul { margin-bottom: 0; }

.toc { margin: var(--s5) 0; }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2 16ch; column-gap: var(--s6); }
.toc li { margin-bottom: var(--s2); break-inside: avoid; }
.toc a { display: inline-block; min-height: 32px; padding: 2px 0; }

footer { border-top: 1px solid var(--hairline); margin-top: var(--s7); padding-top: var(--s5); color: var(--ink-2); font-size: 15px; }

/* Account pages (/account/verify, /account/reset-password, /account/delete): one short form. */
.page-narrow { max-width: calc(44ch + 2 * var(--s4)); }
.form { display: flex; flex-direction: column; }
.form label { font-weight: 600; font-size: 15px; margin-bottom: var(--s2); }
.form input {
  font: inherit; color: var(--ink); background: var(--paper); min-height: 48px; padding: var(--s2) var(--s3);
  border: 1px solid var(--ink-2); border-radius: 8px; margin-bottom: var(--s4);
}
.form input:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.form .hint { color: var(--ink-2); font-size: 15px; margin: calc(-1 * var(--s3)) 0 var(--s4); }
.form-error { color: var(--ember); font-weight: 600; }
.form button {
  font: 600 16px/1 var(--font-ui); min-height: 48px; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--ink); color: var(--paper); margin-top: var(--s2);
}
.form button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
/* Destructive: ember with paper text, which keeps 4.5:1 in both themes. */
.form button.danger { background: var(--ember); color: var(--paper); }
.aside { color: var(--ink-2); font-size: 15px; margin-top: var(--s5); }