/* SI 658 slides — one DOM, two presentations.
 *
 *   .deck (or .deck.is-stage)  16:9 stage. Everything is sized in canvas px
 *                              via --u = 1/1920 of the deck's width, so the
 *                              same rules draw a 390-px phone preview, the
 *                              builder, full-screen projection, and the
 *                              13.333in × 7.5in PDF page.
 *   .deck.is-read              "Page" view: the whole deck as one reflowing,
 *                              zoomable document (rem units, ~70ch lines).
 *   .deck.show-notes           Page view also shows speaker notes.
 *
 * Link css/tokens.css first (fonts, --blue, --maize, …). Markup contract:
 * slides/engine/render.js. Design source: design/slides/*.html (1920×1080),
 * tokens: design/ds/si658/tokens.json.
 *
 * Decorative things (bands, Block M, big numerals, quote marks, footer course
 * line) are CSS pseudo-elements, background images, or aria-hidden, so they
 * stay out of the accessibility tree and out of the PDF tag tree.
 */

.deck {
  --maize-deep: #E7A800;        /* decorative numerals on maize only */
  --citation-on-blue: #C9D4E0;  /* small print on um-blue */
  --paper: var(--bg, #F2F1EE);
  --m-maize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.46 34.656'%3E%3Cpath fill='%23FFCB05' d='M24.232 28.609 14.306 15.045v9.867h3.946v9.744H0V24.912h3.699V9.742H0V0h14.339l9.894 13.662L34.125 0H48.46v9.742h-3.7v15.17h3.7v9.744H30.209v-9.744h3.944v-9.867z'/%3E%3C/svg%3E");
  --m-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.46 34.656'%3E%3Cpath fill='%2300274C' d='M24.232 28.609 14.306 15.045v9.867h3.946v9.744H0V24.912h3.699V9.742H0V0h14.339l9.894 13.662L34.125 0H48.46v9.742h-3.7v15.17h3.7v9.744H30.209v-9.744h3.944v-9.867z'/%3E%3C/svg%3E");
}

/* =====================================================================
   STAGE — 1920 × 1080 canvas, scaled
   ===================================================================== */

.deck:not(.is-read) { container-type: inline-size; }

.deck:not(.is-read) .slide {
  --u: calc(100cqw / 1920);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(1080 * var(--u));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  padding: calc(128 * var(--u));
  background: var(--paper);
  color: var(--blue);
  font-family: var(--sans);
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  font-kerning: normal;
  overflow-wrap: break-word;
  text-align: left;
}
.deck:not(.is-read) .slide *,
.deck:not(.is-read) .slide *::before,
.deck:not(.is-read) .slide *::after { box-sizing: border-box; margin: 0; }
.deck:not(.is-read) .slide + .slide { margin-top: 0; }

/* hidden on stage (the viewer clones notes elsewhere) */
.deck:not(.is-read) .s-count,
.deck:not(.is-read) .s-notes { display: none; }

/* headings wrap inside the canvas, never overflow sideways */
.deck:not(.is-read) .slide :is(h1, h2, h3, h4, h5, h6) { text-wrap: pretty; overflow-wrap: break-word; hyphens: manual; }

/* ---------- shared parts ---------- */

/* decorative bands */
.deck:not(.is-read) .slide::before,
.deck:not(.is-read) .slide::after { content: none; position: absolute; pointer-events: none; box-sizing: border-box; }

/* paper slides: 16 blue + 8 maize at the top */
.deck:not(.is-read) :is(.L-runofshow, .L-toc, .L-table, .L-activity, .L-nextweek, .L-content, .L-sources)::before {
  content: "";
  left: 0; top: 0; width: 100%;
  height: calc(24 * var(--u));
  border-top: calc(16 * var(--u)) solid var(--blue);
  background: var(--maize);
}
.deck:not(.is-read) :is(.L-runofshow, .L-toc, .L-table, .L-activity, .L-nextweek, .L-content, .L-sources) { padding-bottom: calc(160 * var(--u)); }

/* sign label */
.deck:not(.is-read) .slide .chip {
  align-self: flex-start;
  flex: none;
  background: var(--maize);
  color: var(--blue);
  font-size: calc(24 * var(--u));
  font-weight: 800;
  letter-spacing: calc(3 * var(--u));
  line-height: normal;
  text-transform: uppercase;
  padding: calc(8 * var(--u)) calc(20 * var(--u));
}

/* slide heading, always at the top margin */
.deck:not(.is-read) .slide .s-h {
  font-size: calc(72 * var(--u));
  font-weight: 800;
  letter-spacing: calc(-1 * var(--u));
  line-height: 1.1;
  color: inherit;
  flex: none;
}

/* footer: course line (decorative, aria-hidden) + source */
.deck:not(.is-read) .s-foot {
  position: absolute;
  left: calc(128 * var(--u));
  bottom: calc(64 * var(--u));
  width: calc(1664 * var(--u));
  display: flex;
  gap: 0;
  align-items: baseline;
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  color: var(--blue-secondary);
}
.deck:not(.is-read) .s-source { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck:not(.is-read) .s-course { flex: 1 0 auto; display: flex; gap: calc(16 * var(--u)); }
.deck:not(.is-read) .s-source + .s-course > span:first-child::before { content: "\00a0· " / ""; }
.deck:not(.is-read) .s-num { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.deck:not(.is-read) .s-foot a { color: inherit; }

/* Block M (background image; the span is aria-hidden) */
.deck:not(.is-read) .blockm {
  display: block;
  width: calc(112 * var(--u));
  height: calc(80 * var(--u));
  background: var(--m-maize) center / contain no-repeat;
  flex: none;
}

/* in-slide text blocks (content, activity, table intro, timer, section) */
.deck:not(.is-read) .slide .s-text { display: flex; flex-direction: column; gap: calc(32 * var(--u)); min-height: 0; }
.deck:not(.is-read) .slide :is(ul, ol):not(.ros, .toc, .mosaic) { padding-left: calc(48 * var(--u)); }
.deck:not(.is-read) .slide :is(ul, ol):not(.ros, .toc, .mosaic) > li + li { margin-top: calc(12 * var(--u)); }
.deck:not(.is-read) .slide li > ul { margin-top: calc(12 * var(--u)); padding-left: calc(48 * var(--u)); }
.deck:not(.is-read) .slide li::marker { color: var(--blue-secondary); }
.deck:not(.is-read) .slide :is(h3, h4, h5, h6) { font-size: calc(44 * var(--u)); line-height: 1.2; font-weight: 700; }
.deck:not(.is-read) .slide strong { font-weight: 800; }
.deck:not(.is-read) .slide a { color: inherit; text-underline-offset: .12em; text-decoration-thickness: .06em; }
.deck:not(.is-read) .slide code { font-family: var(--mono); font-size: .9em; }
.deck:not(.is-read) .slide pre {
  font-family: var(--mono); font-size: calc(28 * var(--u)); line-height: 1.4;
  background: var(--white); border-left: calc(8 * var(--u)) solid var(--blue); padding: calc(20 * var(--u)) calc(28 * var(--u));
  white-space: pre-wrap;
}
.deck:not(.is-read) .slide pre code { font-size: inherit; }
.deck:not(.is-read) .slide .s-text blockquote {
  border-left: calc(8 * var(--u)) solid var(--maize);
  padding-left: calc(32 * var(--u));
  font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.3;
}
.deck:not(.is-read) .slide img { display: block; max-width: 100%; }
.deck:not(.is-read) .s-fig { display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-height: 0; }
.deck:not(.is-read) .s-fig img { width: 100%; height: auto; max-height: calc(560 * var(--u)); object-fit: contain; object-position: left top; min-height: 0; }
.deck:not(.is-read) .s-cap { font-size: calc(24 * var(--u)); line-height: 1.4; color: var(--blue-secondary); }

/* ---------- title ---------- */
.deck:not(.is-read) .L-title {
  background: var(--blue);
  color: var(--white);
  justify-content: space-between;
  gap: 0;
}
.deck:not(.is-read) :is(.L-title, .L-timer, .L-break)::before {
  content: ""; left: 0; top: 0; width: 100%; height: calc(24 * var(--u)); background: var(--maize);
}
.deck:not(.is-read) .t-brand { display: flex; align-items: center; gap: calc(32 * var(--u)); }
.deck:not(.is-read) .t-sign { display: flex; align-items: center; gap: calc(32 * var(--u)); font-size: calc(44 * var(--u)); line-height: normal; }
.deck:not(.is-read) .t-sign .sign {
  background: var(--maize); color: var(--blue);
  font-weight: 800; letter-spacing: calc(2 * var(--u)); line-height: 1.2;
  padding: calc(8 * var(--u)) calc(24 * var(--u));
}
.deck:not(.is-read) .t-course { font-weight: 300; color: var(--paper-on-blue); }
.deck:not(.is-read) .t-main { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.deck:not(.is-read) .t-h {
  font-size: calc(160 * var(--u)); font-weight: 800; letter-spacing: calc(-4 * var(--u)); line-height: 1; color: var(--white);
}
.deck:not(.is-read) .t-sub { font-size: calc(44 * var(--u)); line-height: 1.3; color: var(--paper-on-blue); }
.deck:not(.is-read) .t-meta {
  display: flex; gap: calc(96 * var(--u));
  border-top: calc(4 * var(--u)) solid var(--maize);
  padding-top: calc(32 * var(--u));
  line-height: normal;
}
.deck:not(.is-read) .t-meta > div { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.deck:not(.is-read) .t-meta dt {
  font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: calc(4 * var(--u)); text-transform: uppercase; color: var(--maize);
}
.deck:not(.is-read) .t-meta dd { font-size: calc(32 * var(--u)); font-weight: 700; }

/* ---------- run of show ---------- */
.deck:not(.is-read) .ros { list-style: none; padding: 0; display: flex; flex-direction: column; min-height: 0; }
.deck:not(.is-read) .ros-row {
  display: flex; align-items: center; gap: calc(40 * var(--u));
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--blue-15);
}
.deck:not(.is-read) .ros-row:last-child { border-bottom: calc(2 * var(--u)) solid var(--blue-15); }
.deck:not(.is-read) .ros-time {
  flex: none; width: calc(200 * var(--u));
  font-family: var(--mono); font-size: calc(32 * var(--u)); font-weight: 500; line-height: normal;
  color: var(--blue-secondary); font-variant-numeric: tabular-nums;
}
.deck:not(.is-read) .ros-what { flex: 1; min-width: 0; font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.25; }
.deck:not(.is-read) .ros-tag {
  flex: none;
  font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: calc(2 * var(--u)); line-height: normal; text-transform: uppercase;
  color: var(--blue-secondary);
  border: calc(2 * var(--u)) solid currentColor; border-radius: calc(2 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
}
.deck:not(.is-read) .ros-row.is-now {
  background: var(--white);
  border-top: 0;
  border-left: calc(12 * var(--u)) solid var(--maize);
  padding: calc(20 * var(--u)) calc(32 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}
.deck:not(.is-read) .is-now .ros-time { font-weight: 700; color: var(--blue); }
.deck:not(.is-read) .is-now .ros-what { font-weight: 800; }
.deck:not(.is-read) .is-now .ros-tag {
  font-weight: 800; color: var(--maize); background: var(--blue);
  border: 0; border-radius: 0; padding: calc(8 * var(--u)) calc(18 * var(--u));
}

/* ---------- contents ---------- */
.deck:not(.is-read) .L-toc .toc { margin-top: calc(8 * var(--u)); }
.deck:not(.is-read) .toc { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); min-height: 0; }
.deck:not(.is-read) .toc > li {
  display: flex; align-items: center; gap: calc(40 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--blue-15);
  padding-top: calc(20 * var(--u));
}
.deck:not(.is-read) .toc-n {
  flex: none; width: calc(128 * var(--u));
  background: var(--blue); color: var(--maize);
  font-size: calc(44 * var(--u)); font-weight: 800; line-height: normal; text-align: center;
  padding: calc(8 * var(--u)) 0;
}
.deck:not(.is-read) .toc-what { flex: 1; min-width: 0; font-size: calc(44 * var(--u)); font-weight: 700; line-height: 1.2; }
.deck:not(.is-read) .toc-time { flex: none; font-family: var(--mono); font-size: calc(32 * var(--u)); line-height: normal; color: var(--blue-secondary); }

/* ---------- section break ---------- */
.deck:not(.is-read) .L-section { background: var(--maize); color: var(--blue); justify-content: flex-end; }
.deck:not(.is-read) .L-section::after {
  content: ""; left: 0; bottom: 0; width: 100%; height: calc(32 * var(--u)); background: var(--blue);
}
.deck:not(.is-read) .sec-num::before { content: attr(data-n) / ""; }
.deck:not(.is-read) .sec-num {
  position: absolute; right: calc(112 * var(--u)); top: calc(40 * var(--u)); width: calc(1100 * var(--u));
  font-size: calc(360 * var(--u)); font-weight: 800; letter-spacing: calc(-12 * var(--u)); line-height: 1;
  text-align: right; color: var(--maize-deep);
}
.deck:not(.is-read) .L-section .blockm {
  position: absolute; left: calc(128 * var(--u)); top: calc(128 * var(--u));
  background-image: var(--m-blue);
}
.deck:not(.is-read) .sec-main { position: relative; display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.deck:not(.is-read) .L-section .chip {
  background: var(--blue); color: var(--maize);
  font-size: calc(32 * var(--u)); letter-spacing: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(24 * var(--u));
}
.deck:not(.is-read) .sec-h { font-size: calc(160 * var(--u)); font-weight: 800; letter-spacing: calc(-4 * var(--u)); line-height: 1; }
.deck:not(.is-read) .sec-body { display: flex; flex-direction: column; gap: calc(24 * var(--u)); font-size: calc(44 * var(--u)); font-weight: 500; line-height: 1.3; }
.deck:not(.is-read) .sec-body:empty { display: none; }

/* ---------- content (addition: paper ground, heading, body, optional figure) ---------- */
.deck:not(.is-read) .L-content .s-body { flex: 1; min-height: 0; }
.deck:not(.is-read) .L-content .s-body.has-figure {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(760 * var(--u)); gap: calc(80 * var(--u)); align-items: start;
}
.deck:not(.is-read) .L-content .s-text > p:first-child:not(:only-child) { color: var(--blue-secondary); }

/* ---------- statement (addition: one big idea on um-blue) ---------- */
.deck:not(.is-read) .L-statement {
  background: var(--blue); color: var(--white);
  padding: calc(128 * var(--u)) calc(192 * var(--u));
  justify-content: center; gap: calc(40 * var(--u));
}
.deck:not(.is-read) :is(.L-statement, .L-quote)::before {
  content: ""; left: 0; top: 0; width: calc(32 * var(--u)); height: 100%; background: var(--maize);
}
.deck:not(.is-read) .stmt {
  font-size: calc(96 * var(--u)); font-weight: 800; letter-spacing: calc(-2 * var(--u)); line-height: 1.1; color: var(--white);
  max-width: calc(1440 * var(--u));
}
.deck:not(.is-read) .stmt em { font-style: normal; color: var(--maize); }
.deck:not(.is-read) .stmt-body { display: flex; flex-direction: column; gap: calc(24 * var(--u)); font-size: calc(44 * var(--u)); line-height: 1.3; color: var(--paper-on-blue); max-width: calc(1360 * var(--u)); }
.deck:not(.is-read) .L-statement .stmt-body::before {
  content: ""; display: block; width: calc(160 * var(--u)); height: calc(8 * var(--u)); background: var(--maize); margin-bottom: calc(16 * var(--u));
}

/* ---------- photo ---------- */
.deck:not(.is-read) .L-photo { background: var(--blue-deep); color: var(--white); padding: 0; }
.deck:not(.is-read) .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.deck:not(.is-read) .ph-cap {
  position: absolute; left: calc(128 * var(--u)); bottom: calc(64 * var(--u)); max-width: calc(1664 * var(--u));
  display: flex; align-items: stretch;
  font-size: calc(24 * var(--u)); line-height: 1.4;
}
.deck:not(.is-read) .chip-in {
  flex: none; display: flex; align-items: center;
  background: var(--maize); color: var(--blue);
  font-weight: 800; letter-spacing: calc(3 * var(--u)); text-transform: uppercase;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
}
.deck:not(.is-read) .ph-text { background: var(--blue-deep); color: var(--white); font-weight: 500; padding: calc(12 * var(--u)) calc(24 * var(--u)); }

/* ---------- quote ---------- */
.deck:not(.is-read) .L-quote {
  background: var(--blue); color: var(--white);
  padding: calc(128 * var(--u)) calc(192 * var(--u));
  justify-content: center; gap: calc(24 * var(--u));
}
.deck:not(.is-read) .q-kicker { margin-bottom: 0; }
.deck:not(.is-read) .L-quote:has(.q-kicker) { padding-top: calc(96 * var(--u)); padding-bottom: calc(96 * var(--u)); }
.deck:not(.is-read) .L-quote:has(.q-kicker) .q-mark { font-size: calc(160 * var(--u)); }
.deck.is-read .q-kicker { display: none; }
.deck:not(.is-read) .q-mark { display: block; font-size: calc(240 * var(--u)); font-weight: 800; line-height: .8; color: var(--maize); }
.deck:not(.is-read) .q-text { display: flex; flex-direction: column; gap: calc(24 * var(--u)); font-size: calc(64 * var(--u)); font-weight: 700; letter-spacing: calc(-1 * var(--u)); line-height: 1.25; }
.deck:not(.is-read) .q-rule { display: block; flex: none; width: calc(160 * var(--u)); height: calc(8 * var(--u)); background: var(--maize); }
.deck:not(.is-read) .q-author { font-size: calc(44 * var(--u)); font-weight: 800; line-height: normal; color: var(--maize); }
.deck:not(.is-read) .q-role { font-size: calc(32 * var(--u)); line-height: normal; color: var(--paper-on-blue); }
.deck:not(.is-read) .q-author + .q-role { margin-top: calc(-16 * var(--u)); }
.deck:not(.is-read) .q-cite { font-size: calc(24 * var(--u)); line-height: 1.5; color: var(--citation-on-blue); }
/* quote over a picture: the picture fills the slide under a navy scrim, heaviest where the words sit (left),
   thinning toward the right so the place still shows through. Text stays white-on-navy for contrast. */
.deck:not(.is-read) .L-quote .q-bg-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.deck:not(.is-read) .L-quote:has(.q-bg-img) { background: var(--blue-deep); }
.deck:not(.is-read) .L-quote:has(.q-bg-img)::after {
  content: ""; inset: 0; z-index: 1;
  background: linear-gradient(97deg, rgba(0, 39, 76, .93) 0%, rgba(0, 39, 76, .8) 46%, rgba(0, 39, 76, .3) 72%, rgba(0, 39, 76, .1) 100%);
}
.deck:not(.is-read) .L-quote:has(.q-bg-img) :is(.q-text, .q-cite) { max-width: calc(1000 * var(--u)); }
.deck:not(.is-read) .L-quote:has(.q-bg-img) > :not(.q-bg-img, .s-pg, .s-count, .s-photo),
.deck:not(.is-read) .L-quote:has(.q-bg-img)::before { position: relative; z-index: 2; }
.deck:not(.is-read) .L-quote:has(.q-bg-img)::before { position: absolute; }
.deck.is-read .L-quote .q-bg-img { display: block; width: 100%; height: auto; margin-top: .75rem; }

/* ---------- mosaic: full bleed, 8-px navy gutters ---------- */
.deck:not(.is-read) .L-mosaic { background: var(--blue-deep); color: var(--white); padding: 0; }
.deck:not(.is-read) .mosaic {
  position: absolute; inset: 0; list-style: none; padding: 0;
  display: grid; gap: calc(8 * var(--u));
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.deck:not(.is-read) .mosaic > li { min-width: 0; min-height: 0; overflow: hidden; }
.deck:not(.is-read) .mosaic img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.deck:not(.is-read) .mosaic.n-2 { grid-template-columns: 1fr 1fr; }
.deck:not(.is-read) .mosaic.n-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.deck:not(.is-read) .mosaic.n-3 > li:first-child { grid-row: span 2; }
.deck:not(.is-read) .mosaic.n-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.deck:not(.is-read) .mosaic.n-5 { grid-template-columns: 4fr 3fr 3fr; grid-template-rows: 1fr 1fr; }
.deck:not(.is-read) .mosaic.n-5 > li:first-child { grid-row: span 2; }
.deck:not(.is-read) .mosaic.n-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.deck:not(.is-read) .mosaic.n-7 { grid-template-columns: 4fr 3fr 3fr 3fr; grid-template-rows: 1fr 1fr; }
.deck:not(.is-read) .mosaic.n-7 > li:first-child { grid-row: span 2; }
/* the designed eight-tile arrangement */
.deck:not(.is-read) .mosaic.n-8 {
  grid-template-columns: calc(760 * var(--u)) calc(572 * var(--u)) calc(282 * var(--u)) calc(282 * var(--u));
  grid-template-rows: calc(352 * var(--u)) calc(176 * var(--u)) calc(168 * var(--u)) calc(360 * var(--u));
}
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(2) { grid-area: 3 / 1 / 5 / 2; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(4) { grid-area: 2 / 2 / 4 / 3; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(5) { grid-area: 4 / 2 / 5 / 3; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(6) { grid-area: 1 / 3 / 3 / 5; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(7) { grid-area: 3 / 3 / 5 / 4; }
.deck:not(.is-read) .mosaic.n-8 > li:nth-child(8) { grid-area: 3 / 4 / 5 / 5; }
.deck:not(.is-read) .mo-h:not(.sr-only) {
  position: absolute; z-index: 1; left: calc(64 * var(--u)); top: calc(64 * var(--u)); width: calc(560 * var(--u));
  background: var(--maize); color: var(--blue);
  font-size: calc(32 * var(--u)); font-weight: 800; line-height: 1.2; letter-spacing: 0;
  padding: calc(16 * var(--u)) calc(24 * var(--u));
}

/* ---------- table ---------- */
.deck:not(.is-read) .s-tbl { min-height: 0; }
.deck:not(.is-read) .s-tbl table {
  width: 100%;
  border-collapse: collapse;
  border: calc(2 * var(--u)) solid var(--blue);
  font-size: calc(32 * var(--u));
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.deck:not(.is-read) .s-tbl :is(th, td) { padding: calc(4 * var(--u)) calc(24 * var(--u)); text-align: left; vertical-align: top; font-weight: 400; }
.deck:not(.is-read) .s-tbl thead th { padding-block: calc(14 * var(--u)); background: var(--blue); color: var(--white); font-weight: 700; }
.deck:not(.is-read) .s-tbl thead th:first-child { color: var(--maize); }
.deck:not(.is-read) .s-tbl tbody tr:nth-child(odd) { background: var(--white); }
.deck:not(.is-read) .s-tbl tbody tr:nth-child(even) { background: var(--paper-on-blue); }
.deck:not(.is-read) .s-tbl .a-right { text-align: right; }
.deck:not(.is-read) .s-tbl .a-center { text-align: center; }
.deck:not(.is-read) .L-table .s-text { color: var(--blue-secondary); }

/* ---------- activity ---------- */
.deck:not(.is-read) :is(.L-activity, .L-nextweek) {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(560 * var(--u)); gap: calc(80 * var(--u));
}
.deck:not(.is-read) .act-main { display: flex; flex-direction: column; gap: calc(32 * var(--u)); min-width: 0; min-height: 0; }
.deck:not(.is-read) :is(.L-activity, .L-nextweek) .s-text > p { color: var(--blue-secondary); }
.deck:not(.is-read) .L-activity .s-text > ol { font-weight: 500; padding-left: calc(40 * var(--u)); }
.deck:not(.is-read) .L-activity .s-text > ol > li + li { margin-top: 0; }
.deck:not(.is-read) .facts {
  display: flex; flex-direction: column; gap: calc(32 * var(--u));
  background: var(--blue); color: var(--white);
  padding: calc(48 * var(--u));
  border-top: calc(12 * var(--u)) solid var(--maize);
  min-height: 0;
}
.deck:not(.is-read) .facts > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.deck:not(.is-read) .facts dt {
  font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: calc(4 * var(--u)); line-height: normal; text-transform: uppercase; color: var(--maize);
}
.deck:not(.is-read) .facts dd { font-size: calc(32 * var(--u)); font-weight: 700; line-height: 1.3; color: var(--white); }
.deck:not(.is-read) .facts dd.f-big { font-size: calc(44 * var(--u)); font-weight: 800; line-height: normal; }

/* ---------- timer ---------- */
.deck:not(.is-read) .L-timer { background: var(--blue); color: var(--white); gap: calc(24 * var(--u)); }
.deck:not(.is-read) .L-timer .s-text { color: var(--paper-on-blue); }
.deck:not(.is-read) .timer {
  position: absolute; left: calc(128 * var(--u)); top: calc(360 * var(--u));
  width: calc(1664 * var(--u)); height: calc(592 * var(--u));
  display: flex; flex-direction: column; justify-content: center; gap: calc(32 * var(--u));
}
.deck:not(.is-read) .timer-t {
  font-size: calc(360 * var(--u)); font-weight: 800; line-height: .95; letter-spacing: calc(-6 * var(--u));
  font-variant-numeric: tabular-nums;
}
.deck:not(.is-read) .timer-bar { height: calc(32 * var(--u)); background: var(--blue-secondary); border-radius: calc(2 * var(--u)); overflow: hidden; }
.deck:not(.is-read) .timer-bar > span { display: block; height: 100%; width: calc(var(--timer-p, 1) * 100%); background: var(--maize); transition: width .25s linear; }
.deck:not(.is-read) .timer-s {
  font-size: calc(40 * var(--u)); font-weight: 800; letter-spacing: calc(5 * var(--u)); line-height: normal; text-transform: uppercase; color: var(--maize);
}
.deck:not(.is-read) .timer.is-done .timer-t { color: var(--maize); animation: slide-timer-blink 1s steps(1) infinite; }
@keyframes slide-timer-blink { 50% { opacity: .4; } }

/* ---------- break ---------- */
.deck:not(.is-read) .L-break { background: var(--blue-deep); color: var(--white); justify-content: center; gap: calc(40 * var(--u)); }
.deck:not(.is-read) .L-break::after {
  content: ""; left: 0; bottom: 0; width: 100%; height: calc(24 * var(--u)); background: var(--maize);
}
.deck:not(.is-read) .L-break .blockm { position: absolute; right: calc(128 * var(--u)); top: calc(128 * var(--u)); }
.deck:not(.is-read) .br-h {
  font-size: calc(400 * var(--u)); font-weight: 800; letter-spacing: calc(-12 * var(--u)); line-height: .9;
  text-transform: uppercase; color: var(--maize);
}
.deck:not(.is-read) .br-back { font-size: calc(96 * var(--u)); font-weight: 800; letter-spacing: calc(-2 * var(--u)); line-height: 1.1; }
.deck:not(.is-read) .br-time { color: var(--maize); }
.deck:not(.is-read) .br-sub { font-size: calc(44 * var(--u)); line-height: normal; color: var(--paper-on-blue); }

/* Visually hidden, but still painted into the PDF (Chrome skips fully
   clipped text, which would drop the heading from the tag tree/outline) */
.deck .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap !important; border: 0 !important;
}

/* =====================================================================
   PAGE — the whole deck as one reflowing document
   ===================================================================== */

.deck.is-read {
  font-family: var(--sans);
  font-size: var(--text-base, 1.0625rem);
  line-height: 1.6;
  color: var(--blue);
  overflow-wrap: break-word;
}
.deck.is-read .slide {
  max-width: 70ch;
  margin: 0 auto;
  padding: 2rem 0 2.25rem;
  border-top: 2px solid var(--blue-15);
}
.deck.is-read .slide:first-child { border-top: 0; padding-top: .5rem; }
.deck.is-read .slide > * + * { margin-top: .75rem; }
.deck.is-read .slide :is(p, ul, ol, dl, blockquote, pre) { margin-block: 0; }
.deck.is-read .slide :is(p, ul, ol, dl, blockquote, pre, .s-fig, .s-tbl, .s-text > *) + :is(p, ul, ol, dl, blockquote, pre, .s-fig, .s-tbl, h3, h4, h5, h6) { margin-top: .75rem; }

/* decorative → gone */
.deck.is-read .blockm,
.deck.is-read .sec-num,
.deck.is-read .q-mark,
.deck.is-read .q-rule,
.deck.is-read .s-course,
.deck.is-read .timer-t,
.deck.is-read .timer-bar { display: none; }

/* headings that are visually hidden on stage are real headings here */
.deck.is-read .slide:not(.L-quote) > .sr-only:is(h1, h2),
.deck.is-read .slide:not(.L-quote) > .im-text > .sr-only:is(h1, h2),
.deck.is-read .mo-h.sr-only {
  position: static !important; width: auto !important; height: auto !important; margin: .75rem 0 0 !important;
  overflow: visible !important; clip: auto; clip-path: none; white-space: normal !important;
}

.deck.is-read .s-count {
  font-size: .875rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-secondary);
  margin: 0;
}
.deck.is-read .slide :is(h1, h2) { font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 0; }
.deck.is-read .slide h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem); margin-top: .5rem; }
.deck.is-read .slide h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); margin-top: .5rem; }
.deck.is-read .slide :is(h3, h4, h5, h6) { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; margin-bottom: 0; }
.deck.is-read .slide :is(ul, ol):not(.ros, .toc, .mosaic) { padding-left: 1.5em; }
.deck.is-read .slide :is(ul, ol):not(.ros, .toc, .mosaic) li + li { margin-top: .35em; }
.deck.is-read .slide a { color: var(--blue); text-underline-offset: 3px; }
.deck.is-read .slide code { font-family: var(--mono); font-size: .9em; }
.deck.is-read .slide pre { font-family: var(--mono); font-size: .9375rem; background: var(--white); border-left: 4px solid var(--blue); padding: .75rem 1rem; white-space: pre-wrap; }
.deck.is-read .slide blockquote { border-left: 4px solid var(--maize); padding-left: 1rem; margin-inline: 0; font-weight: 700; }
.deck.is-read .slide img { max-width: 100%; height: auto; display: block; }

.deck.is-read .chip,
.deck.is-read .chip-in {
  display: inline-block;
  background: var(--maize); color: var(--blue);
  font-size: .875rem; font-weight: 800; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase;
  padding: .125rem .5rem; margin-right: .5rem;
}
.deck.is-read .chip + :is(h1, h2) { margin-top: .5rem; }

.deck.is-read .s-fig { margin: 1rem 0 0; }
.deck.is-read .s-cap, .deck.is-read .s-source { font-size: .9375rem; color: var(--blue-secondary); margin-top: .5rem; }
.deck.is-read .s-foot { margin-top: 1rem; }
.deck.is-read .s-foot:not(:has(.s-source)) { display: none; }

/* title */
.deck.is-read .t-sign { font-size: 1rem; }
.deck.is-read .t-sign .sign { background: var(--maize); color: var(--blue); font-weight: 800; padding: .125rem .5rem; margin-right: .25rem; }
.deck.is-read .t-sub { font-size: 1.1875rem; color: var(--blue-secondary); }
.deck.is-read .t-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; border-top: 3px solid var(--maize); padding-top: .75rem; }
.deck.is-read :is(.t-meta, .facts) dt { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-secondary); }
.deck.is-read :is(.t-meta, .facts) dd { margin: 0; font-weight: 700; }

/* run of show, contents */
.deck.is-read :is(.ros, .toc) { list-style: none; padding: 0; margin-top: 1rem; }
.deck.is-read :is(.ros, .toc) > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  border-top: 1px solid var(--blue-15); padding: .625rem .75rem; margin: 0;
}
.deck.is-read :is(.ros, .toc) > li:last-child { border-bottom: 1px solid var(--blue-15); }
.deck.is-read :is(.ros-time, .toc-time) { font-family: var(--mono); color: var(--blue-secondary); font-variant-numeric: tabular-nums; }
.deck.is-read .ros-time { min-width: 4.5ch; }
.deck.is-read :is(.ros-what, .toc-what) { flex: 1 1 12rem; font-weight: 700; }
.deck.is-read .ros-tag { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-secondary); border: 1px solid currentColor; border-radius: 2px; padding: 0 .375rem; }
.deck.is-read .ros-row.is-now { background: var(--white); border-left: 6px solid var(--maize); padding-left: .75rem; }
.deck.is-read .is-now .ros-tag { background: var(--blue); color: var(--maize); border-color: var(--blue); }
.deck.is-read .toc-n { font-weight: 800; color: var(--blue-secondary); font-variant-numeric: tabular-nums; }

/* section, statement */
.deck.is-read .L-section .sec-h { font-size: clamp(1.625rem, 1.2rem + 2vw, 2.25rem); }
.deck.is-read .sec-body { font-size: 1.1875rem; margin-top: .5rem; }
.deck.is-read .L-section { border-top: 6px solid var(--maize); }
.deck.is-read .stmt { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.125rem); }
.deck.is-read .stmt-body { font-size: 1.1875rem; margin-top: .5rem; }

/* photo, mosaic */
.deck.is-read .ph-img { margin-top: 1rem; }
.deck.is-read .ph-cap { font-size: .9375rem; color: var(--blue-secondary); margin-top: .5rem; }
.deck.is-read .mosaic { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .5rem; margin-top: 1rem; }
.deck.is-read .mosaic > li { margin: 0; }
.deck.is-read .mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* quote */
.deck.is-read .q-text { border-left: 6px solid var(--maize); padding-left: 1rem; margin: 1rem 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.45; }
.deck.is-read .q-text > * + * { margin-top: .75rem; }
.deck.is-read .q-author { font-weight: 800; margin-top: .75rem; }
.deck.is-read .q-author + .q-role { margin-top: 0; }
.deck.is-read .q-role { color: var(--blue-secondary); }
.deck.is-read .q-cite { font-size: .9375rem; color: var(--blue-secondary); }

/* table: scrolls inside its wrapper, never the page */
.deck.is-read .s-tbl { overflow-x: auto; max-width: 100%; margin-top: 1rem; }
.deck.is-read .s-tbl:focus-visible { outline: var(--focus-on-light, 3px solid var(--blue)); outline-offset: 2px; }
.deck.is-read .s-tbl table { border-collapse: collapse; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.deck.is-read .s-tbl :is(th, td) { padding: .5rem .75rem; border: 1px solid var(--blue-15); text-align: left; vertical-align: top; }
.deck.is-read .s-tbl thead th { background: var(--blue); color: var(--white); border-color: var(--blue); }
.deck.is-read .s-tbl tbody th { font-weight: 700; }
.deck.is-read .s-tbl tbody tr:nth-child(odd) { background: var(--white); }
.deck.is-read .s-tbl .a-right { text-align: right; }
.deck.is-read .s-tbl .a-center { text-align: center; }

/* activity */
.deck.is-read .act-main > * + * { margin-top: .75rem; }
.deck.is-read .facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.25rem;
  background: var(--white); border-top: 4px solid var(--maize); padding: 1rem 1.25rem; margin-top: 1rem;
}
.deck.is-read .facts > div { display: contents; }
.deck.is-read .facts dt { padding-top: .2em; }
@media (max-width: 30em) {
  .deck.is-read .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .deck.is-read .facts dd + dt { margin-top: .75rem; }
}

/* timer, break */
.deck.is-read .timer-s { font-size: 1.1875rem; font-weight: 800; margin-top: .75rem; }
.deck.is-read .L-break .br-h { text-transform: none; }
.deck.is-read .br-back { font-size: 1.1875rem; font-weight: 800; }

/* speaker notes (Page view only, when asked for) */
.deck.is-read .s-notes { display: none; }
.deck.is-read.show-notes .s-notes {
  display: block; margin-top: 1.25rem;
  background: var(--white); border-left: 4px solid var(--blue-secondary);
  padding: .75rem 1rem; font-size: .9375rem; color: var(--blue);
}
.deck.is-read .s-notes-h { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-secondary); }
.deck.is-read .s-notes > * + * { margin-top: .5rem; }

