/* ============================================================
   franklinhayes.net — "The Order" homepage
   Secret society / all-seeing eye / systems of control
   ============================================================ */

:root {
  --void: #030303;
  --pitch: #070605;
  --stone: #0c0a07;
  --raised: #14110b;

  --gold: #b8912f;
  --gold-lit: #e0bc6a;
  --gold-deep: #6d551b;
  --gold-veil: rgba(224, 188, 106, 0.13);
  --gold-hair: rgba(224, 188, 106, 0.22);

  --bone: #ded4be;
  --bone-dim: #9c9280;
  --bone-faint: #6a6357;

  --blood: #7c1d17;
  --blood-lit: #a8291f;

  --rite: "Cinzel", "Trajan Pro", Georgia, serif;
  --prose: "Cormorant Garamond", Georgia, serif;
  --file: "Special Elite", "Courier New", monospace;

  --shell: 1340px;
}

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

html {
  color-scheme: dark;
  background: var(--void);
  scroll-behavior: smooth;
}

body.order-home {
  margin: 0;
  color: var(--bone);
  background: var(--void);
  font-family: var(--prose);
  font-size: 1.06rem;
  line-height: 1.7;
  overflow-x: hidden;
}

.order-home ::selection { color: #0a0803; background: var(--gold-lit); }

.order-home h1,
.order-home h2,
.order-home h3,
.order-home h4 {
  font-family: var(--rite);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* :where() keeps this at zero added specificity so component rules
   (.rite-btn--filled, .text-link, …) can still set their own colour. */
.order-home :where(a) { color: inherit; }

.order-home a:focus-visible,
.order-home button:focus-visible,
.order-home input:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 4px;
}

.shell { width: min(calc(100% - 3rem), var(--shell)); margin-inline: auto; }
.shell--tight { width: min(calc(100% - 3rem), 980px); margin-inline: auto; }

.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;
}

.sigil-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sigil-inline { width: 16px; height: 16px; flex: 0 0 auto; }

/* Sticky header clearance for in-page anchors */
section[id], article[id] { scroll-margin-top: 110px; }

/* ------------------------------------------------------------
   The veil — permanent atmosphere over the whole document
   ------------------------------------------------------------ */
.veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,0.40) 82%, rgba(0,0,0,0.68) 100%);
}

.veil::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.016) 0 1px,
    transparent 1px 3px
  );
}

/* Corner surveillance brackets */
.veil__bracket {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(224,188,106,0.16);
}
.veil__bracket--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.veil__bracket--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.veil__bracket--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.veil__bracket--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ------------------------------------------------------------
   Observation HUD — "you are being watched"
   ------------------------------------------------------------ */
.observed {
  position: fixed;
  z-index: 905;
  bottom: 1.5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(224,188,106,0.18);
  background: rgba(3,3,3,0.78);
  backdrop-filter: blur(3px);
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.observed__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blood-lit);
  box-shadow: 0 0 8px var(--blood-lit);
  animation: pulse-watch 2.4s ease-in-out infinite;
}

.observed__clock { color: var(--gold); }

@keyframes pulse-watch {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.8); }
}

/* ------------------------------------------------------------
   Shared type furniture
   ------------------------------------------------------------ */
.mark {
  margin: 0;
  color: var(--gold-lit);
  font-family: var(--file);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.mark--blood { color: var(--blood-lit); }
.mark--dim { color: var(--bone-faint); }

.rule {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-hair), transparent);
}
.rule .sigil-inline { width: 15px; height: 15px; color: var(--gold); flex: 0 0 auto; }

.lede {
  max-width: 62ch;
  color: var(--bone-dim);
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
}

.section-title {
  margin: 0.9rem 0 1.4rem;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
}
.section-title em { color: var(--gold-lit); font-style: normal; }

/* Buttons */
.rite-btn {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--gold);
  color: var(--bone);
  background: rgba(0,0,0,0.5);
  font-family: var(--rite);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rite-btn .sigil-inline { width: 14px; height: 14px; }
