/* ────────────────────────────────────────────────────────────
   A working brief for Frank — deck stylesheet
   Built against @syntrociety/design brand-system v1.0.
   All colours, spacing, type from colors_and_type.css tokens.
   ──────────────────────────────────────────────────────────── */

/* ── Reset + slide canvas ──────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bone); }

deck-stage {
  background: var(--ink);
  color: var(--ink);
}

/* deck-stage children are 1920×1080 slides; let them paint their own bg */
.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-serif);
  overflow: hidden;
  display: block;
}

/* Generic padded slide layout */
.slide--padded {
  padding: 64px 120px 60px 120px;
  display: flex;
  flex-direction: column;
}

/* ── Slide head (eyebrow + slide-no) ─────────────────────────
   Replaces the deck-level counter; we own placement. */
.slide-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
  flex-shrink: 0;
}
.slide-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.slide-head .eyebrow--economy { color: var(--pillar-economy); }
.slide-head .eyebrow--ecology { color: var(--pillar-ecology); }
.slide-head .eyebrow--cross   { color: var(--pillar-cross); }
.slide-head .eyebrow--social  { color: var(--pillar-social); }

.slide-no {
  font-size: 16px;
  color: var(--char-soft);
  letter-spacing: var(--ls-caps);
}

/* ── Type primitives reused across slides ──────────────────── */
.mono {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: var(--ls-snug);
  color: var(--char);
}

.slide h1.display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 72px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 36px 0;
  max-width: 1500px;
  /* Italic Crimson Pro descenders bleed; padding-bottom protects siblings. */
  padding-bottom: 0.16em;
}

.slide h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 36px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 16px 0;
}
.slide h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 30px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 14px 0;
}

.slide p {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--char);
  margin: 0 0 20px 0;
  max-width: 64ch;
}
.slide p.lead {
  font-size: 28px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 28em;
  margin-bottom: 28px;
}

.slide hr.hairline {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
  max-width: 80px;
}

.slide .kw { font-weight: var(--fw-medium); color: var(--ink); }

/* Pillar stripe (top, 6px) */
.pillar-stripe {
  display: block;
  height: 6px;
  width: 100%;
}
.pillar-stripe--top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
}
.pillar-stripe--economy { background: var(--pillar-economy); }
.pillar-stripe--ecology { background: var(--pillar-ecology); }
.pillar-stripe--cross   { background: var(--pillar-cross); }
.pillar-stripe--social  { background: var(--pillar-social); }

/* Mark glyphs */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
}
.mark svg { width: 100%; height: 100%; }
.mark--lg { width: 56px; height: 56px; }
.mark--social  { color: var(--pillar-social); }
.mark--economy { color: var(--pillar-economy); }
.mark--cross   { color: var(--pillar-cross); }
.mark--ecology { color: var(--pillar-ecology); }

/* pillar-dot helper (matches globals.css) */
.pillar-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pillar-dot.ecology { background: var(--pillar-ecology); }
.pillar-dot.social  { background: var(--pillar-social); }
.pillar-dot.economy { background: var(--pillar-economy); }
.pillar-dot.cross   { background: var(--pillar-cross); }

/* Badges (mini, editorial) */
/* Persona review 2026-06 (jurist-lezing): een mock moet in één
   oogopslag als mock leesbaar zijn. De langere "illustrative
   record"-noot blijft; deze chip maakt de markering onmisbaar in de
   chrome van elk verzonnen record. */
.mock-flag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
  border: 1px solid var(--roest);
  border-radius: 2px;
  padding: 1px 7px;
  white-space: nowrap;
}
.audit-header > .mock-flag { align-self: flex-start; }
.letter-chrome .mock-flag,
.ledger-mock-chrome .mock-flag { color: var(--roest); border-color: var(--roest); }

.badge {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  padding: 4px 10px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.badge-econ    { background: var(--tint-economy); color: var(--pillar-economy); }
.badge-eco     { background: var(--tint-ecology); color: var(--pillar-ecology); }
.badge-soc     { background: var(--tint-social);  color: #7A4A06; }
.badge-crs     { background: var(--tint-cross);   color: var(--pillar-cross); }
.badge-neutral { background: var(--paper-deep);   color: var(--char); }

/* ────────────────────────────────────────────────────────────
   SLIDE 1 — Cover
   ──────────────────────────────────────────────────────────── */
.slide--cover {
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 160px;
}
.slide--cover::before {
  content: "";
  position: absolute;
  inset: 64px 88px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  pointer-events: none;
}
.cover-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 1400px;
  width: 100%;
}
.cover-eyebrow {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 56px;
}
.cover-wordmark {
  font-family: var(--font-serif);
  font-size: 168px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cover-wordmark em { font-style: italic; font-weight: var(--fw-regular); }
.cover-wordmark-dot {
  /* roest period — per brand-system v1.0 §05 (display register) */
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--roest);
  margin-left: -0.04em;
}

.cover-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.35;
  color: var(--ink);
  max-width: 22em;
  margin: 32px auto 0 !important;
  text-align: center;
  padding-bottom: 0.06em;
}

.cover-marks {
  display: flex;
  gap: 36px;
  margin-top: 56px;
}
.cover-marks .mark {
  width: 44px; height: 44px;
}
.cover-mark-labels {
  display: flex;
  gap: 36px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: var(--ls-wide);
  color: var(--char-soft);
}
.cover-mark-labels span {
  width: 44px;
  text-align: center;
}

.cover-frame hr.hairline {
  width: 80px;
  max-width: 80px;
  margin: 56px 0 40px 0;
  border-top: 1px solid var(--rule);
}
.cover-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 44px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 28px;
  padding-bottom: 0.1em;
}
.cover-meta {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
  display: flex;
  gap: 14px;
  white-space: nowrap;
}
.cover-anchor {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
  line-height: 1.7;
  max-width: 52ch;
  text-align: center;
  margin: 36px auto 0 !important;
  text-transform: none;
}

/* Plain-language shadow under § eyebrows on cold-read-heavy slides */
.eyebrow-shadow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--char);
  margin: -22px 0 22px 0 !important;
  max-width: 48em;
}

/* Slide 04 — What a Lab is (Sulitânia anatomy) */
.slide--lab h1.display {
  max-width: 26em;
  margin-bottom: 44px;
}
.lab-anatomy {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  padding: 32px 0 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.lab-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lab-col-h {
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
}
.lab-col-p {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.lab-foot {
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  margin: 24px 0 0 0 !important;
  max-width: none;
}
.lab-foot-asof {
  color: var(--char-soft);
  font-style: normal;
}

/* Slide 07 — Why software at all */
.slide--why-sw h1.display {
  max-width: 26em;
  margin-bottom: 44px;
}
.why-sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 32px 0 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.why-sw-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.why-sw-col--alt .why-sw-col-h {
  color: var(--pillar-ecology);
}
.why-sw-col-h {
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.why-sw-col-p {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 32em;
}
.why-sw-col--alt .why-sw-col-p { color: var(--ink); }
.why-sw-foot {
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  margin: 24px 0 0 0 !important;
  max-width: none;
}

/* Slide 20 — The boundary worker */
.slide--boundary h1.display {
  max-width: 24em;
  margin-bottom: 20px;
  font-size: clamp(32px, 5vw, 48px);
}
.slide--boundary .prose-wrap { margin-bottom: 4px; }
.slide--boundary .lead-stack {
  gap: 14px;
  margin-bottom: 24px;
}
.slide--boundary .lead-stack .lead {
  font-size: 21px;
  line-height: 1.45;
}
.boundary-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 20px 0 16px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.boundary-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.boundary-col-h {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
}
.boundary-col-p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: 32em;
}
.boundary-foot {
  font-size: 13px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  margin: 14px 0 0 0 !important;
  max-width: none;
}

/* Slide 21 — Technology */
.slide--tech h1.display {
  max-width: 26em;
  margin-bottom: 16px;
  font-size: clamp(32px, 5vw, 48px);
}
.tech-lead {
  max-width: 38em;
  margin-bottom: 24px !important;
  font-size: 21px !important;
  line-height: 1.45 !important;
}
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding: 20px 0 16px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.tech-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tech-col-h {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
}
.tech-col-p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.tech-ai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.tech-ai-h {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
}
.tech-ai-p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.tech-ai-p strong {
  font-weight: var(--fw-medium);
  font-style: italic;
}
.tech-foot {
  font-size: 13px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  margin: 14px 0 0 0 !important;
  max-width: none;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 2 — Distinction
   ──────────────────────────────────────────────────────────── */
.distinction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.distinction-col {
  padding: 80px 80px 80px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.distinction-col--desert {
  padding-right: 80px;
  border-right: 1px solid var(--rule);
}
.distinction-col--forest {
  padding-left: 80px;
}
.distinction-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
}
.distinction-col--desert .distinction-label { color: var(--lichen-deep); }
.distinction-col--forest .distinction-label { color: var(--pillar-ecology); }

.distinction-h {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 52px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  max-width: 12em;
}
.distinction-p {
  font-size: 26px;
  line-height: 1.5;
  color: var(--char);
  margin: 0;
  max-width: 26em;
}
.distinction-close {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.4;
  color: var(--ink);
  margin: 56px 0 0 0;
  max-width: 38em;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 3 — Federation in one paragraph
   ──────────────────────────────────────────────────────────── */
.prose-wrap {
  max-width: 1280px;
}
.prose-wrap .lead { max-width: 32em; font-size: 25px; line-height: 1.5; }

/* Flex-column with gap is more robust than margin-collapse between
   consecutive italic-leaning leads: a Crimson Pro italic descender on
   the last line can paint into a following <p>'s margin and visually
   overlap with the next paragraph's first line. The gap stays
   explicit. */
.lead-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lead-stack .lead { margin-bottom: 0; }

.legal-block {
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.legal-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 6px 0;
  align-items: baseline;
}
.legal-k {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.legal-v {
  font-size: 22px;
  color: var(--ink);
}
.legal-v.mono { font-size: 19px; color: var(--ink); letter-spacing: var(--ls-snug); }

/* ────────────────────────────────────────────────────────────
   SLIDE 4 — Quinta da Fornalha
   ──────────────────────────────────────────────────────────── */
.slide--land { padding-bottom: 56px; }
.land-figure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  gap: 24px;
  flex: 1;
  min-height: 0;
}
.land-image {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: var(--paper-deep);
  display: block;
  border-radius: var(--r-sm);
  border: 1px dashed var(--rule-strong);
  --image-slot-bg: var(--paper-deep);
  --image-slot-fg: var(--char-soft);
  --image-slot-border: var(--rule);
}
.land-image::part(placeholder),
.land-image::part(label) { font-family: var(--font-mono); }
.land-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.land-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 36px;
  color: var(--ink);
}
.land-coords {
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.land-line {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 5 — Why a federation
   ──────────────────────────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
  flex: 1;
}
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.why-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.why-n {
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  color: var(--roest);
}
.why-line {
  font-size: 28px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.why-line strong { font-weight: var(--fw-medium); }

.charter-quote {
  background: var(--paper-deep);
  padding: 56px 48px;
  border-radius: var(--r-sm);
  align-self: start;
  position: relative;
}
.pull-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 24px;
}

.pull--live p {
  font-style: italic;
  font-size: 28px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px 0;
  max-width: none;
  padding-bottom: 0.1em;
}
.pull-attribution {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
  font-style: normal;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.pull {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-serif);
}
.pull .placeholder-mark {
  display: block;
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  color: var(--lichen-deep);
  margin-bottom: 16px;
}
.pull p {
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 6 — Four instruments
   ──────────────────────────────────────────────────────────── */
.quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  flex: 0 0 620px;
  margin-top: 8px;
}
.quad-cell {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 32px 44px 28px 44px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.quad-cell .pillar-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
}
.quad-cell .mark--lg {
  margin-top: 8px;
  margin-bottom: 8px;
}
.quad-name {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}
.quad-cap {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.quad-cell--social  .quad-cap { color: var(--pillar-social); }
.quad-cell--economy .quad-cap { color: var(--pillar-economy); }
.quad-cell--cross   .quad-cap { color: var(--pillar-cross); }
.quad-cell--ecology .quad-cap { color: var(--pillar-ecology); }

.quad-desc {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.4;
  color: var(--char);
  margin-top: 2px;
  max-width: 22em;
}
.quad-url {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

/* ────────────────────────────────────────────────────────────
   SHARED — instrument slide layout (chart/lens/people/compass)
   ──────────────────────────────────────────────────────────── */
.slide--instr { padding-top: 88px; }
.instr-grid {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 80px;
  flex: 1;
  min-height: 0;
}
.instr-left {
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.instr-left .display { margin-bottom: 0; }
.instr-left .display {
  font-size: 108px;
  margin-bottom: 0;
  padding-bottom: 0.18em;
}
.instr-lead {
  font-size: 30px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 22em;
  margin-bottom: 0;
}
.instr-aside {
  font-size: 24px;
  color: var(--char);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 22em;
}
.instr-url {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--char);
  letter-spacing: var(--ls-snug);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: 8px;
}
.instr-right {
  display: flex;
  min-height: 0;
}

/* ── App screenshots (replace mocks on chart/lens slides) ────── */
.app-screenshot {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
}
.app-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.mock {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mock-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-snug);
  color: var(--char);
}
.mock-body {
  padding: 36px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mock-title { margin-bottom: 28px; }
.mock-title h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 38px;
  line-height: 1.25;
  color: var(--ink);
  margin: 8px 0 0 0;
  padding-bottom: 0.06em;
}
.mock-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
  display: block;
}
.mock-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
}

/* ────────────────────────────────────────────────────────────
   SLIDE 7 — chart records mock (table)
   ──────────────────────────────────────────────────────────── */
.mock-table {
  width: 100%;
  border-collapse: collapse;
}
.mock-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
  font-weight: var(--fw-medium);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.mock-table td {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  padding: 16px 0;
  border-bottom: 0.5px solid var(--rule);
  vertical-align: baseline;
}
.mock-table tr:last-child td { border-bottom: none; }
.mock-table td.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-snug);
  color: var(--char);
}
.mock-table td.mono.mock-vote--consent  { color: var(--pillar-ecology); }
.mock-table td.mono.mock-vote--objection { color: var(--roest); }
.mock-table th:nth-child(1) { width: 16%; }
.mock-table th:nth-child(2) { width: 56%; }
.mock-table th:nth-child(3) { width: 12%; }
.mock-table th:nth-child(4) { width: 16%; }

/* ────────────────────────────────────────────────────────────
   SLIDE 8 — chart audit trail (single record)
   ──────────────────────────────────────────────────────────── */
.audit {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 48px 64px 40px 64px;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-md);
  margin-bottom: 4px;
}
.audit-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 24px;
}
.audit-id {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pillar-economy);
}
.audit-title-wrap { display: flex; flex-direction: column; gap: 12px; }
.audit-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 44px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
}

.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 80px;
}
.audit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audit-field--wide { grid-column: 1 / -1; }
.audit-k {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
}
.audit-v {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ink);
  letter-spacing: var(--ls-snug);
}

.audit-initials { display: flex; gap: 12px; flex-wrap: wrap; }
.audit-init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--tint-economy);
  color: var(--pillar-economy);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0;
}
.audit-init--abstain {
  background: var(--paper-deep);
  color: var(--char-soft);
}

.audit-outcome { display: flex; gap: 12px; flex-wrap: wrap; }

.audit-docs { display: flex; flex-direction: column; gap: 8px; }
.audit-docs span { display: flex; gap: 14px; align-items: baseline; }
.audit-tag {
  font-size: 14px;
  padding: 2px 8px;
  background: var(--tint-ecology);
  color: var(--pillar-ecology);
  border-radius: var(--r-full);
  letter-spacing: var(--ls-wide);
}
.audit-hash { color: var(--char); }

.audit-foot {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  max-width: 60ch;
  margin-top: auto;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 9 — lens pipeline (four lanes)
   ──────────────────────────────────────────────────────────── */
.lens-lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 28px 24px;
}
.lane {
  background: var(--bone);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lane-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.lane-card {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lane-card .lane-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.lane-card .lane-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  white-space: nowrap;
}
.lane-card .lane-meta--tag {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--tint-ecology);
  color: var(--pillar-ecology);
  border-radius: var(--r-full);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lane-card .pillar-dot {
  width: 8px; height: 8px;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 10 — lens translated correspondence
   ──────────────────────────────────────────────────────────── */
.lens-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  flex: 1;
  min-height: 0;
}
.letter {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.letter--pt { background: #FBF6E7; }
.letter--en { background: var(--paper); box-shadow: var(--shadow-md); }
.letter-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
  white-space: nowrap;
}
.letter--pt .letter-chrome { background: #F3E9C8; color: #6B5A2A; }
.letter-body {
  padding: 36px 40px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.letterhead {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}
.letterhead-crest {
  width: 56px; height: 56px;
  background:
    radial-gradient(circle at 50% 38%, var(--lichen-deep) 0 6px, transparent 7px),
    radial-gradient(circle at 50% 50%, transparent 0 22px, var(--lichen-deep) 23px 24px, transparent 25px);
  border: 1.5px solid var(--lichen-deep);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.7;
}
.letterhead-main {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.letterhead-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--char);
}
.letterhead-meta {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
  margin-top: 4px;
}
.letter-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
  white-space: nowrap;
}
.letter-prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.letter-prose p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.letter-prose--pt p { color: #2C2418; }
.letter-prose strong { font-weight: var(--fw-medium); }
.letter-sign {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--char);
}
.letter-sign-name { font-style: italic; color: var(--char-soft); }
.letter-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.letter-tags .badge { font-size: 14px; padding: 4px 10px; }
.letter-confidence {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.confidence-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.confidence-bar {
  height: 4px;
  background: var(--paper-deep);
  border-radius: var(--r-full);
  overflow: hidden;
}
.confidence-fill {
  height: 100%;
  background: var(--pillar-ecology);
}
.confidence-note { font-size: 14px; color: var(--char-soft); margin-top: 12px; }

/* ────────────────────────────────────────────────────────────
   SLIDE 11 — compass
   ──────────────────────────────────────────────────────────── */
.compass-grid {
  display: grid;
  grid-template-columns: 380px 420px 1fr;
  gap: 56px;
  flex: 1;
  min-height: 0;
}
.compass-grid--screenshot {
  grid-template-columns: 380px 1fr;
}
.compass-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.compass-left .display {
  font-size: 96px;
  margin-bottom: 0;
  padding-bottom: 0.18em;
}
.compass-left .instr-lead { font-size: 22px; line-height: 1.5; }
.compass-left .instr-aside { font-size: 19px; line-height: 1.55; }

.compass-list {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: hidden;
}
.cond-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-top: 8px;
}
.cond-h:first-child { margin-top: 0; }
.cond-ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cond-ul li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  align-items: baseline;
}
.cond-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  color: var(--char-soft);
}
.cond-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.3;
}
.cond-ul li.cond-active {
  background: var(--tint-cross);
  border-left: 2px solid var(--pillar-cross);
  padding-left: 12px;
}
.cond-ul li.cond-active .cond-code { color: var(--pillar-cross); font-weight: var(--fw-medium); }
.cond-ul li.cond-active .cond-name { font-style: italic; color: var(--ink); }

.compass-detail {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: var(--shadow-md);
}
.compass-cond-name {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  padding-bottom: 0.08em;
}
.ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.rung {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bone);
  border-radius: var(--r-sm);
  align-items: baseline;
  border: 0.5px solid transparent;
}
.rung-n {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--char-soft);
  letter-spacing: 0;
}
.rung-l {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--char);
  line-height: 1.35;
}
.rung--active {
  background: var(--tint-cross);
  border-color: var(--pillar-cross);
}
.rung--active .rung-n { color: var(--pillar-cross); font-weight: var(--fw-medium); }
.rung--active .rung-l { color: var(--ink); font-style: italic; }
.compass-foot {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
}
.compass-foot em { color: var(--pillar-cross); font-style: italic; }

/* ────────────────────────────────────────────────────────────
   SLIDE 12 — people
   ──────────────────────────────────────────────────────────── */
.mock--people .mock-body { padding: 0; }
.people-rows {
  display: flex;
  flex-direction: column;
}
.people-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 32px;
  border-bottom: 0.5px solid var(--rule);
}
.people-row:last-child { border-bottom: none; }
.people-name {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}
.people-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
}
.mock--people .mock-foot { padding: 18px 32px; }

/* ────────────────────────────────────────────────────────────
   SLIDE 13 — Scenario, 4-step
   ──────────────────────────────────────────────────────────── */
