/* Shared styling for the grown-up text pages (privacy, mission).
 *
 * These are for adults, so they use ordinary reading sizes and a comfortable
 * measure rather than the big touch targets the child's menu needs. Font sizes
 * still go through calc(Npx * var(--ts,1)) so the text-scale setting works here
 * too — see CLAUDE.md §6b.
 */
:root {
  --sky: #a6d3e6; --sky2: #c9e4ef; --ink: #24333d; --tan: #e0b06a;
  --paper: #f3efe4; --line: rgba(36, 51, 61, .18); --grass: #8fbf6a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sky);
  line-height: 1.65;
  padding: max(18px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sheet {
  width: 100%;
  max-width: 660px;
  background: var(--paper);
  border-radius: 20px;
  padding: clamp(22px, 5vw, 44px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

.crumb {
  width: 100%;
  max-width: 660px;
  margin-bottom: 14px;
}
.crumb a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  background: rgba(243, 239, 228, .92);
  border: 1px solid var(--line); border-radius: 22px;
  color: var(--ink); text-decoration: none;
  font-size: calc(15px * var(--ts, 1)); font-weight: 700;
}
.crumb a:hover { background: #fff; }

h1 {
  font-size: calc(28px * var(--ts, 1));
  font-weight: 800; line-height: 1.25; margin-bottom: 6px;
}
.lede {
  font-size: calc(16px * var(--ts, 1));
  opacity: .75; margin-bottom: 26px;
}
h2 {
  font-size: calc(19px * var(--ts, 1));
  font-weight: 800; margin: 30px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: none; padding-top: 0; }
p { font-size: calc(16px * var(--ts, 1)); margin: 12px 0; }
ul { margin: 12px 0 12px 4px; list-style: none; }
li {
  font-size: calc(16px * var(--ts, 1));
  margin: 9px 0; padding-left: 30px; position: relative;
}
li::before { content: attr(data-mark); position: absolute; left: 0; }
strong { font-weight: 700; }
a { color: #8a5a12; }

.callout {
  background: #fff; border: 2px solid var(--tan); border-radius: 14px;
  padding: 16px 18px; margin: 20px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.stamp {
  font-size: calc(13px * var(--ts, 1));
  opacity: .65; margin-top: 30px;
  padding-top: 16px; border-top: 1px solid var(--line);
}

.play {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; margin-top: 26px; padding: 0 26px;
  background: var(--tan); color: var(--ink); text-decoration: none;
  border-radius: 18px; font-size: calc(18px * var(--ts, 1)); font-weight: 800;
  box-shadow: 0 4px 0 #b8802a;
}
.play:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8802a; }

/* ---- high contrast (shares the data-hc flag with the rest of the site) ---- */
html[data-hc="1"] body { background: #f7f4ea; }
html[data-hc="1"] .sheet,
html[data-hc="1"] .crumb a { background: #fff; border: 2px solid var(--ink); }
html[data-hc="1"] .lede,
html[data-hc="1"] .stamp { opacity: 1; }
html[data-hc="1"] .play { background: #b8802a; color: #fff; box-shadow: 0 4px 0 var(--ink); }
html[data-hc="1"] a { color: #6d4408; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }