/* ==========================================================================
   AI Basics — presenter deck for CPC staff
   --------------------------------------------------------------------------
   Slides are authored in a fixed 1280x720 design space and scaled to whatever
   screen or projector they land on, so layout is identical everywhere and
   nothing reflows in front of a room. deck.js sets --deck-scale.

   Design space sizes are large on purpose: at the back of a meeting room the
   smallest text here still reads.

   Spacing base ... 8px.  Type scale ... 17/19/21/24/27/34/42/54/92.
   Contrast ....... every pairing verified against WCAG AA; ratios noted.
   Motion ......... transform and opacity only; disabled under reduced-motion.
   ========================================================================== */


/* Webfonts, committed so the deck needs no network. Both are variable fonts
   under the SIL Open Font License (licences in assets/fonts/), latin and
   latin-ext subsets only. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  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: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  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: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  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;
}

:root {
  /* Grounds */
  --canvas:       #FDFBF8;
  --canvas-warm:  #F5EFE8;
  --ink:          #171210;

  /* Brand — #ED1C24 is CPC's logo red, sampled from the mark. Behind white it
     is 4.38:1, which clears AA for large text only. Every slide that uses it
     as a ground carries display-size type exclusively. --brand-deep (5.90:1
     behind white) takes any smaller text. */
  --brand:        #ED1C24;
  --brand-deep:   #C81219;

  /* Text on light */
  --text:         #171210;   /* 17.98:1 on canvas */
  --text-muted:   #574C46;   /*  8.04:1 on canvas */

  /* Text on ink */
  --on-ink:       #FDFBF8;   /* 17.98:1 */
  --on-ink-muted: #C9BAB2;   /*  9.86:1 */
  --on-ink-brand: #FFB3AD;   /* 10.88:1 */

  /* Pending — anything CPC has not decided, marked rather than invented */
  --pending:      #7A4E00;   /*  6.51:1 on its wash */
  --pending-wash: #FBF3DF;
  --pending-on-ink:   #FFD9A0;
  --pending-wash-ink: rgba(255, 196, 107, 0.16);

  /* Status — also the traffic-light roles on the green/amber/red slides and
     the work map. Every wash carries --text at 15:1 or better; each light's
     own colour clears AA on its own wash. */
  --ok:           #2C6E3F;   /* 5.62:1 on canvas */
  --ok-wash:      #ECF3ED;
  --go:           var(--ok);
  --go-wash:      var(--ok-wash);
  --slow:         var(--pending);
  --slow-wash:    var(--pending-wash);
  --no:           var(--brand-deep);  /* 5.19:1 on --no-wash */
  --no-wash:      #FCEDEC;
  --stop-wash:    rgba(23, 18, 16, 0.26);   /* inside the full-bleed red slide */

  --rule:         rgba(23, 18, 16, 0.14);
  --rule-ink:     rgba(253, 251, 248, 0.20);

  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Public Sans', ui-sans-serif, system-ui, sans-serif;

  /* Type scale, design-space px */
  --t-label: 17px;
  --t-fine:  19px;
  --t-sm:    21px;
  --t-base:  24px;
  --t-md:    27px;
  --t-lg:    34px;
  --t-xl:    42px;
  --t-2xl:   54px;
  --t-3xl:   92px;

  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-8: 64px;  --s-10: 80px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --deck-scale: 1;
  --notes-w: min(420px, 40vw);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Revealed one click at a time by deck.js. Opacity only — the element keeps
   its space from the start, so the slide never reflows as it fills in. */
