/* Armenian glyph coverage: system fonts cover this on macOS (Mshtakan) and
   Windows (Sylfaen). Before launch, self-host Noto Sans Armenian — the plan
   forbids a third-party font CDN, and mobile fallback is unreliable. */
/* The Armenian system fonts also carry digits and punctuation in a serif cut,
   so in "— $15" they won over the Latin font mid-line. This alias limits them
   to the Armenian block; everything else falls through to the system UI font. */
@font-face {
  font-family: 'Armenian Text';
  src: local('Noto Sans Armenian'), local('NotoSansArmenian-Regular'), local('Mshtakan'), local('Sylfaen');
  unicode-range: U+0530-058F, U+FB13-FB17;
}
@font-face {
  font-family: 'Armenian Text';
  font-weight: 600 800;
  src: local('Noto Sans Armenian Bold'), local('NotoSansArmenian-Bold'), local('Mshtakan Bold'), local('Mshtakan-Bold'), local('Sylfaen');
  unicode-range: U+0530-058F, U+FB13-FB17;
}

:root {
  --ink: #f4ece0;
  --ink-dim: #b9ab97;
  --bg: #14100e;
  --bg-2: #1e1815;
  --line: #3a302a;
  --gold: #e0a458;
  --gold-dim: #8c6a3a;
  --rose: #c97b6b;
  --radius: 14px;
  --font: 'Armenian Text', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── Pitch ─────────────────────────────────────────────── */
.pitch {
  background:
    radial-gradient(120% 90% at 20% 0%, #2b2119 0%, transparent 60%),
    linear-gradient(180deg, #1e1815, var(--bg));
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 8vw, 5.5rem) 1.25rem clamp(2rem, 5vw, 3.5rem);
}
.pitch__inner { max-width: 46rem; margin: 0 auto; }
.kicker {
  color: var(--gold); letter-spacing: .06em; font-size: 1.05rem;
  margin: 0 0 .75rem; text-transform: none;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__logo { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.brand__sub { font-size: .9em; }
.pitch h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); }
.lede { color: var(--ink-dim); font-size: clamp(1rem, 2.4vw, 1.15rem); max-width: 38rem; }

.demo-slot {
  margin: 2rem 0 1.75rem; padding: 1.25rem;
  border: 1px dashed var(--gold-dim); border-radius: var(--radius);
  background: rgba(224, 164, 88, .05);
}
.demo-slot__btn {
  background: none; border: 0; color: var(--gold);
  font-size: 1.05rem; padding: 0; display: inline-flex; gap: .6rem; align-items: center;
}
.demo-slot__btn:hover { color: var(--ink); }
.demo-slot__hint { margin: .4rem 0 0; color: var(--ink-dim); font-size: .85rem; }

.cta-open {
  background: var(--gold); color: #241a10; border: 0;
  padding: .85rem 1.6rem; border-radius: 999px; font-weight: 650; font-size: 1rem;
  min-height: 44px;
}
.cta-open:hover { background: #efb96f; }

/* ── Book pre-order: a mock spread, so the offer reads as a real book ── */
.book {
  margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.75rem; align-items: center;
}
.book__spread {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
  aspect-ratio: 2 / 1; background: #f3e6d0;
}
.book__art { width: 100%; height: 100%; object-fit: cover; display: block; }
.book__page {
  color: #3a2a1c; padding: .8rem .85rem; display: flex; flex-direction: column;
  justify-content: center; gap: .45rem;
  background: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 14%), #f3e6d0;
}
.book__hy { margin: 0; font-size: clamp(.68rem, 1.5vw, .82rem); line-height: 1.4; font-weight: 600; }
.book__en { margin: 0; font-size: clamp(.6rem, 1.3vw, .72rem); line-height: 1.35; color: #6b5440; font-style: italic; }
.book__qr {
  margin: .15rem 0 0; display: flex; align-items: center; gap: .4rem;
  font-size: clamp(.55rem, 1.2vw, .66rem); color: #7a5a35;
}
.book__copy h2 { font-size: clamp(1.2rem, 3vw, 1.45rem); margin-bottom: .4rem; }
.book__copy p { color: var(--ink-dim); margin: 0 0 1rem; }
.cta-open--book { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); }
.cta-open--book:hover { background: rgba(224, 164, 88, .12); }
.book__fine { font-size: .8rem; margin: .75rem 0 0 !important; }

/* ── Gate: the tap that tags a child-viewing session ───── */
.gate { padding: clamp(2rem, 6vw, 3.5rem) 1.25rem; text-align: center; }
.gate__btn {
  display: inline-flex; align-items: center; gap: 1rem; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.9rem; min-height: 44px;
  transition: border-color .15s, transform .15s;
}
.gate__btn:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.gate__icon {
  width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%;
  background: var(--gold); color: #241a10;
  display: grid; place-items: center; font-size: 1.1rem;
}
.gate__btn strong { display: block; font-size: 1.15rem; }
.gate__btn em { display: block; font-style: normal; color: var(--ink-dim); font-size: .9rem; }
.gate__note { color: var(--ink-dim); font-size: .85rem; margin: .9rem 0 0; }

/* ── Player ────────────────────────────────────────────── */
.player { max-width: 60rem; margin: 0 auto; padding: 0 1rem 4rem; }

.stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: #0d0b0a; isolation: isolate;
  /* A phone on its side is shorter than 16:9 of its width; crop, don't overflow. */
  max-height: 100dvh;
}
.stage__layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform, opacity;
  /* No CSS transition on transform: it is written every frame from audio time. */
}
.stage__tap { position: absolute; inset: 0; background: transparent; border: 0; z-index: 3; }
.stage__caption {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  z-index: 4; max-width: min(90%, 44rem); text-align: center;
  font-size: clamp(1rem, 2.6vw, 1.5rem); line-height: 1.35;
  padding: .5em .85em; border-radius: 10px;
  background: rgba(10, 8, 7, .72); text-wrap: balance;
}
.stage__caption:empty { display: none; }

.controls {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .9rem .25rem; border-bottom: 1px solid var(--line);
}
.btn {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  min-width: 44px; min-height: 44px; padding: 0 .75rem;
}
.btn:hover { border-color: var(--gold-dim); }
.btn--primary { background: var(--gold); color: #241a10; border-color: var(--gold); }
.btn--toggle[aria-pressed="false"] { opacity: .45; }
.btn:disabled { opacity: .45; cursor: default; }
.btn--close { display: none; }
.time { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 3.2rem; }
.scrub { flex: 1 1 8rem; accent-color: var(--gold); min-height: 44px; }

/* ── Voice switcher ────────────────────────────────────── */
.voices { padding: 1.5rem 0 .5rem; }
.voices__label { margin: 0 0 .7rem; color: var(--ink-dim); font-size: .95rem; }
.voices__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.voice {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  padding: .6rem 1.15rem; min-height: 44px; display: flex; flex-direction: column;
  align-items: flex-start; line-height: 1.25;
}
.voice small { color: var(--ink-dim); font-size: .78rem; }
.voice[aria-pressed="true"] { border-color: var(--gold); background: rgba(224, 164, 88, .14); }
.voice:hover { border-color: var(--gold-dim); }
.voices__hint { color: var(--ink-dim); font-size: .85rem; margin: .7rem 0 0; }

/* ── Episodes ──────────────────────────────────────────── */
.episodes { padding: 1.5rem 0; border-top: 1px solid var(--line); margin-top: 1.5rem; }
.episodes__label { margin: 0 0 .8rem; color: var(--ink-dim); font-size: .95rem; }
.episodes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ep {
  width: 100%; text-align: left; display: flex; gap: .95rem; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem; min-height: 44px;
}
.ep:hover { border-color: var(--gold-dim); }
.ep[aria-current="true"] { border-color: var(--gold); }
.ep img { width: 5.5rem; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; flex: none; }
.ep__title { font-weight: 600; }
.ep__sub { color: var(--ink-dim); font-size: .85rem; }

/* ── End card ──────────────────────────────────────────── */
.endcard {
  margin-top: 1.5rem; padding: 1.75rem; text-align: center;
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  background: rgba(224, 164, 88, .07);
}
.endcard p { color: var(--ink-dim); margin-top: 0; }
.endcard .endcard__book { margin: 1rem 0 0; font-size: .92rem; }
.link-btn {
  background: none; border: 0; padding: .25rem 0; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px; font-weight: 600; min-height: 44px;
}
.link-btn:hover { color: var(--ink); }

/* ── CTA dialog ────────────────────────────────────────── */
.cta {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); color: var(--ink);
  padding: 0; max-width: 30rem; width: calc(100% - 2rem);
}
.cta::backdrop { background: rgba(8, 6, 5, .78); }
.cta__form { padding: 1.75rem; display: grid; gap: .9rem; }
.cta__sub { margin: -0.6rem 0 .4rem; color: var(--ink-dim); }
.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: .35rem; accent-color: var(--gold); width: 1.1rem; height: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field span { color: var(--ink-dim); font-size: .9rem; }
.field input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); padding: .7rem .8rem; min-height: 44px; font: inherit;
}
.cta__price {
  font-size: .9rem; color: var(--ink-dim); background: rgba(224, 164, 88, .07);
  border-radius: 10px; padding: .85rem; margin: .2rem 0 0;
}
.cta__price strong { color: var(--ink); display: block; margin-bottom: .25rem; }
.cta__price code { color: var(--gold); }
.cta__fine { font-size: .8rem; color: var(--ink-dim); margin: .5rem 0 0; }
.cta__form > .cta__fine { margin: 0; }
.cta__actions { display: flex; gap: .6rem; margin-top: .4rem; }
.cta__thanks { color: var(--gold); margin: 0; }
.cta__thanks p { margin: 0 0 .4rem; }
.cta__code {
  font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: .08em;
  color: var(--ink); background: rgba(224, 164, 88, .12); padding: .1rem .45rem; border-radius: 6px;
}

