/* ==========================================================================
   Granny Tales — grannytales.in
   One consolidated stylesheet. Written in source order (tokens, base, chrome,
   components, pages, motion) so a rule is changed where it is defined rather
   than overridden later.

   Stacking order used throughout:
     0  artwork backgrounds
     1  normal content
     2  edge foreground decoration   (.depth — never interactive)
    55  compact player
    60  site header
    70  drawer backdrop
    80  navigation drawer
   ========================================================================== */

/* ───────────────────────── tokens ───────────────────────── */

:root {
  --ivory: #FAF5EB;
  --ivory-sink: #F3EADA;
  --forest: #143D2B;
  --forest-deep: #0E2C1F;
  --terracotta: #B94E2F;
  --terracotta-dark: #9F4126;
  --gold: #B68B4C;
  --brown: #352C27;

  --ink: var(--brown);
  --ink-soft: rgba(53, 44, 39, 0.74);
  --ink-faint: rgba(53, 44, 39, 0.56);
  --rule: rgba(53, 44, 39, 0.16);
  --rule-faint: rgba(53, 44, 39, 0.08);
  --gold-rule: rgba(182, 139, 76, 0.45);

  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --editorial: 'Source Serif 4', Georgia, serif;
  --ui: 'DM Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 34rem;
  --header-h: 4.25rem;

  /* Motion. One set of durations, used everywhere, so nothing on the page
     moves at a speed nothing else uses. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-ui: 180ms;      /* colour and shadow on a control */
  --t-press: 110ms;   /* the push-down under a finger */
  --t-lift: 220ms;    /* a card rising under a pointer */
  --t-enter: 520ms;   /* something arriving on screen */
  --t-drawer: 250ms;
  --mini-h: 0px;

  color-scheme: light;
}

/* Native scripts: generous line-height, never letter-spaced, never clipped. */
[lang="kn"] { font-family: 'Noto Serif Kannada', serif; }
[lang="te"] { font-family: 'Noto Serif Telugu', serif; }
[lang="hi"] { font-family: 'Noto Serif Devanagari', serif; }
[lang="ml"] { font-family: 'Noto Serif Malayalam', serif; }
[lang="ta"] { font-family: 'Noto Serif Tamil', serif; }
[lang="kn"], [lang="te"], [lang="hi"], [lang="ml"], [lang="ta"] {
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
}

/* ───────────────────────── base ───────────────────────── */

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

/* The hidden attribute is a UA style that any author `display` rule would
   override. Pinning it here stops an off-screen panel from sizing the page. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Fragments land below the sticky header rather than under it. */
:target { scroll-margin-top: calc(var(--header-h) + 1rem); }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.6;
  padding-bottom: var(--mini-h);
}

body.drawer-open { overflow: hidden; }

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--forest); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--forest); text-underline-offset: .2em; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; }

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--forest); color: var(--ivory); padding: .75rem 1.25rem;
  z-index: 100; border-radius: 0 0 .5rem .5rem; font-size: .9375rem;
}
.skip-link:focus { transform: translate(-50%, 0); }

.wrap {
  width: 100%; max-width: 76rem; margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative; z-index: 1;
}

/* ───────────────────────── type scale ───────────────────────── */

.display-xl { font-size: clamp(2.25rem, 8.5vw, 3.9rem); line-height: 1.08; letter-spacing: -.012em; }
.display-l { font-size: clamp(1.75rem, 5.2vw, 2.6rem); line-height: 1.14; }
.display-m { font-size: clamp(1.375rem, 3.4vw, 1.75rem); line-height: 1.2; }
.display-s { font-size: 1.1875rem; line-height: 1.3; }

.lede { font-family: var(--editorial); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); max-width: var(--measure); }
.prose { font-family: var(--editorial); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); max-width: var(--measure); display: grid; gap: 1em; }
.prose.bullets { display: block; padding-left: 1.25rem; list-style: disc; }
.prose.bullets li { margin-bottom: .4rem; }
.meta { font-size: .875rem; color: var(--ink-faint); }
.eyebrow { font-family: var(--ui); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* ───────────────────────── header ───────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 245, 235, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-faint);
}

.header-in { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.brandmark { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; flex: 0 0 auto; }
.brandmark .portrait {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden;
  flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px var(--gold-rule); background: var(--ivory-sink);
}
/* cropped to the faces: the lettering baked into the lockup must never show */
.brandmark .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 1% 46%; }

.wordmark { font-family: var(--display); font-size: 1.4375rem; line-height: 1; color: var(--forest); white-space: nowrap; }
.wordmark .sp { display: inline-block; width: .26em; }

.site-nav { margin-left: auto; display: none; }
.site-nav ul { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { font-size: .9375rem; text-decoration: none; color: var(--ink-soft); padding-block: .5rem; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--gold); }

.btn-listen {
  display: none; border: 1.5px solid rgba(20, 61, 43, .35); color: var(--forest);
  background: transparent; border-radius: 999px; padding: .5rem 1rem;
  font-size: .875rem; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease), transform var(--t-press) var(--ease);
}
.btn-listen:hover { border-color: var(--forest); background: rgba(20, 61, 43, .05); }
.btn-listen:active { transform: scale(.98); }

/* one icon, one button — no per-span line styling */
.menu-toggle {
  margin-left: auto; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; color: var(--forest);
  background: transparent; border: 1px solid var(--rule); border-radius: .625rem; cursor: pointer;
}
.menu-toggle svg { width: 1.375rem; height: 1.375rem; }

@media (min-width: 60rem) {
  .site-nav { display: block; }
  .btn-listen { display: inline-block; }
  .menu-toggle { display: none; }
}

/* ───────────────────────── drawer ─────────────────────────
   An overlay panel from the right. It never participates in page flow, so it
   cannot push the page down. */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(53, 44, 39, .42);
  opacity: 0; transition: opacity var(--t-drawer) ease;
}
.drawer-backdrop[data-show="true"] { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(20rem, 82vw);
  background: var(--ivory);
  border-left: 1px solid var(--rule-faint);
  box-shadow: -18px 0 50px rgba(53, 44, 39, .22);
  transform: translateX(100%);
  transition: transform var(--t-drawer) var(--ease);
  display: flex; flex-direction: column;
  padding: max(1rem, env(safe-area-inset-top)) 0 calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--rule-faint);
}
.drawer-head .wordmark { font-size: 1.25rem; }
.drawer-close {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule); border-radius: 50%;
  cursor: pointer; color: var(--forest); flex: 0 0 auto;
}
.drawer-close svg { width: 1.125rem; height: 1.125rem; }

.drawer-list { padding: .5rem 0; }
.drawer-list a {
  display: block; padding: .9375rem 1.25rem; font-size: 1.0625rem;
  color: var(--forest); text-decoration: none;
  border-bottom: 1px solid var(--rule-faint);
}
.drawer-list a[aria-current="page"] { font-weight: 600; border-left: 3px solid var(--gold); padding-left: 1rem; }
.drawer-list a:hover { background: rgba(20, 61, 43, .05); }

/* ───────────────────────── buttons ───────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .875rem 1.75rem; border-radius: 999px;
  border: 1.5px solid transparent; font-family: var(--ui); font-size: 1rem;
  font-weight: 500; cursor: pointer; text-decoration: none; text-align: center;
}
.btn svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.btn {
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
              transform var(--t-press) var(--ease);
}
.btn:hover { box-shadow: 0 6px 18px rgba(53, 44, 39, .14); }
.btn:active { transform: scale(.98); box-shadow: none; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover, .btn.is-disabled:hover { box-shadow: none; }
.btn[disabled]:active, .btn[aria-disabled="true"]:active, .btn.is-disabled:active { transform: none; }
/* only a trailing arrow moves, and only far enough to read as a nudge */
.btn > svg:last-child:not(:first-child) { transition: transform var(--t-ui) var(--ease); }
.btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn-primary { background: var(--terracotta); color: var(--ivory); }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn-secondary { background: transparent; color: var(--forest); border-color: rgba(20, 61, 43, .35); }
.btn-secondary:hover { border-color: var(--forest); background: rgba(20, 61, 43, .04); }
.btn-forest { background: var(--forest); color: var(--ivory); }
.btn-sm { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .9375rem; }
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled { opacity: .45; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row .btn { flex: 1 1 13rem; }
.section-more { margin-top: 2rem; }
.section-more .btn { flex: 0 0 auto; }

.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--terracotta); text-decoration: underline; font: inherit; }

/* ───────────────────────── decoration ─────────────────────────
   Edge clusters. Never interactive, never over text, allowed to cross a
   section edge so they do not look trapped in one rectangle. */

/* Edge decoration may cross a section edge vertically, but must never widen
   the page: overflow-x: clip leaves the vertical axis visible. */
.band, .hero { position: relative; overflow-x: clip; }

.depth {
  position: absolute; z-index: 2; pointer-events: none;
  will-change: transform; line-height: 0;
}
.depth img { width: 100%; height: auto; }

.depth--hero-right { right: -2%; bottom: -6%; width: min(42%, 30rem); }
.depth--hero-left { left: -4%; bottom: -4%; width: min(26%, 17rem); }
.depth--band-right { right: -6%; top: -4%; width: min(26%, 19rem); opacity: .9; }
.depth--band-left { left: -7%; top: 34%; width: min(24%, 17rem); opacity: .85; }
.depth--band-left img, .depth--band-left-low img { transform: scaleX(-1); }
.depth--band-right-low { right: -5%; bottom: -5%; width: min(22%, 15rem); opacity: .85; }
.depth--band-left-low { left: -6%; bottom: -6%; width: min(20%, 14rem); opacity: .8; }
.depth--listen-left { left: -8%; bottom: 2%; width: min(18%, 12rem); opacity: .75; }
.depth--footer { left: -4%; bottom: -8%; width: min(22%, 16rem); opacity: .35; }

/* fewer, smaller layers on phones */
@media (max-width: 48rem) {
  /* Kept inside the hero: at a negative bottom it reached down over the
     heading of the section below, which on a phone sits close under it. */
  .depth--hero-right { width: 40%; right: -9%; bottom: 3%; }
  .depth--hero-left { width: 30%; left: -10%; bottom: 1%; }
  .depth--band-right { width: 30%; opacity: .62; top: auto; bottom: -3%; }
  /* nothing on the left: that is where every heading and button starts */
  .depth--band-left, .depth--band-right-low, .depth--band-left-low, .depth--listen-left { display: none; }
  .depth--footer { width: 34%; opacity: .25; }
}

/* ───────────────────────── sections ───────────────────────── */

.section { padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; }
.section-sink { background: var(--ivory-sink); }

.section-head { display: grid; gap: .75rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head.centred { justify-items: center; text-align: center; }
.section-head.centred .lede { margin-inline: auto; }

.ornament { display: flex; align-items: center; gap: .875rem; color: var(--gold); width: 100%; max-width: 20rem; }
.ornament::before, .ornament::after { content: ''; height: 1px; background: var(--gold-rule); flex: 1 1 auto; }
.ornament svg { width: .75rem; height: .75rem; flex: 0 0 auto; }
.section-head.centred .ornament { margin-inline: auto; }

/* ───────────────────────── hero ───────────────────────── */

.hero { padding-top: 1.75rem; position: relative; }
.hero-copy { display: grid; gap: 1.125rem; max-width: 32rem; }
.hero-rule { display: flex; align-items: center; gap: .75rem; color: var(--gold); max-width: 22rem; }
.hero-rule::before, .hero-rule::after { content: ''; height: 1px; background: var(--gold-rule); flex: 1 1 auto; }
.hero-rule svg { width: .875rem; height: .875rem; flex: 0 0 auto; }
.hero-explicit { font-size: .9375rem; color: var(--ink-soft); }
.hero-art { margin-top: 1.5rem; position: relative; }
.hero-art img { width: 100%; height: auto; }

@media (min-width: 62rem) {
  .hero { padding-top: 0; }
  .hero .wrap { padding-inline: 0; max-width: none; }
  .hero-art { margin-top: 0; }
  .hero-art img { width: 100%; max-height: 40rem; object-fit: cover; object-position: 70% center; }
  .hero-art::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 52%; pointer-events: none;
    background: linear-gradient(to right, var(--ivory) 18%, rgba(250, 245, 235, .82) 48%, rgba(250, 245, 235, 0) 100%);
  }
  .hero-copy {
    position: absolute; z-index: 3;
    left: max(var(--gutter), calc((100vw - 76rem) / 2 + var(--gutter)));
    top: 50%; transform: translateY(-50%);
    width: min(36%, 29rem); max-width: none;
  }
  .hero-copy .btn-row .btn { flex: 0 0 auto; }
  .hero .lede, .hero .hero-explicit { color: var(--ink); }
  .hero .btn-secondary { background: rgba(250, 245, 235, .9); }
  /* the copy occupies the lower left here, so the sprig would land on it */
  .depth--hero-left { display: none; }
}

/* ───────────────────────── language boards ───────────────────────── */

.lang-shelf {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  --shelf-gap: clamp(.75rem, 2.5vw, 1.75rem);
  gap: clamp(1rem, 3vw, 2rem) var(--shelf-gap);
}
.lang-shelf > li { flex: 0 1 calc(50% - var(--shelf-gap)); display: flex; }
@media (min-width: 48rem) { .lang-shelf > li { flex-basis: calc(33.3333% - var(--shelf-gap)); } }
@media (min-width: 62rem) { .lang-shelf > li { flex-basis: calc(20% - var(--shelf-gap)); } }

.lang-item {
  width: 100%; display: grid; gap: .5rem; justify-items: center;
  text-decoration: none; padding: .5rem .25rem 1rem; border-radius: 1rem;
}
.lang-art { width: 100%; position: relative; transition: transform 260ms cubic-bezier(.22, .61, .36, 1); }
.lang-art img { width: 100%; height: auto; }
.lang-art::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -.35rem; height: .6rem;
  background: radial-gradient(ellipse at center, rgba(53, 44, 39, .17), transparent 72%);
}
.lang-item:hover .lang-art, .lang-item:focus-visible .lang-art { transform: translateY(-6px); }
.lang-native { font-size: 1.3125rem; color: var(--forest); text-align: center; }
.lang-item:hover .lang-native { color: var(--terracotta); }
.lang-english { font-family: var(--ui); font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: center; }
@media (min-width: 48rem) { .lang-native { font-size: 1.1875rem; } }
@media (min-width: 62rem) { .lang-native { font-size: 1.375rem; } }

/* ───────────────────────── artwork window ─────────────────────────
   Always square for the square story illustrations. Proportions come from the
   container, never from mismatched width/height attributes. */

