/* ============================================================================
   ess-deck.css — Earth Systems Science reference-slide engine
   ----------------------------------------------------------------------------
   One stylesheet for every ESS reference deck
   (/courses/earth-systems-science/module-N/slides/). Pairs with
   /assets/js/ess-deck.js, which builds the toolbar, dock, contents/search
   panel, zoom viewer and theme switch around the <section class="slide">
   elements a deck page authors.

   Token contract: every colour comes from studio-tokens.css. The deck band
   carries .light-band (daylight) or nothing (the studio's cinematic dark
   root), and every value below re-resolves automatically. Diagram colours
   are semantic aliases of the per-course hues (--dk-*), never literals.

   Without JavaScript every slide renders as one readable, printable column.
   ============================================================================ */

/* ---------------------------------------------------------------- band */
.ess-deck-band { padding-bottom: 2.5rem; }
body.ess-deck-page { overflow-x: hidden; }

/* The sticky toolbar and dock are exactly these sizes (min-height wins over
   their padded contents). They live on :root because the site's corner
   buttons, which must clear the dock, are outside the deck.
   Keyboard focus is kept clear of the header, toolbar, dock and corner
   buttons by ess-deck.js (keepFocusClear), which moves the page only as far
   as needed. Page scroll-padding is deliberately not used: Chrome scrolls a
   focused control before the page hears about it, and inside a padded band it
   centres the control, a jump of hundreds of pixels that shows the page
   footer where a few dozen would do. */
:root {
  --deck-bar-h: 60px;
  --deck-dock-h: 64px;
  --deck-dock-gap: 10px;
}

/* ---------------------------------------------------------------- root */
/* Semantic diagram palette — every value is a studio token. Declared on the
   deck AND on any nested bench card, because a custom property that refers
   to another one is resolved where it is declared: the bench card's daylight
   tokens must be re-read there. */
.ess-deck, .ess-deck .bench-card {
  --dk-water: var(--c-alg1);
  --dk-life:  var(--c-geo);
  --dk-air:   var(--c-precalc);
  --dk-rock:  var(--c-ess);
  --dk-heat:  var(--c-calc);
  --dk-sun:   var(--gold);
  --dk-ig:    var(--c-calc);
  --dk-sed:   var(--c-sci);
  --dk-meta:  var(--c-alg2);
  --dk-clay:  var(--c-apphys);
  --dk-good:  var(--c-geo);
  --dk-bad:   var(--c-calc);
}

.ess-deck {
  --deck-gap: clamp(12px, 1.4vw, 18px);
  --deck-radius: 22px;
  --deck-max: 1280px;

  position: relative;
  max-width: var(--deck-max);
  margin: 0 auto;
  padding: 0 16px;
  color: var(--ink-2);
  font-family: var(--font-body);
}
.ess-deck *, .ess-deck *::before, .ess-deck *::after { box-sizing: border-box; }
/* What the engine hides stays hidden, even where a class sets display (the
   worked-example step buttons once every step shows, Present where the
   browser cannot go full screen). Slides have their own rules below, because
   find-in-page must reach a slide hidden "until found". */
.ess-deck [hidden]:not(.slide) { display: none; }

.deck-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- page header */
.deck-backrow {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin: 0 0 1rem;
}
.deck-backrow a {
  font-family: var(--font-mono); font-size: .78rem; color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: .5rem .9rem;
  min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: none; background: var(--surface);
}
.deck-backrow a:hover { border-color: var(--accent); }

/* -------------------------------------------------------------- toolbar */
.deck-bar {
  position: sticky; top: var(--header-height, 72px); z-index: 40;
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--deck-bar-h);
  padding: .4rem .5rem .4rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--arch-shadow-sm);
}
.deck-bar-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.deck-bar-kicker {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-bar-chapter {
  font-family: var(--font-heading); font-weight: 700; color: var(--ink); font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-tools { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.deck-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 44px; min-height: 44px; padding: 0 .7rem;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--ink);
  font: 600 .84rem/1 var(--font-body); cursor: pointer;
}
.deck-tool:hover { background: var(--surface-2); border-color: var(--line); }
.deck-tool[aria-pressed="true"], .deck-tool[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line-strong); }
.deck-tool svg { width: 20px; height: 20px; flex: 0 0 auto; }
.deck-tool-label { white-space: nowrap; }
.deck-tool--more { display: none; }
.deck-more {
  position: absolute; right: .5rem; top: calc(100% + 6px); z-index: 45;
  display: grid; gap: .25rem; min-width: 220px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--arch-shadow-lg);
}
.deck-more[hidden] { display: none; }
.deck-more .deck-tool { justify-content: flex-start; width: 100%; }

