/* Looper — marketing + legal surface. Fingerprint "the yardage book".
   Tokens (palette, type scale, .spiral, .ruled, .annot, .btn, .num) live in
   static/brand/tokens.css and are NOT repeated here. This file is the book:
   the spread, the binding, the pages, and the way a page turns. */

/* ── skeleton ─────────────────────────────────────────────────────────────── */

.wrap { width: min(1180px, calc(100% - 2 * var(--space-5))); margin-inline: auto; }

.skip {
  position: absolute; left: var(--space-4); top: -100vh; z-index: 50;
  background: var(--flag); color: var(--chalk); padding: 0.7em 1.1em;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: var(--radius-1); text-decoration: none;
}
.skip:focus { top: var(--space-4); color: var(--chalk); }

/* ── masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  width: min(1180px, calc(100% - 2 * var(--space-5)));
  margin-inline: auto; padding: var(--space-4) 0 var(--space-3);
  border-bottom: 2px solid var(--pencil);
}
.wordmark { display: inline-flex; color: var(--field); text-decoration: none; }
.wordmark:hover { color: var(--field); }
.wordmark svg { display: block; height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nav a {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: var(--step--1); text-decoration: none;
  color: var(--pencil); padding: 0.3em 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--field); border-bottom-color: var(--flag); }
.nav-dot { color: var(--pencil-3); }
.nav-signin { margin-left: var(--space-2); }
.nav .nav-cta { color: var(--chalk); border-bottom: 0; padding: 0.6em 1.1em; font-size: var(--step--1); }
.nav .nav-cta:hover { color: var(--chalk); border-bottom: 0; }

/* ── the spread: two pages and a binding ──────────────────────────────────── */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: stretch;
  width: min(1240px, calc(100% - 2 * var(--space-5)));
  margin-inline: auto;
}
.spread-3 { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); }
.spread-doc { grid-template-columns: minmax(0, 0.62fr) 40px minmax(0, 1fr); }

.page {
  position: relative;
  background-color: var(--chalk);
  background-position: 0 var(--space-6);
  border: 1px solid var(--chalk-3);
  box-shadow: var(--shadow-page);
  padding: var(--space-6) var(--space-5) var(--space-7);
  min-width: 0;
}
.page-left  { border-right: 0; border-radius: var(--radius-2) 0 0 var(--radius-2); }
.page-right { border-left: 0;  border-radius: 0 var(--radius-2) var(--radius-2) 0; }
.spread > .page:first-child  { border-radius: var(--radius-2) 0 0 var(--radius-2); border-right: 0; }
.spread > .page:last-child   { border-radius: 0 var(--radius-2) var(--radius-2) 0; border-left: 0; }
.spread-3 > .page:not(:first-child):not(:last-child) { border-left: 0; border-right: 0; border-radius: 0; }

/* the page's own curl into the binding */
.page::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22px; pointer-events: none;
}
.spread > .page:first-child::after {
  right: 0; background: linear-gradient(90deg, transparent, rgba(58, 58, 54, 0.09));
}
.spread > .page:last-child::after {
  left: 0; background: linear-gradient(270deg, transparent, rgba(58, 58, 54, 0.09));
}

/* the tab printed at the head of every page */
.page-tab {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.18em; color: var(--pencil-3); text-transform: uppercase;
}
.page-tab::after {
  content: ""; display: block; margin-top: var(--space-2);
  height: 2px; background: var(--pencil); width: 46px;
}

/* the binding: wire rings down the gutter */
.gutter {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
  padding: var(--space-6) 0;
  background: linear-gradient(90deg,
    rgba(58, 58, 54, 0.10) 0 2px, var(--chalk-3) 2px calc(100% - 2px), rgba(58, 58, 54, 0.10) calc(100% - 2px) 100%);
}
.gutter span {
  display: block; width: calc(100% + 12px); height: 15px;
  border: 2px solid var(--pencil-3); border-radius: 9px;
  background: linear-gradient(180deg, #fff 0 40%, var(--chalk-3) 100%);
  box-shadow: inset 0 -1px 0 rgba(58, 58, 54, 0.25);
}

/* ── the page turn: the hero opens like a book ────────────────────────────── */

@keyframes page-turn-left {
  from { transform: perspective(2200px) rotateY(9deg); transform-origin: right center; opacity: 0; }
  to   { transform: perspective(2200px) rotateY(0deg); transform-origin: right center; opacity: 1; }
}
@keyframes page-turn-right {
  from { transform: perspective(2200px) rotateY(-11deg); transform-origin: left center; opacity: 0; }
  to   { transform: perspective(2200px) rotateY(0deg); transform-origin: left center; opacity: 1; }
}
@keyframes rings-in {
  from { opacity: 0; transform: scaleX(0.4); }
  to   { opacity: 1; transform: scaleX(1); }
}
.page-turn > .page:first-child {
  animation: page-turn-left var(--dur-slow) var(--ease-page) both;
}
.page-turn > .page:last-child {
  animation: page-turn-right var(--dur-slow) var(--ease-page) both;
  animation-delay: 90ms;
}
.page-turn > .gutter span { animation: rings-in var(--dur) var(--ease-out) both; }
.page-turn > .gutter span:nth-child(2) { animation-delay: 40ms; }
.page-turn > .gutter span:nth-child(3) { animation-delay: 80ms; }
.page-turn > .gutter span:nth-child(4) { animation-delay: 120ms; }
.page-turn > .gutter span:nth-child(5) { animation-delay: 160ms; }
.page-turn > .gutter span:nth-child(6) { animation-delay: 200ms; }
.page-turn > .gutter span:nth-child(7) { animation-delay: 240ms; }
.page-turn > .gutter span:nth-child(8) { animation-delay: 280ms; }
.page-turn > .gutter span:nth-child(9) { animation-delay: 320ms; }
.page-turn > .gutter span:nth-child(10) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .page-turn > .page:first-child,
  .page-turn > .page:last-child,
  .page-turn > .gutter span {
    animation: none; opacity: 1; transform: none;
  }
}

/* ── the hero ─────────────────────────────────────────────────────────────── */

.hero { padding: var(--space-7) 0 var(--space-8); }
.hole { display: block; width: 100%; height: auto; }

/* diagram lettering — mono for measured numbers, Caveat for the pencilled ones */
.dia-mono { font-family: var(--font-mono); font-weight: 700; fill: var(--pencil-2); }
.dia-annot, .dia-annot text {
  font-family: "Caveat", var(--font-body); fill: var(--pencil-2);
}
.pencil-line { opacity: 0.85; }

.hero-h { margin: var(--space-3) 0 var(--space-5); color: var(--field); }
.numbers { border-block: 2px solid var(--pencil); padding: var(--space-4) 0 var(--space-3); margin-bottom: var(--space-5); }
.numbers-row { display: flex; align-items: flex-end; gap: var(--space-5); }
.numbers-cell { display: flex; flex-direction: column; gap: 2px; }
.numbers-cell .num { font-size: var(--step-2); font-weight: 700; color: var(--pencil-2); line-height: 1; }
.numbers-cell-lead .num { font-size: var(--step-3); color: var(--field); }
.numbers-key {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--step--1); color: var(--pencil-3);
}
.numbers-note { margin-top: var(--space-3); }

.george { margin: 0 0 var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--flag); }
.george p { font-size: var(--step-1); font-style: italic; margin: 0 0 var(--space-3); max-width: 40ch; }
.george cite {
  font-style: normal; font-size: var(--step--1); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pencil-3);
}

.hero-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hero-cta-alt { font-size: var(--step--1); }
.hero-fine { margin-top: var(--space-4); font-size: var(--step--1); color: var(--pencil-2); }

/* ── generic section furniture ────────────────────────────────────────────── */

section > .wrap { padding-block: var(--space-8); }
.lede { font-size: var(--step-1); color: var(--pencil-2); max-width: 54ch; }
h2 + .lede, .eyebrow + h2 { margin-top: var(--space-4); }
.eyebrow { display: block; margin-bottom: var(--space-3); }
.ruled { background-position: 0 var(--space-6); }

/* ── what George says ─────────────────────────────────────────────────────── */

.says { border-top: 2px solid var(--pencil); background-color: var(--chalk-2); }
.calls { list-style: none; margin: var(--space-6) 0 0; padding: 0; counter-reset: call; }
.call {
  display: grid; grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: var(--space-5); padding: var(--space-5) 0; border-top: var(--rule);
}
.call:last-child { border-bottom: var(--rule); }
.call-when {
  margin: 0; font-weight: 700; font-size: var(--step--1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--flag);
}
.call blockquote { margin: 0; }
.call blockquote p {
  margin: 0; font-family: "Caveat", var(--font-body);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.4;
  color: var(--pencil); max-width: 60ch;
}
.says-note { margin-top: var(--space-5); }

/* ── how it works ─────────────────────────────────────────────────────────── */

.how { background: var(--field); color: var(--chalk); }
.how h2, .how h3 { color: var(--chalk); }
.how .eyebrow { color: rgba(243, 241, 231, 0.66); }
.steps { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5);
  padding: var(--space-5) 0; border-top: var(--rule-field); align-items: start;
}
.step:last-child { border-bottom: var(--rule-field); }
.step-n { font-size: var(--step-3); font-weight: 700; color: var(--flag); line-height: 0.9; }
.step h3 { margin-bottom: var(--space-3); }
.step p { color: rgba(243, 241, 231, 0.82); margin: 0; }

/* ── kit / definition rows (also used on pricing small print) ─────────────── */

.kit { border-top: 2px solid var(--pencil); }
.kit-list { margin: var(--space-6) 0 0; }
.kit-row {
  display: grid; grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
  gap: var(--space-5); padding: var(--space-4) 0; border-top: var(--rule);
}
.kit-row:last-child { border-bottom: var(--rule); }
.kit-row dt {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--step-1); color: var(--field);
}
.kit-row dd { margin: 0; color: var(--pencil-2); }

/* ── tagger ───────────────────────────────────────────────────────────────── */

.tagger { border-top: 2px solid var(--pencil); }
.tagger-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.72fr); gap: var(--space-7); align-items: start; }
.tagger-fig { margin: 0; background: var(--chalk-2); border: var(--rule); border-radius: var(--radius-2); padding: var(--space-5); }
.tagger-fig svg { display: block; width: 100%; height: auto; }
.tagger-fig figcaption {
  margin-top: var(--space-3); text-align: center; font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--pencil-3);
}
.tag-chip {
  display: inline-block; font-size: 0.82em; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--pencil-3); border-radius: var(--radius-1);
  padding: 0.1em 0.5em; color: var(--pencil-2); white-space: nowrap;
}

/* ── pricing teaser (landing) ─────────────────────────────────────────────── */

.teaser { background: var(--field); color: var(--chalk); }
.teaser h2 { color: var(--chalk); }
.teaser .eyebrow { color: rgba(243, 241, 231, 0.66); }
.teaser-rows { margin: var(--space-6) 0; }
.teaser-row {
  display: grid; grid-template-columns: 140px 190px minmax(0, 1fr); gap: var(--space-5);
  align-items: baseline; padding: var(--space-4) 0; border-top: var(--rule-field);
}
.teaser-row:last-child { border-bottom: var(--rule-field); }
.teaser-tier {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--step-1);
}
.teaser-price { margin: 0; font-size: var(--step-2); font-weight: 700; color: var(--chalk); }
.teaser-row-lead .teaser-price { color: var(--flag); }
.teaser-per { font-family: var(--font-body); font-size: var(--step--1); color: rgba(243, 241, 231, 0.66); }
.teaser-what { margin: 0; color: rgba(243, 241, 231, 0.82); max-width: 58ch; }
.teaser .btn { border-color: var(--chalk); color: var(--chalk); }
.teaser .btn:hover { background: var(--chalk); color: var(--field); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq { border-top: 2px solid var(--pencil); background-color: var(--chalk-2); }
.faq-list { margin-top: var(--space-6); border-top: var(--rule); }
.qa { border-bottom: var(--rule); }
.qa > summary {
  list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6) var(--space-4) 0;
  position: relative;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: var(--step-1); color: var(--field);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--step-1); color: var(--flag);
  transition: transform var(--dur-fast) var(--ease-out);
}
.qa[open] > summary::after { content: "\2212"; }
.qa > summary:hover { color: var(--flag); }
.qa-body { padding: 0 0 var(--space-5); }
.qa-body p { margin-top: 0; color: var(--pencil-2); }
.qa-body p + p { margin-top: var(--space-3); }

