:root {
  /* compliance lexicon: IBM Plex Mono* seal IDs; Roboto Condensed* labels */
  --midnight-archive: #071426;
  --deep-scholarly-blue: #0E2545;
  --aged-paper: #D8C7A1;
  --oxidized-ink: #19202B;
  --redaction-burgundy: #6E1F2A;
  --faint-rule-blue: #6F8AA6;
  --lamp-gold: #C6A45D;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--midnight-archive);
}

body {
  margin: 0;
  color: var(--aged-paper);
  background:
    linear-gradient(90deg, rgba(111, 138, 166, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(111, 138, 166, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 70% 12%, rgba(198, 164, 93, 0.16), transparent 24rem),
    var(--midnight-archive);
  background-size: 6.5vw 100%, 100% 7.5vh, auto, auto;
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow-x: hidden;
}

.design-ledger {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(216, 199, 161, .25) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 42%, rgba(111, 138, 166, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 82%, rgba(198, 164, 93, .16) 0 1px, transparent 1.5px);
  background-size: 39px 41px, 53px 47px, 29px 31px;
  animation: grainDrift 14s linear infinite alternate;
}

.persistent-hinge {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--hinge-left, 36%);
  width: 12px;
  z-index: 15;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left .8s cubic-bezier(.2, .8, .2, 1);
}

.persistent-hinge::before,
.persistent-hinge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(111, 138, 166, .42);
}

.persistent-hinge::before { left: 2px; }
.persistent-hinge::after { right: 2px; background: rgba(198, 164, 93, .45); }

.persistent-hinge span {
  position: absolute;
  inset: 0 4px;
  background: linear-gradient(180deg, transparent, rgba(216, 199, 161, .18), transparent);
  filter: blur(1px);
}

.folio-nav {
  position: fixed;
  left: 1.2rem;
  top: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transform: translateY(-50%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .67rem;
  letter-spacing: .08em;
}

.folio-nav a {
  color: rgba(216, 199, 161, .55);
  text-decoration: none;
  padding: .22rem .32rem;
  border-left: 1px solid rgba(111, 138, 166, .45);
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}

.folio-nav a.active,
.folio-nav a:hover {
  color: var(--lamp-gold);
  border-color: var(--redaction-burgundy);
  transform: translateX(.28rem);
}

.spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 36%) 1fr;
  isolation: isolate;
}

.spread::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(111, 138, 166, .12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(111, 138, 166, .10) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  transform: translateY(var(--grid-shift, 0));
  transition: transform .25s linear;
}

.public-margin {
  min-height: 100vh;
  position: sticky;
  top: 0;
  padding: 3.5rem 3.2rem 3rem 4.4rem;
  background: linear-gradient(135deg, var(--midnight-archive), var(--deep-scholarly-blue));
  border-right: 1px solid rgba(111, 138, 166, .35);
  overflow: hidden;
}

.public-margin::before,
.public-margin::after {
  content: "";
  position: absolute;
  border-color: rgba(198, 164, 93, .55);
  width: 2rem;
  height: 2rem;
}

.public-margin::before { top: 2rem; left: 2.2rem; border-top: 1px solid; border-left: 1px solid; }
.public-margin::after { bottom: 2rem; right: 1.8rem; border-right: 1px solid; border-bottom: 1px solid; }

.coordinate,
.seal-id,
.archive-tab,
.counter-caption,
.folio-stamp,
.marginalia {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
}

.coordinate { color: var(--faint-rule-blue); }

.vertical-masthead {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: "Oswald", "Roboto Condensed", Arial Narrow, sans-serif;
  font-size: clamp(3.8rem, 8.5vw, 8.7rem);
  line-height: .82;
  letter-spacing: -.035em;
  color: rgba(216, 199, 161, .93);
  text-shadow: 0 0 2.5rem rgba(198, 164, 93, .25);
}

.chapter-number {
  margin: 6vh 0 0;
  font-family: "Oswald", "Roboto Condensed", Arial Narrow, sans-serif;
  font-size: clamp(7rem, 18vw, 18rem);
  line-height: .8;
  letter-spacing: -.07em;
  color: rgba(111, 138, 166, .22);
}

.margin-thesis {
  position: absolute;
  bottom: 10vh;
  max-width: 14rem;
  color: rgba(216, 199, 161, .86);
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.05;
  font-style: italic;
}

.measurement {
  position: absolute;
  right: 1.15rem;
  top: 8vh;
  bottom: 8vh;
  width: 1px;
  background: rgba(111, 138, 166, .3);
}

.measurement span {
  position: absolute;
  right: 0;
  width: 2rem;
  border-top: 1px solid rgba(111, 138, 166, .4);
}

