/* ============================================================================
   13 — DOMINION  ·  A founder's biography in stone
   Bespoke palette: deep stone, warm bronze, cream paper, shadow black, halo gold.
   No shared CSS imports. Built from scratch. Museum dedication aesthetic.
   ============================================================================ */
:root{
  --stone:#1a1610;            /* deep stone, base background */
  --stone-2:#100c08;           /* deeper recess */
  --stone-3:#241d14;           /* lifted plinth */
  --shadow:#08060a;            /* shadow black, the recess */
  --paper:#e8dcc4;             /* cream paper, primary text */
  --paper-warm:#d8c8a8;        /* warmer cream for body */
  --paper-mute:#9a8c70;        /* muted parchment */
  --paper-faint:#5a4f3c;       /* faint annotation */
  --bronze:#a87c4e;            /* warm bronze accent */
  --bronze-2:#c69266;          /* lifted bronze */
  --bronze-deep:#7a5a3a;       /* recessed bronze */
  --halo:#d4a559;              /* bronze halo, hero accent */
  --halo-soft:#e8c280;          /* soft halo glow */
  --rule:rgba(168,124,78,.18); /* hairline */
  --rule-strong:rgba(168,124,78,.32);
  --serif:'Cinzel',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.14,1,.34,1);
  --ease-museum:cubic-bezier(.58,1,0,0);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
html{
  background:
    radial-gradient(70% 50% at 72% 42%, rgba(168,124,78,.08) 0%, transparent 60%),
    radial-gradient(50% 40% at 28% 78%, rgba(8,6,10,.72) 0%, transparent 60%),
    linear-gradient(170deg, #1a1610 0%, #120e09 48%, #08060a 100%);
  color:var(--paper);
  font-family:var(--sans);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{overflow:hidden;font-size:calc(15px*var(--res-scale-text,1));line-height:1.62;background:transparent;letter-spacing:.005em}
body.is-locked{overflow:hidden}
::selection{background:var(--bronze);color:var(--shadow)}

button,a{font-family:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{text-decoration:none}

/* ----- WebGL canvas — the statue lives at z:0 ---------------------------- */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:transparent;pointer-events:none}

/* ----- Atmospheric overlays ---------------------------------------------- */
.paper-warmth{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 80% at 70% 50%, rgba(212,165,89,.10) 0%, transparent 55%),
    radial-gradient(40% 60% at 20% 30%, rgba(168,124,78,.05) 0%, transparent 60%);
  mix-blend-mode:screen;
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(110% 80% at 65% 50%, transparent 42%, rgba(8,6,10,.55) 90%, rgba(0,0,0,.85) 100%);
}
.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0 0.45 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
.halo--bronze{
  position:fixed;z-index:2;pointer-events:none;mix-blend-mode:screen;
  top:30%;right:18%;width:42vw;height:42vw;max-width:560px;max-height:560px;
  background:radial-gradient(circle at center, rgba(212,165,89,.18) 0%, rgba(168,124,78,.06) 35%, transparent 65%);
  filter:blur(40px);opacity:.65;
  animation:haloDrift 18s ease-in-out infinite;
}
@keyframes haloDrift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.55}
  50%{transform:translate(-1.5%,1%) scale(1.04);opacity:.72}
}

/* ----- Plinth (gallery wall corners) ------------------------------------- */
.plinth{position:fixed;inset:32px;z-index:4;pointer-events:none}
.plinth__corner{position:absolute;width:28px;height:28px;border-color:var(--bronze)}
.plinth__corner--tl{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.plinth__corner--tr{top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}
.plinth__corner--bl{bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}
.plinth__corner--br{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* ----- Masthead (TL) — Cinzel sigil + name + rule ----------------------- */
.masthead{
  position:fixed;top:42px;left:64px;z-index:50;
  display:flex;align-items:center;gap:14px;
  font:600 11px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;
  color:var(--paper);
}
.masthead__sigil{display:inline-flex;color:var(--bronze)}
.masthead__sigil svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(212,165,89,.35))}
.masthead__name{font-family:var(--serif);font-weight:600;letter-spacing:.42em;font-size:13px;color:var(--paper)}
.masthead__rule{display:inline-block;width:60px;height:1px;background:linear-gradient(90deg,var(--bronze),transparent)}
.masthead__meta{font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--paper-mute)}

