/* ==========================================================================
   Swiss / International Typographic Style
   One typeface, flush-left ragged-right, strict hierarchy, one accent colour.
   ========================================================================== */

:root {
  --paper:  #f3f1ec;
  --ink:    #111111;
  --mute:   #7a766e;
  --rule:   #111111;
  --accent: #d7261e;   /* the only colour: rules, numbers, emphasis, title slide */
  --night:  #151515;

  --font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, "Liberation Sans", sans-serif;

  /* 900 x 600 step, 60px margins, 12-column grid */
  --margin: 60px;

  /* left/right margin of image slides (0 = edge to edge); top/bottom keep --margin for the footer */
  --img-margin: 20px;

  /* maximum line length of paragraphs and lists; the text area is 780px wide (about 35em) */
  --measure: 34em;

  /* body text size of the slides */
  --body-size: 18px;

  /* image-slide caption: text size, space to the left/right and above/below it */
  --caption-size: 10px;
  --caption-margin-x: var(--margin);
  --caption-margin-y: 10px;

  /* size of the section names in the table of contents */
  --toc-size: 18px;

  /* thumb-index tab on the right edge */
  --tab-width:  10px;
  --tab-height: 48px;
  --tab-gap:    8px;
}

/* ---------- Canvas ---------- */

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--night);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "tnum";
}

/* ---------- Step (impress.js positions these) ---------- */

.step {
  width: 900px;
  height: 600px;
  box-sizing: border-box;
}

/* dim inactive slides while impress.js is running */
.impress-enabled .step {
  opacity: 0.15;
  transition: opacity 0.4s;   /* keep close to data-transition-duration on #impress */
}
.impress-enabled .step.active { opacity: 1; }
/* overview: the active step is the empty #overview, so show every slide in full */
.impress-on-overview .step { opacity: 1; }

/* click a slide in the overview to jump to it (impress.js does the navigation).
   The empty #overview step overlaps slide 2, so it must not catch clicks. */
.step:not(.slide) { pointer-events: none; }
.impress-on-overview .slide { cursor: pointer; }
/* clicking the slide on screen zooms back out to the overview */
.impress-enabled:not(.impress-on-overview) .slide.active { cursor: zoom-out; }

/* ---------- Slide ---------- */

body { counter-reset: slide; }

.slide {
  counter-increment: slide;
  padding: var(--margin);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-size: var(--body-size);
  line-height: 1.35;
  letter-spacing: -0.005em;
  overflow: hidden;
  border-radius: 0;
}

/* accent tab on the right edge, like a book's thumb index: the single recurring graphic device.
   Set the section per slide with style="--tab: N" (0 = top; each step moves down by
   tab height + gap). Size is set by --tab-* at the top of this file. */
.slide::before {
  content: "";
  position: absolute;
  top: calc(var(--margin) + var(--tab, 0) * (var(--tab-height) + var(--tab-gap)));
  right: 0;
  width: var(--tab-width);
  height: var(--tab-height);
  background: var(--accent);
}

/* footer (injected by index.html): number left, title centre, author right (Beamer mirrored), hairline above.
   Text comes from data-author / data-title on #impress; the number is a CSS counter. */
