/* ==========================================================================
   DollarVisor design system
   Palette inherited from the 645 written content files (Rule 2.4.1 Condition 2).
   Spacing: single 4px-based scale (Rule 2.1.1). Nothing off-scale.
   ========================================================================== */

:root{
  /* --- brand (inherited, not invented) --- */
  --navy:#1E3A8A;      --navy-700:#1B3378;  --navy-900:#12245A;
  --blue:#2563EB;      --blue-300:#93C5FD;  --blue-050:#F0F7FF;
  --green:#16A34A;     --green-700:#15803D; --green-050:#F0FDF4;
  --red:#DC2626;       --red-050:#FEF2F2;

  /* --- neutrals --- */
  --ink:#1F2937;       --ink-soft:#4B5563;  --muted:#6B7280;
  --rule:#E5E7EB;      --rule-soft:#F0F1F3;
  --surface:#FFFFFF;   --surface-alt:#F9FAFB;  --cream:#FAF9F6;

  /* --- spacing scale: 4 8 12 16 24 32 48 64 80 96 120 --- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:120px;

  /* --- section rhythm (one value per breakpoint, used everywhere) --- */
  --section-y:var(--s9);
  --gutter:var(--s5);

  /* --- radius / elevation --- */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.05);
  --shadow-md:0 4px 6px -1px rgba(17,24,39,.07), 0 2px 4px -2px rgba(17,24,39,.05);

  /* --- type --- */
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- layout --- */
  --container:1200px;
  --article:720px;
  --rail:300px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  text-wrap:pretty;                       /* Rule 2.5.1 */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-decoration-color:rgba(30,58,138,.32); text-underline-offset:2px}
a:hover{color:var(--blue); text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:var(--r-sm)}

h1,h2,h3,h4,
.section-head h2,.section-head p,.hero h1,.card h3,.cta h2{text-wrap:balance} /* Rule 2.5.1 */
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:600; letter-spacing:-.011em; margin:0}
h1{font-size:clamp(34px,4.4vw,52px); line-height:1.14}
h2{font-size:clamp(26px,2.6vw,34px); line-height:1.22}
h3{font-size:clamp(20px,1.7vw,25px); line-height:1.3}
h4{font-size:21px; line-height:1.35}
p{margin:0}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- skip link ---------- */
.skip{position:absolute; left:var(--s4); top:-64px; z-index:200; background:var(--navy); color:#fff;
  padding:var(--s3) var(--s4); border-radius:var(--r-md); font-weight:600; transition:top .18s ease}
.skip:focus{top:var(--s4); color:#fff}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky; top:0; z-index:100; background:var(--surface);
  border-bottom:1px solid var(--rule)}
.header-bar{display:flex; align-items:center; gap:var(--s6); height:72px}
.brand{display:flex; align-items:center; gap:var(--s3); text-decoration:none; flex:none}
.brand-mark{width:36px; height:36px; border-radius:9px; flex:none}
.brand-name{font-family:var(--serif); font-size:23px; font-weight:700; color:var(--navy); letter-spacing:-.02em}
.brand-name em{font-style:normal; color:var(--blue)}

.nav{display:flex; align-items:center; gap:var(--s5); margin-left:auto}
.nav a{font-size:15px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  padding:var(--s2) 0; border-bottom:2px solid transparent; transition:color .16s ease, border-color .16s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--blue)}
.nav .nav-cta{border:1px solid var(--rule); border-radius:var(--r-pill); padding:var(--s2) var(--s4); color:var(--navy)}
.nav .nav-cta:hover{background:var(--blue-050); border-color:var(--blue-300); border-bottom-color:var(--blue-300)}

.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--rule);
  border-radius:var(--r-md); padding:var(--s2) var(--s3); font:inherit; font-size:14px; font-weight:600;
  color:var(--navy); cursor:pointer}

