/* ═══════════════════════════════════════════════════════════
   REMEMBR · MRP Thesis Defense
   Editorial presentation system. Atkinson Hyperlegible only.
   ═══════════════════════════════════════════════════════════ */

/* ── Typeface, self-hosted so the deck runs with no network ── */
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/AtkinsonHyperlegible-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('../fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}

/* ── Tokens ───────────────────────────────────────────────── */
:root{
  --white:#FFFFFF;
  --ink:#1D1D1F;
  --muted:#5B5B60;
  --muted-2:#A8A8AE;
  --line:#E4E4E9;
  --black:#000000;
  --dark-line:#2C2C2E;
  --teal:#156987;
  --teal-l:#5FC0E6;
  --sig-grad:linear-gradient(135deg,#5FC0E6 0%,#2E90B8 100%);

  /* --ease is deliberately front-loaded: it makes the slide push feel
     snappy. It is the wrong curve for an entrance, because it completes
     ~99% of its travel in the first quarter of its duration, so the
     motion is over before the eye registers it. Entrances use
     --ease-soft, which stays in motion across most of the duration. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,.32,1);
  --t-slide:520ms;
  --stagger:115ms;

  /* Fluid scale. Deliberately three clear levels, nothing between. */
  --fs-kicker:clamp(.66rem,.52rem + .32vw,.82rem);
  --fs-label:clamp(.62rem,.5rem + .28vw,.76rem);
  --fs-body:clamp(.95rem,.84rem + .36vw,1.18rem);
  --fs-body-lg:clamp(1.05rem,.9rem + .58vw,1.44rem);
  --fs-h3:clamp(1.05rem,.92rem + .5vw,1.42rem);
  --fs-h1:clamp(1.9rem,1.25rem + 2.6vw,4.1rem);
  --fs-display:clamp(2.2rem,1.3rem + 3.9vw,5.6rem);
  --fs-wordmark:clamp(3.4rem,1.5rem + 9vw,11rem);
  --fs-chapter:clamp(6rem,3rem + 17vw,22rem);

  --pad-x:clamp(1.35rem,5.2vw,7.5rem);
  --pad-y:clamp(4.2rem,7.5vh,6.5rem);
  --measure:64ch;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Atkinson Hyperlegible','Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  overscroll-behavior:none;
}
h1,h2,h3,p,dl,dd,dt,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
img{max-width:100%;display:block}
em{font-style:italic}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
kbd{
  font-family:inherit;font-size:.86em;font-weight:700;
  border:1px solid currentColor;border-radius:4px;
  padding:.05em .38em;opacity:.7;line-height:1.25;
}

/* ── Focus: this deck is about accessibility, so it cannot fail it ── */
:focus-visible{
  outline:3px solid var(--teal-l);
  outline-offset:3px;
  border-radius:3px;
}
.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:200;
  padding:.7rem 1.1rem;background:var(--white);color:var(--ink);
  font-weight:700;border-radius:8px;text-decoration:none;
  transform:translateY(-160%);transition:transform 160ms var(--ease);
}
.skip-link:focus{transform:translateY(0)}
.live-region{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ═══ DECK ═════════════════════════════════════════════════ */
.deck{
  position:fixed;inset:0;
  display:block;
  isolation:isolate;
}
.deck:focus{outline:none}

.slide{
  position:absolute;inset:0;
  display:grid;
  place-items:center;
  padding:calc(var(--pad-y) + var(--safe-t)) calc(var(--pad-x) + var(--safe-r))
          calc(var(--pad-y) + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate3d(var(--enter,0),0,0);
}

/* Slide themes */
.slide[data-theme="light"]{
  --bg:var(--white);--fg:var(--ink);--dim:var(--muted);
  --rule:var(--line);--accent:var(--teal);--faint:rgba(29,29,31,.045);
  --stroke:rgba(29,29,31,.17);
}
.slide[data-theme="dark"]{
  --bg:var(--black);--fg:var(--white);--dim:var(--muted-2);
  --rule:var(--dark-line);--accent:var(--teal-l);--faint:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.2);
}

.slide{transform:translate3d(var(--enter,0),0,0) scale(var(--enter-s,1))}
.slide.is-active{
  visibility:visible;opacity:1;pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);z-index:2;
  transition:opacity 300ms var(--ease-soft),transform var(--t-slide) var(--ease-soft);
}
/* Outgoing: a depth cue plus a horizontal push */
.slide.is-leaving{
  visibility:visible;opacity:0;z-index:1;
  transform:translate3d(var(--exit,0),0,0) scale(.955);
  transition:opacity 300ms var(--ease-soft),transform var(--t-slide) var(--ease-soft);
}
.deck[data-dir="fwd"]{--enter:9vw;--exit:-7vw;--enter-s:.985}
.deck[data-dir="back"]{--enter:-9vw;--exit:7vw;--enter-s:.985}

.inner{
  width:100%;
  max-width:76rem;
  margin-inline:auto;
}
.inner--narrow{max-width:60rem}
.inner--wide{max-width:88rem}

/* ═══ TYPE ═════════════════════════════════════════════════ */
.kicker{
  font-size:var(--fs-kicker);font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:clamp(1rem,2.2vh,1.7rem);
}
.kicker--wide{letter-spacing:.42em;color:var(--dim)}

.h1{
  font-size:var(--fs-h1);font-weight:700;
  line-height:1.03;letter-spacing:-.022em;
  text-wrap:balance;
  max-width:20ch;
}
.h-display{
  font-size:var(--fs-display);font-weight:700;
  line-height:1.04;letter-spacing:-.026em;
  text-wrap:balance;max-width:17ch;
}
.h-display--sm{font-size:clamp(1.85rem,1.05rem + 3.15vw,4.3rem);max-width:21ch}
/* Explicitly broken headlines set their own line breaks. */
.h-display--lines{max-width:none}
.h-display .line{display:block}
.h-display .line--accent{color:var(--accent)}
.h-display em{font-style:italic}
.h-display em.accent{color:var(--accent);display:block;margin-top:.22em}

.h3{
  font-size:var(--fs-h3);font-weight:700;
  line-height:1.2;letter-spacing:-.012em;
  margin-bottom:.5em;
}
.subhead{
  font-size:var(--fs-body-lg);line-height:1.45;
  color:var(--dim);max-width:52ch;
  margin-top:clamp(.8rem,1.8vh,1.3rem);
}
.subhead--em{font-style:italic}
.body{
  font-size:var(--fs-body);line-height:1.58;
  color:var(--dim);max-width:var(--measure);
}
.body--lg{font-size:var(--fs-body-lg);line-height:1.5;color:var(--fg);max-width:56ch}
.body--em{font-style:italic;color:var(--dim)}
.lede{font-size:clamp(1rem,.82rem + .72vw,1.5rem);line-height:1.45;color:var(--dim)}
.accent{color:var(--accent)}
.label{
  font-size:var(--fs-label);font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.75em;
}
.closing{
  font-size:var(--fs-body);line-height:1.6;color:var(--dim);
  max-width:78ch;margin-top:clamp(1.4rem,3.4vh,2.6rem);
  padding-top:clamp(1.1rem,2.4vh,1.7rem);
  border-top:1px solid var(--rule);
}
.closing--wide{max-width:100%}

/* Hairlines: the primary structural device */
.rule{
  height:1px;background:var(--rule);border:0;
  margin-block:clamp(1.3rem,3.2vh,2.5rem);
  transform-origin:left center;
}
.rule--short{width:clamp(3rem,8vw,6rem);background:var(--accent);height:2px}

/* ═══ SLIDE 1 · TITLE ══════════════════════════════════════ */
.s-title .inner,.s-end .inner{text-align:center;display:grid;justify-items:center}
.mark{border-radius:22%;width:clamp(48px,6.5vw,84px);height:auto}
.mark--lg{
  margin-bottom:clamp(1.5rem,3.6vh,2.6rem);
  box-shadow:0 18px 60px -22px rgba(95,192,230,.5);
}
.wordmark{
  font-size:var(--fs-wordmark);font-weight:700;
  line-height:.86;letter-spacing:-.045em;
  background:var(--sig-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-block:.06em;
}
.subtitle{max-width:34ch;margin-top:clamp(1rem,2.4vh,1.7rem)}
.s-title .rule--short,.s-end .rule--short{margin-block:clamp(1.6rem,3.4vh,2.4rem)}
.byline{display:grid;gap:.45rem;font-size:var(--fs-body);}
.byline-name{font-weight:700;color:var(--fg);font-size:1.06em}
.byline-meta{color:var(--dim);font-size:.9em;letter-spacing:.015em}
.h-thanks{font-size:clamp(2.6rem,1.4rem + 5.4vw,7rem);margin-top:.32em}
.s-end .lede{margin-top:.6em}

/* Concentric-arc motif, lifted from the app mark. Very faint. */
.arcs{
  position:absolute;pointer-events:none;
  background:
    radial-gradient(circle,transparent 0 8%,var(--faint) 8% 8.55%,transparent 8.55%),
    radial-gradient(circle,transparent 0 17%,var(--faint) 17% 17.5%,transparent 17.5%),
    radial-gradient(circle,transparent 0 26%,var(--faint) 26% 26.45%,transparent 26.45%),
    radial-gradient(circle,transparent 0 35%,var(--faint) 35% 35.4%,transparent 35.4%),
    radial-gradient(circle,transparent 0 44%,var(--faint) 44% 44.35%,transparent 44.35%),
    radial-gradient(circle,transparent 0 49.6%,var(--faint) 49.6% 49.9%,transparent 49.9%);
}
.arcs--title{
  width:150vmax;height:150vmax;
  left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:.85;
  animation:arcbreathe 22s ease-in-out infinite;
}
.arcs--corner{
  width:88vmax;height:88vmax;
  right:-34vmax;bottom:-40vmax;opacity:.8;
}
@keyframes arcbreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

/* ═══ COLUMNS ══════════════════════════════════════════════ */
.cols{display:grid;gap:clamp(1.6rem,4vw,4.5rem)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-split{grid-template-columns:1.15fr .85fr}
.col--stack{display:grid;gap:clamp(1.2rem,2.8vh,2rem);align-content:start}
.stack-item{padding-top:1.1rem;border-top:1px solid var(--rule)}

/* ═══ RESEARCH QUESTIONS ═══════════════════════════════════ */
.rq-list{display:grid;gap:clamp(1.4rem,3.2vh,2.4rem)}
.rq-list li{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1rem,2.4vw,2.2rem);align-items:start;
  padding-top:clamp(1.1rem,2.4vh,1.7rem);
  border-top:1px solid var(--rule);
}
.rq-tag{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  color:var(--accent);padding-top:.42em;white-space:nowrap;
}
.rq-list--answers .body--lg{max-width:70ch}

/* ═══ NUMBERED LISTS (18, 19, 20) ══════════════════════════ */
.numbered{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.1rem,2.6vh,2.1rem) clamp(2rem,4.5vw,5rem);
  margin-top:clamp(1.4rem,3.2vh,2.4rem);
}
.numbered--3{grid-template-columns:repeat(3,1fr)}
.numbered li{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(.9rem,1.8vw,1.6rem);align-items:start;
  padding-top:clamp(.9rem,2vh,1.4rem);
  border-top:1px solid var(--rule);
}
.numbered .n{
  font-size:clamp(1.05rem,.9rem + .5vw,1.5rem);
  font-weight:700;color:var(--accent);
  line-height:1.15;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ═══ FIGURE SLIDES ════════════════════════════════════════ */
.cols-figure{grid-template-columns:1.25fr .75fr;align-items:center}
.cols-hero{grid-template-columns:1fr 1fr;align-items:center}
.col--fig{display:grid;place-items:center;min-width:0}

.phone{
  position:relative;
  border:1px solid var(--rule);
  border-radius:clamp(16px,1.6vw,26px);
  overflow:hidden;
  background:var(--faint);
  max-height:min(62vh,760px);
  width:auto;
}
.phone img{
  height:100%;width:auto;max-height:min(62vh,760px);
  object-fit:contain;
}
.phone--hero{
  max-height:min(64vh,780px);
  box-shadow:0 40px 110px -46px rgba(95,192,230,.55);
}
.phone--hero img{max-height:min(64vh,780px)}
.phone--sm{max-height:min(40vh,420px)}
.phone--sm img{max-height:min(40vh,420px)}
/* Placeholder when a screenshot is missing */
.phone img[data-missing]{display:none}
.phone.is-missing{
  display:grid;place-items:center;
  aspect-ratio:9/16;height:min(52vh,600px);
  border-style:dashed;
}
.phone.is-missing::after{
  content:attr(data-file);
  font-size:var(--fs-label);letter-spacing:.1em;color:var(--dim);
}

.built-for{margin-bottom:clamp(1.2rem,2.6vh,1.9rem)}
.tags{font-size:var(--fs-body);color:var(--fg);line-height:1.5}
.tags i{color:var(--accent);font-style:normal;padding-inline:.28em}

.stats{
  display:grid;grid-template-columns:repeat(3,auto);
  gap:clamp(1.2rem,3vw,3.2rem);justify-content:start;
  padding-top:clamp(1rem,2.2vh,1.5rem);
  border-top:1px solid var(--rule);
}
.stat-n{
  font-size:clamp(1.3rem,1rem + 1.35vw,2.4rem);
  font-weight:700;line-height:1;letter-spacing:-.03em;
  background:var(--sig-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.stat-l{font-size:var(--fs-label);color:var(--dim);margin-top:.6em;letter-spacing:.05em;max-width:16ch}

.applink{margin-top:clamp(1rem,2.2vh,1.6rem)}
.app-open{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--fs-label);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  padding:.62em 0;min-height:44px;
  border-bottom:1px solid currentColor;
  transition:gap 200ms var(--ease),opacity 200ms var(--ease);
}
.app-open::after{content:"↗";font-size:1.1em;line-height:1}
.app-open:hover{gap:.85em}

/* ═══ POUR TABLE (13) ══════════════════════════════════════ */
.pour{margin-top:clamp(1.2rem,2.8vh,2rem)}
.pour-row{
  display:grid;grid-template-columns:minmax(8.5rem,.34fr) 1fr;
  gap:clamp(.8rem,2vw,2rem);
  padding-block:clamp(.7rem,1.6vh,1.05rem);
  border-top:1px solid var(--rule);
}
.pour-row:last-child{border-bottom:1px solid var(--rule)}
.pour-row dt{font-weight:700;font-size:var(--fs-body);color:var(--fg)}
.pour-row dd{margin:0;font-size:var(--fs-body);color:var(--dim);line-height:1.5}

/* ═══ DUO SLIDES (15, 16) ══════════════════════════════════ */
/* Two rows, two columns: the text blocks share a row and the two
   screenshots share the next, so both figures sit on one baseline
   however long the copy above them runs. DOM order stays
   text, figure, text, figure for screen readers. */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  column-gap:clamp(1.8rem,4.5vw,5rem);
  row-gap:clamp(1.1rem,2.6vh,1.9rem);
  align-items:start;
}
.duo > *:nth-child(1){grid-column:1;grid-row:1}
.duo > *:nth-child(2){grid-column:1;grid-row:2}
.duo > *:nth-child(3){grid-column:2;grid-row:1}
.duo > *:nth-child(4){grid-column:2;grid-row:2}
.duo .body{max-width:44ch}
.duo .phone{justify-self:center}

/* ═══ DIVIDERS (7, 11, 17) ═════════════════════════════════ */
.s-divider .inner{display:grid;gap:clamp(.5rem,2vh,1.5rem)}
.chapter{
  font-size:var(--fs-chapter);font-weight:700;
  line-height:.74;letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:2px var(--stroke,var(--rule));
  margin-left:-.055em;
  opacity:0;
}
.s-divider.is-active .chapter{animation:chapterIn 1200ms var(--ease-soft) forwards}
@keyframes chapterIn{
  from{opacity:0;transform:translateY(.14em) scale(.88);letter-spacing:.04em}
  to{opacity:1;transform:none;letter-spacing:-.06em}
}
.divider-body{max-width:44rem}
.h-chapter{
  font-size:clamp(2rem,1.2rem + 3.4vw,4.6rem);
  font-weight:700;line-height:1.02;letter-spacing:-.028em;
  opacity:0;
}
.s-divider.is-active .h-chapter{animation:riseIn 760ms var(--ease-soft) 380ms forwards}
.rule--draw{transform:scaleX(0)}
.s-divider.is-active .rule--draw{animation:drawRule 900ms var(--ease-soft) 640ms forwards}
@keyframes drawRule{to{transform:scaleX(1)}}
.s-divider .body{opacity:0}
.s-divider.is-active .body{animation:riseIn 760ms var(--ease-soft) 900ms forwards}

/* ═══ REVEAL CHOREOGRAPHY ══════════════════════════════════ */
.reveal > *,
.reveal .cols > *,
.reveal .rq-list > li,
.reveal .numbered > li,
.reveal .pour-row,
.reveal .duo > *{
  opacity:0;
}
.slide.is-active .reveal > *,
.slide.is-active .reveal .cols > *,
.slide.is-active .reveal .rq-list > li,
.slide.is-active .reveal .numbered > li,
.slide.is-active .reveal .pour-row,
.slide.is-active .reveal .duo > *{
  animation:riseIn 720ms var(--ease-soft) forwards;
  animation-delay:calc(160ms + var(--d,0) * var(--stagger));
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}

/* Signature moment: the wordmark wipes open over its gradient. */
.s-title .wordmark{clip-path:inset(0 100% 0 0)}
.s-title.is-active .wordmark{
  animation:riseIn 720ms var(--ease-soft) forwards,
            wordmarkWipe 1100ms var(--ease-soft) forwards;
  animation-delay:calc(160ms + var(--d,0) * var(--stagger)),
                  calc(260ms + var(--d,0) * var(--stagger));
}
@keyframes wordmarkWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -6% 0 0)}}

/* The hero graph breathes, slowly. Nothing strobes. */
.s-hero.is-active .phone--hero{
  animation:heroPulse 5s ease-in-out 1.1s infinite;
}
@keyframes heroPulse{
  0%,100%{box-shadow:0 40px 110px -46px rgba(95,192,230,.42)}
  50%{box-shadow:0 40px 132px -38px rgba(95,192,230,.8)}
}

/* ═══ CONNECTION-WEB FIELD (14) ════════════════════════════ */
.webfield{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;opacity:0;pointer-events:none;
  transition:opacity 1.4s var(--ease) .25s;
}
.s-hero.is-active .webfield{opacity:1}
.s-hero .inner{position:relative;z-index:1}

/* ═══ CHROME ═══════════════════════════════════════════════ */
.chrome{
  position:fixed;inset:0;z-index:20;pointer-events:none;
  --c:var(--white);--c-dim:rgba(255,255,255,.42);--c-line:rgba(255,255,255,.13);
  --scrim:0,0,0;
}
.chrome[data-theme="light"]{
  --c:var(--ink);--c-dim:rgba(29,29,31,.42);--c-line:rgba(29,29,31,.11);
  --scrim:255,255,255;
}
/* Real chrome always paints above the mobile scrim pseudo-elements. */
.chrome > *{transition:color 320ms var(--ease);z-index:1}

