/* Series palette (motionkit THEME) + Inter. No framework. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f7f8f6;
  --ink: #1b263e;
  --muted: #566273;
  --hairline: #e2e7ec;
  --card: #ffffff;
  --teal: #2ba3a0;
  --teal-dark: #197674;
  --teal-tint: #e1f2f0;
  --ar-w: 16;
  --ar-h: 9;
}
html[data-orient="portrait"] { --ar-w: 9; --ar-h: 16; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.page {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right))
           max(22px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
}

.title {
  margin: 0;
  text-align: center;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* The stage takes all remaining height; the frame is the largest box of the
   video's aspect ratio that fits inside it (container query units). */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.frame {
  position: relative;
  width: min(100cqw, 100cqh * var(--ar-w) / var(--ar-h));
  aspect-ratio: var(--ar-w) / var(--ar-h);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 38, 62, .05), 0 10px 32px rgba(27, 38, 62, .08);
}
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
}

/* Before playback (and after the end): light scrim over the poster, and the whole poster
   area (minus the native control bar) is one big play target. */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 248, 246, .5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.frame.idle::after { opacity: 1; }
.bigplay {
  position: absolute;
  inset: 0 0 64px 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-top: 64px;          /* keeps the disc visually centred in the whole frame */
}
.bigplay .disc {
  display: grid;
  place-items: center;
  width: clamp(80px, 8cqw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .85), 0 10px 30px rgba(25, 118, 116, .35);
  transition: transform .15s ease, background-color .15s ease;
}
.bigplay svg { width: 56%; height: 56%; fill: #fff; margin-left: 6%; }
.bigplay:hover .disc { background: var(--teal-dark); transform: scale(1.04); }
.bigplay:focus-visible { outline: none; }
.bigplay:focus-visible .disc { outline: 3px solid var(--ink); outline-offset: 8px; }
.bigplay[hidden] { display: none; }

.chapters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chapters button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.chapters button:has(.num) { padding-left: 6px; }
.chapters .num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 700;
}
.chapters button:hover { background: var(--teal-tint); border-color: var(--teal-tint); }
.chapters button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.chapters button[aria-pressed="true"] .num { background: #fff; color: var(--teal-dark); }
.chapters button:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 2px; }

.noscript { text-align: center; color: var(--muted); }

/* Portrait (phones): video edge to edge, compact title, chapters in one swipeable row. */
html[data-orient="portrait"] .page {
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)) 0;
}
html[data-orient="portrait"] .title { font-size: 17px; padding: 0 16px; }
html[data-orient="portrait"] .frame {
  border-radius: 0;
  border-width: 1px 0;
  box-shadow: none;
}
html[data-orient="portrait"] .chapters {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 16px;
  gap: 8px;
  scroll-padding: 0 16px;
}
html[data-orient="portrait"] .chapters::-webkit-scrollbar { display: none; }
html[data-orient="portrait"] .chapters button { height: 40px; font-size: 14px; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Hide the browsers' own centre play glyph (Chrome mobile overlay, iOS start button):
   our big play button replaces it. The native control bar stays. */
video::-webkit-media-controls-overlay-play-button { display: none !important; }
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* Short landscape screens (phone held sideways): give the height to the video. */
@media (orientation: landscape) and (max-height: 520px) {
  .page { gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chapters { gap: 6px; flex-wrap: nowrap; }
  .chapters button { height: 34px; font-size: 13px; padding: 0 12px; }
  .chapters button:has(.num) { padding-left: 4px; }
  .chapters .num { width: 26px; height: 26px; font-size: 12px; }
}