/* ============================================================
   NOWILL — Prospectus № 01 · "The Ledger"
   Direction 1/5 — editorial press precision as a faked-3D
   continuous scroll journey through a paper world.
   ============================================================ */

:root {
  --paper: #F6F1E7;          /* sheet paper */
  --paper-bright: #FBF7EE;   /* the leaf itself */
  --paper-deep: #EDE6D5;     /* tints, hover */
  --paper-world: #EFE8D9;    /* the world behind the sheets */
  --ink: #1C1A16;
  --ink-muted: #6E6656;
  --hairline: #CDC4B0;
  --teal: #0FB5BA;
  --colophon: #141210;
  --colophon-text: #E9E2D2;
  --serif-display: "Fraunces", Georgia, serif;
  --serif-text: "Newsreader", Georgia, serif;
  --mono: "Spline Sans Mono", "Courier New", monospace;
  --leaf-w: min(1180px, 92vw);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--serif-text);
  font-optical-sizing: auto;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 252, 244, .9), rgba(255, 252, 244, 0) 60%),
    radial-gradient(130% 100% at 50% 100%, rgba(214, 203, 178, .55), rgba(214, 203, 178, 0) 55%),
    var(--paper-world);
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* printed grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
}

a { color: inherit; }

.skip {
  position: fixed; top: -4rem; left: 1rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip:focus { top: .5rem; }

/* ============================================================
   FIXED HUD (masthead)
   ============================================================ */
.hud {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  transition: background .5s, border-color .5s, color .5s;
}
.hud::before {
  /* double rule — press masthead */
  content: "";
  position: absolute; top: 5px; left: 0; right: 0;
  border-top: 2px solid var(--ink);
  transition: border-color .5s;
}
.hud__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: var(--leaf-w);
  margin: 0 auto;
  padding: .95rem 0 .55rem;
}
.hud__meta { color: var(--ink-muted); font-size: .62rem; transition: color .5s; }
.hud__meta--right { text-align: right; }
.hud__brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
}
.hud__mark--paper { display: none; }
.hud__wordmark {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: .34em;
  margin-right: -.34em;
  transform: translateY(1px);
}
.hud__nav {
  display: flex; gap: 0;
  border-top: 1px solid var(--hairline);
  width: var(--leaf-w);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  transition: border-color .5s;
}
.hud__nav::-webkit-scrollbar { display: none; }
/* safe centering — never clips the first item when overflowing */
.hud__nav a:first-child { margin-left: auto; }
.hud__nav a:last-child { margin-right: auto; }
.hud__nav a {
  font-family: var(--serif-text);
  font-size: .84rem;
  text-decoration: none;
  padding: .5rem 1.25rem;
  border-right: 1px solid var(--hairline);
  white-space: nowrap;
  transition: background .25s, border-color .5s;
}
.hud__nav a:first-child { border-left: 1px solid var(--hairline); }
.hud__nav a .mono { color: var(--teal); font-size: .6rem; margin-right: .3rem; }
.hud__nav a:hover { background: var(--paper-deep); }
.hud__nav a[aria-current="true"] { background: var(--paper-deep); box-shadow: inset 0 -2px 0 var(--ink); }
.hud__progress {
  height: 2px; background: transparent; overflow: hidden;
}
.hud__progress span {
  display: block; height: 100%; width: 0%;
  background: var(--ink);
  transition: background .5s;
}

/* HUD inverted on the ink colophon */
body.on-ink .hud {
  background: color-mix(in srgb, var(--colophon) 82%, transparent);
  border-color: rgba(233, 226, 210, .25);
  color: var(--colophon-text);
}
body.on-ink .hud::before { border-color: var(--colophon-text); }
body.on-ink .hud__meta { color: rgba(233, 226, 210, .6); }
body.on-ink .hud__nav { border-color: rgba(233, 226, 210, .25); }
body.on-ink .hud__nav a { border-color: rgba(233, 226, 210, .25); }
body.on-ink .hud__nav a:hover,
body.on-ink .hud__nav a[aria-current="true"] { background: rgba(233, 226, 210, .08); box-shadow: inset 0 -2px 0 var(--colophon-text); }
body.on-ink .hud__progress span { background: var(--teal); }
body.on-ink .hud__mark--ink { display: none; }
body.on-ink .hud__mark--paper { display: block; }

