/* ═══════════════════════════════════════════════════════════
   REMEMBR · MRP Thesis Defence
   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;
  overflow:hidden;
  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);
}

/* A cover-push, not a cross-fade. Two slides never sit at partial
   opacity over the same backdrop, which is what produced a flash of
   the page background between two light slides. The incoming slide is
   fully opaque and simply slides over the outgoing one, so nothing
   shows through at any point in the transition. */
.slide{transform:translate3d(var(--enter,0),0,0)}
.slide.is-active{
  visibility:visible;opacity:1;pointer-events:auto;
  transform:translate3d(0,0,0);z-index:3;
  transition:transform var(--t-slide) var(--ease-soft);
}
/* Outgoing: a slower parallax drift beneath the incoming slide. */
.slide.is-leaving{
  visibility:visible;opacity:1;z-index:2;
  transform:translate3d(var(--exit,0),0,0);
  transition:transform var(--t-slide) var(--ease-soft);
}
.deck[data-dir="fwd"]{--enter:100%;--exit:-18%}
.deck[data-dir="back"]{--enter:-100%;--exit:18%}

.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}
/* Three explicitly broken lines: sized so the longest sits on one line. */
.h-display--trio{font-size:clamp(1.45rem,1rem + 2.15vw,3.4rem);max-width:none;line-height:1.12}
/* 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)}
.body + .body{margin-top:clamp(.75rem,1.7vh,1.15rem)}
.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}
/* The four names themselves, so the answer is specific, not a count. */
.rq-list--answers .tags{margin-top:.7em;font-weight:700;max-width:70ch}
/* The question itself, quiet, above its answer. */
.rq-q{
  font-size:clamp(.8rem,.68rem + .36vw,1.02rem);
  line-height:1.5;font-style:italic;
  color:var(--dim);max-width:74ch;
  margin-bottom:.85em;padding-bottom:.7em;
  border-bottom:1px solid var(--rule);
}

/* ═══ REFERENCES (25) ══════════════════════════════════════ */
.h1--sm{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.5rem);max-width:none}
.refs{
  columns:2;column-gap:clamp(1.8rem,4vw,4rem);
  font-size:clamp(.74rem,.63rem + .35vw,.97rem);
  line-height:1.52;color:var(--dim);
}
.refs li{
  break-inside:avoid;
  margin-bottom:.72em;
  padding-left:1.35em;
  text-indent:-1.35em;   /* hanging indent, as APA sets it */
}
.refs em{font-style:italic}
.refs-note{
  margin-top:clamp(1rem,2.2vh,1.6rem);
  padding-top:clamp(.8rem,1.8vh,1.2rem);
  border-top:1px solid var(--rule);
  font-size:clamp(.68rem,.6rem + .26vw,.85rem);
  line-height:1.5;color:var(--dim);font-style:italic;
}

/* ═══ 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}

/* figure = device frame + APA credit line. The frame is an inner box so
   the caption sits outside the border rather than inside the crop. */
.fig{display:grid;justify-items:center;min-width:0}
.figcred{
  margin-top:.6rem;
  font-size:clamp(.56rem,.48rem + .2vw,.7rem);
  line-height:1.45;letter-spacing:.03em;
  color:var(--dim);text-align:center;max-width:32ch;
}

.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(36vh,380px)}
.phone--sm img{max-height:min(36vh,380px)}
/* A flat illustration frame: same family as .phone, but sized for a
   wide image rather than forced into a phone's tall aspect ratio. */
.illus{
  position:relative;
  border:1px solid var(--rule);
  border-radius:clamp(14px,1.4vw,22px);
  overflow:hidden;
  background:var(--faint);
  max-width:100%;
  max-height:min(48vh,520px);
}
.illus img{
  display:block;height:100%;width:auto;max-width:100%;
  max-height:min(48vh,520px);object-fit:contain;
}

/* 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) ══════════════════════════════════════ */
/* Names the POUR acronym before the rows use it. Deliberately not
   italic, so it reads as a definition rather than more subhead. */
.pour-lead{
  margin-top:clamp(.7rem,1.8vh,1.2rem);
  font-size:var(--fs-body);line-height:1.5;color:var(--dim);
}
.pour-lead b{color:var(--fg);letter-spacing:.04em}
.pour{margin-top:clamp(1.2rem,2.8vh,2rem)}
.pour-row dd i{font-style:italic;color:var(--fg)}
.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 .fig{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}
/* The nav zones are full-height columns, so a focus ring on the button
   itself draws a stray vertical line down the slide. Put the ring on
   the chevron, which is the thing the presenter is actually aiming at. */
.navzone:focus-visible{outline:none}
.navzone:focus-visible .chev{
  outline:3px solid var(--teal-l);
  outline-offset:3px;
  border-color:var(--teal-l);
}
.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{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}
  .refs{columns:1}
  .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(28vh,290px)}
  .illus,.illus img{max-height:min(40vh,400px)}
  .pour-row{padding-block:clamp(.44rem,1vh,.72rem)}
  .pour-row dt,.pour-row dd{line-height:1.42}
  .figcred{margin-top:.42rem;font-size:.62rem}
  .subhead{margin-top:clamp(.55rem,1.3vh,.95rem)}
  .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)}
  .pour-row dd{font-size:calc(var(--fs-body) * .94)}
  .pour-lead{margin-top:clamp(.5rem,1.2vh,.9rem);font-size:calc(var(--fs-body) * .94)}
  .rq-list{gap:clamp(1.1rem,2.4vh,2rem)}
  .rq-q{margin-bottom:.62em;padding-bottom:.52em}
  .rq-list--answers .tags{font-size:calc(var(--fs-body) * .94);margin-top:.5em}
}

/* 720p projectors, the tightest case this deck has to survive. The
   definition-list slides carry the most text, so they give first. */
@media (min-width:641px) and (max-height:760px){
  .pour-row{padding-block:clamp(.3rem,.72vh,.52rem)}
  .pour-row dt,.pour-row dd{line-height:1.36}
  .pour-row dd{font-size:calc(var(--fs-body) * .88)}
  .pour-lead{font-size:calc(var(--fs-body) * .9);line-height:1.4}
  .pour{margin-top:clamp(.8rem,1.8vh,1.3rem)}
  .subhead{margin-top:clamp(.45rem,1vh,.8rem)}
  .rq-list--answers .body--lg,
  .rq-list--answers .tags{font-size:calc(var(--fs-body) * .92)}
  .rq-q{font-size:.78rem}
}

/* 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}
}

/* ═══ AGENDA (02) ══════════════════════════════════════════ */
.agenda{
  display:grid;
  gap:clamp(.6rem,1.5vh,1.15rem);
  margin-top:clamp(1rem,2.4vh,1.8rem);
}
.agenda li{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1rem,2.4vw,2.2rem);align-items:baseline;
  padding-top:clamp(.6rem,1.4vh,1rem);
  border-top:1px solid var(--rule);
}
.agenda-n{
  font-size:clamp(.95rem,.82rem + .42vw,1.3rem);
  font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.agenda .h3{margin-bottom:.25em}
.agenda .body{max-width:74ch}

/* ═══ DECORATIVE MOTIFS ════════════════════════════════════
   Two only, on the two most conceptual slides. Abstract line
   work rather than imagery: nothing here depicts a real person.
   Both are aria-hidden and sit behind the text.               */
.motif{
  position:absolute;z-index:0;pointer-events:none;
  height:auto;color:var(--accent);
}
.slide > .inner{position:relative;z-index:1}

.motif--face{
  right:clamp(0.5rem,2vw,3rem);
  top:0;bottom:0;margin-block:auto;
  width:clamp(11rem,19vw,19rem);
}
/* A soft cast shadow of a head and shoulders. Blurred, so it reads as a
   shadow rather than an illustration of anybody in particular. */
.motif-silhouette{fill:currentColor;opacity:0}
.slide.is-active .motif-silhouette{
  animation:motifShadow 1600ms var(--ease-soft) 320ms forwards;
}
@keyframes motifShadow{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:.17;transform:none}
}
.motif-silhouette{transform-origin:50% 50%;transform-box:fill-box}

/* The question sits on the face, crisp against the soft shadow. */
.motif-q{
  fill:currentColor;font-family:inherit;font-weight:700;
  font-size:132px;opacity:0;
}
.slide.is-active .motif-q{
  animation:motifQ 1400ms var(--ease-soft) 1150ms forwards;
}
@keyframes motifQ{
  from{opacity:0;transform:translateY(12px) scale(.9)}
  to{opacity:.5;transform:none}
}
.motif-q{transform-origin:50% 50%;transform-box:fill-box}

.motif--diary{
  right:clamp(0.5rem,2vw,3rem);
  top:0;bottom:0;margin-block:auto;
  width:clamp(12rem,21vw,21rem);
}
.motif-pages path{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round;opacity:0;
}
.slide.is-active .motif-pages path{
  animation:motifFade 1000ms var(--ease-soft) forwards;
  animation-delay:calc(360ms + var(--i,0) * 170ms);
}
@keyframes motifFade{from{opacity:0}to{opacity:.34}}

/* Ruled lines, drawn left to right like handwriting. */
.motif-rules path,.motif-dates path{
  fill:none;stroke:currentColor;stroke-linecap:round;
  stroke-dasharray:150;stroke-dashoffset:150;
}
.motif-rules path{stroke-width:1.1;opacity:.24}
.motif-dates path{stroke-width:3.2;opacity:.5}
.slide.is-active .motif-rules path,
.slide.is-active .motif-dates path{
  animation:motifWrite 900ms var(--ease-soft) forwards;
  animation-delay:calc(820ms + var(--i,0) * 150ms);
}
@keyframes motifWrite{to{stroke-dashoffset:0}}

.motif-ribbon{
  fill:currentColor;opacity:0;
  transform-origin:50% 0;transform-box:fill-box;
}
.slide.is-active .motif-ribbon{
  animation:motifRibbon 900ms var(--ease-soft) 700ms forwards;
}
@keyframes motifRibbon{
  from{opacity:0;transform:scaleY(.3)}
  to{opacity:.4;transform:none}
}

/* The motifs are breathing room, not content. Below tablet the slide can
   scroll, and a fixed decorative layer would sit under the text. */
@media (max-width:900px){
  .motif{display:none}
}

@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="on"]) .motif-silhouette{opacity:.17 !important;transform:none !important}
  :root:not([data-motion="on"]) .motif-q{opacity:.5 !important;transform:none !important}
  :root:not([data-motion="on"]) .motif-pages path{opacity:.34 !important}
  :root:not([data-motion="on"]) .motif-rules path,
  :root:not([data-motion="on"]) .motif-dates path{stroke-dashoffset:0 !important}
  :root:not([data-motion="on"]) .motif-ribbon{opacity:.4 !important;transform:none !important}
}
@media print{
  .motif-silhouette{opacity:.17 !important}
  .motif-q{opacity:.5 !important}
  .motif-pages path{opacity:.34 !important}
  .motif-rules path,.motif-dates path{stroke-dashoffset:0 !important}
  .motif-ribbon{opacity:.4 !important}
}