:root{
    --ink:#14181f; --muted:#5b6572; --line:#d8dee6; --bg:#f6f7f9; --card:#ffffff;
    --obama:#2f6fb0; --trump:#b23b3b; --biden:#3b7d5a; --accent:#b23b3b;
    --fact-bg:#f3f6fa; --interp-bg:#fbf4ef;
    --maxw:1080px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    line-height:1.55;
  }
  a{color:#1f5fa8}
  a:hover{color:#12406f}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.1rem}
  header.masthead{
    background:linear-gradient(180deg,#1b2430,#131a24); color:#f2f5f8;
    border-bottom:4px solid var(--accent); padding:2.2rem 0 1.8rem;
  }
  header.masthead h1{margin:0 0 .35rem; font-size:clamp(1.5rem,3.6vw,2.35rem); line-height:1.15; letter-spacing:.2px}
  header.masthead p.lede{margin:0 0 .7rem; font-size:1.02rem; color:#cdd6e0; max-width:70ch}
  .lens-tag{
    display:inline-block; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    background:var(--accent); color:#fff; padding:.28rem .6rem; border-radius:3px; margin-bottom:.9rem;
  }
  .stamp{font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.8rem; color:#9fb0c2}
  main{padding:1.6rem 0 2.5rem}
  section{margin:0 0 1.8rem}
  h2.section-h{font-size:1.25rem; margin:0 0 .7rem; border-bottom:2px solid var(--line); padding-bottom:.35rem}
  .panel{
    background:var(--card); border:1px solid var(--line); border-left:5px solid var(--accent);
    border-radius:6px; padding:1rem 1.15rem; margin:0 0 1.6rem;
  }
  .panel h2{margin:.1rem 0 .5rem; font-size:1.15rem}
  .panel ul{margin:.3rem 0 .2rem; padding-left:1.2rem}
  .panel li{margin:.28rem 0}
  .key{
    display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 0;
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.82rem;
  }
  .key span{border:1px solid var(--line); border-radius:4px; padding:.22rem .5rem; background:#fbfcfd}
  .key .k-fact{border-color:#c3d3e6; background:var(--fact-bg)}
  .key .k-interp{border-color:#e6cdb8; background:var(--interp-bg)}

  .skip{
    position:absolute; left:-9999px; top:0; background:#fff; color:#12406f;
    padding:.6rem .9rem; z-index:20; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    border:2px solid #12406f; border-radius:0 0 6px 0;
  }
  .skip:focus{left:0}
  :focus-visible{outline:3px solid #1f5fa8; outline-offset:2px}

  /* ---- Comparison matrix ---- */
  .matrixwrap{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1rem 1.1rem; margin:0 0 1.6rem; overflow-x:auto}
  .matrixwrap h2{margin:.1rem 0 .5rem; font-size:1.15rem}
  table.matrix{border-collapse:collapse; width:100%; font-size:.9rem}
  table.matrix caption{
    text-align:left; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:.82rem; color:var(--muted); padding:.2rem 0 .6rem;
  }
  table.matrix th, table.matrix td{
    border:1px solid var(--line); padding:.5rem .6rem; text-align:left; vertical-align:top;
  }
  table.matrix thead th{
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.74rem;
    letter-spacing:.05em; text-transform:uppercase; background:#eef1f5; color:#333c47;
  }
  table.matrix thead th.h-obama{color:var(--obama)}
  table.matrix thead th.h-trump{color:var(--trump)}
  table.matrix thead th.h-biden{color:var(--biden)}
  table.matrix tbody th[scope="row"]{
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.8rem;
    background:#fbfcfd; width:11rem;
  }
  table.matrix td.na{color:var(--muted); font-style:italic; font-size:.83rem}
  .matrix-note{font-size:.85rem; color:var(--muted); margin:.7rem 0 0}

  form.filters{
    background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1rem 1.15rem;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.9rem 1.1rem; align-items:end;
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  }
  form.filters label{display:block; font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:.28rem}
  form.filters select{
    width:100%; padding:.5rem .55rem; font-size:.95rem; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink);
  }
  .btn{
    font:inherit; font-size:.92rem; padding:.52rem .9rem; border:1px solid var(--ink); border-radius:4px;
    background:var(--ink); color:#fff; cursor:pointer;
  }
  .btn:hover{background:#000}
  .count{grid-column:1/-1; margin:.1rem 0 0; font-size:.88rem; color:var(--muted)}

  ul.spine{list-style:none; margin:0; padding:0}
  ul.spine li{
    background:var(--card); border:1px solid var(--line); border-radius:5px;
    padding:.6rem .8rem; margin:0 0 .5rem; font-size:.93rem;
  }
  ul.spine .era{font-weight:700; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.86rem}
  ul.spine .tag-o{color:var(--obama)} ul.spine .tag-t{color:var(--trump)} ul.spine .tag-b{color:var(--biden)}

  /* ---- Per-area, per-president grouping ---- */
  .area{margin:0 0 2.2rem}
  .area > h2{font-size:1.25rem; margin:0 0 .7rem; border-bottom:2px solid var(--line); padding-bottom:.35rem}
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
  .pblock{min-width:0}
  .pblock > h3{
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.8rem;
    letter-spacing:.06em; text-transform:uppercase; margin:0 0 .55rem; padding:.3rem 0 .3rem .55rem;
    border-left:4px solid #999; background:#eef1f5; border-radius:0 4px 4px 0;
  }
  .pblock.obama > h3{border-left-color:var(--obama); color:var(--obama)}
  .pblock.trump1 > h3,.pblock.trump2 > h3{border-left-color:var(--trump); color:var(--trump)}
  .pblock.biden > h3{border-left-color:var(--biden); color:var(--biden)}
  .pblock .stack{display:flex; flex-direction:column; gap:1rem}
  .na-placeholder{
    border:1px dashed var(--line); border-radius:6px; padding:.8rem .9rem;
    font-size:.85rem; color:var(--muted); font-style:italic; background:#fbfcfd;
  }

  .ledger{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem}
  article.card{
    background:var(--card); border:1px solid var(--line); border-top:4px solid #999; border-radius:6px;
    padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.55rem;
  }
  article.card[data-admin="obama"]{border-top-color:var(--obama)}
  article.card[data-admin="trump1"]{border-top-color:var(--trump)}
  article.card[data-admin="trump2"]{border-top-color:var(--trump)}
  article.card[data-admin="biden"]{border-top-color:var(--biden)}
  article.card.hidden{display:none}
  .meta{display:flex; flex-wrap:wrap; gap:.35rem}
  .chip{
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding:.2rem .45rem; border-radius:3px; background:#eef1f5; color:#445; border:1px solid #dde3ea;
  }
  .chip.adm{color:#fff; border-color:transparent}
  .card[data-admin="obama"] .chip.adm{background:var(--obama)}
  .card[data-admin="trump1"] .chip.adm,.card[data-admin="trump2"] .chip.adm{background:var(--trump)}
  .card[data-admin="biden"] .chip.adm{background:var(--biden)}
  article.card h3{margin:.1rem 0 0; font-size:1.08rem; line-height:1.25}
  article.card p{margin:0; font-size:.93rem}
  .fact{background:var(--fact-bg); border-left:3px solid #c3d3e6; padding:.5rem .6rem; border-radius:0 4px 4px 0}
  .fact::before{content:"Record"; display:block; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4a6b93; margin-bottom:.2rem}
  .interp{background:var(--interp-bg); border-left:3px solid #d9a877; padding:.5rem .6rem; border-radius:0 4px 4px 0}
  .interp::before{content:"Conservative take"; display:block; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9a5a1e; margin-bottom:.2rem}
  .fiscal{background:#eef7f0; border-left:3px solid #6aa579; padding:.5rem .6rem; border-radius:0 4px 4px 0}
  .fiscal::before{content:"Fiscal result"; display:block; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#3f7a52; margin-bottom:.2rem}
  .fiscal .noout{color:#5c6b60; font-style:italic}
  .key .k-fiscal{border-color:#a9cdb5; background:#eef7f0}
  .cite{font-size:.8rem; color:var(--muted)}
  .cite a{word-break:break-word}

  .bottomline{background:#1b2430; color:#eef2f6; border-radius:6px; padding:1.2rem 1.3rem}
  .bottomline h2{margin:.1rem 0 .6rem; color:#fff}
  .bottomline ul{margin:.3rem 0 .5rem; padding-left:1.2rem}
  .bottomline li{margin:.35rem 0}
  .bottomline .disclaimer{font-size:.82rem; color:#a9b7c6; margin-top:.6rem}

  section.notes ul{padding-left:1.2rem}
  section.notes li{margin:.35rem 0}
  footer{background:#131a24; color:#9fb0c2; padding:1.2rem 0; font-size:.85rem; text-align:center}

  @media (max-width:960px){
    .grid4{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:760px){
    table.matrix thead{display:none}
    table.matrix, table.matrix tbody, table.matrix tr, table.matrix th, table.matrix td{display:block; width:100%}
    table.matrix tr{border:1px solid var(--line); border-radius:6px; margin:0 0 .8rem; padding:.4rem .6rem .6rem}
    table.matrix tbody th[scope="row"]{
      width:100%; background:#eef1f5; border:none; border-radius:4px; margin:-.2rem -.2rem .4rem; padding:.4rem .5rem;
    }
    table.matrix td{border:none; padding:.35rem .1rem}
    table.matrix td::before{
      content:attr(data-label); display:block; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
      font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.15rem; color:#5b6572;
    }
    td.h-obama::before, td.h-trump::before, td.h-biden::before{color:#5b6572}
  }
  @media (max-width:560px){
    header.masthead{padding:1.6rem 0 1.3rem}
    .ledger{grid-template-columns:1fr}
    .grid4{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  }