/* independence strip: the site's core positioning plank */
.pledge{background:var(--navy); color:#fff}          /* Rule 2.4.2: dark bg -> light text */
.pledge p{font-size:13.5px; line-height:1.5; padding:var(--s3) 0; color:#DBE4F7; text-align:center}
.pledge strong{color:#fff; font-weight:600}

/* ==========================================================================
   Hero  (Rule 2.6.2: photo stays legible, gradient solid only behind the text)
   ========================================================================== */
.hero{position:relative; background:var(--navy-900); overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.85}   /* 75-95% */
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(18,36,90,.95) 0%,
    rgba(18,36,90,.91) 34%,
    rgba(18,36,90,.50) 48%,
    rgba(18,36,90,.13) 62%,
    rgba(18,36,90,0) 80%)}
.hero-inner{position:relative; padding-block:var(--s9); max-width:580px}
.hero .eyebrow{color:var(--blue-300); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:var(--s4)}
.hero h1{color:#fff}
.hero .lede{color:#E6ECFA; font-size:19px; line-height:1.6; margin-top:var(--s5); max-width:46ch}
.hero .hero-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7)}
.hero-meta{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s7);
  padding-top:var(--s5); border-top:1px solid rgba(219,228,247,.28)}
.hero-meta div{color:#DBE4F7; font-size:14px}
.hero-meta strong{display:block; color:#fff; font-family:var(--serif); font-size:26px; line-height:1.2}

/* utility pages carry no photograph, so the navy ground stands on its own */
.hero--plain{background:var(--navy-900)}
.hero--plain .hero-inner{padding-block:var(--s8); max-width:660px}
.hero--plain .lede{max-width:58ch}

/* page hero for article-style pillars: shorter */
.hero--page .hero-inner{padding-block:var(--s8); max-width:620px}

/* ==========================================================================
   Buttons  (one system, Rule 15)
   ========================================================================== */
.btn{display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--sans);
  font-size:15px; font-weight:600; line-height:1; padding:var(--s4) var(--s6);
  border-radius:var(--r-md); border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-primary:hover{background:#1D4ED8; color:#fff}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(219,228,247,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}
.btn-quiet{background:var(--surface); color:var(--navy); border-color:var(--rule)}
.btn-quiet:hover{background:var(--blue-050); border-color:var(--blue-300); color:var(--navy)}

/* ==========================================================================
   Sections & cards
   ========================================================================== */
.section{padding-block:var(--section-y)}
.section--alt{background:var(--surface)}
.section-head{max-width:680px; margin-bottom:var(--s7)}
.section-head .eyebrow{color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:var(--s3)}
.section-head p{color:var(--ink-soft); font-size:18px; margin-top:var(--s4)}

.grid{display:grid; gap:var(--s5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s6); display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
a.card:hover{border-color:var(--blue-300); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--ink-soft); font-size:15.5px}
.card .card-link{margin-top:var(--s5); color:var(--blue); font-size:15px; font-weight:600}

/* vertical cards carry a photo */
.card--media{padding:0; overflow:hidden}
.card--media img{aspect-ratio:3/2; object-fit:cover; width:100%}
.card--media .card-body{padding:var(--s6); display:flex; flex-direction:column; flex:1}

/* compact link list used for hub indexes */
.linklist{display:grid; gap:var(--s3); margin:0; padding:0; list-style:none}
.linklist a{display:flex; justify-content:space-between; gap:var(--s4); align-items:baseline;
  padding:var(--s3) var(--s4); background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-md); text-decoration:none; font-size:15.5px; font-weight:500;
  transition:border-color .16s ease, background-color .16s ease}
.linklist a:hover{border-color:var(--blue-300); background:var(--blue-050)}
.linklist span{color:var(--muted); font-size:13px; flex:none}

/* ==========================================================================
   Article layout: 720px column + 300px sticky ad rail
   ========================================================================== */
.layout{display:grid; grid-template-columns:minmax(0,var(--article)) var(--rail);
  gap:var(--s8); align-items:start; padding-block:var(--s8); justify-content:center}

.breadcrumb{font-size:13.5px; color:var(--muted); margin-bottom:var(--s5)}
.breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2)}
.breadcrumb li::after{content:"/"; margin-left:var(--s2); color:var(--rule)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--muted); text-decoration:none}
.breadcrumb a:hover{color:var(--navy); text-decoration:underline}

