/* Feed my prout's public pages (site/, built by tools/site/build.sh): the welcome page and the parents' page. The same
   look as the game and as store/privacy.html: its colours, its three fonts (served with the game, /play/fonts/), light
   or dark as the phone says. */
:root {
  --bg: #FFEDE8; --bg-2: #FFDDD4; --card: #FFF8F5; --ink: #34152F; --ink-soft: #6B4663; --line: #34152F;
  --gas: #A3C72C; --gas-ink: #4A6311; --gold: #FFBF1F; --chili: #E4472A; --lime: #C6F03A;
  --f-logo: "Rubik Bubbles", "Bagel Fat One", system-ui, sans-serif;
  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1E0E1C; --bg-2: #2A1529; --card: #331A31; --ink: #FFE8E1; --ink-soft: #D4B4CA; --line: #F2CCDD;
    --gas: #B4DA3C; --gas-ink: #C6EA5C; --gold: #FFC93D; --chili: #FF6A47; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 24px 56px; }
.wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }
a { color: inherit; }
b, strong { font-weight: 900; }
:focus-visible { outline: 3px solid var(--chili); outline-offset: 2px; }
.logo { font: 400 clamp(38px, 10vw, 60px)/1 var(--f-logo); margin: 0; }
.studio { margin: 4px 0 0; font: 400 18px/1.2 var(--f-display); color: var(--gas-ink); }
.langs { display: flex; justify-content: center; gap: 10px; }
.langs a, .pill { font-weight: 900; font-size: 15px; text-decoration: none; border: 2px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--card); color: var(--ink); }
.langs a:hover, .langs a:focus-visible { background: var(--gold); color: #34152F; }

/* the welcome page */
.hero { display: grid; gap: 14px; justify-items: center; text-align: center; }
.hero .icon { width: 112px; height: 112px; border-radius: 30%; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.banner { width: 100%; height: auto; aspect-ratio: 1024 / 500; border: 3px solid var(--line); border-radius: 22px; box-shadow: 0 5px 0 var(--line); display: block; }
.pitch { font: 400 clamp(20px, 4.6vw, 26px)/1.3 var(--f-display); margin: 0; text-wrap: balance; }
.lede { margin: 0; font-weight: 700; color: var(--ink-soft); max-width: 56ch; }
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn { font: 400 22px/1 var(--f-display); text-decoration: none; color: #34152F; background: var(--gas); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 5px 0 var(--line); padding: 16px 26px 13px; }
.btn:hover, .btn:focus-visible { transform: translateY(2px); box-shadow: 0 3px 0 var(--line); }
.soon { font: 400 17px/1 var(--f-display); color: var(--ink-soft); border: 3px dashed var(--line); border-radius: 18px; padding: 15px 20px 12px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.points li { background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; }
.points b { font: 400 18px/1.2 var(--f-display); }
.points span { font-size: 15px; color: var(--ink-soft); font-weight: 700; }
footer { text-align: center; font-size: 15px; color: var(--ink-soft); display: grid; gap: 8px; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-weight: 900; }
footer nav a { text-decoration-color: var(--gas); text-decoration-thickness: 3px; text-underline-offset: 3px; }
[lang="fr"].only, [lang="en"].only { display: none; }
html[data-l="en"] [lang="en"].only, html[data-l="fr"] [lang="fr"].only { display: revert; }
html[data-l="en"] .acts [lang="en"].only, html[data-l="fr"] .acts [lang="fr"].only { display: inline-block; }

/* the parents' page (generated from docs/parents.md) */
section.lang { background: var(--card); border: 3px solid var(--line); border-radius: 22px; box-shadow: 0 5px 0 var(--line); padding: 22px 20px 18px; }
section.lang h1 { font: 400 clamp(26px, 6vw, 34px)/1.15 var(--f-display); margin: 0; text-wrap: balance; }
section.lang h2 { font: 400 21px/1.25 var(--f-display); margin: 26px 0 6px; }
section.lang p { margin: 8px 0; }
section.lang ul { margin: 8px 0; padding-left: 22px; }
section.lang li { margin: 4px 0; }
.home { text-align: center; }