[data-step] {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
[data-step].is-shown { opacity: 1; transform: none; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #0E0B0A;
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 100;
  transform: translateY(-200%);
  background: var(--ink); color: var(--on-ink);
  padding: 8px 12px; border-radius: 6px;
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Stage and scaling
   -------------------------------------------------------------------------- */

.stage {
  position: fixed; inset: 0;
  overflow: hidden;
  transition: right 260ms var(--ease);
}

/* Opening the notes narrows the stage rather than covering the slide. The
   ResizeObserver in deck.js picks up the change and rescales, so the presenter
   sees the whole slide and the notes at once. */
body.notes-open .stage,
body.notes-open .hud,
body.notes-open .progress { right: var(--notes-w); }

/* Centred with negative margins rather than grid/flex centring: the deck's
   layout box (1280x720) is wider than the stage whenever the scale is under 1,
   and an oversized grid item overflows to one side instead of centring, which
   pushed the right edge of every slide under the notes pane. */
.deck {
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -360px;
  margin-left: -640px;
  width: 1280px; height: 720px;
  transform: scale(var(--deck-scale));
  transform-origin: center center;
}
.deck:focus { outline: none; }

.slide {
  position: absolute; inset: 0;
  background: var(--canvas);
  padding: var(--s-10);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
}
.slide.is-current {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease), visibility 0s;
}

.slide__body { width: 100%; }
.slide__body--center { text-align: center; }

/* Slide number, bottom right of every slide */
.slide::after {
  content: attr(data-n);
  position: absolute; right: var(--s-6); bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.slide__h {
  font-size: var(--t-2xl);
  max-width: 24ch;
  margin-bottom: var(--s-4);
}
.slide__kicker {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-muted);
  max-width: 84ch;
  line-height: 1.5;
}

.slide__lead {
  font-size: var(--t-md);
  color: var(--text-muted);
  margin-top: calc(var(--s-4) * -1 + var(--s-2));
  margin-bottom: var(--s-4);
}
.slide--ink .slide__lead { color: var(--on-ink-muted); }

.statement {
  font-size: var(--t-lg);
  line-height: 1.35;
  max-width: 46ch;
}
.statement--tight { font-size: var(--t-md); max-width: 62ch; }
.statement + .statement { margin-top: var(--s-4); }
.statement + .twoup { margin-top: var(--s-5); }

/* The words a prompt adds on top of the last one. Outfit ships no italic, so
   the synthesised slant needs the colour shift to carry the emphasis. */
.slide__h em, .slide__kicker em {
  font-style: italic;
  color: var(--brand-deep);
}
.slide--ink .slide__h em,
.slide--ink .slide__kicker em { color: var(--on-ink-brand); }

.pullquote {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--brand-deep);
  max-width: 26ch;
}

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

.slide--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.slide--ink .slide__h { color: var(--on-ink); }
.slide--ink .slide__kicker { color: var(--on-ink-muted); }
.slide--ink::after { color: var(--on-ink-muted); }

.slide--warm { background: var(--canvas-warm); }

.slide--title {
  background: var(--ink);
  color: var(--on-ink);
  justify-content: center;
}
.slide--title::after { color: var(--on-ink-muted); }
.titlemark { width: 74px; height: auto; margin-bottom: var(--s-5); }
.title__h {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--on-ink);
}
.title__sub {
  margin-top: var(--s-2);
  font-size: var(--t-md);
  color: var(--on-ink-muted);
  max-width: 48ch;
}
.title__meta {
  margin-top: var(--s-8);
  display: flex; gap: var(--s-8);
}
.title__meta dt {
  font-size: var(--t-label);
  color: var(--on-ink-muted);
  margin-bottom: 4px;
}
.title__meta dd {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
}

