:root {
  --intaglio-black: #07110E;
  --banknote-green: #123A2E;
  --oxidized-copper: #B56B3A;
  --watermark-ivory: #F3E8CF;
  --ultraviolet-violet: #8A63FF;
  --security-thread-cyan: #65F0D0;
  --red-proof-stamp: #B72D3A;
  --display: "Cormorant Garamond", Cormorant, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Instrument Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Space Mono", "SFMono-Regular", Consolas, monospace;
  --lora: Lora, Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--intaglio-black);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--watermark-ivory);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 22% 18%, rgba(138, 99, 255, .12), transparent 31vw),
    radial-gradient(circle at 76% 74%, rgba(101, 240, 208, .08), transparent 35vw),
    linear-gradient(135deg, #07110E 0%, #0a1712 40%, #123A2E 130%);
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    repeating-linear-gradient(97deg, rgba(243, 232, 207, .025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(4deg, rgba(181, 107, 58, .035) 0 1px, transparent 1px 13px);
  mix-blend-mode: screen;
  opacity: .55;
  transform: rotate(-2deg);
  z-index: 1;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .23;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(243,232,207,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 32%, rgba(181,107,58,.16) 0 1px, transparent 1.7px),
    radial-gradient(circle at 34% 76%, rgba(101,240,208,.13) 0 1px, transparent 1.4px);
  background-size: 31px 37px, 47px 41px, 53px 59px;
}

.uv-beam {
  --x: 50vw;
  --y: 50vh;
  position: fixed;
  left: calc(var(--x) - 19vw);
  top: calc(var(--y) - 48vh);
  width: 38vw;
  height: 96vh;
  z-index: 4;
  pointer-events: none;
  opacity: .44;
  transform: rotate(11deg);
  background: linear-gradient(90deg, transparent 0%, rgba(138, 99, 255, .02) 22%, rgba(101, 240, 208, .24) 49%, rgba(243, 232, 207, .12) 52%, rgba(138, 99, 255, .03) 72%, transparent 100%);
  filter: blur(1px);
  mix-blend-mode: screen;
}

.folio {
  position: relative;
  z-index: 3;
}

.plate-section {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(290px, 36rem) minmax(320px, 42rem) minmax(2rem, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: clamp(2rem, 5vw, 5rem) clamp(3rem, 7vw, 8rem);
  isolation: isolate;
  overflow: hidden;
}

.plate-section::before,
.plate-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.plate-section::before {
  inset: 8vh 7vw;
  border: 1px solid rgba(181, 107, 58, .32);
  transform: rotate(-1.7deg) translate3d(calc(var(--register, 0) * 7px), calc(var(--register, 0) * -5px), 0);
  box-shadow: inset 0 0 0 1px rgba(243, 232, 207, .08), 0 0 45px rgba(0,0,0,.36);
}

.plate-section::after {
  width: 45vw;
  height: 45vw;
  right: -18vw;
  top: 10vh;
  border-radius: 50%;
  background: repeating-conic-gradient(from 20deg, rgba(181,107,58,.12) 0deg 1deg, transparent 1deg 4deg);
  opacity: .28;
  animation: coinRim 58s linear infinite;
}

.chapter-meta {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  top: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--mono);
  color: rgba(243,232,207,.54);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.marginalia {
  position: relative;
  z-index: 5;
  max-width: 36rem;
  padding: 1.2rem 0;
}

.marginalia-left { grid-column: 2; }
.marginalia-right { grid-column: 3 / span 1; }
.compact { max-width: 30rem; }

.kicker {
  margin: 0 0 1rem;
  color: var(--security-thread-cyan);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .89;
  color: var(--watermark-ivory);
  text-shadow: 0 0 1px var(--oxidized-copper), 0 0 28px rgba(181,107,58,.14);
}

h1 {
  font-size: clamp(4.8rem, 13vw, 13.8rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--oxidized-copper);
  background: linear-gradient(105deg, #F3E8CF 0%, #B56B3A 45%, #F3E8CF 52%, #B56B3A 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

h2 { font-size: clamp(3.1rem, 7vw, 8rem); }

p {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: rgba(243, 232, 207, .75);
}

.proof-plate {
  position: relative;
  z-index: 4;
  grid-column: 3;
  width: min(42vw, 31rem);
  min-height: min(78vh, 48rem);
  justify-self: center;
  border: 1px solid rgba(181, 107, 58, .65);
  background:
    linear-gradient(135deg, rgba(243,232,207,.085), transparent 35%, rgba(101,240,208,.04) 55%, rgba(181,107,58,.11)),
    var(--banknote-green);
  box-shadow: 0 2rem 7rem rgba(0,0,0,.55), inset 0 0 0 1px rgba(243,232,207,.12), inset 0 0 4rem rgba(7,17,14,.74);
  transform: rotate(var(--tilt, -4deg)) translate3d(calc(var(--mx, 0) * var(--depth, 12px)), calc(var(--my, 0) * var(--depth, 12px)), 0);
  transition: transform .45s ease, filter .45s ease;
}

.is-active .proof-plate { filter: saturate(1.14) brightness(1.05); }
.proof-plate-hero { --tilt: -5.2deg; --depth: 16px; }
.watermark-plate { --tilt: 3deg; --depth: 10px; grid-column: 2; min-height: 70vh; }
.thread-plate { --tilt: -1.5deg; --depth: 14px; }
.issue-plate { --tilt: 1.2deg; width: min(55vw, 45rem); min-height: 68vh; }

.banknote-svg {
  width: 100%;
  height: auto;
  display: block;
  color: rgba(243,232,207,.65);
}

.note-paper { fill: rgba(18,58,46,.92); stroke: #B56B3A; stroke-width: 1.2; }
.note-border { fill: none; stroke: rgba(243,232,207,.48); stroke-width: 1.1; }
.note-border.fine { stroke: rgba(101,240,208,.35); stroke-dasharray: 2 7; }
.draw-line { fill: none; stroke: #B56B3A; stroke-width: 1.2; stroke-dasharray: 560; stroke-dashoffset: 560; animation: drawProof 4.5s ease forwards; }
.draw-line.delayed { animation-delay: .8s; }
.guilloche-field { fill: none; stroke: rgba(243,232,207,.48); stroke-width: .75; transform-box: fill-box; transform-origin: center; }
.rosette-a { animation: rosetteSpin 70s linear infinite; }
.rosette-b { stroke: rgba(101,240,208,.36); animation: rosetteSpinReverse 96s linear infinite; }
.wave-band { opacity: .15; }
.latent-glow { mix-blend-mode: screen; opacity: .75; }
.plate-word { font-family: var(--display); font-size: 76px; fill: rgba(243,232,207,.88); letter-spacing: .08em; }
.plate-script { font-family: var(--lora); font-size: 23px; fill: #B56B3A; font-style: italic; letter-spacing: .06em; }
.crop-marks path { fill: none; stroke: #B72D3A; stroke-width: 2; opacity: .75; }
.serial-microtext { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,232,207,.7); font-size: .66rem; }
.serial-numbers { font-family: var(--mono); }
svg .serial-microtext { fill: rgba(243,232,207,.62); font-size: 12px; }
.rotated { transform: rotate(90deg); transform-origin: 445px 636px; }
.serial-float { position: absolute; bottom: 12vh; left: 8vw; animation: microDrift 5s ease-in-out infinite alternate; }

.registration-hole {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(243,232,207,.56);
  border-radius: 50%;
  background: var(--intaglio-black);
  box-shadow: inset 0 0 10px rgba(0,0,0,.9), 0 0 18px rgba(101,240,208,.22);
}
.hole-one { left: 1rem; top: 50%; }
.hole-two { right: 1rem; top: 50%; }

.watermark-veil {
  position: absolute;
  inset: 7%;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(243,232,207,.28);
  background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%), rgba(243,232,207,.32), rgba(243,232,207,.06) 21%, transparent 42%);
}
.watermark-veil strong {
  font-family: var(--display);
  font-size: clamp(2rem, 4.8vw, 5.2rem);
  font-weight: 500;
  line-height: .9;
  color: rgba(243,232,207,.3);
  filter: blur(.15px);
}
.watermark-eye {
  position: absolute;
  width: 15rem;
  height: 7rem;
  border: 1px solid rgba(101,240,208,.48);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.watermark-eye::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4rem; height: 4rem;
  margin: -2rem;
  border-radius: 50%;
  border: 1px solid rgba(138,99,255,.5);
  background: radial-gradient(circle, rgba(101,240,208,.32), transparent 62%);
}
.architecture {
  position: absolute;
  bottom: 8%;
  left: 13%;
  right: 13%;
  height: 22%;
  opacity: .18;
  background: linear-gradient(to top, rgba(243,232,207,.5), rgba(243,232,207,.5)) bottom/100% 2px no-repeat;
}
.architecture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(243,232,207,.55) 8% 10%, transparent 10% 16%);
  clip-path: polygon(0 100%, 0 42%, 50% 0, 100% 42%, 100% 100%);
}
.css-rosette {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(181,107,58,.45);
  background: repeating-radial-gradient(ellipse at center, transparent 0 7px, rgba(243,232,207,.12) 8px 9px, transparent 10px 17px);
}
.css-rosette.one { width: 19rem; height: 19rem; left: -6rem; top: 8rem; animation: rosetteSpin 82s linear infinite; }
.css-rosette.two { width: 23rem; height: 23rem; right: -9rem; bottom: 4rem; animation: rosetteSpinReverse 99s linear infinite; }
.micro-wave { position: absolute; inset: 18%; background: repeating-linear-gradient(178deg, transparent 0 8px, rgba(101,240,208,.12) 9px, transparent 11px); opacity: .55; }

.vellum-strip {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1.8rem;
  display: grid;
  place-items: center;
  color: rgba(7,17,14,.52);
  background: linear-gradient(90deg, transparent, rgba(243,232,207,.42), transparent);
  mix-blend-mode: screen;
  opacity: .62;
}
.strip-a { top: 17%; transform: rotate(-5deg); }
.strip-b { bottom: 18%; transform: rotate(4deg); }

.security-thread {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 47%;
  width: 2.1rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(101,240,208,.1), #65F0D0 18%, #8A63FF 48%, #65F0D0 82%, rgba(101,240,208,.12));
  box-shadow: 0 0 26px rgba(101,240,208,.45), inset 0 0 15px rgba(255,255,255,.4);
  cursor: crosshair;
}
.security-thread span {
  position: absolute;
  writing-mode: vertical-rl;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--intaglio-black);
  opacity: .25;
  transition: opacity .3s ease;
}
.security-thread:hover span, .security-thread.is-lit span { opacity: .9; }
.foil-seal {
  position: absolute;
  width: 15rem;
  height: 15rem;
  right: 9%;
  top: 18%;
  border-radius: 50%;
  border: 1px solid rgba(243,232,207,.28);
  background: conic-gradient(from var(--foil, 0deg), #65F0D0, #8A63FF, #B56B3A, #F3E8CF, #65F0D0);
  mix-blend-mode: screen;
  animation: foilTurn 8s linear infinite;
  opacity: .74;
}
.foil-seal span {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(7,17,14,.72);
  background: repeating-conic-gradient(rgba(7,17,14,.45) 0 3deg, transparent 3deg 8deg);
}
.foil-seal em {
  position: absolute;
  bottom: -2.4rem;
  left: -1rem;
  right: -1rem;
  font-family: var(--mono);
  color: rgba(243,232,207,.65);
  text-align: center;
  font-size: .63rem;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.thread-lines { position: absolute; inset: 9%; border: 1px solid rgba(181,107,58,.4); background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(243,232,207,.07) 19px 20px); }
.punched-register {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(243,232,207,.44);
  background: radial-gradient(circle, var(--intaglio-black) 0 38%, rgba(101,240,208,.16) 39% 42%, transparent 43%);
  box-shadow: 0 0 22px rgba(101,240,208,.2);
}
.register-a { left: 12%; top: 12%; }
.register-b { right: 12%; bottom: 12%; }
.reveal-copy { position: absolute; left: 11vw; bottom: 11vh; color: var(--security-thread-cyan); opacity: 0; transform: translateY(1rem); transition: opacity .35s ease, transform .35s ease; }
.reveal-copy.is-visible { opacity: 1; transform: translateY(0); }

.ledger-board {
  grid-column: 2;
  position: relative;
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid rgba(181,107,58,.45);
  background: rgba(7,17,14,.52);
  box-shadow: inset 0 0 0 1px rgba(243,232,207,.08), 0 2rem 5rem rgba(0,0,0,.38);
  transform: rotate(-2deg) translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 8px), 0);
}
.minted-icon {
  width: 8rem;
  height: 10rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(101,240,208,.5);
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 35%, rgba(101,240,208,.22), transparent 42%), repeating-linear-gradient(135deg, transparent 0 8px, rgba(181,107,58,.13) 9px 10px);
  clip-path: polygon(50% 0, 82% 12%, 100% 44%, 84% 82%, 50% 100%, 16% 82%, 0 44%, 18% 12%);
}
.coordinate-ring {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  top: clamp(1rem, 3vw, 3rem);
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 1px solid rgba(181,107,58,.32);
  background: repeating-conic-gradient(from 4deg, rgba(101,240,208,.14) 0 1deg, transparent 1deg 9deg);
  opacity: .55;
  animation: rosetteSpinReverse 120s linear infinite;
}
.ledger-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.ledger-list li { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(181,107,58,.26); }
.ledger-list span { color: rgba(243,232,207,.54); }
.ledger-list b { color: var(--security-thread-cyan); font-weight: 400; }

.final-note {
  position: absolute;
  inset: 7%;
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid rgba(243,232,207,.33);
  background: radial-gradient(circle at 70% 24%, rgba(101,240,208,.18), transparent 20rem), rgba(18,58,46,.4);
  overflow: hidden;
}
.final-note h2 { max-width: 11ch; font-size: clamp(3rem, 6.5vw, 7.4rem); }
.final-note p { max-width: 34rem; margin-top: 2rem; }
.denomination {
  position: absolute;
  right: 3rem;
  top: 2rem;
  font-family: var(--display);
  font-size: clamp(5rem, 14vw, 14rem);
  line-height: 1;
  color: rgba(243,232,207,.1);
  -webkit-text-stroke: 1px rgba(181,107,58,.45);
}
.final-seal { right: 7%; bottom: 9%; top: auto; width: 12rem; height: 12rem; }
.issue-stamp {
  position: absolute;
  left: 9%;
  bottom: 10%;
  padding: 1rem 1.4rem;
  border: .28rem solid var(--red-proof-stamp);
  color: var(--red-proof-stamp);
  font-family: var(--mono);
  font-size: clamp(1.3rem, 3vw, 3.2rem);
  letter-spacing: .16em;
  line-height: .95;
  text-align: center;
  transform: rotate(-13deg) scale(1.6);
  opacity: 0;
}
.is-active .issue-stamp { animation: stampLand .48s cubic-bezier(.2, 1.7, .4, 1) .35s forwards; }
.closing-mark { position: absolute; right: 9vw; bottom: 8vh; color: rgba(243,232,207,.58); }

.intaglio-ruler {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  height: min(72vh, 38rem);
  width: 2.5rem;
  z-index: 20;
  transform: translateY(-50%);
  border-left: 1px solid rgba(181,107,58,.55);
  background: repeating-linear-gradient(180deg, rgba(243,232,207,.4) 0 1px, transparent 1px 8%, rgba(181,107,58,.55) 8% calc(8% + 1px), transparent calc(8% + 1px) 16%);
}
.intaglio-ruler a {
  position: absolute;
  right: .2rem;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243,232,207,.5);
  text-decoration: none;
  transition: color .25s ease;
}
.intaglio-ruler a:nth-of-type(1) { top: 4%; }
.intaglio-ruler a:nth-of-type(2) { top: 28%; }
.intaglio-ruler a:nth-of-type(3) { top: 52%; }
.intaglio-ruler a:nth-of-type(4) { top: 76%; }
.intaglio-ruler a:nth-of-type(5) { top: 96%; }
.intaglio-ruler a.is-current { color: var(--security-thread-cyan); }
.ruler-marker {
  position: absolute;
  left: -.34rem;
  top: var(--marker-top, 4%);
  width: .7rem;
  height: 2.7rem;
  border: 1px solid var(--red-proof-stamp);
  background: rgba(183,45,58,.18);
  transform: translateY(-50%);
  transition: top .55s cubic-bezier(.22,.8,.2,1);
  box-shadow: 0 0 16px rgba(183,45,58,.38);
}