/* =====================================================================
   PRINT — one 13.333in × 7.5in page per slide, exact colors
   ===================================================================== */

@page slide { size: 13.333in 7.5in; margin: 0; }

@media print {
  .deck:not(.is-read) { width: 13.333in; margin: 0; }
  .deck:not(.is-read) .slide {
    page: slide;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .deck:not(.is-read) .slide + .slide { break-before: page; }
  .deck .s-notes { display: none !important; }
  /* Keep visually-hidden text (photo/quote headings, "Timer:") in the PDF
     text and tag tree: Chrome drops text that is clipped away entirely, so
     print it unclipped, inside the slide, in near-transparent ink. */
  .deck:not(.is-read) .sr-only {
    left: 0; top: 0; width: auto !important; height: auto !important; max-width: 100%;
    margin: 0 !important; overflow: visible !important; white-space: break-spaces !important;
    clip: auto; clip-path: none;
    font-size: calc(24 * var(--u)); line-height: 1.2;
    color: rgb(0 0 0 / .01) !important; background: none !important;
  }
  /* Chrome's PDF text, tag tree and outline drop the space at a soft line
     wrap ("goes here" → "goeshere"), which screen readers then run together.
     With break-spaces the space is laid out (not hung) and survives.
     (pre-wrap works for Arial but not for Atkinson Hyperlegible.) */
  .deck:not(.is-read) .slide { white-space: break-spaces; }
  .deck.is-read .slide { break-inside: avoid-page; }
}

/* =====================================================================
   FORCED COLORS / MOTION
   ===================================================================== */

@media (forced-colors: active) {
  .deck:not(.is-read) .slide { border: 1px solid CanvasText; }
  .deck .chip, .deck .chip-in, .deck .sign, .deck .toc-n, .deck .ros-tag,
  .deck .ph-text, .deck .mo-h:not(.sr-only), .deck .facts, .deck .ros-row.is-now, .deck .is-now .ros-tag {
    border: 2px solid CanvasText;
  }
  .deck:not(.is-read) .slide::before, .deck:not(.is-read) .slide::after { background: CanvasText; forced-color-adjust: none; }
  .deck .timer-bar { border: 2px solid CanvasText; }
  .deck .timer-bar > span { background: Highlight; forced-color-adjust: none; }
  .deck .blockm { forced-color-adjust: none; }
  .deck .sec-num { color: GrayText; }
}

@media (prefers-reduced-motion: reduce) {
  .deck *, .deck *::before, .deck *::after { animation: none !important; transition: none !important; }
}

/* <mark>…</mark>: words picked out in red (no highlight box). Two reds, each at least 6:1 on its ground:
   a light coral on the navy layouts, a deep red on the cream ones and in the Page view. */
.deck mark { background: none; color: #8F2A1C; font-weight: inherit; }
.deck:not(.is-read) :is(.L-quote, .L-statement, .L-title, .L-coda) mark { color: #FFB4A8; }
@media (forced-colors: active) { .deck mark { color: Mark; background: MarkText; } }

/* superscript / subscript (<sup>2</sup>, ^2^): raised without opening up the line spacing */
.deck sup, .deck sub { font-size: .6em; line-height: 0; position: relative; vertical-align: baseline; }
.deck sup { top: -.75em; }
.deck sub { bottom: -.25em; }

/* ---------- image: one picture, matted in its own edge colour (matte.js sets --matte / --matte-ink) ---------- */
.deck:not(.is-read) .L-image {
  --matte: #001A33; --matte-ink: #FFFFFF;
  background: var(--matte); color: var(--matte-ink);
  padding: calc(96 * var(--u)) calc(128 * var(--u));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(96 * var(--u)); align-items: stretch;
}
.deck:not(.is-read) .L-image .im-text {
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(32 * var(--u));
  padding: calc(32 * var(--u)) 0; min-width: 0;
}
.deck:not(.is-read) .L-image .im-h {
  font-size: calc(72 * var(--u)); line-height: 1.1; font-weight: 800; letter-spacing: calc(-1 * var(--u)); color: inherit;
}
.deck:not(.is-read) .L-image .im-cap { font-size: calc(32 * var(--u)); line-height: 1.4; color: inherit; max-width: 24em; }
/* ":: size: 90%" on a picture slide */
.deck:not(.is-read) .L-image .im-frame[style] .im-img { transform: scale(var(--im-scale, 1)); }
.deck:not(.is-read) .L-image .im-sub { font-size: calc(44 * var(--u)); line-height: 1.3; font-weight: 600; color: inherit; max-width: 16em; }
.deck.is-read .L-image .im-sub { font-size: 1.125rem; font-weight: 600; margin-top: .25rem; }
/* "## <show>Heading</show>" on a picture slide: the navy tab from the full-bleed slides, pinned to the
   same spot (96 down, flush left), with the picture starting below it */
.deck:not(.is-read) .L-image:has(.im-band) { padding-top: calc(256 * var(--u)); }
.deck:not(.is-read) .L-image .im-h.im-band {
  position: absolute; z-index: 3; top: calc(96 * var(--u)); left: 0; max-width: calc(1440 * var(--u));
  padding: calc(22 * var(--u)) calc(48 * var(--u)) calc(26 * var(--u)) calc(128 * var(--u));
  background: #001A33; border-left: calc(16 * var(--u)) solid var(--maize);
  font-size: calc(64 * var(--u)); line-height: 1.12; color: var(--white);
}
.deck:not(.is-read) .L-image .im-cap a { color: inherit; }
.deck:not(.is-read) .L-image .im-frame { display: flex; align-items: center; justify-content: flex-end; min-height: 0; }
.deck:not(.is-read) .L-image .im-img {
  display: block; height: calc(888 * var(--u)); width: auto; max-width: calc(1040 * var(--u));
  object-fit: contain;
}
/* wide pictures: heading on top, picture across the slide, caption underneath */
.deck:not(.is-read) .L-image.is-wide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: calc(40 * var(--u)); }
.deck:not(.is-read) .L-image.is-wide .im-text { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 0; }
.deck:not(.is-read) .L-image.is-wide .im-cap { text-align: right; max-width: 40%; }
.deck:not(.is-read) .L-image.is-wide .im-frame { justify-content: center; }
.deck:not(.is-read) .L-image.is-wide .im-img { height: auto; max-height: 100%; width: auto; max-width: 100%; }
@media (forced-colors: active) {
  .deck:not(.is-read) .L-image { background: Canvas; color: CanvasText; }
}

/* Page view: the picture sits on its matte, full width */
.deck.is-read .L-image .im-frame { background: var(--matte, transparent); padding: 1rem; margin-top: .75rem; }
.deck.is-read .L-image .im-img { display: block; max-width: 100%; height: auto; margin: 0 auto; max-height: 80vh; }
.deck.is-read .L-image .im-cap { margin-top: .5rem; }

/* matched matte: feather the picture's outer 2% so no seam shows (browsers and PDF re-encoding shift colours slightly) */
.deck .L-image.is-matted .im-img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
  mask-composite: intersect;
}

/* ---------- image slides: caption / citation full width along the bottom ---------- */
.deck:not(.is-read) .L-image { grid-template-rows: minmax(0, 1fr) auto; row-gap: calc(32 * var(--u)); }
.deck:not(.is-read) .L-image .im-text { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.deck:not(.is-read) .L-image .im-frame { grid-column: 2; grid-row: 1; }
.deck:not(.is-read) .L-image .im-img { height: auto; max-height: 100%; }
.deck:not(.is-read) .L-image .im-frame { height: 100%; }
.deck:not(.is-read) .L-image:not(:has(.im-cap)) .im-img { max-height: calc(888 * var(--u)); }
.deck:not(.is-read) .L-image .im-cap { grid-column: 1 / -1; grid-row: 2; max-width: none; }
.deck:not(.is-read) .L-image.is-wide { grid-template-rows: auto minmax(0, 1fr) auto; }
.deck:not(.is-read) .L-image.is-wide .im-frame { grid-column: 1; grid-row: 2; }
.deck:not(.is-read) .L-image.is-wide .im-cap { grid-row: 3; text-align: left; max-width: none; }

/* ---------- citations: <cite> ---------- */
.deck cite { font-style: italic; }                   /* inline: the title of a work */
.deck .s-cite cite { font-style: normal; }            /* a whole citation paragraph */
.deck:not(.is-read) .slide .s-cite {
  font-size: calc(24 * var(--u)); line-height: 1.45; font-weight: 400; letter-spacing: 0;
  color: var(--blue-secondary);                      /* 7:1 on paper */
}
.deck:not(.is-read) :is(.L-title, .L-quote, .L-statement, .L-timer, .L-break) .s-cite { color: #C9D4E0; } /* citation-on-blue token */
.deck:not(.is-read) .L-image .s-cite { color: var(--matte-ink); }   /* white or U-M blue, whichever contrasts with the matte */
.deck:not(.is-read) .L-image .s-cite::before {
  content: ""; display: block; width: calc(96 * var(--u)); height: calc(4 * var(--u));
  background: currentColor; margin-bottom: calc(16 * var(--u)); opacity: .9;
}
.deck.is-read .s-cite { font-size: .9375rem; color: var(--blue-secondary); }
.deck.is-read .L-image .s-cite { margin-top: .5rem; }

/* ---------- next week (live from the course schedule) ---------- */
.deck:not(.is-read) .L-nextweek .nw-when {
  font-family: var(--mono); font-size: calc(28 * var(--u)); font-weight: 500; color: var(--blue-secondary); margin-bottom: calc(-12 * var(--u));
}
.deck:not(.is-read) .L-nextweek .facts dd ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.deck:not(.is-read) .L-nextweek .facts dd li { padding-left: calc(28 * var(--u)); position: relative; }
.deck:not(.is-read) .L-nextweek .facts dd li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--maize);
}
.deck:not(.is-read) .L-nextweek .facts a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .15em; }
.deck.is-read .L-nextweek .nw-when { font-family: var(--mono); font-size: .875rem; color: var(--blue-secondary); }
.deck.is-read .L-nextweek .facts dd ul { margin: 0; padding-left: 1.2em; }