.scenario {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  flex: 1;
}
.scenario-step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 36px 28px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.scenario-step .scenario-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.scenario-step[data-pillar="ecology"] .scenario-stripe { background: var(--pillar-ecology); }
.scenario-step[data-pillar="economy"] .scenario-stripe { background: var(--pillar-economy); }
.scenario-step[data-pillar="social"]  .scenario-stripe { background: var(--pillar-social); }
.scenario-step[data-pillar="cross"]   .scenario-stripe { background: var(--pillar-cross); }

.scenario-step[data-pillar="ecology"] .scenario-tag { color: var(--pillar-ecology); }
.scenario-step[data-pillar="economy"] .scenario-tag { color: var(--pillar-economy); }
.scenario-step[data-pillar="social"]  .scenario-tag { color: #7A4A06; }
.scenario-step[data-pillar="cross"]   .scenario-tag { color: var(--pillar-cross); }

.scenario-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  margin-top: 8px;
}
.scenario-step h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding-bottom: 0.2em;
}
.scenario-step p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--char);
  margin: 0;
  max-width: none;
}
.scenario-step p .kw { font-family: var(--font-mono); font-size: 17px; color: var(--ink); }

/* ────────────────────────────────────────────────────────────
   SLIDE 14 — SYFERS
   ──────────────────────────────────────────────────────────── */
.syfers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  flex: 1;
  min-height: 0;
}
.syfers-text .display { font-size: 120px; margin-bottom: 32px; padding-bottom: 0.18em; }
.syfers-text .lead { max-width: 26em; }
.syfers-acronym {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
  margin-top: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 36em;
}
.syfers-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
.col-h {
  font-size: 12px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 10px;
}
.syfers-split p { font-size: 18px; line-height: 1.5; margin: 0; }

.syfers-screenshot {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.screenshot-chrome {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-snug);
  color: var(--char);
}
.screenshot-body {
  padding: 36px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ss-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 16px;
}
.ss-display {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 6px 0;
}
.ss-display--italic { font-style: italic; font-size: 28px; color: var(--char); margin-bottom: 0; }
.ss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.ss-cond {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 4px 0;
  align-items: baseline;
}
.ss-code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-wide);
  color: var(--char-soft);
}
.ss-name {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
}
.ss-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
}

/* ────────────────────────────────────────────────────────────
   SLIDE 15 — Alignment table
   ──────────────────────────────────────────────────────────── */
.align-sub {
  font-size: 22px;
  color: var(--char);
  margin: 8px 0 40px 0;
  max-width: 44em;
}
.align-table {
  width: 100%;
  border-collapse: collapse;
}
.align-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
  font-weight: var(--fw-medium);
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.align-table thead th:nth-child(1) { width: 24%; }
.align-table thead th:nth-child(2) { width: 22%; }
.align-table thead th:nth-child(3) { width: 54%; }
.align-table tbody td {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 0.5px solid var(--rule);
  vertical-align: baseline;
  line-height: 1.4;
}
.align-table tbody td em { font-style: italic; font-size: 25px; }
.align-table tbody td.mono {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  text-transform: lowercase;
}
.align-table tbody td:nth-child(3) {
  font-size: 20px;
  color: var(--char);
  line-height: 1.45;
}
.align-table tbody tr:last-child td { border-bottom: none; }

/* ────────────────────────────────────────────────────────────
   SLIDE 16 — Governance
   ──────────────────────────────────────────────────────────── */
.gov-list {
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.gov-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.gov-row:last-child { border-bottom: 1px solid var(--rule); }
.gov-n {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  color: var(--char-soft);
  padding-top: 8px;
}
.gov-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gov-body h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding-bottom: 0.04em;
}
.gov-body p {
  font-size: 18px;
  color: var(--char);
  margin: 0;
  max-width: 54em;
  line-height: 1.45;
}
.gov-row--center {
  background: var(--paper-deep);
  border-radius: var(--r-sm);
  padding: 24px 32px;
  margin: 12px -32px 0 -32px;
  border-top: 1px solid var(--pillar-cross);
  border-bottom: 1px solid var(--pillar-cross);
  position: relative;
}
.gov-row--center .gov-body { gap: 6px; }
.gov-row--center .gov-n { color: var(--roest); padding-top: 6px; }
.gov-center-h {
  font-family: var(--font-serif);
  font-style: italic !important;
  font-size: 30px !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  max-width: 28em;
  padding-bottom: 0.06em;
}

/* ────────────────────────────────────────────────────────────
   SLIDE 17 — Twenty years
   ──────────────────────────────────────────────────────────── */
.slide--quiet {
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 200px;
}
.quiet-frame {
  max-width: 1200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.quiet-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 48px;
}
.quiet-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 48px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  max-width: none;
  padding-bottom: 0.08em;
}
.quiet-line em { font-style: italic; }
.quiet-hair {
  max-width: 80px;
  margin: 40px 0 28px 0;
  border-top: 1px solid var(--rule);
}
.quiet-body {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.55;
  color: var(--char);
  margin: 0 0 28px 0;
  max-width: 36em;
}
.quiet-body em {
  font-style: italic;
  color: var(--ink);
}
.quiet-foot {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
}

/* ────────────────────────────────────────────────────────────
   SLIDE 18 — Capital
   ──────────────────────────────────────────────────────────── */
.capital-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 32px;
  flex: 1;
}
.capital-col {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 44px 44px 36px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.capital-col--alt {
  background: var(--paper-deep);
  border-color: var(--rule-strong);
}
.capital-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
}
.capital-col h2 {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  padding-bottom: 0.06em;
}
.capital-col p {
  font-size: 20px;
  color: var(--char);
  line-height: 1.5;
  margin: 0;
  max-width: 30em;
}
.capital-attrs {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 16px 0 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.capital-attrs li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ck {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.capital-attrs li span:nth-child(2) {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
}
.capital-foot {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  margin: 40px auto 0 auto;
  max-width: 48em;
}

/* ────────────────────────────────────────────────────────────
   SLIDE — The field · scale
   ──────────────────────────────────────────────────────────── */
.slide--field h1.display {
  font-size: 56px;
  margin-bottom: 8px;
}
.field-sub {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.5;
  color: var(--char);
  max-width: 52em;
  margin: 0 0 44px 0;
}
.field-cols {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 72px;
  flex: 1;
  min-height: 0;
  align-items: start;
}
.field-sep {
  background: var(--rule);
  align-self: stretch;
}
.field-geo {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.field-geo-hd {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.field-geo-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
}
.field-geo-label--eu { color: var(--pillar-ecology); }
.field-geo-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.field-tiers {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.field-tier {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field-tier-n {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--char-soft);
}
.field-tier-r {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 0.08em;
}
.field-bar-wrap {
  height: 2px;
  background: var(--paper-deep);
  border-radius: var(--r-full);
}
.field-bar {
  height: 100%;
  background: var(--roest);
  border-radius: var(--r-full);
}
.field-bar--eu { background: var(--pillar-ecology); }
.field-source {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

/* ────────────────────────────────────────────────────────────
   SLIDE — The legal position · land
   ──────────────────────────────────────────────────────────── */
.legal-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0 80px;
  flex: 1;
  align-items: start;
}
.legal-aside {
  background: var(--paper-deep);
  border-radius: var(--r-sm);
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.legal-aside-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
}
.legal-aside-head {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 4px;
}
.legal-aside-line {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.legal-aside-sub {
  font-size: 17px;
  color: var(--char);
  font-style: italic;
}
.legal-aside-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2px 0 12px 0;
}
.legal-aside-caveat {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  line-height: 1.55;
  margin: 0;
  max-width: none;
  padding-top: 2px;
}

/* ────────────────────────────────────────────────────────────
   SLIDES 21–22 — The closing sequence
   ──────────────────────────────────────────────────────────── */
.close-wrap {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.close-wrap p {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.65;
  color: var(--char);
  margin: 0;
  max-width: none;
}
.close-wrap--lg p {
  font-size: 24px;
  line-height: 1.65;
}
.close-final {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--ink);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

/* ────────────────────────────────────────────────────────────
   SLIDE 19 — It rubs / contact
   ──────────────────────────────────────────────────────────── */
.slide--rubs { padding-bottom: 64px; }
.rubs-frame {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.rubs-card {
  background: var(--paper-deep);
  padding: 56px 64px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-self: center;
}
.rubs-card p {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.rubs-close {
  font-style: italic;
  font-size: 26px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 8px !important;
  padding-bottom: 0.06em;
}

.rubs-contact {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 24px;
}
.rubs-contact-line {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rubs-next {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 !important;
  max-width: none !important;
  padding-bottom: 0.06em;
}
.rubs-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* ────────────────────────────────────────────────────────────
   How form emerges — the four together (slide 07)
   ──────────────────────────────────────────────────────────── */
.slide--emerge h1.display {
  max-width: 22em;
  margin-bottom: var(--sp-3);
}
.emerge-lead {
  max-width: 38em;
  margin-bottom: var(--sp-10);
  color: var(--ink);
}
.emerge-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 32px 0 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.emerge-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.emerge-col--in,
.emerge-col--out {
  padding: 0 8px;
}
.emerge-col--press {
  padding: 0 24px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.emerge-col-h {
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: 4px;
}
.emerge-list,
.emerge-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.emerge-item {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 22ch;
}
.emerge-rows {
  gap: 18px;
}
.emerge-row {
  display: grid;
  grid-template-columns: 4px auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding-left: 0;
  position: relative;
}
.emerge-row .pillar-stripe {
  position: static;
  height: 38px;
  width: 4px;
  top: 0;
  align-self: stretch;
}
.emerge-row__name {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.emerge-row__name em {
  font-style: italic;
  font-weight: var(--fw-regular);
}
.emerge-row[data-pillar="ecology"] .emerge-row__name em { color: var(--pillar-ecology); }
.emerge-row[data-pillar="economy"] .emerge-row__name em { color: var(--pillar-economy); }
.emerge-row[data-pillar="cross"]   .emerge-row__name em { color: var(--pillar-cross); }
.emerge-row[data-pillar="social"]  .emerge-row__name em { color: #7A4A06; }
.emerge-row__cap {
  font-size: 15px;
  letter-spacing: var(--ls-snug);
  color: var(--char);
  line-height: 1.5;
}
.emerge-hair {
  margin: 24px auto 16px !important;
  max-width: 80px;
}
.emerge-foot {
  text-align: center;
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
  margin: 0;
}

/* ────────────────────────────────────────────────────────────
   Microanimaties — reveal stagger triggered by slidechange
   ──────────────────────────────────────────────────────────── */
@keyframes deck-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes deck-reveal-hairline {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
.reveal {
  opacity: 0;
  will-change: opacity, transform;
}
.slide[data-active="true"] .reveal {
  animation: deck-reveal 420ms cubic-bezier(.2,.7,.2,1) forwards;
}
.slide[data-active="true"] hr.reveal {
  animation: deck-reveal-hairline 520ms cubic-bezier(.2,.7,.2,1) forwards;
  transform-origin: center;
}
.slide[data-active="true"] .reveal--1  { animation-delay:   0ms; }
.slide[data-active="true"] .reveal--2  { animation-delay:  90ms; }
.slide[data-active="true"] .reveal--3  { animation-delay: 180ms; }
.slide[data-active="true"] .reveal--4  { animation-delay: 270ms; }
.slide[data-active="true"] .reveal--5  { animation-delay: 360ms; }
.slide[data-active="true"] .reveal--6  { animation-delay: 450ms; }
.slide[data-active="true"] .reveal--7  { animation-delay: 540ms; }
.slide[data-active="true"] .reveal--8  { animation-delay: 630ms; }
.slide[data-active="true"] .reveal--9  { animation-delay: 720ms; }
.slide[data-active="true"] .reveal--10 { animation-delay: 810ms; }
.slide[data-active="true"] .reveal--11 { animation-delay: 900ms; }
.slide[data-active="true"] .reveal--12 { animation-delay: 990ms; }

/* Mark hover-affordance on cover */
.cover-marks .mark {
  transition: transform 180ms ease;
  cursor: default;
}
.cover-marks .mark:hover {
  transform: translateY(-2px);
}

/* SYFERS structural-marker */
.ss-cond {
  position: relative;
}
.ss-cond--structural .ss-name::after {
  content: ' ▪';
  color: var(--roest);
  font-size: 0.8em;
  letter-spacing: 0;
  padding-left: 2px;
}

/* ────────────────────────────────────────────────────────────
   Instrument-icon next to eyebrow (slides 8 · 9 · 10 · 11 · 12 · 13 · 14 · 15)
   ──────────────────────────────────────────────────────────── */
/* Same compact size on every instrument slide; subtle pillar tint;
   line-height neutral so the slide-head doesn't grow. */
.instrument-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  flex-shrink: 0;
  font-size: 0; /* kill text node from contributing to baseline */
  opacity: 0.85;
}
.instrument-mark svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke-width: 1.4;
}
/* pillar tint matches the eyebrow */
.instrument-mark.mark--ecology { color: var(--pillar-ecology); }
.instrument-mark.mark--economy { color: var(--pillar-economy); }
.instrument-mark.mark--cross   { color: var(--pillar-cross); }
.instrument-mark.mark--social  { color: var(--pillar-social); }

/* ────────────────────────────────────────────────────────────
   Compass app-view trajectory — slide 13
   Mock of the compass UI as it renders the Trajectory tab.
   ──────────────────────────────────────────────────────────── */
.capp {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  padding: 0;
  overflow: hidden;
}
.capp-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
  gap: 16px;
  flex-wrap: wrap;
}
.capp-chrome-left {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.capp-chrome-eyebrow {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
}
.capp-chrome-app {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--char);
}
.capp-chrome-nav {
  display: flex;
  gap: 18px;
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
}
.capp-chrome-nav--active {
  color: var(--ink);
  border-bottom: 1px solid var(--roest);
  padding-bottom: 1px;
}
.capp-tabs {
  display: flex;
  gap: 30px;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  color: var(--char-soft);
}
.capp-tab-n {
  color: var(--char-soft);
  padding-right: 4px;
}
.capp-tab--active {
  color: var(--ink);
  border-bottom: 2px solid var(--roest);
  padding-bottom: 4px;
  margin-bottom: -6px;
}
.capp-tab--active .capp-tab-n { color: var(--roest); }
.capp-stats {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.4fr;
  gap: 24px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--rule);
}
.capp-stat-v {
  font-family: var(--font-serif);
  font-size: 36px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
}
.capp-stat-v em { font-style: italic; }
.capp-stat-baseline { color: var(--char-soft); font-style: italic; }
.capp-stat-arrow { color: var(--char-soft); font-style: normal; margin: 0 4px; }
.capp-stat-current { color: var(--ink); font-style: italic; }
.capp-stat-l {
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.capp-stat--end {
  text-align: right;
}
.capp-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--char);
  padding: 18px 24px 4px;
  margin: 0 !important;
  max-width: 64ch;
}
.capp-section {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 24px 6px;
  border-top: 1px solid var(--rule);
}
.capp-section--orri {
  margin-top: 8px;
}
.capp-section-k {
  color: var(--roest);
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.capp-section-l {
  color: var(--char-soft);
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.capp-rows {
  list-style: none;
  margin: 0;
  padding: 0 24px;
}
.capp-row {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1.3fr) 1.4fr 90px;
  align-items: center;
  column-gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.capp-row:last-child { border-bottom: none; }
.capp-row-code {
  font-size: 14px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
}
.capp-row-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.capp-tag-struct {
  font-style: normal;
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--roest);
}
.capp-track {
  width: 100%;
  height: 24px;
  display: block;
}
.capp-track-div {
  stroke: var(--rule);
  stroke-width: 1;
}
.capp-track-line {
  stroke: var(--pillar-cross);
  stroke-width: 1.4;
}
.capp-dot--baseline {
  fill: var(--bone);
  stroke: var(--char-soft);
  stroke-width: 1;
}
.capp-dot--current {
  fill: var(--pillar-cross);
  stroke: none;
}
.capp-row-delta {
  font-size: 14px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
  text-align: right;
  white-space: nowrap;
}
.capp-row-delta--up {
  color: var(--pillar-ecology);
}

/* ────────────────────────────────────────────────────────────
   Compass trajectory — baseline vs current (slide 12 editorial)
   ──────────────────────────────────────────────────────────── */
.slide--trajectory h1.display {
  max-width: 18em;
  margin-bottom: var(--sp-3);
}
.slide--trajectory .instr-lead {
  max-width: 36em;
  margin-bottom: var(--sp-10);
}
.traj {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.traj-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  column-gap: 32px;
  align-items: center;
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--rule);
}
.traj-h-name {
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.traj-h-scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 13px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--char-soft);
}
.traj-h-scale span {
  text-align: center;
}
.traj-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.traj-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  column-gap: 32px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.traj-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.traj-code {
  font-size: 15px;
  color: var(--char-soft);
  letter-spacing: var(--ls-snug);
  width: 28px;
  flex-shrink: 0;
}
.traj-name {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
}
.traj-name em { font-style: italic; }
.traj-scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  align-items: center;
  min-height: 28px;
}
.traj-scale::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--rule);
  top: 50%;
  z-index: 0;
}
.traj-cell {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: var(--bone);
  border: 1px solid var(--rule);
}
.traj-cell--baseline {
  background: var(--bone);
  border: 1px solid var(--char-soft);
}
.traj-cell--current {
  background: var(--pillar-cross);
  border: 1px solid var(--pillar-cross);
}
.traj-cell--baseline.traj-cell--current {
  /* baseline AND current on same step — filled with a ring */
  background: var(--pillar-cross);
  border: 1px solid var(--pillar-cross);
  box-shadow: 0 0 0 2px var(--bone), 0 0 0 3px var(--char-soft);
}
.traj-foot {
  margin: 22px 0 0 0 !important;
  font-size: 14px;
  letter-spacing: var(--ls-snug);
  color: var(--char-soft);
  text-align: left;
}

/* lens letter — translated sibling foot */
.letter-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--char-soft);
}
.letter-foot span { font-size: 14px; }

/* Reduced motion + print: skip animations, show content immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; animation: none !important; transform: none !important; }
}
@media print {
  .reveal { opacity: 1 !important; animation: none !important; transform: none !important; }
  .emerge-grid { break-inside: avoid; page-break-inside: avoid; }
  .cover-marks .mark { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   Shared deck format layer · moved out of the single-deck inline
   <style id="li-overrides"> when /present became multi-deck.
   1080×720 format overrides + dock chrome + language switch.
   Rule: a pattern used by 2+ decks lives here; a genuine one-off
   lives in a small inline <style> in that one deck. Never copy
   this file per deck.
   ════════════════════════════════════════════════════════════ */
/* ── Language switch (CSS-only show/hide, EN/PT) ────────── */
html[data-lang="pt"] .lang-en { display: none !important; }
html[data-lang="en"] .lang-pt { display: none !important; }
/* ────────────────────────────────────────────────────────────
   LinkedIn 2:3 landscape format · 1080×720
   All overrides scoped to .slide to avoid disturbing deck chrome.
   ──────────────────────────────────────────────────────────── */

/* ── Global scale-down ──────────────────────────────────── */
.slide--padded {
  padding: 40px 68px 32px 68px;
}
.slide-head { margin-bottom: 20px; }

.slide h1.display {
  font-size: 40px;
  margin-bottom: 14px;
  padding-bottom: 0.14em;
}
.slide p.lead     { font-size: 18px; line-height: 1.5; }
.lead-stack       { gap: 16px; }

/* ── Eyebrow ────────────────────────────────────────────── */
.slide-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
}
.instrument-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  flex-shrink: 0;
}
.instrument-mark svg { width: 100%; height: 100%; }

