/* ── Amyra — "the space between" (love → wonder). Mirrors the app's twilight
   design tokens (client/src/index.css); light + dark, theme-aware. ── */
:root {
  --bg: #fbf7f3;        /* warm paper */
  --surface: #ffffff;
  --ink: #2a2230;       /* deep plum-charcoal */
  --muted: #8a7f88;     /* warm mauve-grey */
  --line: #ebe4de;      /* warm hairline */
  --rose: #d86084;      /* you — Amyra rose (love) */
  --violet: #8a68d2;    /* them — violet (wonder) */
  --gold: #e0a84a;      /* warmth / appreciation */
  --dusk: #7a60b2;      /* depth */
  --note-bg: #fff7f4;
  --note-line: #f0d8cd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16102c;      /* deep twilight — a night sky for two */
    --surface: #281f44; /* a lifted panel of night */
    --ink: #f4eeff;     /* starlight */
    --muted: #a59ac8;   /* mauve starlight */
    --line: #3c325c;    /* violet hairline */
    --rose: #ff7aa8;
    --violet: #b884ff;
    --gold: #ffcb6b;
    --dusk: #9678d6;
    --note-bg: #2b2046;
    --note-line: #4a3a6a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  /* the "space between" — a breath of warmth at the top, depth at the foot */
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(216, 96, 132, 0.06), transparent 58%),
    radial-gradient(110% 70% at 50% 112%, rgba(122, 96, 178, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  line-height: 1.65;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 22px 80px; }

/* ── The Amyra wordmark — the name in the love→wonder gradient, over the gold bloom ── */
header.brand { text-align: center; margin-bottom: 34px; }
.bloom {
  display: block;
  margin: 0 auto 10px;
  color: var(--gold);
  filter: drop-shadow(0 0 5px rgba(224, 168, 74, 0.55));
}
.logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(96deg, var(--rose), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 { font-family: Georgia, serif; font-weight: 600; font-size: 30px; letter-spacing: -0.01em; margin: 8px 0 4px; }
h2 { font-family: Georgia, serif; font-weight: 600; font-size: 20px; margin: 30px 0 8px; }
.updated { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
a { color: var(--rose); }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; margin: 18px 0; }
.nav { text-align: center; margin-top: 40px; font-size: 14px; }
.nav a { margin: 0 10px; }
ul { padding-left: 20px; }
.note { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 14px; padding: 14px 18px; }

/* ── The language bar. These pages are the one part of Amyra a person can land
   on WITHOUT the app having ever asked their language — a Play listing link, a
   search result — so every page carries its own way out of a language you
   cannot read. Names are written in their own script for the same reason the
   in-app escape pill is (v6.6): a script you recognise is the affordance. ── */
.langbar {
  text-align: center;
  margin: -14px 0 26px;
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
}
.langbar a, .langbar strong { margin: 0 7px; white-space: nowrap; }
.langbar a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.langbar a:hover { color: var(--rose); border-bottom-color: var(--rose); }
.langbar strong { color: var(--ink); font-weight: 600; }

/* The "this is a translation" note — present, but never louder than the text. */
.note.translated { font-size: 14px; color: var(--muted); margin-bottom: 22px; }

/* Devanagari hangs from the shirorekha, so negative tracking cuts words apart
   (the v6.5 share-card lesson); and Georgia carries no Devanagari or CJK
   glyphs, so the serif headings must name a family that actually has them. */
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="zh"] h1, html[lang="zh"] h2 { letter-spacing: normal; }
html[lang="hi"] h1, html[lang="hi"] h2 { font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", system-ui, sans-serif; }
html[lang="zh"] h1, html[lang="zh"] h2 { font-family: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif; }

/* "This page is also available in …" — the offer made to someone whose device
   language is not the page they landed on. Hidden without JS, never a redirect. */
.offer { text-align: center; margin: -20px 0 14px; font-size: 14px; }
.offer a { color: var(--rose); text-decoration: none; border-bottom: 1px solid currentColor; }