/* deck.css — scrollable, fluid layout for the v5 decks.
   Pairs with design_system/colors_and_type.css (must be loaded first).
   Each <section class="slide"> becomes a full-width chapter stacked vertically. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { background: var(--blend-cream); color: var(--blend-ink); font-family: var(--font-body); margin: 0; }

/* Wrappers — passthrough now, no fixed canvas */
.stage { display: block; width: 100%; }
.canvas { display: block; width: 100%; }

/* Each "slide" is a full-bleed section in document flow. */
.slide {
  position: relative;
  width: 100%;
  min-height: auto;
  padding: clamp(60px, 7vh, 96px) 0 clamp(60px, 7vh, 96px);
  background: var(--blend-cream);
  color: var(--blend-ink);
  font-family: var(--font-body);
  overflow: hidden;
  display: block;
}

/* Section variants — full-bleed backgrounds (all light). The "dark"
   variant is intentionally kept as a class name (existing HTML still
   uses it) but renders as a warm honey wash so it stays distinct from
   plain cream while keeping text dark and readable. */
.slide.dark    { background: #FBF3D8; color: var(--blend-ink) !important; border-top: 6px solid var(--blend-ink); }
.slide.yellow  { background: var(--blend-yellow); color: var(--blend-ink); }
.slide.cream-2 { background: var(--blend-cream-2); }
.slide.pink-bg { background: #FCE4E9; color: var(--blend-ink); }
/* Belt-and-braces: top-level text inside a former-dark slide defaults to ink.
   Cards (.card.orange/.blue/.green) and explicit-bg inline blocks keep their
   own colors via inline style + the .card !important rules above. */
.slide.dark { color: var(--blend-ink); }
.slide.dark > .inner > .eyebrow,
.slide.dark > .inner > h1,
.slide.dark > .inner > h2,
.slide.dark > .inner > h3 { color: var(--blend-ink) !important; }
/* On slide.dark, cream cards switch to pure white so they pop visibly
   against the honey-wash background and the text stays high-contrast. */
.slide.dark .card.cream { background: #FFFFFF !important; color: var(--blend-ink) !important; }

/* Top rainbow stripe — sits at top of every slide */
.stripe { position: absolute; left: 0; right: 0; top: 0; height: 8px; display: flex; z-index: 2; }
.stripe span { flex: 1; }
.stripe span:nth-child(1) { background: var(--blend-blue); }
.stripe span:nth-child(2) { background: var(--blend-yellow); }
.stripe span:nth-child(3) { background: var(--blend-pink); }
.stripe span:nth-child(4) { background: var(--blend-green); }
.stripe span:nth-child(5) { background: var(--blend-orange); }

/* Content container — caps width, centers content */
.inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 5vh, 70px) clamp(20px, 5vw, 64px) 0;
  height: auto;
}

/* Footer — chapter label + page index */
.foot {
  position: relative;
  max-width: 1280px;
  margin: clamp(40px, 5vh, 64px) auto 0;
  padding: 24px clamp(20px, 5vw, 64px) 0;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg3); letter-spacing: 0.08em;
  border-top: 1px dashed rgba(45,45,45,0.18);
}
.foot img { height: 18px; display: block; }
.foot .deck-name { flex: 1; text-align: center; opacity: 0.65; }
.slide.dark .foot { color: var(--fg3); border-top-color: rgba(45,45,45,0.18); }
.slide.dark .foot .deck-name { color: var(--fg3); }

/* Typography — fluid sizing via clamp.  !important so inline overrides
   on individual slides still cap nicely on smaller viewports. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blend-orange); margin-bottom: 14px;
}
.slide.dark .eyebrow { color: var(--blend-orange); }

h1.title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6.2vw, 78px) !important;
  line-height: 1.0; letter-spacing: -0.022em;
  margin: 0; color: var(--blend-ink); text-wrap: balance;
}
h2.title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 52px) !important;
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 28px; color: var(--blend-ink); text-wrap: balance;
}
h3.title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  line-height: 1.1; margin: 0;
}
.slide.dark h1.title, .slide.dark h2.title { color: var(--blend-ink); }
.slide.dark .display-mega { color: var(--blend-ink); }
.subtitle {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.5; margin-top: 18px;
  color: var(--blend-ink-2); max-width: 800px;
}
.slide.dark .subtitle { color: var(--blend-ink-2); }

/* Hard-shadow card vocabulary — explicit colors on every variant
   so text remains readable regardless of which slide bg they sit on. */
.card {
  background: #fff; border: 2px solid var(--blend-ink); border-radius: 18px;
  padding: clamp(16px, 1.8vw, 24px); box-shadow: var(--shadow-hard);
  display: flex; flex-direction: column; gap: 12px;
  color: var(--blend-ink) !important;
}
.card.cream  { background: var(--blend-cream)   !important; color: var(--blend-ink)   !important; }
.card.cream-2{ background: var(--blend-cream-2) !important; color: var(--blend-ink)   !important; }
.card.yellow { background: var(--blend-yellow)  !important; color: var(--blend-ink)   !important; }
.card.pink   { background: var(--blend-pink)    !important; color: var(--blend-ink)   !important; }
.card.orange { background: var(--blend-orange)  !important; color: var(--blend-cream) !important; }
.card.blue   { background: var(--blend-blue)    !important; color: var(--blend-cream) !important; }
.card.green  { background: var(--blend-green)   !important; color: var(--blend-cream) !important; }
/* Children inherit the card color unless explicitly overridden with inline style */
.card h4 { color: inherit; }
.card p  { color: inherit; }
.card .label { color: inherit; opacity: 0.72; }
.card .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.card .stat { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 0.95; letter-spacing: -0.02em; }
.card .stat-sm { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.5vw, 36px); line-height: 1; }
.card h4 { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.1; margin: 0; }
.card p { font-family: var(--font-body); font-size: clamp(12.5px, 1.1vw, 14.5px); line-height: 1.5; margin: 0; }
.card.tight { padding: clamp(14px, 1.4vw, 20px); gap: 8px; border-radius: 14px; box-shadow: var(--shadow-hard-sm); }

