:root {
  /* compliance typography terms: fields. rather than dominant visual voice. from sparingly routing numbers Swiss clarity navigation labels */
  --parchment: #E8E0CF;
  --graphite: #24251F;
  --sage: #8B9679;
  --brass: #A68452;
  --vermilion: #A64236;
  --ivory: #F3EFE5;
  --blueblack: #1F2D33;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Source Sans 3", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --ease: cubic-bezier(.22, .61, .24, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--graphite);
  background: var(--parchment);
  font-family: var(--sans);
  overflow-x: hidden;
}

.grain, .grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.grain {
  opacity: .18;
  background-image: radial-gradient(circle at 20% 30%, rgba(36,37,31,.18) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 80%, rgba(166,132,82,.16) 0 1px, transparent 1.5px);
  background-size: 37px 41px, 53px 47px;
  mix-blend-mode: multiply;
}
.grid-overlay {
  opacity: .34;
  background-image: linear-gradient(rgba(36,37,31,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(36,37,31,.12) 1px, transparent 1px), linear-gradient(90deg, transparent calc(25% - 1px), rgba(36,37,31,.22) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), rgba(36,37,31,.22) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), rgba(36,37,31,.22) 75%, transparent calc(75% + 1px));
  background-size: 72px 72px, 72px 72px, 100% 100%;
}
.grid-overlay span { position: absolute; top: 18px; font: 10px/1 var(--mono); letter-spacing: .12em; color: var(--graphite); }
.grid-overlay span:first-child { left: 24px; }
.grid-overlay span:last-child { right: 24px; }