/* =====================================================================
   PAGE view — rhythm pass (overrides the base Page rules above)
   One vertical scale: .25 / .5 / .75 / 1 / 1.5 / 2.5rem.
   ===================================================================== */
.deck.is-read .slide { padding: 2.5rem 0 2.75rem; }
.deck.is-read .slide:first-child { padding-top: .25rem; }
.deck.is-read .slide > * + * { margin-top: 1rem; }
.deck.is-read .s-count { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.deck.is-read .slide .s-count + * { margin-top: .75rem; }
.deck.is-read .chip + :is(h1, h2), .deck.is-read .chip + .nw-when { margin-top: .625rem; }
.deck.is-read .slide :is(h1, h2) { text-wrap: balance; }
.deck.is-read .slide :is(h1, h2) + * { margin-top: .75rem; }
.deck.is-read .act-main > * + * { margin-top: .75rem; }
.deck.is-read .slide .s-text > * + * { margin-top: .75rem; }
.deck.is-read .slide :is(p, li) { text-wrap: pretty; }

/* title slide: the course sign is a chip, not a bar (app.css also has a .sign) */
.deck.is-read .t-brand { margin: 0; }
.deck.is-read .t-sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; }
.deck.is-read .t-sign .sign { display: inline-block; font-size: .875rem; letter-spacing: .06em; line-height: 1.4; margin: 0; }
.deck.is-read .t-course { color: var(--blue-secondary); }
.deck.is-read .t-main { margin-top: 1rem; }
.deck.is-read .t-main > * + * { margin-top: .375rem; }
.deck.is-read .L-title .t-h { font-size: clamp(2rem, 1.3rem + 3vw, 2.75rem); margin-top: 0; }
.deck.is-read .slide .t-meta { margin-top: 1.5rem; padding-top: 1rem; gap: .75rem 2.5rem; }
.deck.is-read .t-meta > div > * + * { margin-top: .125rem; }