.artwin {
  aspect-ratio: 1; width: 100%; border-radius: 1rem; overflow: hidden;
  background: var(--ivory-sink); position: relative;
}
.artwin img { width: 100%; height: 100%; display: block; }
.artwin.is-blank {
  display: grid; place-items: center; color: rgba(20, 61, 43, .3);
  background: linear-gradient(160deg, #F2E8D5, #E7D9BE); border: 1px solid var(--rule-faint);
}
.artwin.is-blank svg { width: 34%; height: auto; }

/* ───────────────────────── homepage previews ───────────────────────── */

.preview-sample { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 48rem) { .preview-sample { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.preview-art { display: block; text-decoration: none; }
.preview-copy { display: grid; gap: .625rem; }

.story-grid { display: grid; gap: clamp(1rem, 3vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.story-card { display: grid; gap: .75rem; align-content: start; }
.story-art-link { display: block; text-decoration: none; }
.story-title { font-size: 1.1875rem; }
.story-title a { text-decoration: none; }
.story-title a:hover { color: var(--terracotta); }
.story-theme { font-family: var(--editorial); font-size: .9375rem; color: var(--ink-soft); }
.story-flags { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.badge {
  display: inline-block; font-family: var(--ui); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
}
.badge-free { background: rgba(20, 61, 43, .12); color: var(--forest-deep); }
.badge-locked { background: rgba(53, 44, 39, .1); color: var(--ink-soft); }
.badge-demo { background: rgba(182, 139, 76, .22); color: #6A4A17; border: 1px dashed rgba(106, 74, 23, .5); }
.badge-cat { background: rgba(20, 61, 43, .1); color: var(--forest-deep); }

/* ───────────────────────── grandmothers ───────────────────────── */

.granny-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.granny-grid-lg { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.granny { display: grid; gap: .75rem; align-content: start; }
.granny-portrait { aspect-ratio: 4 / 5; border-radius: 1rem; overflow: hidden; background: var(--ivory-sink); }
.granny-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.portrait-placeholder {
  display: grid; place-items: center; color: var(--forest);
  background: radial-gradient(120% 80% at 50% 18%, rgba(250, 245, 235, .9), transparent 70%),
              linear-gradient(165deg, #F1E7D4, #E3D3B6);
  border: 1px solid var(--rule-faint);
}
.portrait-placeholder svg { width: 42%; height: auto; }

.founder { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 56rem) { .founder { grid-template-columns: .8fr 1fr; } }
.founder-portrait { border-radius: 1.25rem; overflow: hidden; background: var(--ivory-sink); }
.founder-portrait img { width: 100%; height: auto; }
.founder .portrait-placeholder { aspect-ratio: 4 / 5; border-radius: 1.25rem; }

/* ───────────────────────── steps ───────────────────────── */

.steps { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps-lg { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--gold-rule); }
.step-no { font-family: var(--ui); font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--gold); }

/* ───────────────────────── listen index ───────────────────────── */

.listen-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-block: 2rem; }
.listen-card { display: grid; gap: 1rem; align-content: start; }
.listen-art { display: block; text-decoration: none; }
.listen-copy { display: grid; gap: .5rem; justify-items: start; }
.listen-lang { font-size: 1.25rem; color: var(--forest); }
.listen-en { font-family: var(--ui); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.listen-copy h2 a { text-decoration: none; }

/* ───────────────────────── listening page ─────────────────────────
   The frame is the stable outer structure; only the artwork inside changes. */

.listen-page { padding-top: 2rem; }
.listener { max-width: 30rem; margin-inline: auto; display: grid; gap: .625rem; justify-items: center; text-align: center; }

.frame {
  width: 100%; max-width: 22rem;
  padding: .55rem;
  border-radius: 46% 46% 1.25rem 1.25rem / 30% 30% 1rem 1rem;
  background: linear-gradient(165deg, #9A6639, #7C4F2B 55%, #8B5A31);
  box-shadow: 0 12px 34px rgba(53, 44, 39, .24), inset 0 0 0 1px rgba(250, 245, 235, .28);
}
.frame-inner { border-radius: 44% 44% .75rem .75rem / 28% 28% .6rem .6rem; overflow: hidden; background: var(--ivory-sink); }
/* the frame must not reshape its contents: the window keeps its own ratio */
.frame-inner .artwin { border-radius: 0; }

.listen-brand { font-family: var(--display); font-size: 1.0625rem; color: var(--forest); margin-top: 1rem; }
.listen-title { font-family: var(--display); font-size: clamp(1.875rem, 7vw, 2.5rem); line-height: 1.12; color: var(--forest); }
.listen-sub { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; justify-content: center; font-size: 1rem; color: var(--ink-soft); }
.listen-sub .dot-sep { color: var(--gold); }
.listen-native { font-size: 1.125rem; color: var(--ink-soft); }

.seek-wrap { width: 100%; margin-top: 1rem; }
.scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; background: transparent; cursor: pointer; margin: 0; }
.scrub::-webkit-slider-runnable-track { height: .375rem; border-radius: 999px; background: rgba(53, 44, 39, .16); }
.scrub::-moz-range-track { height: .375rem; border-radius: 999px; background: rgba(53, 44, 39, .16); }
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--terracotta); border: 2px solid var(--ivory); margin-top: -.375rem;
  box-shadow: 0 1px 3px rgba(53, 44, 39, .35);
}
.scrub::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--terracotta); border: 2px solid var(--ivory); }
.scrub[disabled] { opacity: .5; cursor: not-allowed; }
.times { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.transport { display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem, 6vw, 2.25rem); margin-top: .75rem; }
.round-ctrl {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--ivory); display: grid; place-items: center; cursor: pointer;
  color: var(--forest); flex: 0 0 auto;
}
.round-ctrl svg { width: 1.75rem; height: 1.75rem; }
.round-ctrl:hover { border-color: var(--forest); }
.round-main {
  width: 5rem; height: 5rem; background: var(--terracotta); border-color: transparent;
  color: var(--ivory); box-shadow: 0 6px 18px rgba(185, 78, 47, .3);
}
.round-main svg { width: 2.125rem; height: 2.125rem; }
.round-main:hover { background: var(--terracotta-dark); }

.transport-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.rate-pill {
  border: 1px solid var(--rule); background: var(--ivory); border-radius: 999px;
  padding: .5rem 1rem; min-height: 2.75rem; cursor: pointer; font-size: .9375rem;
  font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums;
}
.foot-sep { width: 1px; height: 1.5rem; background: var(--rule); }
.all-stories { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--forest); text-decoration: none; border-bottom: 2px solid var(--gold-rule); padding-bottom: .15rem; }
.all-stories svg { width: 1.125rem; height: 1.125rem; }
.all-stories:hover { border-bottom-color: var(--terracotta); }
.listen-note { margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-faint); max-width: 24rem; }

.unavailable {
  margin-top: 1.5rem; padding: 1.25rem; border-radius: 1rem;
  background: var(--ivory-sink); display: grid; gap: .75rem; justify-items: center; width: 100%;
}
.unavailable.locked { background: rgba(185, 78, 47, .07); border: 1px solid rgba(185, 78, 47, .2); }

.track-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; max-width: 36rem; margin-inline: auto; }
.track-nav a { display: grid; gap: .2rem; text-decoration: none; font-size: .9375rem; max-width: 45%; }
.track-nav-next { text-align: right; }
.listen-about { margin-top: 2.5rem; max-width: 30rem; margin-inline: auto; text-align: center; display: grid; gap: .4rem; }

