/* Shared type and colour system. Light is the base; dark is redefined by token
   under both the OS preference and an explicit data-theme, never inline. */
:root {
  --ground:#F5F6F8; --surface:#FFFFFF; --surface-alt:#EDEFF3;
  --ink:#12161B; --ink-soft:#58616E; --ink-faint:#838C99;
  --hairline:#DDE1E8; --accent:#A2660A; --accent-soft:#F2E3C4;
  --teal:#10646E; --teal-soft:#D6E8EA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0D1014; --surface:#141920; --surface-alt:#1B222B;
    --ink:#E7ECF2; --ink-soft:#99A5B4; --ink-faint:#6C7889;
    --hairline:#232B36; --accent:#E2A73A; --accent-soft:#3B2E13;
    --teal:#46B0BC; --teal-soft:#10333A;
  }
}
:root[data-theme="dark"] {
  --ground:#0D1014; --surface:#141920; --surface-alt:#1B222B;
  --ink:#E7ECF2; --ink-soft:#99A5B4; --ink-faint:#6C7889;
  --hairline:#232B36; --accent:#E2A73A; --accent-soft:#3B2E13;
  --teal:#46B0BC; --teal-soft:#10333A;
}

*,*::before,*::after { box-sizing:border-box; }
body {
  background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.65; margin:0;
  padding:clamp(2rem,5vw,4.5rem) clamp(1.1rem,5vw,2rem) 5rem;
  -webkit-font-smoothing:antialiased;
}
.page { max-width:42rem; margin:0 auto; }

h1,h2,h3,.label,.nav,th,.tag {
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
}
h1 { font-size:clamp(1.9rem,5.5vw,2.7rem); line-height:1.08; font-weight:700;
     letter-spacing:-.024em; margin:0 0 .6rem; text-wrap:balance; }
h2 { font-size:1.25rem; font-weight:600; letter-spacing:-.01em;
     margin:2.6rem 0 .6rem; text-wrap:balance; }
h3 { font-size:1rem; font-weight:600; margin:1.8rem 0 .4rem; }
p { margin:0 0 1.15rem; }
strong { font-weight:600; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
code { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86em; }
blockquote { margin:1.4rem 0; padding:.2rem 0 .2rem 1.2rem;
             border-left:3px solid var(--accent); color:var(--ink-soft); font-size:1.05rem; }

.label { font-size:.68rem; font-weight:600; letter-spacing:.13em;
         text-transform:uppercase; color:var(--ink-faint); }
.nav { font-size:.85rem; margin-bottom:2.6rem; display:flex; gap:1.1rem; flex-wrap:wrap; }
.nav a { color:var(--ink-soft); text-decoration:none; }
.nav a:hover { color:var(--accent); }

.meta { color:var(--ink-faint); font-size:.85rem; margin:0 0 2.4rem;
        font-family:"IBM Plex Sans",sans-serif; }

pre { margin:1.3rem 0; padding:.9rem 1.05rem; background:var(--surface);
      border:1px solid var(--hairline); border-radius:3px; overflow-x:auto;
      font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.79rem; line-height:1.6;
      color:var(--ink-soft); }

.scroll { overflow-x:auto; border:1px solid var(--hairline); border-radius:3px;
          background:var(--surface); margin:1.4rem 0; }
table { border-collapse:collapse; width:100%; font-size:.86rem; }
th,td { padding:.5rem .8rem; text-align:left; border-bottom:1px solid var(--hairline); white-space:nowrap; }
th { font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
     color:var(--ink-faint); background:var(--surface-alt);
     font-family:"IBM Plex Sans",sans-serif; }
tbody tr:last-child td { border-bottom:none; }
td.n,th.n { text-align:right; font-variant-numeric:tabular-nums;
            font-family:"IBM Plex Mono",ui-monospace,monospace; }

.entry { display:block; padding:1.1rem 0; border-bottom:1px solid var(--hairline);
         text-decoration:none; color:inherit; }
.entry:first-of-type { border-top:1px solid var(--hairline); }
.entry b { display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:600;
           color:var(--accent); margin-bottom:.25rem; font-size:1.02rem; }
.entry span { color:var(--ink-soft); font-size:.92rem; }
.entry em { display:block; font-style:normal; color:var(--ink-faint);
            font-size:.75rem; margin-top:.35rem;
            font-family:"IBM Plex Sans",sans-serif; letter-spacing:.04em; }

footer { margin-top:4rem; padding-top:1.3rem; border-top:1px solid var(--hairline);
         font-size:.8rem; color:var(--ink-faint);
         font-family:"IBM Plex Sans",sans-serif; }