:root {
  --bg:#0b0d10; --ink:#e8eef5; --muted:#9fb2c6;
  --card:#12161b; --accent:#66d9ef; --pill:#1b2129;
  --ring:#2d9cdb;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell}
.wrap{max-width:960px;margin:auto;padding:24px}

/* Header / brand */
header{padding:24px 0 8px}
.brand{display:flex;align-items:center;gap:16px}
.brandmark img{display:block;width:56px;height:56px}
.titles h1{margin:0 0 6px;font-size:40px;letter-spacing:.2px}
.lead{margin:0;color:var(--muted);font-size:18px}

/* Top nav pills */
.pill{margin-left:auto}
.pill a{
  display:inline-block;margin-left:8px;padding:8px 12px;border-radius:999px;
  background:var(--pill);color:var(--ink);text-decoration:none
}
.pill a:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* Content */
main .wrap{padding-top:8px}
h2{margin:32px 0 8px;font-size:22px}
section, .foot{background:var(--card);border-radius:12px;padding:16px;margin:16px 0}
ul.grid{list-style:disc;padding-left:22px}
a{color:var(--accent)}
a:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* Footer alignment fix: footer has its own container; .foot is the card */
footer{padding:8px 0 32px}
.foot{text-align:center}

a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{height:auto}

/* Content wrap (already present) */
main .wrap { max-width: 960px; margin: 0 auto; padding: 12px 16px 28px; }

/* Footer alignment: .wrap sits on container; .foot is the card */
footer .wrap { max-width: 960px; margin: 0 auto; padding: 12px 16px; }
.foot { text-align: center; }

/* --- Responsive header fixes (mobile) --- */
@media (max-width: 640px){
  .brand{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }

  /* Keep logo first; give title its own full row */
  .brandmark{ order:1; }
  .titles{ order:2; flex:1 1 100%; min-width:0; }
  .titles h1{ font-size:32px; line-height:1.2; margin:0; }
  .lead{ font-size:16px; line-height:1.4; }

  /* Move pills below title; let them wrap */
  .pill{
    order:3;
    margin-left:0;          /* was auto */
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-start; /* change to center if you prefer */
  }
}

/* Ultra-small screens */
@media (max-width: 400px){
  .titles h1{ font-size:28px; }
}

/* --- Final mobile header override (last in file, wins cascade) --- */
@media (max-width: 640px){
  .container.brand{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
  .container.brand .brandmark{ order:1; }
  .container.brand .titles{ order:2; flex:1 1 100%; min-width:0; }
  .container.brand .titles h1{ font-size:32px; line-height:1.2; margin:0; word-break:break-word; }
  .container.brand .lead{ font-size:16px; line-height:1.4; }
  .container.brand .pill{
    order:3;
    margin-left:0;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-start;
  }
}
@media (max-width: 400px){
  .container.brand .titles h1{ font-size:28px; }
}

/* --- Mobile header: lock child order & rows --- */
@media (max-width: 640px){
  .container.brand{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }

  /* Default: everything comes after the title unless overridden */
  .container.brand > * { order: 2; }

  /* Logo first */
  .container.brand .brandmark{ order: 1; }

  /* Title block: its own full row */
  .container.brand .titles{ order: 2; flex: 1 1 100%; min-width: 0; }
  .container.brand .titles h1{ font-size:32px; line-height:1.2; margin:0; word-break:break-word; }

  /* Pills row: full width, below title */
  .container.brand .pill{
    order: 3;
    margin-left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;   /* or center */
  }

  /* Any theme/mode toggle (adjust class if yours differs) */
  .container.brand .mode,
  .container.brand .theme,
  .container.brand .toggle { order: 4; }
}

/* Ultra-small screens */
@media (max-width: 400px){
  .container.brand .titles h1{ font-size:28px; }
}

/* --- Final mobile header order & wrap --- */
@media (max-width: 700px){
  .container.brand{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
  .container.brand .brandmark{ order:1 !important; }
  .container.brand .titles{ order:2 !important; flex:1 1 100%; min-width:0; }
  .container.brand .titles h1{ font-size:32px; line-height:1.2; margin:0; }
  .container.brand .lead{ font-size:16px; line-height:1.4; }

  /* Nav (no .pill in markup) */
  .container.brand nav{
    order:3 !important;
    margin-left:0 !important;
    width:100% !important;
    display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
  }
}
@media (max-width: 400px){
  .container.brand .titles h1{ font-size:28px; }
}

/* --- Final mobile header order & wrap --- */
@media (max-width: 700px){
  .container.brand{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
  .container.brand .brandmark{ order:1 !important; }
  .container.brand .titles{ order:2 !important; flex:1 1 100%; min-width:0; }
  .container.brand .titles h1{ font-size:32px; line-height:1.2; margin:0; }
  .container.brand .lead{ font-size:16px; line-height:1.4; }

  /* Nav (no .pill in markup) */
  .container.brand nav{
    order:3 !important;
    margin-left:0 !important;
    width:100% !important;
    display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
  }
}
@media (max-width: 400px){
  .container.brand .titles h1{ font-size:28px; }
}

/* Fix: anchor offset so "Read the Overview" shows heading correctly */
[id] {
  scroll-margin-top: 96px;   /* desktop header offset */
}

@media (max-width: 640px) {
  [id] {
    scroll-margin-top: 72px; /* mobile header offset */
  }
}

html {
  scroll-behavior: smooth;
}