.rite-btn:hover {
  color: #0a0803;
  background: var(--gold-lit);
  border-color: var(--gold-lit);
  box-shadow: 0 0 26px rgba(224,188,106,0.28);
}
.rite-btn--filled { color: #0a0803; background: var(--gold-lit); border-color: var(--gold-lit); }
.rite-btn--filled:hover { background: #f2d792; border-color: #f2d792; }
.rite-btn--ghost { border-color: rgba(224,188,106,0.35); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--gold-deep);
  color: var(--gold-lit);
  font-family: var(--rite);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}
.text-link:hover { color: #f2d792; border-color: var(--gold-lit); }

/* Reveal-on-scroll */
.veiled { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.veiled.is-revealed { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.order-header {
  position: sticky;
  top: 0;
  z-index: 800;
  border-bottom: 1px solid var(--gold-hair);
  background: rgba(3,3,3,0.92);
  backdrop-filter: blur(8px);
}

.order-header__bar {
  display: flex;
  min-height: 88px;
  align-items: stretch;
  justify-content: space-between;
  width: min(calc(100% - 2rem), 1600px);
  margin-inline: auto;
}

.order-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.6rem 0.9rem 0.4rem;
  border-right: 1px solid var(--gold-hair);
  color: var(--bone);
  text-decoration: none;
}

/* The seal is the real engraved pyramid now, with the old rotating ring kept
   as a faint outer orbit so the mark still has some life in it. */
.order-brand__seal {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.order-brand__seal::after {
  content: "";
  position: absolute;
  inset: -19%;
  border: 1px dashed rgba(224, 188, 106, 0.34);
  border-radius: 50%;
  animation: slow-turn 48s linear infinite;
}

.order-brand__copy { display: flex; flex-direction: column; }
.order-brand__name {
  font-family: var(--rite);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.order-brand__sub {
  margin-top: 0.4rem;
  color: var(--gold);
  font-family: var(--file);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.order-nav { display: flex; }
.order-nav__list {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-nav__list li { display: flex; border-left: 1px solid rgba(224,188,106,0.12); }
.order-nav__list a {
  display: flex;
  min-width: 132px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  color: var(--bone-dim);
  font-family: var(--rite);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}
.order-nav__list a b {
  color: var(--gold-deep);
  font-family: var(--file);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.14em;
}
.order-nav__list a:hover { color: var(--gold-lit); background: rgba(224,188,106,0.05); }
.order-nav__list a:hover b { color: var(--gold); }
.order-nav__list .is-key a { color: var(--gold-lit); box-shadow: inset 0 -3px var(--gold); }

.nav-toggle { display: none; }

/* ------------------------------------------------------------
   Masthead — the rite
   ------------------------------------------------------------ */
.rite-hero {
  position: relative;
  display: grid;
  /* 35vw keeps the crop constant: hero height and image height both scale
     with viewport width, so the visible band of the artwork never shifts. */
  min-height: clamp(520px, 44vw, 960px);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-hair);
}

/* The hero artwork is two stacked images inside a box that is always the exact
   proportions of the source art (1536 x 1024). Because the eye is positioned in
   percentages of that box, it stays locked to the pyramid at every size.
   translateY(-8%) crops a little off the top; the hero's own 44vw height decides
   where the bottom falls (currently the base of the cube). */
.rite-hero__art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  transform: translateY(-8%);
}

.rite-hero__plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* All nine eyes are stacked in one box behind the plate, so they preload and a
   change of direction is just a swap of .is-active — no flicker, no new request.
   left/top = centre of the pyramid, width = how much of it the eye fills. */
.rite-hero__eyes {
  position: absolute;
  left: 76.6%;
  top: 28.8%;
  width: 18%;
  aspect-ratio: 300 / 286;
  transform: translate(-50%, -50%);
}

.rite-hero__eye {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  /* Short enough to read as a flick of the eye rather than a dissolve. */
  transition: opacity .09s linear;
}
.rite-hero__eye.is-active { opacity: 1; }

.rite-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,3,3,0.92) 0%, rgba(3,3,3,0.82) 40%, rgba(3,3,3,0.36) 62%, transparent 82%),
    linear-gradient(0deg, rgba(3,3,3,0.70), transparent 38%);
}

.rite-hero__geo {
  position: absolute;
  top: 50%;
  left: clamp(-14rem, -8vw, -6rem);
  width: min(46rem, 70vw);
  aspect-ratio: 1;
  color: var(--gold);
  opacity: 0.09;
  transform: translateY(-50%);
  pointer-events: none;
}
.rite-hero__geo .geo-rotor { transform-origin: 50% 50%; animation: slow-turn 140s linear infinite; }
.rite-hero__geo .geo-rotor--rev { animation: slow-turn 96s linear infinite reverse; }

.rite-hero__content {
  position: relative;
  z-index: 3;
  /* Narrow enough to break the headline over 4–5 lines. */
  width: min(40rem, 36%);
  margin-left: clamp(1.5rem, 5vw, 6rem);
  padding: clamp(1.75rem, 2.6vw, 3rem) 0;
}

.rite-hero h1 {
  margin: 0.9rem 0 1.3rem;
  font-size: clamp(2.4rem, 4.4vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-shadow: 0 0 60px rgba(0,0,0,0.9);
}
.rite-hero h1 em {
  color: var(--gold-lit);
  font-style: normal;
  text-shadow: 0 0 40px rgba(184,145,47,0.35);
}

.rite-hero__lede { max-width: 46ch; margin: 0; color: #c4bba8; font-size: clamp(1.02rem, 1.25vw, 1.2rem); }

.rite-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.rite-hero__stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 0;
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rite-hero__stamp b {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--blood);
  color: var(--blood-lit);
  font-weight: 400;
}
.rite-hero__stamp .redact {
  display: inline-block;
  width: 5.5rem;
  height: 0.75rem;
  background: #191713;
  vertical-align: -1px;
}

@keyframes slow-turn { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Creed ticker
   ------------------------------------------------------------ */
.creed {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-hair);
  background: linear-gradient(180deg, #090705, #050403);
  padding: 0.9rem 0;
}
.creed__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: creed-slide 46s linear infinite;
}
.creed__group { display: flex; gap: 0; padding-right: 0; }
.creed span {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 1.6rem;
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.creed span::after { content: ""; width: 6px; height: 6px; background: var(--gold-deep); transform: rotate(45deg); }
.creed span.is-lit { color: var(--gold-lit); }
.creed::before, .creed::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 12rem;
  height: 100%;
}
.creed::before { left: 0; background: linear-gradient(90deg, #060504, transparent); }
.creed::after { right: 0; background: linear-gradient(270deg, #060504, transparent); }

@keyframes creed-slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   The Eye — showstopper
   ------------------------------------------------------------ */
.watcher {
  position: relative;
  /* Tight to the ticker above, roomy below. */
  padding: clamp(2.25rem, 4vw, 4rem) 0 clamp(5rem, 11vw, 11rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(184,145,47,0.10), transparent 55%),
    #050403;
  text-align: center;
}

.watcher__eye {
  position: relative;
  width: min(30rem, 74vw);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 1;
  color: var(--gold);
}
/* The glow used to be a circle inside the SVG. Now that the SVG sits on top of
   the artwork it lives behind instead, so it haloes the pyramid rather than
   washing gold over the eye. */
.watcher__eye::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7.5%;
  background: radial-gradient(circle closest-side,
    rgba(224,188,106,0.30) 0%,
    rgba(184,145,47,0.10) 55%,
    transparent 100%);
  animation: eye-breathe 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* Clipped to the same triangle the SVG draws, so the square plate never shows.
   The dark fill covers the sliver near the apex the artwork doesn't reach. */
.watcher__frames {
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: polygon(50% 15.5%, 82% 72%, 18% 72%);
  background: #070603;
}

.watcher__frame {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 72%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .09s linear;
}
.watcher__frame.is-active { opacity: 1; }

.watcher__eye svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.watcher__eye .ring-outer { transform-origin: 50% 50%; animation: slow-turn 90s linear infinite; }
.watcher__eye .ring-mid { transform-origin: 50% 50%; animation: slow-turn 60s linear infinite reverse; }
.watcher__eye .ring-inner { transform-origin: 50% 50%; animation: slow-turn 34s linear infinite; }

@keyframes eye-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

.watcher h2 {
  margin: 0 0 1.3rem;
  font-size: clamp(2.6rem, 6.5vw, 5.8rem);
  font-weight: 900;
  line-height: 0.95;
}
.watcher h2 em { color: var(--gold-lit); font-style: normal; }
.watcher .lede { margin-inline: auto; text-align: center; }

.watcher__mark { display: block; margin-bottom: 1.1rem; }

.watcher__ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 940px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  border: 1px solid var(--gold-hair);
}
.watcher__ledger div {
  padding: 1.4rem 1rem;
  border-right: 1px solid var(--gold-hair);
}
.watcher__ledger div:last-child { border-right: 0; }
.watcher__ledger dt {
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.watcher__ledger dd {
  margin: 0.5rem 0 0;
  color: var(--gold-lit);
  font-family: var(--rite);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   The hidden order — three pillars
   ------------------------------------------------------------ */
.hidden-order {
  position: relative;
  padding: clamp(5rem, 10vw, 10rem) 0;
  border-block: 1px solid var(--gold-hair);
  background: linear-gradient(180deg, #0a0806, #040403);
}

.hidden-order__head { max-width: 800px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--gold-hair);
}

.pillar {
  position: relative;
  display: flex;
  min-height: 440px;
  flex-direction: column;
  padding: clamp(2rem, 3.4vw, 3.2rem);
  border-right: 1px solid var(--gold-hair);
  overflow: hidden;
  transition: background .35s ease;
}
.pillar:last-child { border-right: 0; }
.pillar:hover { background: rgba(184,145,47,0.045); }

.pillar__halo {
  position: absolute;
  right: -6rem;
  bottom: -6rem;
  width: 17rem;
  aspect-ratio: 1;
  border: 1px solid rgba(184,145,47,0.10);
  border-radius: 50%;
  box-shadow: 0 0 0 2.2rem rgba(184,145,47,0.035), 0 0 0 4.6rem rgba(184,145,47,0.02);
  pointer-events: none;
}

.pillar__num { color: var(--blood-lit); font-family: var(--file); font-size: 0.72rem; letter-spacing: 0.2em; }

.pillar__sigil {
  width: 96px;
  height: 96px;
  margin: 2.6rem 0 2.2rem;
  color: var(--gold);
  transition: color .35s ease, transform .5s ease;
}
.pillar:hover .pillar__sigil { color: var(--gold-lit); transform: scale(1.05); }
.pillar__sigil .spin { transform-origin: 50% 50%; animation: slow-turn 70s linear infinite; }
.pillar:nth-child(2) .pillar__sigil .spin { animation-duration: 54s; animation-direction: reverse; }

.pillar h3 { margin: 0 0 0.9rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.pillar h3 span { display: block; color: var(--gold); font-size: 0.62rem; font-family: var(--file); font-weight: 400; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
.pillar p { margin: 0; color: var(--bone-dim); font-size: 1rem; }

/* ------------------------------------------------------------
   Apparatus of control
   ------------------------------------------------------------ */
.apparatus {
  position: relative;
  padding: clamp(5rem, 9vw, 9rem) 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(184,145,47,0.022) 96px),
    #060505;
  overflow: hidden;
}

.apparatus__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(3rem, 7vw, 7rem);
}

.apparatus__intro { position: sticky; top: 120px; align-self: start; }
/* Sticky + transform don't mix well; this one fades only. */
.apparatus__intro.veiled { transform: none; }

.apparatus__watermark {
  position: absolute;
  right: -10rem;
  top: 50%;
  width: 34rem;
  aspect-ratio: 1;
  color: var(--gold);
  opacity: 0.05;
  transform: translateY(-50%);
  pointer-events: none;
}
.apparatus__watermark .geo-rotor { transform-origin: 50% 50%; animation: slow-turn 180s linear infinite; }

.mechanism-list { border-top: 1px solid var(--gold-hair); }

.mechanism {
  display: grid;
  grid-template-columns: 4.6rem 1.4rem 1fr 1.5fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--gold-hair);
  transition: background .25s ease, padding-left .25s ease;
}
.mechanism:hover { background: rgba(184,145,47,0.035); padding-left: 0.8rem; }
.mechanism b { color: var(--blood-lit); font-family: var(--file); font-size: 0.66rem; letter-spacing: 0.14em; }
.mechanism .sigil-inline { width: 20px; height: 20px; margin-top: 0.15rem; color: var(--gold); }
.mechanism h3 { margin: 0; font-size: 1.22rem; letter-spacing: 0.06em; }
.mechanism p { margin: 0; color: var(--bone-dim); font-size: 0.96rem; }

/* ------------------------------------------------------------
   Case files — the books
   ------------------------------------------------------------ */
.case-files {
  position: relative;
  padding: clamp(5rem, 10vw, 10rem) 0;
  border-top: 1px solid var(--gold-hair);
  background: #040404;
}

.case-files__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.case-files__head p.lede { margin: 0; }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: clamp(3rem, 6vw, 5.5rem);
}

/* Free Reads holds two files, so it sits narrower and centred. */
.case-grid--pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-inline: auto;
}

.case {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.3rem 1.3rem 1.5rem;
  border: 1px solid var(--gold-hair);
  background: linear-gradient(165deg, rgba(20,17,11,0.96), rgba(4,4,4,0.98));
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.case:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 26px 60px rgba(0,0,0,0.7), 0 0 40px rgba(184,145,47,0.06);
}

.case__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.6;
}
.case__corner--tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.case__corner--br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(224,188,106,0.14);
}
.case__file { color: var(--bone-faint); font-family: var(--file); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; }
.case__status {
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--blood);
  color: var(--blood-lit);
  font-family: var(--file);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.case__status--open { border-color: var(--gold-deep); color: var(--gold-lit); }

.case__cover {
  position: relative;
  display: block;
  width: 62%;
  margin: 1.6rem auto 1.6rem;
  box-shadow: 0 22px 46px rgba(0,0,0,0.65);
  transition: transform .35s ease;
}
.case__cover img { display: block; width: 100%; height: auto; }
.case:hover .case__cover { transform: translateY(-3px) scale(1.02); }
.case__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(224,188,106,0.28);
  pointer-events: none;
}

.case__series { margin: 0; color: var(--gold-lit); font-family: var(--file); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; }
.case h3 { margin: 0.55rem 0 0.75rem; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.05; }
.case__copy { flex: 1; }
.case__copy > p:last-child { margin: 0; color: var(--bone-dim); font-size: 0.94rem; line-height: 1.6; }

.case__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(224,188,106,0.14);
}
.case__links a {
  padding: 0.45rem 0.7rem;
  border: 1px solid #4d4127;
  color: #c8bfad;
  font-family: var(--rite);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.case__links a:hover { color: #0a0803; background: var(--gold-lit); border-color: var(--gold-lit); }
.case__links a.is-primary { color: var(--gold-lit); border-color: var(--gold); }
.case__links a.is-primary:hover { color: #0a0803; }
.case__note { flex-basis: 100%; margin: 0.5rem 0 0; color: var(--bone-faint); font-family: var(--file); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Free Reads — declassified material, lit a little warmer */
.case-files--free {
  background:
    radial-gradient(circle at 50% 0%, rgba(184,145,47,0.09), transparent 58%),
    #050505;
}
.case-files--free .case { border-color: rgba(224,188,106,0.3); }

.case-files__head--center {
  display: block;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
.case-files__head--center .rule { justify-content: center; }
.case-files__head--center .rule::after { display: none; }
.case-files__head--center .lede { margin-inline: auto; }

/* ------------------------------------------------------------
   Interlude
   ------------------------------------------------------------ */
.interlude {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-block: 1px solid var(--gold-hair);
  background:
    radial-gradient(circle at 50% 50%, rgba(184,145,47,0.07), transparent 60%),
    #030303;
  text-align: center;
  overflow: hidden;
}
.interlude__sigil { width: 60px; height: 60px; margin: 0 auto 2rem; color: var(--gold); }
.interlude blockquote {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--rite);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
}
.interlude blockquote span { display: block; color: var(--gold-lit); }
.interlude cite {
  display: block;
  margin-top: 2rem;
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.64rem;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   The witness — author
   ------------------------------------------------------------ */
.witness { padding: clamp(5rem, 9vw, 9rem) 0; background: #050505; }
.witness__grid {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.witness__seal {
  position: relative;
  display: grid;
  margin: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--gold-hair);
  background: radial-gradient(circle at 50% 50%, rgba(184,145,47,0.09), transparent 65%);
}
.witness__seal svg { width: 78%; height: 78%; color: var(--gold); }
.witness__seal .spin { transform-origin: 50% 50%; animation: slow-turn 110s linear infinite; }
.witness__seal figcaption {
  position: absolute;
  bottom: 1.1rem;
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.witness__body p { color: var(--bone-dim); }
.witness__body p.witness__lead { color: var(--bone); font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.witness__body a { color: var(--gold-lit); }

/* ------------------------------------------------------------
   Initiation — newsletter
   ------------------------------------------------------------ */
.initiation {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
  border-block: 1px solid var(--gold);
  background:
    linear-gradient(115deg, rgba(124,29,23,0.18), transparent 46%),
    radial-gradient(circle at 82% 30%, rgba(184,145,47,0.10), transparent 45%),
    #0a0806;
  overflow: hidden;
}
.initiation__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.initiation h2 { margin: 0.8rem 0 1.2rem; font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1; }
.initiation h2 em { color: var(--gold-lit); font-style: normal; }
.initiation p { color: var(--bone-dim); }

.oath-form label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--gold-lit);
  font-family: var(--file);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.oath-form__row { display: grid; grid-template-columns: 1fr auto; }
.oath-form input[type="email"] {
  min-height: 54px;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--gold);
  border-right: 0;
  color: var(--bone);
  background: rgba(0,0,0,0.6);
  font-family: var(--prose);
  font-size: 1.02rem;
}
.oath-form input[type="email"]::placeholder { color: #5d5648; }
.oath-form__note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
  color: var(--bone-faint);
  font-family: var(--file);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.oath-form__note .sigil-inline { width: 13px; height: 13px; color: var(--gold); }
.initiation .ml-form-embedWrapper,
.initiation .ml-form-embedBody { display: contents; }
.initiation .row-success p {
  padding: 1.4rem;
  border: 1px solid var(--gold);
  color: var(--gold-lit);
  font-family: var(--file);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.order-footer { padding: clamp(3rem, 5vw, 4.5rem) 0 2.5rem; background: #000; }
.order-footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 3rem;
  align-items: center;
}
.order-footer__brand { display: flex; align-items: center; gap: 1rem; }
.order-footer__seal {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.order-footer__brand strong {
  display: block;
  font-family: var(--rite);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.order-footer__brand span {
  display: block;
  color: var(--gold);
  font-family: var(--file);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.order-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.order-footer nav a {
  color: var(--bone-dim);
  font-family: var(--rite);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}
.order-footer nav a:hover { color: var(--gold-lit); }
.order-footer__legal {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(224,188,106,0.12);
  color: #55503f;
  font-family: var(--file);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .order-nav__list a { min-width: 106px; padding: 1rem 0.7rem; font-size: 0.66rem; }
  .rite-hero__content { margin-left: clamp(1.5rem, 5vw, 4rem); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid--trio .case:last-child { grid-column: 1 / -1; width: calc(50% - 0.7rem); justify-self: center; }
}

@media (max-width: 920px) {
  .order-header__bar { min-height: 76px; align-items: center; }
  .order-brand { border-right: 0; padding-right: 0.8rem; }
  .order-brand__sub { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--gold);
    color: var(--gold-lit);
    background: transparent;
    font-family: var(--rite);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-toggle .sigil-inline { width: 15px; height: 15px; }

  .order-nav { align-items: center; }
  .order-nav__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--gold-hair);
    background: rgba(4,4,4,0.99);
  }
  .order-nav.is-open .order-nav__list { display: flex; }
  .order-nav__list li { border-left: 0; border-bottom: 1px solid rgba(224,188,106,0.12); }
  .order-nav__list a {
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.5rem;
  }

  .rite-hero { min-height: 720px; align-items: end; }
  /* Phone/tablet: scale the art by height instead of width and slide it left,
     the same framing the old background-position: 66% center gave. */
  .rite-hero__art {
    top: 50%;
    left: 66%;
    width: auto;
    height: 100%;
    transform: translate(-66%, -50%);
  }
  .rite-hero__scrim {
    background:
      linear-gradient(0deg, rgba(3,3,3,0.97) 0%, rgba(3,3,3,0.9) 26%, rgba(3,3,3,0.4) 58%, transparent 88%);
  }
  .rite-hero__geo { display: none; }
  .rite-hero__content { width: auto; margin: 0; padding: 4rem 1.5rem 3.5rem; }
  /* Tablet and phone keep the original two-part headline and larger type. */
  .rite-hero h1 { font-size: clamp(3rem, 7vw, 4.4rem); line-height: 0.92; }
  .rite-hero h1 em { display: block; }

  .watcher__ledger { grid-template-columns: repeat(2, 1fr); }
  .watcher__ledger div:nth-child(2) { border-right: 0; }
  .watcher__ledger div:nth-child(1),
  .watcher__ledger div:nth-child(2) { border-bottom: 1px solid var(--gold-hair); }

  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 0; border-right: 0; border-bottom: 1px solid var(--gold-hair); }
  .pillar:last-child { border-bottom: 0; }
  .pillar__sigil { margin: 1.8rem 0 1.6rem; }

  .apparatus__grid,
  .case-files__head,
  .witness__grid,
  .initiation__grid { grid-template-columns: 1fr; }
  .apparatus__intro { position: static; }
  .apparatus__watermark { display: none; }
  .mechanism { grid-template-columns: 3.6rem 1.4rem 1fr; }
  .mechanism p { grid-column: 3; }
  .witness__seal { max-width: 320px; }
  .order-footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .order-footer__brand { flex-direction: column; text-align: center; }
  .order-footer__legal { text-align: center; }
}

@media (max-width: 620px) {
  body.order-home { font-size: 1rem; }
  .shell, .shell--tight { width: calc(100% - 2rem); }
  .observed { display: none; }
  .veil__bracket { width: 28px; height: 28px; }

  .order-brand__seal { width: 38px; height: 38px; }
  .order-brand__name { font-size: 1.05rem; letter-spacing: 0.1em; }
  .nav-toggle { padding: 0.55rem 0.7rem; font-size: 0.62rem; }

  .rite-hero { min-height: 640px; }
  .rite-hero__art { left: 70%; transform: translate(-70%, -50%); }
  .rite-hero h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .rite-hero__actions { flex-direction: column; align-items: stretch; }
  .rite-hero__actions .rite-btn { width: 100%; }

  .watcher { padding: 1.75rem 0 4rem; }
  .watcher__eye { width: min(19rem, 82vw); }
  .watcher__ledger { grid-template-columns: 1fr; }
  .watcher__ledger div { border-right: 0; border-bottom: 1px solid var(--gold-hair); }
  .watcher__ledger div:last-child { border-bottom: 0; }

  .hidden-order, .apparatus, .case-files, .witness, .interlude { padding-block: 4rem; }

  .mechanism { grid-template-columns: 1.4rem 1fr; gap: 0.6rem 1rem; }
  .mechanism b { grid-column: 1 / -1; }
  .mechanism p { grid-column: 2; }

  .case-grid, .case-grid--pair { grid-template-columns: 1fr; }
  .case, .case-grid--trio .case:last-child { grid-column: auto; width: auto; }
  .case__cover { width: min(62%, 210px); }

  .oath-form__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .oath-form input[type="email"] { border-right: 1px solid var(--gold); }
  .order-footer nav { gap: 1rem; }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .veiled { opacity: 1; transform: none; }
  .creed__track { animation: none; }
}

/* The ticker already draws a line; don't stack a second one on top of it. */
.creed + .case-files { border-top: 0; }

/* ============================================================
   Standalone pages — thank-you, success, the prologue.
   They share the homepage shell, header and footer.
   ============================================================ */

/* --- Centred notice pages (thank-you, success) ------------- */
.plain-page {
  display: grid;
  place-items: center;
  min-height: 68vh;
  padding: clamp(4rem, 9vw, 8rem) 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(184,145,47,0.11), transparent 58%),
    #050403;
  text-align: center;
}

.plain-page__seal {
  width: clamp(88px, 13vw, 132px);
  aspect-ratio: 1;
  margin: 0 auto 2.2rem;
  color: var(--gold);
}
.plain-page__seal .spin { transform-origin: 50% 50%; animation: slow-turn 90s linear infinite; }

.plain-page h1 {
  margin: 1rem 0 1.3rem;
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 0.95;
}
.plain-page h1 em { color: var(--gold-lit); font-style: normal; }
.plain-page p { max-width: 56ch; margin: 0 auto; color: var(--bone-dim); }
.plain-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

/* --- The prologue ------------------------------------------ */
.reading-hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--gold-hair);
  background:
    radial-gradient(circle at 78% 40%, rgba(184,145,47,0.10), transparent 45%),
    linear-gradient(180deg, #0a0806, #040403);
}
.reading-hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.reading-hero h1 {
  margin: 0.9rem 0 1.2rem;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.98;
}
.reading-hero h1 span { display: block; color: var(--gold-lit); }
.reading-hero__intro { max-width: 56ch; color: var(--bone-dim); }
.reading-hero__cover {
  position: relative;
  display: block;
  box-shadow: 0 26px 60px rgba(0,0,0,0.7);
}
.reading-hero__cover img { display: block; width: 100%; height: auto; }
.reading-hero__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--gold-hair);
}

.reading { padding: clamp(3.5rem, 8vw, 7rem) 0; background: #040404; }
.reading__shell { width: min(calc(100% - 3rem), 44rem); margin-inline: auto; }

.reading__head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--gold-hair);
  text-align: center;
}
.reading__head h1 { margin: 0.7rem 0 0.4rem; font-size: clamp(2rem, 4vw, 3rem); }
.reading__head p:last-child {
  margin: 0;
  color: var(--gold-lit);
  font-family: var(--file);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.reading__body p {
  margin: 0 0 1.5rem;
  color: #cfc6b2;
  font-size: clamp(1.08rem, 1.3vw, 1.2rem);
  line-height: 1.85;
}
.reading__body p:first-child::first-letter {
  float: left;
  margin: 0.16em 0.12em 0 0;
  color: var(--gold-lit);
  font-family: var(--rite);
  font-size: 3.9em;
  font-weight: 700;
  line-height: 0.78;
}
.reading__body p:last-child { margin-bottom: 0; }

.reading__end {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--gold-hair);
  text-align: center;
}

@media (max-width: 820px) {
  .reading-hero__grid { grid-template-columns: 1fr; }
  .reading-hero__cover { width: min(60%, 240px); margin-inline: auto; }
}

/* ============================================================
   Hover behaviour — the page reacts to being read.
   Three flavours: a light sweep across the gold in big headings,
   a warm bloom on titles and links, and a hard flicker on the
   small typewriter labels.
   ============================================================ */

/* --- Big headings: a band of light crosses the gold half ---- */
@keyframes gild {
  from { background-position: 135% 0; }
  to   { background-position: -35% 0; }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-title em,
  .watcher h2 em,
  .initiation h2 em,
  .interlude blockquote span,
  .plain-page h1 em,
  .reading-hero h1 span {
    background-image: linear-gradient(100deg,
      var(--gold-lit) 0 42%, #fff4d2 50%, var(--gold-lit) 58% 100%);
    background-size: 260% 100%;
    background-position: 135% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .section-title:hover em,
  .watcher h2:hover em,
  .initiation h2:hover em,
  .interlude blockquote:hover span,
  .plain-page h1:hover em,
  .reading-hero h1:hover span { animation: gild .95s ease-out; }
}

/* ...and the rest of the heading warms up behind it */
.section-title, .watcher h2, .initiation h2,
.plain-page h1, .interlude blockquote { transition: text-shadow .35s ease; }
.section-title:hover, .watcher h2:hover, .initiation h2:hover,
.plain-page h1:hover, .interlude blockquote:hover {
  text-shadow: 0 0 34px rgba(224,188,106,0.26);
}

/* --- Small typewriter labels: a monitor stutter ------------- */
@keyframes label-flicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.2; }
  16% { opacity: 1; }
  25% { opacity: 0.45; }
  31% { opacity: 1; }
  40% { opacity: 0.72; }
  46% { opacity: 1; }
}

.mark, .pillar__num, .mechanism b, .case__file,
.case__status, .watcher__ledger dt, .reading__head p:last-child {
  transition: color .25s ease, text-shadow .25s ease;
}
.mark:hover, .pillar__num:hover, .mechanism b:hover, .case__file:hover,
.case__status:hover, .watcher__ledger dt:hover, .reading__head p:last-child:hover {
  animation: label-flicker .5s steps(1, end);
  color: #f6e6b8;
  text-shadow: 0 0 14px rgba(224,188,106,0.5);
}

/* --- Book cards ------------------------------------------- */
.case h3, .case__series { transition: color .3s ease, text-shadow .3s ease; }
.case:hover h3 { color: var(--gold-lit); text-shadow: 0 0 26px rgba(224,188,106,0.35); }
.case:hover .case__series { color: #f2d792; }
.case__status { transition: box-shadow .3s ease, color .25s ease; }
.case:hover .case__status { box-shadow: 0 0 18px rgba(168,41,31,0.35); }
.case:hover .case__status--open { box-shadow: 0 0 18px rgba(224,188,106,0.3); }
.case__links a { transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease; }
.case__links a:hover { box-shadow: 0 0 22px rgba(224,188,106,0.35); }

/* --- Pillars and mechanisms -------------------------------- */
.pillar h3, .mechanism h3 { transition: color .3s ease, text-shadow .3s ease; }
.pillar:hover h3, .mechanism:hover h3 {
  color: var(--gold-lit);
  text-shadow: 0 0 22px rgba(224,188,106,0.3);
}
.watcher__ledger dd { transition: text-shadow .3s ease; }
.watcher__ledger div:hover dd { text-shadow: 0 0 22px rgba(224,188,106,0.45); }

/* --- Links ------------------------------------------------- */
.text-link { transition: color .2s ease, border-color .2s ease, letter-spacing .25s ease, text-shadow .25s ease; }
.text-link:hover { letter-spacing: 0.21em; text-shadow: 0 0 18px rgba(224,188,106,0.45); }

.order-nav__list a, .order-footer nav a, .witness__body a, .reading-hero__intro a {
  transition: color .2s ease, background .2s ease, text-shadow .25s ease, letter-spacing .25s ease;
}
.order-nav__list a:hover { text-shadow: 0 0 16px rgba(224,188,106,0.4); }
.order-footer nav a:hover { letter-spacing: 0.19em; text-shadow: 0 0 16px rgba(224,188,106,0.45); }
.witness__body a:hover, .reading-hero__intro a:hover { text-shadow: 0 0 18px rgba(224,188,106,0.5); }

/* --- The creed ticker: it stops when you look at it --------- */
.creed::before, .creed::after { pointer-events: none; }
.creed:hover .creed__track { animation-play-state: paused; }
.creed span { transition: color .25s ease, text-shadow .25s ease; }
.creed span:hover { color: #f6e6b8; text-shadow: 0 0 16px rgba(224,188,106,0.55); }

/* --- The hero's redaction bar lifts ------------------------- */
.rite-hero__stamp .redact {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0 0.4rem;
  background: none;
  color: transparent;
  transition: color .2s ease .18s;
}
.rite-hero__stamp .redact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #191713;
  transform-origin: right center;
  transition: transform .5s cubic-bezier(.6,0,.2,1);
}
.rite-hero__stamp:hover .redact { color: var(--gold-lit); }
.rite-hero__stamp:hover .redact::before { transform: scaleX(0); }

/* ============================================================
   Occult symbols — accents and drifting background doodles.
   Sliced from work/symbols.png into assets/images/symbols/.
   ============================================================ */

/* --- Deliberate, placed accents ---------------------------- */
.symbol-accent {
  display: block;
  flex: 0 0 auto;
  width: var(--s, 64px);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--o, 0.9);
}

.symbol-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 3rem);
}
.symbol-row .symbol-accent { transition: opacity .35s ease, transform .35s ease; }
.symbol-row .symbol-accent:hover { opacity: 1; transform: translateY(-5px) scale(1.08); }

/* --- Drifting background doodles --------------------------- */
/* Guarantees the field has something to anchor to — several of these
   sections were not positioned. */
[data-doodles] { position: relative; }

.doodle-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Lift the real content above the field. Targeted at the content wrappers
   only — a blanket rule would clobber the absolutely-positioned decorations
   that live alongside them (the hero art, the apparatus watermark). */
.doodle-field ~ .shell,
.doodle-field ~ .shell--tight,
.doodle-field ~ .reading__shell { position: relative; z-index: 1; }

.doodle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 40px);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--o, 0.12);
  animation-name: var(--anim, doodle-bob);
  animation-duration: var(--dur, 30s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: var(--ease, ease-in-out);
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes doodle-spin { to { transform: rotate(360deg); } }
@keyframes doodle-spin-rev { to { transform: rotate(-360deg); } }

@keyframes doodle-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-28px) rotate(6deg); }
}

