/* ==========================================================================
   Budget Pilot — shared chrome  (Swiss broadsheet)
   Stark white, black ink, a single cobalt spark, all-grotesque type.
   Tokens keep their original names so every article's local <style> block
   adopts this system automatically; only the values and chrome changed.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --paper-2:#F3F3F1;        /* light band / alt sections */
  --card:#FFFFFF;
  --ink:#101013;            /* near-black, the workhorse */
  --muted:#53555C;
  --faint:#8A8C94;
  --line:rgba(16,16,19,.14);
  --line-2:rgba(16,16,19,.30);
  --amber:#1B45E0;          /* THE SPARK — cobalt: fills, rules, marks, numerals */
  --amber-ink:#1A3CCB;      /* links & small accent text (AA on white) */
  --sky:#2B3A66;            /* secondary cool: indigo-slate */
  --sky-soft:#EDF0FB;       /* pale cobalt tint band */
  --good:#13793E;
  --bad:#CC2A1E;
  --disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --gut:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0C0C0E;
    --paper-2:#131318;
    --card:#141419;
    --ink:#F3F2EF;
    --muted:#B2B5BE;
    --faint:#80838D;
    --line:rgba(243,242,239,.14);
    --line-2:rgba(243,242,239,.30);
    --amber:#5B7BFF;
    --amber-ink:#8CA2FF;
    --sky:#9FB0E6;
    --sky-soft:#191C28;
    --good:#5FC489;
    --bad:#F08273;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.7;
  font-feature-settings:"ss01","cv05"; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
img{display:block; height:auto}
a{color:var(--amber-ink); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--amber); color:#fff}

/* ---------- masthead ---------- */
.mast{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1120px; margin:0 auto; padding:18px var(--gut);
  border-bottom:1.5px solid var(--ink);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand svg{width:26px; height:26px; flex:none}
.brand span{
  font-family:var(--disp); font-weight:800; font-size:18px;
  letter-spacing:.02em; text-transform:uppercase; line-height:1;
}
.mast nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.mast nav a{
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.mast nav a:hover{color:var(--ink)}

/* ---------- reading column ---------- */
.wrap{max-width:720px; margin:0 auto; padding:0 var(--gut)}
.wrap--wide{max-width:1120px}

.crumb{
  font-size:11.5px; color:var(--faint); padding:30px 0 0; display:flex; gap:9px;
  flex-wrap:wrap; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--ink)}

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber-ink); margin:34px 0 14px;
}
.kicker::before{content:""; width:26px; height:3px; background:var(--amber); display:inline-block}

h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.03em;
  line-height:1.02; font-size:clamp(36px,6.4vw,58px); margin:0 0 20px;
}
h2{
  font-family:var(--disp); font-weight:700; letter-spacing:-.02em;
  line-height:1.12; font-size:clamp(25px,4.2vw,33px); margin:50px 0 14px;
}
h3{font-family:var(--body); font-weight:700; line-height:1.3; font-size:19px; letter-spacing:-.01em; margin:30px 0 10px}

.standfirst{font-size:clamp(18px,2.5vw,21px); line-height:1.58; color:var(--muted); margin:0 0 26px; font-weight:400}
.byline{
  display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--faint);
  letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:13px 0; margin:0 0 36px;
}

p{margin:0 0 20px}
.body > ul, .body > ol{margin:0 0 22px; padding-left:22px}
.body li{margin-bottom:8px}
.body > ul li::marker{color:var(--amber)}
strong{font-weight:700}
hr{border:0; border-top:1px solid var(--line); margin:42px 0}
blockquote{
  margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--amber);
  font-family:var(--disp); font-weight:500; font-size:22px; line-height:1.3; letter-spacing:-.01em;
}
blockquote p:last-child{margin-bottom:0}

/* a plain table; articles that need a different one override it locally */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:28px 0}
table{width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{border-bottom:1.5px solid var(--ink)}
th{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
td{font-variant-numeric:tabular-nums}

.note{
  background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:2px; padding:16px 18px; font-size:15px; color:var(--muted); margin:30px 0;
}

/* ---------- related ---------- */
.more{border-top:1.5px solid var(--ink); margin:58px 0 0; padding:28px 0 0}
.more h2{font-size:15px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--body); font-weight:700; margin:0 0 16px}
.more ul{list-style:none; margin:0; padding:0}
.more li{margin:0; border-top:1px solid var(--line)}
.more li:last-child{border-bottom:1px solid var(--line)}
.more a{display:block; padding:14px 0; font-weight:500; text-decoration:none; color:var(--ink)}
.more a:hover{color:var(--amber-ink)}
.refs{margin:38px 0 0; padding:24px 0 0; border-top:1px solid var(--line)}
.refs h2{font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--body); font-weight:700; margin:0 0 14px}
.refs ul{list-style:none; margin:0; padding:0}
.refs li{margin:0 0 9px; font-size:15px; line-height:1.5}
.refs span{color:var(--faint); font-size:13px; margin-left:6px; font-family:var(--mono)}

/* ---------- footer ---------- */
.foot{border-top:1.5px solid var(--ink); margin-top:76px; background:var(--paper-2)}
.foot .in{max-width:1120px; margin:0 auto; padding:34px var(--gut) 44px}
.foot .links{display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 18px}
.foot .links a{color:var(--muted); text-decoration:none; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.foot .links a:hover{color:var(--ink)}
.foot p{font-size:13px; color:var(--faint); margin:0; max-width:660px; line-height:1.6}

@media (max-width:520px){ .mast nav a.opt{display:none} .brand span{font-size:16px} }