/* --- ad slots: reserved height so nothing shifts on load (Rule 18) --- */
.ad{margin-block:var(--s7); text-align:center}
/* a standalone ad band between sections: let the next section's padding
   supply the separation instead of stacking two gaps (Rule 2.1.1) */
main > .container > .ad{margin-block:var(--s7) 0}
.ad::before{content:"Advertisement"; display:block; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2)}
.ad-slot{background:var(--surface-alt); border:1px dashed var(--rule); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px}
.ad--inline .ad-slot{min-height:280px}
.ad--leader .ad-slot{min-height:90px}
.rail .ad{margin-block:0 var(--s6)}
.rail .ad-slot{min-height:600px}
.rail{position:sticky; top:88px}
.rail-card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5); margin-bottom:var(--s6)}
.rail-card h3,.rail-card h4,.rail-heading{font-size:16px; margin-bottom:var(--s3)}
.rail-card p{font-size:14px; color:var(--ink-soft)}
.rail-card p + p{margin-top:var(--s3)}
.rail-card .rail-link{font-weight:600}
.rail-card .linklist a{padding:var(--s2) var(--s3); font-size:14.5px}

/* --- table of contents --- */
.toc{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6); margin-bottom:var(--s7)}
.toc h2{font-size:16px; font-family:var(--sans); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s4)}
.toc ol{margin:0; padding-left:var(--s5); columns:2; column-gap:var(--s6)}
.toc li{margin-bottom:var(--s2); font-size:15px; break-inside:avoid}
.toc a{text-decoration:none; color:var(--ink-soft)}
.toc a:hover{color:var(--blue); text-decoration:underline}

/* ==========================================================================
   Prose: styles the written 4-block content (inline styles stripped at build)
   ========================================================================== */
.prose{font-size:17.5px; line-height:1.75; color:var(--ink)}
.prose > * + *{margin-top:var(--s5)}
.prose h2{margin-top:var(--s9); scroll-margin-top:88px}
.prose h2 + *{margin-top:var(--s5)}
.prose h3{margin-top:var(--s7)}
.prose h3 + *{margin-top:var(--s4)}
.prose ul,.prose ol{padding-left:var(--s5)}
.prose li + li{margin-top:var(--s3)}
.prose hr{border:0; border-top:1px solid var(--rule); margin-block:var(--s8)}
.prose strong{font-weight:650}
.prose .h2-num{display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; margin-right:var(--s3); border-radius:var(--r-md);
  background:var(--navy); color:#fff; font-family:var(--sans); font-size:14px; font-weight:700;
  vertical-align:.06em}

.byline{font-size:14px; color:var(--muted); margin-top:var(--s4)}
.byline a{color:var(--ink-soft)}

/* callouts, all built from the same shape */
.prose .tldr,.prose .quick-answer,.prose .takeaway,.prose .warn,.prose .promo{
  border-left:4px solid; border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s4) var(--s5); font-size:16.5px}
.prose .tldr{background:var(--blue-050); border-color:var(--navy)}
.prose .quick-answer{background:var(--surface-alt); border-color:var(--blue)}
.prose .takeaway{background:var(--green-050); border-color:var(--green)}
.prose .takeaway strong{color:var(--green-700)}
.prose .warn{background:var(--red-050); border-color:var(--red)}
.prose .promo{background:var(--blue-050); border-color:var(--navy)}
.prose .promo p + p{margin-top:var(--s2)}

/* guide index: link title, then a muted gloss on its own line */
.prose .gloss{display:block; color:var(--muted); font-size:15px; line-height:1.5; margin-top:var(--s1)}
.prose ol li:has(> .gloss){margin-top:var(--s4)}