@keyframes doodle-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(34px, -24px) rotate(90deg); }
  50%  { transform: translate(8px, -48px) rotate(180deg); }
  75%  { transform: translate(-28px, -22px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes doodle-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--o, 0.12); }
  88%  { opacity: var(--o, 0.12); }
  100% { transform: translateY(var(--fall, 900px)) rotate(400deg); opacity: 0; }
}

@keyframes doodle-pulse {
  0%, 100% { transform: scale(0.84) rotate(0deg); opacity: calc(var(--o, 0.12) * 0.35); }
  50%      { transform: scale(1.12) rotate(180deg); opacity: var(--o, 0.12); }
}

@keyframes doodle-sway {
  0%, 100% { transform: translateX(0) rotate(-10deg); }
  50%      { transform: translateX(38px) rotate(10deg); }
}

/* --- Symbols orbiting the eye in "It does not blink" ------- */
.orbit {
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  animation: slow-turn 150s linear infinite;
}
/* Each slot fills the ring and is rotated; the symbol rides its top edge,
   so the orbit radius follows the eye's size with no magic numbers. */
.orbit span {
  position: absolute;
  inset: var(--inset, 0);
  transform: rotate(var(--a, 0deg));
}
.orbit span i {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--s, 34px);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--o, 0.45);
  transform: translate(-50%, -50%);
}

