/* ── Shared deck styles — presentation project ──
   Typography aligned to jaim.es DESIGN.md:
   Scale: Major Third (1.250), rem-based
   Display: Name Sans Variable (100–900)
   Body: Guggenheim Sans (400, 500, 700)
   Mono: SF Mono
*/

@font-face {
  font-family: 'Perpetua Titling';
  src: url('Perpetua-Titling-Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Perpetua Titling';
  src: url('Perpetua-Titling-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Perpetua Titling';
  src: url('Perpetua-Titling-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Perpetua';
  src: url('Perpetua-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Perpetua';
  src: url('Perpetua-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Perpetua';
  src: url('Perpetua-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Perpetua';
  src: url('Perpetua-Bold-Italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Guggenheim Sans';
  src: url('GuggenheimSans-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Guggenheim Sans';
  src: url('GuggenheimSans-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Guggenheim Sans';
  src: url('GuggenheimSans-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* Factory Design tokens — single source of truth lives in studio/design/tokens.css.
   Duplicated below so deck.css stays portable (no cross-project @import chain). */

:root {

  /* ── Gray ramp ── */
  --fd-gray-50:  #F7F7F3;
  --fd-gray-100: #EEEEE7;   /* paper · base */
  --fd-gray-200: #E0E0D8;
  --fd-gray-300: #C9C9BF;
  --fd-gray-400: #B0B0A6;
  --fd-gray-500: #999999;
  --fd-gray-600: #77776F;
  --fd-gray-700: #55554F;
  --fd-gray-800: #333330;
  --fd-gray-900: #1A1A1A;

  /* ── Green · lime · 500 = gtrain G ── */
  --fd-green-50:  #F6FCE8;
  --fd-green-100: #EFFAD6;
  --fd-green-200: #DCF3AC;
  --fd-green-300: #BFE778;
  --fd-green-400: #93D247;
  --fd-green-500: #6CBE45;
  --fd-green-600: #549A33;
  --fd-green-700: #3E7526;
  --fd-green-800: #2A531C;
  --fd-green-900: #173010;

  /* ── Blue · sky · 500 = fora blue ── */
  --fd-blue-50:  #F4FAFF;
  --fd-blue-100: #E0F4FF;
  --fd-blue-200: #C2E3FA;
  --fd-blue-300: #92C6F2;
  --fd-blue-400: #5A9DE4;
  --fd-blue-500: #3B70D4;
  --fd-blue-600: #2E58A6;
  --fd-blue-700: #214076;
  --fd-blue-800: #162B4F;
  --fd-blue-900: #0D1830;

  /* ── Yellow · sun · 500 = factory tag ── */
  --fd-yellow-50:  #FEFBEA;
  --fd-yellow-100: #FDF5D7;
  --fd-yellow-200: #FBE8A0;
  --fd-yellow-300: #F8D666;
  --fd-yellow-400: #F7C928;
  --fd-yellow-500: #F6C600;
  --fd-yellow-600: #C29C04;
  --fd-yellow-700: #8F7209;
  --fd-yellow-800: #5D4A08;
  --fd-yellow-900: #322705;

  /* ── Orange · warm ── */
  --fd-orange-50:  #FEF5F0;
  --fd-orange-100: #FCE5D6;
  --fd-orange-200: #F8C7A6;
  --fd-orange-300: #F1A070;
  --fd-orange-400: #EA7D45;
  --fd-orange-500: #E05526;
  --fd-orange-600: #B6401C;
  --fd-orange-700: #8A2F15;
  --fd-orange-800: #5A1E0C;
  --fd-orange-900: #2F0F05;

  /* ── Red ── */
  --fd-red-50:  #FDF3EF;
  --fd-red-100: #F7DDD2;
  --fd-red-200: #EFB59E;
  --fd-red-300: #E28A67;
  --fd-red-400: #D66848;
  --fd-red-500: #D25630;
  --fd-red-600: #A53E1F;
  --fd-red-700: #7A2C13;
  --fd-red-800: #4F1A0A;
  --fd-red-900: #2B0D04;

  /* ── Navy · deep blue ── */
  --fd-navy-50:  #F3F6FB;
  --fd-navy-100: #E5EBF5;
  --fd-navy-200: #B5C1DE;
  --fd-navy-300: #8196C8;
  --fd-navy-400: #516DB0;
  --fd-navy-500: #2E4CA5;
  --fd-navy-600: #223A85;
  --fd-navy-700: #1B2E67;
  --fd-navy-800: #132247;
  --fd-navy-900: #0A1430;

  /* ── Semantic aliases ── */
  --fd-paper:       var(--fd-gray-100);
  --fd-surface:     var(--fd-gray-50);
  --fd-card:        #FFFFFF;
  --fd-border:      var(--fd-gray-200);
  --fd-border-soft: #E0E0D8;

  --fd-ink:        #0F0E12;
  --fd-ink-body:   var(--fd-gray-900);
  --fd-ink-meta:   var(--fd-gray-600);
  --fd-ink-ghost:  var(--fd-gray-400);
  --fd-label:      #ADA8A0;
  --fd-sub:        #7E7C79;

  --fd-accent:     #E05526;
  --fd-highlight:  var(--fd-yellow-100);
  --fd-cool:       var(--fd-blue-100);
  --fd-live:       var(--fd-green-100);
  --fd-danger:     #C62828;
  --fd-endpoint:   var(--fd-surface);

  --fd-stroke:     0.5px solid var(--fd-ink);
  --fd-radius:     2px;
  --fd-radius-r:   1.5px;

  --fd-label-size:  0.8125rem;  /* 13px — --ps-label */
  --fd-label-track: 0.14em;
  --fd-body-size:   1.125rem;   /* 18px — --ps-body */
  --fd-body-track:  -0.015em;
  --fd-sub-size:    0.9375rem;  /* 15px — --ps-caption */
  --fd-mono-size:   0.875rem;   /* 14px — mono stays at 14px */

  --fd-serif: 'Perpetua Titling', 'Georgia', serif;
  --fd-sans:  'Guggenheim Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fd-mono:  'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;

  /* Legacy slide aliases (keep existing slides working) */
  --slide-bg:      var(--fd-paper);
  --ink:           var(--fd-ink-body);
  --ink-secondary: var(--fd-gray-700);
  --ink-muted:     var(--fd-gray-500);
  --accent:        var(--fd-accent);
  --lev-green:     #1b2e67;
  --jasper-red:    #8B1A1A;
  --divider:       var(--fd-border);

  --font-display: var(--fd-serif);
  --font-body:    var(--fd-sans);
  --font-mono:    var(--fd-mono);
  --font-serif:   var(--fd-serif);

  /* ──────────────────────────────────────────────
     Presentation type scale · Minor Third (1.2×)
     Root html = 16px · rem-based
     Anchored at body = 1.125rem (18px)
     Optimized for web presentation at 3-10 ft.
     ────────────────────────────────────────────── */

  --ps-micro:    0.8125rem;    /*  13px — meta, pagination      */
  --ps-label:    0.9375rem;    /*  15px — uppercase overlines   */
  --ps-caption:  1.125rem;     /*  18px — captions, small body  */
  --ps-body:     1.375rem;     /*  22px — DEFAULT body  ← anchor*/
  --ps-lead:     1.625rem;     /*  26px — lead, subtitle        */
  --ps-title:    2rem;         /*  32px — slide title           */
  --ps-head:     2.5rem;       /*  40px — heading variant       */

  /* Fluid display sizes — scale with viewport width */
  --ps-section:  clamp(2.75rem, 4.5vw, 3.5rem);    /* 44→56 */
  --ps-hero:     clamp(3.5rem, 6vw, 4.5rem);       /* 56→72 */
  --ps-mega:     clamp(4.5rem, 8vw, 6rem);         /* 72→96 */

  /* Legacy --text-* aliases — map to new tokens */
  --text-xs:   var(--ps-micro);     /* 12px */
  --text-sm:   var(--ps-label);     /* 13px */
  --text-base: var(--ps-body);      /* 18px */
  --text-ms:   var(--ps-lead);      /* 22px */
  --text-lg:   var(--ps-lead);      /* 22px */
  --text-xl:   var(--ps-title);     /* 28px */
  --text-2xl:  var(--ps-section);   /* fluid 36-48 */
  --text-3xl:  var(--ps-hero);      /* fluid 48-64 */
  --text-4xl:  var(--ps-mega);      /* fluid 60-88 */

  /* Line heights (Bringhurst / iA presentation standards) */
  --ps-lh-display: 1.05;   /* mega, hero        */
  --ps-lh-heading: 1.15;   /* title, head       */
  --ps-lh-body:    1.5;    /* body paragraphs   */
  --ps-lh-caption: 1.4;    /* small body/cards  */

  --lh-tight:   var(--ps-lh-heading);
  --lh-snug:    var(--ps-lh-caption);
  --lh-body:    var(--ps-lh-body);

  /* Letter spacing */
  --ps-track-display: 0.02em;    /* serif mega/hero */
  --ps-track-heading: -0.015em;  /* sans heading    */
  --ps-track-body:    -0.015em;  /* body            */
  --ps-track-label:   0.14em;    /* uppercase labels*/
  --ps-track-micro:   0.22em;    /* uppercase micro */

  --ls-heading: var(--ps-track-heading);
  --ls-caps:    var(--ps-track-label);

}

/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Weight policy: headers at 400 (new house style) ── */
h1, h2, h3, h4, h5, h6,
.mega, .h-mega, .h-section, .h-title, .h-subtitle { font-weight: 400 !important; }

/* ── Perpetua Titling reserved for the title cover + dark section separators only ── */
.t-split h1, .s.dark h1 {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
}
html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Deck structure ── */
.deck { position: relative; width: 100vw; height: 100vh; }

.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  z-index: 0;
}
.slide.active { opacity: 1; pointer-events: auto; z-index: 1; }

/* ── Slide inner ── */
.s {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  background: var(--slide-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* PNG overlay — hides HTML when Figma export exists */
.s[data-bg] {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.s[data-bg] > * { display: none; }

/* ── Layout helpers ── */
.pad { padding: 5.2%; }

/* Layout anchors — consistent rhythm across the deck.
   .vcenter = covers, titles, section dividers (absolute center)
   .v3      = top / middle / bottom flex layout:
              - Top-anchored children stack at top
              - Mark the flexible child with .v3-fill (flex:1, centers content)
              - Bottom-anchored children stack at bottom
              Works with any number of siblings around the fill child.        */
.vcenter { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 5vh 5.2%;
  gap: 1.5rem;
  box-sizing: border-box;
}
.v3 > * { width: 100%; max-width: 100%; flex-shrink: 0; box-sizing: border-box; text-align: center; }
.v3 > .v3-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-direction stays default (row) — each slide's inline
     display (flex/grid) and direction control its own layout. */
}

.split { display: flex; height: 100%; }
.split-left { width: 50%; display: flex; align-items: center; justify-content: center; }
.split-right { width: 50%; display: flex; align-items: center; padding: 0 5%; }
.divider-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--divider); }

/* ── Typography ── */

/* Display — large hero/title. Defaults to Guggenheim Sans; the scoped
   Perpetua Titling rule above restores serif on key slides only. */
.h-mega, .mega {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(4rem, 7.5vw, 6rem);   /* 64 → 96 px */
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* Section — case study section dividers */
.h-section {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--text-xl), 5.5vw, var(--text-3xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

/* Title — slide headings. Weight 300 (Lev) or 600 (Jasper) — set per-deck */
.h-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--text-lg), 3.5vw, var(--text-xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

/* Subtitle — secondary headings. Body font, medium weight */
.h-subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(var(--text-sm), 2vw, var(--text-base));
  line-height: var(--lh-snug);
}

/* Body sizes — fixed rem, not fluid */
.body-lg {
  font-size: var(--text-ms);
  line-height: var(--lh-body);
}
.body {
  font-size: var(--text-base);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--text-sm);  /* 32px */
  line-height: 1.5;
}

/* Caption — mono, uppercase, xs */
.caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);   /* 24px */
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Stat numbers — display font, weight 600 */
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
  line-height: 1;
  letter-spacing: var(--ls-heading);
  font-feature-settings: 'tnum' 1;
}

/* ── Color helpers ── */
.text-light { color: var(--ink-secondary); }
.text-accent { color: var(--accent); }
.text-white { color: #fff; }

/* ── Accent line ── */
.accent-line {
  width: clamp(7.5rem, 14%, 16.75rem);
  height: 3px;
  background: var(--accent);
}

/* ── Lists ── */
.bullet-list { list-style: disc; padding-left: 1.5em; }
.bullet-list li { margin-bottom: 0.8em; }
.bullet-list-lg {
  font-size: var(--text-base);
  line-height: var(--lh-snug);
}
.bullet-list-lg li { margin-bottom: 1em; }

/* ── Section slide ── */
.section-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 5.2%;
}
.section-project {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: 1em;
}

/* ── Stat blocks ── */
.stat-grid { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 2.5rem); }
.stat-item .stat-label {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  margin-top: 0.25em;
  line-height: 1.4;
}

/* ── Dark slides ── */
.dark { background: var(--lev-green); color: #fff; }
.dark .caption { color: rgba(255, 255, 255, 0.45); }
.dark .text-light { color: rgba(255, 255, 255, 0.6); }

/* ── Process steps ── */
.process-steps { display: flex; gap: clamp(0.5rem, 1.5vw, 1.5rem); align-items: flex-start; }
.process-step { flex: 1; text-align: center; }
.step-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: var(--ls-caps);
  margin-bottom: 0.5em;
}
.step-arrow {
  color: var(--ink-muted);
  font-size: var(--text-ms);
  padding-top: 0.3em;
  flex-shrink: 0;
}

/* ── Two column text ── */
.two-col-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3.75rem); }

/* ── Feature card ── */
.feature-card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(1rem, 1.5vw, 1.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* ── Feature grid ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

/* ── Highlight box ── */
.highlight-box {
  border-left: 3px solid var(--accent);
  padding-left: 1em;
}

/* ── Headshot ── */
.headshot { border-radius: 50%; overflow: hidden; background: #000; aspect-ratio: 1; }
.headshot img { width: 100%; height: 100%; object-fit: cover; }

/* ── Navigation ── */
.progress {
  position: fixed; bottom: 0; left: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

.slide-number {
  position: fixed; bottom: 1rem; right: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-feature-settings: 'tnum' 1;
  color: rgba(255, 255, 255, 0.3);
  z-index: 100;
  mix-blend-mode: difference;
}


/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .progress { transition: none; }
  .back-btn { transition: none; }
}

/* ──────────────────────────────────────────────
   Migrated from lev.css — shared infrastructure
   ────────────────────────────────────────────── */

/* Fluid root font-size — anchors rem scale to viewport */
html { font-size: min(0.833vw, 1.481vh); }

/* Section-divider template */
.t-section {
  display: flex; flex-direction: column;
  justify-content: center;
  height: 100%; padding: 5.2%;
}

/* Split layout */
.t-split { height: 100%; }
.text-side {
  width: 50%; display: flex; flex-direction: column;
  justify-content: center; padding: 0 5.2%;
}
.text-side .body-lg { margin-top: 0.5em; }
.visual-side {
  width: 50%; display: flex;
  align-items: center; justify-content: center;
  padding: 0 5%;
}
.visual-side--padded { padding: 1rem; position: relative; }
.visual-side--top-pad { padding: 48px 0 0 0; position: relative; overflow: visible; }

/* Image fit helpers */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0.5rem; }
.img-contain { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-overflow { width: 125%; display: block; margin-left: 40%; }

/* Full-bleed splash */
.splash {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Section bar (disco-ball corner badge) */
.section-bar {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
  z-index: 10;
}
.section-bar .disco-ball { width: 28px; height: 28px; }

/* Bullet list opacity transition (used by step-through) */
.bullet-list > li { transition: opacity 0.4s ease; margin-bottom: 1.2em; }
.bullet-list > li:last-child { margin-bottom: 0; }

/* Chaotic layered images */
.chaos-stack {
  position: relative; width: 100%; flex: 1; min-height: 0;
  display: grid; place-items: center;
}
.chaos-stack img {
  grid-area: 1/1;
  width: 90%; height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  animation: chaosIn 0.3s ease forwards;
}
.chaos-stack img:nth-child(1) { transform: rotate(-2deg) translate(-5%, -5%); animation-delay: 0.2s; }
.chaos-stack img:nth-child(2) { transform: rotate(1.5deg) translate(15%, 5%); animation-delay: 0.5s; }
.chaos-stack img:nth-child(3) { transform: rotate(-1deg) translate(0%, 15%); animation-delay: 0.8s; }
@keyframes chaosIn {
  0%   { opacity: 0; scale: 0.96; }
  100% { opacity: 1; scale: 1; }
}

/* Crossfade slideshow */
.crossfade {
  position: relative; width: 100%; height: 100%; overflow: hidden;
}
.crossfade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: crossfade 4.5s ease-in-out infinite;
}
.crossfade img:nth-child(2) { animation-delay: 1.5s; }
.crossfade img:nth-child(3) { animation-delay: 3s; }
@keyframes crossfade {
  0%       { opacity: 0; }
  11%, 33% { opacity: 1; }
  44%, 100%{ opacity: 0; }
}

/* Scroll strip (vertical slow scroll) */
.scroll-container {
  position: absolute; inset: 0; overflow: hidden;
}
.scroll-container img {
  width: 100%; display: block;
  animation: scrollImg 14s 1s ease-in-out infinite;
}
@keyframes scrollImg {
  0%, 10%   { transform: translateY(30%); }
  45%, 55%  { transform: translateY(-30%); }
  90%, 100% { transform: translateY(30%); }
}

/* Pause animations on inactive slides */
.slide:not(.active) .scroll-container img,
.slide:not(.active) .crossfade img,
.slide:not(.active) .chaos-stack img { animation-play-state: paused; }

/* View transitions */
.slide.active .vt-headshot { view-transition-name: headshot; }
.slide.active .vt-disco { view-transition-name: jf-disco; }
::view-transition-old(headshot),
::view-transition-new(headshot),
::view-transition-old(jf-disco),
::view-transition-new(jf-disco) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide badge (corner number) */
.slide-badge {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.35);
  z-index: 100;
  mix-blend-mode: difference;
}

/* Image / media placeholders (edit mode) */
.img-ph {
  background: linear-gradient(135deg, rgba(22,22,29,0.04), rgba(22,22,29,0.1));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-family: var(--font-mono);
  font-size: var(--text-xs); min-height: 200px;
}
.dark .img-ph { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); }
.media-ph {
  width: 100%; min-height: 60%;
  border-radius: 12px; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-muted);
}
.visual-side .img-ph { width: 100%; min-height: 60%; }

/* Slide navigator overlay */
.slide-nav {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.9);
  overflow-y: auto; padding: 2rem;
}
.slide-nav.open { display: block; }
.slide-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; max-width: 1400px; margin: 0 auto;
}
.slide-nav-item {
  cursor: pointer; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent;
  position: relative; background: #fff;
}
.slide-nav-item:hover { border-color: var(--accent); }
.slide-nav-item.is-current { border-color: var(--accent); }
.slide-nav-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.7); color: #fff;
  font: 500 11px/1.4 var(--font-body); padding: 4px 8px;
}

/* Edit mode banner + outlines */
.edit-banner {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  z-index: 9998; background: var(--accent); color: #fff;
  font: 500 13px/1 var(--font-body);
  padding: 6px 16px; text-align: center;
}
.edit-mode .edit-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.edit-banner button {
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  font: 500 12px/1 var(--font-body); padding: 4px 10px;
  border-radius: 4px; cursor: pointer;
}
.edit-banner button:hover { background: rgba(255,255,255,0.35); }

@media (prefers-reduced-motion: reduce) {
  .slide:not(.active) .s > *,
  .slide:not(.active) .text-side > *,
  .slide:not(.active) .visual-side > * {
    opacity: 1;
  }
}