/* ───────────────────────────────────────────────────────────────────────────
   Contemporary Headshot · "Your Face Is Your Business Card" talk deck
   Styling only — no wording, tagline, caption or speaker note has been changed.

   Every token below is lifted from the site's own stylesheet
   (contemporaryheadshot.com/assets/css/styles.css) so that the deck and the
   website read as one object rather than two.

   What changed, and why
     · The burgundy accent is gone. The site uses no accent colour at all: ink
       #111 on white, warm cream #f6f4f1 for tinted panels, #0d0d0d for the
       full-bleed bands. The system's only red (#8a2318 / #8a1c1c) is an ERROR
       colour, so it survives here only on the "Don't" column — where "wrong"
       is exactly what it means.
     · Hierarchy now comes from the site's own devices: Georgia display type
       against system sans, uppercase letter-spaced labels, 1px hairlines,
       cream panels, black bands.
     · Square corners, no card shadows, no pills — the site has none of them.
     · Page rhythm follows the site: white base, cream panels, and three black
       moments (the opening, the AI question, the close) standing in for the
       site's hero / quote / footer bands.
     · Panels are the site's .panel: 1px hairline on cream.

   Canvas is untouched at 960x600, base 22px, margin 0.04 — HANDOVER.md records
   that this was the fix for clipped slides, so every type change here was
   re-checked against all 17 slides for vertical overflow.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* colour — copied verbatim from styles.css :root */
  --ink: #111111;
  --ink-soft: #454545;
  --muted: #7d766c;
  --paper: #ffffff;
  --cream: #f6f4f1;
  --band: #0d0d0d;
  --on-band: #f4f2ef;
  --on-band-muted: #a09a92;   /* was referenced but never defined — muted text
                                 on the closing slide fell back to full white */
  --rule: rgba(17, 17, 17, 0.14);
  --rule-band: rgba(244, 242, 239, 0.2);
  --alert: #8a2318;           /* the system's one red: errors, and "Don't" */

  /* type — the same two stacks the site uses */
  --font-display: Georgia, "Times New Roman", "Liberation Serif", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* deck type scale (base 22px on the 960x600 canvas) */
  --slide-h1: 2em;            /* title / question / close */
  --slide-h2: 1.42em;         /* every other slide title */
  --slide-h3: 1.02em;         /* sub-headings inside a slide */
  --label: 0.52em;            /* kickers, eyebrows, appendix labels */
  --micro: 0.62em;            /* captions, footnotes, panel labels */
}

/* ---------- Base ---------- */

.reveal {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Reveal puts its viewport class on <body>, and a slide's data-state class
   lands there too — so this is where the page colour has to be set. Selecting
   .reveal here silently did nothing, which is what left the band slides white
   with near-white type on them. */
body.reveal-viewport { background: var(--paper); }
body.reveal-viewport.band { background: var(--band); }

.reveal a { color: inherit; text-decoration-color: var(--rule); }

.reveal section { text-align: left; }
.reveal section.center { text-align: center; }

/* ---------- Type ---------- */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
  text-transform: none;
}

.reveal h1 { font-size: var(--slide-h1); letter-spacing: -0.01em; }  /* .display */
.reveal h2 { font-size: var(--slide-h2); letter-spacing: -0.005em; }
.reveal h3 { font-size: var(--slide-h3); }

.reveal p { margin: 0 0 0.9em; }
.reveal p:last-child { margin-bottom: 0; }

.reveal .big { font-size: 1.06em; color: var(--ink-soft); }
.reveal .huge { font-size: 1.5em; font-family: var(--font-display); }
.reveal .muted { font-size: 0.88em; color: var(--muted); }
.reveal .accent { color: inherit; }
.reveal .gold { color: var(--muted); }

/* ---------- Kicker / eyebrow — the site's .kicker-h ---------- */

.reveal .kicker,
.reveal .appendix-title {
  font-family: var(--font-body);
  font-size: var(--label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.1em;
}
.reveal .appendix-title { color: var(--muted); }

/* ---------- Hairline under a slide title ----------
   The site divides with 1px hairlines, not coloured bars. .rule--short is the
   centred rule used on the three centred slides. */

.reveal .rule {
  width: 100%;
  height: 1px;
  background: var(--rule);
  margin: 0.7em 0 1.1em;
}

.reveal .rule--short {
  width: 72px;
  background: var(--ink);
  margin: 0.9em auto 1.1em;
}

/* ---------- Lists — the site's .checklist dot, no discs ---------- */

.reveal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reveal ul > li {
  position: relative;
  padding-left: 1.15em;
  margin: 0.18em 0;
  line-height: 1.32;
}
.reveal ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--ink-soft);
}
.reveal ol {
  padding-left: 1.4em;
  margin: 0;
  line-height: 1.32;
}
.reveal ol > li { margin: 0.18em 0; }

/* ---------- Panels — the site's .panel: hairline on cream, square ---------- */

.reveal .panel,
.reveal .frame,
.reveal .card {
  border: 1px solid var(--rule);
  background: var(--cream);
  border-radius: 0;
  box-shadow: none;
  padding: 1em 1.25em;
}