/* ── Eyebrow shadow ─────────────────────────────────────── */
.eyebrow-shadow {
  font-size: 13px;
  margin: -16px 0 8px 0 !important;
  max-width: 48em;
}

/* ── Cover ──────────────────────────────────────────────── */
.slide--cover  { padding: 52px 90px; }
.cover-wordmark   { font-size: 72px; }
.cover-wordmark-dot { font-size: 72px; }
.cover-tagline    { font-size: 15px; margin: 12px auto 0 !important; max-width: 28em; }
.cover-subtitle   { font-size: 24px; margin-bottom: 12px; }
.cover-eyebrow    { font-size: 12px; margin-bottom: 20px; }
.cover-frame hr.hairline { margin: 18px 0 14px 0; }

/* ── Distinction (slide 2) ──────────────────────────────── */
.distinction { border-top: none; border-bottom: none; }
.distinction-col  { padding: 20px 40px 20px 0; gap: 12px; }
.distinction-col--forest { padding-left: 40px; }
.distinction-h    { font-size: 28px; }
.distinction-p    { font-size: 14px; }
.distinction-close { font-size: 16px; margin-top: 16px; }

/* ── Federation paragraph (slide 3) ────────────────────── */
.prose-wrap .lead { font-size: 18px; }
.legal-block { margin-top: 18px; }
.legal-row   { grid-template-columns: 160px 1fr; padding: 6px 0; gap: 20px; }
.legal-v     { font-size: 14px; }
.legal-v.mono { font-size: 12px; }