/* foot HUD — folio counter */
.hud-foot {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: space-between; align-items: flex-end;
  width: var(--leaf-w); margin: 0 auto;
  padding: 0 0 .8rem;
  pointer-events: none;
  color: var(--ink-muted);
  transition: color .5s;
}
.hud-foot p { font-size: .62rem; }
body.on-ink .hud-foot { color: rgba(233, 226, 210, .6); }

/* ============================================================
   THE WORLD — fixed camera stage
   ============================================================ */
.world { position: fixed; inset: 0; overflow: hidden; }
.scroll-track { position: relative; width: 1px; }

.bg { position: absolute; inset: 0; pointer-events: none; }

/* ghost folios — deepest layer */
.bg--ghost { z-index: 1; will-change: transform; }
.ghost {
  position: absolute;
  font-family: var(--serif-display);
  font-weight: 300;
  color: rgba(28, 26, 22, .066);
  filter: blur(1.5px);
  line-height: 1;
  user-select: none;
}
.ghost--a { font-size: 44vh; top: 6vh;  left: 4vw; }
.ghost--b { font-size: 60vh; top: 48vh; right: -4vw; font-style: italic; }
.ghost--c { font-size: 38vh; top: 120vh; left: 12vw; }
.ghost--d { font-size: 18vh; top: 165vh; right: 8vw; letter-spacing: .1em; }
.ghost--e { font-size: 52vh; top: 205vh; left: -2vw; font-style: italic; }
.ghost--f { font-size: 30vh; top: 262vh; right: 20vw; }

/* ruled ledger floor in perspective */
.bg--floorbox { z-index: 2; perspective: 640px; perspective-origin: 50% 38%; }
.floor {
  position: absolute;
  left: -70vw; right: -70vw;
  top: 52%; height: 190vh;
  transform: rotateX(76deg);
  transform-origin: top center;
  overflow: hidden;
  opacity: .85;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.floor__lines {
  position: absolute; left: 0; right: 0; top: -192px; bottom: -192px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(110, 102, 86, .38) 0, rgba(110, 102, 86, .38) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(to right,
      rgba(110, 102, 86, .22) 0, rgba(110, 102, 86, .22) 1px, transparent 1px, transparent 240px);
  will-change: transform;
}

/* streaming paper fragments */
.bg--frag { z-index: 30; }
.frag {
  position: absolute; left: 50%; top: 50%;
  will-change: transform, opacity, filter;
  user-select: none;
}
.frag__chip {
  display: inline-block;
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px rgba(28, 26, 22, .18);
  padding: .6rem 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.frag__chip--folio { font-style: normal; }
.frag__dot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 10px 22px rgba(15, 181, 186, .35);
}
.frag__stamp {
  display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  border: 1.5px dashed var(--ink-muted);
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transform: rotate(-12deg);
  text-align: center;
  line-height: 1.7;
}

/* fog + vignette */
.fog { position: absolute; inset: 0; pointer-events: none; }
.fog--vignette {
  z-index: 40;
  background:
    radial-gradient(115% 100% at 50% 50%, transparent 62%, rgba(214, 203, 178, .5) 100%);
}
.fog--ink {
  z-index: 41;
  opacity: 0;
  background: radial-gradient(120% 120% at 50% 60%, rgba(20, 18, 16, .92), rgba(20, 18, 16, .98));
  will-change: opacity;
}

/* ============================================================
   PLANES (depth leaves)
   ============================================================ */
.plane {
  position: absolute; inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.plane.is-focus { pointer-events: auto; }

.leaf {
  width: var(--leaf-w);
  max-height: min(78vh, 820px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 120px),
    var(--paper-bright);
  border: 1px solid var(--hairline);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .7) inset,
    0 30px 80px rgba(28, 26, 22, .16),
    0 6px 18px rgba(28, 26, 22, .08);
  padding: clamp(1.4rem, 3.2vw, 3rem) clamp(1.2rem, 3.4vw, 3.4rem);
}

/* build-on-approach beats — --t is set per plane by JS (0→1) */
.plane [data-beat] {
  --q: clamp(0, (var(--t, 1) - var(--b, 0) * 0.13) / 0.32, 1);
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 18px));
}
.plane .leaf__title[data-beat],
.plane .cover__title[data-beat] {
  clip-path: inset(-8% 0 calc((1 - var(--q)) * 104%) 0);
}

/* running heads */
.leaf__head {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .6rem;
  margin-bottom: clamp(1rem, 2.4vh, 1.8rem);
}
.leaf__head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--ink);
  transform: scaleX(var(--q, 1));
  transform-origin: left center;
}
.running-head { color: var(--ink); }
.running-head::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  margin-right: .55rem;
  transform: translateY(.5px);
}
.running-folio { color: var(--ink-muted); }

.leaf__title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: clamp(.9rem, 2.2vh, 1.6rem);
}
.leaf__title em { font-style: italic; font-weight: 300; }
.leaf__title--sm { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }

/* ============================================================
   PLANE 0 — COVER
   ============================================================ */
.leaf--cover { text-align: center; position: relative; }
.cover__rules {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 7px;
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
}
.kicker {
  color: var(--ink-muted);
  margin-bottom: clamp(1rem, 2.6vh, 2rem);
}
.kicker::before, .kicker::after {
  content: "·";
  color: var(--teal);
  margin: 0 .7rem;
}
.cover__title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 18ch;
  margin: 0 auto clamp(1.1rem, 2.8vh, 2rem);
}
.cover__title em { font-style: italic; font-weight: 300; }
.cover__deck {
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-style: italic;
  color: var(--ink-muted);
  max-width: 58ch;
  margin: 0 auto clamp(1.4rem, 3.4vh, 2.6rem);
}
.cover__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  color: var(--ink-muted);
}
.cover__foot p { font-size: .6rem; }
.cover__scroll { color: var(--ink); animation: nudge 2.6s var(--ease-out) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ============================================================
   PLANE 1 — POSITION
   ============================================================ */
.position__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  font-size: clamp(.95rem, 1.25vw, 1.08rem);
  margin-bottom: clamp(1.1rem, 2.6vh, 1.9rem);
}
.position__columns p + p { border-left: 1px solid var(--hairline); padding-left: clamp(1.2rem, 3vw, 2.6rem); }
.has-dropcap::first-letter {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 3.4em;
  float: left;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--ink);
}
.pull-quote {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(.9rem, 2.2vh, 1.4rem) 0;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.pull-quote blockquote {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.25;
}
.pull-quote figcaption { color: var(--ink-muted); font-size: .6rem; }

/* ============================================================
   PLANES 2–3 — THE CATALOGUE (ledger)
   ============================================================ */
.ledger { display: block; }
.ledger__head {
  display: grid;
  grid-template-columns: 3.4rem 15rem 1fr 8.4rem;
  gap: 1.2rem;
  padding: .45rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--ink-muted);
}
.ledger__head span { font-size: .6rem; }
.ledger__rate-head { text-align: right; }
.ledger__row {
  display: grid;
  grid-template-columns: 3.4rem 15rem 1fr 8.4rem;
  gap: 1.2rem;
  align-items: baseline;
  padding: clamp(.55rem, 1.3vh, .85rem) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background .22s, padding-left .22s;
}
.ledger__row:hover, .ledger__row:focus-visible {
  background: var(--paper-deep);
  padding-left: .6rem;
  padding-right: .6rem;
  margin-right: -.6rem;
  margin-left: -.6rem;
}
.ledger__no { color: var(--ink-muted); font-size: .78rem; transition: color .22s; }
.ledger__row:hover .ledger__no, .ledger__row:focus-visible .ledger__no { color: var(--teal); }
.ledger__name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.15;
}
.ledger__paren { font-weight: 300; font-style: italic; font-size: .82em; color: var(--ink-muted); white-space: nowrap; }
.ledger__desc { font-size: clamp(.85rem, 1.05vw, .95rem); color: var(--ink-muted); }
.ledger__rate { text-align: right; font-size: .64rem; color: var(--ink-muted); text-transform: lowercase; letter-spacing: .08em; }
.ledger__foot {
  padding-top: .9rem;
  color: var(--ink-muted);
  font-size: .62rem;
}
.ledger__foot a { color: var(--ink); text-decoration-color: var(--teal); text-underline-offset: 3px; }

/* ============================================================
   PLANE 4 — PRINCIPLES (notes to the accounts)
   ============================================================ */
.principles {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.6fr;
  gap: clamp(1.4rem, 3.4vw, 3rem);
  align-items: start;
}
.principles__lede {
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  margin-bottom: 1.4rem;
}
.seal { position: relative; width: 120px; height: 120px; }
.seal__ring { width: 100%; height: 100%; animation: seal-spin 60s linear infinite; }
.seal__text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  fill: var(--ink-muted);
}
.seal__inner-ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.seal__mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

.notes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--hairline);
}
.note {
  padding: clamp(.9rem, 2vh, 1.4rem) clamp(.9rem, 1.8vw, 1.4rem);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.note__no { color: var(--teal); font-size: .6rem; margin-bottom: .5rem; }
.note__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  margin-bottom: .45rem;
}
.note__body { font-size: clamp(.85rem, 1.05vw, .95rem); color: var(--ink-muted); }

/* ============================================================
   PLANE 5 — METHOD
   ============================================================ */
.method {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.method__step {
  padding: clamp(1rem, 2.4vh, 1.6rem) clamp(.9rem, 1.6vw, 1.5rem) 0 0;
  border-right: 1px solid var(--hairline);
  padding-left: clamp(.9rem, 1.6vw, 1.5rem);
}
.method__step:first-child { padding-left: 0; }
.method__step:last-child { border-right: 0; }
.method__no { color: var(--teal); font-size: .6rem; margin-bottom: .6rem; }
.method__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  margin-bottom: .5rem;
}
.method__body { font-size: clamp(.85rem, 1.05vw, .95rem); color: var(--ink-muted); }

/* ============================================================
   PLANE 6 — CORRESPONDENCE
   ============================================================ */
.correspondence {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.4rem, 3.6vw, 3.2rem);
  align-items: center;
}
.correspondence__deck {
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(.95rem, 1.3vw, 1.12rem);
  max-width: 44ch;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.correspondence__mail {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  letter-spacing: -.01em;
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: .18em;
  transition: border-color .25s, color .25s;
  white-space: nowrap;
}
.correspondence__mail:hover { color: var(--teal); border-color: var(--ink); }

.coupon { position: relative; }
.coupon__cut {
  color: var(--ink-muted);
  font-size: .68rem;
  letter-spacing: .28em;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: .4rem;
}
.coupon__body {
  border: 1.5px dashed var(--ink-muted);
  padding: clamp(1rem, 2.2vh, 1.5rem);
  background: var(--paper);
}
.coupon__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: .9rem;
}
.coupon__field {
  display: flex; align-items: baseline; gap: .7rem;
  margin-bottom: .85rem;
}
.coupon__field .mono { font-size: .58rem; color: var(--ink-muted); flex: none; }
.coupon__line { flex: 1; border-bottom: 1px solid var(--ink-muted); height: 1em; }
.coupon__note { margin-top: .7rem; color: var(--ink-muted); font-size: .54rem; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .78rem 1.4rem;
  border: 1px solid var(--ink);
  transition: background .25s, color .25s;
}
.btn--ink { background: var(--ink); color: var(--paper-bright); }
.btn--ink:hover { background: transparent; color: var(--ink); }

/* ============================================================
   PLANE 7 — COLOPHON (ink)
   ============================================================ */