.topbar,.bottombar{
  position:absolute;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:calc(var(--pad-x) + var(--safe-l)) calc(var(--pad-x) + var(--safe-r));
  color:var(--c);
}
.topbar{top:calc(1.5rem + var(--safe-t))}
.bottombar{bottom:calc(1.7rem + var(--safe-b))}

.brandline{
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--fs-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
}
.mark--xs{width:20px;border-radius:24%}
.brandline i{color:var(--c-dim);font-style:normal;font-weight:400}
.brandline-sub{color:var(--c-dim);font-weight:400}

.counter{
  display:flex;align-items:baseline;gap:.35rem;
  font-size:var(--fs-label);font-weight:700;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.counter-sep,.counter-tot{color:var(--c-dim);font-weight:400}
.counter-cur{
  font-size:1.35em;letter-spacing:.04em;
  display:inline-block;min-width:1.6em;text-align:right;
}
.counter-cur.is-tick{animation:tick 340ms var(--ease)}
@keyframes tick{
  0%{opacity:0;transform:translateY(-.28em)}
  100%{opacity:1;transform:none}
}

.slidename{
  font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-dim);
  text-align:right;max-width:40vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.gridbtn{
  pointer-events:auto;
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--fs-label);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-dim);
  min-height:44px;padding-right:.5rem;
  transition:color 200ms var(--ease);
}
.gridbtn:hover,.gridbtn:focus-visible{color:var(--c)}
.gridicon{display:grid;grid-template-columns:1fr 1fr;gap:2.5px;width:15px}
.gridicon i{display:block;aspect-ratio:1;background:currentColor;border-radius:1px}
.gridbtn kbd{opacity:.55}

/* Progress */
.progress{
  position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--c-line);
}
.progress-fill{
  display:block;height:100%;width:0;
  background:var(--sig-grad);
  transform-origin:left;
  transition:width 520ms var(--ease);
}

/* Click / hover navigation zones */
.navzone{
  pointer-events:auto;
  position:absolute;top:0;bottom:0;width:32%;
  display:grid;place-items:center;
  opacity:0;transition:opacity 260ms var(--ease);
  color:var(--c);
}
.navzone--prev{left:0;justify-items:start;padding-left:clamp(.6rem,2.2vw,2rem)}
.navzone--next{right:0;justify-items:end;padding-right:clamp(.6rem,2.2vw,2rem)}
.navzone:hover,.navzone:focus-visible{opacity:1}
.navzone[disabled]{opacity:0 !important;cursor:default}
.chev{
  width:clamp(38px,4vw,50px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--c-line);
  background:color-mix(in srgb,var(--c) 6%,transparent);
  backdrop-filter:blur(6px);
  transition:transform 240ms var(--ease),border-color 240ms var(--ease),box-shadow 240ms var(--ease);
}
.chev::before{
  content:"";width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
}
.navzone--next .chev::before{transform:translateX(-2px) rotate(45deg)}
.navzone--prev .chev::before{transform:translateX(2px) rotate(-135deg)}
.navzone:hover .chev{
  border-color:var(--teal-l);
  box-shadow:0 0 0 6px rgba(95,192,230,.1);
}
.navzone--next:hover .chev{transform:translateX(3px)}
.navzone--prev:hover .chev{transform:translateX(-3px)}