/* ── What a Lab is (slide 4) ────────────────────────────── */
.slide--lab h1.display { font-size: 30px; margin-bottom: 10px; }
.lab-anatomy {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 10px 0 8px;
}
.lab-col-h  { font-size: 10px; }
.lab-col-p  { font-size: 13px; line-height: 1.4; }
.lab-foot   { font-size: 11px; margin: 10px 0 0 0 !important; }
.lab-foot-asof { float: none !important; position: static !important; display: inline; }

/* ── Why federation (slide 5) ───────────────────────────── */
.why-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  flex: 1;
}
.charter-quote  { padding: 22px 28px; }
.pull--live p   { font-size: 16px; }
.why-list       { gap: 10px; }
.why-line       { font-size: 15px; }

/* ── Four instruments (slide 6) · 2x2 grid ─────────────── */
.quad {
  flex: 1;
  gap: 10px;
}
.quad-cell      { padding: 5px 14px 5px 14px; gap: 4px; }
.quad-cell .mark--lg { width: 32px !important; height: 32px !important; margin-top: 2px !important; margin-bottom: 2px !important; }
.quad-name      { font-size: 20px; }
.quad-url       { font-size: 10px; }
.quad-desc      { font-size: 12px; }

/* ── Why software (slide 7) ─────────────────────────────── */
.slide--why-sw h1.display { font-size: 30px; margin-bottom: 10px; }
.why-sw-grid  { gap: 14px; padding: 8px 0; }
.why-sw-col-p { font-size: 13px; }
.why-sw-foot  { font-size: 11px; margin: 10px 0 0 0 !important; }

/* ── Instrument slides (chart/lens/compass/people) ──────── */
.instr-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 16px;
}
.instr-left {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 6px;
  align-items: start;
  padding-right: 0;
}
.instr-left .display {
  font-size: 56px;
  grid-row: 1 / 3;
  grid-column: 1;
  margin-bottom: 0;
  padding-bottom: 0.1em;
  align-self: center;
}
.instr-lead   { font-size: 14px; grid-column: 2; margin-bottom: 0; }
.instr-aside  { display: none; }
.instr-url    { grid-column: 2; margin-top: 0; padding-top: 8px; font-size: 12px; }
.instr-right  { min-height: 280px; }
.app-screenshot { min-height: 280px; }
.app-screenshot img { object-fit: cover; object-position: top; }