.fixed-index {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 10px;
  font: 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fixed-index a { color: var(--graphite); text-decoration: none; border-left: 2px solid rgba(36,37,31,.25); padding-left: 9px; transition: border-color .4s var(--ease), color .4s var(--ease); }
.fixed-index a.current { color: var(--vermilion); border-color: var(--vermilion); }

.plate {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
.plate::before { content: attr(data-plate); position: absolute; left: 4vw; bottom: 2vw; font-family: var(--serif); font-size: clamp(80px, 18vw, 260px); color: rgba(36,37,31,.055); letter-spacing: -.04em; z-index: -1; }
.kicker, .metadata-strip, .margin-notes, .ledger-strip span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.section-num, .plate-number { font-family: var(--serif); letter-spacing: -.015em; color: var(--brass); }

.masthead { display: grid; grid-template-columns: 1fr 180px; align-items: start; gap: 24px; border-top: 1px solid var(--graphite); padding-top: 18px; }
h1 { font: 700 clamp(42px, 8vw, 118px)/.92 var(--serif); letter-spacing: -.045em; margin: 8px 0 0; max-width: 920px; }
.kicker { margin: 0; font-size: 11px; }
.ledger-seal { justify-self: end; width: 132px; height: 132px; border: 1px solid var(--brass); border-radius: 50%; display: grid; place-items: center; color: var(--brass); transform: rotate(4deg); }
.ledger-seal span { font: 700 38px var(--serif); }
.ledger-seal small { font: 10px var(--mono); text-transform: uppercase; margin-top: -42px; }
.metadata-strip { display: flex; justify-content: space-between; gap: 18px; border-block: 1px solid rgba(36,37,31,.35); margin-top: 30px; padding: 10px 0; font-size: 10px; }
.bill-vector { position: absolute; right: -8vw; bottom: 2vh; width: min(72vw, 880px); color: var(--graphite); }
.bill-vector svg, .transaction-map svg, .clearing-route, .institutional-seal svg { width: 100%; height: auto; overflow: visible; }
svg rect, svg path, svg circle { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bill-vector svg { opacity: .66; transform: rotate(-6deg); }
.origin-copy { position: absolute; left: 8vw; bottom: 13vh; max-width: 390px; }
.origin-copy .section-num { font-size: 72px; display: block; }
.origin-copy p { font: 24px/1.24 var(--serif); letter-spacing: -.015em; }

.fragment { filter: blur(6px); opacity: .35; transition: filter .85s var(--ease), opacity .85s var(--ease), transform .85s var(--ease); }
.fragment.in-focus, .active-fragment .fragment { filter: blur(0); opacity: 1; }

.counterparty { display: grid; grid-template-columns: minmax(220px, 25vw) 1fr 130px; gap: 34px; align-items: center; }
.plate-number { position: absolute; top: 7vh; left: 5vw; font-size: 112px; opacity: .45; }
.definitions { padding-top: 140px; }
h2 { font: 700 clamp(34px, 5vw, 70px)/.95 var(--serif); letter-spacing: -.035em; margin: 0 0 28px; }
dl { margin: 0; }
dt { font: 600 12px var(--mono); text-transform: uppercase; color: var(--vermilion); margin-top: 24px; }
dd { margin: 6px 0 0; font-size: 18px; line-height: 1.35; }
.transaction-map { color: var(--graphite); background: rgba(243,239,229,.44); border: 1px solid rgba(36,37,31,.28); padding: 18px; }
.transaction-map rect:first-child { stroke: none; }
.transaction-map pattern path { stroke: rgba(36,37,31,.16); }
.map-route { stroke: var(--brass); stroke-width: 4; stroke-dasharray: 16 10; }
.transaction-map circle { fill: var(--brass); stroke: var(--ivory); stroke-width: 5; }
.map-doc { color: rgba(36,37,31,.66); }
.map-doc.sharp { color: var(--graphite); }
.margin-notes { align-self: stretch; border-left: 1px solid rgba(36,37,31,.3); padding-left: 18px; font-size: 10px; writing-mode: vertical-rl; }
.stamp { display: inline-block; color: var(--vermilion); border: 2px solid var(--vermilion); border-radius: 50%; padding: 16px 10px; font-family: var(--sans); transform: rotate(-9deg); }

.dark-plate { background: var(--blueblack); color: var(--ivory); }
.dark-plate::before { color: rgba(243,239,229,.05); }
.plate-intro { position: absolute; left: 7vw; top: 10vh; max-width: 420px; z-index: 2; }
.plate-intro .section-num { font-size: 82px; }
.plate-intro p { font-size: 19px; color: rgba(243,239,229,.78); }
.clearing-route { position: absolute; inset: 10vh 5vw auto; width: 90vw; color: var(--ivory); }
#routePath { stroke: var(--brass); stroke-width: 3; stroke-dasharray: 2350; stroke-dashoffset: 2350; transition: stroke-dashoffset .2s linear; }
.node circle { fill: var(--blueblack); stroke: var(--brass); stroke-width: 3; transition: fill .45s var(--ease), transform .45s var(--ease); }
.node text { fill: var(--ivory); stroke: none; font: 13px var(--mono); text-transform: uppercase; letter-spacing: .12em; opacity: .58; }
.node.active circle { fill: var(--brass); transform: scale(1.16); }
.node.active text { fill: var(--brass); opacity: 1; }
.loupe { position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(166,132,82,.55); background: radial-gradient(circle, rgba(243,239,229,.16), rgba(243,239,229,.03) 62%, transparent 63%); filter: blur(.2px); transform: translate(-50%, -50%); left: 8%; top: 14%; pointer-events: none; transition: left .2s linear, top .2s linear; }

.archive { background: linear-gradient(90deg, var(--parchment), var(--ivory)); }
.archive-title { display: flex; gap: 28px; align-items: baseline; }
.archive-title .section-num { font-size: 92px; }
.ledger-wall { position: relative; min-height: 68vh; margin-top: 24px; }
.ledger-strip { position: absolute; background: rgba(243,239,229,.76); border: 1px solid rgba(36,37,31,.35); border-left: 6px solid var(--sage); padding: 18px 24px; width: 42vw; min-height: 122px; box-shadow: 0 18px 50px rgba(36,37,31,.08); }
.ledger-strip:nth-child(1) { left: 7vw; top: 4vh; }
.ledger-strip.long { left: 24vw; top: 20vh; width: 58vw; border-left-color: var(--brass); }
.ledger-strip.offset { left: 12vw; top: 39vh; transform: rotate(-1.2deg); border-left-color: var(--vermilion); }
.ledger-strip.small { right: 8vw; top: 52vh; width: 30vw; }
.ledger-strip h3 { margin: 6px 0; font: 700 24px var(--serif); letter-spacing: -.02em; }
.ledger-strip p { margin: 0; max-width: 520px; line-height: 1.34; }
.slash-mark { color: var(--vermilion); text-transform: uppercase; font-family: var(--mono); position: relative; }
.slash-mark::after { content: ""; position: absolute; left: 0; top: 48%; width: 190px; height: 2px; background: var(--vermilion); transform-origin: left; transform: rotate(-12deg) scaleX(0); animation: slash 2.4s var(--ease) infinite; }

.final-seal { min-height: 100vh; background: var(--parchment); }
.negative-space { position: absolute; inset: 9vh 42vw 18vh 6vw; border-top: 1px solid rgba(36,37,31,.2); border-bottom: 1px solid rgba(36,37,31,.2); }
.final-copy { position: absolute; left: 8vw; top: 22vh; max-width: 480px; }
.final-copy .section-num { font-size: 84px; }
.principle { font: 34px/1.18 var(--serif); letter-spacing: -.025em; }
.institutional-seal { position: absolute; right: 10vw; bottom: 11vh; width: min(36vw, 360px); color: var(--vermilion); transform: rotate(-4deg); }
.institutional-seal.in-focus { transform: rotate(4deg); }
.institutional-seal text { fill: var(--vermilion); stroke: none; font: 700 20px var(--serif); letter-spacing: .05em; }

@keyframes slash { 0%, 35% { transform: rotate(-12deg) scaleX(0); } 65%, 100% { transform: rotate(-12deg) scaleX(1); } }

@media (max-width: 820px) {
  .fixed-index { display: none; }
  .masthead, .counterparty { grid-template-columns: 1fr; }
  .metadata-strip { flex-direction: column; }
  .bill-vector { width: 105vw; opacity: .42; }
  .margin-notes { writing-mode: horizontal-tb; border-left: 0; border-top: 1px solid rgba(36,37,31,.3); padding: 14px 0 0; }
  .ledger-strip, .ledger-strip.long, .ledger-strip.small { position: relative; left: auto; right: auto; top: auto; width: 100%; margin: 14px 0; }
  .clearing-route { top: 24vh; }
  .institutional-seal { width: 58vw; right: 8vw; }
}