.foot { color: var(--ink-dim); text-align: center; padding: 2rem 1rem 3rem; font-size: .85rem; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* Reduced motion: the scene still changes, the camera does not. The player
   also zeroes the transform at the source — this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .stage__layer { transform: none !important; }
  .gate__btn { transition: none; }
}

/* ── Phone held upright: the story fills the screen, like the ads ──────
   app.js sets body.immersive while the player is open on a portrait phone.
   The picture is fixed full-screen; the caption and the three voices sit at
   the bottom, play and the scrubber at the top. When an episode ends, the end
   card and the story list scroll up over the last picture. */
body.immersive { overflow: hidden; }
body.immersive .player {
  position: fixed; inset: 0; z-index: 20; max-width: none; margin: 0; padding: 0;
  background: #0d0b0a; overflow-y: auto; overscroll-behavior: contain;
}
body.immersive .stage { position: fixed; inset: 0; aspect-ratio: auto; border-radius: 0; }
body.immersive .stage::before,
body.immersive .stage::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
}
body.immersive .stage::before { top: 0; height: 8rem; background: linear-gradient(rgba(10, 8, 7, .6), transparent); }
body.immersive .stage::after {
  bottom: 0; height: 48%;
  background: linear-gradient(transparent, rgba(10, 8, 7, .55) 45%, rgba(10, 8, 7, .88));
}
body.immersive .stage__caption {
  bottom: calc(env(safe-area-inset-bottom) + 12.5rem); max-width: 92%;
  width: max-content; font-size: 1.3rem; padding: .55em .9em; border-radius: 14px;
  background: rgba(10, 8, 7, .62);
}

body.immersive .controls {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2; flex-wrap: nowrap; border: 0;
  padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem;
}
body.immersive .controls :is([data-back], [data-fwd], [data-elapsed], [data-captions], [data-fullscreen]) { display: none; }
body.immersive .controls .btn { background: rgba(30, 24, 21, .7); border-color: rgba(255, 255, 255, .14); }
body.immersive .controls .btn--primary { background: var(--gold); border-color: var(--gold); }
body.immersive .btn--close { display: inline-block; font-size: 1.1rem; }

body.immersive .voices {
  position: fixed; left: 1rem; right: 1rem; z-index: 2; padding: 0; text-align: center;
  bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
}
body.immersive .voices__label { color: #d8c8b2; margin-bottom: .6rem; }
body.immersive .voices__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
body.immersive .voice {
  align-items: center; justify-content: center; border-radius: 18px; padding: .8rem .3rem;
  min-height: 4.5rem; font-size: 1.15rem; font-weight: 600;
  background: rgba(30, 24, 21, .78); border-color: rgba(255, 255, 255, .14);
}
body.immersive .voice small { font-weight: 400; font-size: .8rem; color: #cdbda6; }
body.immersive .voice[aria-pressed="true"] { background: rgba(224, 164, 88, .26); border: 2px solid var(--gold); }
body.immersive .voices__hint { display: none; }

/* The story list and the end card wait for the end of an episode. */
body.immersive .episodes,
body.immersive .endcard { display: none; }
body.immersive .player[data-ended] {
  display: flex; flex-direction: column; padding-top: 38dvh;
}
body.immersive .player[data-ended] :is(.stage__caption, .voices) { display: none; }
body.immersive .player[data-ended] :is(.endcard, .episodes) {
  display: block; position: relative; z-index: 1; margin: 0; border-radius: 0; border: 0;
  background: rgba(20, 16, 14, .95); padding: 1.25rem 1rem;
}
body.immersive .player[data-ended] .endcard { order: 1; border-radius: 22px 22px 0 0; padding-top: 1.75rem; }
body.immersive .player[data-ended] .episodes {
  order: 2; padding-bottom: calc(env(safe-area-inset-bottom) + 2rem); border-top: 1px solid var(--line);
}

@media (max-width: 44rem) {
  .book { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 30rem) {
  .controls { gap: .35rem; }
  .time { min-width: 2.9rem; font-size: .82rem; }
  .ep img { width: 4.25rem; }
}