/* ── closer ───────────────────────────────────────────────────────────────── */

.closer { background: var(--field); color: var(--chalk); }
.closer-inner { padding-block: var(--space-9); }
.closer-h { color: var(--chalk); font-size: var(--step-4); max-width: 14ch; }
.closer-p { color: rgba(243, 241, 231, 0.82); margin: var(--space-5) 0 var(--space-6); }
.closer-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: 0; }
.closer-alt { font-size: var(--step--1); color: rgba(243, 241, 231, 0.8); }
.closer-note { margin-top: var(--space-5); color: rgba(243, 241, 231, 0.7); }

/* ── pricing page ─────────────────────────────────────────────────────────── */

.pricing-head > .wrap { padding: var(--space-7) 0 var(--space-6); }
.pricing-h { color: var(--field); font-size: var(--step-3); margin-bottom: var(--space-4); }

.toggle { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.toggle-btn {
  appearance: none; cursor: pointer; background: transparent; color: var(--pencil-2);
  border: 1.5px solid var(--chalk-3); border-radius: var(--radius-1);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: var(--step--1); padding: 0.7em 1.3em;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.toggle-btn:hover { border-color: var(--pencil); color: var(--pencil); }
.toggle-btn.is-on { background: var(--field); border-color: var(--field); color: var(--chalk); }
.toggle-note { margin-left: var(--space-2); }

.tiers { padding-bottom: var(--space-8); }
.tier { display: flex; flex-direction: column; }
.tier-name { color: var(--field); font-size: var(--step-2); }
.tier-lead { background-color: #fbfaf4; box-shadow: var(--shadow-page), inset 0 4px 0 var(--flag); }
.tier-price { margin: var(--space-3) 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); }
.tier-price .num { font-size: var(--step-3); font-weight: 700; color: var(--field); line-height: 1; }
.tier-lead .tier-price .num { color: var(--flag); }
.tier-per { font-size: var(--step--1); color: var(--pencil-3); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-display); }
.tier-line { color: var(--pencil-2); font-style: italic; margin: 0 0 var(--space-4); }
.tier-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-top: var(--rule); }
.tier-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-bottom: var(--rule); }
.tier-list li::before {
  content: ""; position: absolute; left: 2px; top: 1.35em;
  width: 10px; height: 2px; background: var(--flag);
}
.tier-not { font-size: var(--step--1); color: var(--pencil-3); margin: 0 0 var(--space-5); }
.tier-act { margin: auto 0 var(--space-3); }
.tier-fine { margin: 0; font-size: var(--step--1); color: var(--pencil-3); }

.pricing-notes { border-top: 2px solid var(--pencil); background-color: var(--chalk-2); }

/* ── documents: legal, support, about, errors ─────────────────────────────── */

.legal, .george-hero, .errpage { padding: var(--space-7) 0 var(--space-8); }
.page-index { position: relative; }
.page-doc { padding-inline: var(--space-6); }
.doc-h { color: var(--field); font-size: var(--step-3); margin-bottom: var(--space-3); }
.doc-h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--step-2); color: var(--field); margin: var(--space-6) 0 var(--space-3); }
.doc-meta { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pencil-3); margin-bottom: var(--space-6); }
.page-doc h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); letter-spacing: 0.03em; color: var(--field);
  margin: var(--space-6) 0 var(--space-3); padding-top: var(--space-3); border-top: var(--rule);
}
.page-doc h2:first-of-type { border-top: 0; }
.page-doc p { max-width: 68ch; }
.doc-list { margin: var(--space-3) 0; padding-left: var(--space-5); }
.doc-list li { margin-bottom: var(--space-3); max-width: 66ch; }
.doc-list-num { list-style: decimal; }
.doc-sign { margin-top: var(--space-6); }

