/* Narthex design tokens: the look of the Realms dashboard, shared by Chapel Walls, Chapel Words and Narthex Studio.
   Fonts are self-hosted: link fonts/fonts.css (copy the fonts/ folder with its OFL licence files). Never load Google Fonts on a public site.
   Theme: follows the system; set data-theme="light" or "dark" on <html> to force one. */

:root {
  /* Color: pearly white ground, near-black ink, one gold, one quiet green, one red. */
  --ground: #f8f5ee;              /* pearly white, barely cream */
  --raise: #fffdf8;               /* a sheet lifted off the ground; use sparingly */
  --ink: #1b1915;
  --muted: #6e6659;               /* AA on the pearly ground at 15px */
  --hair: rgba(60, 48, 24, 0.12); /* hairline rules, the only borders */
  --gold: #806019;                /* what matters, links, motion, ASCII marks; AA on the pearly ground */
  --gold-soft: rgba(128, 96, 25, 0.30);
  --green: #4d7a46;               /* only alive / on time / in profit */
  --red: #b0412e;                 /* only something actually broken; one small mark */

  /* Type: one serif for names and big numbers, one mono for everything else. */
  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 11px;                /* when something was seen, secondary words */
  --text-sm: 12px;
  --text-md: 13px;                /* body */
  --text-public: 15px;            /* minimum body size on public pages: our readers skew older */
  --text-lg: 17px;                /* italic serif quotes */
  --title-sm: 21px;               /* italic serif group names */
  --title-md: 27px;               /* realm / product names */
  --figure-md: 25px;              /* secondary numbers */
  --figure-xl: clamp(76px, 23vw, 112px); /* the one number that matters */

  /* Space: a 4px base. Gutters never below 16px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;
  --measure: 62ch;
  --page-max: 1240px;

  /* Motion: short, eased, once. Nothing loops. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 220ms;
  --dur-enter: 420ms;             /* staggered 60ms per element, whole entrance under 600ms */
  --stagger: 60ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #181818;            /* Cursor black, not #000 */
    --raise: #1f1f1f;
    --ink: #ebe6dc;
    --muted: #aaa397;
    --hair: rgba(235, 222, 196, 0.10);
    --gold: #d8b464;
    --gold-soft: rgba(216, 180, 100, 0.26);
    --green: #8fbb80;
    --red: #e3765e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #181818;
  --raise: #1f1f1f;
  --ink: #ebe6dc;
  --muted: #aaa397;
  --hair: rgba(235, 222, 196, 0.10);
  --gold: #d8b464;
  --gold-soft: rgba(216, 180, 100, 0.26);
  --green: #8fbb80;
  --red: #e3765e;
  color-scheme: dark;
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--text-md)/1.5 var(--mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

/* The few pieces every page uses */
.n-name { font: 500 var(--title-md)/1.1 var(--display); margin: 0; letter-spacing: -0.005em; text-wrap: balance; }
.n-figure { font: 500 var(--figure-xl)/0.92 var(--display); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.n-group { font: italic 500 var(--title-sm)/1 var(--display); margin: 0 0 var(--space-3); }
.n-quiet { color: var(--muted); }
.n-seen { color: var(--muted); opacity: .75; font-size: var(--text-xs); white-space: nowrap; }
.n-reported { opacity: .58; }  /* a person reported it; no platform saw it */
.n-gold { color: var(--gold); }
.n-mark { margin: 0; font: 400 10px/1.08 var(--mono); color: var(--gold); white-space: pre; }
.n-rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

@keyframes n-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.n-enter > * { animation: n-rise var(--dur-enter) var(--ease) both; }
.n-enter > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.n-enter > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.n-enter > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.n-enter > *:nth-child(n+5) { animation-delay: calc(var(--stagger) * 4); }
@media (prefers-reduced-motion: reduce) { .n-enter > * { animation: none; } }