/* Comic Neue latin — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ComicNeue-latin-c24cd8da.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Josefin Sans latin-ext — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JosefinSans-latin-ext-dd5d3af5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Josefin Sans latin — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JosefinSans-latin-0ff5ba86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Josefin Sans latin-ext — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/JosefinSans-latin-ext-dd5d3af5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Josefin Sans latin — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/JosefinSans-latin-0ff5ba86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Josefin Sans latin-ext — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/JosefinSans-latin-ext-dd5d3af5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Josefin Sans latin — SIL Open Font License, self-hosted copy from Google Fonts */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/JosefinSans-latin-0ff5ba86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Flame and Blame — web pitch deck
   Two layouts from one DOM:
   - FLOW (default): phones, Fold cover + unfolded inner screen, portrait tablets.
     Art on top (cropped toward the characters on narrow screens), text re-flowed into a paper card.
   - STAGE: landscape screens. Every slide is the original 16:9 composition, scroll-snapped. */

:root {
  --red: #E0432A;
  --yellow: #FBBF41;
  --ink: #152F35;
  --cream: #FFF2D7;
  --paper: #F7E9CB;
  --night: #0B1719;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.7, .64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: 'Josefin Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; }

/* ------------------------------------------------------------------ shared slide parts */
.slide { position: relative; }
.frame { position: relative; overflow: hidden; }
.stage {
  position: absolute;
  container-type: inline-size;
  --cq: 1cqw;            /* 1% of the slide width; app.js sets it in px where container units are unsupported */
  overflow: hidden;
  background: var(--ink);
}
.el { position: absolute; margin: 0; }
.el img.fill { width: 100%; height: 100%; object-fit: fill; }
.el .ln { position: absolute; inset: 0; }
.el.txt { display: flex; flex-direction: column; overflow: visible; }
.el.txt p {
  margin: 0;
  line-height: var(--lh, 1.18);
  margin-top: calc(var(--sb, 0) * calc(.104167 * var(--cq)));
  margin-bottom: calc(var(--sa, 0) * calc(.104167 * var(--cq)));
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.stage .r { font-size: calc(var(--pt) * calc(.104167 * var(--cq))); }
/* bullets (a:buChar): text starts at marL, the bullet hangs in the negative first-line indent */
.el.txt p.li { padding-left: calc(var(--ml) * calc(.104167 * var(--cq))); text-indent: calc(var(--ind) * calc(.104167 * var(--cq))); }
.stage .bu { display: inline-block; text-indent: 0; width: calc(var(--bw) * calc(.104167 * var(--cq))); font-size: calc(var(--pt) * calc(.104167 * var(--cq)) * .8); vertical-align: .1em; }
.el.shape .geom, .el.shape .fillbox { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.el.bubble .geom { filter: drop-shadow(0 calc(.35 * var(--cq)) calc(.5 * var(--cq)) rgba(0, 0, 0, .35)); }
.stage a.lnk { display: contents; }
.stage a.lnk .el { cursor: pointer; transition: filter .2s; }
.stage a.lnk:hover .el { filter: brightness(1.15) drop-shadow(0 0 calc(.6 * var(--cq)) rgba(251, 191, 65, .55)); }
.stage canvas.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

.blur { display: none; }

/* ------------------------------------------------------------------ FLOW layout (default) */
.hud { display: none; }
.mbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(11, 23, 25, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 242, 215, .08);
}
.mbar-logo img { height: 34px; width: auto; }
.mbar-count { margin-left: auto; font-size: 13px; letter-spacing: .08em; color: rgba(255, 242, 215, .6); }
.mbar-count b { color: var(--yellow); }
.mbar-cta {
  text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .04em;
  padding: 9px 14px 7px; border-radius: 999px;
  background: var(--red); color: #fff;
  box-shadow: 0 4px 0 #8f2213, 0 8px 18px rgba(224, 67, 42, .35);
}
.mbar-cta:active { translate: 0 2px; box-shadow: 0 2px 0 #8f2213; }

.deck { padding-bottom: 40px; }
.slide { padding: 0 0 34px; scroll-margin-top: 50px; }
.slide + .slide { border-top: 1px solid rgba(255, 242, 215, .06); padding-top: 0; }

/* narrow (phone, Fold cover screen): square crop toward the characters */
.frame { width: 100%; aspect-ratio: 1 / 1; }
.frame .stage {
  top: 0; height: 100%; aspect-ratio: 16 / 9; width: auto;
  left: calc(-77.7778% * var(--focus, .5));
}
.frame.no-m-art { display: none; }
.stage .el:not(.bg):not(.ov) { display: none; }

/* paper card */
.m-card {
  position: relative; z-index: 2;
  width: calc(100% - 28px); max-width: 720px;
  margin: -44px auto 0;
  padding: 26px 20px 22px;
  border-radius: 6px;
  rotate: -.6deg;
}
.slide:nth-child(even) .m-card { rotate: .5deg; }
.frame.no-m-art + .m-card { margin-top: 26px; }
.m-paper {
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(196, 150, 90, .18), transparent 60%),
    var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
}
.m-dark {
  background: linear-gradient(160deg, #1d3c43, #132a2f);
  border: 1px solid rgba(255, 242, 215, .1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.m-card::before { /* tape */
  content: ''; position: absolute; top: -11px; left: 50%;
  width: 84px; height: 24px; translate: -50% 0; rotate: -3deg;
  background: rgba(224, 67, 42, .88);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.m-dark::before { background: rgba(251, 191, 65, .9); }
.m-card .r { font-size: calc(6px + var(--pt) * .66px); }
.m-card p.li { padding-left: calc(var(--ml) * .5px); text-indent: calc(var(--ind) * .5px); }
.m-card .bu { display: inline-block; text-indent: 0; width: calc(var(--bw) * .5px); font-size: calc((6px + var(--pt) * .66px) * .8); vertical-align: .1em; }
/* keep contrast when a text colour lands on the other card theme */
.m-dark .r.dk, .m-dark .bu.dk { color: var(--cream) !important; }
.m-paper .r.wh, .m-paper .bu.wh { color: var(--ink) !important; }
.m-paper .r.lt:not(.wh), .m-paper .bu.lt:not(.wh) { color: #B3560C !important; }
/* link buttons (closing slide) */
.m-btns { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.m-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 8px 12px; border-radius: 999px;
  background: var(--ink); color: var(--cream) !important;
  font-weight: 700; font-size: 15px; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 3px 0 #0a1a1d, 0 8px 16px rgba(21, 47, 53, .25);
}
.m-btn + .m-btn { background: var(--red); box-shadow: 0 3px 0 #8f2213, 0 8px 16px rgba(224, 67, 42, .3); }
.m-btn:active { translate: 0 2px; }
.m-btn .m-btn-ic { width: 20px; height: 20px; margin-top: -2px; }
.m-card p { margin: 0; line-height: calc(var(--lh, 1.18) * .98); overflow-wrap: break-word; }
.m-card p:empty { display: none; }
.m-it + .m-it { margin-top: 10px; }
.m-txt.big { margin-top: 2px; }
.m-txt.indent { padding-left: 12px; border-left: 3px solid rgba(224, 67, 42, .3); }
.m-dark .m-txt.indent { border-left-color: rgba(251, 191, 65, .35); }
.m-grid .r { font-size: calc(4px + var(--pt) * .6px); }
.m-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px 12px; align-items: start; }
.m-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.m-row .m-pic { width: 26px !important; }
.m-pic { max-width: 420px; }
.m-pic img { width: 100%; height: auto; border-radius: 4px; }
.m-card a.lnk { text-decoration: none; display: block; }
.m-row a.lnk { display: inline-block; }
.m-card a.lnk .r { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m-card .m-txt p { text-align: left !important; }
.m-grid .m-txt p { text-align: left !important; }

/* Fold 3/4 cover screen and other very narrow phones */
@media (max-width: 380px) {
  .m-grid { gap: 6px 8px; }
  .m-grid .r { font-size: calc(3px + var(--pt) * .56px); }
  .m-grid .m-txt.big.short p { white-space: nowrap; }
}

/* unfolded Fold / small tablets: whole 16:9 art, bigger type, card overlaps art less */
@media (min-width: 600px) {
  /* 4:3 frame, art zoomed to 130% toward the characters: the empty paper of the slide leaves the frame
     stage width = 1.3 * (3/4) * (16/9) = 173.33% of the frame */
  .frame { aspect-ratio: 4 / 3; }
  .frame .stage { height: 130%; top: calc(-30% * var(--fy, .5)); left: calc(-73.3333% * var(--focus, .5)); }
  .m-card { width: calc(100% - 56px); margin-top: -34px; padding: 30px 30px 26px; }
  .m-card .r, .m-grid .r { font-size: calc(7px + var(--pt) * .74px); }
  .m-it + .m-it { margin-top: 12px; }
  .mbar { padding-left: 22px; padding-right: 22px; }
}

/* ------------------------------------------------------------------ STAGE layout (landscape) */
@media (min-aspect-ratio: 5/4) and (min-width: 900px), (min-aspect-ratio: 5/4) and (max-height: 520px) {
  html { scroll-snap-type: y mandatory; scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .mbar, .m-card { display: none; }
  .deck { padding: 0; }
  .slide {
    height: 100vh; height: 100svh;
    display: grid; place-items: center; place-content: center;
    overflow: hidden; padding: 0;
    scroll-snap-align: start; scroll-snap-stop: always;
    scroll-margin-top: 0;
  }
  .slide + .slide { border: 0; }
  .blur {
    display: block; position: absolute; inset: -60px;
    background-size: cover; background-position: center;
    filter: blur(38px) brightness(.42) saturate(1.25);
  }
  .frame, .frame.no-m-art {
    display: block;
    /* --fw comes from app.js: "cover" on near-16:9 screens (no bars), letterbox otherwise */
    width: var(--fw, min(100vw, calc(100svh * 16 / 9)));
    flex: none;
    aspect-ratio: 16 / 9;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  }
  .frame .stage { inset: 0; left: 0; width: 100%; height: 100%; }
  .stage .el:not(.bg):not(.ov) { display: block; }
  .stage .el.txt:not(.ov) { display: flex; }

  .hud { display: block; }
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: rgba(255, 255, 255, .06); }
  .progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--yellow)); transition: width .5s var(--ease-out); }
  .counter, .fs {
    position: fixed; z-index: 40; top: 14px;
    font: 700 13px/1 'Josefin Sans', sans-serif; letter-spacing: .1em;
    color: rgba(255, 242, 215, .75);
    background: rgba(11, 23, 25, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 242, 215, .12); border-radius: 999px;
    opacity: .0; transition: opacity .3s;
  }
  .counter { right: 64px; padding: 9px 12px 7px; }
  .counter b { color: var(--yellow); }
  .fs { right: 16px; width: 36px; height: 34px; display: grid; place-items: center; cursor: pointer; padding: 0; }
  body:hover .counter, body:hover .fs, .fs:focus-visible { opacity: 1; }
  .dots {
    position: fixed; z-index: 40; right: 14px; top: 50%; translate: 0 -50%;
    display: flex; flex-direction: column; gap: 7px;
  }
  .dots a { position: relative; display: block; width: 18px; height: 14px; }
  .dots a::before {
    content: ''; position: absolute; right: 5px; top: 4px; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 242, 215, .35); transition: all .25s var(--ease-out);
  }
  .dots a:hover::before { background: var(--cream); }
  .dots a.on::before { background: var(--yellow); right: 4px; top: 2px; width: 9px; height: 11px; border-radius: 5px; box-shadow: 0 0 10px rgba(251, 191, 65, .6); }
  .dots a span {
    position: absolute; right: 24px; top: 50%; translate: 6px -50%;
    white-space: nowrap; pointer-events: none;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 10px 4px; border-radius: 6px;
    background: var(--cream); color: var(--ink);
    opacity: 0; transition: opacity .2s, translate .2s var(--ease-out);
  }
  .dots a:hover span { opacity: 1; translate: 0 -50%; }
  .hint {
    position: fixed; z-index: 40; left: 50%; bottom: 18px; translate: -50% 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
    color: var(--cream); text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    transition: opacity .4s;
    animation: hint 1.8s ease-in-out infinite;
  }
  .scrolled .hint { opacity: 0; pointer-events: none; }
}
@keyframes hint { 50% { translate: -50% 6px; } }

/* ------------------------------------------------------------------ motion */
.js .slide .el.txt,
.js .slide .el.pic {
  opacity: 0; translate: 0 calc(1.6 * var(--cq));
  transition: opacity .6s ease var(--d), translate .9s var(--ease-out) var(--d);
}
.js .slide.is-in .el.txt,
.js .slide.is-in .el.pic { opacity: 1; translate: 0 0; }
.js .slide .el.bg img { scale: 1.07; transition: scale 2.6s cubic-bezier(.15, .7, .2, 1); transform-origin: 60% 55%; }
.js .slide.is-in .el.bg img { scale: 1; }

.js .slide .el.bubble, .js .slide .el.say {
  opacity: 1; translate: 0 0;
  scale: 0; transition: scale .55s var(--pop) calc(var(--d) + 450ms);
}
.js .slide.is-in .el.bubble, .js .slide.is-in .el.say { scale: 1; animation: bob 2.8s ease-in-out 1.6s infinite; }
.js .slide.is-in .el[data-id="101"], .js .slide.is-in .el[data-id="102"] { animation-delay: 2.3s; }
@keyframes bob { 50% { translate: 0 calc(-.55 * var(--cq)); } }

.js .m-card .m-it { opacity: 0; translate: 0 14px; transition: opacity .5s ease calc(var(--i, 0) * 70ms + 120ms), translate .7s var(--ease-out) calc(var(--i, 0) * 70ms + 120ms); }
.js .slide.is-in .m-card .m-it { opacity: 1; translate: 0 0; }
.js .m-card { opacity: 0; translate: 0 26px; transition: opacity .5s ease, translate .8s var(--ease-out); }
.js .slide.is-in .m-card { opacity: 1; translate: 0 0; }

.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js .slide .el, .js .slide .el img, .js .m-card, .js .m-card .m-it {
    transition: none !important; animation: none !important;
    opacity: 1 !important; translate: none !important; scale: none !important;
  }
  .hint { animation: none; }
  .stage canvas.embers { display: none; }
}