/* ============================================================
   BASE — reset, typography, shared editorial primitives
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--color-bg-void);
  color: var(--color-text-secondary);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: rgb(207 174 99 / 0.28); color: var(--color-text-primary); }

/* Keyboard users get a real, visible, on-brand focus ring. */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--color-accent-base);
  outline-offset: 5px;
  border-radius: var(--radius-1);
}

/* ---------- SCREEN READERS ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent-light);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  transition: transform var(--dur-ui) var(--ease-arrive);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ============================================================
   EDITORIAL PRIMITIVES
   ============================================================ */

/* — metadata label: the archival voice of the whole site — */
.meta {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.meta--gold { color: var(--color-accent-base); }
.meta--wide { letter-spacing: var(--track-meta-wide); }
.meta--micro { font-size: var(--t-micro); }
.meta--ink { color: var(--color-ink-muted); }

/* — numerals: tabular, tight, unmistakably a folio — */
.folio {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-faint);
}

/* — display type — */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--color-text-primary);
}
.display--1 { font-size: var(--t-display-1); }
.display--2 { font-size: var(--t-display-2); }
.display--3 { font-size: var(--t-display-3); }
.display--ink { color: var(--color-ink-strong); }

.display em,
.gold-word {
  font-style: italic;
  background: linear-gradient(96deg, var(--color-accent-deep) 0%, var(--color-accent-bright) 38%, var(--color-accent-base) 62%, var(--color-accent-shadow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
}

/* — body copy — */
.prose {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}
.prose--lede { font-size: var(--t-lede); color: var(--color-text-secondary); line-height: 1.58; }
.prose--ink { color: var(--color-ink-body); }
.prose--ink-lede { color: var(--color-ink-strong); }

/* — hairline rules that draw themselves — */
.rule {
  height: var(--rule-hair);
  width: 100%;
  background: var(--color-border-faint);
  transform-origin: left center;
}
.rule--gold { background: var(--color-border-accent); }
.rule--ink { background: var(--color-border-ink); }
.rule--v { width: var(--rule-hair); height: 100%; transform-origin: center top; }

/* ============================================================
   CINEMATIC TEXT — split reveal machinery
   Lines are masked; words/chars ride up from beneath the mask.
   ============================================================ */

.ct { display: block; }
.ct__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.ct__inner {
  display: block;
  will-change: transform, opacity;
  transform: translate3d(0, 110%, 0) rotate(1.6deg);
  opacity: 0;
  transition:
    transform var(--dur-content) var(--ease-arrive),
    opacity calc(var(--dur-content) * 0.7) linear;
  transition-delay: var(--ct-delay, 0ms);
}
.ct.is-revealed .ct__inner { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }

/* word-level variant, for monumental single lines */
.ct--words .ct__word {
  display: inline-block;
  will-change: transform, opacity, filter;
  transform: translate3d(0, 0.5em, 0);
  opacity: 0;
  filter: blur(6px);
  transition:
    transform var(--dur-content) var(--ease-arrive),
    opacity var(--dur-content) var(--ease-editorial),
    filter var(--dur-content) var(--ease-editorial);
  transition-delay: var(--ct-delay, 0ms);
}
.ct--words.is-revealed .ct__word { transform: none; opacity: 1; filter: blur(0); }

/* soft fade primitive for calm body copy */
.fade-up {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-content) var(--ease-editorial),
    transform var(--dur-content) var(--ease-arrive);
  transition-delay: var(--ct-delay, 0ms);
  will-change: opacity, transform;
}
.fade-up.is-revealed { opacity: 1; transform: none; }

/* a rule that draws downward — the divider beside a chapter numeral */
.wipe-y {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-content) var(--ease-camera);
  transition-delay: var(--ct-delay, 0ms);
}
.wipe-y.is-revealed { transform: scaleY(1); }

/* rule that wipes in */
.wipe {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-content) var(--ease-camera);
  transition-delay: var(--ct-delay, 0ms);
}
.wipe.is-revealed { transform: scaleX(1); }

/* ============================================================
   REDUCED MOTION — everything arrives, nothing travels far
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ct__inner,
  .ct--words .ct__word,
  .wipe-y,
  .fade-up {
    transform: none !important;
    filter: none !important;
  }
  .ct__line { overflow: visible; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}