/* First-load affordance */
.hint{
  position:absolute;left:50%;bottom:calc(4.6rem + var(--safe-b));
  transform:translateX(-50%);
  display:flex;align-items:center;gap:.7rem;
  color:var(--c-dim);font-size:var(--fs-label);
  letter-spacing:.13em;text-transform:uppercase;
  transition:opacity 460ms var(--ease),transform 460ms var(--ease);
}
.hint-key{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--c-line);
  animation:nudge 2.4s var(--ease) infinite;
}
@keyframes nudge{0%,72%,100%{transform:translateX(0)}84%{transform:translateX(5px)}}
.hint.is-gone{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none}
.hint kbd{opacity:.75}

/* ═══ OVERVIEW / GRID MODE ═════════════════════════════════ */
.overview{
  position:fixed;inset:0;z-index:60;
  background:rgba(4,4,6,.9);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  display:grid;grid-template-rows:auto 1fr;
  opacity:0;transition:opacity 240ms var(--ease);
}
.overview[hidden]{display:none}
.overview.is-open{opacity:1}
.overview-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(1.4rem + var(--safe-t)) calc(clamp(1.2rem,3.5vw,3rem) + var(--safe-r))
          1.1rem calc(clamp(1.2rem,3.5vw,3rem) + var(--safe-l));
  border-bottom:1px solid rgba(255,255,255,.1);
  color:var(--white);
}
.overview-title{font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.overview-title span{color:var(--muted-2);font-weight:400;margin-left:.6em}
.overview-close{
  display:flex;align-items:center;gap:.55rem;min-height:44px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
  transition:color 180ms var(--ease);
}
.overview-close:hover,.overview-close:focus-visible{color:var(--white)}

/* Flex, not grid: an auto-sized grid row refuses to take its height
   from a ratio-derived child, so grid collapses the thumbnails. */
.overview-grid{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:clamp(.9rem,1.6vw,1.5rem);
  padding:clamp(1.2rem,3vw,2.4rem) calc(clamp(1.2rem,3.5vw,3rem) + var(--safe-r))
          calc(2.5rem + var(--safe-b)) calc(clamp(1.2rem,3.5vw,3rem) + var(--safe-l));
}
.thumb{
  pointer-events:auto;display:grid;grid-template-rows:auto auto;
  flex:1 1 230px;max-width:340px;text-align:left;
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:var(--black);
  transition:transform 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease);
}
.thumb:hover,.thumb:focus-visible{
  transform:translateY(-4px);
  border-color:var(--teal-l);
  box-shadow:0 16px 40px -18px rgba(95,192,230,.55);
}
.thumb.is-current{border-color:var(--teal-l);box-shadow:0 0 0 1px var(--teal-l)}
/* --arp is the live viewport ratio as a percentage, set when the
   overview opens, so each cell is a true scale model of the slide.
   Percentage padding resolves against the definite column width, which
   aspect-ratio cannot do inside an auto-sized grid row. JS only sets
   the transform, which never affects layout. */