/* ───────────────────────── collection ───────────────────────── */

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; font-size: .875rem; color: var(--ink-faint); }
.breadcrumb li + li::before { content: '›'; margin-right: .4rem; color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-faint); }

.collection-head { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .collection-head { grid-template-columns: .7fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); } }
.collection-head .lang-art { max-width: 20rem; margin-inline: auto; }
.collection-title { display: grid; gap: .5rem; }
.collection-title h1 { display: grid; gap: .25rem; }
.collection-title .native { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.4; color: var(--forest); }
.collection-title .latin-title { color: var(--ink-soft); font-size: 1.125rem; }

.tracklist { display: grid; }
.track {
  display: grid; grid-template-columns: 2rem 3.5rem minmax(0, 1fr) auto;
  gap: .75rem; align-items: center; padding: .75rem 0;
  border-bottom: 1px solid var(--rule-faint); min-height: 4.5rem;
}
.track.is-reserved { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.track-no { font-family: var(--ui); font-size: .8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.track-art { width: 3.5rem; height: 3.5rem; border-radius: .625rem; overflow: hidden; background: var(--ivory-sink); display: grid; place-items: center; color: rgba(20, 61, 43, .3); }
.track-art img { width: 100%; height: 100%; object-fit: cover; }
.track-art svg { width: 48%; height: auto; }
.track-main { display: grid; gap: .2rem; min-width: 0; }
.track-title { font-family: var(--display); font-size: 1.0625rem; color: var(--forest); text-decoration: none; }
.track-title:hover { color: var(--terracotta); }
.track-sub { font-size: .8125rem; color: var(--ink-faint); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.track.is-reserved .track-title { font-family: var(--ui); font-size: .9375rem; color: var(--ink-faint); }
.track.is-playing .track-title { color: var(--terracotta); }
.track-end { display: flex; align-items: center; gap: .6rem; }
.dur { font-variant-numeric: tabular-nums; }

.ctrl {
  width: 2.875rem; height: 2.875rem; border-radius: 50%; border: 1px solid var(--rule);
  background: transparent; display: grid; place-items: center; cursor: pointer;
  flex: 0 0 auto; color: var(--forest); text-decoration: none;
}
.ctrl svg { width: 1.125rem; height: 1.125rem; }
.ctrl:hover { border-color: var(--forest); }
.ctrl-main { background: var(--forest); border-color: transparent; color: var(--ivory); }
.ctrl-main:hover { background: var(--forest-deep); }
.ctrl[disabled] { opacity: .4; cursor: not-allowed; }

.catalogue-preview { margin-top: 1.5rem; border-top: 1px solid var(--rule-faint); }
.catalogue-preview summary { cursor: pointer; padding: 1rem 0; font-size: .9375rem; font-weight: 600; color: var(--forest); min-height: 3rem; display: flex; align-items: center; }
.catalogue-note { margin-bottom: .75rem; }

/* ───────────────────────── bundles and pricing ───────────────────────── */

.price { display: inline-block; min-width: 5.5ch; }
[data-market-price] { display: none; }
html[data-market="india"] [data-market-price="india"],
html[data-market="intl"] [data-market-price="intl"] { display: inline; }
html[data-market="unknown"] .price::after { content: '—'; color: var(--ink-faint); }
.price-none { color: var(--ink-faint); font-weight: 500; }

.tier-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tier-grid li { display: flex; }
.tier {
  width: 100%; border: 1px solid var(--rule); border-radius: 1.125rem; padding: 1.25rem;
  display: grid; gap: .5rem; align-content: start; background: var(--ivory); text-decoration: none;
}
.tier-name { font-family: var(--display); font-size: 1.1875rem; color: var(--forest); }
.tier-price { font-family: var(--ui); font-size: 1.5rem; font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; }
.tier-note { font-size: .875rem; color: var(--ink-faint); }
.tier-grid-lg .tier { padding: 1.5rem; }

.bundle-list { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.bundle-row {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  background: var(--ivory); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.125rem 1.25rem;
}
.bundle-main { flex: 1 1 16rem; min-width: 12rem; }
.bundle-title { font-family: var(--display); font-size: 1.1875rem; color: var(--forest); }
.bundle-note { font-size: .875rem; color: var(--ink-soft); margin-top: .2rem; }
.bundle-end { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bundle-price { font-family: var(--ui); font-size: 1.25rem; font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; }

.bundle-picker { background: var(--ivory); border: 1px solid var(--gold-rule); border-radius: 1.125rem; padding: clamp(1.125rem, 3vw, 1.75rem); display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; }
.pick {
  border: 1.5px solid var(--rule); border-radius: .875rem; padding: .875rem; background: transparent;
  cursor: pointer; text-align: left; display: grid; gap: .15rem; min-height: 5rem; align-content: center;
}
.pick[aria-pressed="true"] { border-color: var(--forest); background: rgba(20, 61, 43, .06); }
.pick-locked { border-color: var(--forest); background: rgba(20, 61, 43, .07); cursor: default; }
.pick[disabled]:not(.pick-locked) { opacity: .55; cursor: not-allowed; }
.pn { font-size: 1.125rem; color: var(--forest); }
.pe { font-family: var(--ui); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.pick-flag { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--forest); margin-top: .25rem; }

.summary { border: 1px solid var(--rule); border-radius: 1.125rem; padding: 1.25rem; display: grid; gap: .75rem; background: var(--ivory); }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; align-items: baseline; }
.sum-row > * { min-width: 0; }
/* a list of language names must wrap; only the figures stay on one line */
.sum-row .v { font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.sum-total .v { white-space: nowrap; }
.sum-total { border-top: 1px solid var(--rule); padding-top: .75rem; font-size: 1.1875rem; font-weight: 600; color: var(--forest); }
.offer-five { margin-top: 1rem; }
.offer-five .ack { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; font-size: .875rem; }

.pending {
  border-left: 3px solid var(--gold); background: rgba(182, 139, 76, .1);
  border-radius: 0 .625rem .625rem 0; padding: .875rem 1.125rem; font-size: .9375rem;
  color: #5A3F10; display: grid; gap: .35rem; max-width: var(--measure);
}
.pending-list { display: grid; gap: .35rem; font-size: .9375rem; margin-block: .75rem; }
.pending-list div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule-faint); padding-bottom: .35rem; }
.pending-list .v { color: var(--ink-faint); text-align: right; }

.preview-banner {
  border-left: 3px solid var(--terracotta); background: rgba(185, 78, 47, .08);
  border-radius: 0 .625rem .625rem 0; padding: .875rem 1.125rem; margin-bottom: 1.5rem;
  font-size: .9375rem; max-width: 42rem;
}
.needed { background: rgba(182, 139, 76, .2); border: 1px dashed rgba(106, 74, 23, .5); border-radius: .25rem; padding: 0 .3rem; font-size: .9em; color: #5A3F10; font-family: var(--ui); }

/* ───────────────────────── checkout ───────────────────────── */

.checkout { max-width: 42rem; }
.stepper { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.5rem 0; font-size: .8125rem; }
.stepper li { display: flex; align-items: center; gap: .45rem; color: var(--ink-faint); }
.stepper li[aria-current="step"] { color: var(--forest); font-weight: 600; }
.stepper .dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font-size: .6875rem; }
.stepper li[aria-current="step"] .dot { background: var(--forest); color: var(--ivory); border-color: var(--forest); }

.field { display: grid; gap: .375rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.field input, .contact-form textarea {
  min-height: 3.25rem; border: 1px solid var(--rule); border-radius: .75rem;
  background: var(--ivory); padding: .75rem 1rem; font: inherit; font-size: 1rem; color: var(--ink); width: 100%;
}
.contact-form { display: grid; gap: 1rem; margin-top: 1rem; max-width: 30rem; }
.contact-form textarea { min-height: 7rem; }

/* ───────────────────────── blog and policies ───────────────────────── */

.faq, .faq-section { max-width: 48rem; }
.faq-section { margin-top: 3rem; }
.faq-item { border-bottom: 1px solid var(--rule-faint); }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 1.125rem 0;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--display); font-size: 1.125rem; color: var(--forest);
}
.faq-a { padding-bottom: 1.25rem; font-family: var(--editorial); color: var(--ink-soft); max-width: var(--measure); }

.post-list { display: grid; gap: 2rem; margin-top: 2rem; }
.post-card { display: grid; gap: .5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule-faint); }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { color: var(--terracotta); }
.post-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .8125rem; color: var(--ink-faint); }
.draft-section { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--gold-rule); }

.article, .policy { max-width: 42rem; }
.article-head { display: grid; gap: .75rem; margin-bottom: 2rem; }
.byline { font-size: .875rem; color: var(--ink-faint); }
.article-body h2, .policy-body h2 { margin-top: 2rem; }
.article-body ul, .article-body ol { padding-left: 1.25rem; display: grid; gap: .4rem; }
.article-body blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--gold); color: var(--ink-soft); font-style: italic; }
.article-cta { margin-top: 2.5rem; padding: 1.5rem; background: var(--ivory-sink); border-radius: 1rem; display: grid; gap: .75rem; justify-items: start; }
.related { margin-top: 3rem; }
.policy-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-faint); }
.sitemap-grid { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 48rem) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sitemap-grid ul { padding-left: 1.25rem; display: grid; gap: .4rem; list-style: disc; }
.narrow-404 { max-width: 34rem; display: grid; gap: 1rem; }
.pricing-included, .pricing-pending { margin-top: 2.5rem; }

/* ───────────────────────── footer ───────────────────────── */

.site-footer {
  background: var(--forest-deep); color: rgba(250, 245, 235, .82);
  padding-block: clamp(2.5rem, 6vw, 4rem); margin-top: clamp(3rem, 8vw, 5rem);
  position: relative; overflow: hidden;
}
.site-footer a { color: rgba(250, 245, 235, .82); }
.site-footer h2, .site-footer .wordmark { color: var(--ivory); }
.site-footer h2 { font-family: var(--ui); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-grid ul { display: grid; gap: .625rem; margin-top: .875rem; }
.footer-grid a { font-size: .9375rem; }
.footer-blurb { margin-top: .75rem; font-size: .9375rem; max-width: 22rem; }
.footer-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(250, 245, 235, .16); font-size: .8125rem; color: rgba(250, 245, 235, .6); }

/* ───────────────────────── compact player ─────────────────────────
   Shown only when someone leaves a listening page while audio continues.
   It never expands on its own. */

.mini {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--forest-deep); color: var(--ivory);
  border-top: 1px solid rgba(250, 245, 235, .14);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mini-progress { height: .1875rem; background: rgba(250, 245, 235, .2); }
.mini-progress span { display: block; height: 100%; width: 0%; background: var(--terracotta); }
.mini-in { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding-block: .5rem; }
.mini-art { width: 2.5rem; height: 2.5rem; border-radius: .5rem; overflow: hidden; background: rgba(250, 245, 235, .12); }
.mini-art img { width: 100%; height: 100%; object-fit: cover; }
.mini-meta { min-width: 0; display: grid; text-decoration: none; color: inherit; }
.mini-title { font-family: var(--display); font-size: .9375rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sub { font-size: .75rem; color: rgba(250, 245, 235, .68); font-variant-numeric: tabular-nums; }
.mini-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: var(--ivory);
  color: var(--forest-deep); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
.mini-btn.ghost { background: transparent; color: var(--ivory); border: 1px solid rgba(250, 245, 235, .3); }
.mini-btn svg { width: 1rem; height: 1rem; }

/* ───────────────────────── motion ───────────────────────── */

.rise { opacity: 1; transform: none; }
html.anim .rise {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}
html.anim .rise.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .rise { transition: none; opacity: 1; transform: none; }
  .depth { transform: none !important; }
  .drawer, .drawer-backdrop { transition: none; }
  .lang-art { transition: none; }
}

/* short screens: let the listening page scroll rather than clip its controls */
@media (max-height: 34rem) {
  .listen-page { padding-block: 1rem; }
  .frame { max-width: 12rem; }
  .listen-title { font-size: 1.5rem; }
  .round-main { width: 4rem; height: 4rem; }
  .round-ctrl { width: 3rem; height: 3rem; }
}


/* ───────────────────────── reading Indic scripts ─────────────────────────
   Kannada, Telugu, Hindi, Malayalam and Tamil stack marks above and below the
   line. At the Latin line height the ascenders of one line touch the
   descenders of the one above, and Malayalam conjuncts are long enough to
   overhang a narrow column. */

[lang="kn"], [lang="te"], [lang="hi"], [lang="ml"], [lang="ta"] {
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.lang-native[lang], .listen-lang [lang] { line-height: 1.45; }
/* Malayalam words are the longest of the five; let one break rather than
   push the card wider than its column. */
[lang="ml"] { overflow-wrap: anywhere; }

/* ───────────────────────── above the fold on a phone ─────────────────────
   The first thing in <main> does not need a full section's worth of air
   above it: the sticky header already separates it from the top of the
   screen. */

main > .section:first-child,
main > .band:first-child,
main > .hero:first-child { padding-top: clamp(1.25rem, 4vw, 3.5rem); }

.breadcrumb { margin-bottom: .75rem; }

/* An in-page link must not stop under the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Room for a notch or a home indicator, on the two edges that reach them. */
.site-header .header-in { padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right)); }
.site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* ───────────────────────── language cards ─────────────────────────
   §4. The artwork is a flattened illustration with a brass pot and a stone
   base; it is never scaled on one axis, sheared or squashed. The card lifts,
   its shadow spreads, and on a device with a real pointer it tilts by less
   than a degree. */

.lang-item {
  transition: transform var(--t-lift) var(--ease);
}
.lang-art {
  transition: transform var(--t-lift) var(--ease);
  transform-origin: 50% 100%;             /* it pivots on the stone base */
}
.lang-art::after {
  transition: opacity var(--t-lift) var(--ease), transform var(--t-lift) var(--ease);
}
.lang-item:hover .lang-art::after,
.lang-item:focus-visible .lang-art::after { opacity: .9; transform: scaleX(1.12); }
.lang-item:focus-visible {
  outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 1rem;
}
.lang-item:active { transform: scale(.985); }
.lang-item:active .lang-art { transform: translateY(-2px); }
.lang-native { transition: color var(--t-ui) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .lang-item:hover .lang-art,
  .lang-item:focus-visible .lang-art { transform: translateY(-5px) rotate(-.5deg); }
}
@media not all and (pointer: fine) {
  /* a finger cannot hover: the feedback is the press, not a tilt */
  .lang-item:hover .lang-art { transform: none; }
}

/* ───────────────────────── entrance ─────────────────────────
   §3. Cards fade up together as a group, each a little after the one before.
   A delay only applies on the way in; it is cleared afterwards so a hover
   never waits for it. */

/* The group itself never fades; its children do, one shortly after the next.
   The arrival is a transition, not an animation: the .shown rule states the
   finished appearance outright, so a card is visible even if the transition
   never gets a frame to run in. app.js drops the attribute once they have
   arrived, so the stagger delay cannot linger and slow a later hover. */
html.anim .rise[data-stagger] { opacity: 1; transform: none; transition: none; }
html.anim .rise[data-stagger] > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
}
html.anim .rise[data-stagger].shown > * { opacity: 1; transform: none; }
html.anim .rise[data-stagger].shown > *:nth-child(2) { transition-delay: 70ms; }
html.anim .rise[data-stagger].shown > *:nth-child(3) { transition-delay: 140ms; }
html.anim .rise[data-stagger].shown > *:nth-child(4) { transition-delay: 210ms; }
html.anim .rise[data-stagger].shown > *:nth-child(5) { transition-delay: 280ms; }
html.anim .rise[data-stagger].shown > *:nth-child(n+6) { transition-delay: 350ms; }

/* §3 the page itself arrives, by less than a card does.
   Deliberately no fill-mode: with one, an animation that never gets a frame
   holds its first keyframe, and the whole page stays blank. Without one, the
   page is simply visible and the entrance is a bonus when it can run. */
html.anim main { animation: page-in 380ms var(--ease); }
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* §3 cards that are not in a staggered group still lift under a pointer */
@media (hover: hover) and (pointer: fine) {
  .story-card, .listen-card, .granny, .tier {
    transition: transform var(--t-lift) var(--ease), box-shadow var(--t-lift) var(--ease);
  }
  .story-card:hover, .listen-card:hover, .granny:hover, .tier:hover {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.anim .rise[data-stagger] > * { transition: none; transition-delay: 0ms; opacity: 1; transform: none; }
  html.anim main { animation: none; }
  .btn, .btn-listen, .lang-item, .lang-art, .lang-art::after, .lang-native,
  .story-card, .listen-card, .granny, .tier { transition: none; }
  .btn:active, .btn-listen:active, .lang-item:active { transform: none; }
  .btn:hover > svg:last-child:not(:first-child) { transform: none; }
  .lang-item:hover .lang-art, .lang-item:focus-visible .lang-art,
  .story-card:hover, .listen-card:hover, .granny:hover, .tier:hover { transform: none; }
}

/* ───────────────────────── decoration: the left margin ─────────────────────
   §5. Text, headings and buttons all start at the left edge of the content
   column, so a left-hand layer has only the page margin to live in. It is
   sized to that margin and nothing else: where the margin is too narrow to
   hold a sprig, none is drawn, rather than one laid over the words. */

@media (min-width: 48rem) {
  .depth--band-left,
  .depth--band-left-low,
  .depth--listen-left,
  .depth--footer {
    left: 0;
    width: max(0px, min(15rem, (100vw - 76rem) / 2 + var(--gutter) - .5rem));
  }
}

/* The first band on an inner page has the sticky header above it and its
   own heading inside it, with nothing in between. There is no room for a
   layer until the window is wide enough to give the content a real margin,
   so below that width none is drawn — and above it, it lives in the margin
   like every other side layer. */
main > .band:first-child > .depth,
main > .section:first-child > .depth { display: none; }

@media (min-width: 76rem) {
  main > .band:first-child > .depth,
  main > .section:first-child > .depth {
    display: block; top: 12%; bottom: auto;
    width: max(0px, min(12rem, (100vw - 76rem) / 2 + var(--gutter) - .5rem));
  }
  main > .band:first-child > .depth--band-right,
  main > .section:first-child > .depth--band-right { right: 0; left: auto; }
}