/* ----- Dedication (TR) — vertical engraved lines ------------------------ */
.dedication{
  position:fixed;top:50%;right:54px;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  writing-mode:vertical-rl;text-orientation:mixed;
  font:500 10px/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;
  color:var(--paper-mute);
  opacity:.78;
}
.dedication__label{color:var(--halo)}
.dedication__line{display:block;writing-mode:horizontal-tb;width:1px;height:18px;background:var(--bronze);opacity:.4}
.dedication__year{font-family:var(--serif);font-weight:400;font-size:11px;color:var(--paper)}

/* ----- Chapter marker (BL) ---------------------------------------------- */
.chapter-marker{
  position:fixed;bottom:38px;left:64px;z-index:50;
  display:flex;align-items:center;gap:18px;
  font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper-mute);
}
.chapter-marker__roman{
  font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.18em;
  color:var(--halo);min-width:36px;text-align:left;
  text-shadow:0 0 14px rgba(212,165,89,.35);
}
.chapter-marker__title{
  font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.18em;
  color:var(--paper);text-transform:uppercase;
}
.chapter-marker__bar{position:relative;width:140px;height:1px;background:rgba(168,124,78,.22)}
.chapter-marker__fill{
  position:absolute;inset:0;width:16.66%;
  background:linear-gradient(90deg,var(--bronze),var(--halo));
  transition:width .9s var(--ease-museum);
  box-shadow:0 0 10px rgba(212,165,89,.45);
}

/* ----- Continue (BR) ----------------------------------------------------- */
.continue{
  position:fixed;bottom:42px;right:64px;z-index:50;
  display:flex;align-items:center;gap:12px;
  font:500 10px/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;
  color:var(--paper-mute);
  transition:opacity .8s var(--ease);
}
.continue.is-hidden{opacity:0;pointer-events:none}
.continue .rule{display:inline-block;width:48px;height:1px;background:linear-gradient(90deg,var(--bronze),transparent);animation:contNudge 2.4s ease-in-out infinite}
@keyframes contNudge{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(8px);opacity:1}}

/* ============================================================================
   FOLIO + CHAPTERS — asymmetric, chapters live in a left column
   ============================================================================ */
.folio{position:relative;z-index:5;height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}
.folio::-webkit-scrollbar{display:none}

.chapter{
  scroll-snap-align:start;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(120px,12vh,160px) clamp(64px,5vw,140px);
  position:relative;
}

/* Chapter column = 38% left band, statue breathes in the remaining 62% */
.chapter__column{
  position:relative;z-index:2;
  width:min(640px, 42vw);
  padding:clamp(28px,2.4vw,40px) 0;
  /* Subtle vertical rule on the right edge of the prose column */
  border-right:1px solid var(--rule);
  padding-right:clamp(32px,3vw,56px);
  margin-right:clamp(32px,4vw,80px);
}
.chapter__column--center{
  width:min(720px, 60vw);
  margin:0 auto;
  border-right:none;padding-right:0;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}

/* Each chapter darkens the column area for legibility against statue */
.chapter::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(8,6,10,.82) 0%,
    rgba(16,12,8,.65) 32%,
    rgba(16,12,8,.30) 50%,
    transparent 72%);
}
.chapter--reach::before{
  background:radial-gradient(80% 60% at 50% 50%, rgba(8,6,10,.55) 0%, rgba(8,6,10,.85) 70%);
}

/* Eyebrow — chapter number + title */
.chapter__eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font:500 10px/1 var(--mono);letter-spacing:.42em;text-transform:uppercase;
  color:var(--paper-mute);
  margin-bottom:clamp(28px,3vw,46px);
}
.chapter__eyebrow.center{justify-content:center;margin-left:auto;margin-right:auto}
.chapter__eyebrow .ord{
  font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.16em;
  color:var(--halo);
  text-shadow:0 0 12px rgba(212,165,89,.4);
}
.chapter__eyebrow .rule{display:inline-block;width:56px;height:1px;background:linear-gradient(90deg,var(--bronze),transparent)}

/* Display type — Cinzel, classical proportions */
.display{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(64px,8.5vw,148px);
  line-height:.95;letter-spacing:.012em;
  color:var(--paper);
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(8,6,10,.5), 0 0 60px rgba(212,165,89,.10);
}
.display--md{font-size:clamp(48px,6.4vw,108px);font-weight:600;line-height:.98}
.display.center{text-align:center}

