/* WordSense alpha — "lexicon page" design system.
   Fraunces (display serif, editorial character) + Work Sans (body/UI). */

/* Two independent color pairs, on purpose:
   --page-bg/--page-ink flip with the viewer's theme (normal reading surface).
   --hero-bg/--hero-ink do NOT flip — the dictionary title-panel is a fixed
   design choice, always dark ink, regardless of viewer theme (see
   artifact-design guidance: a page may deliberately commit to one look for
   a specific element while the rest of the page stays theme-aware).
   All text/background pairs below are hand-checked against WCAG AA (4.5:1
   normal text, 3:1 large/bold) — see the report's design note for the ones
   that needed a dedicated shade instead of reusing an accent token as-is. */
:root {
  --page-bg: #f5efde;
  --page-line: #dcd0ae;
  --page-ink: #1d1b18;
  --page-ink-soft: #5b5648;
  --page-ink-faint: #625c47;      /* darkened from the accent gold family — 5.7:1 on --page-bg */

  --hero-bg: #1d1b18;
  --hero-ink: #f3ead2;
  --hero-ink-soft: #cabf9c;
  --hero-accent: #e3a34a;         /* light gold — for TEXT on --hero-bg, 7.8:1 */

  --marigold: #b6721c;            /* mid gold — borders/rings on --page-bg, not run as small body text */
  --marigold-ink: #6e4310;        /* dark gold-brown — text on light marigold tints */
  --btn-fill: #8a5211;            /* deep amber — dedicated button fill */
  --btn-ink: #fffaf0;             /* near-white — button label, 6.4:1 on --btn-fill */
  --teal: #1f6b5c;                /* links on --page-bg, 5.5:1 */
  --teal-ink: #143f37;

  --shadow: 0 1px 0 rgba(29,27,24,.06);
  --radius: 6px;
  --max: 640px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #17140f;
    --page-line: #3a3323;
    --page-ink: #f1e9d4;
    --page-ink-soft: #cabf9c;
    --page-ink-faint: #a49c7c;
    --marigold: #e3a34a;
    --marigold-ink: #f1e9d4;
    --btn-fill: #b6721c;
    --btn-ink: #17140f;
    --teal: #4fa393;
    --teal-ink: #0d1f1b;
  }
}
:root[data-theme="dark"] {
  --page-bg: #17140f;
  --page-line: #3a3323;
  --page-ink: #f1e9d4;
  --page-ink-soft: #cabf9c;
  --page-ink-faint: #a49c7c;
  --marigold: #e3a34a;
  --marigold-ink: #f1e9d4;
  --btn-fill: #b6721c;
  --btn-ink: #17140f;
  --teal: #4fa393;
  --teal-ink: #0d1f1b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--btn-fill);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---- hero: the dictionary title-page (fixed dark panel, doesn't flip) ---- */
.entry-hero {
  background: var(--hero-bg);
  color: var(--hero-ink);
  padding: 56px 0 46px;
}
.entry-hero .wrap { display: flex; flex-direction: column; gap: 18px; }
.headword {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 620;
  font-size: clamp(40px, 11vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.pron {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16.5px;
  color: var(--hero-ink-soft);
  margin: -8px 0 0;
}
.pron b { color: var(--hero-accent); font-style: normal; font-weight: 600; }
.promise {
  font-size: 19px;
  line-height: 1.5;
  max-width: 34ch;
  margin: 6px 0 0;
}
.support {
  font-size: 15px;
  color: var(--hero-ink-soft);
  max-width: 44ch;
  margin: 0;
}
.cta-row { display: flex; flex-direction: column; gap: 11px; margin-top: 10px; max-width: 360px; }
.btn {
  display: block;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 48px;
  line-height: 1.2;
  box-sizing: border-box;
}
.btn-primary { background: var(--btn-fill); color: var(--btn-ink); border: 1.5px solid var(--btn-fill); }
.btn-primary:hover { background: #6f4008; border-color: #6f4008; }
.btn-secondary { background: transparent; color: var(--hero-ink); border: 1.5px solid var(--hero-ink-soft); }
.btn-secondary:hover { border-color: var(--hero-ink); }

/* ---- body sections, on the page surface (flips with viewer theme) ---- */
main { padding: 6px 0 10px; }
section { padding: 34px 0; border-top: 1px solid var(--page-line); }
section:first-of-type { border-top: none; }
h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 560;
  font-size: 24px;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
p { margin: 0 0 12px; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.lede { color: var(--page-ink-soft); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px dashed var(--page-line);
}
.steps li:first-child { border-top: none; padding-top: 4px; }
.steps li::before {
  content: counter(step);
  flex: none;
  width: 30px; height: 30px;
  border: 1.5px solid var(--marigold);
  color: var(--marigold-ink);
  background: color-mix(in srgb, var(--marigold) 16%, var(--page-bg));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14.5px;
}
.steps li span { padding-top: 3px; }

.note {
  font-size: 14.5px;
  color: var(--page-ink-faint);
}
.note a { color: var(--teal); }

/* ---- request-access form ---- */
.req-form { display: flex; flex-direction: column; gap: 13px; max-width: 420px; }
.req-form label { font-size: 13.5px; font-weight: 600; color: var(--page-ink-soft); display: block; margin-bottom: 4px; }
.req-form input, .req-form textarea {
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  padding: 11px 12px;
  border: 1.5px solid var(--page-line);
  border-radius: var(--radius);
  background: var(--page-bg);
  color: var(--page-ink);
}
.req-form textarea { resize: vertical; min-height: 64px; }
.req-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req-form button { align-self: flex-start; min-width: 200px; cursor: pointer; }
.req-ok {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--teal) 14%, var(--page-bg));
  border: 1.5px solid var(--teal);
  border-radius: var(--radius);
  color: var(--teal-ink);
  font-size: 15px;
}
.req-err {
  padding: 12px 14px;
  background: color-mix(in srgb, #b02a2a 12%, var(--page-bg));
  border: 1.5px solid #b02a2a;
  border-radius: var(--radius);
  color: #7a1e1e;
  font-size: 14.5px;
  display: none;
}

footer {
  border-top: 1px solid var(--page-line);
  padding: 26px 0 60px;
  font-size: 13.5px;
  color: var(--page-ink-faint);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
footer a { color: var(--page-ink-soft); }

/* ---- plain document pages (privacy / terms) — header reuses the fixed hero panel ---- */
.doc-header { background: var(--hero-bg); color: var(--hero-ink); padding: 30px 0 26px; }
.doc-header .wrap { display: flex; flex-direction: column; gap: 4px; }
.doc-header h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; margin: 0; }
.doc-header .back { color: var(--hero-ink-soft); font-size: 13.5px; text-decoration: none; }
.doc-header .back:hover { color: var(--hero-ink); }
.doc main section { padding: 26px 0; }
.doc h2 { font-size: 19px; }
.doc .updated { color: var(--page-ink-faint); font-size: 13.5px; }
/* Company name/address, rendered as glyph-outline SVG paths (no <text>) so
   the strings never appear in the HTML, sitemap, or any scrapable form —
   the trade-off is that a screen reader cannot read this block; the
   contact line is the accessible route to the same information. */
.legal-glyphs { color: var(--page-ink); margin: 2px 0 14px; }

/* ---- 404 ---- */
.notfound { min-height: 62vh; display: flex; align-items: center; }
.notfound .wrap { padding-top: 0; padding-bottom: 0; }

@media (min-width: 640px) {
  body { font-size: 18px; }
  .cta-row { flex-direction: row; }
  .btn { flex: 1; }
}