/* ============================================================
   BASE   reset, typography, texture, accessibility primitives
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 380;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.017em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
::selection { background: var(--warm); color: var(--void); }

/* --- Focus: visible, and shaped like a records bracket ----- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
  border-radius: 1px;
}
.skip {
  position: absolute; top: 0; left: 0;
  padding: 0.85rem 1.35rem;
  background: var(--paper); color: var(--paper-ink);
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: var(--track-ui); text-transform: uppercase;
  transform: translateY(-140%);
  transition: transform var(--d-1) var(--e-out);
  z-index: 200; text-decoration: none;
}
.skip:focus-visible { transform: translateY(0); }
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   TEXTURE   grain and the archival rule grid.
   Both are decorative and non-blocking.
   ============================================================ */
.grain {
  position: fixed; inset: -60px;
  pointer-events: none; z-index: var(--z-grain);
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-drift 6s steps(6) infinite; }
}
@keyframes grain-drift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6px, 4px); }
  40%  { transform: translate(4px, -7px); }
  60%  { transform: translate(-5px, -4px); }
  80%  { transform: translate(7px, 5px); }
  100% { transform: translate(0,0); }
}
.field {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 85% at 50% -10%, rgba(143,160,176,0.09), transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(201,166,120,0.05), transparent 60%);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 54rem; }
.measure { max-width: var(--measure); }
.act {
  position: relative;
  z-index: var(--z-body);
  padding-block: var(--act-pad);
}
.act--tall { padding-block: clamp(6rem, 18vh, 14rem); }

/* ============================================================
   THE PAPER LAYER
   Inverts the page into Amara's archive: bone paper, dark ink.
   Used twice on the site. Rarity is the point.
   ============================================================ */
.leaf {
  background: var(--paper);
  color: var(--paper-ink);
  --bone: #16181a; --bone-2: #3d403f; --bone-3: #64635b;
  --rule: rgba(22,24,26,0.18); --rule-2: rgba(22,24,26,0.09);
  --rule-strong: rgba(22,24,26,0.42);
  --graphite: #4b5a67; --warm: #7a5326; --stamp: #a13a24;
  position: relative;
  z-index: var(--z-body);
}
.leaf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain-src);
  background-size: 200px 200px;
  opacity: 0.35; mix-blend-mode: multiply;
}
.leaf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.14), transparent 5%, transparent 95%, rgba(0,0,0,0.14));
}
.leaf > * { position: relative; z-index: 1; }
.leaf ::selection { background: var(--paper-ink); color: var(--paper); }

/* ============================================================
   TYPE ROLES
   ============================================================ */
.ui {
  font-family: var(--f-ui);
  font-size: var(--t-ui);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  font-weight: 450;
  color: var(--bone-3);
  line-height: 1.5;
}
.ui--lg { font-size: var(--t-ui-lg); }
.ui--wide { letter-spacing: var(--track-wide); }
.doc { font-family: var(--f-doc); font-size: var(--t-sm); line-height: 1.7; }
.lede {
  font-size: var(--t-lg);
  line-height: 1.42;
  font-weight: 350;
  letter-spacing: -0.012em;
  color: var(--bone);
}
.dim { color: var(--bone-2); }
.faint { color: var(--bone-3); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --- Section marker: a records header, not a heading ------- */
.marker {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.marker__no { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); color: var(--warm); flex: none; }
.marker__label { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--bone-3); }
.marker__spacer { flex: 1 1 auto; }
/* On small screens the marker keeps its number and its name and
   drops the aside, which is the part that was only ever seasoning. */
@media (max-width: 720px) {
  .marker { gap: var(--s2); }
  .marker__spacer, .marker__spacer + .marker__label { display: none; }
}

/* ============================================================
   CLASSIFICATION CHIP
   Section XXVI of the story bible gives every historically
   anchored element one of four classifications. The site uses
   the same system, which is both the interface motif and the
   honest boundary between record and invention.
   ============================================================ */
.cls {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: var(--track-ui); text-transform: uppercase;
  padding: 0.38em 0.7em 0.34em;
  border: 1px solid currentColor;
  color: var(--bone-3);
  line-height: 1.35;
}
@media (min-width: 620px) { .cls { white-space: nowrap; line-height: 1; } }
.cls::before {
  content: ""; width: 5px; height: 5px; flex: none;
  background: currentColor;
}
.cls--fact      { color: var(--graphite); }
.cls--composite { color: var(--bone-3); }
.cls--divergence{ color: var(--stamp); }
.cls--open      { color: var(--warm); border-style: dashed; }