.thumb-stage{
  position:relative;width:100%;
  height:0;padding-top:calc(var(--arp,56.25) * 1%);
  overflow:hidden;background:var(--black);
}
.thumb-stage > .slide{
  position:absolute;top:0;left:0;
  visibility:visible;opacity:1;transform:none;pointer-events:none;
  transform-origin:top left;
}
.thumb-meta{
  display:flex;align-items:center;gap:.55rem;
  padding:.62rem .75rem;
  border-top:1px solid rgba(255,255,255,.1);
  color:var(--white);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
}
.thumb-n{font-weight:700;color:var(--teal-l);font-variant-numeric:tabular-nums}
.thumb-label{color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Thumbnails are static: no entrance animation, no motion */
.is-thumb *,.is-thumb *::before,.is-thumb *::after{
  animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;
}
.is-thumb .rule--draw{transform:scaleX(1) !important}
.is-thumb .chapter{opacity:1 !important}
.is-thumb .webfield,.is-thumb .applink{display:none}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */

/* Tablet and below: nav arrows always visible, touch has no hover */
@media (hover:none),(max-width:900px){
  .navzone{opacity:1;width:24%}
  .navzone .chev{opacity:.4}
  .navzone[disabled] .chev{opacity:0}
}

/* On a phone the tap zone stays full height, but the visible chevron
   drops to the lower band so it never sits on top of a headline. */
@media (max-width:640px){
  .navzone{align-items:end;padding-bottom:calc(4.4rem + var(--safe-b))}
  .navzone .chev{opacity:.3;width:34px}
}

@media (max-width:1100px){
  .cols-figure{grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,3vw,2.6rem)}
  .numbered{gap:clamp(.9rem,2vh,1.5rem) clamp(1.4rem,3vw,2.5rem)}
}

