@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/fraunces-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+2026 }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/fraunces-italic-latin.woff2) format('woff2') }
@font-face { font-family: 'Noto Serif Devanagari'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/noto-serif-devanagari.woff2) format('woff2') }

:root {
  --bg: #0b0b14; --ink: #ece9e4; --dim: #8a8ab0;
  --cyan: #63e6d3; --gold: #e6b17e; --purple: #b39dfb; --green: #7fd88f;
  --hair: #ffffff16;
  --serif: 'Fraunces', Georgia, serif;
  --devf: 'Noto Serif Devanagari', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--serif); font-weight: 350;
  font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0 auto; padding: 4rem 1.4rem 4rem }
.mono { font-family: var(--mono) }
.overline { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--purple); margin-bottom: 0.8rem }
h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); font-weight: 500; line-height: 1.15 }
.sub { color: var(--dim); margin-top: 0.9rem; max-width: 30em }

#langs { margin-top: 3.5rem }
.lang { display: block; text-decoration: none; color: var(--ink);
  padding: 1.8rem 0 2rem; border-top: 1px solid var(--hair) }
.lang:active { opacity: 0.8 }
.lang-head { display: flex; align-items: baseline; gap: 1rem }
.lang-name { font-size: 2.1rem; font-weight: 500 }
.lang.hindi .lang-name { font-family: var(--devf); color: var(--cyan) }
.lang.vlaams .lang-name { color: var(--gold) }
.lang-due { margin-left: auto; font-family: var(--mono); font-size: 0.85rem; color: var(--dim) }
.lang-due b { font-size: 1.6rem; font-weight: 400; color: var(--ink); margin-right: 0.3em }
.lang-due.zero b { color: var(--dim) }
.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 1.1rem; background: var(--hair) }
.bar i { display: block; height: 100% }
.bar .b-new { background: var(--newbar, #3a3a55) }
.bar .b-learning { background: var(--purple) }
.bar .b-mature { background: var(--green) }
.lang-meta { display: flex; gap: 1.4rem; margin-top: 0.6rem; font-family: var(--mono);
  font-size: 0.68rem; color: var(--dim); flex-wrap: wrap }
.lang-meta .k-learning { color: var(--purple) }
.lang-meta .k-mature { color: var(--green) }
footer { margin-top: 4rem; border-top: 1px solid var(--hair); padding-top: 1.2rem;
  font-size: 0.7rem; color: var(--dim) }

/* ---------- light mode (automatic) ---------- */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf7f1; --ink: #221f2e; --dim: #6c6a8a;
    --cyan: #0d7d6c; --gold: #a3641e; --amber: #a3641e;
    --purple: #6247c5; --green: #2c7d43; --hair: #00000019;
    --newbar: #d8d4e8;
  }
  .map .node circle { fill: var(--dim) }
  img { opacity: 1 !important }
}