@import url("assets/fonts.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{margin:0;background:#fff;font-family:"Montserrat",system-ui,sans-serif;
     -webkit-font-smoothing:antialiased}

/* One slide, one screen. The leftover strip above and below carries the
   slide's own edge colour, so slides never bleed into each other. */
.slide{height:100dvh;display:grid;place-items:center;scroll-snap-align:start;overflow:hidden}
#s1{background:linear-gradient(#f6b624 0 50%,#fefefe 50% 100%)}
#s2{background:linear-gradient(#fefefe 0 50%,#fffefe 50% 100%)}
#s3{background:linear-gradient(#fefefe 0 50%,#fefefe 50% 100%)}
#s4{background:linear-gradient(#ffffff 0 50%,#ffffff 50% 100%)}
#s5{background:linear-gradient(#fefefe 0 50%,#ffffff 50% 100%)}
#s6{background:linear-gradient(#ffffff 0 50%,#fefefe 50% 100%)}
#s7{background:linear-gradient(#fefefe 0 50%,#fefefe 50% 100%)}
#s8{background:linear-gradient(#fcf7e7 0 50%,#fdf7e7 50% 100%)}
#s9{background:linear-gradient(#fefefe 0 50%,#fefefe 50% 100%)}
#s10{background:linear-gradient(#fefefe 0 50%,#fefefe 50% 100%)}
#s11{background:linear-gradient(#fefefe 0 50%,#fffffe 50% 100%)}

/* the deck's canvas, fitted whole into the screen */
.canvas{position:relative;container-type:inline-size;
        width:100%;aspect-ratio:1440/810;max-height:100%}
/* No entrance animation on the slide itself: anything that starts a slide at
   opacity 0 can strand it there when the page is opened straight at an anchor.
   The snap between full screens is the transition. */
.plate{position:absolute;inset:0;width:100%;height:100%;display:block}

/* one span per word, placed where the PDF places it */
.t{position:absolute;white-space:pre;line-height:1.219;
   left:calc(var(--x) / 1440 * 100cqw);top:calc(var(--y) / 1440 * 100cqw);
   letter-spacing:calc(var(--ls, 0) / 1440 * 100cqw)}

.f0{font-family:"Montserrat";font-weight:600;font-size:calc(26.0 / 1440 * 100cqw);color:#f1ac0e}
.f1{font-family:"Montserrat";font-weight:500;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f2{font-family:"Montserrat";font-weight:700;font-size:calc(60.0 / 1440 * 100cqw);color:#f1ac0e}
.f3{font-family:"Montserrat";font-weight:700;font-size:calc(26.0 / 1440 * 100cqw);color:#f1ac0e}
.f4{font-family:"Montserrat";font-weight:500;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f5{font-family:"Open Sans";font-weight:500;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f6{font-family:"Montserrat";font-weight:500;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f7{font-family:"Montserrat";font-weight:700;font-size:calc(60.0 / 1440 * 100cqw);color:#f1ac0e}
.f8{font-family:"Montserrat";font-weight:600;font-size:calc(27.0 / 1440 * 100cqw);color:#000000}
.f9{font-family:"Montserrat";font-weight:700;font-size:calc(35.0 / 1440 * 100cqw);color:#f1ac0e}
.f10{font-family:"Montserrat";font-weight:700;font-size:calc(60.0 / 1440 * 100cqw);color:#000000}
.f11{font-family:"Montserrat";font-weight:700;font-size:calc(60.0 / 1440 * 100cqw);color:#f1ac0e}
.f12{font-family:"Noto Sans";font-weight:700;font-size:calc(60.0 / 1440 * 100cqw);color:#f1ac0e}
.f13{font-family:"Montserrat";font-weight:500;font-size:calc(17.0 / 1440 * 100cqw);color:#000000}
.f14{font-family:"Montserrat";font-weight:700;font-size:calc(52.0 / 1440 * 100cqw);color:#000000}
.f15{font-family:"Montserrat";font-weight:600;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f16{font-family:"Montserrat";font-weight:500;font-size:calc(17.0 / 1440 * 100cqw);color:#000000}
.f17{font-family:"Montserrat";font-weight:600;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f18{font-family:"Montserrat";font-weight:600;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f19{font-family:"Montserrat";font-weight:500;font-size:calc(23.0 / 1440 * 100cqw);color:#000000}
.f20{font-family:"Montserrat";font-weight:500;font-size:calc(26.0 / 1440 * 100cqw);color:#000000}
.f21{font-family:"Montserrat";font-weight:500;font-size:calc(23.0 / 1440 * 100cqw);color:#000000}
.f22{font-family:"Montserrat";font-weight:600;font-size:calc(30.0 / 1440 * 100cqw);color:#ffffff}
.f23{font-family:"Montserrat";font-weight:700;font-size:calc(50.0 / 1440 * 100cqw);color:#000000}
.f24{font-family:"Montserrat";font-weight:500;font-size:calc(30.0 / 1440 * 100cqw);color:#000000}
.f25{font-family:"Montserrat";font-weight:700;font-size:calc(50.0 / 1440 * 100cqw);color:#000000}

/* slide index */
.nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:10;
     display:flex;flex-direction:column;gap:9px}
.nav a{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.22);
       transition:background .2s,transform .2s}
.nav a:hover{background:rgba(0,0,0,.45)}
.nav a.on{background:#f1ac0e;transform:scale(1.5)}

/* share the deck itself, not the page */
.share{position:fixed;right:22px;bottom:22px;z-index:20;font-family:"Montserrat",sans-serif}
.share__btn{display:flex;align-items:center;gap:9px;border:0;cursor:pointer;
  padding:12px 18px;border-radius:999px;background:#f1ac0e;color:#1a1a1a;
  font:600 14px/1 "Montserrat",sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.share__btn:hover{background:#ffbe23;transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.share__btn:active{transform:translateY(0)}
.share__btn svg{width:17px;height:17px;flex:none}
.share__menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:236px;
  background:#fff;border-radius:14px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.2);
  display:none}
.share[open] .share__menu{display:block}
.share__menu button,.share__menu a{display:flex;width:100%;align-items:baseline;gap:8px;
  border:0;background:none;cursor:pointer;text-align:left;text-decoration:none;
  padding:11px 13px;border-radius:9px;color:#1a1a1a;
  font:500 14px/1.25 "Montserrat",sans-serif}
.share__menu button:hover,.share__menu a:hover{background:#fdf3dc}
.share__menu [hidden]{display:none}   /* beats the display:flex above */
.share__menu small{color:#8a8a8a;font-size:12px;font-weight:500}
.share__note{padding:3px 13px 9px;color:#8a8a8a;font:500 11px/1.35 "Montserrat",sans-serif}
@media (max-width:760px){.share{right:14px;bottom:14px}}
html.flat .share{display:none}


/* Below this width the 16:9 slide is too small to snap to; let it scroll. */
@media (max-width:760px){
  html{scroll-snap-type:none}
  .slide{height:auto}
  .canvas{width:100vw;opacity:1;transform:none}
  .nav{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ?flat — slides stacked at natural height, for pixel-diffing against the PDF */
html.flat{scroll-snap-type:none}
html.flat .slide{height:auto;background:none}
html.flat .canvas{width:100vw;opacity:1;transform:none}