:root{
  --night:#1c2a4a; --night2:#152038; --paper:#faf5ea; --card:#fffdf7;
  --ink:#2b2723; --muted:#7a715f; --line:#e9dfc9;
  --star:#f2a93b; --coral:#e2725b; --moss:#2e6e63;
  --r:18px; --shadow:0 10px 30px -18px rgba(28,42,74,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.7 Nunito,-apple-system,"Segoe UI",sans-serif;}
h1,h2,h3,.brand{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--moss)}
img{max-width:100%}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* ── night-sky header ─────────────────────────── */
.sky{background:
  radial-gradient(1.6px 1.6px at 12% 30%, #fff8 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 28% 62%, #fff6 50%, transparent 51%),
  radial-gradient(1.8px 1.8px at 43% 22%, #fff9 50%, transparent 51%),
  radial-gradient(1.1px 1.1px at 57% 55%, #fff5 50%, transparent 51%),
  radial-gradient(1.7px 1.7px at 71% 28%, #fff8 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 84% 60%, #fff7 50%, transparent 51%),
  radial-gradient(2px 2px at 93% 24%, #fff9 50%, transparent 51%),
  linear-gradient(160deg, var(--night) 0%, var(--night2) 100%);
  color:#f5f1e6}
.sky a{color:#f5f1e6}
nav{display:flex;align-items:center;gap:26px;padding:20px 0;flex-wrap:wrap}
nav .brand{display:flex;align-items:center;gap:12px;font-size:1.35rem;text-decoration:none}
nav .brand img{width:44px;height:44px;border-radius:14px;border:2px solid #ffffff2e}
nav .links{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto;font-size:.95rem;font-weight:700}
nav .links a{text-decoration:none;opacity:.85;padding:4px 2px;border-bottom:2px solid transparent}
nav .links a:hover,nav .links a.on{opacity:1;border-bottom-color:var(--star)}

/* hero */
.hero{padding:64px 0 84px;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.12;margin:0 0 18px}
.hero h1 em{font-style:italic;color:var(--star)}
.hero p.lead{font-size:1.16rem;opacity:.92;margin:0 0 28px;max-width:34em}
.hero .bit-card{justify-self:center;text-align:center}
.hero .bit-card img{width:min(260px,60vw);border-radius:32px;border:3px solid #ffffff24;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);transform:rotate(2deg)}
.hero .bit-card figcaption{margin-top:14px;font-size:.9rem;opacity:.75}
.btn{display:inline-block;background:var(--star);color:var(--night)!important;font-weight:800;
  text-decoration:none;padding:13px 26px;border-radius:999px;margin-right:12px;margin-bottom:8px}
.btn.ghost{background:transparent;color:#f5f1e6!important;border:2px solid #ffffff42}
.btn:hover{filter:brightness(1.06)}

/* page header (inner pages) */
.pagehead{padding:44px 0 52px}
.pagehead h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0 0 10px}
.pagehead p{margin:0;opacity:.85;max-width:44em}

/* ── main body ────────────────────────────────── */
main{padding:56px 0 30px}
section.block{margin:0 0 58px}
section.block>h2{font-size:1.7rem;margin:0 0 6px}
section.block>p.sub{color:var(--muted);margin:0 0 26px;max-width:46em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.ep{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
  transition:transform .18s ease}
.ep:hover{transform:translateY(-4px)}
.ep .thumb{aspect-ratio:16/10;background:var(--night2) center/cover no-repeat}
.ep .pad{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ep h3{margin:0;font-size:1.05rem;line-height:1.35}
.ep .tag{margin-top:auto;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.badge{display:inline-block;background:var(--night);color:#f5f1e6;border-radius:999px;
  padding:2px 12px;font-size:.78rem;font-weight:700;margin-right:6px}

/* language cards */
.langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.lang{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.lang .flag{font-size:2rem}
.lang h3{margin:10px 0 6px;font-size:1.3rem}
.lang p{margin:0 0 14px;color:var(--muted);font-size:.98rem}
.lang .cta{font-weight:800;text-decoration:none}
.lang.soon{opacity:.75;border-style:dashed}

/* prose pages */
.prose{max-width:800px}
.prose h2{font-size:1.35rem;margin:36px 0 10px}
.prose h3{font-size:1.05rem;margin:22px 0 6px}
.prose .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:22px 0}
.prose table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:#f4eddb}
.prose code{background:#f1ead8;padding:1px 7px;border-radius:6px;font-size:.88em}
.meta{color:var(--muted);font-size:.9rem}

/* stats strip */
.stats{display:flex;gap:38px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 30px;box-shadow:var(--shadow)}
.stat b{display:block;font-family:Fraunces,serif;font-size:1.9rem;color:var(--night)}
.stat span{color:var(--muted);font-size:.9rem}

/* footer */
footer{background:var(--night2);color:#cfd4e2;margin-top:40px;
  border-top:4px solid var(--star)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:46px 0 30px}
footer h4{color:#f5f1e6;font-family:Fraunces,serif;margin:0 0 12px;font-size:1.02rem}
footer a{color:#cfd4e2;text-decoration:none;display:block;padding:3px 0;font-size:.94rem}
footer a:hover{color:#fff}
footer .fine{border-top:1px solid #ffffff1a;padding:18px 0 30px;font-size:.85rem;color:#9aa3b8;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:840px){
  .hero{grid-template-columns:1fr;padding:44px 0 60px}
  footer .cols{grid-template-columns:1fr 1fr}
}