/* the signature unit: the data table */
.prose figure{margin-block:var(--s6); margin-inline:0}  /* UA default is 1em 40px */
.prose figure.data > figcaption:first-child{font-family:var(--serif); font-size:19px; font-weight:600;
  line-height:1.35; margin-bottom:var(--s4); text-wrap:balance}
/* a trailing figcaption is a source note, not a title */
.prose figure.data > figcaption:not(:first-child){font-family:var(--sans); font-size:14px;
  font-weight:400; line-height:1.5; color:var(--muted); margin-top:var(--s3)}

/* in-table bar chart; width comes from the data via --bar */
.prose .bar{height:14px; width:var(--bar); min-width:3px; border-radius:2px; background:var(--navy)}
/* the bar column needs room; the author's column widths are stripped with the styles */
.prose td:has(> .bar){width:36%; min-width:140px}
.prose .bar--blue{background:var(--blue)}
.prose .bar--green{background:var(--green)}
.prose .bar--red{background:var(--red)}
.prose .source{font-size:14px; color:var(--muted); margin-top:var(--s3)}
.prose .table-wrap{overflow-x:auto; margin-block:0;
  border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--surface)}
.prose table{border-collapse:collapse; width:100%; font-size:15.5px; line-height:1.5}
.prose thead th{background:var(--navy); color:#fff; font-family:var(--sans); font-weight:600;
  text-align:left; padding:var(--s3) var(--s4); white-space:nowrap}  /* Rule 2.4.2 */
.prose tbody td,.prose tbody th{padding:var(--s3) var(--s4); border-top:1px solid var(--rule);
  text-align:left; vertical-align:top}
.prose tbody tr:nth-child(even){background:var(--surface-alt)}
.prose caption{caption-side:bottom; padding:var(--s3) var(--s4); font-size:13px; color:var(--muted); text-align:left}

.prose .video{margin-block:var(--s7)}
.prose .video-frame{position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:var(--r-lg); background:var(--ink)}
.prose .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.prose .video figcaption{font-size:13.5px; color:var(--muted); margin-top:var(--s3)}

/* ==========================================================================
   Team, profiles and forms
   ========================================================================== */
.avatar{flex:none; width:96px; height:96px; border-radius:50%; background:var(--navy);
  color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:30px;
  font-weight:600; letter-spacing:.02em}
.author-card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s6); margin-block:var(--s6)}
.author-row{display:flex; flex-wrap:wrap; gap:var(--s5); align-items:flex-start}
.author-row > div{flex:1; min-width:240px}
.author-row h2{font-size:22px; margin-bottom:var(--s2)}
.author-row p{margin-top:var(--s2)}
.article--profile .prose > div:first-child{margin-bottom:var(--s6)}
.article--profile .avatar{width:112px; height:112px; font-size:36px}
.article--profile h1{margin-bottom:var(--s2)}

/* forms (Rule 19): one column, generous targets, visible focus */
.prose form{background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:var(--s6); margin-block:var(--s6)}
.prose form p{margin-top:var(--s5)}
.prose form p:first-child{margin-top:0}
.prose label{display:block; font-weight:600; font-size:15px; margin-bottom:var(--s2)}
.prose input,.prose select,.prose textarea{width:100%; font:inherit; font-size:16px;
  color:var(--ink); background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:var(--s3) var(--s4); transition:border-color .16s ease}
