/* Dateworthy — one stylesheet for the whole site.
   Palette is the app's own (frontend/src/theme.tsx): linen ground, paper
   cards, warm brown-black ink, glossy blue actions, brass accents. Two ink
   tones are a shade darker here than in the app so body copy clears WCAG AA
   against linen at web sizes.
   No webfonts, no CDN, no scripts, no analytics. This file plus the HTML is
   the entire site. */

:root {
  color-scheme: light dark;

  --bg: #E7E0D0;          /* linen ground */
  --card: #F7F2E6;        /* paper surface */
  --card2: #EFE8D8;       /* secondary paper */
  --border: #C9BFA6;      /* parchment edge */
  --hairline: rgba(60, 45, 20, 0.12);
  --text: #3B3226;        /* warm brown-black */
  --text2: #675C4A;       /* app's #7A6E58, darkened for AA on linen */
  --link: #1E5B99;        /* app's action blue, darkened for AA on linen */
  --link-hover: #2E6FB0;
  --accent: #3C79C9;
  --accent-soft: rgba(60, 121, 201, 0.12);
  --gold: #A9821F;        /* brass "Worthy" */
  --gold-soft: rgba(233, 184, 74, 0.22);
  --good: #2E8B57;
  --header: #3E2F1E;      /* leather header */
  --header-edge: #241A10;
  --on-header: #F3E7C8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #241C14;        /* dark walnut */
    --card: #2F2619;
    --card2: #352A1B;
    --border: #4A3E2C;
    --hairline: rgba(255, 255, 255, 0.08);
    --text: #F1E7D3;
    --text2: #C3B79C;
    --link: #8FBEF7;
    --link-hover: #B3D4FA;
    --accent: #5AA0F0;
    --accent-soft: rgba(90, 160, 240, 0.16);
    --gold: #E9C46A;
    --gold-soft: rgba(233, 196, 106, 0.18);
    --good: #7FC98C;
    --header: #2A2017;
    --header-edge: #14100A;
    --on-header: #F3E7C8;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--text);
  padding: 12px 18px;
  border: 2px solid var(--accent);
  border-radius: 0 0 10px 0;
  text-decoration: none;
  z-index: 10;
}

.skip:focus { left: 0; }

.site-header {
  background: var(--header);
  border-bottom: 3px solid var(--header-edge);
  padding: 22px 16px;
}

.site-header .inner,
.site-footer .inner,
main { margin: 0 auto; max-width: var(--measure); }

.wordmark {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-header);
  text-decoration: none;
}

.wordmark:hover, .wordmark:focus { color: var(--on-header); text-decoration: underline; }

.tagline {
  margin: 2px 0 0;
  color: var(--on-header);
  opacity: 0.82;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

main { padding: 34px 16px 8px; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--text);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 2.05rem; margin: 0 0 10px; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; margin: 42px 0 10px; }
h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  margin: 26px 0 6px;
}

p, li { color: var(--text); }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 1.25em; }
li { margin-bottom: 9px; }

.lede { font-size: 1.14rem; color: var(--text2); margin-bottom: 22px; }
.meta { color: var(--text2); font-size: 0.92rem; margin-bottom: 26px; }
.small { font-size: 0.92rem; color: var(--text2); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--link-hover); }

a:focus-visible, .skip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 14px;
}

.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.note {
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 0 0 20px;
}

.note.brass { border-left-color: var(--gold); background: var(--gold-soft); }
.note > :last-child { margin-bottom: 0; }

.badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

dl.terms { margin: 0 0 16px; }
dl.terms dt { font-weight: 700; margin-top: 18px; }
dl.terms dd { margin: 4px 0 0; color: var(--text); }

.site-footer {
  margin-top: 54px;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 26px 16px 34px;
}

.site-footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 0;
}

.site-footer nav li { margin: 0; }
.site-footer p { color: var(--text2); font-size: 0.92rem; margin: 0 0 8px; }
.site-footer p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  main { padding-top: 26px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.24rem; }
  .card { padding: 16px; }
  .lede { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}