:root {
    --paper:#FBFBFC; --surface:#FFFFFF; --s2:#F6F6F8; --ink:#141419; --ink-soft:#585863; --ink-faint:#8A8A95;
    --line:#E6E6EB; --line-strong:#D4D4DB;
    --brand:#8D153A; --brand-solid:#8D153A; --on-brand:#FDF2E9;
    --gold:#9A6E06; --gold-soft:#C9A227; --flag-green:#0A7A50; --saffron:#DC6B00;
    --up:#0A9F6A; --down:#B23A2E;
  }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --paper:#0D0D11; --surface:#16161C; --s2:#1B1B22; --ink:#F2F2F5; --ink-soft:#A2A2AE; --ink-faint:#75757F;
    --line:#26262E; --line-strong:#34343E;
    --brand:#F0708F; --brand-solid:#8D153A; --on-brand:#FDF2E9;
    --gold:#E7C25E; --gold-soft:#E7C25E; --flag-green:#3BB584; --saffron:#F0902F;
    --up:#38D9A2; --down:#E0715F;
  }}
  :root[data-theme="dark"]{
    --paper:#0D0D11; --surface:#16161C; --s2:#1B1B22; --ink:#F2F2F5; --ink-soft:#A2A2AE; --ink-faint:#75757F;
    --line:#26262E; --line-strong:#34343E;
    --brand:#F0708F; --brand-solid:#8D153A; --on-brand:#FDF2E9;
    --gold:#E7C25E; --gold-soft:#E7C25E; --flag-green:#3BB584; --saffron:#F0902F;
    --up:#38D9A2; --down:#E0715F;
  }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--paper); color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  .wrap { max-width:1200px; margin:0 auto; padding:0 28px; }
  a { color:inherit; text-decoration:none; }
  .mono { font-family:"IBM Plex Mono",monospace; }

  /* utility strip */
  .util { background:var(--brand-solid); color:var(--on-brand); }
  .util .wrap { display:flex; align-items:center; justify-content:space-between; height:34px;
    font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; }
  .util .tag { text-transform:uppercase; opacity:.92; }
  .util .right { display:flex; align-items:center; gap:16px; }
  .util .right span { opacity:.9; }
  .theme-btn { background:transparent; border:1px solid rgba(253,242,233,.35); color:var(--on-brand);
    font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    padding:3px 9px; border-radius:2px; cursor:pointer; }
  .theme-btn:hover { border-color:var(--on-brand); }

  /* masthead */
  header.mast { border-bottom:1px solid var(--line-strong); background:var(--paper); position:sticky; top:0; z-index:20; }
  .mast-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:24px; }
  .brand { display:flex; align-items:center; gap:13px; }
  .brand .mk { width:42px; height:42px; border-radius:10px; background:var(--brand-solid); flex:none;
    display:flex; align-items:center; justify-content:center; }
  .brand .mk b { font-family:"Archivo",sans-serif; font-weight:800; font-size:23px; color:var(--on-brand); line-height:1; }
  .wordmark { font-family:"Archivo",sans-serif; font-weight:800; font-size:22px; letter-spacing:-.02em;
    line-height:.9; text-transform:uppercase; color:var(--ink); }
  .wordmark b { color:var(--brand); font-weight:800; }
  .wordmark small { display:block; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:9px;
    letter-spacing:.22em; color:var(--ink-faint); text-transform:uppercase; margin-top:3px; }
  nav.top { display:flex; gap:24px; font-weight:500; font-size:14px; }
  nav.top a { color:var(--ink-soft); padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap; }
  nav.top a:hover, nav.top a.on { color:var(--ink); border-color:var(--brand); }
  @media (max-width:940px){ nav.top { gap:16px; font-size:13px; overflow-x:auto; } .wordmark small { display:none; } }

  /* chips + kicker */
  .chip { display:inline-block; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:10px;
    letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:3px;
    background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); }
  .chip.gold { background:color-mix(in srgb,var(--gold-soft) 20%,transparent); color:var(--gold); }
  .chip.green { background:color-mix(in srgb,var(--flag-green) 16%,transparent); color:var(--flag-green); }
  .chip.saffron { background:color-mix(in srgb,var(--saffron) 16%,transparent); color:var(--saffron); }

  /* ads */
  .adslot { border:1px dashed var(--line-strong); background:color-mix(in srgb,var(--gold-soft) 6%,transparent);
    color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; display:flex; align-items:center; justify-content:center; text-align:center;
    border-radius:5px; }
  .adslot span { opacity:.7; }
  .adslot.lead { height:90px; margin:24px 0; }
  .adslot.rail { height:250px; }
  .art-ad { height:110px; margin:34px 0; }

  /* home: lead */
  .lead { display:grid; grid-template-columns:1.7fr 1fr; gap:0; border-top:2px solid var(--ink);
    padding-top:28px; margin-top:6px; }
  .lead-main { padding-right:44px; border-right:1px solid var(--line); }
  .lead-main h1 { font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(32px,5vw,56px);
    line-height:1.0; letter-spacing:-.025em; margin:14px 0 18px; text-wrap:balance; }
  .lead-main h1 a:hover { color:var(--brand); }
  .lead-main .dek { font-size:19px; color:var(--ink-soft); line-height:1.5; margin:0 0 20px; max-width:44ch; }
  .byline { font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-faint); letter-spacing:.03em;
    display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .byline b { color:var(--ink); font-weight:600; }
  .lead-side { padding-left:32px; }
  .lead-side .sec-t { font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--ink-faint); padding-bottom:12px; margin-bottom:0; border-bottom:1px solid var(--line); }
  .mini { padding:15px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:22px 1fr; gap:12px; }
  .mini:last-child { border-bottom:none; }
  .mini .n { font-family:"Archivo",sans-serif; font-weight:800; font-size:15px; color:var(--gold); }
  .mini h4 { font-family:"Archivo",sans-serif; font-weight:600; font-size:16px; line-height:1.2; margin:0 0 5px; letter-spacing:-.01em; }
  .mini:hover h4 { color:var(--brand); }
  .mini .m { font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-faint); letter-spacing:.03em; }

  /* feature panel */
  .feat { background:var(--brand-solid); color:var(--on-brand); border-radius:12px; padding:28px 30px;
    margin:34px 0; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
  .feat .k { font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; }
  .feat h3 { font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(21px,3vw,28px); line-height:1.08;
    letter-spacing:-.02em; margin:0; max-width:26ch; }
  .feat .cta { font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:12px; letter-spacing:.06em;
    text-transform:uppercase; background:var(--gold-soft); color:#3A0A1A; padding:12px 20px; border-radius:6px; white-space:nowrap; }
  @media (max-width:640px){ .feat { grid-template-columns:1fr; } }

  /* section band + grid */
  .band-head { display:flex; align-items:center; justify-content:space-between; border-top:2px solid var(--ink);
    padding-top:12px; margin:14px 0 6px; }
  .band-head h2 { font-family:"Archivo",sans-serif; font-weight:800; font-size:20px; letter-spacing:-.01em;
    margin:0; text-transform:uppercase; }
  .band-head a { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--brand); font-weight:600; }
  .main-cols { display:grid; grid-template-columns:1fr 320px; gap:48px; margin-top:22px; }
  .grid { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
  .story { padding:22px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
  .story .chip { align-self:flex-start; }
  .story h3 { font-family:"Archivo",sans-serif; font-weight:700; font-size:21px; line-height:1.14; margin:0;
    letter-spacing:-.015em; text-wrap:balance; }
  .story:hover h3 { color:var(--brand); }
  .story p { margin:0; font-size:15px; color:var(--ink-soft); line-height:1.5; }
  .story .m { font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint); letter-spacing:.03em; display:flex; gap:10px; }

  /* rail */
  aside { display:flex; flex-direction:column; gap:30px; }
  .panel .p-t { font-family:"Archivo",sans-serif; font-weight:800; font-size:13px; letter-spacing:.04em;
    text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:2px; }
  .rk { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline; }
  .rk:last-child { border-bottom:none; }
  .rk .n { font-family:"Archivo",sans-serif; font-weight:900; font-size:24px; color:var(--line-strong); line-height:1; min-width:30px; }
  .rk a { font-family:"Archivo",sans-serif; font-weight:600; font-size:15.5px; line-height:1.2; letter-spacing:-.01em; }
  .rk:hover a { color:var(--brand); }
  .tool-card { border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--surface); }
  .tool-card .k { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
  .tool-card h4 { font-family:"Archivo",sans-serif; font-weight:700; font-size:18px; margin:0 0 6px; letter-spacing:-.01em; }
  .tool-card p { margin:0 0 14px; font-size:14px; color:var(--ink-soft); }
  .tool-card a.b { display:inline-block; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:11px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--brand); border-bottom:2px solid var(--brand); padding-bottom:2px; }
  .signup { background:var(--ink); color:var(--paper); border-radius:10px; padding:24px; }
  .signup.wide { max-width:680px; margin:40px auto 0; }
  .signup .k { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; }
  .signup h4 { font-family:"Archivo",sans-serif; font-weight:800; font-size:20px; margin:0 0 6px; letter-spacing:-.01em; }
  .signup p { margin:0 0 14px; font-size:14px; opacity:.82; }
  .signup form { display:flex; gap:8px; } .signup.wide form { max-width:420px; }
  .signup input { flex:1; min-width:0; padding:11px 13px; border:none; border-radius:6px; font-family:"IBM Plex Mono",monospace; font-size:12px; }
  .signup button { background:var(--brand-solid); color:var(--on-brand); border:none; padding:11px 18px; border-radius:6px;
    font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; cursor:pointer; }

  /* category */
  .cat-hero { padding:32px 0 6px; border-top:2px solid var(--ink); margin-top:6px; }
  .cat-hero .eyebrow { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0 0 10px; }
  .cat-hero h2 { font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(30px,5vw,44px); letter-spacing:-.025em; margin:0 0 8px; }
  .cat-hero p { font-size:18px; color:var(--ink-soft); margin:0; max-width:62ch; }
  .catgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; padding-top:14px; }
  .empty { padding:60px 0; text-align:center; color:var(--ink-soft); }
  .empty h2 { font-family:"Archivo",sans-serif; color:var(--ink); }

  /* article + page */
  .crumb { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-faint); padding:22px 0 0; }
  .crumb a:hover { color:var(--brand); } .crumb .sep { opacity:.5; margin:0 8px; }
  .art-head { max-width:760px; margin:0; padding:20px 0 8px; }
  .art-cat { display:inline-block; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent);
    padding:5px 11px; border-radius:100px; margin:0 0 18px; }
  .art-title { font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(30px,5vw,52px); line-height:1.02;
    letter-spacing:-.03em; margin:0 0 18px; text-wrap:balance; max-width:20ch; }
  .art-dek { font-size:20px; color:var(--ink-soft); line-height:1.45; margin:0 0 22px; max-width:52ch; }
  .art-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;
    font-size:12px; color:var(--ink-faint); letter-spacing:.03em; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .art-meta .who { color:var(--ink); font-weight:600; } .art-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--gold-soft); }

  .art-body { max-width:680px; margin:0; padding:34px 0 0; }
  .art-body.page { padding-top:14px; }
  .art-body p { margin:0 0 22px; font-size:17.5px; line-height:1.62; }
  .art-body h2 { font-family:"Archivo",sans-serif; font-weight:700; font-size:26px; letter-spacing:-.02em; line-height:1.15; margin:40px 0 8px; text-wrap:balance; }
  .art-body h3 { font-family:"Archivo",sans-serif; font-weight:600; font-size:20px; margin:26px 0 4px; letter-spacing:-.01em; }
  .art-body a { color:var(--brand); text-underline-offset:3px; text-decoration:underline; text-decoration-thickness:1px; }
  .art-body ul, .art-body ol { margin:0 0 22px; padding-left:22px; } .art-body li { margin-bottom:9px; font-size:17.5px; }
  .art-body strong { color:var(--ink); font-weight:600; }
  .lede-note { background:var(--s2); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:6px;
    padding:8px 22px; margin:0 0 26px; }
  .lede-note p { margin:12px 0; font-size:16.5px; color:var(--ink-soft); } .lede-note b, .lede-note strong { color:var(--ink); }
  .takeaways { background:var(--s2); border:1px solid var(--line); border-radius:8px; padding:22px 26px; margin:30px 0; }
  .takeaways h4 { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--brand); margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
  .takeaways ul { margin:0; padding-left:20px; } .takeaways li { margin-bottom:9px; font-size:16.5px; }
  blockquote { margin:32px 0; padding:4px 0 4px 24px; border-left:3px solid var(--brand);
    font-family:"Archivo",sans-serif; font-weight:600; font-size:25px; line-height:1.22; letter-spacing:-.02em; color:var(--ink); }
  .disclaimer { border:1px solid var(--line); border-left:3px solid var(--down); border-radius:6px; padding:16px 22px; margin:34px 0 0;
    font-size:14px; color:var(--ink-soft); background:color-mix(in srgb,var(--down) 5%,transparent); }
  .disclaimer b { color:var(--down); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:6px; }
  .author { max-width:680px; margin:40px 0 0; display:flex; gap:16px; align-items:center; border-top:1px solid var(--line); padding-top:26px; }
  .author .avatar { width:54px; height:54px; border-radius:12px; flex:none; background:var(--brand-solid);
    display:flex; align-items:center; justify-content:center; font-family:"Archivo",sans-serif; font-weight:800; font-size:24px; color:var(--on-brand); }
  .author .who { font-family:"Archivo",sans-serif; font-weight:700; font-size:17px; margin:0; letter-spacing:-.01em; }
  .author .bio { font-size:14.5px; color:var(--ink-soft); margin:3px 0 0; }

  .band { border-top:2px solid var(--ink); margin-top:44px; padding:30px 0; }
  .band.inline-band { border:1px solid var(--line); border-radius:10px; margin:36px 0 0; padding:24px 26px; }
  .band h3 { font-family:"Archivo",sans-serif; font-weight:800; font-size:18px; letter-spacing:-.01em; margin:0 0 18px; text-transform:uppercase; }
  .rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .rel { display:flex; flex-direction:column; gap:7px; }
  .rel .cat { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
  .rel h4 { font-family:"Archivo",sans-serif; font-weight:600; font-size:18px; line-height:1.18; margin:0; letter-spacing:-.01em; text-wrap:balance; }
  .rel:hover h4 { color:var(--brand); }
  .rel .meta { font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint); }

  /* footer */
  footer { border-top:2px solid var(--ink); margin-top:56px; padding:40px 0 32px; }
  .f-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
  .f-brand .wordmark { font-size:20px; }
  .f-brand p { font-size:14px; color:var(--ink-soft); margin:14px 0 0; max-width:40ch; }
  .f-col h6 { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
  .f-col a { display:block; color:var(--ink-soft); font-size:14.5px; padding:5px 0; } .f-col a:hover { color:var(--brand); }
  .f-legal { margin-top:32px; padding-top:18px; border-top:1px solid var(--line); font-family:"IBM Plex Mono",monospace;
    font-size:11px; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  @media (max-width:860px){
    .lead { grid-template-columns:1fr; } .lead-main { padding-right:0; border-right:none; border-bottom:1px solid var(--line); padding-bottom:24px; }
    .lead-side { padding-left:0; padding-top:20px; } .main-cols { grid-template-columns:1fr; } .grid,.catgrid { grid-template-columns:1fr; }
    .rel-grid { grid-template-columns:1fr; } .f-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:520px){ body { font-size:15.5px; } .f-grid { grid-template-columns:1fr; } .art-body p, .art-body li { font-size:16.5px; } }