/* ===================================================================
   MARK2026 — Keynote deck for Jamie Skella
   "Human + AI: Designing the Marketing Org Your Competitors
    Are Already Building"
   Built on the Skella & Co design system (styles.css tokens).
   16:9 slides. Screen mode = scroll-snap + key nav.
   Print mode = one slide per page at 1280×720 (vector PDF export).
   =================================================================== */

:root {
  --brand: #5900C1;
  --brand-tint: #7A2CE0;
  --brand-deep: #3D0086;
  --bg: #FAFAFB;
  --surface: #FFFFFF;
  --text: #1A1A1C;
  --muted: #5F5F66;
  --soft: #A8A8B0;
  --rule: rgba(26, 26, 28, 0.08);
  --rule-strong: rgba(26, 26, 28, 0.16);
  --on-brand: #F3EDFB;
  --on-brand-soft: #C9B3EC;

  --font-sans: "Söhne", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Slide is authored against a 1280×720 canvas. Type scales with the
     slide width (cqw) so every export and screen size stays identical. */
  --s: 1cqw;            /* 1% of slide width */
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: #E7E7EC;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01", "ss02", "kern";
}

/* -------------------------------------------------------------------
   Deck + slide frame
   ------------------------------------------------------------------- */
.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 40px 0 80px;
}

.slide {
  position: relative;
  width: min(96vw, 1280px);
  aspect-ratio: 16 / 9;
  container-type: inline-size;          /* enable cqw units */
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 18px 50px -24px rgba(26, 26, 28, 0.35);
  scroll-snap-align: center;
}

/* Inner padding box — everything lays out against this. */
.slide__pad {
  position: absolute;
  inset: 0;
  padding: 8cqw 9cqw 10cqw;
  display: flex;
  flex-direction: column;
}

.slide--center .slide__pad { justify-content: center; }
.slide--end .slide__pad { justify-content: flex-end; }

