:root{
    --bg:#ECF0F3; --surface:#FFFFFF;
    --ink:#16263A; --ink-soft:#4B5C70; --ink-faint:#7C8CA0;
    --line:#D2DAE1; --line-firm:#B7C3CE;
    --accent:#6A3FC0;
    --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;
      --ink:#E7EDF3; --ink-soft:#9FB0C2; --ink-faint:#6E8098;
      --line:#28394E; --line-firm:#37495F;
      --accent:#8A5CE0;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0E1826; --surface:#152134;
    --ink:#E7EDF3; --ink-soft:#9FB0C2; --ink-faint:#6E8098;
    --line:#28394E; --line-firm:#37495F;
    --accent:#8A5CE0;
  }

  *,*::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:17.5px; line-height:1.72; -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:680px; margin-inline:auto; padding:clamp(30px,5vw,64px) clamp(20px,5vw,36px) 90px; }

  .head{ border-bottom:1px solid var(--line-firm); padding-bottom:28px; }
  .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:15px 0 16px; }
  .deck{ font-size:1.13rem; color:var(--ink-soft); }
  .byline{ margin-top:24px; font-family:var(--f-mono); font-size:.75rem;
           letter-spacing:.05em; color:var(--ink-faint); }
  .byline b{ color:var(--ink); font-weight:500; }

  .flow > p + p{ margin-top:19px; }
  .flow > p:first-of-type{ margin-top:30px; }

  .part{ margin-top:52px; padding-top:0; }
  .part .lbl{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
              text-transform:uppercase; color:var(--ink-faint); }
  .part h2{ font-size:1.55rem; line-height:1.08; margin-top:9px; margin-bottom:20px; }
  .part p + p{ margin-top:19px; }

  blockquote{ margin:30px 0; padding:20px 0 0; border-top:1px solid var(--line-firm);
              font-family:var(--f-display); text-transform:none; font-size:1.42rem;
              line-height:1.28; color:var(--ink); }

  .aside{ background:var(--surface); border:1px solid var(--line); padding:17px 19px;
          margin:28px 0; font-size:.93rem; color:var(--ink-soft); }
  .aside b{ color:var(--ink); font-weight:600; }

  .foot{ margin-top:56px; padding-top:22px; border-top:1px solid var(--line-firm);
         font-size:.92rem; color:var(--ink-soft); }
  .foot b{ color:var(--ink); }
  .note{ margin-top:26px; font-size:.8rem; color:var(--ink-faint); }

  /* --- site nav --- */
  .sitebar{ border-bottom:1px solid var(--line); background:var(--bg); }
  .sitebar-in{ max-width:680px; 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); }