:root{
    --bg:#ECF0F3; --surface:#FFFFFF; --sunk:#F4F7F9;
    --ink:#16263A; --ink-soft:#4B5C70; --ink-faint:#7C8CA0;
    --line:#D2DAE1; --line-firm:#B7C3CE;
    --accent:#6A3FC0; --accent-wash:#EFE9FB;
    --early:#1F6F4A; --early-wash:#DFEEE6;
    --mid:#9A6008;   --mid-wash:#F6EBD6;
    --late:#5A6B7E;  --late-wash:#E5EAEF;
    --f-display:'Big Shoulders Display','Haettenschweiler','Arial Narrow',sans-serif;
    --f-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
    --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0E1826; --surface:#152134; --sunk:#101B2A;
      --ink:#E7EDF3; --ink-soft:#9FB0C2; --ink-faint:#6E8098;
      --line:#28394E; --line-firm:#37495F;
      --accent:#8A5CE0; --accent-wash:#241C3B;
      --early:#5FBE92; --early-wash:#13291F;
      --mid:#DCA746;   --mid-wash:#2C2214;
      --late:#8FA3B8;  --late-wash:#1B2836;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0E1826; --surface:#152134; --sunk:#101B2A;
    --ink:#E7EDF3; --ink-soft:#9FB0C2; --ink-faint:#6E8098;
    --line:#28394E; --line-firm:#37495F;
    --accent:#8A5CE0; --accent-wash:#241C3B;
    --early:#5FBE92; --early-wash:#13291F;
    --mid:#DCA746;   --mid-wash:#2C2214;
    --late:#8FA3B8;  --late-wash:#1B2836;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  @media (prefers-reduced-motion: reduce){ *{ transition-duration:.001ms !important; } }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body);
        font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; }
  h1,h2{ font-family:var(--f-display); text-transform:uppercase; margin:0;
         letter-spacing:.015em; text-wrap:balance; }
  p{ margin:0; }
  a{ color:var(--accent); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  .wrap{ max-width:780px; margin-inline:auto; padding:clamp(28px,5vw,60px) clamp(20px,5vw,36px) 90px; }

  .head{ border-bottom:2px solid var(--ink); padding-bottom:26px; }
  .kicker{ font-family:var(--f-mono); font-size:.71rem; letter-spacing:.15em;
           text-transform:uppercase; color:var(--accent); }
  .head h1{ font-size:clamp(2.4rem,6.5vw,3.7rem); line-height:.95; margin:14px 0 16px; }
  .deck{ font-size:1.12rem; color:var(--ink-soft); max-width:58ch; }

  .intro{ margin-top:30px; }
  .intro p + p{ margin-top:18px; }
  .intro strong{ font-weight:600; }

  .group{ margin-top:46px; }
  .ghead{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
          border-bottom:1px solid var(--line-firm); padding-bottom:11px; margin-bottom:4px; }
  .ghead h2{ font-size:1.4rem; }
  .lat{ font-family:var(--f-mono); font-size:.66rem; font-weight:600; letter-spacing:.1em;
        text-transform:uppercase; padding:.32em .6em; white-space:nowrap; border-radius:2px; }
  .lat.-early{ color:var(--early); background:var(--early-wash); }
  .lat.-mid{ color:var(--mid); background:var(--mid-wash); }
  .lat.-late{ color:var(--late); background:var(--late-wash); }
  .gnote{ color:var(--ink-soft); font-size:.95rem; margin-top:14px; }

  .src{ padding:17px 0; border-bottom:1px solid var(--line); }
  .src .nm{ font-weight:600; }
  .src .what{ color:var(--ink-soft); font-size:.95rem; margin-top:4px; }
  .src .tag{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em;
             color:var(--ink-faint); margin-top:6px; display:block; }

  .closing{ margin-top:52px; background:var(--surface); border:1px solid var(--line);
            border-left:3px solid var(--accent); padding:22px 24px; }
  .closing p + p{ margin-top:14px; }
  .closing strong{ font-weight:600; }

  .foot{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
         font-size:.9rem; color:var(--ink-soft); }

  /* --- site nav --- */
  .sitebar{ border-bottom:1px solid var(--line); background:var(--bg); }
  .sitebar-in{ max-width:780px; margin-inline:auto; padding:15px clamp(20px,5vw,36px);
               display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
  .brand svg{ width:22px; height:26px; flex:none; display:block; }
  .brand span{ font-family:var(--f-display); font-weight:800; font-size:1.06rem; letter-spacing:.03em; }
  .sitebar a.back{ font-family:var(--f-mono); font-size:.75rem; color:var(--ink-faint); text-decoration:none; }
  .sitebar a.back:hover{ color:var(--accent); }