/* Body prose — narrative serif body */
.dek{
  margin-top:clamp(20px,2vw,32px);max-width:520px;
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(15px,1.25vw,20px);
  line-height:1.55;
  color:var(--paper-warm);
  letter-spacing:.012em;
}
.prose{
  margin-top:18px;max-width:520px;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(14px,1.05vw,16.5px);
  line-height:1.72;
  color:var(--paper-warm);
}
.prose.center{margin-left:auto;margin-right:auto;text-align:center}
.prose + .prose{margin-top:14px}

/* Letter reveal */
[data-reveal]{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1.2s var(--ease-museum),transform 1.2s var(--ease-museum),filter 1.2s var(--ease-museum);transition-delay:var(--rd,0ms)}
[data-reveal].is-visible{opacity:1;transform:translateY(0);filter:blur(0)}

/* Per-char letter-by-letter reveal — GSAP animates opacity + Y on .char spans */
.display .char,.display--md .char{display:inline-block;will-change:transform,opacity;transform-origin:50% 100%}
.display .char,.display--md .char{text-shadow:0 0 38px rgba(212,165,89,.18)}

/* ============================================================================
   HERO — attribution + founder card
   ============================================================================ */
.attribution{
  margin-top:38px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font:500 10px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;
  color:var(--paper-mute);
}
.attribution__rule{flex:1;min-width:36px;height:1px;background:linear-gradient(90deg,var(--bronze),transparent)}

.founder-card{
  margin-top:32px;max-width:480px;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg, rgba(36,29,20,.55) 0%, rgba(16,12,8,.45) 100%);
  border:1px solid var(--rule-strong);
  border-radius:2px;
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 24px 60px -20px rgba(8,6,10,.7), inset 0 1px 0 rgba(212,165,89,.08);
  position:relative;
}
.founder-card::before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent);
}
.founder-card__row{
  display:grid;grid-template-columns:140px 1fr;align-items:baseline;gap:20px;
  padding:14px 22px;
  border-bottom:1px solid var(--rule);
  transition:background .35s var(--ease);
}
.founder-card__row:last-child{border-bottom:none}
.founder-card__row:hover{background:rgba(168,124,78,.05)}
.founder-card__key{font:500 10px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint)}
.founder-card__val{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--paper);letter-spacing:.01em}

/* ============================================================================
   ANNAL — chapter II timeline list, classical hairline
   ============================================================================ */
.annal{
  margin-top:32px;list-style:none;display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--rule-strong);max-width:520px;
}
.annal li{
  display:grid;grid-template-columns:90px 1fr auto;align-items:baseline;gap:18px;
  padding:14px 4px;
  border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.annal li:hover{background:linear-gradient(90deg, rgba(168,124,78,.08), transparent);padding-left:14px}
.annal__year{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--halo);letter-spacing:.06em}
.annal__rule{height:1px;background:linear-gradient(90deg, var(--bronze) 0%, transparent 100%);transform:translateY(-3px);min-width:40px}
.annal__event{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--paper-warm);letter-spacing:.01em;text-align:right;justify-self:end}

/* ============================================================================
   WORKS — chapter III, three articles stacked
   ============================================================================ */
.works{margin-top:32px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule-strong);max-width:540px}
.work{
  display:flex;flex-direction:column;gap:8px;
  padding:18px 4px;
  border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.work:hover{background:linear-gradient(90deg, rgba(168,124,78,.06), transparent);padding-left:14px}
.work header{display:flex;align-items:baseline;gap:12px}
.work__id{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--bronze)}
.work h3{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--paper);letter-spacing:.04em;text-transform:uppercase;flex:1}
.work__year{font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--paper-faint)}
.work p{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.65;color:var(--paper-warm)}

/* ============================================================================
   ELEGY — quoted passage with mark
   ============================================================================ */
.elegy{
  margin-top:32px;max-width:520px;position:relative;
  padding:28px 30px 24px 56px;
  background:linear-gradient(160deg, rgba(36,29,20,.45) 0%, rgba(16,12,8,.30) 100%);
  border-left:2px solid var(--bronze);
  border-radius:0 4px 4px 0;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 44px -18px rgba(8,6,10,.7);
}
.elegy__mark{
  position:absolute;top:12px;left:18px;
  font-family:var(--serif);font-weight:600;font-size:54px;line-height:1;
  color:var(--halo);opacity:.7;
  text-shadow:0 0 18px rgba(212,165,89,.35);
}
.elegy p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.3vw,19px);line-height:1.55;
  color:var(--paper);letter-spacing:.012em;
}
.elegy footer{
  margin-top:14px;font:500 10px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--paper-faint);
}

