/* ==========================================================================
   Carbon6
   Warm light field, forest-ink ledger and footer.
   Self-hosted faces only. No external requests of any kind.
   ========================================================================== */

/* ── Faces ────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Italic is loaded only for the logotype's 6, so the unicode-range is
   narrowed to that one glyph and cannot leak into any other italic text. */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0036;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Custom properties ────────────────────────────────────────────────── */

:root {
  /* Warm neutrals and brand greens. Every text pair is AAA.
     Body copy uses a darkened brown: the original warm brown reads 6.67:1
     on beige, which is AA but short of the AAA this page holds itself to. */
  --forest: #2D5016;        /* headings, accents, links on light    8.17:1  */
  --mid-green: #4A7C2E;     /* mark and sphere only — 4.40:1, never text    */
  --sage: #A8BFA0;          /* accents on ink, logotype 6           9.49:1  */
  --beige: #F5F0EB;         /* warm field                                   */
  --off-white: #FAFAF7;     /* raised cards, alternating band               */
  --sand: #E8DDD3;          /* hero gradient core, hairlines                */
  --earth: #6B4E3D;         /* secondary text on off-white          7.22:1  */
  --earth-deep: #4A362A;    /* body copy                           10.01:1  */
  --ink: #0E1310;           /* ledger card, footer                          */
  --cream-soft: #C3BFB1;    /* muted text on ink                   10.19:1  */

  --rule-warm: rgba(107, 78, 61, 0.16);
  --rule-on-ink: rgba(168, 191, 160, 0.34);

  /* Type */
  --f-display: 'DM Serif Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --t-numeral: clamp(3.5rem, 2.6rem + 3.4vw, 5rem);
  --t-band: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.42vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.75rem;

  /* Space — 8px grid */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 80px;  --s-10: 120px; --s-11: 160px;

  /* Layout */
  --shell: 1160px;
  --gutter: var(--s-5);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 100px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation */
  --shadow-card: 0 2px 4px rgba(58, 47, 40, 0.03),
                 0 8px 24px rgba(58, 47, 40, 0.05),
                 0 20px 48px rgba(58, 47, 40, 0.03);
  --shadow-hover: 0 4px 8px rgba(58, 47, 40, 0.04),
                  0 12px 32px rgba(58, 47, 40, 0.07),
                  0 28px 60px rgba(58, 47, 40, 0.05);
  --shadow-deep: 0 8px 20px rgba(26, 22, 18, 0.10),
                 0 28px 64px rgba(26, 22, 18, 0.16);
}

@media (min-width: 48em) {
  :root { --gutter: var(--s-7); }
}

/* ── Reset ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--earth-deep);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, figure, ol { margin: 0; }
ol { padding: 0; list-style: none; }

a { color: var(--forest); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--earth-deep); }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 3px;
}

canvas, svg { display: block; }

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 20;
  transform: translateY(-250%);
  background: var(--off-white);
  color: var(--earth-deep);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--forest);
  border-radius: var(--radius-sm);
}
.skip:focus { transform: translateY(0); }

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: relative;
  z-index: 3;
  padding-block: var(--s-6);
}

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--forest);
  text-decoration: none;
}
.wordmark:hover { color: var(--forest); }

.mark { flex: none; width: 2rem; height: 2rem; }

.wordmark-text {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Matches the lockup: the 6 is set italic in sage, at the brand's 43/36
   size ratio. Logotypes carry no contrast requirement (WCAG 1.4.3). */
.wordmark-6 {
  color: var(--sage);
  font-style: italic;
  font-size: 1.19em;
}

.masthead-meta {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--earth);
  white-space: nowrap;
}

/* The longer logotype leaves no room beside it on a phone, where this would
   wrap to two lines. The jurisdiction is stated in full in the footer. */