.prose textarea{min-height:150px; resize:vertical}
.prose input:focus,.prose select:focus,.prose textarea:focus{border-color:var(--blue); outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.prose input:invalid:not(:placeholder-shown){border-color:var(--red)}
.prose button[type="submit"]{display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1;
  padding:var(--s4) var(--s6); border:1px solid var(--blue); border-radius:var(--r-md);
  background:var(--blue); color:#fff; cursor:pointer; transition:background-color .16s ease}
.prose button[type="submit"]:hover{background:#1D4ED8}
.prose form .hint,.prose form small{display:block; font-size:13.5px; color:var(--muted);
  margin-top:var(--s2)}

/* short pages (search, 404) do not need the full reading measure */
.article--minimal .prose{font-size:18px}

/* ==========================================================================
   Blog archive
   ========================================================================== */
.archive-cta{margin-top:var(--s7)}
.section-head--wide{max-width:760px}

/* latest posts grid on the homepage */
.post-card{display:flex; flex-direction:column; gap:var(--s3); background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s5);
  text-decoration:none; color:inherit;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
.post-card:hover{border-color:var(--blue-300); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.post-tag{align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--navy);
  border-radius:var(--r-pill); padding:var(--s1) var(--s3)}
.post-tag--credit-cards{background:var(--blue)}
.post-tag--loans{background:var(--green-700)}
.post-tag--investing{background:var(--navy-900)}
.post-title{font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.35;
  color:var(--ink); text-wrap:balance}
.post-card:hover .post-title{color:var(--navy)}
.post-cat{margin-top:auto; font-size:13px; color:var(--muted)}
.post-excerpt{font-size:14.5px; line-height:1.55; color:var(--ink-soft)}
.post-more{margin-top:auto; padding-top:var(--s2); font-size:14px; font-weight:600; color:var(--blue)}
/* the card is the link, so the cards in a row share one height */
.post-grid{align-items:stretch}

/* ==========================================================================
   Calculators
   ========================================================================== */
.calc-section{padding-block:var(--s8)}
.calc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--s7);
  align-items:start; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:var(--s7)}
.calc-form p{margin-top:var(--s5)}
.calc-form p:first-child{margin-top:0}
.calc-form label{display:block; font-weight:600; font-size:15px; margin-bottom:var(--s2)}
.calc-form .unit{font-weight:400; color:var(--muted)}
.calc-form .input-wrap{position:relative; display:block}
.calc-form .prefix{position:absolute; left:var(--s4); top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:16px; pointer-events:none}
.calc-form .has-prefix input{padding-left:var(--s7)}
.calc-form input,.calc-form select{width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:var(--s3) var(--s4); transition:border-color .16s ease}
.calc-form input:focus,.calc-form select:focus{border-color:var(--blue); outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.18)}

.calc-out{background:var(--blue-050); border:1px solid var(--blue-300); border-radius:var(--r-lg);
  padding:var(--s6); position:sticky; top:88px}
.calc-headline{display:flex; flex-direction:column; gap:var(--s1);
  padding-bottom:var(--s5); border-bottom:1px solid rgba(30,58,138,.18)}
.calc-headline span{font-size:14px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--navy)}
.calc-headline strong{font-family:var(--serif); font-size:38px; line-height:1.1; color:var(--navy-900)}
.calc-rows{display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4);
  margin:var(--s5) 0 0}
.calc-rows dt{font-size:14.5px; color:var(--ink-soft)}
.calc-rows dd{margin:0; font-size:15px; font-weight:600; color:var(--ink); text-align:right}
.calc-note{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid rgba(30,58,138,.18);
  font-size:13.5px; line-height:1.55; color:var(--ink-soft)}

/* ==========================================================================
   Archive: filter chips, count, pagination
   ========================================================================== */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); padding-top:var(--s7)}
.chip{font-size:14.5px; font-weight:600; color:var(--ink-soft); background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-pill); padding:var(--s2) var(--s5);
  text-decoration:none; transition:border-color .16s ease, background-color .16s ease}
.chip:hover{border-color:var(--blue-300); background:var(--blue-050); color:var(--navy)}
.chip.is-active{background:var(--navy); border-color:var(--navy); color:#fff}
.chip.is-active:hover{background:var(--navy-700); color:#fff}

.archive-count{font-size:14px; color:var(--muted); margin-bottom:var(--s5)}

.pager{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s8)}
.pager a{text-decoration:none; font-size:15px; font-weight:600; color:var(--navy);
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface);
  padding:var(--s3) var(--s4); min-width:44px; text-align:center;
  transition:border-color .16s ease, background-color .16s ease}