@media (max-width:900px){
  :root{--pad-y:clamp(4.6rem,8vh,5.5rem)}
  .cols-3,.numbered--3{grid-template-columns:repeat(2,1fr)}
  .cols-split{grid-template-columns:1fr;gap:clamp(1.2rem,3vh,2rem)}
  .cols-figure,.cols-hero{grid-template-columns:1fr;gap:clamp(1.2rem,3vh,2rem)}
  .col--fig{order:-1}
  .phone{max-height:min(34vh,340px)}
  .phone img{max-height:min(34vh,340px)}
  .phone--hero{max-height:min(36vh,380px)}
  .phone--hero img{max-height:min(36vh,380px)}
  .stats{grid-template-columns:repeat(3,1fr);gap:1rem}
  .stat-l{max-width:none}

  /* Touch sizes: the slide model is preserved (swipe between slides),
     but a dense slide scrolls inside itself rather than shrinking the
     type below a legible size or clipping the last row. */
  .slide{
    place-items:start;align-content:center;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;scrollbar-width:none;
  }
  .slide::-webkit-scrollbar{display:none}
  .slide.is-scrollable{align-content:start}

  /* Fade content out behind the bars instead of letting it collide. */
  .chrome::before,.chrome::after{
    content:"";position:absolute;left:0;right:0;pointer-events:none;
  }
  .chrome::before{
    top:0;height:calc(5rem + var(--safe-t));
    background:linear-gradient(to bottom,rgba(var(--scrim),1) 44%,rgba(var(--scrim),0));
  }
  .chrome::after{
    bottom:0;height:calc(5.4rem + var(--safe-b));
    background:linear-gradient(to top,rgba(var(--scrim),1) 46%,rgba(var(--scrim),0));
  }
}

/* Mobile: the slide model is preserved (swipe between slides), but a
   dense slide may scroll vertically inside itself rather than shrink
   the type below a legible size. */