.leaf--ink {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 120px), var(--colophon);
  border-color: rgba(233, 226, 210, .2);
  color: var(--colophon-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.colophon__brand {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid rgba(233, 226, 210, .2);
  padding-bottom: clamp(1rem, 2.4vh, 1.6rem);
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
.colophon__wordmark {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .3em;
}
.colophon__tag {
  margin-left: auto;
  text-align: right;
  font-style: italic;
  font-size: .88rem;
  color: rgba(233, 226, 210, .65);
}
.colophon__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.3fr;
  gap: clamp(1.4rem, 3.4vw, 3rem);
}
.colophon__col h3 {
  color: rgba(233, 226, 210, .5);
  font-size: .6rem;
  margin-bottom: .9rem;
  font-weight: 400;
}
.colophon__col a {
  display: block;
  text-decoration: none;
  font-size: .92rem;
  padding: .22rem 0;
  color: var(--colophon-text);
  transition: color .2s, padding-left .2s;
}
.colophon__col a:hover { color: var(--teal); padding-left: .3rem; }
.colophon__register {
  list-style: none;
  columns: 2;
  gap: 1.6rem;
  font-size: .58rem;
  line-height: 2.1;
  color: rgba(233, 226, 210, .65);
  text-transform: none;
  letter-spacing: .1em;
}
.colophon__imprint p { font-size: .92rem; color: rgba(233, 226, 210, .8); }
.colophon__mail {
  display: inline-block;
  font-family: var(--serif-display);
  font-size: 1.3rem;
  margin: .8rem 0;
  text-decoration: none;
  border-bottom: 1.5px solid var(--teal);
  padding-bottom: .12em;
}
.colophon__mail:hover { color: var(--teal); }
.colophon__legal { font-size: .54rem; color: rgba(233, 226, 210, .45); margin-top: .6rem; line-height: 1.9; }

/* ============================================================
   FLAT MODE — reduced motion / no-JS: the printed document
   ============================================================ */
html.flat .world { position: static; overflow: visible; height: auto; }
html.flat .plane {
  position: static;
  pointer-events: auto;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  padding: 4.5rem 0 0;
}
html.flat .plane:first-of-type { padding-top: 8rem; }
html.flat .plane:last-of-type { padding-bottom: 5rem; }
html.flat .plane [data-beat] { opacity: 1 !important; transform: none !important; clip-path: none !important; --q: 1; }
html.flat .bg, html.flat .fog, html.flat .hud-foot { display: none; }
html.flat .scroll-track { display: none; }
html.flat .leaf { max-height: none; }
html.flat .cover__scroll { display: none; }

@media (prefers-reduced-motion: reduce) {
  .seal__ring { animation: none; }
  .cover__scroll { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .ledger__head { grid-template-columns: 2.6rem 1fr 6.4rem; }
  .ledger__desc-head { display: none; }
  .ledger__row {
    grid-template-columns: 2.6rem 1fr 6.4rem;
    grid-template-areas: "no name rate" "no desc rate";
    row-gap: .2rem;
  }
  .ledger__no { grid-area: no; }
  .ledger__name { grid-area: name; }
  .ledger__desc { grid-area: desc; }
  .ledger__rate { grid-area: rate; }
  .method { grid-template-columns: 1fr 1fr; }
  .method__step { padding-left: clamp(.9rem, 1.6vw, 1.5rem); }
  .method__step:nth-child(odd) { padding-left: 0; }
  .method__step:nth-child(even) { border-right: 0; }
  .method__step { border-bottom: 1px solid var(--hairline); padding-bottom: 1rem; }
  .principles { grid-template-columns: 1fr; }
  .principles__aside { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
  .principles__aside .leaf__title--sm { grid-column: 1; }
  .principles__lede { grid-column: 1; margin-bottom: 0; }
  .seal { grid-column: 2; grid-row: 1 / span 2; width: 100px; height: 100px; }
  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__imprint { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --leaf-w: 94vw; }
  .mono { font-size: .62rem; }
  .hud__bar { grid-template-columns: 1fr auto; padding: .7rem 0 .45rem; }
  .hud__meta { display: none; }
  .hud__meta--right { display: block; text-align: right; font-size: .55rem; }
  .hud__wordmark { font-size: 1.05rem; }
  .hud__nav a { padding: .45rem .8rem; font-size: .78rem; }
  .leaf { padding: .95rem .9rem; max-height: min(80vh, 690px); }
  .leaf__head { flex-direction: column; gap: .1rem; margin-bottom: .7rem; padding-bottom: .4rem; }
  .running-folio { display: none; }
  .leaf__title { margin-bottom: .7rem; }
  .leaf__title--sm { font-size: 1.32rem; }
  .cover__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .cover__deck { font-size: .92rem; }
  .cover__foot p:last-child { display: none; }
  .position__columns { grid-template-columns: 1fr; gap: .8rem; font-size: .88rem; }
  .position__columns p + p { border-left: 0; padding-left: 0; }
  .pull-quote blockquote { font-size: 1.05rem; }
  .ledger__head { grid-template-columns: 1.8rem 1fr 4.6rem; gap: .6rem; padding: .3rem 0; }
  .ledger__row { grid-template-columns: 1.8rem 1fr 4.6rem; gap: .6rem; padding: .42rem 0; row-gap: .1rem; }
  .ledger__no { font-size: .66rem; }
  .ledger__name { font-size: .88rem; }
  .ledger__desc { font-size: .72rem; line-height: 1.4; }
  .ledger__rate { font-size: .52rem; }
  .ledger__paren { font-size: .78em; white-space: normal; }
  .ledger__foot { padding-top: .55rem; font-size: .54rem; }
  .notes { grid-template-columns: 1fr; }
  .note { padding: .7rem .8rem; }
  .note__body { font-size: .8rem; }
  .method { grid-template-columns: 1fr; }
  .method__step { border-right: 0; padding-left: 0; padding-top: .8rem; padding-bottom: .8rem; }
  .method__body { font-size: .8rem; }
  .correspondence { grid-template-columns: 1fr; gap: 1.2rem; }
  .correspondence__mail { font-size: clamp(1.3rem, 7vw, 1.7rem); }
  .coupon__body { padding: .9rem; }
  .colophon__brand { flex-wrap: wrap; gap: .7rem; }
  .colophon__tag { margin-left: 0; text-align: left; font-size: .78rem; }
  .colophon__grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .colophon__register { columns: 2; }
  .hud-foot { padding-bottom: .55rem; }
  .hud-foot p { font-size: .55rem; }
}