/* -------------------------------------------------------------------------------------------
 * Hand-written, no framework, no build step, no external fonts.
 *
 * Self-contained on purpose. The site loads nothing from a third party — no CDN, no web font, no
 * analytics script — which is what lets privacy.php say "this site sets no cookies and loads
 * nothing from anyone else" as a plain fact rather than an aspiration. A single Google Fonts link
 * would quietly make that sentence false.
 *
 * -------------------------------------------------------------------------------------------
 * On the palette
 * -------------------------------------------------------------------------------------------
 * There is no brand palette in this project to inherit. app/src/main/res/values/colors.xml is
 * still the untouched Android Studio template (purple/teal) and the app does not use it, and the
 * book artwork the app is built around is greyscale — white paper, near-black cover, grey fold
 * shading. So the neutrals below genuinely are the artwork's, and there is exactly one colour
 * decision here: --accent.
 *
 * That is deliberate given the app is going to be renamed. One token means the identity is one
 * edit rather than a repaint, and until the name lands the site reads as ink on paper, which is
 * what the app looks like anyway.
 *
 * TODO(brand): revisit --accent with the final name. Current value is a warm terracotta at 5.4:1
 * on white, so it is safe for body-sized text as well as for headings — do not replace it with
 * something lighter without re-checking that, since it is used on links.
 * ------------------------------------------------------------------------------------------- */

:root {
  --ink:        #16181d;
  --inkSoft:    #464a53;
  --muted:      #6b6f78;
  --paper:      #ffffff;
  --wash:       #f5f3ef;
  --washDeep:   #ebe7e0;
  --rule:       #dcd7cf;
  --accent:     #a8552f;
  --accentInk:  #7d3d21;
  --accentWash: #f8eee7;

  --shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .07);
  --radius: 14px;

  --wrap: 1120px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

/* The app is tablet-first and so is this, but a marketing page is read on everything. Dark mode
 * is here because someone reading this on a phone in a dim room is a plausible visitor whatever
 * the page is about — "a page about bedtime stories" is a positioning the app does not take — and
 * because it costs a variable block when the colours are already tokens. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f2efe9;
    --inkSoft:    #c3bdb3;
    --muted:      #9a948a;
    --paper:      #16171a;
    --wash:       #1d1f23;
    --washDeep:   #25272c;
    --rule:       #34373d;
    --accent:     #e79a72;
    --accentInk:  #f2b993;
    --accentWash: #2a221e;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Base                                                                                         */
/* ------------------------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.125rem)/1.65
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.18; letter-spacing: -.015em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }

p, ul, ol { margin: 0 0 1.1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accentInk); }

/* Never remove the focus ring — the app's own accessibility stance (buttons as the primary path,
 * not gestures) would be odd next to a site you cannot tab through. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

img, svg { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.skipLink {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 10;
}
.skipLink:focus { left: 0; top: 0; }

/* Environment banner — beta only, absent entirely in production.
 *
 * Deliberately the one thing on the site that is not in the palette above. Everything else here is
 * the artwork's neutrals plus a single accent, so a saturated bar reads as "not part of this
 * design" at a glance, which is the whole job: beta is a byte-for-byte copy on the same domain and
 * this is the only thing telling a tester which one they are looking at. Do not tidy it into the
 * palette. */
.envBanner {
  margin: 0;
  padding: .45rem 1rem;
  background: #6b2d8f; color: #fff;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------------------------------------- */
/* Header and footer                                                                            */
/* ------------------------------------------------------------------------------------------- */

.siteHeader { border-bottom: 1px solid var(--rule); background: var(--paper); }
.siteHeaderInner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem; flex-wrap: wrap;
}

.wordmark {
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}

.siteNav ul { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.siteNav a { color: var(--inkSoft); text-decoration: none; font-size: .95rem; }
.siteNav a:hover { color: var(--accent); }
.siteNav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* The language switcher.
 *
 * A row of plain links rather than a control: no JavaScript, and each language named by its own
 * endonym rather than a flag, which names a country instead of a language. It sits after the nav in
 * the same flex row, and `.siteHeaderInner` already wraps, so on a narrow screen it drops to a line
 * of its own rather than crushing the nav.
 *
 * Quieter than the nav on purpose — this is a way out for someone on the wrong page, not a
 * destination. The current language is marked but not emphasised, since the reader can see which
 * language they are reading.
 *
 * Two languages fit here comfortably and five may not; the note on storySiteLanguageSwitcher() in
 * lib/layout.php has what to do about that when it happens, and it is a <details> disclosure rather
 * than anything in this file. */
.langNav ul { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.langNav a {
  color: var(--inkSoft); text-decoration: none; font-size: .85rem;
  padding: .15rem .1rem; border-bottom: 1px solid transparent;
}
.langNav a:hover { color: var(--accent); }
.langNav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--rule); }
/* A separator between the languages, drawn rather than typed so it is not read out. */
.langNav li + li { border-left: 1px solid var(--rule); padding-left: .6rem; }

.siteFooter { border-top: 1px solid var(--rule); background: var(--wash); margin-top: 4rem; }
.siteFooterInner { padding-block: 2.5rem; display: grid; gap: .75rem; }
.footerBrand { font-weight: 700; margin: 0; }
.siteFooter ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.siteFooter a { color: var(--inkSoft); text-decoration: none; font-size: .95rem; }
.siteFooter a:hover { color: var(--accent); }
.footerNote { color: var(--muted); font-size: .875rem; margin: .5rem 0 0; }

/* ------------------------------------------------------------------------------------------- */
/* Sections                                                                                     */
/* ------------------------------------------------------------------------------------------- */

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
section.washed { background: var(--wash); }
.sectionLead { max-width: 46ch; color: var(--inkSoft); font-size: 1.08em; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; font-weight: 700;
  color: var(--accent); margin: 0 0 .75rem;
}

/* ------------------------------------------------------------------------------------------- */
/* Hero                                                                                         */
/* ------------------------------------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 7vw, 6rem); }
.heroGrid { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 860px) { .heroGrid { grid-template-columns: 1fr 1.05fr; } }

.heroLead { font-size: 1.15em; color: var(--inkSoft); max-width: 44ch; }

.heroArt { margin: 0; }
.heroArt img { width: 100%; display: block; filter: drop-shadow(0 18px 30px rgba(20,22,26,.14)); }

/* ------------------------------------------------------------------------------------------- */
/* Store badges                                                                                 */
/* ------------------------------------------------------------------------------------------- */

.storeBadges { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }

.storeBadge {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
a.storeBadge:hover { border-color: var(--accent); color: var(--accent); }

/* An unlisted store is a non-link, not a greyed-out link: a dead click is worse than an honest
 * label, and site.js counts every off-site anchor, so a placeholder href would also record an
 * outbound click that never happened. */
.storeBadgeSoon { color: var(--muted); background: transparent; cursor: default; }
.storeBadgeSoon em { font-style: normal; font-weight: 400; font-size: .82rem; opacity: .85; }

/* ------------------------------------------------------------------------------------------- */
/* Steps and cards                                                                              */
/* ------------------------------------------------------------------------------------------- */

.steps { display: grid; gap: 1.5rem; list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin-bottom: .9rem;
  border-radius: 999px; background: var(--accentWash); color: var(--accent);
  font-weight: 700; font-size: 1rem;
}
.steps h3 { margin-bottom: .35em; }
.steps p { color: var(--inkSoft); margin: 0; }

.cardGrid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 720px) { .cardGrid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--inkSoft); margin: 0; }

.optionList { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.optionList li { display: flex; gap: .6rem; align-items: baseline; color: var(--inkSoft); font-size: .95rem; }
.optionList strong { color: var(--ink); font-weight: 600; }
.optionList li::before { content: "—"; color: var(--rule); }

/* The age bands, given the whole width instead of a third of it.
 *
 * They were the third card of a three-card row and did not fit. Both halves of every entry are
 * long — "Independent readers (8–11)" against "A real plot, and jokes they get on their own" —
 * and at `--wrap` a third-width card leaves about 285px for the two of them on one `.optionList`
 * flex line, so all five wrapped into ragged four- and five-line blocks. The other two cards hold
 * single words and short fragments and were never the problem, which is why only this list moved
 * out; they share the row beneath it now.
 *
 * A label column and a note column, so the labels align down the page and each note gets the rest
 * of its line. That is what the list was always trying to be and what it could not be at a third
 * of the page. 15rem holds the longest label on one line — check that again if a band is renamed,
 * since a label that wraps here reintroduces exactly the raggedness this replaced.
 *
 * Below 620px the two halves stack and the rules between rows are what keeps them legible as
 * pairs: a fixed label column is what makes this a table, and there is no room for one on a phone.
 */
.bandList { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.bandList li { display: grid; gap: .15rem .9rem; color: var(--inkSoft); font-size: .95rem; }
.bandList li + li { border-top: 1px solid var(--rule); padding-top: .8rem; }
.bandList strong { color: var(--ink); font-weight: 600; }
@media (min-width: 620px) { .bandList li { grid-template-columns: 15rem 1fr; align-items: baseline; } }

/* A full-width card opening a section, and the pair that follows it. Only the three-choices
 * section uses these; `.cardGrid`'s hard three columns is still right everywhere else. */
.cardLead { margin-top: 2.5rem; }
.cardPair { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 720px) { .cardPair { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------------------------------- */
/* Mock screenshots                                                                             */
/* ------------------------------------------------------------------------------------------- */

.shotGrid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 2.5rem; }
@media (min-width: 780px) { .shotGrid { grid-template-columns: repeat(2, 1fr); } }

.shot { margin: 0; }
.shot img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--paper); box-shadow: var(--shadow);
}
.shot figcaption { margin-top: .75rem; color: var(--muted); font-size: .9rem; }

/* A single shot standing on its own rather than in the two-column grid — the German capture in
   "Two languages, kept separate". Capped and centred, because a lone landscape screenshot run to
   the full 1120px wrap is half again the size of the four in the grid above it and reads as the
   more important claim, which it is not. The caption centres with it. */
.shotWide { max-width: 40rem; margin: 2rem auto 0; }
.shotWide figcaption { text-align: center; }

/* ------------------------------------------------------------------------------------------- */
/* Privacy call-out on the home page                                                            */
/* ------------------------------------------------------------------------------------------- */

.pledge {
  background: var(--accentWash); border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem); margin-top: 2.5rem;
}
.pledge ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .pledge ul { grid-template-columns: repeat(2, 1fr); } }
.pledge li { display: grid; gap: .2rem; }
.pledge strong { font-size: 1.02rem; }
.pledge span { color: var(--inkSoft); font-size: .95rem; }

/* ------------------------------------------------------------------------------------------- */
/* Prose pages (privacy, terms, support)                                                        */
/* ------------------------------------------------------------------------------------------- */

.prose { padding-block: clamp(2.5rem, 6vw, 4rem); }
.prose .wrap { max-width: 68ch; }
.prose h2 { margin-top: 2.25em; }
.prose h3 { margin-top: 1.75em; }
.prose li { margin-bottom: .4em; }
.prose dl { margin: 0 0 1.5em; }
.prose dt { font-weight: 600; margin-top: 1em; }
.prose dd { margin: .2em 0 0; color: var(--inkSoft); }

.pageMeta { color: var(--muted); font-size: .9rem; margin-top: -.5em; }

.callout {
  border-left: 3px solid var(--accent); background: var(--wash);
  padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }

.plainTable { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; font-size: .95rem; }
.plainTable th, .plainTable td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.plainTable th { font-weight: 600; }

/* A table is the wrong shape below about 30rem; let it scroll rather than squash. */
.tableScroll { overflow-x: auto; }

@media (prefers-reduced-motion: no-preference) {
  a, .storeBadge { transition: color .15s ease, border-color .15s ease; }
}