/* ============================================================================
   HONORS — chapter V CTAs (donate + read)
   ============================================================================ */
.honors{margin-top:36px;display:flex;flex-direction:column;gap:12px;max-width:480px}
.honor{
  display:flex;flex-direction:column;gap:5px;
  padding:18px 22px;
  background:linear-gradient(160deg, rgba(36,29,20,.55) 0%, rgba(16,12,8,.40) 100%);
  border:1px solid var(--rule-strong);
  border-radius:3px;
  backdrop-filter:blur(12px);
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.honor:hover{transform:translateY(-2px);border-color:rgba(212,165,89,.45);background:linear-gradient(160deg, rgba(168,124,78,.18) 0%, rgba(16,12,8,.50) 100%)}
.honor__label{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.honor__sub{font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mute)}
.honor--primary{
  background:linear-gradient(160deg, rgba(212,165,89,.22) 0%, rgba(168,124,78,.10) 100%);
  border-color:rgba(212,165,89,.42);
  box-shadow:0 14px 36px -12px rgba(168,124,78,.4), inset 0 1px 0 rgba(232,194,128,.18);
}
.honor--primary .honor__label{color:var(--halo-soft);text-shadow:0 0 14px rgba(212,165,89,.4)}
.honor--primary:hover{
  background:linear-gradient(160deg, rgba(212,165,89,.32) 0%, rgba(168,124,78,.16) 100%);
  border-color:rgba(232,194,128,.7);
  box-shadow:0 20px 50px -14px rgba(212,165,89,.55), inset 0 1px 0 rgba(232,194,128,.28);
}

/* ============================================================================
   VISIT (chapter VI)
   ============================================================================ */
.visit{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;justify-content:center}
.visit-btn{
  padding:16px 30px;
  font:600 11px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;
  color:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:3px;
  background:rgba(36,29,20,.55);
  backdrop-filter:blur(14px);
  transition:all .4s var(--ease);
}
.visit-btn:hover{border-color:rgba(212,165,89,.5);background:rgba(168,124,78,.12);transform:translateY(-1px)}
.visit-btn--primary{
  background:linear-gradient(135deg, var(--bronze), var(--halo));
  color:var(--shadow);font-weight:700;
  border-color:transparent;
  box-shadow:0 14px 36px -10px rgba(212,165,89,.55);
}
.visit-btn--primary:hover{
  background:linear-gradient(135deg, var(--halo), var(--halo-soft));
  box-shadow:0 20px 48px -10px rgba(232,194,128,.7);
}
.colophon{
  margin-top:64px;display:flex;align-items:center;gap:18px;
  font:600 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper-faint);
}
.colophon__rule{flex:1;min-width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--bronze),transparent)}

/* ============================================================================
   VESTIBULE (gate) — entering the gallery
   ============================================================================ */