.slide-footer {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.slide-footer::before { content: counter(slide, decimal-leading-zero); }
.slide-footer .title  { text-align: center; }
.slide-footer .author { text-align: right; }
/* <div class="step slide" data-hide-footer-title>: hide the footer title on that slide only.
   visibility (not display) keeps the grid column, so the author stays in the right corner. */
.slide[data-hide-footer-title] .slide-footer .title { visibility: hidden; }

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

.slide h1,
.slide h2,
.slide h3 {
  margin: 0;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.slide h1 { font-size: 104px; margin-left: -4px; }  /* optical alignment of the large glyph */
.slide h2 { font-size: 60px;  margin-left: -2px; margin-bottom: 28px; }
.slide h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.slide p {
  margin: 0 0 1em;
  max-width: var(--measure);
  hyphens: auto;
}

.slide strong { font-weight: 700; }

.slide a { color: inherit; text-decoration: underline dotted; }

/* "opens an external site" icon after every http(s) link; takes the text colour */
.slide a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.3em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M14 3h7v7M21 3l-10 10M19 14v7H3V5h7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M14 3h7v7M21 3l-10 10M19 14v7H3V5h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* content lists: ordinary bullets / numbers */
.slide ul, .slide ol { margin: 0 0 1em; padding-left: 1.2em; max-width: var(--measure); }
.slide li { padding: 0.2em 0; }
.slide li > ul, .slide li > ol { margin: 0.2em 0 0; font-size: 0.9em; }

/* any list: <ul class="cols-2"> flows its items into two columns (top to bottom, then across) */
.slide .cols-2 { column-count: 2; column-gap: 40px; max-width: none; }
.slide .cols-2 > li { break-inside: avoid; }

/* table of contents (<ol class="toc">, filled by js/main.js): ruled rows, red numerals,
   name left, page number right. The only list with this styling. */
.slide .toc {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  counter-reset: item;
}
.slide .toc li {
  counter-increment: item;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.slide .toc li:last-child { border-bottom: 1px solid var(--rule); }
.slide .toc li::before {
  content: counter(item, decimal-leading-zero);
  min-width: 2em;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.slide .toc a { font-size: var(--toc-size); }
.slide .toc .page {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--mute);
}

/* sources: inline [n] citations, per-slide footnotes, bibliography (all filled by js/main.js) */
.slide cite {
  font-style: normal;
  font-weight: 700;
  font-size: 0.7em;
  line-height: 0;           /* a raised citation must not stretch the line */
  vertical-align: super;
  letter-spacing: 0;
  color: var(--accent);
  white-space: nowrap;
}

/* small Claude logo (assets/claude-logo.svg, the official spark): <img class="claude-logo" src="assets/claude-logo.svg" alt=""> */
.claude-logo {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
}

.bib-item {
  display: grid;
  grid-template-columns: 2.8em 1fr;
  line-height: 1.3;
}
.bib-n { font-weight: 700; color: var(--accent); }
.slide cite a { color: inherit; border-bottom: 0; cursor: pointer; }
.slide cite a:hover { text-decoration: underline; }
.slide .bib-url,
.slide .bib-text a {
  color: var(--mute);
  overflow-wrap: anywhere;
}

/* footnotes sit above the footer rule */
.slide-notes {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: 70px;
  font-size: 11px;
  color: var(--mute);
}
.slide-notes .bib-item { grid-template-columns: 2.6em 1fr; }

/* final bibliography slide */
.bibliography { font-size: 14px; }
.bibliography .bib-item { padding: 3px 0; }
.bibliography .bib-group + .bib-group { margin-top: 14px; }
.bibliography .bib-group h3 { margin-bottom: 6px; }
.bibliography.two-col { column-count: 2; column-gap: 40px; }
.bibliography.two-col .bib-item,
.bibliography.two-col .bib-group h3 { break-inside: avoid; }

/* small light credits at the bottom of a slide, above the footer: <div class="slide-credits"><p>…</p></div> */
.slide .slide-credits {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: 70px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--mute);
}
.slide .slide-credits p { margin: 0; max-width: none; }

/* ---------- Helpers ---------- */

/* small uppercase caption / metadata line */
.slide .meta, .slide small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* oversized figure: dates, frequencies, "2–3 octaves" */
.slide .figure {
  font-size: 180px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--accent);
}

/* image inside an ordinary slide, centred or flush left / right:
   <div class="img-center"><img src="…" alt="…"></div>   (img-left / img-right: same, aligned to the left / right margin)
   scaled down to the slide width and to --img-center-height (never up or distorted) */
.slide .img-center,
.slide .img-left,
.slide .img-right {
  display: flex;
  justify-content: center;
  margin: 0 0 1em;
}
.slide .img-left { justify-content: flex-start; }
.slide .img-right { justify-content: flex-end; }
.slide .img-center > img,
.slide .img-left > img,
.slide .img-right > img {
  max-width: 100%;
  max-height: var(--img-center-height, 360px);
  object-fit: contain;
}

/* two-column grid: <div class="cols"><div>…</div><div>…</div></div> */
.slide .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

/* ---------- Variants ---------- */

/* Image slide: <div class="step slide img-slide"><img src="…" alt="…"></div>
   centres the image in the slide and scales it down to fit the text area (never up or distorted) */
.slide.img-slide,
.slide.iframe-slide {
  padding-left: var(--img-margin);
  padding-right: var(--img-margin);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide.img-slide {
  flex-direction: column;
  gap: var(--caption-margin-y);
}
.slide.img-slide > img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}
/* optional caption below the image: <p>…</p> after the <img> */
.slide.img-slide > p {
  flex: none;
  margin: 0 0 var(--caption-margin-y);
  padding: 0 calc(var(--caption-margin-x) - var(--img-margin));
  max-width: none;
  align-self: stretch;
  font-size: var(--caption-size);
  line-height: 1.3;
  color: var(--mute);
}

/* Iframe slide (video embeds): <div class="step slide iframe-slide"><iframe …></iframe></div>
   Same placement as an image slide. The iframe fills the space left over by anything else on the
   slide (e.g. a caption below it) at its aspect ratio: 16 / 9 by default, or set
   style="--iframe-ratio: 4 / 3" on the slide. */
.slide.iframe-slide {
  flex-direction: column;
  gap: 12px;
}
.slide.iframe-slide > iframe {
  flex: 1 1 0;
  min-height: 0;
  max-width: 100%;
  width: auto;
  height: auto;
  aspect-ratio: var(--iframe-ratio, 16 / 9);
  border: 0;
}
.slide.iframe-slide > p { flex: none; margin: 0; max-width: none; font-size: 18px; }

/* several iframes side by side: <div class="step slide iframe-slide iframe-row"> with two or more <iframe>.
   They share the width equally, each at its aspect ratio. */
.slide.iframe-slide.iframe-row {
  flex-direction: row;
  gap: 20px;
}
.slide.iframe-slide.iframe-row > iframe {
  flex: 1 1 0;
  min-width: 0;
  min-height: auto;
}

/* Title slide: the strategic full-colour moment */
#title {
  background: var(--accent);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 90px;
}
#title::before { background: #fff; }
#title .slide-footer { color: #fff; border-top-color: #fff; }
#title h1 { margin-bottom: 24px; }
#title p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Inverted slide for pacing: <div class="step slide dark"> */
.slide.dark { background: var(--ink); color: var(--paper); }
.slide.dark .slide-footer { border-top-color: var(--paper); }
.slide.dark .toc li { border-color: var(--paper); }

/* ---------- Fullscreen toggle (injected by js/main.js) ---------- */

.fullscreen-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: #fff;
  mix-blend-mode: difference;   /* visible over the dark canvas and over light or red slides */
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s;
}
.fullscreen-toggle:hover { opacity: 1; }
.fullscreen-toggle svg { display: block; width: 100%; height: 100%; }

/* ---------- Fallback (no impress.js support) ---------- */

.fallback-message { display: none; }
.impress-not-supported .fallback-message {
  display: block;
  color: var(--paper);
  padding: 1em var(--margin);
  font-size: 14px;
}
.impress-enabled .fallback-message { display: none; }

.impress-not-supported .step {
  position: relative;
  margin: 24px auto;
}