/* ABOUTME: Deck-local styles for the act3 slides, layered over deck.css and the shared bridge. */
/* ABOUTME: Every class here carries the a3- prefix, so nothing leaks into another builder's slides. */

/* --- the lens row: the plain word for a dynamic, the book's name for it, and the book's own line --- */
.reveal .a3-lens {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  min-width: 0;
  padding: 24px 32px;
  border-top: 3px solid var(--gold);
  background: var(--bg-2);
}
.reveal .a3-term { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.reveal .a3-term b { color: var(--gold); font: 400 64px/1 var(--serif); }
.reveal .a3-term span { color: var(--text-dim); font: 400 var(--ce-reveal-support)/1.2 var(--sans); }
.reveal .a3-quote { font-size: 44px; }
.reveal .a3-lens .a3-quote-by { margin-top: 6px; }

/* --- used-up: four plates of equal height, each as wide as its photograph is --- */
.reveal .a3-used { display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-sizing: border-box; padding-top: 26px; }
.reveal .a3-strip { display: flex; align-items: flex-start; gap: 24px; }
.reveal .a3-strip > .a3-plate { flex: var(--a3-ar) 1 0; min-width: 0; }
.reveal .a3-strip > .a3-plate > .a3-frame { flex: 0 0 auto; aspect-ratio: var(--a3-ar); }
.reveal .a3-plate figcaption .a3-verb { color: var(--gold); }

/* --- copied and impossible-asset: a main column and a document plate beside it --- */
.reveal .a3-copied { --ca-left: 1246px; }
.reveal .a3-asset { --ca-left: 440px; }
.reveal .a3-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; min-height: 0; }
.reveal .a3-col > .a3-fill { flex: 1 1 auto; min-height: 0; }

/* A plate whose picture sits at the top of its frame, so it lines up with what is beside it. */
.reveal .a3-col > .a3-fill > .a3-top { align-items: flex-start; }

/* The one real number: first value, last value, and what they measure. */
.reveal .a3-stat { display: flex; flex-direction: column; gap: 10px; }
.reveal .a3-pair { display: flex; align-items: flex-end; gap: 30px; margin: 0; }
.reveal .a3-pair div { display: flex; flex-direction: column; gap: 2px; }
.reveal .a3-pair b { color: var(--text-dim); font: 400 104px/.95 var(--serif); }
.reveal .a3-pair .a3-latest b { color: var(--gold); }
.reveal .a3-pair .a3-arrow { padding-bottom: 14px; color: var(--text-dim); font: 400 56px/1 var(--sans); }

/* --- rails: a constructed receipt with the rail behind each line, and the one real artifact beside it --- */
.reveal .a3-rails-fig { display: flex; flex-direction: column; gap: 22px; height: 100%; box-sizing: border-box; padding-top: 26px; }
.reveal .a3-rails-top { display: grid; grid-template-columns: 1040px minmax(0, 1fr); gap: 48px; flex: 1 1 auto; min-height: 0; }
.reveal .a3-receipt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.reveal .a3-shop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 500px;
  box-sizing: border-box;
  padding: 18px 24px;
  border: 1px dashed var(--text-faint);
  border-bottom: 0;
  background: var(--bg-2);
}
.reveal .a3-shop b { color: var(--text-bright); font: 600 28px/1 var(--mono); letter-spacing: .08em; }
.reveal .a3-line { display: grid; grid-template-columns: 500px 1fr; align-items: stretch; }
.reveal .a3-paper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  padding: 17px 24px;
  border-left: 1px dashed var(--text-faint);
  border-right: 1px dashed var(--text-faint);
  background: var(--bg-2);
  color: var(--text);
  font: 500 28px/1.1 var(--mono);
}
.reveal .a3-line:last-child .a3-paper { border-bottom: 1px dashed var(--text-faint); }
.reveal .a3-paper b { color: var(--text-bright); font-weight: 600; }
.reveal .a3-rail {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding-left: 22px;
  color: var(--gold);
  font: 400 var(--ce-reveal-support)/1.15 var(--sans);
}
.reveal .a3-rail::before { content: ""; flex: 0 0 38px; height: 2px; background: var(--gold); }
.reveal .a3-note-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.reveal .a3-note-plate > .a3-note-frame { flex: 0 0 auto; aspect-ratio: 440 / 180; }

/* --- three-dynamics: the cup, and one layer beside it for each dynamic --- */
.reveal .a3-dyn { --ca-left: 640px; }
.reveal .a3-layers { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; min-height: 0; }
.reveal .a3-layer {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  min-height: 0;
  padding: 0 32px;
  border-left: 4px solid var(--gold);
  background: var(--bg-2);
}
.reveal .a3-layer .a3-term b { font-size: 56px; }
.reveal .a3-example { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reveal .a3-example p { margin: 0; color: var(--text-bright); font: 400 34px/1.22 var(--sans); text-wrap: balance; }
.reveal .a3-kind { color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }