/* SPAN shared visual system -- editorial / measurement identity.
 * Linked by index.html, about.html, privacy.html and 404.html so the
 * wordmark, palette, type system and footer read identically everywhere.
 * Page-specific layout stays in each page's own <style> block.
 *
 * Fonts: self-hosted, SIL OFL 1.1 licensed, static per-weight WOFF2 only.
 *   Fraunces 600 (display/wordmark/reveal) -- see fonts/OFL-Fraunces.txt
 *   Libre Franklin 400 + 600 (body/UI)      -- see fonts/OFL-LibreFranklin.txt
 * No third-party font host is ever contacted at runtime.
 */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/libre-franklin-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/libre-franklin-latin-600-normal.woff2') format('woff2');
}

:root{
  /* --faint/--green/--gold are darkened from the original palette so tile
     text and secondary labels clear WCAG AA (4.5:1) against their
     backgrounds -- verified numerically, unchanged from the prior pass. */
  --bg:#FAFAF7;--ink:#1A1A1A;--faint:#66665F;--line:#E4E4DC;
  --green:#175C39;--green-bg:#DFF0E6;--gold:#82661C;--gold-bg:#F5EDD6;
  --grey-bg:#ECECE6;--red:#B3402E;--red-bg:#F7E7E3;--focus:#1A1A1A;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- shared wordmark: SPAN as a measured interval -------------------
   A genuine display-serif wordmark with a restrained measurement line
   underneath (tick - bar - caption - bar - tick). Decorative only; never
   reveals answer length, never becomes a literal ruler/diagram. */
.wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:var(--ink)}
.wordmark .word{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:.01em;line-height:1}
.wordmark .measure{display:flex;align-items:center;margin-top:5px;width:100%;min-width:150px}
.wordmark .measure .tick{width:1px;height:6px;background:var(--ink);flex:none}
.wordmark .measure .bar{flex:1;height:1px;background:var(--ink);margin:0 -1px}
.wordmark .measure .cap{font-family:var(--sans);font-size:9px;letter-spacing:.13em;color:var(--faint);
  text-transform:uppercase;padding:0 6px;white-space:nowrap}

/* ---- shared footer ---- */
.footerline{margin-top:28px;font-size:10px;color:var(--faint);letter-spacing:.04em}
.footerline a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  background:none;border:none;font:inherit;letter-spacing:inherit}

/* ---- shared outline button (About/Privacy actions, help-close, etc.) --- */
.btn-outline{border:1px solid var(--ink);background:none;color:var(--ink);font-family:var(--sans);
  font-size:11px;letter-spacing:.14em;padding:10px 20px;cursor:pointer;text-transform:uppercase;
  min-height:40px;touch-action:manipulation}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.btn-fill{border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-family:var(--sans);
  font-size:11px;letter-spacing:.14em;padding:10px 20px;cursor:pointer;text-transform:uppercase;
  min-height:40px;touch-action:manipulation}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important}
}