/* Variants ---------------------------------------------------------- */
.slide--brand { background: var(--brand); color: var(--on-brand); }
.slide--brand .kicker { color: var(--on-brand-soft); }
.slide--brand .foot { color: var(--on-brand-soft); }
.slide--deep { background: radial-gradient(120% 120% at 18% 8%, var(--brand) 0%, var(--brand-deep) 78%); color: var(--on-brand); }
.slide--deep .kicker, .slide--deep .foot { color: var(--on-brand-soft); }
.slide--ink { background: #131316; color: #F3F3F5; }
.slide--ink .kicker, .slide--ink .foot { color: #8A8A93; }

/* -------------------------------------------------------------------
   Typographic system
   ------------------------------------------------------------------- */
.kicker {
  font-size: 1.45cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 3cqw;
}

.statement {
  font-weight: 300;
  font-size: 6.6cqw;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 80cqw;
  text-wrap: balance;
}
.statement--lg { font-size: 8.4cqw; }
.statement--sm { font-size: 5cqw; }
.statement em { font-style: italic; font-weight: 300; }
.statement strong, .accent { color: var(--brand); font-weight: 400; }
.slide--brand .accent, .slide--deep .accent, .slide--ink .accent { color: #fff; font-weight: 500; }
.u-tint { color: var(--brand-tint); }

.sub {
  font-weight: 300;
  font-size: 2.5cqw;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--muted);
  margin: 4cqw 0 0;
  max-width: 64cqw;
}
.slide--brand .sub, .slide--deep .sub, .slide--ink .sub { color: var(--on-brand-soft); }

.lead-quote {
  font-weight: 300;
  font-size: 4.6cqw;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 78cqw;
}
.lead-quote .qm { color: var(--brand-tint); }
.slide--deep .lead-quote .qm, .slide--brand .lead-quote .qm { color: #fff; }

.foot {
  position: absolute;
  left: 9cqw;
  right: 9cqw;
  bottom: 4.5cqw;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 2cqw;
  font-size: 1.35cqw;
  letter-spacing: 0.04em;
  color: var(--soft);
}
.foot .src { font-size: 1.2cqw; letter-spacing: 0; color: var(--soft); max-width: 50cqw; }
.slide--brand .foot .src, .slide--deep .foot .src { color: var(--on-brand-soft); }

.eyebrow-num { font-variant-numeric: tabular-nums; }

/* Persistent contact footer on every slide -------------------------- */
.slide::after {
  content: "linkedin.com/in/jamieskella    \00B7    skella.com.au";
  position: absolute;
  right: 9cqw;
  bottom: 4.5cqw;
  font-size: 1.15cqw;
  letter-spacing: 0.03em;
  color: var(--soft);
  white-space: nowrap;
  pointer-events: none;
}
.slide--brand::after, .slide--deep::after { color: var(--on-brand-soft); }
.slide--ink::after { color: #8A8A93; }
.no-autofoot::after { content: none; }

/* Murmuration: live canvas on screen, static image in print/reduced-motion */
.murmur-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.slide.is-live .murmur-canvas { display: block; }
.slide.is-live .murmur-static { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .slide.is-live .murmur-canvas { display: none; } .slide.is-live .murmur-static { opacity: 0.9; } }
@media print { .murmur-canvas { display: none !important; } .murmur-static { opacity: 0.9 !important; } }

/* Title slide ------------------------------------------------------- */
.title-wrap { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.title-logo { width: 11.5cqw; height: auto; align-self: flex-start; margin-bottom: 6cqw; }
.title-main {
  font-weight: 300;
  font-size: 13cqw;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
}
.title-main .plus { color: var(--on-brand-soft); font-weight: 200; padding: 0 0.12em; }
.title-sub {
  font-weight: 300;
  font-size: 3.1cqw;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--on-brand);
  margin: 4.5cqw 0 0;
  max-width: 70cqw;
}
.title-meta {
  margin-top: 7cqw;
  padding-top: 3cqw;
  border-top: 1px solid rgba(243, 237, 251, 0.25);
  display: flex;
  gap: 2.4cqw;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 1.7cqw;
  letter-spacing: 0.02em;
  color: var(--on-brand-soft);
}
.title-meta b { color: #fff; font-weight: 500; }

/* Two big numbers ("the gap") -------------------------------------- */
.statline { display: flex; align-items: flex-start; gap: 7cqw; margin-top: 1cqw; }
.statline__item { display: flex; flex-direction: column; }
.bignum { font-weight: 300; font-size: 15cqw; line-height: 0.9; letter-spacing: -0.05em; }
.bignum--brand { color: var(--brand); }
.bignum--muted { color: var(--soft); }
.bignum .pct { font-size: 7cqw; letter-spacing: -0.02em; }
.bignum__label { font-size: 1.9cqw; font-weight: 400; color: var(--muted); margin-top: 1.5cqw; max-width: 26cqw; line-height: 1.3; }
.bignum--brand + .bignum__label, .statline__item .bignum__label { }

/* Bars / simple data viz ------------------------------------------- */
.viz { margin-top: 5cqw; }
.bar-row { display: flex; align-items: center; gap: 2cqw; margin-bottom: 2.4cqw; }
.bar-row__label { width: 26cqw; font-size: 1.9cqw; color: var(--muted); text-align: right; line-height: 1.2; }
.bar-track { flex: 1; height: 3.4cqw; background: var(--rule); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--brand); }
.bar-fill--soft { background: var(--soft); }
.bar-row__val { width: 9cqw; font-size: 2.1cqw; font-variant-numeric: tabular-nums; color: var(--text); }

/* List of principles ----------------------------------------------- */
.plist { list-style: none; margin: 4cqw 0 0; padding: 0; display: flex; flex-direction: column; gap: 2.6cqw; max-width: 76cqw; }
.plist li { display: flex; gap: 2.4cqw; align-items: baseline; font-weight: 300; font-size: 3.4cqw; line-height: 1.18; letter-spacing: -0.018em; }
.plist .n { font-size: 1.6cqw; font-weight: 500; color: var(--brand); letter-spacing: 0.1em; transform: translateY(-0.4cqw); width: 3cqw; flex: 0 0 3cqw; }
.plist b { font-weight: 500; }

/* Proof ventures (3-up) -------------------------------------------- */
.ventures3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6cqw; margin-top: 5cqw; max-width: 56cqw; align-self: center; }
.v3 { border-top: 1px solid var(--rule); padding-top: 2.4cqw; }
.v3__logobar { height: 6cqw; display: flex; align-items: center; margin-bottom: 1.9cqw; }
.v3__logo { width: 6cqw; height: 6cqw; border-radius: 1.4cqw; object-fit: cover; box-shadow: 0 1px 5px rgba(26,26,28,0.14); }
.v3__logo--wide { width: auto; height: 5cqw; max-width: 100%; border-radius: 0; box-shadow: none; object-fit: contain; }

/* Emu case-study before/after rows -------------------------------- */
.emu { display: flex; flex-direction: column; gap: 1.3cqw; margin-top: 2.4cqw; }
.emu__row { display: flex; align-items: baseline; gap: 3cqw; }
.emu__now { font-size: 6.1cqw; font-weight: 300; letter-spacing: -0.04em; color: var(--brand); line-height: 0.85; width: 20cqw; flex: 0 0 20cqw; }
.emu__more { margin-top: 1.8cqw; max-width: 90cqw; font-size: 1.8cqw; font-weight: 400; line-height: 1.3; color: var(--brand); letter-spacing: -0.005em; }
.emu__label { font-size: 2.5cqw; font-weight: 300; letter-spacing: -0.01em; color: var(--text); line-height: 1.15; }
.emu__was { font-size: 1.7cqw; color: var(--soft); margin-top: 0.5cqw; }

/* Emu Money wordmark on the case-study slide (white on violet). */
.emu-brand { display: block; width: 23cqw; height: auto; margin: -0.8cqw 0 3cqw; }
.v3__name { font-size: 2.6cqw; font-weight: 500; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.v3__desc { font-size: 1.7cqw; color: var(--muted); margin-top: 1.1cqw; line-height: 1.3; min-height: 4.6cqw; }
.v3__tag { font-size: 1.4cqw; color: var(--brand); margin-top: 1.4cqw; letter-spacing: 0.02em; }

/* Two-column contrast (bolt-on vs redesign) ------------------------ */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; margin-top: 3cqw; }
.col h3 { font-size: 1.5cqw; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); margin: 0 0 2.5cqw; font-weight: 500; }
.col p { font-weight: 300; font-size: 2.85cqw; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.col--bad h3 { color: var(--soft); }
.col--good h3 { color: var(--brand); }

/* Progress + slide number ------------------------------------------ */
.slide__no {
  position: absolute;
  top: 5cqw; right: 9cqw;
  font-size: 1.35cqw;
  letter-spacing: 0.1em;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.slide--brand .slide__no, .slide--deep .slide__no, .slide--ink .slide__no { color: var(--on-brand-soft); }

/* Notes (presenter) ------------------------------------------------- */
.notes {
  width: min(96vw, 1280px);
  margin-top: -16px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  display: none;
}
.notes b { color: var(--text); font-weight: 600; }
body.show-notes .notes { display: block; }

.hud {
  position: fixed;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(19,19,22,0.9); color: #fff;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 7px 14px; border-radius: 999px;
  display: flex; gap: 14px; align-items: center;
  z-index: 50;
}
.hud kbd { background: rgba(255,255,255,0.16); border-radius: 4px; padding: 1px 6px; font-family: inherit; }
.hud a { color: #fff; }
.hud__dl { text-decoration: none; background: rgba(255,255,255,0.16); padding: 3px 11px; border-radius: 999px; transition: background 0.15s ease; }
.hud__dl:hover { background: rgba(255,255,255,0.30); }
/* Presenting fullscreen: drop the shortcut bar so it stays off the projector. */
body.is-fullscreen .hud { display: none; }

/* ============ "Taking advantage of our unknown future" talk ============
   Faithful re-theme of a 2016/17 CPA talk. Verbatim copy, Skella shell. */
.slide--say .slide__pad { align-items: center; justify-content: center; text-align: center; }
.say { font-weight: 300; font-size: 5.6cqw; line-height: 1.14; letter-spacing: -0.03em; color: var(--brand); max-width: 84cqw; margin: 0; }
.say--grey { color: var(--muted); }
.say--strong { color: var(--text); font-weight: 500; }

.uf-title { font-weight: 300; font-size: 7.4cqw; line-height: 1.04; letter-spacing: -0.03em; color: var(--brand); margin: 0; text-align: center; }
.uf-meta { margin-top: 6cqw; display: flex; flex-direction: column; gap: 0.5cqw; font-size: 1.5cqw; letter-spacing: 0.06em; color: var(--muted); text-align: center; }
.uf-meta b { color: var(--text); font-weight: 500; }

.uf-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2cqw; }
.uf-agenda li { display: flex; gap: 2.2cqw; align-items: baseline; font-weight: 300; font-size: 4.2cqw; letter-spacing: -0.02em; color: var(--text); }
.uf-agenda .n { font-size: 2.3cqw; font-weight: 400; color: var(--brand); width: 3.6cqw; flex: 0 0 3.6cqw; }

.efx__h { font-size: 3.4cqw; font-weight: 600; color: var(--text); margin: 0 0 2.2cqw; text-align: center; }
.efx { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1cqw; align-self: center; }
.efx li { font-size: 3cqw; font-weight: 300; color: var(--muted); letter-spacing: -0.01em; position: relative; padding-left: 3cqw; }
.efx li::before { content: ""; position: absolute; left: 0.4cqw; top: 0.66em; width: 0.85cqw; height: 0.85cqw; background: var(--brand); border-radius: 50%; }

/* Framed chart / infographic exhibit, centred on the light slide */
.exhibit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 5cqw 7cqw 7cqw; }
.exhibit img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Full-bleed photo slides */
.slide--photo { background: #131316; }
.bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide--photo::after { color: rgba(255,255,255,0.9); }
.bleed-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bleed-title span { color: #fff; font-weight: 400; font-size: 6cqw; letter-spacing: 0.34em; padding-left: 0.34em; }

/* -------------------------------------------------------------------
   Print → PDF. Each slide becomes exactly one 1280×720 landscape page.
   ------------------------------------------------------------------- */
@page { size: 1280px 720px; margin: 0; }

@media print {
  body { background: #fff; }
  .deck { display: block; padding: 0; gap: 0; }
  .hud, .notes { display: none !important; }
  .slide {
    width: 1280px;
    height: 720px;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}


/* Dark (ink) variant overrides for text slides */
.slide--ink .say { color: #fff; }
.slide--ink .say--grey { color: #A8A8B0; }
.slide--ink .uf-agenda li, .slide--ink .efx__h { color: #fff; }
.slide--ink .efx li { color: rgba(255,255,255,0.82); }
.slide--ink .statement { color: #fff; }
.slide--ink .statement .attr { color: #8A8A93; }
.say .attr { display:block; font-size:0.42em; color: var(--soft); margin-top: 1.6cqw; letter-spacing:0; font-weight:400; }


/* -------------------------------------------------------------------
   Print → PDF. Each slide becomes exactly one 1280×720 landscape page.
   ------------------------------------------------------------------- */
@page { size: 1280px 720px; margin: 0; }

@media print {
  body { background: #fff; }
  .deck { display: block; padding: 0; gap: 0; }
  .hud, .notes { display: none !important; }
  .slide {
    width: 1280px;
    height: 720px;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}

/* Ink title/meta overrides (productivity deck) */
.slide--ink .uf-title { color: #fff; }
.slide--ink .uf-meta { color: #8A8A93; }
.slide--ink .uf-meta b { color: #fff; }