/* The single-rule slide */
.slide--rule { background: var(--ink); color: var(--on-ink); }
.slide--rule::after { color: var(--on-ink-muted); }
.bigrule__label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-brand);
  margin-bottom: var(--s-4);
}
.bigrule {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.bigrule__sub {
  margin-top: var(--s-4);
  font-size: var(--t-md);
  color: var(--on-ink-muted);
  max-width: 52ch;
  margin-inline: auto;
}

/* The stop slide — brand red ground, display type only, so 4.38:1 clears AA
   for large text throughout. Nothing small is allowed on this slide. */
.slide--stop { background: var(--brand); color: #FFFFFF; }
.slide--stop::after { color: rgba(255, 255, 255, 0.82); }
.stop__label {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.stop__h {
  font-size: var(--t-2xl);
  color: #FFFFFF;
  margin-bottom: var(--s-5);
}
.stop__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-6);
}
.stop__list li {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  background: var(--stop-wash);
  border-radius: 10px;
  padding: 12px var(--s-2);
}
.stop__test {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Hands-on slide */
.slide--do { background: var(--canvas-warm); }
.do__lead { font-size: var(--t-md); max-width: 68ch; line-height: 1.4; }
.do__list {
  margin-top: var(--s-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-5);
}
.do__list li {
  font-size: var(--t-sm);
  line-height: 1.4;
  padding-left: var(--s-3);
  position: relative;
}
.do__list li::before {
  content: '';
  position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--go);   /* every task here is green-light, so the dots say so */
}
/* The rule for the exercise, carrying the same green dot as the green-light
   slide so it reads as that rule rather than a new one. It said "green light
   only" in red before, which argued with itself. */
.do__warn {
  margin-top: var(--s-5);
  display: inline-flex; align-items: center; gap: 14px;
  background: #FFFFFF;
  border: 2px solid var(--go);
  border-radius: 999px;
  padding: 10px var(--s-3) 10px 12px;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--go);   /* 6.16:1 on white */
}
.do__warn-dot {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--go);
}

/* Discussion slides. Every other slide in the deck is dense; these carry one
   question and almost nothing else, so the room can see from across it that
   the mode has changed from listening to talking. The emptiness is the
   device — no new colour is needed and none is spent, which keeps the red
   slide the loudest thing in the deck. */
.slide--ask { background: var(--canvas-warm); }
.slide--ask::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 14px;
  background: var(--brand);   /* decorative: carries no text */
}
.ask__label {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);   /* 5.17:1 on --canvas-warm */
  margin-bottom: var(--s-3);
}
.ask__q {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 21ch;
}
/* The paper exercise: three or four words, given the whole slide. These are
   instructions to carry out rather than questions to answer, so they run
   larger than a discussion prompt and the label changes accordingly. */
.ask__who {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
  margin-bottom: var(--s-2);
}
.ask__q--xl {
  font-size: var(--t-3xl);
  letter-spacing: -0.045em;
  line-height: 1.02;
  max-width: 15ch;
}
.ask__prime {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  color: var(--text-muted);   /* 7.28:1 on --canvas-warm */
  line-height: 1.4;
  max-width: 54ch;
}

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

.twoup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.col__h {
  font-size: var(--t-base);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-1);
  border-bottom: 3px solid currentColor;   /* delimits the column head */
}
.col__h--yes { color: var(--brand-deep); }
.col__h--no  { color: var(--text-muted); }
.slide--ink .col__h--yes { color: var(--on-ink-brand); }
.slide--ink .col__h--no  { color: var(--on-ink-muted); }
.slide--ink .biglist--muted li { color: var(--on-ink-muted); }

.biglist { display: grid; gap: var(--s-2); }
.biglist li { font-size: var(--t-sm); line-height: 1.4; }
.biglist--muted li { color: var(--text-muted); }

/* The same discussion prompt, folded into a teaching slide rather than given
   a slide of its own. Same red bar as .slide--ask, turned on its side, so the
   presenter reads both as the same instruction: stop, ask, wait. */
.ask {
  margin-top: var(--s-5);
  background: var(--canvas-warm);
  border-left: 6px solid var(--brand);
  border-radius: 0 10px 10px 0;
  padding: 14px var(--s-3);
}
.ask__strip-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.ask__strip-q {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 60ch;
}

/* Who makes them — four discrete, comparable products */
.vendors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.vendors > li {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
}
.vendors h3 { font-size: var(--t-base); margin-bottom: 2px; }
.vendors__by {
  font-family: var(--font-display);
  font-size: var(--t-fine);
  font-weight: 600;
  color: var(--brand-deep) !important;
  margin-bottom: var(--s-2);
}
.vendors p { font-size: var(--t-fine); color: var(--text-muted); line-height: 1.4; }

