/* Readability pass, 31 October 2026. No words changed: bigger small text, darker grey text, stronger colours. */

/* 1. Darker text colours (light-background versions only; dark-mode values on the guides are untouched) */
:root{
  --dim-ink:#2B3646;      /* home and notes: grey body text, was #4A5A72 / #4C535A */
  --muted:#2F3843;        /* The Plan and the two guides: was #46505C / #4A5568 */
  --amber:#8A5300;        /* The Plan: small amber labels on white, was #C97F12 */
  --bronze:#5A3D0A;       /* home: links and labels, was #6B490E */
  --teal:#0F4F4B;         /* guides: links, pull quotes, copy buttons, was #1C6B66 */
  --alarm:#8E1B15;        /* guides: the 911 box, was #B3261E */
}
.foot{color:#DDE2E7!important}
.bar a.home{background:#F2B44A!important;border-color:#F2B44A!important;color:#14213A!important;font-weight:700!important}
.planband .k{color:#14213A!important}

/* 2. Bigger text on the pages that size their type from the page base */
html{font-size:112.5%}

/* 3. Small labels, dates and captions never smaller than about 18px */
.eyebrow,.kicker,p.date,.d,.st,.yr,.lbl,.plus,.tag,.len,.band-kicker,.pb-kicker,.label,.dateline,.upd,.clip-cap,
.s,.what,.m,.chip,.badge,.who,.vid-note,.stack-note,.note,.free,.sources li,p small,li small,td small,td,th,label,button{
  font-size:max(18px,.95em)!important;
}
.eyebrow,.kicker,.band-kicker,.pb-kicker,.label,.tag,.chip{letter-spacing:.1em!important;font-weight:700!important}

/* 4. The documents band on the home page: lighter amber, black text */
.b-bronze{background:#F7C873!important;color:#000!important}
.b-bronze .eyebrow,.b-bronze h2,.b-bronze p{color:#000!important}
.b-bronze .eyebrow{font-size:20px!important}
.b-bronze .dl{border-color:#000!important;color:#000!important;background:rgba(255,255,255,.55)!important}
.b-bronze .dl .m{opacity:1!important}
.b-bronze .dl:hover{background:#14213A!important;color:#fff!important}

/* 5. The Plan band on the home page: lighter amber, black text */
.planfirst{background:#F7C873!important;color:#000!important}
.planfirst .pb-kicker,.planfirst .pb-sub,.planfirst .pb-title,.planfirst .pb-link{color:#000!important}

footer.sources,footer.sources p,footer.sources li{font-size:18px!important}
.sn-top,.sn-toggle,.totop{font-size:18px!important}
a small,.dl small,.addons a small{font-size:18px!important}

/* 6. Dark backgrounds one shade lighter, white text stays crisp */
:root{
  --navy:#3B4756;   /* home and notes bands, top bars, footers; was #2A3037 */
  --deep:#323C48;   /* home quote band; was #1A1E23 */
  --slate:#334355;  /* The Plan header and dark boxes; was #1E2A36 */
  --slate-2:#3E5063;/* The Plan step headings; was #2C3B4A */
  --hero:#2F3E58;   /* the two new guides' header; was #14213A */
}
.bar{background:#3B4756!important}
.pb-go{background:#2F3E58!important}
.pb-go:hover{background:#22304A!important}

/* 7. Big words rise into view as you scroll down */
.sn-rise{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.sn-rise.sn-pre{opacity:.45;transform:translateY(26px)}
@media (prefers-reduced-motion:reduce){.sn-rise,.sn-rise.sn-pre{transition:none;opacity:1;transform:none}}

/* 8. Big figures on dark backgrounds: white, with the key number in bright amber */
.hero .fig .n,.b-navy .fig .n{color:#FFFFFF!important}
.hero .fig .n.red,.b-navy .fig .n.red{color:#F7C873!important}
.hero .fig .l,.b-navy .fig .l,.hero .lead,.b-navy .lead,.b-navy p,.hero p{color:#F2F4F7!important}
.hero .sf{color:#FFF3D0!important}

/* 9. The Plan: each section gets its own background so you always know where you are */
.secwrap{border-radius:12px;padding:8px 32px 44px;margin-top:48px}
.secwrap > .sec-label:first-child,.secwrap > .part-label:first-child{margin-top:28px}
.sec-a{background:#FFEFD0}  /* A. Right now: warm amber */
.sec-b{background:#E1ECF8}  /* B. Before: soft blue */
.sec-c{background:#DFF1E6}  /* C. After: soft green */
.sec-d{background:#ECE6F6}  /* D. Household sheets: soft lilac */
.sec-e{background:#F4EDE2}  /* E. Extra pages: sand */
.sec-a .sec-label small{color:#7A4A00!important}
.sec-b .sec-label small{color:#1E4E86!important}
.sec-c .sec-label small{color:#1C6640!important}
.sec-d .sec-label small{color:#5B3B8E!important}
.sec-a .sec-label{border-bottom-color:#E59A1F}
.sec-b .sec-label{border-bottom-color:#2F6DB5}
.sec-c .sec-label{border-bottom-color:#2E8B57}
.sec-d .sec-label{border-bottom-color:#7A57B5}
@media (max-width:700px){.secwrap{padding:4px 16px 32px;margin-left:-8px;margin-right:-8px}}