.pager a:hover{border-color:var(--blue-300); background:var(--blue-050)}
.pager .is-current{background:var(--navy); border-color:var(--navy); color:#fff}
.pager .is-current:hover{background:var(--navy); color:#fff}
.pager-gap{color:var(--muted); padding-inline:var(--s1)}

/* ==========================================================================
   Footer
   ========================================================================== */
/* the colour change is the separator; the last section's padding is the gap */
.site-footer{background:var(--navy-900); color:#DBE4F7}
.site-footer a{color:#DBE4F7; text-decoration:none}      /* Rule 2.4.2 */
.site-footer a:hover{color:#fff; text-decoration:underline}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--s7);
  padding-block:var(--s9) var(--s8)}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-name em{color:var(--blue-300)}
.footer-brand p{font-size:14.5px; margin-top:var(--s4); color:#B9C6E4}
.footer-col h2,.footer-col h3,.footer-heading{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--s4)}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); font-size:14.5px}
.footer-bottom{border-top:1px solid rgba(219,228,247,.2); padding-block:var(--s5) var(--s7);
  display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between; font-size:13.5px; color:#B9C6E4}
.footer-legal{display:flex; flex-wrap:wrap; gap:var(--s5)}
.footer-disclosure{max-width:760px; font-size:13px; line-height:1.6; color:#93A4C9; padding-bottom:var(--s7)}

/* ==========================================================================
   Responsive: values step down the same scale (Rules 2.1.1, 2.8.1)
   ========================================================================== */
@media (max-width:1100px){
  :root{--section-y:var(--s8)}
  .layout{grid-template-columns:minmax(0,1fr); gap:var(--s7); max-width:var(--article);
    margin-inline:auto}
  .rail{position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5)}
  .rail .ad{grid-column:1/-1}
  .rail .ad-slot{min-height:280px}
}
@media (max-width:1100px){
  .calc{grid-template-columns:minmax(0,1fr); gap:var(--s6)}
  .calc-out{position:static}
}
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:repeat(2,1fr); gap:var(--s6)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:820px){
  :root{--section-y:var(--s7); --gutter:var(--s4)}
  .nav{display:none}
  .nav-toggle{display:block}
  .nav.is-open{display:flex; position:absolute; left:0; right:0; top:72px; flex-direction:column;
    align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--rule);
    padding:var(--s3) var(--gutter) var(--s5); box-shadow:var(--shadow-md)}
  .nav.is-open a{padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft); font-size:16px}
  .nav.is-open .nav-cta{margin-top:var(--s4); text-align:center; border:1px solid var(--rule)}
  .hero-inner{padding-block:var(--s8)}
  .hero-media::after{background:linear-gradient(178deg,
    rgba(18,36,90,.92) 0%, rgba(18,36,90,.90) 62%, rgba(18,36,90,.72) 100%)}
  .toc ol{columns:1}
  .rail{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  /* comfortable touch targets: inline links in dense lists become blocks */
  .toc a,.footer-col a{display:block; padding-block:var(--s3)}
  .toc li{margin-bottom:0}
  .toc ol{padding-left:var(--s4)}
  .footer-col ul{gap:0}
  .prose{font-size:17px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .archive-cta .btn{width:100%}
  .hero-meta{gap:var(--s4)}
  .footer-top{grid-template-columns:1fr; padding-block:var(--s8) var(--s7)}
  .btn{width:100%; justify-content:center}
  .rail-card,.toc{padding:var(--s5) var(--s4)}
  .author-card{padding:var(--s5)}
  .avatar{width:72px; height:72px; font-size:24px}
  .prose form{padding:var(--s5) var(--s4)}
  .calc{padding:var(--s5) var(--s4)}
  .calc-out{padding:var(--s5) var(--s4)}
  .calc-headline strong{font-size:32px}
  .prose button[type="submit"]{width:100%; justify-content:center}
  .chips{overflow-x:auto; flex-wrap:nowrap; padding-bottom:var(--s2);
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .pager-step{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .btn:hover,a.card:hover{transform:none}
}