/* ============================================================================
   Buzz × Nostr events — deck-local components.
   Extends the shared Cognitive Electricity Reveal bridge. Six recurring
   devices only: gate rail, passport card, partition bar, durability rail,
   lane sequence, ledger. No slide introduces a seventh grammar.
   ============================================================================ */

:root {
  /* Semantic colour budget. Bound once, held for the whole deck. */
  --sig: var(--gold);          /* what this slide introduces; signed human intent */
  --durable: var(--teal);      /* committed to Postgres; survives a restart      */
  --trap: var(--coral);        /* the wrong intuition, the gap, the volatile     */
  --relay: var(--violet);      /* relay-authored: the relay signing as itself    */
  --eph: var(--periwinkle);    /* ephemeral / in-flight                          */
}

/* ---------------------------------------------------------------- utilities */

.reveal .wide { max-width: none !important; }
.reveal .tight h2 { margin-bottom: 10px; }
.reveal .mono { font-family: var(--mono); }
.reveal .src {
  margin-top: auto;
  padding-top: 20px;
  color: var(--text-faint);
  font: 400 16px/1.4 var(--mono);
  letter-spacing: .06em;
}
.reveal .src b { color: var(--text-dim); font-weight: 500; }

/* The running misconception chip: the wrong model each act dislodges. */
.reveal .myth {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 9px 18px;
  background: var(--coral-soft);
  border-left: 3px solid var(--trap);
  color: var(--text);
  font: italic 400 25px/1.2 var(--serif);
}
.reveal .myth b {
  color: var(--trap);
  font: 500 14px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-style: normal;
}
.reveal .myth.struck { opacity: .5; text-decoration: line-through; text-decoration-color: var(--trap); }

/* ------------------------------------------------------- D1 · the gate rail */

.reveal .rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: 100%;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .rail > div {
  padding: 22px 20px 20px;
  background: var(--bg);
  border-top: 3px solid transparent;
  opacity: .34;
  transition: opacity .2s ease;
}
.reveal .rail > div.lit { opacity: 1; border-top-color: var(--sig); background: var(--bg-2); }
.reveal .rail .n {
  color: var(--text-faint);
  font: 500 13px/1 var(--mono);
  letter-spacing: .2em;
}
.reveal .rail .g {
  margin: 14px 0 10px;
  color: var(--text-bright);
  font: 400 30px/1.05 var(--serif);
}
.reveal .rail > div.lit .g { color: var(--sig); }
.reveal .rail .o {
  max-width: none;
  color: var(--text-dim);
  font: 400 15px/1.35 var(--mono);
  letter-spacing: .02em;
}

/* compact rail for act openers */
.reveal .rail.compact > div { padding: 12px 14px 12px; }
.reveal .rail.compact .g { margin: 8px 0 0; font-size: 21px; }
.reveal .rail.compact .o { display: none; }
.reveal .rail.compact .n { font-size: 11px; }

/* ---------------------------------------------------- D2 · the passport card */