/* compass-left uses same approach */
.compass-grid--screenshot {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
.compass-left {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  row-gap: 6px;
  align-items: start;
}
.compass-left .display {
  font-size: 56px;
  grid-row: 1 / 3;
  grid-column: 1;
  margin-bottom: 0;
  padding-bottom: 0.1em;
  align-self: center;
}
.compass-left .instr-lead { font-size: 14px; grid-column: 2; margin-bottom: 0; }
.compass-left .instr-aside { display: none; }
.compass-left .instr-url { grid-column: 2; font-size: 12px; margin-top: 0; padding-top: 6px; }

/* ── Audit / proposal (slide 9) ─────────────────────────── */
.audit          { padding: 8px 18px 6px 18px; gap: 3px; }
.audit-title    { font-size: 16px; }
.audit-grid     { grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.audit-foot     { padding-top: 6px !important; font-size: 10px; }
.audit-v        { font-size: 12px; }
.audit-init     { width: 24px; height: 24px; font-size: 9px; }
.audit-docs span { font-size: 10px; }
.audit-hash     { font-size: 10px; }

/* ── Lens letter (slide 11) · EN only ───────────────────── */
.lens-pair {
  grid-template-columns: 1fr;
  gap: 0;
}
.letter--pt { display: none; }
.letter--en { border-radius: var(--r-sm); }
.letter-prose p { font-size: 13px; }
.letter-foot { margin-top: auto; font-size: 11px; }
.confidence-note { font-size: 11px; margin-top: 6px; }

/* ── Scenario (slide 14) · 2x2 grid ───────────────────── */
.scenario {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.slide[data-screen-label="14 One scenario"] h1.display { font-size: 26px; }
.scenario-step { padding: 14px 14px 12px 14px; }
.scenario-step h3 { font-size: 15px; }
.scenario-step p  { font-size: 11px; }

/* ── SYFERS (slide 16) · text-only ──────────────────────── */
.syfers-grid { grid-template-columns: 1fr; gap: 20px; }
.syfers-text .display { font-size: 60px; margin-bottom: 8px; }
.syfers-acronym { font-size: 10px; margin-top: 6px; }
.syfers-split { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.syfers-split p { font-size: 12px; line-height: 1.4; }
.syfers-text .lead { font-size: 16px; max-width: none; }
.syfers-text .instr-url { font-size: 12px; margin-top: 8px; }
.syfers-screenshot { display: none; }

/* ── Alignment table (slide 18) ─────────────────────────── */
.align-table thead th { padding: 6px 0; font-size: 10px; }
.align-table tbody td { padding: 8px 0; font-size: 13px; line-height: 1.35; }
.align-table tbody td em { font-size: 15px; }
.align-table tbody td:nth-child(3) { font-size: 12px; }
.align-table thead th:nth-child(1) { width: 22%; }
.align-table thead th:nth-child(2) { width: 20%; }
.align-table thead th:nth-child(3) { width: 58%; }
.align-sub { font-size: 13px; margin: 2px 0 16px 0; }

/* ── Governance (slide 19) ──────────────────────────────── */
.gov-list   { margin-top: 8px; }
.gov-row    { padding: 8px 0; grid-template-columns: 48px 1fr; }
.gov-body h3 { font-size: 16px; }
.gov-body p  { font-size: 11px; }
.gov-center-h { font-size: 20px !important; }
.gov-row--center { padding: 14px 20px; margin: 8px -28px 0 -28px; }

/* ── Twenty years (slide 20) ────────────────────────────── */
.quiet-line { font-size: 32px; }
.quiet-eyebrow { white-space: nowrap; }
.quiet-body {
  font-size: 15px;
  margin: 12px auto 0 auto;
  max-width: 32em;
}

/* ── Capital (slide 21) ─────────────────────────────────── */
.capital-cols  { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.capital-col   { padding: 18px 22px 16px 22px; }
.capital-col h2 { font-size: 26px; }
.capital-col p  { font-size: 13px; }
.capital-foot   { font-size: 15px; margin: 14px auto 0 auto; }

/* ── It rubs (slide 22) ─────────────────────────────────── */
.rubs-frame {
  grid-template-columns: 1fr;
  gap: 16px;
}
.rubs-card { padding: 24px 32px; gap: 10px; }
.rubs-card p { font-size: 13px; line-height: 1.4; }
.rubs-close { font-size: 15px !important; }
.rubs-next  { font-size: 16px; }
.rubs-contact { padding-bottom: 0; }

/* ── Boundary organisation (slide 15) ──────────────────── */
.boundary-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 10px 0 14px;
}
.boundary-world {
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.boundary-world-h { font-size: 10px; letter-spacing: var(--ls-caps); margin-bottom: 10px; }
.boundary-world-p { font-size: 13px; line-height: 1.55; margin: 0; }
.boundary-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}
.boundary-gap-word {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--char-soft);
}
.boundary-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  text-align: center;
}
.boundary-node-name { font-size: 13px; }
.boundary-node-sub  { font-size: 10px; opacity: 0.6; }
.boundary-close {
  font-size: 12px;
  line-height: 1.65;
  color: var(--char-soft);
  margin: 0 !important;
}

/* ── Sixteen conditions (slide 17) ─────────────────────── */
.sixteen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 52px;
  margin: 8px 0 10px;
}
.sixteen-col-h {
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--rule);
}
.cond-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cond-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.cond-code { font-size: 10px; min-width: 26px; color: var(--char-soft); flex-shrink: 0; }
.cond-name { font-size: 12px; line-height: 1.3; }
.cond-row--structural .cond-name { font-weight: 600; }
.cond-mark { opacity: 0.4; font-weight: 400; }
.sixteen-levels {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.sixteen-levels-h { font-size: 10px; letter-spacing: var(--ls-caps); margin-bottom: 6px; }
.levels-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
}
.level {
  font-size: 10px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.level--last {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.level-sep { color: var(--char-soft); font-size: 12px; }
.levels-note { font-size: 10px; color: var(--char-soft); margin: 0; }


/* ── Deck dock ───────────────────────────────────────────
   One floating bottom bar that combines slide navigation,
   a counter, an expandable mini-thumbnail tray, and the
   EN/PT toggle. The built-in deck-stage rail is hidden
   via `no-rail` on <deck-stage>; this dock replaces it
   with a horizontal, minimal-footprint surface.
   ──────────────────────────────────────────────────────── */
.deck-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.deck-dock.is-idle { opacity: 0.28; }
.deck-dock > * { pointer-events: auto; }

.dock-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 40px;
  padding: 0 16px;
  background: rgba(20, 20, 20, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dock-group { display: inline-flex; align-items: center; gap: 4px; }
.dock-nav { flex: 0 0 auto; }
.dock-right { margin-left: auto; gap: 10px; }
.dock-lang { gap: 2px; }

/* Allow vertical scroll on touch but reserve horizontal gestures
   for our swipe-to-navigate handler on the deck. */
deck-stage { touch-action: pan-y pinch-zoom; }

.dock-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border: none;
  padding: 6px 8px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.dock-btn:hover,
.dock-btn:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.dock-btn:disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: default;
  background: transparent;
}
.dock-arrow { font-size: 18px; padding: 4px 10px; }

.dock-fs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
}
.dock-fs-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.dock-fs-exit { display: none; }
.deck-dock[data-fs="on"] .dock-fs-enter { display: none; }
.deck-dock[data-fs="on"] .dock-fs-exit { display: block; }

/* Pseudo-fullscreen fallback — used where the real Fullscreen API is
   unavailable or disabled (iOS browsers, fullscreen-disabled iframes). The
   deck already covers the viewport, so we drop the dock bar's background and
   hide the secondary chrome (counter, thumbnails, language) for a clean,
   edge-to-edge view. The nav arrows + exit toggle stay, each on its own pill,
   and swipe / tap navigation keeps working. */
html[data-pseudo-fs="on"] .dock-bar {
  background: transparent;
  border-top: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-pseudo-fs="on"] .dock-counter,
html[data-pseudo-fs="on"] .dock-lang,
html[data-pseudo-fs="on"] .dock-tray { display: none; }
html[data-pseudo-fs="on"] .dock-btn {
  background: rgba(20, 20, 20, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-pseudo-fs="on"] .dock-btn:hover,
html[data-pseudo-fs="on"] .dock-btn:focus-visible {
  background: rgba(40, 40, 40, 0.8);
}

.dock-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.dock-counter:hover,
.dock-counter:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.dock-counter-num { color: #fff; font-weight: 500; }
.dock-counter-sep { opacity: 0.5; }
.dock-counter-total { opacity: 0.75; }
.dock-counter-chev {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  opacity: 0.55;
  transform: rotate(180deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.deck-dock[data-tray="open"] .dock-counter-chev { transform: rotate(0deg); opacity: 1; }

.lang-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.lang-btn:hover,
.lang-btn:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.lang-btn.active {
  background: #D97757;
  color: #faf9f6;
}

.dock-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  background: rgba(20, 20, 20, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.24s ease, opacity 0.24s ease, visibility 0s linear 0.24s;
}
.deck-dock[data-tray="open"] .dock-tray {
  max-height: 110px;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.24s ease, opacity 0.24s ease, visibility 0s linear 0s;
}

.dock-tray-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.dock-tray-strip::-webkit-scrollbar { height: 6px; }
.dock-tray-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.dock-tray-strip::-webkit-scrollbar-track { background: transparent; }

.dock-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.45);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dock-thumb:hover,
.dock-thumb:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  outline: none;
}
.dock-thumb[data-current="true"] {
  border-color: #D97757;
  color: #fff;
  background: rgba(217, 119, 87, 0.10);
}

@media (max-width: 640px) {
  .dock-bar { gap: 10px; padding: 0 10px; }
  .dock-counter { padding: 6px 6px; font-size: 11px; }
  .dock-counter-chev { display: none; }
  .dock-tray { display: none; }
}


/* ── Five instruments (ledger joined the set) ───────────── */
.mark--roest { color: var(--roest); }
.instrument-mark.mark--roest { color: var(--roest); }
.quad--five {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
}
.quad--five .quad-cell { grid-column: span 2; padding: 20px 28px 18px 28px; }
.quad--five .quad-cell:nth-child(4) { grid-column: 2 / 4; }
.quad--five .quad-cell:nth-child(5) { grid-column: 4 / 6; }

/* ── ledger report mock (seed data) ─────────────────────────
   Rendered inside the standard .app-screenshot frame so a real
   screenshot-ledger.png can replace it without layout change. */
.ledger-mock {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.ledger-mock-chrome {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--char-soft);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.ledger-mock-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ledger-mock-h { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0; }
.ledger-mock-state { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger-mock-rows {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 11px;
}
.ledger-mock-row {
  display: grid;
  grid-template-columns: 64px 1fr 44px;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  color: var(--char);
}
.ledger-mock-row:last-child { border-bottom: none; }
.ledger-mock-row .num { text-align: right; color: var(--ink); }
.ledger-mock-check { display: flex; flex-direction: column; gap: 4px; color: var(--char); font-size: 11px; }
.ledger-mock-check > span::before { content: "✓ "; color: var(--pillar-ecology); }
.ledger-mock-foot { color: var(--char-soft); font-size: 9.5px; line-height: 1.5; margin: 0; }