@media (max-width: 39.99em) {
  .masthead-meta { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  margin-top: calc(-1 * (var(--s-6) * 2 + 2rem));
  padding-block: calc(var(--s-6) * 2 + 2rem + var(--s-5)) var(--s-9);
  text-align: center;
  background:
    radial-gradient(ellipse 62% 52% at 50% 38%,
      var(--sand) 0%, #EFE7DE 32%, var(--off-white) 62%, var(--beige) 100%);
}

.hero-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Emblem: the ripple rings sit behind, the sphere sits in the middle. */
.emblem {
  position: relative;
  width: min(86vw, 440px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* Negative bottom margin pulls the headline up under the sphere: the
     emblem box is mostly transparent padding for the ripple to expand into. */
  margin-bottom: calc(-1 * var(--s-6));
}

.ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ring {
  transform-origin: 300px 300px;
  opacity: 0;
  animation: ripple 9s var(--ease-out) infinite;
}
.r2 { animation-delay: 3s; }
.r3 { animation-delay: 6s; }

@keyframes ripple {
  0%   { transform: scale(0.35); opacity: 0; }
  12%  { opacity: 0.7; }
  100% { transform: scale(3.4); opacity: 0; }
}

.sphere {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 10px 28px rgba(45, 80, 22, 0.20));
}
.sphere canvas { width: 100%; height: 100%; }

.hero-title {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.021em;
  color: var(--forest);
  text-wrap: balance;
  max-width: 18ch;
  margin-bottom: var(--s-5);
}

.hero-sub {
  max-width: 54ch;
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--earth);
  text-wrap: pretty;
}

/* ── Bands ────────────────────────────────────────────────────────────── */

.band-plain { background: var(--off-white); }
.band-warm  { background: var(--beige); }

.section-steps { padding-block: var(--s-10); }
.section-proof { padding-block: var(--s-10); }
.section-who   { padding-block: var(--s-10); }
.section-not   { padding-block: var(--s-11); }

.band-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-9);
}

/* Section mark. Carries no words — the brief's "Section:" prefixes are
   labels for the writer, not copy for the reader. */
.mark-rule {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: var(--s-5);
  border-radius: 2px;
  background: var(--forest);
}

.band-title {
  font-family: var(--f-display);
  font-size: var(--t-band);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--forest);
  text-wrap: balance;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.card {
  background: var(--off-white);
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.band-plain .card { background: #fff; }

@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }
}

/* ── How it works ─────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--s-5);
}

/* Three across only once each card can hold a readable measure. Below this
   they stack — at 768 a three-up grid wrings the copy into nine-line ribbons. */
@media (min-width: 62em) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

.step { display: flex; flex-direction: column; }

.step-num {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-numeral);
  line-height: 0.85;
  color: var(--forest);
  opacity: 0.34;
  margin-bottom: var(--s-3);
}

.step-head {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--forest);
  margin-bottom: var(--s-2);
}

.step-text { color: var(--earth); }

/* ── Removals, explained ──────────────────────────────────────────────── */

.section-explainer { padding-block: var(--s-10); }

.explainer { margin: 0; }

.explainer-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--rule-warm);
}

.explainer-stage iframe,
.explainer-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.explainer-poster { object-fit: cover; }

.explainer-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  /* Scrim keeps the label legible over whatever frame sits behind it. */
  background: linear-gradient(180deg, rgba(245, 240, 235, 0.72), rgba(245, 240, 235, 0.86));
  transition: background 0.3s var(--ease);
}

.explainer-play svg {
  width: 34px;
  height: 34px;
  padding: 14px;
  box-sizing: content-box;
  border: 1px solid var(--forest);
  border-radius: 50%;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease-out);
}

.explainer-play:hover { background: rgba(245, 240, 235, 0.78); }
.explainer-play:hover svg {
  background: var(--forest);
  color: var(--off-white);
  transform: scale(1.06);
}

/* Pause / replay, shown only once the panel is running. */
.explainer-controls {
  display: none;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.explainer.is-playing .explainer-controls { display: flex; }

.explainer-btn {
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--earth-deep);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.explainer-btn:hover { border-color: var(--forest); color: var(--forest); }

.explainer-caption {
  margin: var(--s-5) auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--earth);
}

/* ── The proof: the ledger ────────────────────────────────────────────── */

.ledger-figure { margin: 0; }

.ledger {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--beige);
  padding: var(--s-6) var(--s-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
}

.ledger-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: rgba(168, 191, 160, 0.09);
}

.ledger-head {
  display: flex;
  /* Stacked by default: side by side, the two labels collide at 360. */
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-on-ink);
}

@media (min-width: 30em) {
  .ledger-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
  }
}

