/* ABOUTME: Deck-specific proof objects for "Nobody Is In Charge" — scale ledger, four-column */
/* ABOUTME: mechanism stack, article figure, revision stack, citogenesis loop, substrate lanes. */
/* ---------------------------------------------------------------------------
COLOUR SEMANTICS — budget of three (diagram skill, principle 5)
--gold the mechanism being introduced on this slide
--teal the durable record
--coral error and the failure path
Everything else is grayscale. --violet and --periwinkle are deliberately unused.
--------------------------------------------------------------------------- */
.reveal .s-open h2,
.reveal .s-mech h2,
.reveal .s-peak h2,
.reveal .s-lift h2,
.reveal .s-payoff h2,
.reveal .s-handoff h2 { margin-bottom: .55em; }
/* Slides carrying a full-width ledger or stack get a wider thesis measure so the
line breaks land where the
puts them. The theme's default 18ch is tuned
for slides whose lower field is a figure, not a table. */
/* ---------------------------------------------------------------------------
HEADING MEASURE — root cause of the mid-line wrapping.
The shared theme caps headings with a character measure: h1 11ch, h2 18ch.
`ch` is the width of "0", and Instrument Serif's zero is narrow, so at the
deck's type scale 18ch computes to ~477px — 26% of a 1920px canvas. Headings
therefore wrapped with two-thirds of the slide still empty to their right.
That measure is tuned for the report surface, where the reading column is
narrow; it is wrong for a projector-scale slide.
Every slide here carries a full-width object beneath the thesis, so the
thesis should span the same width. Breaks are controlled by
alone.
--------------------------------------------------------------------------- */
.reveal .slides section > h1,
.reveal .slides section > h2 { max-width: 100%; }
/* ---------------------------------------------------------------------------
VERTICAL RHYTHM — root cause of the large holes above the landing lines.
.ce-slide-landing carries `margin-top: auto`, which pins it to the slide
floor, while .ce-slide-mid centres everything above it. Where the proof
object is short, that opened 400–520px of dead space between the content and
the landing line (measured worst: lift 524px, harari 516px).
Here the landing line follows its content at a normal rhythm and the whole
block centres, so slides breathe evenly instead of splitting in two.
--------------------------------------------------------------------------- */
.reveal .slides section > .ce-slide-landing,
.reveal .slides section > .edge-key {
margin-top: 2.4rem !important;
padding-bottom: 0;
}
/* --- Source line: the deck cites its own figures. On a talk about citation. --- */
.reveal .src-line {
margin-top: 1.4rem;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px;
letter-spacing: .06em;
color: var(--text-faint);
white-space: nowrap;
}
/* =========================================================================
SLIDE 1 — SCALE LEDGER
========================================================================= */
.reveal .scale-ledger {
margin-top: 2.1rem;
border-top: 1px solid var(--rule);
}
.reveal .scale-ledger-row {
display: grid;
grid-template-columns: 1fr auto; /* label left, figure hard right — a ledger */
align-items: baseline;
gap: 2rem;
padding: 1.24rem 0;
border-bottom: 1px solid var(--rule-soft);
}
.reveal .scale-ledger-label {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 19px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-dim);
}
.reveal .scale-ledger-value {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 46px;
font-weight: 500;
letter-spacing: -.01em;
color: var(--text-bright);
font-variant-numeric: tabular-nums;
text-align: right;
}
.reveal .scale-ledger-row.is-void {
margin-top: 1rem;
border-top: 1px solid var(--rule-strong);
border-bottom: none;
padding-top: 1.7rem;
align-items: center;
}
.reveal .scale-ledger-row.is-void .scale-ledger-label { color: var(--gold); }
.reveal .scale-ledger-row.is-void .scale-ledger-value {
color: var(--gold);
font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
font-size: 92px;
font-weight: 400;
line-height: 1;
}
/* =========================================================================
SLIDES 6 + 8 — THE FOUR-MECHANISM STACK
========================================================================= */
.reveal .mech-stack { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.reveal .mech-head,
.reveal .mech-row {
display: grid;
grid-template-columns: 15rem 1fr 1.25fr;
gap: 2.4rem;
align-items: baseline;
padding: 1.2rem 0;
border-bottom: 1px solid var(--rule-soft);
}
.reveal .mech-head {
padding-bottom: .5rem;
border-bottom: 1px solid var(--rule);
}
.reveal .mech-head span {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-faint);
}
.reveal .mech-k {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 20px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-bright);
}
.reveal .mech-wiki { font-size: 30px; color: var(--text-dim); }
.reveal .mech-civ { font-size: 30px; color: var(--gold); }
/* Slide 8: the same stack, third column empty. */
.reveal .mech-gap {
display: block;
height: 2.1rem;
border: 1px dashed var(--coral);
border-radius: 3px;
background: var(--coral-soft, rgba(212,115,94,.06));
}
/* The intersubjectivity line — the hinge into Act 3. */
.reveal .intersubjective-line {
margin-top: 1.7rem;
font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
font-style: italic;
font-size: 40px;
line-height: 1.25;
color: var(--gold);
}
/* =========================================================================
SLIDES 2–4 — THE ARTICLE FIGURE
One object, transformed by data-auto-animate. Elements carry stable
data-id values and must MOVE between slides, never re-enter.
Coordinate space is fixed at 1660x560 so geometry is explicit.
========================================================================= */
.reveal .article-figure {
position: relative;
width: 1660px;
height: 500px;
margin-top: 1rem;
}
.reveal .article-figure > * { position: absolute; }
/* --- the article card --- */
.reveal .af-article {
width: 620px;
padding: 22px 26px 24px;
background: var(--bg-3);
border: 1px solid var(--rule-strong);
border-radius: 4px;
}
.reveal .af-article .af-label {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-faint); margin-bottom: 10px;
}
.reveal .af-article .af-body { font-size: 24px; line-height: 1.45; color: var(--text); }
.reveal .af-cite {
color: var(--gold);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 20px;
}
/* --- the published source --- */
.reveal .af-source {
width: 420px; padding: 18px 22px;
background: var(--bg-2);
border: 1px solid var(--teal);
border-radius: 4px;
}
.reveal .af-source .af-label {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
color: var(--teal); margin-bottom: 6px;
}
.reveal .af-source .af-sub { font-size: 20px; color: var(--text-dim); }
/* --- editors: grayscale, deliberately faceless --- */
.reveal .af-editor { width: 150px; text-align: center; }
.reveal .af-editor i {
display: block; width: 46px; height: 46px; margin: 0 auto 9px;
border: 1px solid var(--text-faint); border-radius: 50%;
}
.reveal .af-editor span {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .12em; color: var(--text-faint);
}
/* --- edges. Orthogonal only: a rule is a border, an elbow is a corner. --- */
.reveal .af-edge { border: 0 solid transparent; }
.reveal .af-edge.is-gold { border-color: var(--gold); }
.reveal .af-edge.is-teal { border-color: var(--teal); }
.reveal .af-edge.is-v { border-left-width: 2px; }
.reveal .af-edge.is-h { border-top-width: 2px; }
/* the relationship the system does NOT need — demoted, not deleted */
.reveal .af-edge.is-struck {
border-top: 1px dashed var(--text-faint);
opacity: .55;
}
.reveal .af-strike {
width: 120px; border-top: 1px solid var(--text-dim);
transform: rotate(-16deg);
}
.reveal .af-edge-label,
.reveal .af-note {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint); white-space: nowrap;
}
.reveal .af-badge {
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px; font-weight: 500;
}
.reveal .af-badge.is-gold { border: 1px solid var(--gold); color: var(--gold); background: var(--bg); }
.reveal .af-arrow {
width: 0; height: 0;
border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.reveal .af-arrow.down-gold { border-top: 9px solid var(--gold); }
.reveal .af-arrow.up-gold { border-bottom: 9px solid var(--gold); }
/* --- persisting elements from an earlier slide recede but do not vanish --- */
.reveal .is-past { opacity: .22; }
/* --- SLIDE 3: the revision stack --- */
.reveal .af-rev {
display: grid;
grid-template-columns: 132px 1fr;
align-items: center;
gap: 18px;
width: 780px;
}
.reveal .af-rev time {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px; letter-spacing: .08em; color: var(--text-faint);
text-align: right;
}
.reveal .af-rev b {
display: block; height: 22px; border-radius: 2px;
background: var(--teal-soft); border-left: 3px solid var(--teal);
}
.reveal .af-rev.is-now b { background: rgba(77,168,160,.3); }
.reveal .af-rev.is-now time { color: var(--teal); }
/* --- SLIDE 4: the talk panel --- */
.reveal .af-talk {
width: 620px; padding: 20px 24px;
background: var(--bg-2);
border: 1px solid var(--rule-strong);
border-radius: 4px;
}
.reveal .af-talk .af-label {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-faint); margin-bottom: 14px;
}
.reveal .af-talk p {
margin: 0 0 10px; font-size: 20px; line-height: 1.35; color: var(--text-dim);
}
.reveal .af-talk p:last-child { margin-bottom: 0; }
.reveal .af-talk p span {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .08em; color: var(--text-faint);
display: block;
}
.reveal .af-talk p.indent { padding-left: 30px; border-left: 1px solid var(--rule); }
/* =========================================================================
SLIDE 5 — THE CITOGENESIS LOOP
One question: how did a false claim acquire a source?
Reading order clockwise from top-left. All edges coral, all orthogonal.
The correction lane is physically separate and connects to nothing —
correction is not part of the loop, it is a standing mechanism outside it.
========================================================================= */
.reveal .loop-figure { position: relative; width: 1660px; height: 500px; margin-top: .8rem; }
.reveal .loop-figure > * { position: absolute; }
.reveal .lp-node {
width: 480px; padding: 18px 22px;
background: var(--bg-3); border: 1px solid var(--rule-strong); border-radius: 4px;
}
.reveal .lp-node .lp-k {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-faint); margin-bottom: 8px;
}
.reveal .lp-node .lp-v { font-size: 23px; line-height: 1.34; color: var(--text); }
.reveal .lp-node.is-origin { border-color: var(--coral); }
.reveal .lp-edge { border: 0 solid var(--coral); }
.reveal .lp-edge.is-v { border-left-width: 2px; }
.reveal .lp-edge.is-h { border-top-width: 2px; }
.reveal .lp-edge.is-close { border-width: 3px; }
.reveal .lp-arrow { width: 0; height: 0; }
.reveal .lp-arrow.r { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--coral); }
.reveal .lp-arrow.l { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10px solid var(--coral); }
.reveal .lp-arrow.d { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--coral); }
.reveal .lp-arrow.u { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--coral); }
.reveal .lp-badge {
width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--coral); color: var(--coral); background: var(--bg);
font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 15px;
}
.reveal .lp-dur {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 17px; letter-spacing: .14em; color: var(--coral); white-space: nowrap;
}
/* the correction lane — disconnected by design */
.reveal .lp-lane {
width: 1660px; padding: 15px 24px;
border: 1px solid var(--gold); border-radius: 4px; background: var(--gold-soft);
}
.reveal .lp-lane b {
display: block; font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
color: var(--gold); font-weight: 500; margin-bottom: 5px;
}
.reveal .lp-lane i { font-family: var(--font-serif,'Instrument Serif',Georgia,serif); font-size: 27px; color: var(--text-bright); font-style: italic; }
/* badge key — HTML, outside the figure, so it stays legible at any zoom */
.reveal .edge-key { display: flex; gap: 42px; flex-wrap: wrap; margin-top: auto; padding-bottom: 8px; }
.reveal .edge-key div { display: flex; align-items: center; gap: 11px; }
.reveal .edge-key em {
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
font-style: normal; font-family: var(--font-mono,'JetBrains Mono',monospace); font-size: 14px;
border: 1px solid var(--coral); color: var(--coral);
}
.reveal .edge-key.is-teal em { border-color: var(--teal); color: var(--teal); }
.reveal .edge-key span {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 16px; letter-spacing: .06em; color: var(--text-dim);
}
/* =========================================================================
SLIDE 7 — THE PERCEPTION SUBSTRATE
One question: how do eight billion people act on what three of them observed?
Three lanes, top to bottom. No edge reaches the lower lane except through
the slab — that absence is the entire claim.
========================================================================= */
.reveal .lanes-figure { position: relative; width: 1660px; height: 470px; margin-top: 1rem; }
.reveal .lanes-figure > * { position: absolute; }
.reveal .ln-mark { width: 300px; text-align: center; }
.reveal .ln-mark b {
display: block; font-family: var(--font-serif,'Instrument Serif',Georgia,serif);
font-size: 30px; font-weight: 400; color: var(--text-dim); margin-bottom: 6px;
}
.reveal .ln-mark span {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.reveal .ln-edge { border-left: 2px solid var(--teal); }
.reveal .ln-arrow {
width: 0; height: 0; border-left: 7px solid transparent;
border-right: 7px solid transparent; border-top: 10px solid var(--teal);
}
.reveal .ln-badge {
width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--teal); color: var(--teal); background: var(--bg);
font-family: var(--font-mono,'JetBrains Mono',monospace); font-size: 14px;
}
.reveal .ln-slab {
width: 1660px; padding: 24px 30px;
border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 4px;
display: flex; align-items: baseline; gap: 26px;
}
.reveal .ln-slab b {
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 19px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.reveal .ln-slab i { font-style: italic; font-size: 25px; color: var(--text-dim); font-family: var(--font-serif,'Instrument Serif',Georgia,serif); }
.reveal .ln-fan { border-left: 1px solid var(--gold); opacity: .5; }
.reveal .ln-people { display: flex; gap: 30px; }
.reveal .ln-people i {
display: block; width: 26px; height: 26px; border-radius: 50% 50% 4px 4px;
border: 1px solid var(--text-faint);
}
.reveal .ln-us {
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
/* =========================================================================
THE CITATION STRIP
A talk whose first act is "check the source, not the person" cites its own
sources on the slide. Top-right, aligned to the kicker. Ambient attribution:
it costs no spoken words and puts the debt on six slides, not one sentence.
========================================================================= */
.reveal section > .cite-strip {
position: absolute;
top: 0; right: 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-faint);
text-align: right;
line-height: 1.5;
}
.reveal section > .cite-strip b { color: var(--gold); font-weight: 500; }
/* =========================================================================
SLIDE 1 — TITLE
========================================================================= */
.reveal .s-title h1 { max-width: 15ch; }
.reveal .s-title .title-dek {
margin-top: 1.8rem;
max-width: 62ch;
font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
font-style: italic;
font-size: 37px;
line-height: 1.36;
color: var(--text-dim);
}
.reveal .s-title .title-byline {
display: flex; gap: 4rem; margin-top: 2.6rem;
padding-top: 1.3rem; border-top: 1px solid var(--rule);
}
.reveal .s-title .title-byline div { display: flex; flex-direction: column; gap: 6px; }
.reveal .s-title .title-byline strong {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .18em; color: var(--text-faint); font-weight: 500;
}
.reveal .s-title .title-byline span { font-size: 23px; color: var(--text); }
/* =========================================================================
SLIDE 3 — WHAT YOU WON'T BE ABLE TO UNSEE
Three open loops. The four-part test is PROMISED and deliberately not named —
naming it here would leave the framework slide with nothing to reveal.
========================================================================= */
.reveal .unsee { margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.reveal .unsee-row {
display: grid; grid-template-columns: 5rem 1fr; gap: 2rem;
align-items: baseline; padding: 2rem 0;
border-bottom: 1px solid var(--rule-soft);
}
.reveal .unsee-row b {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 22px; color: var(--gold); font-weight: 500;
}
.reveal .unsee-row p {
margin: 0; font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
font-size: 44px; line-height: 1.22; color: var(--text-bright);
}
.reveal .unsee-row p em { color: var(--gold); }
/* =========================================================================
SLIDE 9 — HARARI: TWO BOOKS, TWO QUESTIONS
========================================================================= */
.reveal .books { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1.5rem; }
.reveal .book {
padding: 34px 38px; border: 1px solid var(--rule-strong);
border-radius: 4px; background: var(--bg-2);
}
.reveal .book.is-lit { border-color: var(--gold); background: var(--gold-soft); }
.reveal .book b {
display: block; font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 17px; letter-spacing: .2em; text-transform: uppercase;
color: var(--text-dim); font-weight: 500;
}
.reveal .book.is-lit b { color: var(--gold); }
.reveal .book i {
display: block; font-style: normal;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 14px; letter-spacing: .1em; color: var(--text-faint); margin-top: 5px;
}
.reveal .book q {
display: block; quotes: none; margin-top: 26px;
font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
font-size: 41px; line-height: 1.24; color: var(--text-bright);
}
/* =========================================================================
SLIDES 11–12 — THE CLOSE
========================================================================= */
.reveal .contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; margin-top: 1.6rem; }
.reveal .contrast > div { padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.reveal .contrast.is-lit > div + div { border-top-color: var(--gold); }
.reveal .contrast b {
display: block; font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-faint); font-weight: 500; margin-bottom: 14px;
}
.reveal .contrast.is-lit > div + div b { color: var(--gold); }
.reveal .contrast p { margin: 0 0 20px; font-size: 33px; line-height: 1.4; color: var(--text-dim); }
.reveal .contrast p:last-child { margin-bottom: 0; }
.reveal .contrast p strong { color: var(--text-bright); font-weight: 400; }
.reveal .tool-list { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.reveal .tool-list div {
display: grid; grid-template-columns: 13rem 1fr; gap: 2.4rem;
align-items: baseline; padding: 1.65rem 0; border-bottom: 1px solid var(--rule-soft);
}
.reveal .tool-list b {
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 20px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold);
}
.reveal .tool-list p {
margin: 0; font-family: var(--font-serif,'Instrument Serif',Georgia,serif);
font-size: 39px; line-height: 1.2; color: var(--text-bright);
}
/* =========================================================================
SLIDE 14 — PART 2 SNEAK PEEK
The BookOps wiring map, framed as what it is: a screenshot of another
artifact. Its cooler ground is deliberately left alone rather than
recoloured — framing it as a quoted object is more honest than faking it.
========================================================================= */
.reveal .peek { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; margin-top: 1.2rem; align-items: start; }
.reveal .peek-fig { border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; background: #0d1117; }
.reveal .peek-fig img { display: block; width: 100%; height: auto; }
.reveal .peek-cap {
margin-top: 10px; font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.reveal .peek-map { border-top: 1px solid var(--rule); }
.reveal .peek-map div {
display: grid; grid-template-columns: 11rem 1fr auto; gap: 1.4rem;
align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft);
}
.reveal .peek-map b {
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 18px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-dim);
}
.reveal .peek-map p { margin: 0; font-size: 23px; line-height: 1.32; color: var(--text); }
.reveal .peek-map i {
font-style: normal; font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 15px; letter-spacing: .1em; color: var(--gold);
}
.reveal .peek-map div.is-open { border-bottom-color: var(--coral); }
.reveal .peek-map div.is-open b,
.reveal .peek-map div.is-open i { color: var(--coral); }
.reveal .peek-map div.is-open p { color: var(--text-bright); }
.reveal a.peek-link {
display: inline-block; margin-top: 1.6rem; padding: 12px 20px;
border: 1px solid var(--gold); border-radius: 3px;
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
color: var(--gold); text-decoration: none;
}
.reveal a.peek-link:hover { background: var(--gold-soft); }
/* =========================================================================
PHOTOGRAPHIC EVIDENCE
Both images are quoted artifacts from elsewhere, so they are framed and
captioned rather than bled into the ground. A thin rule and a mono caption
say "this is a screenshot / a book", which is more honest than pretending
they were designed for this deck.
========================================================================= */
.reveal .plate { display: block; }
.reveal .plate img {
display: block; width: 100%; height: auto;
border: 1px solid var(--rule-strong); border-radius: 3px;
}
.reveal .plate figcaption {
margin-top: 10px;
font-size: 17px; line-height: 1.45;
color: var(--text-faint);
}
/* the artifact's name stays mono/uppercase; the note beside it reads as prose */
.reveal .plate figcaption b {
display: block; margin-bottom: 5px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-dim); font-weight: 500;
}
/* slide 2 — the ledger sits beside the book that supplies its last number */
.reveal .setup-grid { display: grid; grid-template-columns: 1fr 250px; gap: 3.4rem; align-items: start; }
.reveal .setup-grid .plate { margin-top: 2.1rem; }
/* slide 7 — the animal, beside the loop that libelled it */
.reveal .loop-figure .plate { position: absolute; }
/* =========================================================================
① THE FOUR-MARK MOTIF
A four-cell strip under the kicker, filling once per mechanism. Costs no
spoken words, tells the room which of four they are in, and makes the
framework slide's reveal feel earned rather than announced. Runs across
the mechanism act (4–8) and returns for its two payoffs (12, 13).
========================================================================= */
.reveal .marks { display: flex; gap: 7px; margin: -14px 0 26px; }
.reveal .marks i {
display: block; width: 34px; height: 7px; border-radius: 1px;
background: var(--rule);
}
.reveal .marks i.on { background: var(--gold); }
.reveal .marks i.open { background: transparent; border: 1px solid var(--coral); height: 5px; }
/* =========================================================================
③ THE PROPORTIONAL TIMELINE — slide 11
The slide's claim is quantitative ("centuries" vs "twenty-five years") and
was being made in prose. At true scale Wikipedia is ~1/200th of the track;
that near-invisibility is the argument.
========================================================================= */
.reveal .tl { margin-top: 1.8rem; }
.reveal .tl-row { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.reveal .tl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.reveal .tl-head b {
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 16px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-dim); font-weight: 500;
}
.reveal .tl-head span {
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 22px; color: var(--text-bright); font-variant-numeric: tabular-nums;
}
.reveal .tl-track { position: relative; height: 26px; }
.reveal .tl-track::before {
content: ''; position: absolute; inset: 12px 0 auto 0; height: 1px; background: var(--rule);
}
.reveal .tl-bar {
position: absolute; top: 4px; height: 18px; border-radius: 2px;
}
.reveal .tl-row.is-old .tl-bar { background: rgba(232,227,217,.18); width: 100%; }
.reveal .tl-row.is-new .tl-bar { background: var(--gold); }
.reveal .tl-note { margin-top: 12px; font-size: 25px; line-height: 1.4; color: var(--text-dim); }
.reveal .tl-note strong { color: var(--text-bright); font-weight: 400; }
.reveal .tl-row.is-new .tl-head b,
.reveal .tl-row.is-new .tl-head span { color: var(--gold); }
/* the sliver needs a leader, or the eye reads it as a rendering artifact */
.reveal .tl-lead {
position: absolute; top: -6px; height: 34px; width: 1px; background: var(--gold); opacity: .45;
}
/* the sliver is 8px wide — without a note the eye reads it as a rendering artifact */
.reveal .tl-scale {
position: absolute; left: 2.2%; top: 2px; margin: 0;
font-family: var(--font-mono,'JetBrains Mono',monospace);
font-size: 15px; letter-spacing: .06em; color: var(--gold); opacity: .75;
}
/* slide 13 — the stack beside Harari's own figure of the change it points at */
.reveal .handoff-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 3.4rem; align-items: start; }
.reveal .handoff-grid .plate { margin-top: 2.4rem; }