@media (max-width: 1080px) {
  .deck-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .deck-tool { padding: 0; }
  .deck-more .deck-tool-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .deck-more .deck-tool { padding: 0 .7rem; }
}
@media (max-width: 640px) {
  .deck-tool--secondary { display: none; }
  .deck-more .deck-tool--secondary { display: inline-flex; }
  .deck-tool--more { display: inline-flex; }
  .deck-bar { padding-left: .7rem; border-radius: 14px; }
  .deck-bar-kicker { font-size: .6rem; }
  .deck-bar-chapter { font-size: .9rem; }
}

.deck-progress { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.deck-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }

/* --------------------------------------------------------------- stage */
.deck-stage { position: relative; }
.ess-deck .slide {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px);
  margin: var(--deck-gap) 0;
  padding: clamp(18px, 3vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--deck-radius);
  box-shadow: var(--arch-shadow-md);
  overflow-wrap: break-word;
  scroll-margin-top: calc(var(--header-height, 72px) + var(--deck-bar-h) + 14px);
}
.ess-deck .slide:focus { outline: none; }
.ess-deck .slide:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 3px; }
.ess-deck[data-mode="deck"] .slide {
  min-height: calc(100vh - var(--header-height, 72px) - var(--deck-bar-h) - var(--deck-dock-h) - 3 * var(--deck-gap) - 12px);
  min-height: calc(100dvh - var(--header-height, 72px) - var(--deck-bar-h) - var(--deck-dock-h) - 3 * var(--deck-gap) - 12px);
}
/* Deck mode hides non-current slides. Where the browser supports
   hidden="until-found", find-in-page still reaches them (the engine then
   jumps to the match), so the box is collapsed instead of display:none. */