.symbol-accent--center { margin: 0 auto clamp(1.5rem, 3vw, 2.2rem); }
.interlude__sigil.symbol-accent { width: var(--s); height: auto; }

@media (max-width: 620px) {
  .orbit { display: none; }
  .doodle { opacity: calc(var(--o, 0.12) * 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .doodle, .orbit { animation: none; }
}

/* --- Symbol images ------------------------------------------------------
   Declared here on purpose. A relative url() carried inside a custom
   property resolves against the stylesheet that CONSUMES it, not the page
   that declared it, so these cannot live in inline styles. Keeping them
   here also means one path works from the root and from /free/. */
.sym-alchemy-circle { background-image: url("../images/symbols/alchemy-circle.webp"); }
.sym-ankh { background-image: url("../images/symbols/ankh.webp"); }
.sym-caduceus { background-image: url("../images/symbols/caduceus.webp"); }
.sym-celtic-knot { background-image: url("../images/symbols/celtic-knot.webp"); }
.sym-chalice { background-image: url("../images/symbols/chalice.webp"); }
.sym-crescent-star { background-image: url("../images/symbols/crescent-star.webp"); }
.sym-dagger-serpent { background-image: url("../images/symbols/dagger-serpent.webp"); }
.sym-diamond-eye { background-image: url("../images/symbols/diamond-eye.webp"); }
.sym-eagle-pyramid { background-image: url("../images/symbols/eagle-pyramid.webp"); }
.sym-eye-circle { background-image: url("../images/symbols/eye-circle.webp"); }
.sym-eye-of-horus { background-image: url("../images/symbols/eye-of-horus.webp"); }
.sym-eye-pyramid { background-image: url("../images/symbols/eye-pyramid.webp"); }
.sym-fleur-de-lis { background-image: url("../images/symbols/fleur-de-lis.webp"); }
.sym-goat-pentagram { background-image: url("../images/symbols/goat-pentagram.webp"); }
.sym-grimoire { background-image: url("../images/symbols/grimoire.webp"); }
.sym-hourglass { background-image: url("../images/symbols/hourglass.webp"); }
.sym-key { background-image: url("../images/symbols/key.webp"); }
.sym-keyhole { background-image: url("../images/symbols/keyhole.webp"); }
.sym-metatron { background-image: url("../images/symbols/metatron.webp"); }
.sym-moon-phases { background-image: url("../images/symbols/moon-phases.webp"); }
.sym-ouroboros { background-image: url("../images/symbols/ouroboros.webp"); }
.sym-palm-eye { background-image: url("../images/symbols/palm-eye.webp"); }
.sym-pentagram { background-image: url("../images/symbols/pentagram.webp"); }
.sym-scarab { background-image: url("../images/symbols/scarab.webp"); }
.sym-scroll-seal { background-image: url("../images/symbols/scroll-seal.webp"); }
.sym-serpent-rod { background-image: url("../images/symbols/serpent-rod.webp"); }
.sym-square-compass { background-image: url("../images/symbols/square-compass.webp"); }
.sym-star-4 { background-image: url("../images/symbols/star-4.webp"); }
.sym-star-8 { background-image: url("../images/symbols/star-8.webp"); }
.sym-sun-face { background-image: url("../images/symbols/sun-face.webp"); }
.sym-sun-medallion { background-image: url("../images/symbols/sun-medallion.webp"); }
.sym-tree-of-life { background-image: url("../images/symbols/tree-of-life.webp"); }
.sym-triangle-circle { background-image: url("../images/symbols/triangle-circle.webp"); }
.sym-triangle-fire { background-image: url("../images/symbols/triangle-fire.webp"); }
.sym-triangle-outline { background-image: url("../images/symbols/triangle-outline.webp"); }
.sym-triple-moon { background-image: url("../images/symbols/triple-moon.webp"); }
.sym-triquetra { background-image: url("../images/symbols/triquetra.webp"); }
.sym-triskelion { background-image: url("../images/symbols/triskelion.webp"); }
.sym-vitruvian { background-image: url("../images/symbols/vitruvian.webp"); }
.sym-zodiac-wheel { background-image: url("../images/symbols/zodiac-wheel.webp"); }

.sym-sm-alchemy-circle { background-image: url("../images/symbols/sm/alchemy-circle.webp"); }
.sym-sm-ankh { background-image: url("../images/symbols/sm/ankh.webp"); }
.sym-sm-caduceus { background-image: url("../images/symbols/sm/caduceus.webp"); }
.sym-sm-celtic-knot { background-image: url("../images/symbols/sm/celtic-knot.webp"); }
.sym-sm-chalice { background-image: url("../images/symbols/sm/chalice.webp"); }
.sym-sm-crescent-star { background-image: url("../images/symbols/sm/crescent-star.webp"); }
.sym-sm-dagger-serpent { background-image: url("../images/symbols/sm/dagger-serpent.webp"); }
.sym-sm-diamond-eye { background-image: url("../images/symbols/sm/diamond-eye.webp"); }
.sym-sm-eagle-pyramid { background-image: url("../images/symbols/sm/eagle-pyramid.webp"); }
.sym-sm-eye-circle { background-image: url("../images/symbols/sm/eye-circle.webp"); }
.sym-sm-eye-of-horus { background-image: url("../images/symbols/sm/eye-of-horus.webp"); }
.sym-sm-eye-pyramid { background-image: url("../images/symbols/sm/eye-pyramid.webp"); }
.sym-sm-fleur-de-lis { background-image: url("../images/symbols/sm/fleur-de-lis.webp"); }
.sym-sm-goat-pentagram { background-image: url("../images/symbols/sm/goat-pentagram.webp"); }
.sym-sm-grimoire { background-image: url("../images/symbols/sm/grimoire.webp"); }
.sym-sm-hourglass { background-image: url("../images/symbols/sm/hourglass.webp"); }
.sym-sm-key { background-image: url("../images/symbols/sm/key.webp"); }
.sym-sm-keyhole { background-image: url("../images/symbols/sm/keyhole.webp"); }
.sym-sm-metatron { background-image: url("../images/symbols/sm/metatron.webp"); }
.sym-sm-moon-phases { background-image: url("../images/symbols/sm/moon-phases.webp"); }
.sym-sm-ouroboros { background-image: url("../images/symbols/sm/ouroboros.webp"); }
.sym-sm-palm-eye { background-image: url("../images/symbols/sm/palm-eye.webp"); }
.sym-sm-pentagram { background-image: url("../images/symbols/sm/pentagram.webp"); }
.sym-sm-scarab { background-image: url("../images/symbols/sm/scarab.webp"); }
.sym-sm-scroll-seal { background-image: url("../images/symbols/sm/scroll-seal.webp"); }
.sym-sm-serpent-rod { background-image: url("../images/symbols/sm/serpent-rod.webp"); }
.sym-sm-square-compass { background-image: url("../images/symbols/sm/square-compass.webp"); }
.sym-sm-star-4 { background-image: url("../images/symbols/sm/star-4.webp"); }
.sym-sm-star-8 { background-image: url("../images/symbols/sm/star-8.webp"); }
.sym-sm-sun-face { background-image: url("../images/symbols/sm/sun-face.webp"); }
.sym-sm-sun-medallion { background-image: url("../images/symbols/sm/sun-medallion.webp"); }
.sym-sm-tree-of-life { background-image: url("../images/symbols/sm/tree-of-life.webp"); }
.sym-sm-triangle-circle { background-image: url("../images/symbols/sm/triangle-circle.webp"); }
.sym-sm-triangle-fire { background-image: url("../images/symbols/sm/triangle-fire.webp"); }
.sym-sm-triangle-outline { background-image: url("../images/symbols/sm/triangle-outline.webp"); }
.sym-sm-triple-moon { background-image: url("../images/symbols/sm/triple-moon.webp"); }
.sym-sm-triquetra { background-image: url("../images/symbols/sm/triquetra.webp"); }
.sym-sm-triskelion { background-image: url("../images/symbols/sm/triskelion.webp"); }
.sym-sm-vitruvian { background-image: url("../images/symbols/sm/vitruvian.webp"); }
.sym-sm-zodiac-wheel { background-image: url("../images/symbols/sm/zodiac-wheel.webp"); }