/* Chat / Cowork / Code — three discrete, comparable things */
.surfaces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.surfaces > li {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  display: flex; flex-direction: column;
}
.surfaces__n {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-deep);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.surfaces h3 { font-size: var(--t-base); margin-bottom: 6px; }
.surfaces p { font-size: var(--t-fine); color: var(--text-muted); line-height: 1.4; }
.surfaces__who {
  margin-top: auto;
  padding-top: var(--s-2);
  font-weight: 600;
  color: var(--brand-deep) !important;
}

/* Short bullets inside a card or column, where a clipped sentence would have
   done the same job worse. */
.minilist { display: grid; gap: 6px; }
.minilist li {
  font-size: var(--t-fine);
  line-height: 1.35;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}
.minilist li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
}
.slide--ink .minilist li { color: var(--on-ink-muted); }
.slide--ink .minilist li::before { background: var(--on-ink-muted); }

/* Side-by-side comparison — intern vs PhD, quick vs careful */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.vs__col {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: var(--s-3);
}
.slide--warm .vs__col { border-color: rgba(23, 18, 16, 0.10); }
.vs__h {
  font-size: var(--t-base);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: 3px solid currentColor;   /* delimits the column head */
}
.vs__h--a { color: var(--brand-deep); }
.vs__h--b { color: var(--text); }

.vs__rows { display: grid; gap: 10px; }
.vs__rows > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-2); }
.vs__rows dt { font-size: var(--t-fine); color: var(--text-muted); }
.vs__rows dd { font-size: var(--t-fine); font-weight: 500; line-height: 1.35; }

.vs__list { display: grid; gap: 10px; }
.vs__list li {
  font-size: var(--t-fine);
  line-height: 1.35;
  padding-left: var(--s-3);
  position: relative;
}
.vs__list li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
}

/* Traffic lights. Green and amber sit on the light ground with a coloured
   status dot; red gets the full-bleed treatment because it is the one rule
   that has to survive the session. */
.slide--go   { background: var(--canvas); }
.slide--slow { background: var(--canvas); }

.light__label {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.light__dot { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.light__dot--go   { background: var(--go); }
.light__dot--slow { background: var(--slow); }
.slide--go   .light__label { color: var(--go); }
.slide--slow .light__label { color: var(--slow); }

.light__h { font-size: var(--t-2xl); margin-bottom: var(--s-4); max-width: 24ch; }

.light__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
}
.light__list li {
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.3;
  border-radius: 10px;
  padding: 12px var(--s-2);
}
.slide--go   .light__list li { background: var(--go-wash); }
.slide--slow .light__list li { background: var(--slow-wash); }

/* The same examples grouped by kind of work, one column per group */
.light__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.light__groups h3 {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}
.light__groups .light__list { grid-template-columns: minmax(0, 1fr); }

.light__test {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.slide--go   .light__test { color: var(--go); }
.slide--slow .light__test { color: var(--slow); }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.compare__col { border-radius: 12px; padding: var(--s-3); }
.compare__col--bad  { background: var(--pending-wash); }
.compare__col--good { background: var(--ok-wash); }
.compare__tag {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.compare__col--bad  .compare__tag { color: var(--pending); }
.compare__col--good .compare__tag { color: var(--ok); }
.compare__text { font-size: var(--t-sm); line-height: 1.45; }

/* Four ordered parts, so they read along one line rather than round a grid. */
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.parts li { border-top: 3px solid var(--on-ink-brand); padding-top: 12px; }
.parts__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--on-ink-brand);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-1);
}
.parts h3 { font-size: var(--t-sm); color: var(--on-ink); margin-bottom: 6px; }
.parts p { font-size: var(--t-fine); color: var(--on-ink-muted); line-height: 1.45; }

