/* Stagira's website, in the app's own clothes: ink on paper, Inter for the
   interface, EB Garamond for the name, the counts and Aristotle. */

@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #f4f4f1;
  --card: #ffffff;
  --ink: #141414;
  --muted: #6b6b68;
  --rule: #e6e6e2;
  --mark: #bdbdb8;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f0f0f;
    --card: #191919;
    --ink: #f2f2f0;
    --muted: #9a9a97;
    --rule: #262626;
    --mark: #4a4a48;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-feature-settings: "cv11", "ss01";
}
a { color: inherit; text-decoration-color: var(--mark); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
main, .bar, .foot { width: min(640px, 100% - 40px); margin-inline: auto; }

/* Top bar */
.bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px/1 var(--serif); }
.mark img { border-radius: 8px; box-shadow: 0 0 0 1px var(--rule); }
.bar nav { display: flex; gap: 20px; font-size: 14px; color: var(--muted); }
.bar nav a { text-decoration: none; }
.bar nav a:hover { color: var(--ink); }

/* Home: the wordmark */
.hero { padding: 56px 0 32px; }
.wordmark { margin: 0; font: 400 clamp(56px, 14vw, 88px)/1 var(--serif); letter-spacing: -0.01em; }
.subtitle { margin: 10px 0 0; font: 500 12px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.lede { margin: 28px 0 0; font-size: 20px; line-height: 1.5; max-width: 30em; }
.status { margin: 24px 0 0; font-size: 14px; color: var(--muted); }

/* A ledger, as on the app's Goals tab */
.label { margin: 48px 0 8px; font: 500 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end; padding: 16px 4px; border-bottom: 1px solid var(--rule); }
.ledger .name { font-weight: 600; }
.ledger .note { grid-column: 1; font-size: 13px; color: var(--muted); }
.ledger .count { grid-row: 1 / span 2; grid-column: 2; text-align: right; font: 400 40px/1 var(--serif); font-feature-settings: "tnum"; }
.ledger .count small { display: block; margin-top: 4px; font: 500 11px/1 var(--sans); color: var(--muted); }
.ledger .line { grid-column: 1 / -1; height: 2px; background: var(--rule); margin-top: 8px; }
.ledger .line i { display: block; height: 2px; background: var(--ink); }

/* A passage from Aristotle, with matching marks */
.passage { margin: 48px 0; padding: 28px 28px 24px; background: var(--card); border-radius: 20px; }
.passage blockquote { margin: 0; font: 400 22px/1.4 var(--serif); }
.passage blockquote::before, .passage blockquote::after { display: block; height: 0.7em; font-size: 2.2em; line-height: 1; color: var(--mark); }
.passage blockquote::before { content: "\201C"; }
.passage blockquote::after { content: "\201D"; text-align: right; }
.passage figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.passage figcaption::before { content: ""; width: 20px; height: 1px; background: var(--ink); }
.passage figcaption b { display: block; font-weight: 500; letter-spacing: 0.18em; color: var(--ink); }

/* Feature list */
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.points li { padding: 14px 4px; border-bottom: 1px solid var(--rule); }
.points b { font-weight: 600; }
.points span { color: var(--muted); }

/* Prose pages (the privacy policy) */
.page main { padding: 32px 0 16px; }
.page main h1 { font: 400 40px/1.1 var(--serif); margin: 16px 0 8px; }
.page main h2 { font: 600 17px/1.3 var(--sans); margin: 36px 0 8px; }
.page main p, .page main li { color: var(--ink); }
.page main h1 + p em { color: var(--muted); }

/* Footer */
.foot { margin-top: 64px; padding: 24px 0 48px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.foot .small { font-size: 12px; }