/* slides.css — the lecture-deck look for the teaching kit (/teach/lectures/<nn>/deck.html).
 *
 * Pairs with slides.js; the usage contract (markup, keys, print) is documented at the top
 * of that file. Values follow DESIGN.md: paper ground, ink text, Inter Display titles,
 * Source Serif body, Source Code Pro labels, ochre as the one accent, teal links.
 *
 * Every slide is laid out on a fixed 1280×720 canvas and scaled to the viewport by
 * slides.js, so sizes below are canvas pixels. Minimum text size on a slide is 18px
 * (labels); body text is 30px, which stays legible from the back of a lecture room.
 *
 * Print: one slide per 16:9 page (1280×720 CSS px = 13.33in × 7.5in), notes and controls
 * hidden. Playwright: page.pdf({ preferCSSPageSize: true, printBackground: true }).
 */

/* ---------------------------------------------------------------- fonts (as site.css) */
@font-face { font-family: "Inter Display"; font-weight: 800; font-display: swap; src: url(fonts/inter-display-extrabold.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url(fonts/inter-display-bold.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-display: swap; src: url(fonts/inter-display-semibold.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-400.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/source-serif-4-400i.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url(fonts/source-serif-4-600.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; font-display: swap; src: url(fonts/source-serif-4-700.woff2) format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-weight: 400; font-display: swap; src: url(fonts/source-code-pro-400.woff2) format("woff2"); }

/* ---------------------------------------------------------------- tokens */
:root {
  --paper: #EFE1C4;
  --paper-deep: #E6D5B2;
  --paper-light: #FBF6EC;
  --ink: #2E302F;
  --ink-soft: #5B5A52;
  --ochre: #C29434;
  --ochre-light: #E2B966;
  --teal: #2F6161;
  --teal-deep: #1F4545;
  --teal-light: #8FBDB8;
  --rule: #D3C3A2;

  --f-display: "Inter Display", system-ui, sans-serif;
  --f-body: "Source Serif 4", Georgia, serif;
  --f-mono: "Source Code Pro", ui-monospace, Menlo, monospace;

  --slide-w: 1280px;
  --slide-h: 720px;
  --slide-pad: 56px 84px 84px;
  --ui-h: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper-deep);
  color: var(--ink);
  font: 400 30px/1.35 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* ---------------------------------------------------------------- stage (JS on) */
.slides-js, .slides-js body { height: 100%; overflow: hidden; }
.slides-js .deck { position: fixed; inset: 0 0 var(--notes-h, 0px) 0; overflow: hidden; touch-action: pan-y; }
.slides-js .slide {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--slide-scale, 1));
  visibility: hidden; opacity: 0;
  transition: opacity .22s var(--ease), visibility 0s linear .22s;
}
.slides-js .slide.is-active { visibility: visible; opacity: 1; transition: opacity .22s var(--ease), visibility 0s; }

/* without JS: slides simply stack, each at canvas size */
html:not(.slides-js) .slide { margin: 24px auto; }
html:not(.slides-js) .notes { display: block; width: var(--slide-w); margin: -12px auto 32px; font-size: 20px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- the slide */
.slide {
  width: var(--slide-w); height: var(--slide-h);
  padding: var(--slide-pad);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 22px;
  overflow: hidden;
  position: relative;
}
.slide > *, .slide :is(p, h1, h2, h3, h4, ul, ol, blockquote, figure, table, dl, dd, pre) { margin: 0; }
.slide .notes { display: none; }

.slide h1, .slide h2, .slide h3 { font-family: var(--f-display); color: inherit; margin: 0; text-wrap: balance; }
.slide h1 { font-weight: 800; font-size: 84px; line-height: .95; letter-spacing: -0.035em; }
.slide h2 { font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -0.03em; max-width: 30ch; }
.slide h3 { font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; }
.slide p { max-width: 48ch; }
.slide a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.slide code { font-family: var(--f-mono); font-size: .86em; background: var(--paper-light); border: 1px solid var(--rule); padding: 0 .25em; border-radius: 2px; }
.slide em { font-style: italic; }
.slide strong { font-weight: 700; }

.kicker { font: 400 20px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.hl { background: linear-gradient(transparent 58%, var(--ochre-light) 58%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.small { font-size: 24px; line-height: 1.35; }
.mono { font-family: var(--f-mono); font-size: .8em; }
.center { text-align: center; align-self: center; }
.grow { flex: 1 1 auto; min-height: 0; }
.bottom { margin-top: auto !important; }

/* lists: ochre squares, generous rhythm, no paragraphs */
.slide ul, .slide ol { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.slide ul { list-style: none; }
.slide ul > li { position: relative; padding-left: 36px; }
.slide ul > li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 13px; height: 13px; background: var(--ochre); }
.slide ol { padding-left: 1.3em; }
.slide ol > li::marker { font: 700 .9em var(--f-display); color: var(--ink-soft); }
.slide li ul { margin-top: 10px; font-size: .85em; gap: 8px; }

/* ---------------------------------------------------------------- slide variants */
/* title slide: big title, kicker above, license line at the foot */
.slide--title { justify-content: center; gap: 28px; }
.slide--title .subtitle { font: 400 34px/1.3 var(--f-body); color: var(--ink-soft); max-width: 40ch; }
.slide--title .license { margin-top: auto; font: 400 18px/1.4 var(--f-mono); color: var(--ink-soft); max-width: none; }
.slide--title .license { max-width: 780px; }
/* the cover's rings, quoted in the lower-right corner (backgrounds, so nothing overflows) */
.slide--title, .slide--end {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1190px 610px, transparent 128px, rgba(47, 97, 97, .78) 129px, rgba(47, 97, 97, .78) 164px, transparent 165px),
    radial-gradient(circle at 1040px 700px, transparent 150px, rgba(184, 140, 46, .78) 151px, rgba(184, 140, 46, .78) 196px, transparent 197px);
  background-repeat: no-repeat;
}

/* section divider: teal-deep ground, paper text */
.slide--section { background: var(--teal-deep); color: var(--paper); justify-content: center; }
.slide--section .kicker { color: var(--teal-light); }
.slide--section h2 { font-size: 80px; line-height: .95; max-width: 18ch; }
.slide--section p { color: var(--paper-deep); }
.slide--section .slide__num, .slide--section .slide__foot { color: var(--teal-light); }

/* statement: one sentence, large */
.slide--statement { justify-content: center; }
.slide--statement .statement { font: 400 50px/1.2 var(--f-body); max-width: 30ch; letter-spacing: -0.005em; }

/* end slide: attribution; keep text clear of the rings in the lower-right corner */
.slide--end { justify-content: center; }
.slide--end > :not(.notes) { max-width: 820px; }

/* ---------------------------------------------------------------- building blocks */
/* two columns; .cols--fig gives the figure the wider column */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; flex: 1 1 auto; min-height: 0; align-items: start; }
.cols--fig { grid-template-columns: 5fr 7fr; align-items: stretch; }
.cols--fig-wide { grid-template-columns: 4fr 8fr; align-items: stretch; }
.cols--3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cols > * { min-width: 0; min-height: 0; }

/* figure card: the book's SVG diagrams, contained, never cropped */
.fig {
  margin: 0; background: var(--paper-light); border: 1px solid var(--rule);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-height: 0;
}
.fig img { display: block; width: 100%; height: 100%; min-height: 0; flex: 1 1 0; object-fit: contain; }
.fig figcaption { font: 400 18px/1.35 var(--f-mono); color: var(--ink-soft); flex: none; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 24px; }
.card { background: var(--paper-light); border: 1px solid var(--rule); padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; font-size: 25px; line-height: 1.35; }
.card--lead { border: 2px solid var(--ink); }
.card .kicker { font-size: 18px; }

/* quotation from the book (verbatim) with its source */
.quote { margin: 0; padding-left: 32px; border-left: 6px solid var(--ochre); font: italic 400 42px/1.25 var(--f-body); max-width: 34ch; }
.quote--md { font-size: 36px; }
.quote cite, .cite { display: block; margin-top: 18px; font: normal 400 19px/1.4 var(--f-mono); color: var(--ink-soft); }

/* source / footnote line at the bottom of the content */
.source { margin-top: auto !important; font: 400 18px/1.4 var(--f-mono); color: var(--ink-soft); max-width: none !important; }

/* big number */
.big-num { font: 800 132px/.9 var(--f-display); letter-spacing: -0.04em; }
.big-num small { font-size: .4em; letter-spacing: -0.02em; }

/* tables */
.slide-table { border-collapse: collapse; font-size: 26px; line-height: 1.3; width: 100%; }
.slide-table th { font: 700 22px/1.2 var(--f-display); text-align: left; color: var(--ink-soft); padding: 0 18px 10px 0; border-bottom: 2px solid var(--ink); }
.slide-table td { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.slide-table .num { font-family: var(--f-mono); text-align: right; white-space: nowrap; }
.slide-table th.num { font-family: var(--f-display); }

/* tags: free vs full book, etc. */
.tag { display: inline-block; font: 400 17px/1 var(--f-mono); padding: 6px 10px; border: 1.5px solid var(--ink); border-radius: 2px; vertical-align: .25em; white-space: nowrap; }
.tag--free { background: var(--ochre); }

/* horizontal bars: <div class="bars"><div class="bar" style="--v:.42"><span>label</span><b>0.42</b></div>…
   --v is the bar length in 0..1; set --label / --value on .bars to widen the text columns */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bars { --label: 9ch; --value: 5ch; }
.bar { display: grid; grid-template-columns: var(--label) 1fr var(--value); align-items: center; gap: 14px; font: 400 22px/1 var(--f-mono); }
.bar::after { content: ""; grid-column: 2; grid-row: 1; height: 28px; width: calc(var(--v, 0) * 100%); background: var(--ochre); }
.bar > span { grid-column: 1; }
.bar > b { grid-column: 3; font-weight: 400; text-align: right; }
.bar--teal::after { background: var(--teal); }
.bar--ink::after { background: var(--ink); }
.bar--rule::after { background: var(--rule); }

/* a stacked strip (e.g. what lies on the desk) */
.strip { display: flex; height: 64px; border: 2px solid var(--ink); }
.strip > span { flex: var(--v) 1 0; display: flex; align-items: center; padding: 0 10px; font: 400 18px/1.1 var(--f-mono); overflow: hidden; white-space: nowrap; border-right: 2px solid var(--ink); }
.strip > span:last-child { border-right: 0; }

/* step chain (a → b → c) */
.chain { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 400 24px/1.2 var(--f-mono); }
.chain > span { background: var(--paper-light); border: 1.5px solid var(--ink); padding: 10px 14px; }
.chain > i { font-style: normal; color: var(--ink-soft); }

/* automatic furniture added by slides.js */
.slide__num, .slide__foot { position: absolute; bottom: 28px; font: 400 16px/1 var(--f-mono); color: var(--ink-soft); letter-spacing: .02em; }
.slide__num { right: 40px; }
.slide__foot { left: 84px; }
.slide--title .slide__foot, .slide--title .slide__num,
.slide--end .slide__foot, .slide--end .slide__num { display: none; }

/* ---------------------------------------------------------------- UI chrome (screen only) */
.slides-ui { font: 400 14px/1 var(--f-mono); color: var(--ink-soft); }
.slides-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 30; background: transparent; }
.slides-progress > span { display: block; height: 100%; width: 0; background: var(--ochre); transition: width .22s var(--ease); }
.slides-bar {
  position: fixed; right: 12px; bottom: calc(var(--notes-h, 0px) + 10px); z-index: 30;
  display: flex; align-items: center; gap: 4px; padding: 4px;
  /* opaque: a translucent bar let the slide's own number (.slide__num) show through as ghost digits */
  background: var(--paper-light); border: 1px solid var(--rule); border-radius: 2px;
  transition: opacity .3s var(--ease);
}
.slides-idle .slides-bar { opacity: 0; pointer-events: none; }
.slides-bar button {
  min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 2px; background: transparent;
  font: inherit; color: var(--ink); cursor: pointer;
}
.slides-bar button:hover { background: var(--paper-deep); }
.slides-bar button[aria-pressed="true"] { background: var(--ochre); }
.slides-counter { min-width: 72px; text-align: center; padding: 0 6px; color: var(--ink); }

.slides-notes {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--notes-h, 0px); z-index: 20; overflow-y: auto;
  background: var(--ink); color: var(--paper); padding: 20px clamp(16px, 4vw, 48px) 24px;
  font: 400 clamp(16px, 1.6vw, 21px)/1.5 var(--f-body);
  display: none;
}
.slides-notes-on .slides-notes { display: block; }
.slides-notes .kicker { color: var(--ochre-light); font-size: 14px; margin: 0 0 8px; }
.slides-notes p { margin: 0 0 .6em; max-width: 80ch; }
.slides-notes a { color: var(--ochre-light); }

.slides-help {
  position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.slides-help.is-open { display: flex; }
.slides-help > div { background: var(--paper-light); color: var(--ink); border: 2px solid var(--ink); padding: 28px 32px; max-width: min(560px, calc(100vw - 32px)); font: 400 16px/1.5 var(--f-body); }
.slides-help h2 { font: 800 28px/1 var(--f-display); letter-spacing: -0.02em; margin: 0 0 14px; }
.slides-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.slides-help dt { font: 400 14px/1.6 var(--f-mono); }
.slides-help dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .slides-js .slide, .slides-js .slide.is-active, .slides-progress > span, .slides-bar { transition: none !important; }
}

/* ---------------------------------------------------------------- print: one slide per page */
@page { size: 1280px 720px; margin: 0; }
@media print {
  html, body, .slides-js, .slides-js body { height: auto !important; overflow: visible !important; background: var(--paper) !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slides-js .deck, .deck { position: static !important; inset: auto !important; overflow: visible !important; }
  .slides-js .slide, .slide {
    position: relative !important; left: auto !important; top: auto !important;
    transform: none !important; visibility: visible !important; opacity: 1 !important; transition: none !important;
    margin: 0 !important; break-after: page; page-break-after: always; break-inside: avoid;
  }
  .slide:last-of-type { break-after: auto; page-break-after: auto; }
  .notes, .slides-ui, .slides-notes, .slides-help, .slides-progress, .slides-bar { display: none !important; }
}