/* Hatchling website: shared styles. Every page links this file. */
:root{
  color-scheme:light dark;
  --bg:#f4f1e6; --card:#fffaf0; --ink:#2c3a1f; --soft:#5a6845; --line:#e6dcc4;
  --leaf:#3f8f3d; --leaf-deep:#2f6f2e; --leaf-ink:#fff; --chip:#eef5dc; --chip-line:#d6e3b8;
  --sun:#f59e2b; --sky:#cfe9f3; --grass:#a9c45a; --grass-deep:#86a843;
  --radius:26px; --wrap:1080px; --text:760px;
  --font-head:"Baloo 2",ui-rounded,system-ui,sans-serif;
  --font-body:Nunito,ui-rounded,system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141a10; --card:#1e2618; --ink:#eef3e2; --soft:#b5c2a0; --line:#2e3a25;
  --leaf:#6cc06a; --leaf-deep:#3f8f3d; --leaf-ink:#0f1a0c; --chip:#25311d; --chip-line:#34442a;
  --sky:#1d2b33;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--leaf)}
h1,h2,h3{font-family:var(--font-head);line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(16px,env(safe-area-inset-left))}
.text{max-width:var(--text);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:9;background:var(--card);padding:8px 12px;border-radius:10px}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 1.25rem var(--font-head);margin-right:auto}
.brand img{width:36px;height:36px;border-radius:10px}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;padding:8px 12px;border-radius:99px}
.site-nav a:hover,.site-nav a[aria-current=page]{background:var(--chip)}
@media (max-width:620px){.site-nav{width:100%;justify-content:space-between;padding-bottom:8px}.site-nav a{padding:6px 8px;font-size:.9rem}}

/* Buttons and cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:18px;font:700 1.08rem var(--font-head);text-decoration:none;border:0;cursor:pointer}
.btn-go{background:var(--leaf);color:var(--leaf-ink);box-shadow:0 5px 0 var(--leaf-deep)}
.btn-go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--leaf-deep)}
.btn-soft{background:var(--chip);color:var(--ink);border:1px solid var(--chip-line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 10px 26px rgba(50,70,20,.10)}
.pill{display:inline-block;background:var(--chip);border:1px solid var(--chip-line);border-radius:99px;padding:4px 12px;font-weight:700;font-size:.85rem}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
section.band{padding:56px 0}

/* Legal and help pages (privacy, terms, support) */
.doc{max-width:var(--text);margin:0 auto;padding:8px 16px 56px}
.doc h1{margin:32px 0 8px}
.doc .lede{font-size:1.2rem;color:var(--soft);margin:0 0 8px}
.doc .updated{color:var(--soft);font-size:.9rem;margin:0 0 24px}
.doc section{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 22px 8px;margin:0 0 14px}
.doc h2{font-size:1.3rem}
.doc ul{padding-left:20px;margin:0 0 14px}.doc li{margin:0 0 8px}

/* App Store badge placeholder */
.store{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;border-radius:14px;padding:10px 18px;text-decoration:none;min-height:56px}
.store svg{width:26px;height:26px;fill:#fff}
.store small{display:block;font-size:.72rem;opacity:.8;line-height:1}
.store b{display:block;font:600 1.15rem/1.15 -apple-system,system-ui,sans-serif}
.store[aria-disabled=true]{opacity:.92;cursor:default}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--soft);font-size:.92rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-foot a{color:var(--soft)}
.site-foot .fine{width:100%;font-size:.82rem}

/* Living dino meadow scene (used on Home and About). Layer positions come from layers.json. */
.scene{position:relative;overflow:hidden;background:linear-gradient(#f6e6ee,#efe3ea)}
.scene .stage{position:relative;width:100%;aspect-ratio:3168/1344;--px:0;--py:0}
@media (max-width:760px){.scene .stage{width:190%;margin-left:-45%}}
.scene .layer{position:absolute;will-change:transform}
.scene .sky{left:-2%;top:-2%;width:104%;height:57.73%;overflow:hidden;transform:translate(calc(var(--px)*-4px),calc(var(--py)*-2px))}
.scene .track{display:flex;width:184.36%;height:100%;animation:hl-drift 90s linear infinite}
.scene .track img{width:50%;height:100%;max-width:none;object-fit:cover}
.scene .land{left:-1.5%;top:-1.5%;width:103%;height:103%;transform:translate(calc(var(--px)*-9px),calc(var(--py)*-4px))}
.scene .land img,.scene .sprite img{width:100%;height:100%;max-width:none}
.scene .sprite{transform:translate(calc(var(--px)*var(--d)*-1px),calc(var(--py)*var(--d)*-.45px))}
.scene .sprite img{transform-origin:50% 100%}
.scene .rex{--d:16;left:9.28%;top:17.86%;width:25.82%;height:58.78%}
.scene .rex img{animation:hl-breathe 4.6s ease-in-out infinite,hl-nod 9s ease-in-out infinite}
.scene .brach{--d:13;left:68.53%;top:13.91%;width:24.87%;height:62.87%}
.scene .brach img{animation:hl-sway 7.5s ease-in-out infinite}
.scene .stego{--d:14;left:61.3%;top:41.29%;width:13.86%;height:26.26%}
.scene .stego img{animation:hl-breathe 3.8s ease-in-out -1.2s infinite}
.scene .family{--d:26;left:38.57%;top:12.35%;width:24.87%;height:85.34%;filter:drop-shadow(0 10px 14px rgba(40,60,20,.28))}
.scene .motes{position:absolute;inset:0;pointer-events:none}
.scene .motes i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,250,220,.95),rgba(255,250,220,0) 70%);animation:hl-float 12s linear infinite;opacity:0}
.scene .fade{position:absolute;left:0;right:0;bottom:-1px;height:24%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
@keyframes hl-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes hl-breathe{0%,100%{scale:1 1}50%{scale:1.012 1.028}}
@keyframes hl-nod{0%,100%{rotate:0deg}50%{rotate:-1.6deg}}
@keyframes hl-sway{0%,100%{rotate:-.9deg}50%{rotate:1.1deg}}
@keyframes hl-float{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}85%{opacity:.7}100%{transform:translate(40px,-160px);opacity:0}}
@media (prefers-reduced-motion:reduce){.scene .track,.scene .sprite img,.scene .motes i{animation:none}}