/* ═══ AURUM · THE VIGIL — the web voice of the Great Work (born 2026-07-10, from zero
   after the deep canon pass; nothing survives from the old site.css).

   The design truths this file encodes, taken from the game itself:
   · the night is the game's own VOID atmosphere (#050509 out, #17161f in — Cosmetics.cs);
   · the gold is the game's own VESSEL gold (#d9b65f, bright #e8d199) with the ladder's
     RADIANT GOLD (#f0c24b) and AURUM (#fbe9b0) as the dawn ramp;
   · exactly two registers of voice, as in the game (WORLD.md §7): INSCRIPTIONS (engraved
     small caps, wide-tracked sans) and THE JOURNAL HAND (italic serif) — plus figures;
   · light is the story: progress on these pages, as in the game, is light accumulating
     toward the dawn;
   · THE PIXEL LAW: every glyph is DOM text, native subpixel AA — no canvas, no grain.
   Zero external requests: system type only; the pages are self-contained by design. ═══ */

/* the game's own faces, self-hosted (OFL): the page finally wears what the game wears */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter Light";
  src: url("fonts/Inter_18pt-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  --night-out: #050509;              /* the Void, outer — the game's own sky */
  --night-in: #17161f;               /* the Void, inner */
  --ink: #efe9dc;                    /* parchment white — the journal's page */
  --dim: #b3a992;
  --whisper: #7e7460;
  --gold: #d9b65f;                   /* the vessel's hairline gold */
  --gold-bright: #e8d199;
  --dawn: #f0c24b;                   /* Radiant Gold — tier X */
  --aurum: #fbe9b0;                  /* AURUM — tier XI */
  --hairline: rgba(217, 182, 95, 0.26);
  --serif: Cambria, Constantia, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --display: "Cormorant Garamond", Cambria, "Palatino Linotype", Georgia, serif;
  --inscr: "Inter Light", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--night-out);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(217, 182, 95, 0.25); color: var(--ink); }

/* ── the fixed night: one sky behind every page, warmed by each page's own measure ── */
.sky {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(140% 90% at 50% 118%, var(--sky-glow, rgba(0,0,0,0)), transparent 62%),
    radial-gradient(120% 100% at 50% 28%, var(--night-in), var(--night-out) 78%);
}
.sky::after {                        /* the veil: the top of the night stays deepest */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), transparent 30%);
}

/* ── the way home: one quiet engraving, top left ── */
.home {
  position: fixed; top: 26px; left: 30px; z-index: 10;
  font-family: var(--inscr); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: lowercase;
  color: var(--whisper); text-decoration: none; border-bottom: none;
  transition: color 0.45s ease;
}
.home:hover { color: var(--gold-bright); border-bottom: none; }

/* ── the voices ── */

/* INSCRIPTIONS — engraved matter: labels, section names, litanies */
.inscr {
  font-family: var(--inscr);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* THE JOURNAL HAND — the Alchemist's own voice */
.journal {
  font-family: var(--serif);
  font-style: italic;
  color: var(--dim);
}

/* the page column for reading pages */
main.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 26px 110px;
}

/* the reading page's arrival: a lamp of gold light, then the title */
.lamp-head {
  min-height: 44vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.lamp {
  position: absolute; left: 50%; top: 30%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(240, 194, 75, 0.17), rgba(217, 182, 95, 0.06) 45%, transparent 72%);
  animation: lampbreath 8.5s ease-in-out infinite;
  pointer-events: none;
}
canvas.embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
@keyframes lampbreath { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.lamp-head h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 7.6vw, 58px);
  letter-spacing: 0.30em; text-indent: 0.30em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff8e2 0%, var(--aurum) 30%, var(--gold-bright) 60%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(240, 194, 75, 0.16));
}
.lamp-head .journal { margin-top: 14px; font-size: 18px; }

/* chapters of a reading page */
h2 {
  font-family: var(--inscr);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 64px 0 20px;
  display: flex; align-items: center; gap: 16px;
}
h2::before {
  content: ""; width: 30px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--gold), transparent);
}

p { color: var(--dim); margin: 0 0 18px; }
strong { color: var(--ink); font-weight: 600; }
em { color: var(--ink); }

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--hairline); transition: color .35s ease, border-color .35s ease; }
a:hover { color: var(--aurum); border-color: var(--aurum); }

ul { list-style: none; margin: 0 0 18px; }
ul li { color: var(--dim); padding-left: 24px; position: relative; margin-bottom: 11px; }
ul li::before { content: "·"; color: var(--gold); position: absolute; left: 6px; }
ol { margin: 0 0 18px 22px; }
ol li { color: var(--dim); margin-bottom: 11px; padding-left: 8px; }
ol li::marker { color: var(--gold); font-family: var(--inscr); font-size: 13px; }

.figures { font-family: var(--inscr); font-variant-numeric: tabular-nums; }

/* quiet meta lines */
.meta {
  font-family: var(--inscr); font-size: 12.5px; font-weight: 400;
  letter-spacing: 0.10em; color: var(--whisper);
}

/* ── the close of every page: one breath of dawn and the way onward ── */
footer.vigil {
  max-width: 680px; margin: 0 auto;
  padding: 0 26px 54px;
  text-align: center;
}
footer.vigil .ember {
  width: 240px; height: 1px; margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
footer.vigil .ember::after {
  content: ""; position: absolute; inset: -9px -36px;
  background: radial-gradient(closest-side, rgba(240, 194, 75, 0.18), transparent);
}
footer.vigil nav { margin-bottom: 14px; }
footer.vigil nav a {
  font-family: var(--inscr); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--whisper); border-bottom: none; margin: 0 13px;
}
footer.vigil nav a:hover { color: var(--gold-bright); }
footer.vigil .colophon {
  font-family: var(--inscr); font-size: 11.5px;
  letter-spacing: 0.14em; color: var(--whisper);
}

/* the arrival of content as the reader descends (JS adds .in) */
.arr { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.arr.in { opacity: 1; transform: none; }

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .home { top: 20px; left: 22px; }
  .lamp-head h1 { letter-spacing: 0.22em; text-indent: 0.22em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lamp { animation: none; }
  .arr { opacity: 1; transform: none; transition: none; }
}