.vestibule{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,10,.95);
  backdrop-filter:blur(32px);
  transition:opacity 1.1s var(--ease-museum),visibility 1.1s;
}
.vestibule.is-open{opacity:0;visibility:hidden;pointer-events:none}
.vestibule__bg{
  position:absolute;inset:0;
  background:radial-gradient(70% 50% at 50% 50%, rgba(168,124,78,.12) 0%, transparent 60%);
  animation:vestPulse 4s ease-in-out infinite;
}
@keyframes vestPulse{0%,100%{opacity:.7}50%{opacity:1}}
.vestibule__inner{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;
  max-width:440px;text-align:center;padding:0 32px;
}
.vestibule__loading{
  font:500 10px/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;
  color:var(--paper-mute);display:flex;align-items:center;gap:10px;
}
.vestibule__loading .dots{display:inline-flex;gap:3px}
.vestibule__loading .dots i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--halo);animation:dots 1.4s ease-in-out infinite}
.vestibule__loading .dots i:nth-child(2){animation-delay:.2s}
.vestibule__loading .dots i:nth-child(3){animation-delay:.4s}
@keyframes dots{0%,80%,100%{opacity:.25}40%{opacity:1}}
.vestibule__sigil{width:84px;height:84px;filter:drop-shadow(0 0 22px rgba(212,165,89,.5))}
.vestibule__title{
  font-family:var(--serif);font-weight:800;font-size:38px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--paper);
  margin-top:6px;
  text-shadow:0 0 28px rgba(212,165,89,.25);
}
.vestibule__sub{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14px;color:var(--paper-mute);letter-spacing:.04em;
}
.vestibule__btns{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.vestibule__btn{
  padding:14px 24px;min-height:48px;min-width:170px;
  font:600 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:3px;background:rgba(36,29,20,.6);
  transition:all .4s var(--ease);touch-action:manipulation;
}
.vestibule__btn:hover{border-color:rgba(212,165,89,.5);background:rgba(168,124,78,.12)}
.vestibule__btn--primary{
  background:linear-gradient(135deg, var(--bronze), var(--halo));
  color:var(--shadow);font-weight:700;
  border-color:transparent;
  box-shadow:0 12px 32px -10px rgba(212,165,89,.55);
}
.vestibule__btn--primary:hover{
  background:linear-gradient(135deg, var(--halo), var(--halo-soft));
  box-shadow:0 18px 44px -10px rgba(232,194,128,.7);
}
.vestibule__small{
  margin-top:10px;font-size:11px;color:var(--paper-faint);font-weight:300;
  letter-spacing:.04em;font-style:italic;font-family:var(--serif);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1024px){
  .chapter{padding:clamp(110px,12vh,140px) clamp(28px,5vw,80px)}
  .chapter__column{
    width:100%;max-width:560px;
    border-right:none;padding-right:0;margin-right:0;
    background:linear-gradient(180deg, rgba(8,6,10,.65) 0%, rgba(8,6,10,.45) 100%);
    backdrop-filter:blur(8px);
    padding:28px;border-radius:4px;
    border:1px solid var(--rule);
  }
  .chapter::before{background:linear-gradient(180deg, rgba(8,6,10,.55) 0%, rgba(8,6,10,.30) 50%, rgba(8,6,10,.65) 100%)}
  .dedication{display:none}
}
@media (max-width:720px){
  .masthead{top:24px;left:24px;gap:10px;font-size:10px}
  .masthead__name{font-size:11px;letter-spacing:.32em}
  .masthead__rule{width:32px}
  .masthead__meta{display:none}
  .chapter-marker{left:24px;bottom:30px;gap:12px}
  .chapter-marker__bar{width:84px}
  .continue{display:none}
  .plinth{inset:14px}
  .chapter{padding:clamp(96px,10vh,120px) 22px}
  .display{font-size:clamp(54px,14vw,96px)}
  .display--md{font-size:clamp(40px,10vw,68px)}
  .founder-card__row{grid-template-columns:100px 1fr;gap:14px;padding:12px 16px}
  .founder-card__val{font-size:13.5px}
  .annal li{grid-template-columns:64px 1fr auto;gap:12px}
  .annal__year{font-size:14px}
  .annal__event{font-size:13px}
  .colophon{flex-direction:column;align-items:center;gap:8px}
  .colophon__rule{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none;filter:none}
}

/* ============================================================================
   ESSAY-MODE CHROME (ESS3)  —  Dominion as a memorial folio
   ----------------------------------------------------------------------------
   Strips out: corner brackets (plinth), masthead chrome (top-left HUD), vertical
   dedication strip on the right, chapter-marker progress bar, "CONTINUE" cue.
   Replaces with: tiny serif "D." brand, italic chapter titles centered top per
   chapter, italic roman page numbers bottom-right per chapter, hairline gutter
   at left:80px, frontispiece label inside the vestibule, "end of folio" before
   the colophon. Palette stays bronze/stone/cream — type does the work.
   ============================================================================ */

/* ----- 1. HIDE the leftover HUD chrome (KEEP DOM intact for module.js IDs) -- */
.essay--dominion .plinth{display:none !important}
.essay--dominion .masthead{display:none !important}
.essay--dominion .dedication{display:none !important}
.essay--dominion .chapter-marker{display:none !important}
.essay--dominion .continue{display:none !important}

/* ----- 2. LEFT MARGIN RULE (printed-folio gutter) ----------------------- */
.essay-rule{
  position:fixed;left:80px;top:0;bottom:0;width:1px;z-index:6;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(168,124,78,.32) 8%,
    rgba(168,124,78,.32) 92%,
    transparent 100%);
  opacity:.55;
}