/* Five open questions, five across — deliberately the same shape as the five
   pillars, so the deck closes on "five things to decide" answering "five
   things to protect". Three across wrapped to two rows and ran into the
   slide number. */
.openq { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.openq li {
  background: var(--pending-wash);
  border-radius: 12px;
  padding: 16px;
}
.openq h3 { font-size: var(--t-sm); color: var(--pending); margin-bottom: 6px; }
.openq p { font-size: var(--t-fine); color: var(--text-muted); line-height: 1.45; }

/* The story exercise. Same three-slide shape each time, because the repetition
   is the argument: the answers narrow, and there are still three of them. */
.told__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.told {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.told li {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
}
.told h3 {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 10px;
}
.told p { font-size: var(--t-base); line-height: 1.35; }

/* The A/B reveal. Two halves of the room, one variable, side by side so the
   difference is visible rather than described. */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.groups__h {
  font-size: var(--t-base);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid currentColor;
}
.groups__h--a { color: var(--text-muted); }
.groups__h--b { color: var(--brand-deep); }
.groups__art {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px;
}
.groups__art svg { width: auto; height: 132px; color: var(--ink); display: block; }
/* Outlined, not filled: no yellow light enough to read as a lemon clears 3:1
   against white, so the stroke has to carry the shape. */
.rounds__fruit { fill: #E8B923; }
.groups__col > p {
  margin-top: 12px;
  font-size: var(--t-fine);
  color: var(--text-muted);
  line-height: 1.35;
}

/* Two things from before chatbots, in the order they happened. These are the
   original images, not redrawn, so each sits at a fixed height with its caption
   beside it rather than under it: that is what keeps both large enough to read.
   The alt text carries the words for anyone who cannot see them. */
.then { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); }
.then__item { margin: 0; display: flex; align-items: flex-end; gap: var(--s-3); }
.then__img {
  display: block;
  height: 392px; width: auto;
  border-radius: 2px;
  box-shadow: 0 6px 22px rgba(23, 18, 16, 0.16);
}
.then__cap { display: flex; flex-direction: column; gap: 8px; width: 188px; }
.then__year {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
}
.then__src { font-size: var(--t-fine); color: var(--text-muted); line-height: 1.35; }
.then__q {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* A YouTube Short, opened in a new tab rather than embedded: YouTube refuses to
   play an embedded video on a page opened as a file (Error 153), and a file is
   how this deck is presented. The card is drawn, so the slide still renders with
   no network; only pressing it needs one. Shaped like a Short, 9:16. */
.watch { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.watch__card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  width: 288px; aspect-ratio: 9 / 16;
  padding: 20px;
  border-radius: 16px;
  background: #0F0F0F;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(23, 18, 16, 0.16);
}
.watch__play {
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 56px;
  transform: translate(-50%, -50%);
}
.watch__title { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; line-height: 1.2; }
.watch__by { font-size: var(--t-label); color: #C9C9C9; }
.watch__src { margin-top: var(--s-3); font-size: var(--t-label); color: var(--text-muted); }

/* A phone showing its next-word suggestions, redrawn rather than screenshotted.
   It keeps iOS colours instead of the deck's on purpose: the point of the slide
   is "you already own one of these", and a phone rendered in CPC red would read
   as an illustration of an idea rather than the thing itself. */
.phone {
  --ios-blue:  #007AFF;
  --ios-kbd:   #D1D3D9;
  --ios-key:   #FFFFFF;
  --ios-alt:   #ACB3BD;
  --ios-grey:  #8E8E93;
  --ios-sep:   rgba(0, 0, 0, 0.14);
  width: 380px;
  background: #1A1A1C;
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 6px 22px rgba(23, 18, 16, 0.16);
}
.phone__screen {
  background: #FFFFFF;
  border-radius: 19px;
  overflow: hidden;
  color: #000000;
  font-family: var(--font-body);
}

.phone__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 14px 3px;
  font-size: var(--t-label);
  font-weight: 600;
  color: #000000;
}
.phone__batt {
  width: 22px; height: 11px;
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}

.phone__nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--ios-sep);
}
.phone__cancel { font-size: var(--t-fine); color: var(--ios-blue); }
.phone__title  { font-size: var(--t-fine); font-weight: 700; }
.phone__send {
  justify-self: end;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ios-blue);
  color: #FFFFFF;
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1;
}