@media (max-width:640px){
  :root{
    --pad-x:1.35rem;
    --pad-y:5rem;
    --measure:100%;
    --fs-body:1rem;
    --fs-body-lg:1.08rem;
    --fs-h3:1.12rem;
  }
  .cols-2,.cols-3,.numbered,.numbered--3,.duo{grid-template-columns:1fr}
  .duo{grid-template-rows:none;row-gap:1rem}
  .duo > *{grid-column:1 !important;grid-row:auto !important}
  .duo > *:nth-child(2),.duo > *:nth-child(4){margin-bottom:1.4rem}
  .pour-row{grid-template-columns:1fr;gap:.3rem}
  .pour-row dt{color:var(--accent);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}
  .h1,.h-display{max-width:none}
  .phone,.phone img{max-height:min(38vh,300px)}
  .phone--sm,.phone--sm img{max-height:min(30vh,240px)}
  .stats{grid-template-columns:1fr;gap:.9rem;text-align:left}
  .stat{display:flex;align-items:baseline;gap:.8rem}
  .stat-l{margin-top:0}
  .navzone{width:20%}
  .brandline-sub,.brandline i{display:none}
  .slidename{display:none}
  .gridbtn kbd{display:none}
  .hint-t{display:none}
  .thumb{flex:1 1 140px;max-width:none}
  .chapter{font-size:clamp(5rem,26vw,9rem)}
  .closing{max-width:none}
}

@media (max-width:640px) and (orientation:landscape){
  :root{--pad-y:3.4rem}
  .topbar{top:calc(.8rem + var(--safe-t))}
  .bottombar{bottom:calc(.9rem + var(--safe-b))}
}

/* Short viewports: 1280x720 and 1366x768 projectors, and laptops with
   a lot of browser chrome. Tighten the frame, not the reading size. */
@media (min-width:641px) and (max-height:820px){
  :root{--pad-y:clamp(3.9rem,6.4vh,5rem)}
  .phone,.phone img{max-height:min(56vh,540px)}
  .phone--hero,.phone--hero img{max-height:min(58vh,580px)}
  .phone--sm,.phone--sm img{max-height:min(33vh,330px)}
  .duo{gap:clamp(1.5rem,3.4vw,3.4rem)}
  .duo-item{gap:clamp(.8rem,1.8vh,1.3rem)}
  .rule{margin-block:clamp(1rem,2.4vh,1.8rem)}
}

/* Very large displays and projectors: hold the measure, grow the type */
@media (min-width:1800px){
  .inner{max-width:84rem}
  .inner--wide{max-width:100rem}
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════
   Non-negotiable for a deck about an accessibility-first app.
   Everything resolves to an instant, legible end state.        */
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="on"]) *,
  :root:not([data-motion="on"]) *::before,
  :root:not([data-motion="on"]) *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  :root:not([data-motion="on"]) .slide.is-active{transform:none}
  :root:not([data-motion="on"]) .slide.is-leaving{visibility:hidden;opacity:0;transform:none}
  :root:not([data-motion="on"]) .reveal > *,
  :root:not([data-motion="on"]) .reveal .cols > *,
  :root:not([data-motion="on"]) .reveal .rq-list > li,
  :root:not([data-motion="on"]) .reveal .numbered > li,
  :root:not([data-motion="on"]) .reveal .pour-row,
  :root:not([data-motion="on"]) .reveal .duo > *,
  :root:not([data-motion="on"]) .chapter,
  :root:not([data-motion="on"]) .h-chapter,
  :root:not([data-motion="on"]) .s-divider .body{opacity:1 !important;transform:none !important}
  :root:not([data-motion="on"]) .wordmark{clip-path:none !important}
  :root:not([data-motion="on"]) .rule--draw{transform:scaleX(1) !important}
  :root:not([data-motion="on"]) .webfield{opacity:1}
  :root:not([data-motion="on"]) .arcs--title{animation:none}
}

/* ═══ PRINT / PDF EXPORT ═══════════════════════════════════ */
@media print{
  body{overflow:visible;background:#fff}
  .chrome,.overview,.skip-link{display:none !important}
  .deck{position:static}
  .slide{
    position:relative;inset:auto;
    visibility:visible !important;opacity:1 !important;transform:none !important;
    page-break-after:always;break-after:page;
    min-height:100vh;
  }
  .reveal > *,.reveal .cols > *,.reveal .rq-list > li,
  .reveal .numbered > li,.reveal .pour-row,.reveal .duo > *,
  .chapter,.h-chapter,.s-divider .body{opacity:1 !important;animation:none !important}
  .wordmark{clip-path:none !important}
  .rule--draw{transform:scaleX(1) !important}
  .webfield{display:none}
}