/* Shared notebook look: tokens (light = squared notebook, dark = chalkboard) and base elements. */
/* Fonts are served from assets/fonts (latin subset, OFL licences next to them), never from Google.
   Their URLs aren't versioned: to change a font, add a file with a new name. */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/baloo2-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-400-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-700-latin.woff2) format("woff2")}
:root{
  --paper:#f6f8fc; --grid:#dfe6f2; --card:#ffffff; --ink:#1c2848; --muted:#596583; --line:#ccd6e8;
  --red:#cf3b32; --ok:#16895a; --hl:#ffe14d; --on-hl:#2b2300; --on-mc:#ffffff;
  --len:#2a66d9; --mas:#d9661a; --cap:#08918f; --sup:#368f33; --vol:#7d44cc; --time:#c23a6b;
  --f-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --cw:2.6rem; --sh:24px; --sbase:56px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1c2d26; --grid:#24382f; --card:#243a30; --ink:#eef4ea; --muted:#a6b9ae; --line:#3a5447;
    --red:#ff8077; --ok:#6fdc9c; --hl:#ffe066; --on-hl:#2b2300; --on-mc:#10201a;
    --len:#82b2ff; --mas:#ffab68; --cap:#52d6cf; --sup:#92d882; --vol:#c6a0ff; --time:#ff8db4; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1c2d26; --grid:#24382f; --card:#243a30; --ink:#eef4ea; --muted:#a6b9ae; --line:#3a5447;
  --red:#ff8077; --ok:#6fdc9c; --hl:#ffe066; --on-hl:#2b2300; --on-mc:#10201a;
  --len:#82b2ff; --mas:#ffab68; --cap:#52d6cf; --sup:#92d882; --vol:#c6a0ff; --time:#ff8db4; color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background-color:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.wrap{width:100%;max-width:980px;margin:0 auto;padding-block:20px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
/* Footer at the bottom of the page, or of the screen when the page is short */
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}

/* Site pages: breadcrumbs and topic cards */
.crumb{display:inline-block;font-weight:700;font-size:.95rem;color:var(--muted);text-decoration:none;margin-bottom:6px}
.crumb:hover{color:var(--ink);text-decoration:underline}
.site-head h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:800}
.year{display:flex;flex-direction:column;gap:12px}
.year h2{font-size:1.6rem}
.year h2 a{text-decoration:none}
.year h2 a:hover{text-decoration:underline}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.topic{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--card);border:2px solid var(--ink);border-top:6px solid var(--mc);border-radius:16px;box-shadow:0 4px 0 var(--ink);text-decoration:none;transition:transform .12s}
.topic:hover{transform:translateY(-3px)}
.topic:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.topic-subject{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.topic-title{font-family:var(--f-display);font-weight:800;font-size:1.45rem;line-height:1.15}
.topic-desc{color:var(--muted)}

/* Language switch, top right of every page */
.topbar{width:100%;max-width:980px;margin:0 auto;padding-block:12px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:flex-end}
.site-footer{width:100%;max-width:980px;margin:auto auto 0;padding-top:16px;padding-bottom:max(32px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:center;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
.site-footer .doodle{display:inline-flex}
.site-footer .doodle svg{height:28px;width:auto}
.site-footer .brand{display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:700;text-decoration:none}
.site-footer .brand img{border-radius:4px}
.site-footer a.brand:hover{color:var(--ink);text-decoration:underline}
.site-footer a.brand:focus-visible{outline:3px solid var(--hl);outline-offset:2px;border-radius:4px}
.lang-switch{display:inline-flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--card)}
.lang-switch a{padding:2px 12px;font-family:var(--f-display);font-weight:800;font-size:.95rem;text-decoration:none;color:var(--ink)}
.lang-switch a+a{border-left:2px solid var(--ink)}
.lang-switch a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.lang-switch a:hover:not([aria-current="true"]){background:var(--hl);color:var(--on-hl)}
.lang-switch a:focus-visible{outline:3px solid var(--hl);outline-offset:-3px}