.phone__msg {
  padding: 14px;
  font-size: var(--t-label);
  line-height: 1.5;
  min-height: 92px;
}
.phone__caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--ios-blue);
}

/* The bar the whole slide is about. */
.phone__bar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ios-kbd);
  border-top: 1px solid var(--ios-sep);
}
.phone__bar li {
  padding: 11px 4px;
  text-align: center;
  font-size: var(--t-label);
  font-weight: 500;
}
.phone__bar li + li { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.18); }

/* Decorative: it establishes "this is a phone" and carries no meaning, which
   is why it is aria-hidden and why its letters sit below the deck's floor. */
.phone__kbd {
  background: var(--ios-kbd);
  padding: 8px 5px 10px;
  display: grid; gap: 8px;
}
.phone__row { display: grid; grid-auto-flow: column; gap: 5px; justify-content: center; }
.phone__row span {
  width: 31px; height: 38px;
  display: grid; place-items: center;
  background: var(--ios-key);
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  font-size: 15px;
  font-weight: 400;
}
.phone__row--mid { padding: 0 18px; }
.phone__row--low span.k-wide { width: 44px; background: var(--ios-alt); font-size: 14px; }
.phone__row--last span { font-size: 12px; }
.phone__row--last { grid-template-columns: 52px 1fr 60px; grid-auto-flow: row; }
.phone__row--last span { width: auto; }
.phone__row--last .k-alt { background: var(--ios-alt); }
.phone__row--last .k-space { background: var(--ios-key); }

/* The phone is a fixed width, so it gets a fixed column and the rest of the
   slide takes what is left. */
.twoup--phone { grid-template-columns: 380px minmax(0, 1fr); gap: var(--s-6); }
.twoup--phone .minilist { margin-bottom: var(--s-5); }

/* The two things that follow from it being a prediction machine. */
.because { display: grid; gap: var(--s-4); align-content: center; }
.because h3 {
  font-size: var(--t-base);
  color: var(--brand-deep);
  margin-bottom: 6px;
}
.because p { font-size: var(--t-fine); line-height: 1.45; }

/* The five things the session exists to protect, after the Center for Humane
   Technology. Laid out as five standing columns under five rules, which is
   what the word is doing. */
.pillars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }

/* The guidance slide's three helpers, framed so their white grounds read as cards */
.helpers { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.helpers picture { display: block; line-height: 0; }
.helpers__img {
  height: 120px;
  width: auto;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: var(--s-1);
}
.helpers__line { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.5; text-wrap: balance; }
.helpers__credit { font-size: var(--t-label); color: var(--text-muted); margin-top: var(--s-1); }
.pillars li {
  border-top: 3px solid var(--brand);
  padding-top: 12px;
}
.pillars__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-1);
}
.pillars h3 { font-size: var(--t-sm); margin-bottom: 6px; }
.pillars p { font-size: var(--t-fine); color: var(--text-muted); line-height: 1.45; }

/* The traffic lights crossed with the four kinds of work this team actually
   does. A real table: the row header names the light, so the colour coding is
   labelled rather than remembered, and every cell is the answer to "this kind
   of work, at this level of care". */
.matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 6px;
  margin-top: var(--s-2);
}
.matrix__corner { width: 168px; padding: 0; }
.matrix thead th {
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 0 12px 10px;
  border-bottom: 2px solid var(--rule);
}
.matrix tbody th {
  text-align: left;
  vertical-align: middle;
  font-family: var(--font-display);
  font-size: var(--t-fine);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 12px 12px 0;
}
.matrix tbody td {
  vertical-align: top;
  font-size: var(--t-fine);
  line-height: 1.35;
  padding: 12px;
  border-radius: 8px;
}
.mx__dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-right: 9px;
}
.mx--go   th { color: var(--go); }
.mx--go   td { background: var(--go-wash); }
.mx--go   .mx__dot { background: var(--go); }
.mx--slow th { color: var(--slow); }
.mx--slow td { background: var(--slow-wash); }
.mx--slow .mx__dot { background: var(--slow); }
.mx--stop th { color: var(--no); }
.mx--stop td { background: var(--no-wash); }
.mx--stop .mx__dot { background: var(--no); }

/* Closing rules. The rule itself is full-strength; the sentence explaining it
   steps back, so the five bold openings can be read alone from the back. */
.rules { display: grid; gap: var(--s-3); max-width: 76ch; }
.rules li { display: flex; gap: var(--s-3); align-items: baseline; }
.rules__n {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--on-ink-brand);
  font-variant-numeric: tabular-nums;
}
.rules p {
  font-size: var(--t-md);
  line-height: 1.35;
  color: var(--on-ink-muted);
}
.rules strong { color: var(--on-ink); font-weight: 700; }

/* Anything CPC has not decided */
.tbd {
  background: var(--pending-wash);
  color: var(--pending);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.slide--ink .tbd, .slide--title .tbd {
  background: var(--pending-wash-ink);
  color: var(--pending-on-ink);
}

/* --------------------------------------------------------------------------
   Presenter chrome — lives outside the scaled deck so it stays crisp and a
   constant physical size regardless of projector resolution
   -------------------------------------------------------------------------- */

.hud {
  position: fixed; left: 0; right: 0; bottom: 16px;
  width: max-content;
  margin-inline: auto;
  z-index: 30;
  display: flex; align-items: center; gap: 4px;
  transition: right 260ms var(--ease), opacity 260ms var(--ease);
  background: rgba(23, 18, 16, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 6px;
  opacity: 0.28;
  transition: opacity 260ms var(--ease);
}
.hud:hover, .hud:focus-within, .hud.is-awake { opacity: 1; }
.hud > * { flex: none; }

.hud__btn {
  display: grid; place-items: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  background: transparent;
  border: 0; border-radius: 999px;
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms var(--ease);
}
.hud__btn:hover { background: rgba(253, 251, 248, 0.16); }
.hud__btn[aria-pressed="true"], .hud__btn[aria-expanded="true"] {
  background: var(--on-ink); color: var(--ink);
}
.hud__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hud__count {
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 10px;
  white-space: nowrap;
}

.progress {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(253, 251, 248, 0.14);
  z-index: 29;
}
.progress__fill {
  display: block; height: 100%;
  width: 0;
  background: var(--brand);
  transform-origin: left center;
  transition: width 320ms var(--ease);
}

/* Notes pane */
.notespane {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: var(--notes-w);
  z-index: 32;
  background: var(--ink);
  color: var(--on-ink);
  border-left: 1px solid var(--rule-ink);
  padding: 24px;
  overflow-y: auto;
}
.notespane__h {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-brand);
  margin-bottom: 16px;
}
.notespane__slide {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--on-ink);
}
.notespane__body p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--on-ink-muted);
}
.notespane__body p + p { margin-top: 14px; }
.notespane__body .tbd { background: var(--pending-wash-ink); color: var(--pending-on-ink); }