.doc-nav { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.doc-nav a {
  font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none;
  color: var(--pencil-2); padding: 0.28em 0; border-bottom: var(--rule);
}
.doc-nav a:hover { color: var(--flag); }

.support-form { margin: var(--space-5) 0; display: grid; gap: var(--space-5); justify-items: start; }
.support-form textarea {
  font: inherit; width: 100%; padding: 0.8em 0.9em; border: 1.5px solid var(--chalk-3);
  border-radius: var(--radius-1); background: #fff; color: var(--pencil); resize: vertical;
}
.support-form textarea:focus { border-color: var(--pencil); outline: none; }
.support-form .field { width: 100%; }
.notice { padding: var(--space-4); border-radius: var(--radius-1); border-left: 4px solid var(--pencil-3); background: var(--chalk-2); }
.notice-ok { border-left-color: var(--fairway); }
.notice-bad { border-left-color: var(--flag); }

.george-pull { border-left-color: var(--flag); margin-bottom: var(--space-5); }
.george-pull p { font-size: var(--step-1); }
.george-facts { font-size: var(--step--1); letter-spacing: 0.12em; color: var(--pencil-3); line-height: 2; margin-top: var(--space-6); }

.page-err svg { display: block; width: 100%; height: auto; margin-bottom: var(--space-4); }
.err-h { margin-bottom: var(--space-4); }
.err-code { font-size: var(--step-4); font-weight: 700; color: var(--flag); line-height: 0.9; }

/* ── colophon ─────────────────────────────────────────────────────────────── */

.colophon { background: var(--field); color: var(--chalk); margin-top: 0; }
.colophon.spiral::before { filter: invert(1) opacity(0.45); }
.colophon-inner {
  width: min(1180px, calc(100% - 2 * var(--space-5))); margin-inline: auto;
  padding: var(--space-7) 0 var(--space-6) var(--space-5);
  display: grid; gap: var(--space-4);
}
.colophon-line { margin: 0; font-size: var(--step--1); letter-spacing: 0.16em; color: rgba(243, 241, 231, 0.7); }
.colophon-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.colophon-nav a {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: var(--step--1); text-decoration: none; color: var(--chalk);
  border-bottom: 2px solid transparent;
}
.colophon-nav a:hover { color: var(--chalk); border-bottom-color: var(--flag); }
.colophon-made { margin: 0; color: rgba(243, 241, 231, 0.78); font-size: 1.25em; }
.colophon-legal { margin: 0; font-size: var(--step--1); color: rgba(243, 241, 231, 0.55); max-width: 80ch; }

/* ── the book closes on a phone: one column, rings across the fold ────────── */

@media (max-width: 900px) {
  .spread-3 { grid-template-columns: minmax(0, 1fr); }
  .tagger-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .teaser-row { grid-template-columns: 120px minmax(0, 1fr); }
  .teaser-what { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .masthead { flex-wrap: wrap; gap: var(--space-3); }
  .wordmark svg { height: 34px; }
  .nav { gap: var(--space-2) var(--space-3); }
  .nav-dot { display: none; }

  .spread, .spread-3, .spread-doc { grid-template-columns: minmax(0, 1fr); }
  .spread > .page,
  .spread > .page:first-child,
  .spread > .page:last-child {
    border: 1px solid var(--chalk-3); border-radius: var(--radius-2);
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
  .spread > .page::after { display: none; }

  /* the binding lies across the fold instead of down it */
  .gutter {
    flex-direction: row; height: 34px; padding: 0 var(--space-5);
    background: linear-gradient(180deg,
      rgba(58, 58, 54, 0.10) 0 2px, var(--chalk-3) 2px calc(100% - 2px), rgba(58, 58, 54, 0.10) calc(100% - 2px) 100%);
  }
  .gutter span { width: 15px; height: calc(100% + 12px); border-radius: 9px; }

  .call { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); }
  .step-n { font-size: var(--step-2); }
  .kit-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .teaser-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .numbers-row { gap: var(--space-4); }
  .page-doc { padding-inline: var(--space-4); }
  .colophon-inner { padding-left: var(--space-6); }
  .closer-h { font-size: var(--step-3); }
}