/* ----- 3. BRAND — tiny serif initial + tiny caps subtitle --------------- */
.brand-fixed--essay{
  position:fixed;top:34px;left:36px;z-index:50;
  display:flex;align-items:baseline;gap:10px;color:var(--paper);
}
.brand-fixed--essay .brand-fixed__initial{
  font-family:var(--serif);font-weight:600;
  font-size:22px;line-height:1;color:var(--paper);
  letter-spacing:.06em;
  text-shadow:0 0 14px rgba(212,165,89,.25);
}
.brand-fixed--essay .brand-fixed__initial i{
  font-style:normal;color:var(--halo);
  text-shadow:0 0 12px rgba(212,165,89,.45);
}
.brand-fixed--essay .brand-fixed__name{
  font-family:var(--mono);font-weight:500;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--paper-mute);
  white-space:nowrap;
}

/* ----- 4. ESSAY-SOUND-NOTE (bottom-left tiny essay text) ---------------- */
.essay-sound-note{
  position:fixed;bottom:34px;left:36px;z-index:50;
  font-family:var(--serif);font-weight:400;font-size:13px;
  color:var(--paper-mute);
  letter-spacing:.04em;
  white-space:nowrap;
}
.essay-sound-note em{
  font-style:italic;color:var(--paper-warm);
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:1px;
}

/* ----- 5. ESSAY MARK — chapter title (top center) + page number (bottom right) ----- */
.essay-mark{
  position:absolute;inset:0;z-index:6;pointer-events:none;
}
.essay-mark__chapter{
  position:absolute;top:30px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-weight:400;
  font-size:12.5px;letter-spacing:.18em;
  color:var(--paper-mute);
  white-space:nowrap;
  opacity:.9;
  text-transform:uppercase;
}
.essay-mark__chapter em{
  font-style:italic;color:var(--halo);font-weight:400;
  letter-spacing:.16em;
  text-shadow:0 0 10px rgba(212,165,89,.3);
}
.essay-mark__page{
  position:absolute;bottom:34px;right:48px;
  font-family:var(--serif);font-weight:400;
  font-size:14px;color:var(--paper-mute);
  letter-spacing:.04em;
}
.essay-mark__page em{
  font-style:italic;color:var(--halo);font-weight:400;font-size:16px;
  text-shadow:0 0 10px rgba(212,165,89,.35);
}

/* ----- 6. END OF FOLIO decoration --------------------------------------- */
.end-of-folio{
  margin-top:clamp(36px,4vw,60px);
  display:inline-flex;align-items:center;gap:18px;justify-content:center;
  align-self:center;
}
.end-of-folio__rule{
  display:inline-block;width:48px;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent);
  opacity:.7;
}
.end-of-folio__txt{
  font-family:var(--serif);font-weight:400;font-size:13px;
  letter-spacing:.16em;color:var(--paper-mute);
  text-transform:uppercase;
}
.end-of-folio__txt em{
  font-style:italic;color:var(--halo);text-transform:none;letter-spacing:.04em;font-size:14px;
  text-shadow:0 0 12px rgba(212,165,89,.3);
}

/* ----- 7. FRONTISPIECE label inside vestibule --------------------------- */
.vestibule__frontispiece{
  font-family:var(--serif);font-weight:400;
  font-size:12px;letter-spacing:.32em;color:var(--paper-mute);
  text-transform:uppercase;
  margin-bottom:6px;
  opacity:.85;
}
.vestibule__frontispiece em{
  font-style:italic;color:var(--halo);
  text-transform:none;letter-spacing:.04em;font-size:14px;
  text-shadow:0 0 14px rgba(212,165,89,.4);
}

/* ----- 8. RESPONSIVE ---------------------------------------------------- */
@media (max-width:1024px){
  .essay-rule{left:32px}
  .essay-mark__chapter{top:22px;font-size:11px;letter-spacing:.16em}
  .essay-mark__page{bottom:24px;right:24px;font-size:13px}
  .essay-mark__page em{font-size:15px}
}
@media (max-width:720px){
  .essay-rule{display:none}
  .brand-fixed--essay{top:22px;left:22px}
  .brand-fixed--essay .brand-fixed__name{display:none}
  .essay-sound-note{bottom:22px;left:22px;font-size:12px}
  .essay-mark__chapter{font-size:10px}
}