/* Overview grid */
.grid {
  position: fixed; inset: 0; z-index: 34;
  background: rgba(14, 11, 10, 0.97);
  overflow-y: auto;
  padding: 40px;
}
.grid__inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin-inline: auto;
}
.grid__item {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(253, 251, 248, 0.06);
  border: 1px solid var(--rule-ink);
  border-radius: 10px;
  padding: 14px;
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.grid__item:hover { background: rgba(253, 251, 248, 0.14); transform: translate3d(0, -2px, 0); }
.grid__item.is-current { border-color: var(--brand); background: rgba(237, 28, 36, 0.18); }
.grid__n {
  font-size: 13px;
  color: var(--on-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Help */
.help {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 36;
  width: min(460px, 90vw);
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--rule-ink);
  border-radius: 14px;
  padding: 24px;
}
.help h2 { font-size: 19px; margin-bottom: 16px; }
.help dl { display: grid; gap: 10px; }
.help dl > div { display: grid; grid-template-columns: 148px 1fr; gap: 12px; align-items: baseline; }
.help dd { font-size: 16px; color: var(--on-ink-muted); }
.help kbd {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  background: rgba(253, 251, 248, 0.12);
  border: 1px solid var(--rule-ink);
  border-radius: 5px;
  padding: 2px 7px;
}
.help__print { margin-top: 18px; font-size: 15px; color: var(--on-ink-muted); line-height: 1.5; }

.livestatus {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.notes { display: none; }

/* .slide.is-current re-declares transition and outranks a bare .slide rule, so
   it has to be named here or the slide keeps animating under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-current, .progress__fill, .hud, .grid__item,
  [data-step], [data-step].is-shown, .stage { transition: none !important; }
  .slide, .slide.is-current, [data-step] { transform: none; }
}

/* --------------------------------------------------------------------------
   Print — one slide per page with its notes underneath, as a handout
   -------------------------------------------------------------------------- */

@page { size: landscape; margin: 14mm; }

@media print {
  body { background: #FFFFFF; overflow: visible; }
  .stage { position: static; display: block; overflow: visible; }
  .hud, .progress, .notespane, .grid, .help, .skip-link { display: none !important; }

  .deck {
    transform: none !important;
    width: auto; height: auto;
  }

  .slide {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block;
    min-height: 0;
    padding: 0 0 12mm 0;
    page-break-after: always;
    break-after: page;
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  .slide:last-of-type { page-break-after: auto; break-after: auto; }
  .slide::after { position: static; display: block; margin-bottom: 6mm; color: #555555; }

  .slide__h, .title__h, .stop__h, .bigrule, .ask__q { font-size: 26pt; color: #000000 !important; }
  .statement, .do__lead, .rules p, .ask__prime, .ask__strip-q { font-size: 13pt; }
  .slide__kicker, .cardlist p, .parts p, .checks p, .openq p, .compare__note,
  .pillars p, .workmap__col li { font-size: 10pt; color: #333333 !important; }
  .cardlist li, .openq li, .compare__col, .stop__list li { background: #FFFFFF !important; border: 1pt solid #BBBBBB; }
  .titlemark { width: 40px; }
  .do__warn { background: #FFFFFF !important; color: #000000 !important; border-color: #000000; }
  .do__warn-dot { background: #000000 !important; }
  .tbd { background: #FFFFFF !important; color: #000000 !important; outline: 1pt solid #000000; }

  [data-step] { opacity: 1 !important; transform: none !important; }
  .slide--ask::before { display: none; }
  .ask { background: #FFFFFF !important; border-left: 2pt solid #000000; }
  .pillars li { border-top-color: #000000; }

  /* The matrix is a colour code, and three mid-tone washes come out the same
     grey. On paper the row headers carry it, so the washes can go. */
  .matrix tbody td { background: #FFFFFF !important; border: 1pt solid #BBBBBB; font-size: 9pt; }
  .matrix thead th, .matrix tbody th { color: #000000 !important; font-size: 9pt; }
  .mx__dot { border: 1pt solid #000000; background: none !important; }

  /* The whole point of a printed handout: the notes come with it. */
  .notes {
    display: block;
    margin-top: 8mm;
    padding-top: 5mm;
    border-top: 1pt solid #BBBBBB;
    font-size: 10pt;
    line-height: 1.5;
    color: #333333;
    white-space: pre-line;
  }
  .notes::before {
    content: 'Presenter notes';
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 3mm;
  }
}