/* ==========================================================================
   ASTRA LEXICA — shared root tokens + chrome
   --------------------------------------------------------------------------
   Design authority: design-spec/blogthislife-preview.html :root, copied
   VERBATIM per MIGRATION-PLAN §P1.3 ("copy verbatim, do not re-pick").
   Do not re-pick, re-space or convert these values. Every root-level page
   (/index.html, /legal.html) loads this file so the three lanes cannot drift.

   The cream ground (--c-*) belongs to the creami side and deliberately does
   NOT come to Astra Lexica.
   ========================================================================== */

:root{
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Figtree','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --gutter:64px;
  --r-card:18px;
  --r-tile:20px;
  --r-row:12px;
  --r-pill:999px;

  /* night ground */
  --n-fg:#E8E9F2;
  --n-dim:#8B8FA8;
  --n-line:rgba(232,233,242,0.12);
  --n-fill:rgba(232,233,242,0.035);
  --gold:#C9B26A;
  --gold-lt:#E6D49A;
  --violet:#C9A0E8;
  --amber:#E0BE78;
  --mint:#7ADFA3;
  --blue:#7FB4D8;

  /* tracker status set — mirrors the live site's four semantic colours */
  --st-read:#7ADFA3;
  --st-want:#E0BE78;
  --st-reading:#C9A0E8;
  --st-next:#7FB4D8;
  --grad-gold:linear-gradient(90deg,#8E7A3E,#C9B26A);
  --grad-done:linear-gradient(90deg,#2E7D46,#7ADFA3);

  /* minimum comfortable touch box — every interactive row is measured
     against this at the 344px fold. */
  --tap:28px;
}

/* --------------------------------------------------------------------------
   reset + ground
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}

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

body{
  margin:0;
  min-height:100vh;
  background:#06070D;
  color:var(--n-fg);
  font-family:var(--sans);
  font-weight:400;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  /* the chooser has no horizontally-scrolling content; decorative layers are
     clipped rather than allowed to widen the document at the 344px fold. */
  overflow-x:hidden;
}

img,svg{max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* --------------------------------------------------------------------------
   shared chrome — identical anatomy on every root page
   -------------------------------------------------------------------------- */
.lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.2em;
  color:var(--n-dim);white-space:nowrap;
}

.ftr{
  margin-top:auto;
  padding:22px var(--gutter) 30px var(--gutter);
  border-top:1px solid var(--n-line);
  font-family:var(--mono);font-size:10.5px;line-height:1.9;letter-spacing:0.11em;
  color:var(--n-dim);
}
.ftr p{margin:0;}
.ftr p + p{margin-top:7px;}

/* legal.html is a launch gate, not chrome — it is reachable from every page's
   footer at its own depth (MIGRATION-PLAN §IP guardrails). */
.ftr a{
  color:var(--gold);
  display:inline-block;
  min-height:var(--tap);
  padding:6px 2px;
  border-bottom:1px solid rgba(201,178,106,0.42);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.ftr a:hover{color:var(--gold-lt);border-bottom-color:var(--gold-lt);}

/* --------------------------------------------------------------------------
   gutter steps — 64 desktop, then down to the 344px fold
   -------------------------------------------------------------------------- */
@media (max-width:900px){ :root{--gutter:32px;} }
@media (max-width:640px){ :root{--gutter:20px;--r-tile:16px;} }
@media (max-width:380px){ :root{--gutter:16px;} }