.reveal .frame h4 {
  font-size: 1em;
  margin: 0 0 0.55em;
}

.reveal section.center .card,
.reveal section.center .frame { max-width: 40rem; margin-inline: auto; }

/* Labels inside a heading (the old pills): the site's uppercase micro-label,
   separated by a hairline rather than a coloured capsule. */
.reveal .tag {
  display: inline-block;
  background: none;
  color: var(--muted);
  border-radius: 0;
  border-left: 1px solid var(--rule);
  padding: 0 0 0 0.55em;
  margin: 0 0 0 0.55em;
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 0.08em;
}

/* ---------- Figures ---------- */

.reveal .grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4em;
  align-items: start;
}

/* Where a slide pairs copy with a plate, use the site's .media proportions. */
.reveal .grid2:has(> .plate) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}

.reveal .grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1em;
  align-items: start;
}

/* Before → After: the arrow column should be only as wide as the arrow. */
.reveal .grid3:has(> .vs) { grid-template-columns: 1fr auto 1fr; align-items: center; }

/* ---------- Plate: where a photograph goes ----------
   Square, hairline, portraits at 2:3 with the caption treatment the site's
   .plates use. The instruction text stays exactly as it was. */

.reveal .plate {
  display: grid;
  place-content: center;
  width: 210px;
  height: 315px;
  margin-inline: auto;
  padding: 0.9em;
  border: 1px dashed var(--rule);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--micro);
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.reveal .plate.small { width: 130px; height: 195px; }
.reveal .frame .plate { width: 190px; height: 280px; }

/* ---------- Slide 2 figure ---------- */

.reveal .stat {
  font-family: var(--font-display);
  font-size: 1.7em;
  line-height: 1;
  color: var(--ink);
}
.reveal .stat-label {
  max-width: 24ch;
  margin-top: 0.5em;
  font-size: 0.72em;
  line-height: 1.5;
  color: var(--ink-soft);
}

.reveal .vs {
  font-family: var(--font-display);
  font-size: 1.3em;
  color: var(--muted);
  text-align: center;
}