/* contents / run of show */
.deck.is-read :is(.ros, .toc) { margin-top: 1.25rem; }
.deck.is-read :is(.ros, .toc) > li { padding: .625rem 0; gap: .25rem 1.25rem; }
.deck.is-read .toc-n { min-width: 2ch; }

/* sections: a little more air above the part number */
.deck.is-read .L-section { padding-top: 2.75rem; }

/* fact boxes (activity, next week) */
.deck.is-read .slide .facts {
  margin-top: 1.5rem; padding: 1.25rem 1.5rem 1.375rem;
  gap: .875rem 1.75rem; align-items: baseline; line-height: 1.45;
}
.deck.is-read .slide .facts dt { padding-top: 0; font-size: .75rem; line-height: 1.45; }
.deck.is-read .slide .facts dd { font-weight: 500; }
.deck.is-read .slide .facts dd.f-big { font-weight: 700; }
.deck.is-read .slide .facts dd ul { list-style: none; margin: 0; padding: 0; }
.deck.is-read .slide .facts dd li { position: relative; padding-left: 1.125rem; }
.deck.is-read .slide .facts dd li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: .375rem; height: .375rem; background: var(--blue-secondary);
}
.deck.is-read .slide .facts dd li + li { margin-top: .5rem; }
.deck.is-read .slide .facts a { color: var(--blue); text-underline-offset: 3px; }
@media (max-width: 30em) {
  .deck.is-read .slide .facts { gap: .25rem; padding: 1rem 1.125rem 1.125rem; }
  .deck.is-read .slide .facts > div + div > dt { margin-top: 1rem; }
}
.deck.is-read .L-nextweek .nw-when { font-size: .8125rem; }
.deck.is-read .L-nextweek .nw-when + :is(h1, h2) { margin-top: .25rem; }