/* Signature underline */
.underline {
  background-image: url('design_system/assets/vector-underline.svg');
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.35em;
  padding-bottom: 0.12em;
}

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: #fff; border: 2px solid var(--blend-green); color: var(--blend-green); font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.pill.blue { border-color: var(--blend-blue); color: var(--blend-blue); }
.pill.orange { border-color: var(--blend-orange); color: var(--blend-orange); }
.pill.ink { border-color: var(--blend-ink); color: var(--blend-ink); }

/* Hand caption */
.hand { font-family: var(--font-hand); font-weight: 700; color: var(--blend-orange); font-size: clamp(20px, 2vw, 26px); transform: rotate(-3deg); display: inline-block; }

/* Grid helpers — responsive */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

@media (max-width: 1024px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; gap: 14px; }
}

/* Decorative shapes — sit absolute within each slide */
.shape { position: absolute; pointer-events: none; }
@media (max-width: 720px) { .slide .shape { display: none; } }

/* Top-right home button — stays fixed */
.home-btn {
  position: fixed; top: 16px; right: 16px;
  background: var(--blend-yellow); color: var(--blend-ink);
  border: 2px solid var(--blend-ink); border-radius: 999px;
  padding: 8px 16px; box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-decoration: none; z-index: 100;
  transition: transform 120ms cubic-bezier(0.22,1,0.36,1), box-shadow 120ms cubic-bezier(0.22,1,0.36,1);
}
.home-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--blend-ink); }

/* Top-progress bar (added by deck.js) — shows how far through the deck */
.deck-progress {
  position: fixed; top: 8px; left: 0; right: 0; height: 3px; z-index: 99;
  background: rgba(45,45,45,0.06); pointer-events: none;
}
.deck-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--blend-orange);
  transition: width 80ms linear;
}

/* Chapter dot rail (added by deck.js) — right edge */
.chapter-rail {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 50;
}
.chapter-rail a {
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: 2px solid var(--blend-ink);
  transition: background 140ms ease;
}
.chapter-rail a.active { background: var(--blend-orange); border-color: var(--blend-orange); }
.chapter-rail a:hover { background: var(--blend-ink); }
@media (max-width: 720px) { .chapter-rail { display: none; } }

/* Hide any old nav overlay if HTML still references it */
.nav-overlay { display: none !important; }

/* =========================================================
   Responsive overrides for inline grid-template-columns
   inside slides — the bigger multi-column layouts collapse
   on narrow viewports so content stays readable. The small
   icon-row patterns (38px 1fr, 44px 1fr, etc.) are excluded.
   ========================================================= */

@media (max-width: 1100px) {
  /* 5-up grids collapse to 3 cols */
  .slide [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  /* 4-up grids -> 2 cols handled by .grid-4 helper, but inline 7-col diagram strips collapse too */
  .slide [style*="grid-template-columns: repeat(7"] {
    grid-template-columns: 1fr !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .slide [style*="grid-template-columns: 1fr 30px 1fr 30px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  /* Two-column content grids collapse */
  .slide [style*="grid-template-columns: 380px 1fr"],
  .slide [style*="grid-template-columns: 320px 1fr"],
  .slide [style*="grid-template-columns: 200px 1fr"],
  .slide [style*="grid-template-columns: 1fr 60px 1fr"],
  .slide [style*="grid-template-columns: 1.4fr 1fr"],
  .slide [style*="grid-template-columns: 1fr 1.4fr"],
  .slide [style*="grid-template-columns: 1.05fr 1fr"],
  .slide [style*="grid-template-columns: 1.05fr 0.95fr"],
  .slide [style*="grid-template-columns: 0.95fr 1.05fr"],
  .slide [style*="grid-template-columns: 1.1fr 1fr"],
  .slide [style*="grid-template-columns: 1fr 1.1fr"],
  .slide [style*="grid-template-columns: 1fr 1.5fr"],
  .slide [style*="grid-template-columns: 1fr 2fr"],
  .slide [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  /* 5-up grids collapse further */
  .slide [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 700px) {
  /* Final collapse for narrow phones */
  .slide [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"],
  .slide [style*="grid-template-columns: 1fr 1fr 1fr"],
  .slide .grid-3, .slide .grid-4 {
    grid-template-columns: 1fr !important;
  }
  /* 1fr 1fr left as-is for paired cards/lists unless tiny */
  .slide .inner > div[style*="grid-template-columns: 1fr 1fr"]:not([style*="44px"]):not([style*="38px"]):not([style*="56px"]) {
    grid-template-columns: 1fr !important;
  }
  /* Tighter padding on phones — important to override inline */
  .slide { padding: 56px 0 !important; }
  .inner { padding: 28px 18px 0 !important; }
  .foot { padding: 20px 18px 0 !important; }
  /* Titles tighter */
  h1.title { font-size: clamp(32px, 9vw, 44px) !important; }
  h2.title { font-size: clamp(26px, 7vw, 36px) !important; }
}

/* Print: each slide is one page, no chrome */
@page { size: 1280px 800px; margin: 0; }
@media print {
  html, body { margin: 0; padding: 0; background: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide { min-height: auto; padding: 80px 40px; break-after: page; page-break-after: always; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .home-btn, .deck-progress, .chapter-rail { display: none !important; }
}