/* =========================================================================
   PAE · Professional Academic English — shared deck brand system
   Matches "Write Like You Mean It" workbook: Newsreader / Source Serif 4 /
   JetBrains Mono on warm paper, vermilion ink-stamp accent, PAE seal.
   Canvas: 1920 x 1080.  Light editorial title/section slides + high-contrast
   content slides.  Persistent "What's due" status strip.
   ========================================================================= */

:root{
  --paper:#f5efe0;          /* warm cover/section paper            */
  --paper-2:#efe7d4;        /* slightly deeper paper for panels    */
  --white:#ffffff;
  --ink:#141519;            /* near-black, warm (darkened)         */
  --ink-2:#101115;          /* deepest ink (dark-slide bg)         */
  --ink-soft:#26282f;       /* secondary body text (high contrast) */
  --slate:#3a3e45;          /* meta text — darkened for contrast   */
  --slate-2:#c3c8cf;        /* meta on dark slides — lightened     */
  --hair:#d9cfb8;           /* paper hairline                      */
  --hair-dark:#b9ad8d;
  --hair-ink:rgba(245,239,224,.16); /* hairline on dark slides     */
  --accent:#bf3a2b;         /* vermilion ink-stamp red             */
  --accent-deep:#7d2419;
  --ochre:#b88a2e;          /* highlight / margin notes            */
  --ochre-soft:#f3ce5c;     /* bright gold accent on dark slides    */
  --olive:#5c6536;          /* "do" green                          */
  --rose:#a83a3a;           /* "don't" red                         */

  --f-display:"Newsreader","Source Serif 4",Georgia,serif;
  --f-body:"Source Serif 4","Newsreader",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

*{ box-sizing:border-box; }

deck-stage:not(:defined){ visibility:hidden; }
html,body{ margin:0; padding:0; background:#0b0b0d; }

/* ---- every slide ------------------------------------------------------- */
section{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--white);
  overflow:hidden;
  font-feature-settings:"ss01","onum","liga";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* generous inner frame; status strip lives in the bottom band */
.pad{
  position:absolute; inset:0;
  padding:96px 120px 132px;     /* bottom leaves room for status strip */
  display:flex; flex-direction:column;
}
/* body wrapper injected by pae-deck.js — centers content between the
   top-pinned running head and the bottom strip so slides use the full frame */
.pad > .vbody{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:safe center; }
/* on slides whose body is a single full-height row/grid, let it stretch */
.pad > .vbody > .row,
.pad > .vbody > .grid-2,
.pad > .vbody > .grid-3{ width:100%; }

/* fine paper grain on warm slides */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(28,29,34,.05) 1px,transparent 1.6px);
  background-size:7px 7px; mix-blend-mode:multiply; opacity:.5;
}

/* =========================================================================
   SLIDE VARIANTS
   ========================================================================= */
