/* WithFunded News (news.withfunded.com). Plain CSS, no build step. Uses the
   same design tokens as the main site's content pages (pages.css). */
:root{
  --navy:#0B2239; --blue:#1B4DD8; --blue-700:#163FAE; --blue-300:#6E97F2;
  --blue-tint:#EEF3FE; --blue-tint-2:#F4F7FF;
  --cta:#F6A623; --cta-hover:#E5961A; --paper:#FFFFFF; --surface:#F7F9FC; --surface-2:#EEF2F8;
  --ink:#0B2239; --fg-2:#43566C; --fg-3:#6B7C90; --border:#E2E8F1;
  --positive:#0E7C5A; --negative:#B42318;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.6;font-size:1rem}
a{color:var(--blue)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1{font-size:clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);line-height:1.15;font-weight:800;margin:.35em 0 .3em}
h2{font-size:1.3rem;line-height:1.25;font-weight:800;margin:0 0 .6em}
h3{font-size:1.08rem;font-weight:700;margin:1.8em 0 .5em}
p{margin:.7em 0}

/* header */
header.site{border-bottom:1px solid var(--border);padding:12px 0;background:var(--paper)}
header.site .wrap{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;line-height:1.2}
.brand b{color:var(--blue)}
.brand-tag{font-weight:600;color:var(--fg-2)}
.brand-sub{font-size:.72rem;color:var(--fg-3);display:block;font-weight:500}
.nav{display:flex;gap:4px;flex:1}
.nav a{font-size:.92rem;font-weight:600;color:var(--fg-2);text-decoration:none;padding:7px 12px;border-radius:999px}
.nav a:hover{background:var(--surface)}
.nav a[aria-current=page]{background:var(--blue-tint);color:var(--blue-700)}
.nav-cta{font-size:.9rem;font-weight:600;white-space:nowrap}
@media(max-width:720px){ .nav{order:3;flex-basis:100%;margin:0 -12px} .nav-cta{margin-left:auto} }

/* intro */
.crumbs{font-size:.82rem;color:var(--fg-3);margin:22px 0 0}
.crumbs a{color:var(--fg-3)}
.intro{margin:18px 0 26px}
.crumbs + .intro{margin-top:4px}
.dek{font-size:1.12rem;color:var(--fg-2);margin:0;max-width:760px}
.stamp{font-size:.82rem;color:var(--fg-3);margin:10px 0 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.section-head h2{margin:0}
.section-head a{font-size:.9rem;font-weight:600;white-space:nowrap}
.empty{color:var(--fg-3);background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:22px}
.note{font-size:.85rem;color:var(--fg-3);max-width:820px}

/* indicator cards */
.cards{list-style:none;padding:0;margin:0 0 34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:3px;height:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none}
.card:hover{border-color:var(--blue-300);box-shadow:0 2px 10px rgba(11,34,57,.06)}
.card-name{font-size:.82rem;font-weight:600;color:var(--fg-2)}
.card-value{font-size:1.5rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.card-unit{display:block;font-size:.75rem;font-weight:500;color:var(--fg-3);min-height:1.2em}
.card-change{font-size:.8rem}
.card-date{font-size:.74rem;color:var(--fg-3);margin-top:auto;padding-top:4px}
.delta{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg-2)}
.delta.worse{color:var(--negative)}
.delta.better{color:var(--positive)}
.delta.flat{font-weight:500;color:var(--fg-3)}
.vs{color:var(--fg-3);font-weight:400}

/* headlines */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;margin-bottom:38px}
@media(max-width:900px){ .cols{grid-template-columns:1fr;gap:28px} }
.stories{list-style:none;padding:0;margin:0}
.story{padding:14px 0;border-top:1px solid var(--border)}
.story:first-child{border-top:0;padding-top:2px}
.story-title{font-weight:700;font-size:1.04rem;line-height:1.35;color:var(--ink);text-decoration:none}
.story-title:hover{color:var(--blue);text-decoration:underline}
.story-meta{font-size:.8rem;color:var(--fg-3);margin:4px 0 0}
.story-sum{font-size:.93rem;color:var(--fg-2);margin:6px 0 0}
aside h2{font-size:1rem;margin:26px 0 8px}
.links{list-style:none;padding:0;margin:0;font-size:.93rem}
.links li{padding:7px 0;border-top:1px solid var(--border)}
.links li:first-child{border-top:0}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline}
.links li[aria-current=page]{font-weight:700}
.links.two{columns:2;column-gap:36px;margin:12px 0 8px}
.links.two li{break-inside:avoid;border-top:0;padding:4px 0}
@media(max-width:560px){ .links.two{columns:1} }
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:34px 44px;margin-bottom:20px}
.topic .story-title{font-size:.96rem}
.topic .story{padding:11px 0}

/* cta */
.cta-box{background:var(--navy);color:#E7EEF7;border-radius:14px;padding:24px 24px 26px;text-align:center}
.cta-box h2{color:#fff;margin:0;font-size:1.2rem}
.cta-box p{color:#9FB2C8;margin:.5em 0 1.1em;font-size:.93rem}
main > .cta-box{margin:40px auto 0;max-width:760px}
.btn{display:inline-block;background:var(--cta);color:var(--navy);font-weight:700;padding:12px 24px;border-radius:999px;text-decoration:none}
.btn:hover{background:var(--cta-hover)}

/* indicator tables */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.jump a{font-size:.88rem;font-weight:600;border:1px solid var(--border);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--blue-700);background:var(--surface)}
.jump a:hover{border-color:var(--blue-300)}
section[id]{scroll-margin-top:16px}
.group-desc{color:var(--fg-2);margin:-4px 0 12px}
.table-wrap{overflow-x:auto;margin:0 0 34px;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:.93rem}
thead th{background:var(--surface);color:var(--fg-2);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 14px;white-space:nowrap}
tbody th,tbody td{padding:12px 14px;border-top:1px solid var(--border);vertical-align:middle;text-align:left;font-weight:400}
tbody th a{font-weight:700;text-decoration:none}
tbody th a:hover{text-decoration:underline}
.num{text-align:right !important;font-variant-numeric:tabular-nums;white-space:nowrap}
table.ind td.num:nth-child(2),table.plain td.num:last-child{font-weight:700;font-size:1.02rem}
.unit{display:block;font-size:.76rem;color:var(--fg-3)}
td .vs{display:block;font-size:.74rem}
.when{font-size:.82rem;color:var(--fg-3);white-space:nowrap}
.trend{width:136px}
.spark{display:block}
.spark path{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
table.plain{font-size:.95rem}
/* On a phone the trend line and date go, so the numbers fit without scrolling. */
@media(max-width:720px){
  table{font-size:.86rem}
  thead th{white-space:normal;padding:8px 8px;font-size:.68rem}
  tbody th,tbody td{padding:10px 8px}
  table.ind .trend,table.ind .when,table.ind th:nth-child(5),table.ind th:nth-child(6){display:none}
  table.ind td .vs{white-space:normal}
}
.table-wrap:has(table.plain){max-width:620px}
.table-wrap + .note{margin-top:-22px;margin-bottom:34px}

/* one indicator */
.indicator,.prose{max-width:820px}
.indicator h2,.prose h2{margin:1.9em 0 .4em}
.reading{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:6px 0 4px}
.reading-value{font-size:clamp(2.4rem, 1.8rem + 3vw, 3.4rem);font-weight:800;line-height:1.05;color:var(--blue);font-variant-numeric:tabular-nums}
.reading-unit{font-size:1.05rem;font-weight:600;color:var(--fg-2)}
.reading-date{font-size:.9rem;color:var(--fg-3)}
.compare{list-style:none;padding:0;margin:12px 0 22px;display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9rem;color:var(--fg-2)}
.compare li{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 13px}
.compare .was{display:block;font-size:.78rem;color:var(--fg-3)}
.chart-box{margin:0 0 8px;border:1px solid var(--border);border-radius:14px;padding:16px 14px 10px;background:var(--paper)}
.chart-box figcaption{font-size:.78rem;color:var(--fg-3);margin-top:6px}
.chart{display:block;width:100%;height:auto}
.chart .line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--blue-tint);stroke:none}
.chart .dot{fill:var(--blue);stroke:#fff;stroke-width:2}
.chart .grid{stroke:var(--border);stroke-width:1}
.chart .zero{stroke:var(--fg-3);stroke-width:1;stroke-dasharray:4 4}
.chart .tick{font-family:var(--font);font-size:12px;fill:var(--fg-3)}
.indicator .cards{margin-bottom:0}
.prose .dek{margin-bottom:8px}

/* footer */
footer.site{border-top:1px solid var(--border);margin-top:52px;padding:26px 0 40px;font-size:.8rem;color:var(--fg-3)}
footer.site p{max-width:900px}
footer.site a{color:var(--fg-3)}
.tp-badge{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.tp-badge b{color:var(--ink)}