/* -------------------------------------------------------------------------------------------
 * 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 a phone at bedtime is a plausible reading context for a page about bedtime
 * stories, 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; }

.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); }

/* ------------------------------------------------------------------------------------------- */
/* 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; }

/* ------------------------------------------------------------------------------------------- */
/* 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; }
}