.reveal .cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .pp {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--bg);
  border-top: 3px solid var(--rule-strong);
}
.reveal .pp.is-sig    { border-top-color: var(--sig); }
.reveal .pp.is-dur    { border-top-color: var(--durable); }
.reveal .pp.is-relay  { border-top-color: var(--relay); }
.reveal .pp.is-eph    { border-top-color: var(--eph); }
.reveal .pp.is-trap   { border-top-color: var(--trap); }
.reveal .pp .kind {
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .16em;
}
.reveal .pp h3 {
  margin: 12px 0 14px;
  font-size: 27px;
  line-height: 1.08;
}
.reveal .pp dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 0;
  align-content: start;
}
.reveal .pp dt {
  color: var(--text-faint);
  font: 500 12px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reveal .pp dd {
  margin: 0;
  color: var(--text-dim);
  font: 400 18px/1.35 var(--sans);
}
.reveal .pp dd em { color: var(--text-bright); font-style: normal; }

/* ------------------------------------------------- D3 · the partition bar */

.reveal .partition {
  display: flex;
  width: 100%;
  margin-top: 34px;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .partition > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 26px 22px 26px;
  background: var(--bg);
  border-top: 4px solid var(--rule-strong);
}
.reveal .partition .num {
  color: var(--text-bright);
  font: 400 58px/1 var(--serif);
}
.reveal .partition .lab {
  margin-top: 14px;
  color: var(--text-dim);
  font: 500 15px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reveal .partition .ex {
  max-width: none;
  margin-top: 12px;
  color: var(--text-faint);
  font: 400 17px/1.34 var(--sans);
}
.reveal .partition .p-sig   { border-top-color: var(--sig); }
.reveal .partition .p-sig   .num { color: var(--sig); }
.reveal .partition .p-relay { border-top-color: var(--relay); }
.reveal .partition .p-relay .num { color: var(--relay); }
.reveal .partition .p-trap  { border-top-color: var(--trap); }
.reveal .partition .p-trap  .num { color: var(--trap); }
.reveal .partition .p-eph   { border-top-color: var(--eph); }
.reveal .partition .p-eph   .num { color: var(--eph); }
.reveal .partition .p-dur   { border-top-color: var(--durable); }
.reveal .partition .p-dur   .num { color: var(--durable); }
.reveal .partition .p-dorm  { border-top-style: dashed; border-top-color: var(--trap); }
.reveal .partition .p-dorm  .num { color: var(--trap); opacity: .7; }

.reveal .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.reveal .legend span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font: 500 16px/1 var(--mono);
  letter-spacing: .08em;
}
.reveal .legend span::before {
  content: "";
  width: 22px;
  height: 4px;
  background: currentColor;
}
.reveal .legend .l-sig   { color: var(--sig); }
.reveal .legend .l-dur   { color: var(--durable); }
.reveal .legend .l-trap  { color: var(--trap); }
.reveal .legend .l-relay { color: var(--relay); }
.reveal .legend .l-eph   { color: var(--eph); }

/* ------------------------------------------------- D4 · the durability rail */

.reveal .durrail { width: 100%; margin-top: 30px; }
.reveal .durrail .axis {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.reveal .durrow {
  display: grid;
  grid-template-columns: 290px 1fr 230px;
  gap: 26px;
  align-items: center;
  min-height: 92px;
  padding: 16px 24px;
  margin-bottom: 2px;
  background: var(--bg-2);
  border-left: 4px solid var(--trap);
}
.reveal .durrow.is-durable { border-left-color: var(--durable); background: var(--bg-3); }
.reveal .durrow .what {
  color: var(--text-bright);
  font: 400 30px/1.08 var(--serif);
}
.reveal .durrow .where {
  max-width: none;
  color: var(--text-dim);
  font: 400 19px/1.34 var(--mono);
}
.reveal .durrow .verdict {
  text-align: right;
  color: var(--trap);
  font: 500 17px/1.25 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .durrow.is-durable .verdict { color: var(--durable); }

/* ------------------------------------------------- D6 · the lane sequence */

.reveal .lanes { width: 100%; margin-top: 26px; }
.reveal .lane {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: stretch;
  border-bottom: 1px solid var(--rule-soft);
}
.reveal .lane:last-child { border-bottom: 0; }
.reveal .lane > .ln {
  display: flex;
  align-items: center;
  padding: 12px 0;
  color: var(--text-faint);
  font: 500 15px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reveal .lane > .steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  min-width: 0;
}
.reveal .step {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: var(--bg-2);
  border-left: 3px solid var(--rule-strong);
  color: var(--text);
  font: 400 19px/1.24 var(--sans);
}
.reveal .step b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-faint);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reveal .step.gate   { border-left-color: var(--sig);   background: var(--bg-3); }
.reveal .step.gate b { color: var(--sig); }
.reveal .step.drop   { border-left-color: var(--trap); }
.reveal .step.drop b { color: var(--trap); }
.reveal .step.eph    { border-left-color: var(--eph); }
.reveal .step.rel    { border-left-color: var(--relay); }
.reveal .step.dur    { border-left-color: var(--durable); }
.reveal .arrow { flex: 0 0 auto; color: var(--text-faint); font: 400 22px/1 var(--mono); }

/* ------------------------------------------------------- the funnel (ingest) */

.reveal .funnel { width: 100%; margin-top: 22px; }
.reveal .funnel .fr {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 20px;
  align-items: center;
  min-height: 52px;
  margin: 0 auto 2px;
  padding: 8px 26px;
  background: var(--bg-2);
  border-left: 3px solid var(--rule-strong);
}
.reveal .funnel .fr .i {
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .14em;
}
.reveal .funnel .fr .t {
  max-width: none;
  color: var(--text);
  font: 400 23px/1.22 var(--sans);
}
.reveal .funnel .fr .v {
  color: var(--sig);
  font: 500 19px/1 var(--mono);
  letter-spacing: .06em;
}
.reveal .funnel .fr.hard { border-left-color: var(--sig); background: var(--bg-3); }
.reveal .funnel .fr.fork { border-left-color: var(--relay); margin-top: 16px; }
.reveal .funnel .fr.fork .t { color: var(--text-bright); font-family: var(--serif); font-size: 28px; }

/* ------------------------------------------------- the destination canvas */

.reveal .dests {
  display: grid;
  grid-template-columns: repeat(var(--dcols, 4), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .dest {
  padding: 22px 20px;
  background: var(--bg);
  border-top: 3px solid var(--rule-strong);
}
.reveal .dest .dk {
  color: var(--text-faint);
  font: 500 13px/1.3 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reveal .dest h3 { margin: 10px 0 8px; font-size: 25px; line-height: 1.1; }
.reveal .dest p { max-width: none; color: var(--text-dim); font-size: 18px; line-height: 1.34; }
.reveal .dest.d-dur   { border-top-color: var(--durable); }
.reveal .dest.d-relay { border-top-color: var(--relay); }
.reveal .dest.d-eph   { border-top-color: var(--eph); }
.reveal .dest.d-trap  { border-top-color: var(--trap); }
.reveal .dest.d-sig   { border-top-color: var(--sig); }

/* ------------------------------------------------------------ code / JSON */

.reveal pre.j {
  width: 100%;
  margin: 0;
  padding: 22px 26px;
  background: var(--bg-2);
  border-left: 3px solid var(--rule-strong);
  box-shadow: none;
  font: 400 21px/1.5 var(--mono);
  color: var(--text-dim);
  white-space: pre;
  overflow: visible;
}
.reveal pre.j b { color: var(--text-bright); font-weight: 500; }
.reveal pre.j .hi { color: var(--sig); font-weight: 500; }
.reveal pre.j.is-relay { border-left-color: var(--relay); }
.reveal pre.j.is-sig { border-left-color: var(--sig); }
.reveal .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; margin-top: 18px; }
.reveal .pair .cap {
  margin-top: 14px;
  max-width: none;
  color: var(--text-dim);
  font: 400 21px/1.32 var(--sans);
}
.reveal .pair .cap b { color: var(--text-bright); font-weight: 500; }
.reveal .pair .fate {
  margin-top: 10px;
  color: var(--durable);
  font: 500 16px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reveal .pair .fate.other { color: var(--relay); }

/* ------------------------------------------------------------- the matrix */

.reveal .matrix {
  display: grid;
  width: 100%;
  margin-top: 26px;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  font-family: var(--mono);
}
.reveal .matrix > div { padding: 14px 16px; background: var(--bg); }
.reveal .matrix .mh {
  background: var(--bg-2);
  color: var(--text-faint);
  font: 500 13px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .matrix .mr {
  background: var(--bg-2);
  color: var(--text);
  font: 400 19px/1.25 var(--sans);
}
.reveal .matrix .y { color: var(--durable); font-size: 21px; }
.reveal .matrix .n { color: var(--trap); font-size: 21px; }
.reveal .matrix .c { color: var(--text-faint); font-size: 16px; }

/* --------------------------------------------------------- stack (layers) */

.reveal .layers { width: 100%; margin-top: 22px; }
.reveal .layer {
  display: grid;
  grid-template-columns: 250px 300px 1fr;
  gap: 28px;
  align-items: center;
  min-height: 82px;
  margin-bottom: 2px;
  padding: 16px 26px;
  background: var(--bg-2);
  border-left: 4px solid var(--rule-strong);
}
.reveal .layer .lk { color: var(--text-faint); font: 500 14px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.reveal .layer .lv { color: var(--text-bright); font: 400 31px/1.06 var(--serif); }
.reveal .layer .lg { max-width: none; color: var(--text-dim); font-size: 20px; line-height: 1.32; }
.reveal .layer.is-sig { border-left-color: var(--sig); background: var(--bg-3); }
.reveal .layer.is-sig .lk { color: var(--sig); }
.reveal .layer.is-dur { border-left-color: var(--durable); }
.reveal .layer.is-eph { border-left-color: var(--eph); }
.reveal .layer.is-relay { border-left-color: var(--relay); }
.reveal .break {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: center;
  margin: 2px 0;
  padding: 10px 26px;
  border-left: 4px dashed var(--trap);
  color: var(--trap);
  font: 500 17px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- ledgers */

.reveal .ce-proof-ledger-row.dashed { opacity: .72; }
.reveal .ce-proof-ledger-row.dashed .ce-proof-ledger-claim { color: var(--text-dim); }
.reveal .st {
  display: inline-block;
  padding: 4px 12px;
  font: 500 15px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .st-ok    { color: var(--durable); border: 1px solid color-mix(in oklab, var(--durable) 45%, transparent); }
.reveal .st-gated { color: var(--sig);     border: 1px solid color-mix(in oklab, var(--sig) 45%, transparent); }
.reveal .st-no    { color: var(--trap);    border: 1px dashed color-mix(in oklab, var(--trap) 55%, transparent); }
.reveal .st-fail  { color: var(--trap);    border: 1px solid color-mix(in oklab, var(--trap) 55%, transparent); }

/* --------------------------------------------------------- radial: OK slide */

.reveal .okgrid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  margin-top: 26px;
}
.reveal .okbadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 30px;
  background: var(--bg-3);
  border: 1px solid color-mix(in oklab, var(--sig) 40%, transparent);
}
.reveal .okbadge .b1 { color: var(--sig); font: 400 86px/1 var(--mono); letter-spacing: .04em; }
.reveal .okbadge .b2 { margin-top: 18px; text-align: center; color: var(--text-dim); font: 400 20px/1.32 var(--sans); max-width: 18ch; }
.reveal .okclaims { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.reveal .okclaims > div { padding: 20px 22px; background: var(--bg); border-left: 3px solid var(--trap); }
.reveal .okclaims > div.yes { border-left-color: var(--durable); background: var(--bg-2); }
.reveal .okclaims .ok-k { color: var(--trap); font: 500 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.reveal .okclaims > div.yes .ok-k { color: var(--durable); }
.reveal .okclaims p { max-width: none; margin-top: 10px; font-size: 21px; line-height: 1.3; color: var(--text-dim); }
.reveal .okclaims > div.yes p { color: var(--text-bright); }

/* ------------------------------------------------- extension proposal cards */

.reveal .props {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .prop {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: var(--bg-2);
  border-top: 3px solid var(--sig);
}
.reveal .prop .pn { color: var(--sig); font: 500 14px/1 var(--mono); letter-spacing: .2em; }
.reveal .prop h3 { margin: 14px 0 12px; font-size: 31px; line-height: 1.08; }
.reveal .prop p { max-width: none; color: var(--text-dim); font-size: 20px; line-height: 1.36; }
.reveal .prop .surf {
  margin-top: 14px;
  color: var(--text-faint);
  font: 500 14px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .prop .q {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--text);
  font: italic 400 21px/1.32 var(--serif);
}
.reveal .prop.cheap { border-top-color: var(--durable); }
.reveal .prop.cheap .pn { color: var(--durable); }
.reveal .prop.hard { border-top-color: var(--trap); }
.reveal .prop.hard .pn { color: var(--trap); }

/* ----------------------------------------------------------- worksheet card */

.reveal .sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 24px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .sheet > div { display: grid; grid-template-columns: 38px 1fr; gap: 16px; padding: 15px 22px; background: var(--bg); }
.reveal .sheet .qn { color: var(--sig); font: 500 14px/1.7 var(--mono); letter-spacing: .1em; }
.reveal .sheet .qt { color: var(--text); font: 400 21px/1.34 var(--sans); }
.reveal .sheet .qt em { color: var(--text-faint); font-style: normal; font-family: var(--mono); font-size: 16px; display: block; margin-top: 3px; }

/* ------------------------------------------------------------------ title */

.reveal .title-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; }
.reveal .title-hero h1 { max-width: 13ch; }
.reveal .three-lines { display: grid; gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.reveal .three-lines > div { padding: 22px 24px; background: var(--bg); border-left: 3px solid var(--sig); }
.reveal .three-lines .tn { color: var(--text-faint); font: 500 13px/1 var(--mono); letter-spacing: .18em; }
.reveal .three-lines p { max-width: none; margin-top: 10px; color: var(--text-bright); font: italic 400 24px/1.28 var(--serif); }

/* The cold open's proof object must reach the lower field rather than strand
   empty space above the landing line. */
.reveal .pair.fill { flex: 1; min-height: 0; align-items: stretch; }
.reveal .pair.fill > div { display: flex; flex-direction: column; }
.reveal .pair.fill .cap { margin-top: 34px; }
.reveal .pair.fill .fate { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--rule); }

/* ============================================================================
   Headings run the full slide measure.
   The shared bridge clamps h1 to 11ch and h2 to 18ch, which wraps slide titles
   into a narrow column and leaves the right half of the slide empty. These
   titles are single claims, not reading copy, so they take the whole width.
   ============================================================================ */

.reveal h1,
.reveal .hero h1,
.reveal .ce-hero h1 { max-width: none; }
.reveal h2 { max-width: none; }
.reveal h3 { max-width: none; }
.reveal .ce-dek { max-width: 44ch; }
.reveal p.support { max-width: 66em; }

/* ============================================================================
   THE ANCHOR MODEL — one diagram at six resolutions.
   L0 three boxes · L1 who signs · L2 box 2 opens · L3 box 3 splits ·
   L4 a region lit per act · L5 insertion points for our fork.
   Every other diagram in this deck is a zoom into one of its boxes.
   ============================================================================ */

.reveal .model {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  align-items: stretch;
  width: 100%;
  margin-top: 30px;
}
.reveal .model.fill { flex: 1; min-height: 0; }

.reveal .box {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 26px;
  background: var(--bg-2);
  border-top: 4px solid var(--rule-strong);
}
.reveal .box .bn {
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.reveal .box .bt {
  margin: 16px 0 0;
  color: var(--text-bright);
  font: 400 40px/1.06 var(--serif);
}
.reveal .box .bd {
  max-width: none;
  margin-top: 14px;
  color: var(--text-dim);
  font: 400 23px/1.34 var(--sans);
}
.reveal .box.b1 { border-top-color: var(--sig); }
.reveal .box.b1 .bn { color: var(--sig); }
.reveal .box.b2 { border-top-color: var(--durable); }
.reveal .box.b2 .bn { color: var(--durable); }
.reveal .box.b3 { border-top-color: var(--relay); }
.reveal .box.b3 .bn { color: var(--relay); }

/* dim a box when another act owns the slide */
.reveal .model .box.dim { opacity: .3; }

.reveal .model .flow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font: 400 30px/1 var(--mono);
}

/* sub-parts that appear as the model gains resolution */
.reveal .box .subs {
  display: grid;
  gap: 2px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.reveal .box .sub {
  padding: 11px 14px;
  background: var(--bg);
  border-left: 3px solid var(--rule-strong);
  color: var(--text);
  font: 400 20px/1.26 var(--sans);
}
.reveal .box .sub b {
  display: block;
  color: var(--text-faint);
  font: 500 12px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reveal .box .sub.on   { border-left-color: var(--sig); background: var(--bg-3); }
.reveal .box .sub.on b { color: var(--sig); }
.reveal .box .sub.no   { border-left-color: var(--trap); }
.reveal .box .sub.no b { color: var(--trap); }

/* L5 — where our fork can insert itself */
.reveal .box .pin {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--gold-soft);
  border-left: 3px solid var(--sig);
  color: var(--text-bright);
  font: 400 19px/1.26 var(--sans);
}
.reveal .box .pin i {
  flex: 0 0 auto;
  color: var(--sig);
  font: 500 13px/1.4 var(--mono);
  letter-spacing: .14em;
  font-style: normal;
  text-transform: uppercase;
}

/* the running resolution tag, top-right of every ladder slide */
.reveal .lvl {
  position: absolute;
  top: 58px;
  right: 88px;
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.reveal .lvl b { color: var(--sig); font-weight: 500; }

/* compact ladder strip for act openers — the model at a glance */
.reveal .model.mini { grid-template-columns: 1fr 30px 1fr 30px 1fr; margin-top: 0; margin-bottom: 24px; }
.reveal .model.mini .box { padding: 13px 16px; border-top-width: 3px; }
.reveal .model.mini .box .bt { margin-top: 7px; font-size: 23px; }
.reveal .model.mini .box .bd,
.reveal .model.mini .box .subs { display: none; }
.reveal .model.mini .flow { font-size: 20px; }

/* ---------------------------------------------- plain-language teaching bits */

/* a term defined the first time it is used */
.reveal .defs {
  display: grid;
  grid-template-columns: repeat(var(--dfc, 3), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .def { padding: 24px 26px; background: var(--bg); border-top: 3px solid var(--sig); }
.reveal .def .dw {
  color: var(--sig);
  font: 500 15px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reveal .def h3 { margin: 12px 0 10px; font-size: 32px; }
.reveal .def p { max-width: none; color: var(--text-dim); font-size: 22px; line-height: 1.34; }
.reveal .def p + p { margin-top: 10px; }
.reveal .def .eg {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  color: var(--text-faint);
  font: 400 18px/1.35 var(--mono);
}

/* the annotated note: JSON with a plain-English gloss per line */
.reveal .annot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; margin-top: 24px; }
.reveal .gloss { display: grid; gap: 2px; align-content: start; }
.reveal .gloss > div { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.reveal .gloss .gk { color: var(--sig); font: 500 19px/1.35 var(--mono); }
.reveal .gloss .gv { color: var(--text-dim); font: 400 21px/1.35 var(--sans); }
.reveal .gloss .gv em { color: var(--text-bright); font-style: normal; }

/* the one message we follow all deck */
.reveal .msg {
  display: flex;
  align-items: baseline;
  gap: 22px;
  width: 100%;
  margin-top: 22px;
  padding: 24px 30px;
  background: var(--bg-3);
  border-left: 4px solid var(--sig);
}
.reveal .msg .who { color: var(--sig); font: 500 17px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.reveal .msg .said { max-width: none; color: var(--text-bright); font: 400 32px/1.2 var(--serif); }

/* a two-step "what you'd guess / what happens" teaching pair */
.reveal .guess { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; margin-top: 26px; background: var(--rule); border: 1px solid var(--rule); }
.reveal .guess > div { padding: 28px 30px; background: var(--bg); border-top: 3px solid var(--trap); }
.reveal .guess > div.real { border-top-color: var(--durable); background: var(--bg-2); }
.reveal .guess .gl { color: var(--trap); font: 500 14px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.reveal .guess > div.real .gl { color: var(--durable); }
.reveal .guess h3 { margin: 14px 0 12px; font-size: 34px; }
.reveal .guess p { max-width: none; color: var(--text-dim); font-size: 23px; line-height: 1.36; }

/* ============================================================================
   L3 — the fusion. The three boxes resolve into the six gates, in place.
   Box 1 becomes one gate, box 2 becomes one gate, box 3 becomes four.
   After this slide the compact rail simply IS the anchor model.
   ============================================================================ */

.reveal .fuse { width: 100%; margin-top: 26px; }
.reveal .fuse .tops {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
  gap: 2px;
}
.reveal .fuse .tops > div {
  padding: 18px 22px;
  background: var(--bg-2);
  border-top: 4px solid var(--rule-strong);
}
.reveal .fuse .tops .t1 { border-top-color: var(--sig); }
.reveal .fuse .tops .t2 { border-top-color: var(--durable); }
.reveal .fuse .tops .t3 { border-top-color: var(--relay); }
.reveal .fuse .tops .bn { color: var(--text-faint); font: 500 13px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.reveal .fuse .tops .t1 .bn { color: var(--sig); }
.reveal .fuse .tops .t2 .bn { color: var(--durable); }
.reveal .fuse .tops .t3 .bn { color: var(--relay); }
.reveal .fuse .tops .bt { margin-top: 9px; color: var(--text-bright); font: 400 30px/1.05 var(--serif); }

.reveal .fuse .drop {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
  gap: 2px;
  height: 30px;
}
.reveal .fuse .drop > div { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.reveal .fuse .gates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.reveal .fuse .gates > div {
  padding: 20px 18px;
  background: var(--bg);
  border-top: 3px solid var(--rule-strong);
}
.reveal .fuse .gates .g1 { border-top-color: var(--sig); }
.reveal .fuse .gates .g2 { border-top-color: var(--durable); }
.reveal .fuse .gates .g3 { border-top-color: var(--relay); }
.reveal .fuse .gates .n { color: var(--text-faint); font: 500 12px/1 var(--mono); letter-spacing: .2em; }
.reveal .fuse .gates .g { margin: 11px 0 8px; color: var(--text-bright); font: 400 27px/1.04 var(--serif); }
.reveal .fuse .gates .o { max-width: none; color: var(--text-dim); font: 400 16px/1.32 var(--sans); }
.reveal .fuse .gates .f { display: block; margin-top: 7px; color: var(--text-faint); font: 400 14px/1.3 var(--mono); }

/* The anchor model is the slide's proof object, so it grows to fill the middle
   field instead of stranding empty space above the landing line. Box bodies
   pin to the bottom of their box, which keeps the three columns visually level
   however much text each one carries. */
.reveal .model:not(.mini) { flex: 1; min-height: 0; }
.reveal .model:not(.mini) .box .bd { margin-top: auto; }
.reveal .model:not(.mini) .box .subs { margin-top: auto; }
.reveal .model:not(.mini) .box .pin:first-of-type { margin-top: auto; }
.reveal .model:not(.mini) .box.dim .bt { margin-bottom: auto; }