/* =====================================================================
   TERM — a vocabulary word in its own language and script
   Noto Serif Display covers Latin (all accents), Greek incl. polytonic,
   Cyrillic and Vietnamese; each script's file loads only when used.
   ===================================================================== */
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-greek-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-greek-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-vietnamese-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../../fonts/noto-serif-display-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
.deck {
  --serif-display: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  /* Greek or Cyrillic in running text (notes, citations) borrows the display face instead of a system font */
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Noto Serif Display", "Atkinson Fallback", Arial, sans-serif;
}
.deck:not(.is-read) .L-term::before {
  content: ""; left: 0; top: 0; width: 100%; height: calc(24 * var(--u));
  border-top: calc(16 * var(--u)) solid var(--blue); background: var(--maize);
}
.deck:not(.is-read) .L-term { padding-bottom: calc(160 * var(--u)); gap: 0; }
.deck:not(.is-read) .tm-main { display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); flex: none; }
.deck:not(.is-read) .tm-word {
  font-family: var(--serif-display); font-weight: 500; font-style: normal;
  line-height: 1.12; letter-spacing: 0; color: var(--blue);
  padding-bottom: calc(36 * var(--u));
  background: linear-gradient(var(--maize), var(--maize)) left bottom / calc(240 * var(--u)) calc(12 * var(--u)) no-repeat;
  font-kerning: normal; font-feature-settings: "kern", "liga";
  hyphens: none; overflow-wrap: normal;
}
.deck:not(.is-read) .tm-xl { font-size: calc(248 * var(--u)); }
.deck:not(.is-read) .tm-l  { font-size: calc(196 * var(--u)); }
.deck:not(.is-read) .tm-m  { font-size: calc(148 * var(--u)); }
.deck:not(.is-read) .tm-s  { font-size: calc(108 * var(--u)); }
.deck:not(.is-read) .tm-meta { font-size: calc(32 * var(--u)); line-height: 1.35; color: var(--blue-secondary); }
.deck:not(.is-read) .tm-say { font-style: italic; font-weight: 600; font-size: calc(44 * var(--u)); color: var(--blue); }
.deck:not(.is-read) .tm-dot { color: var(--blue-secondary); }
.deck:not(.is-read) .tm-def {
  margin-top: calc(36 * var(--u)); padding-top: calc(32 * var(--u)); border-top: calc(3 * var(--u)) solid var(--blue-15);
  display: flex; flex-direction: column; gap: calc(20 * var(--u)); max-width: calc(1500 * var(--u)); flex: none;
}
.deck:not(.is-read) .tm-def > p:first-child { font-size: calc(48 * var(--u)); line-height: 1.3; font-weight: 500; }
.deck:not(.is-read) .tm-def strong { font-weight: 800; }
.deck:not(.is-read) .tm-cite { margin-top: auto; padding-top: calc(28 * var(--u)); max-width: calc(1500 * var(--u)); flex: none; }

/* Page view */
.deck.is-read .tm-main > * + * { margin-top: .5rem; }
.deck.is-read .slide .tm-word {
  font-family: var(--serif-display); font-weight: 500; letter-spacing: 0; line-height: 1.15;
  font-size: clamp(2.75rem, 1.6rem + 5vw, 4.5rem); margin-top: .5rem;
  padding-bottom: .5rem; background: linear-gradient(var(--maize), var(--maize)) left bottom / 4rem 5px no-repeat;
}
.deck.is-read .slide .tm-s { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); }
/* a word written with &shy; (Zusammen&shy;gehören) keeps the full size in the Page view and breaks there
   on a phone, with a hyphen, instead of shrinking; on the slide itself it stays on one line */
.deck.is-read .slide .tm-word.tm-break { font-size: clamp(2.75rem, 1.6rem + 5vw, 4.5rem); hyphens: manual; }
.deck.is-read .tm-meta { color: var(--blue-secondary); margin-top: .75rem; }
.deck.is-read .tm-say { font-style: italic; font-weight: 700; color: var(--blue); font-size: 1.1875rem; }
.deck.is-read .tm-def { margin-top: 1rem; }
.deck.is-read .tm-def > p:first-child { font-size: 1.1875rem; font-weight: 500; }
.deck.is-read .tm-def > * + * { margin-top: .75rem; }
.deck.is-read .tm-cite { margin-top: 1rem; }

/* =====================================================================
   FULL — <full>![alt](img)</full>: the picture fills the slide, edge to edge
   ===================================================================== */
.deck:not(.is-read) .L-full { padding: 0; gap: 0; background: var(--blue-deep, #001A33); color: var(--white); }
.deck:not(.is-read) .L-full .fl-under { position: absolute; inset: 0; z-index: 0; display: flex; align-items: flex-end; padding: calc(128 * var(--u)); }
.deck:not(.is-read) .L-full .fl-h { font-size: calc(72 * var(--u)); font-weight: 800; line-height: 1.1; color: var(--white); }
.deck:not(.is-read) .L-full .fl-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.deck:not(.is-read) .L-full .fl-cap {
  position: absolute; z-index: 2; left: 0; bottom: 0; max-width: 70%;
  padding: calc(14 * var(--u)) calc(28 * var(--u)); background: rgba(0, 26, 51, .82);
  font-size: calc(22 * var(--u)); line-height: 1.4; color: var(--white);
}
.deck:not(.is-read) .L-full .fl-cap.s-cite { color: var(--white); }
.deck:not(.is-read) .L-full .fl-cap a { color: inherit; }
/* Page view: heading, then the picture, then its caption */
.deck.is-read .L-full .fl-img { display: block; width: 100%; height: auto; margin-top: .75rem; }
.deck.is-read .L-full .fl-cap { font-size: .9375rem; color: var(--blue-secondary); margin-top: .5rem; }
.deck .L-full .fl-img.is-missing { opacity: 0; }

/* ---------- image slides, v2: heading on top, the picture centred and as large as the space allows,
   caption along the bottom. The picture scales with the slide (and so with the window), and it keeps
   its own proportions: matte.js sets --ar (width / height) from the file once it has loaded. ---------- */
.deck:not(.is-read) .L-image,
.deck:not(.is-read) .L-image.is-wide {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: calc(32 * var(--u)); padding: calc(88 * var(--u)) calc(128 * var(--u)) calc(72 * var(--u));
}
.deck:not(.is-read) .L-image .im-text,
.deck:not(.is-read) .L-image.is-wide .im-text { grid-column: 1; grid-row: 1; padding: 0; display: block; }
.deck:not(.is-read) .L-image .im-frame,
.deck:not(.is-read) .L-image.is-wide .im-frame {
  grid-column: 1; grid-row: 2; height: auto; min-height: 0;
  container-type: size; display: flex; align-items: center; justify-content: center;
}
.deck:not(.is-read) .L-image .im-img,
.deck:not(.is-read) .L-image.is-wide .im-img,
.deck:not(.is-read) .L-image:not(:has(.im-cap)) .im-img {
  width: min(100cqw, 100cqh * var(--ar, 1.5)); height: auto; aspect-ratio: var(--ar, 1.5);
  max-width: none; max-height: none; object-fit: contain;
}
.deck:not(.is-read) .L-image .im-cap,
.deck:not(.is-read) .L-image.is-wide .im-cap { grid-column: 1; grid-row: 3; max-width: none; text-align: left; }

/* the picture's box (sized from its proportions) carries the edge blend */
.deck .L-image .im-pic { position: relative; display: block; }
.deck:not(.is-read) .L-image .im-pic { width: min(100cqw, 100cqh * var(--ar, 1.5)); aspect-ratio: var(--ar, 1.5); }
.deck:not(.is-read) .L-image .im-pic .im-img { width: 100%; height: 100%; aspect-ratio: auto; }
.deck.is-read .L-image .im-pic { width: fit-content; max-width: 100%; margin: 0 auto; }
/* matched matte: matte.js redraws the picture's field in the exact matte colour, so no edge treatment is needed */
.deck .L-image.is-matted .im-img { -webkit-mask-image: none; mask-image: none; }
.deck.is-read .L-image { background: none !important; } /* the matte (colour + swatch) is for the stage; Page view mattes only the picture frame */

/* ---------- long quotes and statements step down in size (render.js picks the class by length) ---------- */
.deck:not(.is-read) .q-text.q-l { font-size: calc(52 * var(--u)); line-height: 1.3; }
.deck:not(.is-read) .q-text.q-xl { font-size: calc(44 * var(--u)); font-weight: 600; letter-spacing: 0; line-height: 1.38; }
.deck:not(.is-read) .q-text .q-lead { font-size: calc(60 * var(--u)); font-weight: 700; letter-spacing: calc(-1 * var(--u)); line-height: 1.2; }   /* :: lead: yes */
.deck:not(.is-read) .q-text .q-rest { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.deck:not(.is-read) .q-text.has-lead .q-rest { font-size: calc(40 * var(--u)); font-weight: 600; letter-spacing: 0; line-height: 1.34; }
.deck.is-read .q-text .q-rest > * + * { margin-top: .75rem; }
.deck:not(.is-read) .q-text.q-xxl { font-size: calc(40 * var(--u)); line-height: 1.34; gap: calc(16 * var(--u)); }   /* a whole thread: still 40 px on the 1920 canvas */
.deck:not(.is-read) .L-quote:has(.q-xl) .q-mark { font-size: calc(160 * var(--u)); }
.deck:not(.is-read) .stmt.stmt-l { font-size: calc(72 * var(--u)); letter-spacing: calc(-1 * var(--u)); line-height: 1.15; }
.deck:not(.is-read) .stmt.stmt-xl { font-size: calc(52 * var(--u)); letter-spacing: 0; line-height: 1.25; font-weight: 700; }

/* full-bleed: slide number over the picture, where it sits on every other slide */
.deck:not(.is-read) .L-full .fl-num {
  position: absolute; z-index: 3; right: calc(128 * var(--u)); bottom: calc(64 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u)); margin: calc(-6 * var(--u)) calc(-16 * var(--u)); border-radius: calc(4 * var(--u));
  background: rgba(0, 26, 51, .78); color: var(--white);
  font-family: var(--mono); font-size: calc(24 * var(--u)); line-height: 1.3; font-variant-numeric: tabular-nums;
}
.deck .fl-back { display: none; }
/* a tall (or very wide) picture, shown whole over a blurred, darkened enlargement of itself */
/* (the blur is drawn on an oversized .fl-back-i, clipped by .fl-back itself, so it never pokes past the
   slide: the builder's fit check reads anything past the edge as text that doesn't fit) */
.deck:not(.is-read) .L-full.is-fit .fl-back {
  display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden;
}
.deck:not(.is-read) .L-full.is-fit .fl-back-i {
  position: absolute; inset: calc(-60 * var(--u));
  background-size: cover; background-position: center;
  filter: blur(calc(40 * var(--u))) brightness(.55) saturate(.9);
}
.deck:not(.is-read) .L-full.is-fit .fl-img { z-index: 2; object-fit: contain; }
.deck:not(.is-read) .L-full.is-fit { overflow: hidden; }
.deck.is-read .fl-num { display: none; }

/* =====================================================================
   CODA — the closing word: quotation on deep blue, the lecture's path beneath
   ===================================================================== */
.deck:not(.is-read) .L-coda {
  background: var(--blue-deep, #001A33); color: var(--white);
  padding: calc(112 * var(--u)) calc(160 * var(--u)) calc(88 * var(--u)); gap: 0; justify-content: space-between;
}
.deck:not(.is-read) .L-coda::after {   /* a maize rule closing the bottom edge */
  content: ""; left: 0; right: 0; bottom: 0; height: calc(16 * var(--u)); background: var(--maize);
}
/* ---------- backdrop video (":: backdrop: clip.mp4", any layout): poster, video, scrim; white ink on top ---------- */
.deck:not(.is-read) .slide.has-backdrop { background: var(--blue-deep, #001A33); color: var(--white); }
.deck:not(.is-read) .s-bd { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.deck:not(.is-read) .s-bd-poster, .deck:not(.is-read) .s-bd-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.deck:not(.is-read) .s-bd-video { z-index: 1; }
.deck:not(.is-read) .s-bd-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(97deg, rgba(0, 39, 76, .93) 0%, rgba(0, 39, 76, .8) 46%, rgba(0, 39, 76, .3) 72%, rgba(0, 39, 76, .1) 100%); }
.deck:not(.is-read) .slide.has-backdrop > :not(.s-bd, .s-foot, .s-bd-ctl, .s-pg, .s-count, .s-photo) { position: relative; z-index: 2; }
.deck:not(.is-read) .slide.has-backdrop > :is(.s-foot, .s-pg) { z-index: 3; }
.deck:not(.is-read) .slide.has-backdrop::before { z-index: 3; }
.deck:not(.is-read) .slide.has-backdrop :is(.s-h, .s-text, .s-text > p:first-child, .s-foot, .s-course, .s-num, strong) { color: var(--white); }
.deck:not(.is-read) .slide.has-backdrop .s-text li::marker { color: var(--maize); }
.deck:not(.is-read) .slide.has-backdrop :is(.s-cite, .s-source, .s-course) { color: var(--citation-on-blue, #C9D4E0); }
.deck:not(.is-read) .slide.has-backdrop .s-text { max-width: calc(1180 * var(--u)); }
.deck:not(.is-read) .slide.has-backdrop mark { color: #FFB4A8; }
/* Page view: a still backdrop is a plain picture after the text */
.deck.is-read .slide .s-bd-still .s-bd-poster { display: block; width: 100%; height: auto; margin-top: .75rem; }
/* ":: text: large": a content slide with little on it, set bigger */
.deck:not(.is-read) .slide.is-large .s-h { font-size: calc(96 * var(--u)); }
.deck:not(.is-read) .slide.is-large .s-text { font-size: calc(48 * var(--u)); line-height: 1.3; gap: calc(40 * var(--u)); }
.deck:not(.is-read) .slide.is-large .s-cite { font-size: calc(26 * var(--u)); }
/* pause / sound: small chips above the footer, right; keyboard reachable, never hidden */
.deck:not(.is-read) .s-bd-ctl { position: absolute; right: calc(128 * var(--u)); bottom: calc(128 * var(--u)); z-index: 4; display: flex; gap: calc(12 * var(--u)); }
.deck:not(.is-read) .s-bd-btn {
  font: inherit; font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: calc(1 * var(--u)); text-transform: uppercase;
  color: var(--white); background: rgba(0, 39, 76, .72); border: calc(2 * var(--u)) solid rgba(255, 255, 255, .55);
  padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: calc(6 * var(--u)); cursor: pointer;
}
.deck:not(.is-read) .s-bd-btn[aria-pressed="true"] { background: var(--maize); color: var(--blue); border-color: var(--maize); }
.deck:not(.is-read) .s-bd-btn:focus-visible { outline: calc(4 * var(--u)) solid var(--maize); outline-offset: calc(3 * var(--u)); }
/* Page view: the clip is an ordinary player under the slide's text; no poster image, no scrim, no chips */
.deck.is-read .s-bd { margin-top: 1rem; }
.deck.is-read .slide .s-bd-poster, .deck.is-read .s-bd-scrim, .deck.is-read .s-bd-ctl { display: none; }
.deck.is-read .s-bd-video { display: block; width: 100%; height: auto; background: #000; }
@media print { .s-bd-video, .s-bd-ctl { display: none !important; } }

/* statement over a picture: same scrim again; the statement keeps its maize bar (::before) and gets a scrim via ::after */
.deck:not(.is-read) .L-statement .st-bg-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.deck:not(.is-read) .L-statement:has(.st-bg-img) { background: var(--blue-deep, #001A33); }
.deck:not(.is-read) .L-statement:has(.st-bg-img)::after {
  content: ""; inset: 0; z-index: 1;
  background: linear-gradient(97deg, rgba(0, 39, 76, .93) 0%, rgba(0, 39, 76, .8) 46%, rgba(0, 39, 76, .3) 72%, rgba(0, 39, 76, .1) 100%);
}
.deck:not(.is-read) .L-statement:has(.st-bg-img) > :not(.st-bg-img, .s-pg, .s-count, .s-photo) { position: relative; z-index: 2; }
.deck:not(.is-read) .L-statement:has(.st-bg-img)::before { position: absolute; z-index: 3; }
.deck:not(.is-read) .L-statement:has(.st-bg-img) :is(.stmt, .stmt-body) { max-width: calc(1120 * var(--u)); }
.deck.is-read .L-statement .st-bg-img { display: block; width: 100%; height: auto; margin-top: .75rem; }

/* coda over a picture: same scrim as a quote over a picture (above) */
.deck:not(.is-read) .L-coda .cd-bg-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.deck:not(.is-read) .L-coda .cd-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(97deg, rgba(0, 39, 76, .93) 0%, rgba(0, 39, 76, .8) 46%, rgba(0, 39, 76, .3) 72%, rgba(0, 39, 76, .1) 100%);
}
.deck:not(.is-read) .L-coda:has(.cd-bg-img) > :not(.cd-bg-img, .cd-scrim, .s-pg, .s-count, .s-photo) { position: relative; z-index: 2; }
.deck:not(.is-read) .L-coda:has(.cd-bg-img) :is(.cd-q, .cd-cite) { max-width: calc(1000 * var(--u)); }
.deck.is-read .L-coda .cd-scrim { display: none; }
.deck.is-read .L-coda .cd-bg-img { display: block; width: 100%; height: auto; margin-top: .75rem; }
.deck:not(.is-read) .cd-main { display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); }
.deck:not(.is-read) .cd-h { font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--maize); letter-spacing: 0; }
.deck:not(.is-read) .cd-q {
  margin: 0; font-size: calc(64 * var(--u)); font-weight: 700; line-height: 1.22; letter-spacing: calc(-1 * var(--u));
  max-width: calc(1500 * var(--u)); text-wrap: pretty;
}
.deck:not(.is-read) .cd-q.cd-long { font-size: calc(54 * var(--u)); }
.deck:not(.is-read) .cd-q > * + * { margin-top: calc(20 * var(--u)); }
.deck:not(.is-read) .cd-by { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.deck:not(.is-read) .cd-author { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--maize); }
.deck:not(.is-read) .cd-author::before { content: "— " / ""; }
.deck:not(.is-read) .cd-role { font-size: calc(30 * var(--u)); color: var(--paper-on-blue); }
/* the path: stops joined by a thin line, the last one arrived at */
.deck:not(.is-read) .cd-path {
  list-style: none; margin: 0; padding: calc(40 * var(--u)) 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: relative;
  font-size: calc(24 * var(--u)); line-height: 1.3; color: var(--paper-on-blue);
}
.deck:not(.is-read) .cd-path::before {
  content: ""; position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(49 * var(--u));
  height: calc(2 * var(--u)); background: rgba(255, 203, 5, .55);
}
.deck:not(.is-read) .cd-path > li { position: relative; padding-top: calc(36 * var(--u)); padding-right: calc(16 * var(--u)); }
.deck:not(.is-read) .cd-path > li::before {
  content: ""; position: absolute; left: 0; top: calc(0 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u));
  border-radius: 50%; background: var(--blue-deep, #001A33); border: calc(3 * var(--u)) solid var(--maize); box-sizing: border-box;
}
.deck:not(.is-read) .cd-path > li:last-child { text-align: right; padding-right: 0; }
.deck:not(.is-read) .cd-path > li:last-child::before { left: auto; right: 0; }
.deck:not(.is-read) .cd-path > li.is-here { color: var(--white); font-weight: 800; }
.deck:not(.is-read) .cd-path > li.is-here::before { background: var(--maize); width: calc(28 * var(--u)); height: calc(28 * var(--u)); top: calc(-4 * var(--u)); }
.deck:not(.is-read) .cd-cite { margin-top: calc(28 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.45; color: var(--citation-on-blue, #C9D4E0); max-width: calc(1500 * var(--u)); }
/* Page view */
.deck.is-read .L-coda .cd-h { color: var(--blue-secondary); font-size: 1.0625rem; font-weight: 700; margin-top: .5rem; }
.deck.is-read .L-coda .cd-q { border-left: 6px solid var(--maize); padding-left: 1rem; margin: .75rem 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.45; }
.deck.is-read .L-coda .cd-by { margin-top: .75rem; }
.deck.is-read .L-coda .cd-author { font-weight: 800; }
.deck.is-read .L-coda .cd-author::before { content: "— " / ""; }
.deck.is-read .L-coda .cd-role { display: block; color: var(--blue-secondary); }
.deck.is-read .L-coda .cd-path { margin: 1rem 0 0; padding-left: 1.5em; color: var(--blue-secondary); }
.deck.is-read .L-coda .cd-path .is-here { color: var(--blue); font-weight: 800; }
.deck.is-read .L-coda .cd-cite { margin-top: .75rem; }
/* coda: undo the general list spacing, and keep the citation readable on deep blue */
.deck:not(.is-read) .slide .cd-path { padding: calc(40 * var(--u)) 0 0; }
.deck:not(.is-read) .slide .cd-path > li + li { margin-top: 0; }
.deck:not(.is-read) .slide .cd-cite.s-cite { color: #C9D4E0; font-size: calc(22 * var(--u)); }
.deck:not(.is-read) .slide ol.cd-path { padding: calc(40 * var(--u)) 0 0; }
.deck:not(.is-read) .slide ol.cd-path > li + li { margin-top: 0; }

/* full-bleed with "## <show>Heading</show>": the heading on a navy tab over the picture, top left */
.deck:not(.is-read) .L-full .fl-over {
  position: absolute; z-index: 3; top: calc(96 * var(--u)); left: 0; max-width: calc(1440 * var(--u));
  padding: calc(22 * var(--u)) calc(48 * var(--u)) calc(26 * var(--u)) calc(128 * var(--u));
  background: rgba(0, 26, 51, .9); border-left: calc(16 * var(--u)) solid var(--maize);
}
.deck:not(.is-read) .L-full .fl-over .fl-h { font-size: calc(64 * var(--u)); font-weight: 800; line-height: 1.12; color: var(--white); letter-spacing: calc(-1 * var(--u)); }
.deck.is-read .L-full .fl-over .fl-h { margin-top: .5rem; }
/* full-bleed with a second picture inside <full>: an inset, nested in the top right on a paper card */
.deck:not(.is-read) .L-full .fl-inset {
  position: absolute; z-index: 3; top: calc(96 * var(--u)); right: calc(96 * var(--u)); width: calc(340 * var(--u));
  padding: calc(12 * var(--u)); background: #FBFAF7; border-top: calc(8 * var(--u)) solid var(--maize);
  box-shadow: 0 calc(8 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, .35);
}
.deck:not(.is-read) .L-full .fl-inset-img { display: block; width: 100%; height: auto; }
.deck.is-read .L-full .fl-inset { margin-top: .75rem; max-width: 15rem; padding: .625rem; background: #FBFAF7; border: 1px solid var(--rule, #D5D9DE); }
.deck.is-read .L-full .fl-inset-img { display: block; width: 100%; height: auto; }

/* =====================================================================
   PAGE VIEW, v2 — a clearer hierarchy, notes that read as notes,
   a way back to the contents after every slide (viewer.js adds .s-top)
   ===================================================================== */
.deck:not(.is-read) .s-top { display: none; }
.deck .slide:focus { outline: none; }
.deck.is-read .slide:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.deck.is-read .slide { scroll-margin-top: 1rem; }

/* eyebrow: "Slide n of N" behind a short maize rule */
.deck.is-read .s-count {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-secondary);
}
.deck.is-read .s-count::before { content: ""; flex: none; width: 1.5rem; height: 3px; background: var(--maize); }

/* slide headings: one step below the page title, one step above everything in the slide */
.deck.is-read .slide h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem); }

/* part dividers read as parts: a maize band, like the section slides on stage */
.deck.is-read .L-section {
  background: var(--maize); color: var(--blue);
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem; margin-block: 2.5rem 1rem;
  border-top: 0;
}
.deck.is-read .L-section .s-count { color: var(--blue); }
.deck.is-read .L-section .s-count::before { background: var(--blue); }
.deck.is-read .L-section .chip { background: var(--blue); color: var(--maize); }
.deck.is-read .L-section .sec-h { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); line-height: 1.1; }
.deck.is-read .L-section .sec-body { font-weight: 500; }
.deck.is-read .L-section + .slide { border-top: 0; }
.deck.is-read .L-section .s-top a { color: var(--blue); }

/* speaker notes: a quieter voice than the slide, set for reading aloud */
.deck.is-read.show-notes .s-notes {
  margin-top: 1.5rem; padding: 1.125rem 1.5rem 1.375rem;
  background: var(--white); border-left: 4px solid var(--maize);
  font-size: 1rem; line-height: 1.7; color: var(--blue);
}
.deck.is-read .s-notes-h {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-secondary); margin: 0 0 .625rem;
}
.deck.is-read .s-notes > * + * { margin-top: .875rem; }
.deck.is-read .s-notes > p { max-width: 64ch; }
.deck.is-read .s-notes strong { font-weight: 800; }
.deck.is-read .s-notes > p.s-dir { font-style: italic; color: var(--blue-secondary); font-size: .9375rem; line-height: 1.55; }

/* back to contents */
.deck.is-read .s-top { margin: 1rem 0 0; display: flex; justify-content: flex-end; font-size: .875rem; line-height: 1.2; }
.deck.is-read .s-top a {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .25rem;
  color: var(--blue); font-weight: 700; text-underline-offset: 3px;
}
.deck.is-read .s-top a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* wide pages with notes on: each slide on the left, its notes beside it.
   --k (children before the notes) and --k1 come from viewer.js. */
@container vpage (min-width: 60rem) {
  .deck.is-read.show-notes .slide {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
    grid-template-rows: repeat(var(--k, 8), auto) 1fr;
    column-gap: clamp(2rem, 4cqi, 3.5rem);
    align-content: start;
  }
  .deck.is-read.show-notes .slide > * { grid-column: 1; }
  .deck.is-read.show-notes .slide > .s-notes {
    grid-column: 2; grid-row: 1 / span var(--k1, 9);
    align-self: start; margin-top: 0; position: sticky; top: 1rem;
  }
  .deck.is-read.show-notes .slide > .s-top { grid-column: 1 / -1; }
  .deck.is-read.show-notes .L-section > .s-notes { background: #FFF6D1; border-left-color: var(--blue); }
}
.deck.is-read .s-notes .s-dir { font-style: italic; color: var(--blue-secondary); }
@container vpage (min-width: 60rem) {
  .deck.is-read.show-notes .slide > :is(.chip, .s-count) { justify-self: start; }
}
/* a <show> heading over a full-bleed picture: in Page view it heads the slide, above the picture */
.deck.is-read .L-full:has(.fl-over .fl-h) { display: flex; flex-direction: column; }
.deck.is-read .L-full:has(.fl-over .fl-h) > .s-count { order: -2; }
.deck.is-read .L-full:has(.fl-over .fl-h) > .fl-over { order: -1; }
.deck.is-read .L-full:has(.fl-over .fl-h) > .fl-over .fl-h { margin-top: .5rem; }
@container vpage (min-width: 60rem) { .deck.is-read.show-notes .L-full:has(.fl-over .fl-h) { display: grid; } }

/* ______ in a slide: a fill-in blank (parse.js), the same mark as the course home page */
.deck .blank { display: inline-block; width: 2.6em; height: 0; border-bottom: .12em solid var(--maize); vertical-align: .05em; margin: 0 .08em; }
@media (forced-colors: active) { .deck .blank { border-bottom-color: CanvasText; } }

/* ":: figure: below": a wide picture under the text, full width (content slides) */
.deck:not(.is-read) .L-content .s-body.has-figure.fig-below { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(36 * var(--u)); height: 100%; }
.deck:not(.is-read) .L-content .fig-below .s-fig { min-height: 0; height: 100%; }
.deck:not(.is-read) .L-content .fig-below .s-fig img { height: 100%; max-height: none; width: 100%; object-fit: contain; object-position: left top; }

/* slide number on layouts without the footer (render.js .s-pg): same place and type as the footer's number */
.deck:not(.is-read) .s-pg {
  position: absolute; z-index: 3; right: calc(128 * var(--u)); bottom: calc(64 * var(--u));
  font-family: var(--mono); font-size: calc(24 * var(--u)); line-height: 1.2; font-variant-numeric: tabular-nums;
  color: var(--blue-secondary);
}
.deck:not(.is-read) :is(.L-title, .L-quote, .L-statement, .L-coda, .L-timer, .L-break) .s-pg { color: #C9D4E0; }
/* over a picture or video the number sits in the same dark pill as on a full-bleed slide */
.deck:not(.is-read) .slide:has(.q-bg-img, .st-bg-img, .cd-bg-img, .s-bd) .s-pg {
  padding: calc(6 * var(--u)) calc(16 * var(--u)); margin: calc(-6 * var(--u)) calc(-16 * var(--u)); border-radius: calc(4 * var(--u));
  background: rgba(0, 26, 51, .78); color: var(--white); line-height: 1.3;
}
.deck:not(.is-read) .L-section .s-pg { color: var(--blue); }
/* the picture's attribution (":: photo:"): a small line of its own at the bottom edge, level with the slide number */
.deck:not(.is-read) .slide:is(:has(.s-bd), .slide) .s-foot .s-photo { position: static; max-width: none; padding: 0; margin: 0; background: none; border-radius: 0; font-size: calc(20 * var(--u)); line-height: 1.2; color: inherit; }
.deck:not(.is-read) .s-photo {
  position: absolute; z-index: 3; left: calc(128 * var(--u)); bottom: calc(64 * var(--u)); margin: 0;
  max-width: calc(1400 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.3; color: #C9D4E0;
}
.deck:not(.is-read) .slide:has(.q-bg-img, .st-bg-img, .cd-bg-img, .s-bd) .s-photo {
  padding: calc(6 * var(--u)) calc(16 * var(--u)); margin: calc(-6 * var(--u)) calc(-16 * var(--u)); border-radius: calc(4 * var(--u));
  background: rgba(0, 26, 51, .78); color: var(--white);
}
.deck:not(.is-read) .L-coda:has(.s-photo) { padding-bottom: calc(128 * var(--u)); }   /* room under the citation for the picture's line */
.deck.is-read .s-photo { margin-top: .5rem; font-size: .8125rem; color: var(--blue-secondary); }
.deck:not(.is-read) .L-image .s-pg { color: var(--matte-ink, var(--blue-secondary)); }
.deck.is-read .s-pg { display: none; }
@media (forced-colors: active) { .deck .s-pg { color: CanvasText; } }

/* Page view: quotes. No visible heading (screen readers still hear "Quote by …"); the passage, then who said it */
.deck.is-read .L-quote .q-text {
  margin: .875rem 0 0; padding: .125rem 0 .125rem 1.25rem; border-left: 6px solid var(--maize);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); font-weight: 650; line-height: 1.5; letter-spacing: -.003em;
}
.deck.is-read .L-quote .q-text > * + * { margin-top: .75rem; }
.deck.is-read .L-quote .q-author { margin-top: 1.25rem; padding-left: calc(1.25rem + 6px); font-size: 1.0625rem; font-weight: 800; }
.deck.is-read .L-quote .q-author::before { content: "— " / ""; }
.deck.is-read .L-quote .q-role { margin-top: .125rem; padding-left: calc(1.25rem + 6px); font-size: 1rem; line-height: 1.45; }
.deck.is-read .L-quote .q-cite { margin-top: .75rem; padding-left: calc(1.25rem + 6px); font-size: .875rem; line-height: 1.5; }

/* ---------- sources and thank-yous (render.js L.sources) ---------- */
.deck:not(.is-read) .src-body {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(500 * var(--u));
  gap: calc(72 * var(--u)); align-items: start; margin-top: calc(8 * var(--u));
}
.deck:not(.is-read) .src-body:not(:has(.src-thanks)) { grid-template-columns: minmax(0, 1fr); }
.deck:not(.is-read) .slide .src-h {
  font-size: calc(22 * var(--u)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-secondary); margin: 0 0 calc(18 * var(--u));
}
.deck:not(.is-read) .src-sec:not(.src-thanks) ul {
  list-style: none; padding: 0; columns: 2; column-gap: calc(56 * var(--u));
  font-size: calc(38 * var(--u)); line-height: 1.3; color: var(--blue);
}
/* a long source list runs to three columns, and the thank-you panel narrows, so nothing shrinks */
/* a long source list (on a slide of its own) runs to three columns, so nothing shrinks */
.deck:not(.is-read) .src-sec:not(.src-thanks) ul:has(> li:nth-child(16)) { columns: 3; column-gap: calc(48 * var(--u)); font-size: calc(28 * var(--u)); }
.deck:not(.is-read) .src-sec:not(.src-thanks) li { break-inside: avoid; margin: 0 0 calc(14 * var(--u)); padding-left: calc(18 * var(--u)); text-indent: calc(-18 * var(--u)); }
.deck:not(.is-read) .slide .src-sec:not(.src-thanks) :is(ul, ol) > li + li { margin-top: 0; }
.deck:not(.is-read) .src-sec a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .14em; }
.deck:not(.is-read) .src-thanks {
  background: var(--blue); color: var(--white); padding: calc(44 * var(--u)) calc(44 * var(--u)) calc(48 * var(--u));
  border-top: calc(10 * var(--u)) solid var(--maize);
}
.deck:not(.is-read) .slide .src-thanks .src-h { color: var(--maize); }
.deck:not(.is-read) .src-thanks p { font-size: calc(30 * var(--u)); line-height: 1.4; }
.deck:not(.is-read) .src-thanks p + p { margin-top: calc(18 * var(--u)); }
.deck:not(.is-read) .src-thanks a { color: var(--white); text-decoration-color: var(--maize); }
@media (forced-colors: active) { .deck:not(.is-read) .src-thanks { border: 2px solid CanvasText; } }
/* thanks on a slide of their own: one wide panel, larger type */
.deck:not(.is-read) .src-body:not(:has(.src-sec:not(.src-thanks))) { grid-template-columns: minmax(0, calc(1320 * var(--u))); }
.deck:not(.is-read) .src-body:not(:has(.src-sec:not(.src-thanks))) .src-thanks { padding: calc(56 * var(--u)) calc(64 * var(--u)) calc(60 * var(--u)); }
.deck:not(.is-read) .src-body:not(:has(.src-sec:not(.src-thanks))) .src-thanks p { font-size: calc(40 * var(--u)); }
.deck:not(.is-read) .src-body:not(:has(.src-sec:not(.src-thanks))) .src-thanks p + p { margin-top: calc(26 * var(--u)); }
/* Page view */
.deck.is-read .src-sec { margin-top: 1.25rem; }
.deck.is-read .slide .src-h { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-secondary); margin: 0 0 .5rem; }
.deck.is-read .src-sec:not(.src-thanks) ul { padding-left: 1.25em; }
.deck.is-read .src-sec li + li { margin-top: .5em; }
.deck.is-read .src-thanks { background: var(--white); border-left: 4px solid var(--maize); padding: 1rem 1.25rem; }
.deck.is-read .src-thanks p { font-size: 1.0625rem; }