/* ============================================================
   REVEAL   scroll-driven. Content is visible without JS.
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
  transition-delay: var(--rd, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   BUTTONS AND LINKS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.85em;
  font-family: var(--f-ui); font-size: var(--t-ui-lg);
  letter-spacing: var(--track-ui); text-transform: uppercase;
  padding: 1.05em 1.6em;
  border: 1px solid var(--rule-strong);
  color: var(--bone); text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
  position: relative;
}
.btn:hover, .btn:focus-visible { border-color: var(--warm); color: var(--warm); }
.btn__arrow { transition: transform var(--d-1) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--solid { background: var(--bone); color: var(--void); border-color: var(--bone); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--warm); border-color: var(--warm); color: var(--void); }
.tlink {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: border-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.tlink:hover, .tlink:focus-visible { color: var(--warm); border-color: var(--warm); }

/* ============================================================
   REDACTION
   Used only on material the novel itself withholds. Never on
   navigation, headings, or anything a reader needs.
   ============================================================ */
.redact {
  position: relative;
  background: var(--bone);
  color: transparent;
  border-radius: 1px;
  transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
  -webkit-user-select: none; user-select: none;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.14em;
}
.leaf .redact { background: var(--paper-ink); }
body.is-declassified .redact {
  background: transparent;
  color: var(--warm);
  -webkit-user-select: auto; user-select: auto;
  box-shadow: inset 0 -1px 0 rgba(201,166,120,0.45);
}

/* Hidden record panel */
.node21 {
  position: fixed; z-index: var(--z-modal);
  right: var(--gutter); bottom: var(--gutter);
  width: min(24rem, calc(100vw - var(--gutter) * 2));
  background: var(--ink-900);
  border: 1px solid var(--warm);
  padding: var(--s3);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.node21__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.node21__top button { background: none; border: 0; color: var(--bone-3); cursor: pointer; font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); }
.node21__top button:hover { color: var(--warm); }
.node21 dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.45rem var(--s3); font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.node21 dt { color: var(--bone-4); }
.node21 dd { margin: 0; color: var(--bone-2); }
.node21 p { margin-top: var(--s3); font-size: var(--t-sm); color: var(--bone-3); font-family: var(--f-text); letter-spacing: 0; text-transform: none; }

/* ============================================================
   FORM
   ============================================================ */
.form { display: grid; gap: var(--s3); max-width: 32rem; justify-items: start; }
.form > * { width: 100%; }
.form button { width: auto; }
.form__row { display: grid; gap: 0.5rem; }
.form label {
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--bone-3);
}
.form input[type="email"], .form input[type="text"] {
  font-family: var(--f-ui); font-size: 0.9rem;
  background: transparent; color: var(--bone);
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: 0.8rem 0.1rem;
  width: 100%;
  transition: border-color var(--d-1) var(--e-out);
}
.form input::placeholder { color: var(--bone-4); }
.form input:focus-visible { border-color: var(--warm); outline-offset: 6px; }
.form__hp { position: absolute; left: -9999px; }
.form__note { font-size: var(--t-sm); color: var(--bone-3); }

/* ============================================================
   SEGMENTED CONTROL
   Shared by the contact diagram and the chronology filter.
   ============================================================ */
.switch { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-strong); width: fit-content; max-width: 100%; }
.switch button {
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: var(--track-ui); text-transform: uppercase;
  background: none; border: 0; color: var(--bone-3);
  padding: 0.85rem 1.15rem; cursor: pointer; flex: 1 1 auto; min-width: 0;
  transition: color var(--d-1), background var(--d-1);
  border-right: 1px solid var(--rule-strong);
}
.switch button:last-child { border-right: 0; }
.switch button[aria-pressed="true"] { background: var(--bone); color: var(--void); }

/* ============================================================
   INTERACTIVE EFFECTS & EASTER EGGS
   ============================================================ */
.flashlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(
    600px circle at var(--x, 50vw) var(--y, 50vh), 
    rgba(201, 166, 120, 0.06), 
    transparent 80%
  );
  transition: opacity var(--d-2) var(--e-out);
}

body.is-washed-out {
  filter: grayscale(80%) opacity(0.6) sepia(0.2) contrast(1.1);
  transition: filter 2s var(--e-out);
}

body.is-locked { 
  overflow: hidden; 
  touch-action: none; 
}

.act[data-bg] {
  position: relative;
}

.act[data-bg]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity; 
  filter: grayscale(100%) contrast(1.5);
  pointer-events: none;
}