/* Standalone styling for the Glenn site's own pages: the front page listing
   the apps, and the terms and privacy (one set for every app, so neutral ink
   rather than one app's accent). Plain static documents, served beside the
   Flutter apps, so they carry their own styles —
   but they follow the app's design system (core/design/tokens.dart): warm
   paper, Bricolage Grotesque titles, Atkinson Hyperlegible Next text at 19px,
   nothing smaller than 16px. The fonts are the app's own bundled files. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f6f2eb;
  --surface: #ffffff;
  --line: #e3dcd0;
  --ink: #1e1a16;
  --ink-2: #4f4841;
  --accent: #1e1a16;
  --accent-ink: #1e1a16;
  --focus: #1e1a16;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120f;
    --surface: #1e1b17;
    --line: #34302a;
    --ink: #f5f0e8;
    --ink-2: #cfc7bb;
    --accent: #f5f0e8;
    --accent-ink: #f5f0e8;
    --focus: #f5f0e8;
  }
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 19px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* The wordmark: "Glenn" in Bricolage Grotesque Bold, as in the apps. */
.wordmark {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.5px;
  text-decoration: none;
  color: var(--ink);
}

/* "Back to the app": a worded control with a 56px tap target. */
header a.back {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 12px;
  margin-right: -12px;
  border-radius: 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
header a.back::before { content: "← "; white-space: pre; }
header a.back:hover { background: rgba(127, 110, 90, 0.12); }

h1 {
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: 0 0 8px;
}

.updated {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 24px;
  margin: 0 0 32px;
}

h2 {
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 48px 0 12px;
}

h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 28px 0 4px;
}

p, li { color: var(--ink); }
p { margin: 0 0 16px; }
ul { padding-left: 24px; margin: 0 0 16px; }
li { margin-bottom: 8px; }
strong { font-weight: 700; }

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

.lede { font-size: 21px; line-height: 30px; }

/* Who is responsible: one white block, like a list in the app. */
.fill {
  background: var(--surface);
  border-radius: 22px;
  padding: 20px 24px;
  margin: 0 0 16px;
}

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 24px;
}
footer a { color: var(--ink); }

.scroll { overflow-x: auto; background: var(--surface); border-radius: 22px; padding: 4px 24px; margin: 0 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: 17px; line-height: 24px; }
th, td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
th { font-weight: 700; color: var(--ink-2); }

/* The page in another language: a quiet line under the date. */
.langs {
  margin: 0 0 32px;
  color: var(--ink-2);
  font-size: 17px;
}
.langs a { color: var(--accent-ink); }