/* ==========================================================================
   IAIS deck engine: shared styles
   Stage scaling, slide stacking, fragments, motion control, toolbar, print. Slide-specific styles live beside each slide
   in index.html, keyed to the slide's id.
   ========================================================================== */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-400i-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-400i-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
  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;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-700i-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: block;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-700i-latin.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: block;
  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;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
  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;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
  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;
}

:root {
  --green: #2e4e42;
  --green-deep: #1a3a2e;
  --green-light: #d1e4dd;
  --green-pale: #e8f0ec;
  --yellow: #ffd800;
  --brown: #995d01;
  --ink: #2d2d2d;
  --gray: #484f4c;
  --white: #ffffff;
  --letterbox: #0b1813;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  background: var(--letterbox);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: none;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Stage: designed at 1920x1080, scaled to fit, letterboxed ---------- */

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transform: translate(-50%, -50%) scale(var(--scale, 0.5));
  overflow: hidden;
  background: var(--white);
}

/* Fit with exact-pixel centering (set by deck.js). */
.stage[data-fit] {
  left: var(--fit-x, 0);
  top: var(--fit-y, 0);
  transform: scale(var(--scale, 0.5));
}

.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--white);
  font-size: 32px;
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-in-out), visibility 0s linear .45s;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s var(--ease-in-out), visibility 0s;
  z-index: 2;
}

.slide h1, .slide h2, .slide h3, .slide p { margin: 0; }

/* Fragments: hidden until revealed. Unrevealed fragments are removed from
   the accessibility tree (visibility: hidden). */
.fragment {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.fragment.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s;
}

/* Progress rail: decorative. */
.progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 8px;
  width: 100%;
  z-index: 20;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: var(--yellow);
  transition: transform .6s var(--ease-out);
}

/* ---------- Motion off: manual (M) or system preference ---------- */

html.no-motion *, html.no-motion *::before, html.no-motion *::after,
html.instant *, html.instant *::before, html.instant *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}
html.no-motion .ambient, html.no-motion .ambient * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  html:not(.motion-on) .ambient, html:not(.motion-on) .ambient * { animation: none !important; }
}

/* ---------- Toolbar (pointer and keyboard users; auto-hides) ---------- */

.toolbar {
  position: fixed;
  left: 50%;
  bottom: 4px;
  align-items: center;
  z-index: 50;
  display: flex;
  gap: 8px;
  padding: 0 8px;
  height: 64px;
  border-radius: 14px;
  background: rgba(11, 24, 19, .92);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.toolbar.show, .toolbar:focus-within {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.toolbar button {
  appearance: none;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid #8fb5a6;
  border-radius: 10px;
  background: var(--green-deep);
  color: var(--white);
  font: 700 16px/1 "Atkinson Hyperlegible Next", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.toolbar button svg { width: 24px; height: 24px; }
.toolbar .tb-count {
  /* Fixed width so the buttons never move as the counter text changes (Jon, 2026-10-14). */
  display: inline-block; box-sizing: border-box; width: 12.5em; text-align: center; overflow: hidden;
  padding: 0 12px; color: var(--white); white-space: nowrap;
  font: 700 18px/1 "Atkinson Hyperlegible Next", sans-serif; font-variant-numeric: tabular-nums;
}
.toolbar .tb-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  border: 2px solid #8fb5a6; border-radius: 10px; background: var(--green-deep);
  color: var(--white); font: 700 16px/1 "Atkinson Hyperlegible Next", sans-serif; text-decoration: none; touch-action: manipulation;
}
.toolbar .tb-link:hover { background: var(--green); }
.toolbar button:hover { background: var(--green); }
.toolbar button[aria-pressed="false"] .motion-slash { display: block; }
.toolbar button .motion-slash { display: none; }

:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--green-deep);
}

/* ---------- Print: one slide per landscape page, final state ---------- */

@page { size: 1920px 1080px; margin: 0; }

@media print {
  html, body {
    height: auto !important;
    overflow: visible !important;
    background: var(--white) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .viewport { position: static !important; overflow: visible !important; }
  .stage, .stage[data-fit] {
    position: static !important;
    transform: none !important;
    width: 1920px !important;
    height: auto !important;
    overflow: visible !important;
  }
  .slide {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }
  .slide:last-of-type { break-after: auto; page-break-after: auto; }
  .fragment { opacity: 1 !important; visibility: visible !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .toolbar, .progress, [data-screen-only] { display: none !important; }
}