.ledger-title,
.ledger-tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ledger-title { color: var(--sage); }
.ledger-tag {
  color: var(--cream-soft);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.ledger-rows { margin-top: var(--s-2); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(168, 191, 160, 0.16);
}
.row:last-child { border-bottom: 0; }

.row dt {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.row dd {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  line-height: 1.45;
  /* Fixed fields sit back so the two personal ones carry the eye. */
  color: rgba(245, 240, 235, 0.72);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The two fields that are filled in for the buyer, at the moment they buy.
   Everything else on this record is the same for everyone. */
.row-yours {
  position: relative;
  background: linear-gradient(90deg, rgba(168, 191, 160, 0.07), transparent 70%);
  border-radius: var(--radius-sm);
}
.row-yours::before {
  content: '';
  position: absolute;
  left: calc(var(--s-4) * -1);
  top: var(--s-3);
  bottom: var(--s-3);
  width: 2px;
  border-radius: 2px;
  background: var(--sage);
}

.row-yours dd { color: var(--beige); font-size: 1rem; }
.row-yours dt { color: var(--sage); }

.fill {
  color: var(--sage);
  border-bottom: 1px dashed rgba(168, 191, 160, 0.5);
  padding-bottom: 2px;
}

.pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: var(--s-2);
  border: 1px solid var(--sage);
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sage);
  vertical-align: 1px;
}

/* ── Ledger notes: what the two marks mean ────────────────────────────── */

.ledger-notes {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.ledger-notes li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--earth-deep);
}

.ledger-notes .pin {
  flex: none;
  margin-right: 0;
  margin-top: 2px;
  border-color: var(--forest);
  color: var(--forest);
  font-family: var(--f-mono);
}

@media (min-width: 46em) {
  .ledger-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

@media (min-width: 40em) {
  .ledger { padding: var(--s-8) var(--s-8) var(--s-7); }
  .row {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--s-5);
    align-items: baseline;
  }
  .row dt { padding-top: 0.15em; }
}


.ledger-caption {
  margin: var(--s-6) auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--earth);
}

/* ── Who it serves ────────────────────────────────────────────────────── */

.who-cols {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 48em) {
  .who-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.who-head {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--forest);
  margin-bottom: var(--s-2);
}

.who-text { color: var(--earth); }

/* ── Caesura ──────────────────────────────────────────────────────────── */

/* A held breath between the commercial sections and the quiet statement.
   Decorative: it carries no information, so it is empty to a screen reader. */
/* Warm hold colour, not ink: the image lazy-loads, and a black slab
   flashing between two light sections reads as a broken asset. */
.caesura {
  background: var(--sand);
  overflow: hidden;
}

.caesura img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vh, 300px);
  object-fit: cover;
  object-position: 50% 50%;
}

/* ── What we are not ──────────────────────────────────────────────────── */

.not-text {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--t-lead);
  line-height: 1.75;
  color: var(--earth-deep);
  text-wrap: pretty;
}

/* ── Closing ──────────────────────────────────────────────────────────── */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--off-white);
  padding-block: var(--s-10);
  text-align: center;
}

.closing-bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(120vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.closing-bg canvas { width: 100%; height: 100%; }

.closing-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-title {
  font-family: var(--f-display);
  font-size: var(--t-band);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--forest);
  margin-bottom: var(--s-6);
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--forest);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--forest);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease-out);
}

.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease-out); }

.btn:hover {
  background: var(--forest);
  color: var(--off-white);
  transform: translateY(-2px);
}
.btn:hover svg { transform: translateX(3px); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--ink);
  color: var(--cream-soft);
  padding-block: var(--s-9);
  font-size: var(--t-small);
}

.foot-mark {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--s-5);
  color: var(--sage);
  opacity: 0.85;
}

.foot-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  color: var(--beige);
  line-height: 1.5;
}

.foot-line a { color: var(--sage); }
.foot-line a:hover { color: var(--beige); }

.sep { color: var(--sage); opacity: 0.7; }

.foot-small {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-on-ink);
  max-width: 60ch;
  color: var(--cream-soft);
  font-size: var(--t-label);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ── Motion ───────────────────────────────────────────────────────────── */

/* Only hide when scripting is confirmed, so a script failure never
   leaves the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.js .steps .reveal:nth-child(2).is-visible { transition-delay: 0.08s; }
.js .steps .reveal:nth-child(3).is-visible { transition-delay: 0.16s; }
.js .who-cols .reveal:nth-child(2).is-visible { transition-delay: 0.08s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ring { animation: none; opacity: 0; }
  .card:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────────── */

@media print {
  .hero, .masthead, .site-foot, .ledger, .closing {
    background: #fff !important;
    color: #000 !important;
  }
  .ledger-frame, .caesura, .emblem, .closing-bg { display: none; }
  .row dt, .row dd, .ledger-title, .ledger-tag, .hero-sub { color: #000 !important; }
  .card { box-shadow: none; border: 1px solid #999; }
  .skip { display: none; }
}