.measurement span:nth-child(1) { top: 10%; }
.measurement span:nth-child(2) { top: 35%; }
.measurement span:nth-child(3) { top: 60%; }
.measurement span:nth-child(4) { top: 85%; }

.vertical-note {
  position: absolute;
  right: 2.3rem;
  bottom: 4rem;
  writing-mode: vertical-rl;
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  font-size: .78rem;
  letter-spacing: .32em;
  color: var(--lamp-gold);
}

.enclosed-page {
  min-height: 100vh;
  position: relative;
  padding: clamp(2rem, 5vw, 6rem);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 44% 10%, rgba(198, 164, 93, .12), transparent 22rem);
}

.paper-stack {
  position: relative;
  width: min(70vw, 45rem);
  min-height: 62vh;
  transform: translateY(var(--paper-shift, 0));
  transition: transform .25s linear;
}

.paper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(110, 31, 42, .08), transparent 8rem),
    radial-gradient(circle at 70% 70%, rgba(14, 37, 69, .12), transparent 10rem),
    linear-gradient(105deg, rgba(255,255,255,.14), transparent 28%),
    var(--aged-paper);
  color: var(--oxidized-ink);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.42), inset 0 0 0 1px rgba(25,32,43,.18);
}

.sheet-primary { padding: clamp(2rem, 5vw, 5rem); z-index: 2; }
.shadow-sheet { transform: rotate(-3deg) translate(-1rem, 1.2rem); opacity: .45; background: #C6A45D; }

.archive-tab {
  color: var(--redaction-burgundy);
  border-bottom: 1px solid rgba(110, 31, 42, .35);
  padding-bottom: .45rem;
}

.quoted-sentence {
  margin: 18vh 0 0;
  max-width: 30rem;
  font-size: clamp(2rem, 4.2vw, 4.6rem);
  line-height: .95;
  font-weight: 600;
}

.redaction-bar {
  position: absolute;
  left: 9%;
  top: 52%;
  width: 74%;
  height: clamp(1.5rem, 3vw, 3.8rem);
  background: var(--redaction-burgundy);
  box-shadow: 0 .6rem 1.8rem rgba(110, 31, 42, .35);
  mix-blend-mode: multiply;
}

.animated-redaction { animation: redactionSweep 8s cubic-bezier(.56,0,.24,1) infinite alternate; }

.footnote {
  position: absolute;
  left: clamp(2rem, 5vw, 5rem);
  bottom: 2.2rem;
  font-style: italic;
  color: rgba(25, 32, 43, .76);
}

.fold-table,
.enclosure-diagram,
.witness-grid,
.sealed-field {
  width: min(73vw, 54rem);
  min-height: 66vh;
  position: relative;
}

.fold-panel {
  position: absolute;
  padding: 2rem;
  font-family: "Oswald", "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  line-height: .9;
  color: var(--oxidized-ink);
  background: var(--aged-paper);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35);
  transition: transform .3s linear;
}

.panel-a { top: 5%; left: 5%; width: 52%; height: 48%; transform: translateX(var(--panel-a, 0)) rotate(-2deg); }
.panel-b { right: 6%; top: 28%; width: 45%; height: 45%; transform: translateX(var(--panel-b, 0)) rotate(2deg); background: #C6A45D; }
.panel-c { left: 20%; bottom: 3%; width: 50%; height: 25%; font-size: clamp(1.3rem, 3vw, 3.5rem); background: rgba(216,199,161,.86); }

.diagonal-fold {
  position: absolute;
  inset: 2rem;
  background: linear-gradient(132deg, transparent 49.7%, rgba(110, 31, 42, .78) 50%, transparent 50.4%);
}

.essay-fragment {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  width: min(28rem, 42vw);
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  line-height: 1;
  color: var(--aged-paper);
  font-style: italic;
}

.enclosure-diagram {
  border: 1px solid rgba(111, 138, 166, .28);
  background: rgba(14, 37, 69, .42);
  overflow: hidden;
}

.diagram-line { position: absolute; background: var(--faint-rule-blue); opacity: .7; }
.line-top, .line-bottom { height: 1px; left: 10%; right: 10%; }
.line-top { top: 18%; }
.line-bottom { bottom: 18%; }
.line-left, .line-right { width: 1px; top: 10%; bottom: 10%; }
.line-left { left: 18%; }
.line-right { right: 18%; }

.paper-gate {
  position: absolute;
  width: 48%;
  height: 42%;
  display: grid;
  place-items: center;
  color: var(--oxidized-ink);
  background: var(--aged-paper);
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: .15em;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.35);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.gate-one { left: 10%; top: 28%; transform: translateX(var(--gate-one, 0)) rotate(-1deg); }
.gate-two { right: 10%; top: 28%; transform: translateX(var(--gate-two, 0)) rotate(1deg); background: rgba(216,199,161,.78); }

.wax-seal,
.return-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.5rem;
  height: 7.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--seal-rotate, 0deg));
  background: var(--redaction-burgundy);
  color: var(--aged-paper);
  font-family: "Oswald", sans-serif;
  font-size: 4rem;
  box-shadow: 0 .9rem 2.2rem rgba(0,0,0,.32), inset 0 0 0 .45rem rgba(25, 32, 43, .18);
  transition: transform .3s linear;
}