.reveal .footnote {
  margin-top: 1.1em;
  font-size: 0.6em;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Do / Don't ---------- */

.reveal .do { color: var(--ink); }
.reveal .dont { color: var(--alert); }
.reveal .frame:has(> h4.dont) li::before { background: var(--alert); }

/* ---------- Dark band slides ---------- */

.reveal section.band { background: transparent; color: var(--on-band); }

.reveal section.band h1,
.reveal section.band h2,
.reveal section.band h3,
.reveal section.band h4 { color: var(--on-band); }

.reveal section.band .kicker { color: var(--on-band-muted); }
.reveal section.band .appendix-title { color: var(--on-band-muted); }
.reveal section.band .muted { color: var(--on-band-muted); }
.reveal section.band .big { color: var(--on-band); }
.reveal section.band .stat-label { color: var(--on-band-muted); }
.reveal section.band .accent { color: var(--on-band); }
.reveal section.band .tag { color: var(--on-band-muted); border-left-color: var(--rule-band); }
.reveal section.band .rule { background: var(--rule-band); }
.reveal section.band .rule--short { background: var(--on-band); }
.reveal section.band li::before { background: var(--on-band-muted); }

/* The site's dark-band components are outlines, never filled panels. */
.reveal section.band .panel,
.reveal section.band .frame,
.reveal section.band .card {
  border-color: var(--rule-band);
  background: transparent;
}

/* ---------- Brand marks ---------- */

.reveal .brand-logo { width: 90px; margin: 0 auto 1.1em; }
.reveal section.band .brand-logo { filter: brightness(0) invert(1); }

.deck-footer {
  position: fixed;
  left: 18px;
  bottom: 14px;
  z-index: 30;
}
.deck-footer img { width: 48px; height: auto; opacity: 0.45; }

/* The logo is black artwork: it has to invert over the band slides or it
   disappears into them. data-state="band" puts the class on <body> for us, so
   this stays CSS only — no extra script. */
body.band .deck-footer img { filter: brightness(0) invert(1); opacity: 0.8; }

/* ---------- Reveal furniture ---------- */

.reveal .progress { color: var(--ink); }
.reveal .progress span { background: var(--ink); transition: width 0.4s ease; }
.reveal .controls { color: var(--ink); }
.reveal .slide-number {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  background: transparent;
}

body.band .progress span { background: var(--on-band); }
body.band .controls { color: var(--on-band); }
body.band .slide-number { color: var(--on-band-muted); }

/* ---------- Dense presenter-only appendix slides ----------
   Slide 17 overflowed the 960x600 canvas in the original deck too (by 87px,
   so the last index entries were cut off live). Smaller type, tighter panels
   and a two-column index bring both appendix slides back inside the canvas. */

.reveal section:has(.appendix-title) { font-size: 0.88em; }

.reveal section:has(.appendix-title) .panel,
.reveal section:has(.appendix-title) .frame,
.reveal section:has(.appendix-title) .card { padding: 0.8em 1em; }

.reveal section:has(.appendix-title) li { margin: 0.1em 0; }
.reveal section:has(.appendix-title) .rule { margin: 0.55em 0 0.8em; }

/* The 14-entry script index reads as two columns rather than one tall list. */
.reveal section:has(.appendix-title) ol:has(> li:nth-child(8)) {
  columns: 2;
  column-gap: 1.8em;
}
/* The script index runs to 17 entries in two columns, and its sub-columns are
   narrow enough that most entries wrap to a second line. Dropping the per-item
   margin and the inherited 1.5 leading is what keeps it inside the canvas. */
.reveal section:has(.appendix-title) ol:has(> li:nth-child(8)) li {
  margin: 0;
  line-height: normal;
}

/* ---------- Speaker notes panel ---------- */

.reveal .notes { display: none; }

/* ---------- The ninety-year timeline ----------
   Two pieces, both CSS-only, driven by the same data-state mechanism the band
   slides already use (reveal puts those classes on <body>):

   · .deck-timeline — the quiet bar pinned to the top of the three era slides,
     with a marker showing where in the ninety years we are. It only shows when
     the slide carries the state: data-state="tl tl-era2" → body.tl.tl-era2.
   · .eras — the full-width timeline on the three era-transition slides, showing
     the eras already covered, the one coming next, and the marker sitting on the
     boundary between them.

   Positions come from the span itself: 1930–2026 is 96 years, so the era
   boundaries fall at 31%, 63% and 100% of the rail, and the era midpoints — where
   the marker sits while we are inside an era — at 16%, 47% and 81%.
   ------------------------------------------------------------------------- */

.deck-timeline {
  /* The bar is drawn outside reveal's canvas, so its type and geometry have to be
     sized against the same scale the canvas is scaled by — otherwise it does not
     look like part of the deck. Reveal fits a 960x600 canvas to 96% of the
     viewport, so scale = min(H/625, W/1000), i.e. min(0.16vh, 0.1vw), and the
     deck's own micro-label (--micro × the 22px base) is 13.6 canvas px. */
  --deck-scale: min(0.16vh, 0.1vw);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  padding: calc(var(--deck-scale) * 10) clamp(1.25rem, 4vw, 4rem) 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.tl .deck-timeline { opacity: 1; }

.deck-timeline__rail {
  position: relative;
  height: 1px;
  background: var(--rule);
}

/* a decade comb, nine intervals across the ninety years */
.deck-timeline__rail::after {
  content: "";
  position: absolute;
  inset: calc(var(--deck-scale) * -1.7) 0 auto 0;
  height: calc(var(--deck-scale) * 4);
  background: repeating-linear-gradient(
    to right,
    var(--rule) 0 1px,
    transparent 1px 11.111%
  );
}

.deck-timeline__marker {
  position: absolute;
  top: calc(var(--deck-scale) * -2.3);
  left: var(--tl-at, 0%);
  width: calc(var(--deck-scale) * 5.2);
  height: calc(var(--deck-scale) * 5.2);
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
  transition: left 0.45s ease;
}

.deck-timeline__label {
  position: absolute;
  top: calc(var(--deck-scale) * 7.5);
  transform: translateX(-50%);
  font-size: calc(var(--deck-scale) * 13.6);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.deck-timeline__label--start { transform: none; }
.deck-timeline__label--end { transform: translateX(-100%); }

/* where the marker sits inside each era */
body.tl-era1 .deck-timeline__marker { --tl-at: 16%; }
body.tl-era2 .deck-timeline__marker { --tl-at: 47%; }
body.tl-era3 .deck-timeline__marker { --tl-at: 81%; }

/* if the bar is ever put on a band slide, it has to invert with everything else */
body.band .deck-timeline__rail { background: var(--rule-band); }
body.band .deck-timeline__rail::after {
  background: repeating-linear-gradient(
    to right,
    var(--rule-band) 0 1px,
    transparent 1px 11.111%
  );
}
body.band .deck-timeline__marker { background: var(--on-band); }
body.band .deck-timeline__label { color: var(--on-band-muted); }

/* ---------- The era timeline on the transition slides ---------- */

.eras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.2em;
  text-align: center;
}

.eras__item {
  position: relative;
  padding: 1.2em 1.1em 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* the eras already covered, and the one being introduced, carry the ink rail */
.eras__item.is-done,
.eras__item.is-next { border-top-color: var(--ink); color: var(--ink); }

.eras__years {
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eras__name {
  margin-top: 0.4em;
  font-family: var(--font-display);
  font-size: 1.05em;
  line-height: 1.25;
  color: var(--ink);
}
.eras__item:not(.is-done):not(.is-next) .eras__name { color: var(--muted); }

/* the marker sits on the rail at the boundary the talk is crossing */
.eras__item.is-next::before,
.eras--complete .eras__item:last-child::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.eras__item.is-next::before {
  left: 0;
  transform: translateX(-50%);
}
.eras--complete .eras__item:last-child::after {
  right: 0;
  transform: translateX(50%);
}

/* ---------- Print ---------- */

@media print {
  .reveal .slides section,
  .reveal .slides section * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .deck-timeline { display: none; }
}