.ess-deck .slide[hidden] { display: none; }
.ess-deck.is-findable .slide[hidden="until-found"] {
  display: block; min-height: 0 !important; margin: 0; padding: 0; border: 0; box-shadow: none;
}
.ess-deck.is-ready[data-mode="deck"] .slide.is-current { animation: deck-in .28s ease both; }
@keyframes deck-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ slide head */
.slide-head { display: flex; flex-direction: column; gap: .25rem; }
.ess-deck .slide-kicker {
  margin: 0; font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.ess-deck .slide h1,
.ess-deck .slide h2 {
  margin: 0; color: var(--ink); font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.45rem, 1rem + 1.35vw, 2.3rem); line-height: 1.12; letter-spacing: -.012em;
}
.ess-deck .slide h3 { margin: 0 0 .35rem; color: var(--ink); font-family: var(--font-heading); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.slide-body { flex: 1 1 auto; display: grid; gap: clamp(14px, 2.2vw, 34px); align-content: center; align-items: center; }
.slide--split .slide-body { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .slide--split .slide-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .slide--split.slide--wide-text .slide-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .slide--split.slide--flip .slide-visual { order: 2; }
}
.slide-text { display: flex; flex-direction: column; gap: .8rem; }
.ess-deck :where(.slide-text p, .slide-text li, .slide-body > p) {
  margin: 0; color: var(--ink-2);
  font-size: clamp(1.04rem, .94rem + .42vw, 1.3rem); line-height: 1.55;
}
.ess-deck :where(.slide-text ul, .slide-text ol) { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.ess-deck .slide-lede { color: var(--ink); font-size: clamp(1.14rem, 1rem + .6vw, 1.46rem); line-height: 1.45; }
.ess-deck .slide dfn, .ess-deck .slide .term {
  font-style: normal; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.ess-deck .slide strong { color: var(--ink); }
.ess-deck .slide a:not(.deck-cta):not(.chip-link) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ess-deck .num, .ess-deck .math { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ess-deck .math { font-family: var(--font-heading); font-weight: 600; color: var(--ink); }

/* Stacked fraction: <span class="frac"><span>132.6 g</span><span>50.0 cm³</span></span> */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .2em; line-height: 1.15; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .25em .08em; }
.frac > span:last-child { padding: .08em .25em 0; }

/* ----------------------------------------------------------- visuals */
.slide-visual { min-width: 0; }
.ess-deck .slide figure { position: relative; margin: 0; }
.ess-deck .slide figure > svg, .ess-deck .slide figure > .bench-card > svg {
  display: block; width: 100%; height: auto; max-height: min(60vh, 540px);
}
/* Slide view: keep the whole slide inside one screen on short laptops. */
.ess-deck[data-mode="deck"] .slide figure > svg,
.ess-deck[data-mode="deck"] .slide figure > .bench-card > svg { max-height: max(230px, calc(100vh - 430px)); max-height: max(230px, calc(100dvh - 430px)); }
@media (min-width: 900px) and (max-height: 820px) {
  .ess-deck .slide { padding: 22px 34px; gap: 10px; }
}
.ess-deck figcaption { margin-top: .5rem; font-size: .86rem; color: var(--muted); line-height: 1.45; }
/* Wide diagrams (three or more panels) scroll sideways on phones instead of
   shrinking their labels below reading size. */
.fig-scroll-hint { display: none; }
@media (max-width: 699px) {
  .ess-deck .deck-fig--wide { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .3rem; }
  .ess-deck .deck-fig--wide > svg, .ess-deck .deck-fig--wide > .bench-card { min-width: 600px; }
  /* very wide panels (viewBox 900+) need more room for 13px labels */
  .ess-deck .deck-fig--xwide > svg, .ess-deck .deck-fig--xwide > .bench-card { min-width: 820px; }
  .ess-deck .deck-fig--wide > svg { max-height: none !important; }
  .ess-deck .deck-fig--wide .fig-scroll-hint { display: block; position: sticky; left: 0; font-size: .8rem; color: var(--muted); margin: .25rem 0 0; }
  .ess-deck .deck-fig--wide > figcaption, .ess-deck .deck-fig--wide > .fig-tools { position: sticky; left: 0; }
}
/* Phones: give diagrams every pixel the slide can spare. */
@media (max-width: 520px) {
  .ess-deck { padding: 0 8px; }
  .ess-deck .slide { padding: 16px 14px; border-radius: 16px; }
}
.ess-deck figcaption.fig-cap--tools, .fig-tools { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; }
/* The engine wraps the caption's own words, so a <dfn> or link inside the
   caption stays in its sentence beside the Enlarge button. */
.fig-cap-text { flex: 1 1 14rem; min-width: 0; }
.fig-tools { justify-content: flex-end; margin-top: .35rem; }
.deck-zoom-btn {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 44px; min-height: 44px; padding: 0 .75rem; border-radius: 12px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  font: 600 .82rem/1 var(--font-body);
}
.deck-zoom-btn:hover { border-color: var(--accent); color: var(--accent); }
.ess-deck .deck-zoom-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* SVG paint utilities — the only way diagrams take colour. */
.ess-deck svg text { font-family: var(--font-body); }
.ess-deck svg .t-head { font-family: var(--font-heading); font-weight: 700; }
.ess-deck svg .t-mono { font-family: var(--font-mono); }
.ess-deck svg .f-ink { fill: var(--ink); }
.ess-deck svg .f-ink2 { fill: var(--ink-2); }
.ess-deck svg .f-muted { fill: var(--muted); }
.ess-deck svg .f-accent { fill: var(--accent); }
.ess-deck svg .f-surface { fill: var(--surface); }
.ess-deck svg .f-surface2 { fill: var(--surface-2); }
.ess-deck svg .f-recessed { fill: var(--recessed); }
.ess-deck svg .f-paper { fill: var(--paper); }
.ess-deck svg .f-none { fill: none; }
.ess-deck svg .f-water { fill: var(--dk-water); }
.ess-deck svg .f-life { fill: var(--dk-life); }
.ess-deck svg .f-air { fill: var(--dk-air); }
.ess-deck svg .f-rock { fill: var(--dk-rock); }
.ess-deck svg .f-heat { fill: var(--dk-heat); }
.ess-deck svg .f-sun { fill: var(--dk-sun); }
.ess-deck svg .f-ig { fill: var(--dk-ig); }
.ess-deck svg .f-sed { fill: var(--dk-sed); }
.ess-deck svg .f-meta { fill: var(--dk-meta); }
.ess-deck svg .f-clay { fill: var(--dk-clay); }
.ess-deck svg .f-good { fill: var(--dk-good); }
.ess-deck svg .f-bad { fill: var(--dk-bad); }
.ess-deck svg .s-ink { stroke: var(--ink); }
.ess-deck svg .s-ink2 { stroke: var(--ink-2); }
.ess-deck svg .s-muted { stroke: var(--muted); }
.ess-deck svg .s-line { stroke: var(--line-strong); }
.ess-deck svg .s-accent { stroke: var(--accent); }
.ess-deck svg .s-surface { stroke: var(--surface); }
.ess-deck svg .s-water { stroke: var(--dk-water); }
.ess-deck svg .s-life { stroke: var(--dk-life); }
.ess-deck svg .s-air { stroke: var(--dk-air); }
.ess-deck svg .s-rock { stroke: var(--dk-rock); }
.ess-deck svg .s-heat { stroke: var(--dk-heat); }
.ess-deck svg .s-sun { stroke: var(--dk-sun); }
.ess-deck svg .s-ig { stroke: var(--dk-ig); }
.ess-deck svg .s-sed { stroke: var(--dk-sed); }
.ess-deck svg .s-meta { stroke: var(--dk-meta); }
.ess-deck svg .s-clay { stroke: var(--dk-clay); }
.ess-deck svg .s-good { stroke: var(--dk-good); }
.ess-deck svg .s-bad { stroke: var(--dk-bad); }
.ess-deck svg .o10 { fill-opacity: .10; } .ess-deck svg .o18 { fill-opacity: .18; }
.ess-deck svg .o25 { fill-opacity: .25; } .ess-deck svg .o35 { fill-opacity: .35; }
.ess-deck svg .o50 { fill-opacity: .5; }  .ess-deck svg .o70 { fill-opacity: .7; }
.ess-deck svg .w1 { stroke-width: 1; } .ess-deck svg .w2 { stroke-width: 2; }
.ess-deck svg .w3 { stroke-width: 3; } .ess-deck svg .w4 { stroke-width: 4; }
.ess-deck svg .dash { stroke-dasharray: 6 5; } .ess-deck svg .dot { stroke-dasharray: 2 4; }
.ess-deck svg .rnd { stroke-linecap: round; stroke-linejoin: round; }
/* Label halo: knocks a label out of the lines it sits on, in either theme. */
.ess-deck svg .halo { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.ess-deck svg .halo2 { paint-order: stroke; stroke: var(--surface-2); stroke-width: 5px; stroke-linejoin: round; }

/* ------------------------------------------------------------ callouts */
.ess-deck .callout {
  margin: 0; padding: .85rem 1rem; border-radius: 12px;
  background: var(--accent-tint); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent);
  color: var(--ink-2);
}
.ess-deck .callout, .ess-deck .callout p { font-size: clamp(.98rem, .9rem + .3vw, 1.14rem); line-height: 1.5; }
.callout-k { display: block; margin-bottom: .2rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.callout--project { background: var(--c-ess-tint); border-left-color: var(--c-ess); }

/* Two linked cards: observation → inference, before → after. */
.pair { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.pair-card { display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.pair-icon { width: 48px; height: 48px; }
.ess-deck .pair-k { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.ess-deck .pair-v { color: var(--ink); font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.35; }
.ess-deck .pair-note { font-size: .98rem; color: var(--ink-2); }
.pair-arrow { align-self: center; justify-self: center; font: 700 .9rem/1 var(--font-mono); color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.ess-deck kbd { display: inline-block; min-width: 1.6em; padding: .05em .45em; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface-2); color: var(--ink); font: 700 .9em/1.3 var(--font-mono); text-align: center; }

.deck-cta {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  min-height: 44px; padding: .6rem 1.05rem; border-radius: 12px;
  background: var(--accent); color: var(--surface) !important; text-decoration: none;
  font: 700 .95rem/1.2 var(--font-body); border: 1px solid var(--accent);
}
.deck-cta:hover { filter: brightness(1.08); }
.deck-cta--ghost { background: transparent; color: var(--accent) !important; border-color: var(--line-strong); }
.deck-cta-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.ess-deck .chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.chip-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .8rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink);
  font: 600 .86rem/1.2 var(--font-body); text-decoration: none;
}
.chip-link:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------ title + chapter */
.slide--title { background: linear-gradient(160deg, var(--c-ess-tint), transparent 55%), var(--surface); }
.ess-deck .slide--title h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem); line-height: 1.02; }
.slide--chapter { background: linear-gradient(140deg, var(--accent-tint), transparent 60%), var(--surface); }
.chapter-num {
  font-family: var(--font-heading); letter-spacing: -.04em; font-weight: 700; line-height: .8; color: var(--accent);
  font-size: clamp(3.4rem, 2.4rem + 4.5vw, 7rem); opacity: .9;
}
.ess-deck .slide--chapter h2 { font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
.ess-deck .can-do { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ess-deck .can-do li { display: flex; gap: .6rem; align-items: flex-start; }
.ess-deck .can-do li::before { content: "→"; color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.team-tag {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  padding: .35rem .75rem; border-radius: 999px; background: var(--c-ess-tint);
  border: 1px solid var(--line-strong); color: var(--ink); font: 600 .82rem/1.2 var(--font-body);
}

/* ------------------------------------------------------- worked example */
.worked-grid { display: grid; gap: clamp(14px, 2vw, 28px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .worked-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.given {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; padding: .8rem 1rem;
  border-radius: 12px; background: var(--recessed); border: 1px solid var(--line);
}
.given dt { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); align-self: center; }
.given dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ess-deck .steps > li {
  counter-increment: step; position: relative; padding: .6rem .8rem .6rem 3rem;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: clamp(1rem, .92rem + .35vw, 1.2rem); line-height: 1.45;
}
.ess-deck .steps > li::before {
  content: counter(step); position: absolute; left: .7rem; top: .55rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--surface); font: 700 .85rem/1 var(--font-mono);
}
.ess-deck .steps > li[hidden] { display: none; }
.step-k { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.step-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.step-btn {
  min-height: 44px; padding: .5rem .95rem; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--surface); border: 1px solid var(--accent);
  font: 700 .9rem/1 var(--font-body);
}
.step-btn--ghost { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.answer-box {
  margin: 0; padding: .8rem 1rem; border-radius: 12px;
  background: var(--c-geo-tint); border: 1px solid var(--line-strong); border-left: 4px solid var(--c-geo);
}
.ess-deck .answer-box p { color: var(--ink); font-weight: 600; }
.answer-k { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-geo); font-weight: 700; }

/* ------------------------------------------------------------- mistakes */
.mistakes { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mistakes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mistakes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mistake { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ess-deck .mistake p { font-size: clamp(.98rem, .92rem + .3vw, 1.14rem); }
.mk { display: flex; gap: .5rem; align-items: flex-start; }
.mk-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px;
  font: 700 .72rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.mk-badge--wrong { background: var(--c-calc-tint); color: var(--c-calc); border: 1px solid var(--c-calc); }
.mk-badge--right { background: var(--c-geo-tint); color: var(--c-geo); border: 1px solid var(--c-geo); }
.ess-deck .mk--wrong p { color: var(--ink-2); font-style: italic; }
.ess-deck .mk--right p { color: var(--ink); font-weight: 600; }
.mk-fig { display: block; width: 100%; height: auto; max-height: 120px; margin-bottom: .2rem; }

/* ---------------------------------------------------------- self-check */
.quiz { display: grid; gap: .7rem; }
.ess-deck .quiz-q { color: var(--ink) !important; font-weight: 600; }
.quiz-choices { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .quiz-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quiz-choice {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .55rem .85rem; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--line-strong); color: var(--ink);
  font: 600 1rem/1.35 var(--font-body);
}
.quiz-choice:hover { border-color: var(--accent); }
.quiz-letter { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line-strong); font: 700 .8rem/1 var(--font-mono); color: var(--muted); }
.quiz-choice.is-right { border-color: var(--c-geo); background: var(--c-geo-tint); }
.quiz-choice.is-right .quiz-letter { background: var(--c-geo); color: var(--surface); border-color: var(--c-geo); }
.quiz-choice.is-wrong { border-color: var(--c-calc); background: var(--c-calc-tint); }
.quiz-choice.is-wrong .quiz-letter { background: var(--c-calc); color: var(--surface); border-color: var(--c-calc); }
.quiz-mark { margin-left: auto; font: 700 .78rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.quiz-choice.is-right .quiz-mark { color: var(--c-geo); }
.quiz-choice.is-wrong .quiz-mark { color: var(--c-calc); }
.ess-deck .quiz-feedback { min-height: 1.4em; font-weight: 600; color: var(--ink); font-size: 1rem; }
.quiz-why { border-radius: 12px; border: 1px solid var(--line); background: var(--recessed); }
.quiz-why > summary {
  min-height: 44px; display: flex; align-items: center; padding: .5rem .9rem; cursor: pointer;
  font: 700 .92rem/1.2 var(--font-body); color: var(--accent); list-style: none;
}
.quiz-why > summary::-webkit-details-marker { display: none; }
.quiz-why > summary::before { content: "▸"; margin-right: .5rem; transition: transform .15s ease; }
.quiz-why[open] > summary::before { transform: rotate(90deg); }
.quiz-why-body { padding: 0 .95rem .85rem; }
.ess-deck .quiz-why-body p { font-size: 1rem; }
.check-stack { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .check-stack--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .check-stack--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check-stack .quiz { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.check-stack .quiz-choices { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------- property cards + bench card */
.tool-grid { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .2rem .8rem; align-items: start; padding: .85rem .95rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.tool-card svg { grid-row: span 2; width: 52px; height: 52px; }
.ess-deck .tool-card h3 { margin: 0; font-size: 1.08rem; }
.ess-deck .tool-card p { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--ink-2); }
/* Material colours (a red streak, a white tile) must not flip with the theme,
   so these diagrams sit on a daylight "bench card" in both themes. The
   .light-band class supplies the daylight tokens; this strips its page-band
   chrome. */
.ess-deck .bench-card.light-band {
  background-image: none; border-radius: 16px; padding: .6rem;
  border: 1px solid var(--line-strong); color: var(--ink-2);
}

/* ------------------------------------------------------- project slides */
.use-dl { display: grid; gap: .5rem .9rem; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 700px) { .use-dl { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.use-dl dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding-top: .3rem; }
.use-dl dd { margin: 0; color: var(--ink-2); font-size: clamp(1rem, .93rem + .3vw, 1.16rem); line-height: 1.5; }
.surface-tag { display: inline-block; padding: .1rem .5rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-strong); font: 600 .78rem/1.4 var(--font-mono); color: var(--ink); }
.team-grid { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-card { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--team, var(--accent)); }
.ess-deck .team-card h3 { margin: 0; }
.ess-deck .team-card p { font-size: clamp(.96rem, .9rem + .25vw, 1.08rem); }
.reuse-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.reuse-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; padding: .7rem .9rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
@media (min-width: 900px) { .reuse-list li { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; gap: 1rem; } }
.reuse-list a { font-weight: 700; }
.reuse-list li > a:first-child { display: inline-flex; align-items: center; gap: .55rem; }
.reuse-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.ess-deck .reuse-list p { font-size: clamp(.96rem, .9rem + .25vw, 1.1rem); }

/* ---------------------------------------------------- reference sheets */
.ref-grid { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ref-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ref-card { display: grid; gap: .3rem; align-content: start; padding: .75rem .9rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ref-card h3 { margin: 0 !important; font-size: .9rem !important; font-family: var(--font-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--accent) !important; }
.ess-deck .ref-eq { font-family: var(--font-heading); font-weight: 700; color: var(--ink); font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); font-variant-numeric: tabular-nums; }
.ess-deck .ref-card p { font-size: .93rem; line-height: 1.45; }
.ref-card a { font-size: .86rem; }
.vocab { display: grid; gap: .25rem 1.4rem; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 760px) { .vocab { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vocab { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vocab div { padding: .4rem 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.vocab dt { font-weight: 700; color: var(--ink); font-size: .95rem; }
.vocab dd { margin: .1rem 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.src-list { display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .src-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.src-list li { padding: .6rem .8rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.src-org { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.src-list a { font-weight: 700; }
.ess-deck .src-list p { font-size: .92rem; line-height: 1.4; margin-top: .15rem; }

/* ------------------------------------------------------- data tables */
.deck-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
.deck-table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.deck-table caption { text-align: left; padding: .5rem .8rem; font-size: .85rem; color: var(--muted); }
.deck-table th, .deck-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-2); vertical-align: top; }
.deck-table thead th { background: var(--surface-2); color: var(--ink); font: 700 .78rem/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.deck-table td.is-blank { color: var(--muted); font-style: italic; }
.deck-table td.num { white-space: nowrap; }
.deck-table--tests td { text-align: center; font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.deck-table--tests th { white-space: nowrap; }
.deck-table--tests tbody th { font-weight: 600; color: var(--ink); }
.deck-table td.yes { color: var(--c-geo); }
.deck-table td.no { color: var(--c-calc); }
.deck-table tfoot th, .deck-table tfoot td { border-top: 2px solid var(--line-strong); color: var(--ink); font-weight: 700; }
.deck-table td.verdict-yes { background: var(--c-geo-tint); }
.deck-table td.verdict-no { background: var(--c-calc-tint); }

/* ------------------------------------------------------------ footer */
.slide-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .4rem 1rem;
  margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line);
}
.ess-deck .slide-cite { margin: 0; flex: 1 1 18rem; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.ess-deck .slide-cite a { color: var(--accent); }
.slide-num { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- dock */
.deck-dock {
  position: sticky; bottom: var(--deck-dock-gap); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  width: min(420px, calc(100% - 128px)); min-height: var(--deck-dock-h);
  margin: 0 auto; padding: .4rem;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: var(--arch-shadow-lg);
}
.deck-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-width: 48px; min-height: 48px; padding: 0 .9rem; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--surface); border: 1px solid var(--accent);
  font: 700 .9rem/1 var(--font-body);
}
.deck-nav-btn[disabled] { opacity: .38; cursor: default; }
.deck-nav-btn svg { width: 20px; height: 20px; }
.deck-count { flex: 1 1 auto; min-width: 0; text-align: center; line-height: 1.15; }
.deck-count-n { display: block; font: 700 .95rem/1.2 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.deck-count-c { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .deck-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .deck-nav-btn { padding: 0; } }
.ess-deck:not(.is-ready) .deck-dock, .ess-deck:not(.is-ready) .deck-bar { display: none; }
/* The site's cookie notice is a fixed strip along the bottom edge: the dock
   rides above it (shared.js publishes its height on <body>). */
body.cookie-banner-open .deck-dock { bottom: calc(var(--cookie-banner-height, 0px) + var(--deck-dock-gap)); }
/* Below about 700px the site's back-to-top and accessibility buttons
   (accessibility.js: 48px circles, 1.25rem from the bottom right) would sit
   on the dock's Next button. On a deck page they float just above the dock. */
@media (max-width: 700px) {
  body.ess-deck-page:has(.ess-deck.is-ready) #dji-to-top,
  body.ess-deck-page:has(.ess-deck.is-ready) #a11y-widget {
    bottom: calc(var(--cookie-banner-height, 0px) + var(--deck-dock-gap) + var(--deck-dock-h) + 10px) !important;
  }
}

/* ------------------------------------------------- panel + zoom dialogs */
.deck-dialog {
  /* The site's global reset zeroes margins, which un-centres a modal dialog. */
  margin: auto; inset: 0;
  width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 860px);
  padding: 0; border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--arch-shadow-lg);
}
/* Dim the page behind a dialog without a colour literal: works on both grounds. */
.deck-dialog::backdrop { -webkit-backdrop-filter: brightness(.45) blur(2px); backdrop-filter: brightness(.45) blur(2px); }
.deck-dialog-inner { display: flex; flex-direction: column; max-height: inherit; }
.deck-dialog-head { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem .6rem 1.1rem; border-bottom: 1px solid var(--line); }
.deck-dialog-head h2 { flex: 1; margin: 0; font: 700 1.1rem/1.2 var(--font-heading); color: var(--ink); }
.deck-search { display: flex; flex-direction: column; gap: .3rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.deck-search label { font: 600 .78rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.deck-search input {
  width: 100%; min-height: 46px; padding: .55rem .85rem; border-radius: 12px;
  background: var(--recessed); color: var(--ink); border: 1px solid var(--line-strong); font: 500 1rem/1.2 var(--font-body);
}
.deck-search input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.deck-search-status { font-size: .82rem; color: var(--muted); margin: 0; }
.deck-panel-body { overflow-y: auto; padding: .5rem .6rem 1rem; }
.deck-toc-ch { margin: .8rem .5rem .3rem; font: 700 .72rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.deck-toc-list, .deck-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.deck-toc-link {
  display: flex; gap: .6rem; align-items: baseline; min-height: 44px; padding: .55rem .6rem; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: .95rem;
}
.deck-toc-link:hover, .deck-toc-link:focus-visible { background: var(--surface-2); }
.deck-toc-link[aria-current="true"] { background: var(--accent-tint); outline: 1px solid var(--line-strong); }
.deck-toc-n { flex: 0 0 2.2rem; font: 600 .78rem/1.2 var(--font-mono); color: var(--muted); text-align: right; }
.deck-toc-type { margin-left: auto; flex: 0 0 auto; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.deck-result-snip { display: block; margin-top: .15rem; color: var(--ink-2); font-size: .86rem; line-height: 1.4; }
.deck-results mark { background: var(--c-sci-tint); color: var(--ink); border-radius: 3px; padding: 0 .1em; box-shadow: inset 0 -2px 0 var(--c-sci); }
.deck-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
}
.deck-icon-btn:hover { background: var(--surface-2); }
.deck-icon-btn svg { width: 20px; height: 20px; }
.deck-zoom { width: min(1400px, calc(100vw - 16px)); max-height: calc(100vh - 16px); }
.deck-zoom-body { overflow: auto; padding: .6rem 1rem 1rem; }
.deck-zoom-body svg { width: 100%; height: auto; max-height: none; min-width: 640px; }
@media (max-width: 700px) { .deck-zoom-body svg { min-width: 760px; } }

.deck-toast {
  position: fixed; left: 50%; bottom: calc(var(--deck-dock-h) + 26px); transform: translateX(-50%); z-index: 60;
  max-width: calc(100vw - 32px); padding: .7rem 1rem; border-radius: 12px;
  background: var(--ink); color: var(--surface); box-shadow: var(--arch-shadow-lg);
  font: 600 .9rem/1.35 var(--font-body);
}
.deck-toast[hidden] { display: none; }
.deck-toast input { margin-top: .4rem; width: min(520px, 80vw); padding: .4rem .5rem; border-radius: 8px; border: 0; font: 500 .85rem/1.2 var(--font-mono); color: var(--ink); background: var(--surface); }

/* --------------------------------------------------- present (fullscreen) */
.ess-deck:fullscreen { --header-height: 0px; max-width: none; overflow-y: auto; padding: 12px clamp(12px, 3vw, 48px); background: var(--paper); }
.ess-deck:fullscreen .slide { max-width: 1500px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ess-deck *, .ess-deck *::before, .ess-deck *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ print */
@media print {
  @page { size: landscape; margin: 10mm; }
  #nav-root, #footer-root, .site-header, .site-footer, .skip-link, .deck-backrow,
  .deck-bar, .deck-dock, .deck-dialog, .deck-toast, .deck-zoom-btn, .step-controls, .deck-noprint,
  .fig-scroll-hint, .fig-tools, [data-deck-resume],
  /* site-wide fixed widgets (shared.js, nav-template.js) */
  #particles, .nav-overlay, #ah-sfx-toggle, #cookie-consent-banner, #dji-fb-backdrop, #a11y-widget, #dji-to-top { display: none !important; }
  body.ess-deck-page, .ess-deck-band { background: none !important; }
  .ess-deck-band { margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
  .site-main { padding-top: 0 !important; min-height: 0 !important; }
  .ess-deck { max-width: none; padding: 0; }
  .ess-deck .slide,
  .ess-deck .slide[hidden],
  .ess-deck.is-findable .slide[hidden="until-found"] {
    display: flex !important; content-visibility: visible !important;
    min-height: 0 !important; margin: 0 !important; padding: 8mm !important;
    border: 1px solid var(--line-strong) !important; box-shadow: none !important; border-radius: 8px !important;
    break-after: page; page-break-after: always; break-inside: avoid; animation: none !important;
  }
  .ess-deck .steps > li[hidden] { display: block !important; }
  .ess-deck .slide figure > svg, .ess-deck .slide figure > .bench-card > svg { max-height: 120mm; }
  .quiz-why > .quiz-why-body { display: block !important; }
  /* The printed answer key: the right choice is drawn as answered (border +
     filled letter, readable in grayscale) with no injected badge text, and a
     scholar's earlier on-screen tries never print. */
  .ess-deck .quiz-mark, .ess-deck .quiz-feedback { display: none !important; }
  .ess-deck .quiz-choice.is-wrong { border-color: var(--line-strong); background: var(--surface-2); }
  .ess-deck .quiz-choice.is-wrong .quiz-letter { background: var(--paper); color: var(--muted); border-color: var(--line-strong); }
  .ess-deck .quiz-choice[data-correct] { border: 2px solid var(--c-geo); background: var(--c-geo-tint); }
  .ess-deck .quiz-choice[data-correct] .quiz-letter { background: var(--c-geo); color: var(--surface); border-color: var(--c-geo); }
  .src-list a::after, .slide-cite a::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .85em; word-break: break-all; }
  .deck-cta { border: 1px solid var(--accent); background: none !important; color: var(--accent) !important; }
  /* Paper is about 960px wide: use the wide layouts, and keep each reference
     sheet on one page. */
  .ess-deck .slide-text p, .ess-deck .slide-text li { font-size: 12pt; }
  /* Worked examples: every step prints, so keep the column compact enough
     that the citation footer stays on the slide's own page. */
  .ess-deck .steps { gap: .3rem; }
  .ess-deck .steps > li { padding: .3rem .6rem .3rem 2.6rem; font-size: 11pt; line-height: 1.35; }
  .ess-deck .steps > li::before { top: .3rem; width: 1.45rem; height: 1.45rem; }
  .ess-deck .given { padding: .45rem .8rem; }
  .ess-deck .answer-box { padding: .5rem .8rem; }
  .ess-deck .check-stack--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ess-deck .check-stack--3, .ess-deck .mistakes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ess-deck .quiz-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ess-deck .quiz-choice { min-height: 0; padding: .3rem .5rem; font-size: 10pt; }
  .ess-deck .quiz-why-body p, .ess-deck .quiz-q { font-size: 10pt !important; }
  .ess-deck .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .ess-deck .ref-card { padding: .4rem .55rem; }
  .ess-deck .ref-card p { font-size: 8.5pt; line-height: 1.3; }
  .ess-deck .ref-card .ref-eq { font-size: 10pt; }
  .ess-deck .vocab { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .9rem; }
  .ess-deck .vocab div { padding: .15rem 0; }
  .ess-deck .vocab dt { font-size: 9pt; }
  .ess-deck .vocab dd { font-size: 8pt; line-height: 1.25; }
  .ess-deck .src-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
  .ess-deck .src-list li { padding: .3rem .5rem; }
  .ess-deck .src-list p, .ess-deck .src-list a { font-size: 8.5pt; }
  .ess-deck .src-list a::after { font-size: 7pt; }
  .ess-deck .slide--reference .slide-head h2, .ess-deck .slide--reference h2 { font-size: 18pt; }
  .ess-deck .slide--reference .callout { padding: .3rem .6rem; font-size: 9pt; }
  .ess-deck .slide--reference { gap: 6px; padding: 6mm 8mm !important; }
  .ess-deck .slide--reference .slide-body { gap: 8px; }
  .ess-deck .slide--reference .slide-foot { padding-top: .2rem; }
  .ess-deck .vocab dd { font-size: 7.5pt; line-height: 1.2; }
  .ess-deck .vocab dt { font-size: 8.5pt; }
  .ess-deck .vocab div { padding: .06rem 0; }
  .ess-deck .src-list li { padding: .2rem .45rem; }
  .ess-deck .src-list p { margin-top: 0; }
  .ess-deck .stage-last, .ess-deck .slide:last-child { break-after: auto !important; page-break-after: auto !important; }
}