/* =========================================================================
   THE LEDGER — base
   Tokens, reset and typography shared by every page.
   Page skins live in landing.css / path.css / reckoning.css
   ========================================================================= */

:root{
  /* the two papers */
  --ink:        #0c0a09;
  --ink-2:      #16120f;
  --ink-3:      #221c18;
  --bone:       #efe7db;
  --bone-2:     #e4dacb;
  --bone-3:     #cdc0ac;

  /* type on each paper */
  --on-ink:     #e8e0d5;
  --on-ink-dim: #9a8f82;
  --on-bone:    #1a1512;
  --on-bone-dim:#5f5449;

  /* the two accents */
  --oxide:      #b4472f;
  --oxide-lift: #d4674a;
  /* the hope accent: cobalt. Green kept vanishing against bone and against
     the plate duotone; a saturated blue holds at every size. */
  --patina:      #1a4fb4;   /* rich cobalt, for light grounds */
  --patina-lift: #4a80ea;   /* lifted, for dark grounds */
  --patina-wash-l:#e9eefb;  /* pale blue block, light ground */
  --patina-wash-d:rgba(74,128,234,.14);
  --oxide-wash-l: #f8ece7;
  --oxide-wash-d: rgba(212,103,74,.11);
  /* Gold is 8.2:1 on the ink paper and 2.0:1 on the bone one, and it was
     never redefined per skin — so on the hope path the focus ring, every "why
     this matters" label and every fork chip were effectively invisible. The
     skins now set --gold themselves; this is the ink value and the fallback. */
  --gold:       #c9a227;
  --gold-ink:   #c9a227;   /* on near-black: 8.2:1 */
  --gold-bone:  #7d6210;   /* on bone:      4.7:1 */

  /* The panel ground on bone. bone-2 sits *under* the bone, so every panel on
     the hope path read as a dent in the paper; this lifts them out of it.
     The ink path is deliberately untouched. */
  --bone-lift:  #f7f2e9;

  /* The decay reading, seen from the hope path. On this paper the pale oxide
     wash sat lighter than the page, so the darker half of a fork looked like
     the lighter one. A goldy olive-grey, below the bone, carries the weight
     without importing the ink page's palette into a page that is not it. */
  --olive-wash: #d8d1bc;

  --measure:    32rem;
  --ease:       cubic-bezier(.22,.61,.36,1);

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-meta:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

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

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

body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .3vw,1.14rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 60;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1em; text-wrap:pretty; }
a{ color:inherit; }
img{ max-width:100%; }

.meta{
  font-family:var(--font-meta);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* skip link, for keyboards */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:#000; padding:.7rem 1.1rem;
  font-family:var(--font-meta); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:.6rem; top:.6rem; }

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

/* paper grain, reused by every skin */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes rise{ from{ opacity:0; transform:translateY(1.1rem); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }