/* Hearthfall site. Palette from the app (src/constants/theme.ts). No external scripts. */
:root{
  --bg:#FBF6EF; --card:#FFFFFF; --sel:#F3EBDF; --border:#EEE4D6;
  --text:#2E2420; --text2:#6F6157; --accent:#C9532A; --accent-fill:#EE6E45; --on-accent:#2A1209;
  --link:#B5441D;
  --shadow:0 6px 24px rgba(107,74,51,.12);
  --font-body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Fredoka",ui-rounded,"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16110E; --card:#221B17; --sel:#2E2520; --border:#362C26;
    --text:#F6ECE3; --text2:#B4A498; --accent:#FF8D65; --accent-fill:#FF8D65; --on-accent:#2A1209;
    --link:#FF9E7B; --shadow:0 6px 24px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--font-body)}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,8vw,3.4rem)} h2{font-size:1.6rem;margin-top:2em} h3{font-size:1.2rem}
a{color:var(--link);text-underline-offset:.15em} a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--text);padding:.6rem 1rem;z-index:10}
.skip:focus{left:8px;top:8px}
.wrap{max-width:46rem;margin:0 auto;padding:0 1rem}
.wide{max-width:64rem}

/* Twilight hero */
.hero{color:#FFF3E6;text-align:center;padding:3.5rem 1rem 6rem;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#1E1B3A 0%,#4A3470 38%,#B05A6E 72%,#F2A06B 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,transparent,var(--bg))}
.hero .stars{position:absolute;inset:0;opacity:.7;pointer-events:none;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 30% 8%,#fff,transparent),
  radial-gradient(1px 1px at 55% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 12%,#fff,transparent),
  radial-gradient(1px 1px at 90% 28%,#fff,transparent),radial-gradient(1px 1px at 68% 6%,#fff,transparent),radial-gradient(1px 1px at 20% 34%,#fff,transparent)}
.hero>*{position:relative}
.logo{width:96px;height:96px;border-radius:22px;box-shadow:0 8px 28px rgba(0,0,0,.35);margin:0 auto 1.25rem;display:block}
.tagline{font-size:1.25rem;max-width:34rem;margin:0 auto 1.5rem;color:#FFE9D6}
.badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;
  border-radius:999px;padding:.55rem 1.2rem;font-weight:700}

main{padding-bottom:3rem}
.lede{font-size:1.2rem;color:var(--text2);text-align:center;margin:1rem auto 2rem;max-width:38rem}
.features{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.features{grid-template-columns:1fr 1fr}}
.features li{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.features strong{display:block;font-family:var(--font-head);font-weight:600;font-size:1.15rem;margin-bottom:.2rem}
.features span{color:var(--text2)}
.pledge{background:var(--sel);border-radius:18px;padding:1.2rem 1.4rem;margin-top:2rem}
.pledge h2{margin-top:0;font-size:1.3rem}
.btn{display:inline-block;background:var(--accent-fill);color:var(--on-accent);font-weight:800;text-decoration:none;
  border-radius:999px;padding:.7rem 1.4rem}

header.top{background:linear-gradient(180deg,#1E1B3A,#4A3470);color:#FFF3E6;padding:1rem}
header.top .wrap{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:space-between}
header.top a{color:#FFF3E6;text-decoration:none;font-family:var(--font-head);font-weight:600;font-size:1.25rem}
header.top nav a{font-family:var(--font-body);font-size:1rem;font-weight:700;margin-left:1rem;text-decoration:underline}
footer{border-top:1px solid var(--border);padding:1.5rem 1rem 2.5rem;text-align:center;color:var(--text2);font-size:.95rem}
footer a{color:var(--link)}
footer nav{margin-bottom:.5rem}
footer nav a{margin:0 .6rem}

.prose ul{padding-left:1.2rem} .prose li{margin:.5rem 0}
.prose code{background:var(--sel);padding:.1em .35em;border-radius:5px;font-size:.92em}
.meta{color:var(--text2);font-style:italic}

details{background:var(--card);border:1px solid var(--border);border-radius:14px;margin:.7rem 0;padding:0 1.1rem}
summary{cursor:pointer;font-weight:800;padding:.9rem 0;list-style-position:outside}
details[open] summary{border-bottom:1px solid var(--border);margin-bottom:.8rem}
details p,details ol,details ul{margin:.5rem 0 1rem}
.contact{background:var(--sel);border-radius:18px;padding:1.2rem 1.4rem;margin-top:2rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}