@keyframes drawProof { to { stroke-dashoffset: 0; } }
@keyframes rosetteSpin { to { transform: rotate(360deg); } }
@keyframes rosetteSpinReverse { to { transform: rotate(-360deg); } }
@keyframes microDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(.6px,-.8px,0); } }
@keyframes foilTurn { to { --foil: 360deg; filter: hue-rotate(360deg); } }
@keyframes coinRim { to { transform: rotate(360deg); } }
@keyframes stampLand {
  0% { opacity: 0; transform: rotate(-13deg) scale(1.6); filter: blur(3px); }
  70% { opacity: 1; transform: rotate(-13deg) scale(.94); filter: blur(0); }
  100% { opacity: .9; transform: rotate(-13deg) scale(1); }
}

@media (max-width: 900px) {
  .plate-section {
    grid-template-columns: 1fr;
    padding: 5rem 1.4rem;
    gap: 2rem;
  }
  .marginalia-left, .marginalia-right, .proof-plate, .watermark-plate, .ledger-board { grid-column: 1; }
  .proof-plate, .issue-plate { width: min(88vw, 31rem); min-height: 62vh; }
  .intaglio-ruler { right: .35rem; opacity: .72; }
  h1 { font-size: clamp(4rem, 17vw, 7rem); }
  h2 { font-size: clamp(3rem, 12vw, 5rem); }
}