.s-paper{ background:var(--paper); }
.s-white{ background:var(--white); }
.s-dark{ background:var(--ink-2); color:var(--paper); }
.s-accent{ background:var(--accent); color:#fdf3ec; }

.s-dark h1,.s-dark h2,.s-dark h3,.s-dark h4{ color:var(--paper); }
.s-accent h1,.s-accent h2,.s-accent h3{ color:#fff; }

/* =========================================================================
   WORDMARK + SEAL
   ========================================================================= */
.wordmark{ display:inline-flex; align-items:center; gap:13px;
  font-family:var(--f-mono); font-weight:700; font-size:17px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.s-dark .wordmark,.s-accent .wordmark{ color:var(--paper); }
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:var(--accent); color:#fff;
  font-family:var(--f-mono); font-weight:700; font-size:13px;
  letter-spacing:.02em; border-radius:3px;
  box-shadow:0 2px 0 rgba(125,36,25,.45); transform:rotate(-2deg);
}
.s-accent .seal{ background:#fff; color:var(--accent); box-shadow:none; }

/* running head on content slides */
.r-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);
  padding-bottom:18px; border-bottom:1.5px solid var(--hair); margin-bottom:38px;
}
.s-dark .r-head{ color:var(--slate-2); border-color:var(--hair-ink); }
.r-head .chap{ color:var(--accent); font-weight:700; }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.kicker{
  font-family:var(--f-mono); font-size:17px; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;
}
.s-dark .kicker{ color:var(--ochre-soft); }

h1{ font-family:var(--f-display); font-weight:700; font-size:98px;
  line-height:1.02; letter-spacing:-.015em; margin:0 0 .26em; }
h2{ font-family:var(--f-display); font-weight:700; font-size:58px;
  line-height:1.08; letter-spacing:-.008em; margin:0 0 .32em; }
h3{ font-family:var(--f-display); font-weight:600; font-size:38px;
  line-height:1.2; margin:0 0 .3em; }
h4{ font-family:var(--f-display); font-weight:600; font-size:30px;
  line-height:1.25; margin:0 0 .2em; }

.num{ font-family:var(--f-mono); font-weight:600; font-size:.5em;
  color:var(--accent); letter-spacing:.1em; margin-right:.5em;
  vertical-align:.18em; }

p{ font-size:38px; line-height:1.5; margin:0 0 .92em; max-width:26ch; color:var(--ink); }
.measure{ max-width:30ch; }
.measure-wide{ max-width:40ch; }
.lead{ font-family:var(--f-display); font-weight:400; font-size:46px;
  line-height:1.34; color:var(--ink-soft); max-width:28ch; }
.s-dark .lead{ color:#efe7d4; }
em{ font-style:italic; }
strong{ font-weight:700; }
.accent-txt{ color:var(--accent); }
.small{ font-size:29px; line-height:1.45; }
.muted{ color:var(--slate); }
.s-dark .muted{ color:var(--slate-2); }
.serif-it{ font-family:var(--f-display); font-style:italic; }

.dropcap::first-letter{
  font-family:var(--f-display); font-weight:700; float:left;
  font-size:118px; line-height:.78; padding:10px 16px 0 0; color:var(--accent);
}

/* lists */
ul.dash{ list-style:none; padding:0; margin:.2em 0; }
ul.dash li{ position:relative; padding-left:40px; font-size:36px;
  line-height:1.4; margin-bottom:.55em; max-width:36ch; }
ul.dash li::before{ content:""; position:absolute; left:0; top:.6em;
  width:24px; height:4px; background:var(--accent); }
.s-dark ul.dash li::before{ background:var(--ochre); }

ol.steps{ list-style:none; counter-reset:s; padding:0; margin:.2em 0; }
ol.steps li{ position:relative; padding-left:64px; font-size:36px;
  line-height:1.4; margin-bottom:.65em; max-width:36ch; counter-increment:s; }
ol.steps li::before{ content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:.05em; font-family:var(--f-mono);
  font-weight:700; font-size:20px; color:var(--accent);
  border:2px solid var(--accent); border-radius:50%;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; }

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */
.spacer{ flex:1 1 auto; }
.row{ display:flex; gap:48px; }
.row.tight{ gap:28px; }
.col{ flex:1; min-width:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:42px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:34px; }
.center-y{ justify-content:center; }
.fourbar{ display:flex; height:12px; width:340px; margin:8px 0; }
.fourbar i{ flex:1; }
.fourbar i:nth-child(1){ background:var(--accent); }
.fourbar i:nth-child(2){ background:var(--ink); }
.fourbar i:nth-child(3){ background:var(--ochre); }
.fourbar i:nth-child(4){ background:var(--olive); }

/* =========================================================================
   CALLOUTS / CARDS
   ========================================================================= */
.callout{ background:var(--paper); border-left:6px solid var(--accent);
  padding:30px 38px; margin:.4em 0; }
.callout .label{ font-family:var(--f-mono); font-size:17px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:12px; }
.callout.warn{ border-color:var(--ochre); background:#faf3df; }
.callout.warn .label{ color:var(--ochre); }
.callout p{ margin:0; max-width:none; }
.s-dark .callout{ background:rgba(245,239,224,.07); border-color:var(--ochre); }

.card{ background:var(--white); border:1.5px solid var(--hair-dark);
  padding:34px 36px; }
.s-paper .card{ background:#fffaf0; }
.card .tag{ font-family:var(--f-mono); font-size:17px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:14px; }
.s-dark .card{ background:rgba(245,239,224,.05); border-color:var(--hair-ink); }

/* big feature card — concept label rendered as a large display word.
   Opt in with class "big" on any .card whose .tag is a short concept word
   (e.g. Posture, Eye contact, Gesture). Keeps the leading icon. */
.card.big .tag{ font-family:var(--f-display); font-weight:700; font-size:46px;
  line-height:1.03; letter-spacing:-.012em; text-transform:none; color:var(--accent);
  margin-bottom:.34em; display:flex; align-items:center; gap:.26em; text-wrap:balance; }
.card.big .tag .ico{ width:.82em; height:.82em; stroke-width:1.7; margin-right:.04em;
  vertical-align:0; flex:none; }
.card.big p{ font-size:25px; line-height:1.4; }
.s-dark .card.big .tag{ color:var(--ochre-soft); }

.statbox{ text-align:left; }
.statbox .big{ font-family:var(--f-display); font-weight:700; font-size:88px;
  line-height:.95; color:var(--accent); letter-spacing:-.02em; }
.statbox .cap{ font-size:29px; color:var(--ink-soft); line-height:1.3; max-width:18ch; }
.s-dark .statbox .big{ color:var(--ochre-soft); }
.s-dark .statbox .cap{ color:#d6cdb8; }

/* =========================================================================
   TABLES
   ========================================================================= */
table.guide{ width:100%; border-collapse:collapse; margin:.3em 0; }
table.guide caption{ text-align:left; font-family:var(--f-mono);
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin-bottom:14px; }
table.guide th{ text-align:left; font-family:var(--f-mono); font-weight:700;
  font-size:19px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); padding:0 22px 14px 0; border-bottom:3px solid var(--ink); }
table.guide td{ font-size:31px; line-height:1.32; padding:18px 22px 18px 0;
  border-bottom:1.5px solid var(--hair); vertical-align:top; color:var(--ink); }
table.guide tr:last-child td{ border-bottom:none; }
table.guide td em{ font-family:var(--f-mono); font-style:normal;
  font-size:25px; color:var(--accent-deep); letter-spacing:.02em; }
.s-dark table.guide th{ color:var(--paper); border-color:var(--paper); }
.s-dark table.guide td{ border-color:var(--hair-ink); color:#e7ddc8; }

/* =========================================================================
   LEAF MODEL PARAGRAPH (colour-coded analysis)
   ========================================================================= */
.model{ display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start; }
.model .body{ background:var(--paper); padding:34px 38px; border-top:5px solid var(--ink); }
.model .body .label{ font-family:var(--f-mono); font-size:15px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.model .body p{ font-size:30px; line-height:1.5; margin:12px 0 0; max-width:none; color:var(--ink); }
mark{ background:none; padding:0 1px; border-radius:2px; }
mark.l{ background:rgba(191,58,43,.20); }
mark.e{ background:rgba(184,138,46,.26); }
mark.a{ background:rgba(92,101,54,.24); }
mark.f{ background:rgba(28,29,34,.13); }
.model .notes{ display:flex; flex-direction:column; gap:16px; }
.model .note{ padding-left:20px; border-left:4px solid var(--hair-dark); }
.model .note .nlabel{ display:block; font-family:var(--f-mono); font-size:16px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; }
.model .note{ font-size:26px; line-height:1.34; color:var(--ink-soft); max-width:26ch; }
.model .note.l{ border-color:var(--accent); } .model .note.l .nlabel{ color:var(--accent); }
.model .note.e{ border-color:var(--ochre); } .model .note.e .nlabel{ color:var(--ochre); }
.model .note.a{ border-color:var(--olive); } .model .note.a .nlabel{ color:var(--olive); }
.model .note.f{ border-color:var(--ink); } .model .note.f .nlabel{ color:var(--ink); }

/* =========================================================================
   EXERCISE / ACTIVITY BLOCK
   ========================================================================= */
.ex{ border:2px solid var(--ink); background:#fffaf0; padding:32px 38px; }
.s-dark .ex{ background:rgba(245,239,224,.06); border-color:var(--ochre); }
.ex-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; border-bottom:1.5px dashed var(--hair-dark); padding-bottom:16px; margin-bottom:18px; }
.ex-head .exno{ display:inline-block; background:var(--accent); color:#fff;
  font-family:var(--f-mono); font-weight:700; font-size:18px; letter-spacing:.1em;
  padding:7px 14px; margin-right:16px; }
.ex-head h4{ display:inline; }
.ex-head .type{ font-family:var(--f-mono); font-size:18px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); white-space:nowrap; font-weight:600; }

/* pill / chip */
.chip{ display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:18px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 18px; border:2px solid var(--ink);
  border-radius:100px; }
.chip.acc{ border-color:var(--accent); color:var(--accent); }

/* discipline track tag */
.track{ font-family:var(--f-mono); font-size:16px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; color:#fff; }
.track.hass{ background:var(--accent); }
.track.stem{ background:var(--olive); }
.track.biz{ background:var(--ochre); }

/* compact: reclaim vertical space on dense activity/exercise slides
   without shrinking the main teaching text */
.compact .ex{ padding:20px 34px; }
.compact .ex-head{ padding-bottom:10px; margin-bottom:11px; }
.compact ol.steps li{ font-size:31px !important; margin-bottom:.3em; }
.compact .callout{ padding:17px 30px; }
.compact .ex > p{ font-size:31px !important; margin-bottom:.3em; }

/* step / activity cards — full-width numbered cards so instructions and
   activities span the slide instead of hugging the left. Use in place of
   <ol class="steps"> on activity/exercise slides. Add .two for two steps. */
.stepcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:22px; }
.stepcards.two{ grid-template-columns:repeat(2,1fr); }
.stepcards.four{ grid-template-columns:repeat(4,1fr); }
.stepcards .sc{ border:2px solid var(--ink); background:#fff; padding:24px 26px 26px;
  display:flex; flex-direction:column; gap:15px; }
.s-paper .stepcards .sc{ background:#fffaf0; }
.s-dark .stepcards .sc{ background:rgba(245,239,224,.05); border-color:var(--hair-ink); }
.stepcards .sc .n{ font-family:var(--f-mono); font-weight:700; font-size:22px; color:#fff;
  background:var(--accent); width:50px; height:50px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.stepcards .sc .ico{ width:46px; height:46px; color:var(--accent); }
.s-dark .stepcards .sc .ico{ color:var(--ochre-soft); }
.stepcards .sc p{ font-size:28px; line-height:1.36; max-width:none; margin:0; color:var(--ink); }
.s-dark .stepcards .sc p{ color:#ece3cf; }

/* Activity/exercise step lists (inside .ex) auto-render as full-width,
   numbered cards spread across the slide — so no activity slide hugs the
   left half. Section-content <ol class="steps"> (outside .ex) keeps the
   plain vertical numbered style. */
.ex ol.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; margin-top:20px; padding:0; counter-reset:s; }
.ex ol.steps li{ counter-increment:s; list-style:none; max-width:none; margin:0;
  position:relative; border:2px solid var(--ink); background:#fff;
  padding:82px 26px 26px; font-size:28px; line-height:1.36; }
.s-paper .ex ol.steps li{ background:#fffaf0; }
.s-dark .ex ol.steps li{ background:rgba(245,239,224,.05); border-color:var(--hair-ink); color:#ece3cf; }
.ex ol.steps li::before{ content:counter(s,decimal-leading-zero);
  position:absolute; top:24px; left:26px; width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:#fff; border:none;
  font-family:var(--f-mono); font-weight:700; font-size:22px;
  display:flex; align-items:center; justify-content:center; }
.compact .ex ol.steps li{ font-size:26px !important; padding-top:78px; }
/* opt-out: on a two-column activity slide where steps share the row with a
   worked example, render them as a compact numbered list, not big cards */
.ex ol.steps.stacked{ display:block; }
.ex ol.steps.stacked li{ border:none !important; background:none !important;
  padding:5px 0 5px 46px; min-height:0; font-size:27px; margin:0; }
.ex ol.steps.stacked li::before{ top:3px; left:0; width:34px; height:34px; font-size:16px; }
/* citation reference paragraphs fill their column instead of the narrow default measure */
.cite-card .ref{ max-width:none; }

/* Section-divider photo panel: a full-bleed image on the right ~44% of a
   dark/section divider, fading into the slide background so the headline on
   the left stays legible. Replaces the decorative watermark on dividers
   where a real photo is available. */
.divider-photo{ position:absolute; top:0; right:0; bottom:0; width:46%; overflow:hidden; z-index:0; }
.divider-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.divider-photo::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink-2) 0%, rgba(20,21,25,.55) 34%, rgba(20,21,25,0) 72%); }
.s-accent .divider-photo::after{ background:linear-gradient(90deg, var(--accent) 0%, rgba(191,58,43,.5) 34%, rgba(191,58,43,0) 72%); }
.divider-photo + .ibadge, .divider-photo ~ .ibadge,
.divider-photo ~ .kicker, .divider-photo ~ h1, .divider-photo ~ .lead,
.divider-photo ~ .foot-min{ position:relative; z-index:1; }
/* content band on a photo divider keeps to the left half */
.has-photo .pad > h1, .has-photo .pad > .lead{ max-width:19ch; }

/* content-slide side photo — a bordered image that fills a column on a
   two-column content slide (paired with .row/.col or grid). */
.sidephoto{ overflow:hidden; border:2px solid var(--ink); }
.s-dark .sidephoto{ border-color:var(--hair-ink); }
.sidephoto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Standalone slide lines (a slide's own intro / trailing summary, sitting
   directly in the frame rather than inside a column or card) span most of
   the slide width instead of a narrow half-measure — kills the "text only
   fills the left half" habit across every deck. Hero .lead lines on section
   dividers keep their tighter, art-directed measure. */
.pad > p:not(.lead), .pad > .vbody > p:not(.lead){ max-width:92ch !important; }

/* =========================================================================
   "WHAT'S DUE" STATUS STRIP  (injected by pae-deck.js)
   ========================================================================= */
.pae-strip{
  position:absolute; left:0; right:0; bottom:0; height:64px;
  display:flex; align-items:stretch;
  font-family:var(--f-mono); border-top:1.5px solid var(--hair);
  background:var(--paper); color:var(--slate); z-index:5;
}
.s-dark .pae-strip{ background:#101115; border-color:var(--hair-ink); color:var(--slate-2); }
.pae-strip .wk{ display:flex; align-items:center; gap:12px; padding:0 30px;
  background:var(--ink); color:var(--paper); font-weight:700; font-size:17px;
  letter-spacing:.16em; text-transform:uppercase; }
.pae-strip .wk .dot{ width:9px; height:9px; background:var(--accent); border-radius:50%; }
.pae-strip .due{ display:flex; align-items:center; gap:14px; padding:0 30px;
  font-size:16px; letter-spacing:.06em; }
.pae-strip .due .k{ font-weight:700; color:var(--accent); text-transform:uppercase;
  letter-spacing:.12em; font-size:14px; }
.s-dark .pae-strip .due .k{ color:var(--ochre-soft); }
.pae-strip .due.now{ background:rgba(191,58,43,.10); }
.pae-strip .sep{ flex:1; }
.pae-strip .pg{ display:flex; align-items:center; padding:0 30px;
  font-size:15px; letter-spacing:.1em; border-left:1px solid var(--hair); }
.s-dark .pae-strip .pg{ border-color:var(--hair-ink); }

/* page-number badge on plain (non-strip) slides */
.foot-min{ position:absolute; left:120px; right:120px; bottom:54px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); }
.s-dark .foot-min{ color:var(--slate-2); }

/* persistent author byline — runs up the left margin of every slide */
.pae-credit{ position:absolute; left:30px; top:50%;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--f-mono); font-size:14px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--slate); opacity:.62;
  pointer-events:none; z-index:4; white-space:nowrap; }
.s-dark .pae-credit, .s-accent .pae-credit{ color:var(--paper); opacity:.5; }

/* first-line indent for reading / worked-example paragraphs */
.lead, .anno p, .pull{ text-indent:1.7em; }
.anno p{ line-height:1.6; }

/* =========================================================================
   ENTRANCE ANIMATION (gated on active + reduced-motion)
   Bulletproof: we animate ONLY transform and keep opacity:1 at every frame,
   so a stalled/non-painting animation (PPTX-screenshot export, PDF/print,
   offscreen iframe) can never hide hero content. The rise still reads live.
   ========================================================================= */
.anim,.anim-2,.anim-3{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .anim{ animation:pae-rise .55s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .anim-2{ animation:pae-rise .55s .08s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .anim-3{ animation:pae-rise .55s .16s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes pae-rise{ from{ transform:translateY(20px); } to{ transform:none; } }
}
/* Never let an animation frame affect content when printing/exporting */
@media print{
  .anim,.anim-2,.anim-3{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* =========================================================================
   READABILITY & EMPHASIS  ("pop")  — additive utilities
   Use sparingly: at most ONE highlighted idea per slide so it stays the
   thing the eye lands on. .pop = marker highlight; .pin = accent key term.
   ========================================================================= */
.pop{ background:linear-gradient(transparent 54%, var(--ochre-soft) 54%);
  padding:0 .1em; font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.s-dark .pop, .s-discuss .pop{ background:linear-gradient(transparent 54%, rgba(184,138,46,.55) 54%); color:#fff; }
.s-accent .pop{ background:linear-gradient(transparent 54%, rgba(255,255,255,.34) 54%); color:#fff; }
.pin{ color:var(--accent-deep); font-weight:700; }
.s-dark .pin, .s-discuss .pin{ color:var(--ochre-soft); }
.s-accent .pin{ color:#fff; }
/* lift secondary body-copy contrast on light slides for a bright projector */
.s-white .muted, .s-paper .muted{ color:#33373e; }

/* =========================================================================
   ICON SYSTEM  (sprite injected by pae-deck.js)
   Usage:  <svg class="ico"><use href="#i-book"></use></svg>
   Stroke-based line icons inherit currentColor.
   ========================================================================= */
.ico{ width:1em; height:1em; flex:none; vertical-align:-.14em;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }

/* icon sitting before a card .tag or callout .label */
.tag .ico,.label .ico,.kicker .ico{ width:1.55em; height:1.55em; margin-right:.46em; vertical-align:-.28em; }

/* round icon badge — strong, high-contrast topic marker */
.ibadge{ display:inline-flex; align-items:center; justify-content:center;
  width:120px; height:120px; border-radius:50%; background:var(--accent); color:#fff;
  margin-bottom:26px; box-shadow:0 3px 0 rgba(125,36,25,.4); }
.ibadge .ico{ width:66px; height:66px; stroke-width:1.7; }
.ibadge.ink{ background:var(--ink); box-shadow:0 3px 0 rgba(0,0,0,.25); }
.ibadge.olive{ background:var(--olive); box-shadow:0 3px 0 rgba(40,46,20,.4); }
.ibadge.ochre{ background:var(--ochre); box-shadow:0 3px 0 rgba(120,88,20,.4); }
.ibadge.rose{ background:var(--rose); box-shadow:0 3px 0 rgba(110,30,30,.4); }
.ibadge.outline{ background:transparent; border:3px solid currentColor;
  color:var(--accent); box-shadow:none; }
.s-dark .ibadge.outline{ color:var(--ochre-soft); }
.s-accent .ibadge{ background:#fff; color:var(--accent); box-shadow:none; }

/* small inline label icon for list items / inline tags */
.iflag{ display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%; flex:none;
  border:2.5px solid currentColor; }
.iflag .ico{ width:38px; height:38px; }
.iflag.good{ color:var(--olive); } .iflag.bad{ color:var(--rose); }

/* large faint decorative glyph for section dividers / corners */
.iwatermark{ position:absolute; pointer-events:none; color:var(--accent);
  opacity:.10; }
.s-dark .iwatermark{ color:var(--ochre); opacity:.14; }
.s-accent .iwatermark{ color:#fff; opacity:.16; }
.iwatermark .ico{ width:100%; height:100%; stroke-width:1; }

/* icon chip — icon + short mono label, for feature rows */
.ichip{ display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:19px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); }
.ichip .ico{ width:46px; height:46px; color:var(--accent); }
.s-dark .ichip{ color:var(--paper); } .s-dark .ichip .ico{ color:var(--ochre-soft); }

/* =========================================================================
   DISCUSS / TALK PROMPT  — the "let's talk more" device.
   A recurring lecture beat: a question (or two) that hands the floor to the
   room. Use .talk for an inline prompt inside a content slide; use the
   .s-discuss section variant for a full discussion-moment slide.
   Identity colour is OCHRE (warm engage), never green.
   ========================================================================= */
.talk{ background:var(--paper-2); border:0; border-left:6px solid var(--ochre);
  padding:26px 34px 28px; margin:.4em 0; position:relative; }
.talk .label{ display:flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:17px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ochre); margin-bottom:14px; }
.talk .label .ico{ width:1.3em; height:1.3em; color:var(--ochre); }
.talk ul{ list-style:none; padding:0; margin:0; }
.talk li{ position:relative; padding-left:42px; font-family:var(--f-display);
  font-size:34px; line-height:1.34; color:var(--ink); margin-bottom:.45em; max-width:40ch; }
.talk li:last-child{ margin-bottom:0; }
.talk .q{ font-style:italic; }
.talk li::before{ content:""; position:absolute; left:0; top:.56em;
  width:24px; height:4px; background:var(--ochre); }
.talk p{ font-size:32px; line-height:1.4; margin:0; max-width:none; color:var(--ink); }
.s-dark .talk{ background:rgba(184,138,46,.16); border-left-color:var(--ochre); }
.s-dark .talk .label,.s-dark .talk .label .ico{ color:var(--ochre-soft); }
.s-dark .talk li,.s-dark .talk p{ color:#e7ddc8; } .s-dark .talk li::before{ background:var(--ochre); }

/* full discussion-moment slide: deep warm espresso ground, light prompt */
.s-discuss{ background:#37301f; color:#f4efe2; }
.s-discuss h1,.s-discuss h2,.s-discuss h3{ color:#fdfbf4; }
.s-discuss .kicker{ color:var(--ochre-soft); }
.s-discuss .lead{ color:#ebe5d4; }
.s-discuss .ibadge{ background:var(--ochre); color:#2a2412; box-shadow:0 3px 0 rgba(0,0,0,.32); }
.s-discuss .pae-credit{ color:#f4efe2; opacity:.5; }
.s-discuss .prompt{ font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:62px; line-height:1.18; letter-spacing:-.01em; color:#fdfbf4;
  max-width:24ch; margin:.1em 0 .3em; }
.s-discuss .prompt .num{ font-style:normal; }
.s-discuss .subq{ font-family:var(--f-mono); font-size:24px; letter-spacing:.04em;
  color:var(--ochre-soft); line-height:1.5; max-width:52ch; }
.s-discuss .iwatermark{ color:#fff; opacity:.07; }

.pae-hide{opacity:0 !important;visibility:hidden !important;}
section.build .pae-hide{transition:opacity .2s;}