.marginalia { position: absolute; bottom: 3rem; right: 4rem; color: var(--lamp-gold); font-style: italic; }
.seal-id { margin-top: 2rem; color: var(--redaction-burgundy); }

.witness-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 1px;
  background-image:
    linear-gradient(90deg, rgba(111,138,166,.35) 1px, transparent 1px),
    linear-gradient(180deg, rgba(111,138,166,.35) 1px, transparent 1px);
  background-size: 12.5% 16.66%;
  transform: translateY(var(--witness-shift, 0));
  transition: transform .25s linear;
}

.grid-slip {
  position: relative;
  padding: 1.3rem;
  color: var(--oxidized-ink);
  background: rgba(216, 199, 161, .9);
  border: 1px solid rgba(25, 32, 43, .2);
  box-shadow: 0 1rem 2.8rem rgba(0,0,0,.25);
}

.grid-slip b {
  display: block;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 3.8rem);
  line-height: .9;
}

.grid-slip span { display: block; margin-top: 1rem; font-style: italic; font-size: 1.25rem; }
.slip-one { grid-column: 2 / 6; grid-row: 1 / 3; }
.slip-two { grid-column: 4 / 8; grid-row: 3 / 5; transform: translateX(var(--slip-two, 0)); }
.slip-three { grid-column: 1 / 5; grid-row: 5 / 7; transform: translateX(var(--slip-three, 0)); background: #C6A45D; }

.counter-caption { position: absolute; right: 6rem; bottom: 4rem; color: var(--faint-rule-blue); }
.footnote-ladder { margin-top: 2rem; padding-left: 1rem; font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: rgba(216,199,161,.62); }

.sealed-field {
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(14,37,69,.55), rgba(7,20,38,.95));
  border: 1px solid rgba(111,138,166,.25);
}

.closed-folio {
  position: relative;
  width: min(33rem, 70vw);
  min-height: 22rem;
  padding: 3.5rem;
  display: grid;
  align-content: end;
  color: var(--oxidized-ink);
  background: linear-gradient(145deg, var(--aged-paper), #C6A45D);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.46);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}

.closed-folio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 49%, rgba(25,32,43,.22) 50%, transparent 51%);
}

.closed-folio p {
  position: relative;
  margin: 0 0 1.6rem;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: .9;
  font-weight: 600;
}

.folio-stamp { position: absolute; top: 1.5rem; left: 1.5rem; color: var(--redaction-burgundy); }

.seal-button {
  position: relative;
  width: max-content;
  border: 1px solid var(--redaction-burgundy);
  background: var(--redaction-burgundy);
  color: var(--aged-paper);
  padding: .85rem 1.3rem;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
}

.seal-button:hover { transform: translateY(-.2rem); background: var(--oxidized-ink); }
.sealed .closed-folio { transform: scale(.92) rotate(-2deg); filter: brightness(.82); }
.sealed .return-mark { --seal-rotate: -18deg; opacity: 1; }
.return-mark { opacity: .72; }

@keyframes redactionSweep {
  0% { transform: translateX(-22%) scaleX(.32); }
  48% { transform: translateX(4%) scaleX(.78); }
  100% { transform: translateX(17%) scaleX(1.06); }
}

@keyframes grainDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-2rem, 1.2rem,0); }
}

@media (max-width: 820px) {
  .spread { grid-template-columns: 1fr; }
  .public-margin { position: relative; min-height: 42vh; padding-left: 3.8rem; }
  .enclosed-page { min-height: 58vh; }
  .vertical-masthead { writing-mode: initial; transform: translate(-50%, -50%); font-size: clamp(3rem, 15vw, 7rem); }
  .persistent-hinge { left: 50%; opacity: .45; }
  .folio-nav { left: .45rem; }
  .paper-stack, .fold-table, .enclosure-diagram, .witness-grid, .sealed-field { width: 88vw; }
  .essay-fragment { position: relative; right: auto; bottom: auto; width: 80vw; }
}