/* Fonts load via + in each page's
(faster first paint than an in-CSS @import, which the browser discovers late). */
/* ============================================================
AU MORNING BRIEF — "Morning Light, Broadsheet Edition"
Base: Warm & Approachable (Fraunces serif heads, warm paper,
terracotta/amber accents, unambiguous green/red pills).
Grafts:
- Editorial Broadsheet: 3px double-rule masthead + serif
prose body for editorial gravitas
- Broadsheet Calm: hairline-gutter stats grid (1px gutters
on a shared tint), fixed column count to kill orphan cell
- Indigo Ledger: filled .chg direction pills, named grid-area
calendar reflow, inset-ring :focus-visible, zero-overflow
- Warm Morning Light: "30s" hero badge + amber
"what it means for you" callout
Mobile-first. Dark-mode aware. Pure-CSS glossary tooltip.
============================================================ */
:root {
/* Warm neutrals */
--paper: #FBF7F0;
--paper-2: #F4ECE0;
--surface: #FFFFFF;
--surface-2: #FCF8F2;
/* Ink */
--ink: #2B2018;
--ink-soft: #5C4F42;
--ink-faint: #897A6A;
--hairline: #EADFCF;
--hairline-2: #E0D2BD;
--rule-strong:#C9B79A;
/* Accents */
--terracotta: #C2410C;
--terracotta-deep: #9A330A;
--amber: #D97706;
--amber-soft: #FBEBCB;
--amber-tint: #FDF4E3;
/* Direction */
--up: #15803D;
--up-bg: #E7F4EC;
--down: #DC2626;
--down-bg: #FBEAEA;
--flat: #897A6A;
--flat-bg: #F0E9DD;
/* Shape & depth */
--r-sm: 8px;
--r: 14px;
--r-lg: 20px;
--shadow-sm: 0 1px 2px rgba(67, 45, 24, .06);
--shadow: 0 4px 16px -6px rgba(67, 45, 24, .16), 0 1px 3px rgba(67,45,24,.06);
--shadow-lg: 0 18px 44px -18px rgba(120, 70, 25, .30), 0 2px 8px rgba(67,45,24,.06);
/* Type — Fraunces display heads, Source Serif prose, system sans for data */
--serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
--serif-body: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
--maxw: 760px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
svg, img { max-width: 100%; height: auto; }
p, blockquote, .foot-disc { overflow-wrap: anywhere; }
body {
margin: 0;
font-family: var(--serif-body);
font-size: 18px;
line-height: 1.64;
color: var(--ink);
background-color: var(--paper);
background-image:
radial-gradient(1100px 460px at 100% -8%, rgba(217,119,6,.07), transparent 60%),
radial-gradient(900px 460px at -10% 4%, rgba(194,65,12,.05), transparent 55%);
background-attachment: fixed;
font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: var(--terracotta); color: #fff; }
/* ---------- Layout ---------- */
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.1rem, 5vw, 1.6rem) 4.5rem;
}
/* ============================================================
Masthead — GRAFT: Editorial Broadsheet 3px double rule
============================================================ */
h1 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.8rem, 5.4vw, 2.7rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 0.55rem;
padding-bottom: 0.85rem;
border-bottom: 3px double var(--rule-strong);
text-wrap: balance;
}
/* Mood line directly after h1 */
h1 + p {
margin: 0.6rem 0 2.2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--hairline);
font-family: var(--sans);
font-size: .92rem;
color: var(--ink-soft);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem .55rem;
}
h1 + p strong {
display: inline-flex;
align-items: center;
gap: .5ch;
font-weight: 600;
color: var(--terracotta-deep);
background: var(--amber-soft);
border: 1px solid #F2D9A8;
padding: .26rem .7rem;
border-radius: 999px;
font-size: .82rem;
letter-spacing: .02em;
}
h1 + p strong::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 0 3px rgba(217,119,6,.18);
}
h1 + p em { font-style: italic; color: var(--ink-faint); }
/* ---------- Section headings ---------- */
h2 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.22rem, 3vw, 1.4rem);
letter-spacing: -0.01em;
color: var(--ink);
margin: 2.6rem 0 0.9rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--hairline);
position: relative;
}
h2::after {
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 2.4rem; height: 2px;
background: linear-gradient(90deg, var(--terracotta), var(--amber));
}
/* ---------- Prose ---------- */
p { margin: 0 0 1.05rem; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
a {
color: var(--terracotta-deep);
text-decoration: underline;
text-decoration-color: rgba(194,65,12,.35);
text-underline-offset: 2px;
font-weight: 500;
transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--amber); text-decoration-color: currentColor; }
/* ---------- Lists ---------- */
ul { margin: 0 0 1.15rem; padding-left: 0; list-style: none; }
ul li {
position: relative;
padding-left: 1.4rem;
margin: 0 0 .7rem;
color: var(--ink-soft);
}
ul li::before {
content: "";
position: absolute;
left: .25rem; top: .72em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--amber);
}
ul li strong { color: var(--ink); }
ul li em { color: var(--ink-faint); font-style: italic; }
/* ============================================================
Hero: the 30-second brief
GRAFT: Warm "30s" badge + amber "what it means" callout
============================================================ */
.thirty {
position: relative;
background: linear-gradient(180deg, var(--surface), var(--surface-2));
border: 1px solid var(--hairline-2);
border-radius: var(--r-lg);
padding: clamp(1.4rem, 4vw, 1.7rem) clamp(1.3rem, 4vw, 1.5rem) clamp(1.2rem, 4vw, 1.4rem);
margin: 0 0 .5rem;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.thirty::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 6px;
background: linear-gradient(180deg, var(--terracotta), var(--amber));
}
.thirty h2 {
font-family: var(--serif);
font-size: clamp(1.3rem, 3.4vw, 1.5rem);
margin: 0 0 .9rem;
padding: 0;
border: 0;
display: flex;
align-items: center;
gap: .6ch;
}
.thirty h2::after { display: none; }
.thirty h2::before {
content: "30s";
font-family: var(--sans);
font-weight: 700;
font-size: .62rem;
letter-spacing: .06em;
color: #fff;
background: linear-gradient(135deg, var(--terracotta), var(--amber));
padding: .25rem .5rem;
border-radius: 999px;
line-height: 1;
flex: none;
}
.thirty p {
color: var(--ink-soft);
font-size: clamp(1.06rem, 2.6vw, 1.18rem);
line-height: 1.58;
}
.thirty p:first-of-type { color: var(--ink); }
.thirty p:last-child { margin-bottom: 0; }
.thirty p strong { color: var(--terracotta-deep); }
/* "What it means for you" callout box */
.thirty p:has(strong:first-child) {
background: var(--amber-tint);
border: 1px solid #F4E3C2;
border-radius: var(--r);
padding: .9rem 1.05rem;
margin-top: 1.1rem;
color: var(--ink);
font-size: 1.02rem;
}
/* ============================================================
details / summary (kept for any collapsible content)
============================================================ */
details {
background: var(--surface);
border: 1px solid var(--hairline-2);
border-radius: var(--r);
padding: 0 1.25rem;
margin: 1.4rem 0 .5rem;
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease;
}
details[open] { box-shadow: var(--shadow); }
summary {
font-family: var(--sans);
font-weight: 700;
font-size: .82rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-soft);
cursor: pointer;
list-style: none;
padding: 1rem 0;
display: flex;
align-items: center;
gap: .65rem;
user-select: none;
transition: color .15s ease;
}
summary::-webkit-details-marker { display: none; }
summary::before {
content: "";
width: 9px; height: 9px;
border-right: 2.2px solid var(--terracotta);
border-bottom: 2.2px solid var(--terracotta);
transform: rotate(-45deg);
transition: transform .22s ease;
flex: none;
margin-bottom: 2px;
}
details[open] summary::before { transform: rotate(45deg); margin-bottom: 0; }
summary:hover { color: var(--terracotta-deep); }
details[open] summary { border-bottom: 1px solid var(--hairline); }
details > *:not(summary) { animation: fold .26s ease; }
details > p:first-of-type { margin-top: 1rem; }
details > *:last-child { margin-bottom: 1.1rem; }
@keyframes fold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ============================================================
The numbers — stat grid
GRAFT: Broadsheet Calm hairline gutters (1px gaps over shared
tint, overflow:hidden) + FIXED columns to kill orphan cell
============================================================ */
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--hairline-2);
border: 1px solid var(--hairline-2);
border-radius: var(--r);
overflow: hidden;
margin: .9rem 0 .6rem;
}
.stat {
background: var(--surface);
padding: 1rem 1.1rem 1.05rem;
display: flex;
flex-direction: column;
gap: .3rem;
transition: background .15s ease;
}
.stat:hover { background: var(--surface-2); }
.stat .lbl {
font-family: var(--sans);
font-size: .7rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-faint);
}
.stat .val {
font-family: var(--mono);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.08;
font-variant-numeric: tabular-nums;
}
.stat .chg {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: .2rem;
font-family: var(--mono);
font-size: .8rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
padding: .18rem .55rem;
border-radius: 999px;
}
.chg.up { color: var(--up); background: var(--up-bg); }
.chg.down { color: var(--down); background: var(--down-bg); }
.chg.flat { color: var(--flat); background: var(--flat-bg); }
/* ============================================================
What's coming up — calendar agenda
GRAFT: Indigo Ledger named grid-area reflow on narrow phones
============================================================ */
.cal { margin: .9rem 0 .6rem; padding: 0; }
.cal li {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: .9rem;
padding: .85rem 1rem;
margin: 0 0 .55rem;
background: var(--surface);
border: 1px solid var(--hairline-2);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
}
.cal li::before { display: none; }
.cdate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
padding: .35rem 0;
border-radius: var(--r-sm);
background: var(--amber-soft);
border: 1px solid #F2D9A8;
line-height: 1;
}
.cdate b {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 600;
color: var(--terracotta-deep);
font-variant-numeric: tabular-nums;
}
.cdate span {
font-family: var(--sans);
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--amber);
margin-top: .18rem;
}
.ctime {
font-family: var(--mono);
font-size: .9rem;
font-weight: 600;
color: var(--ink-soft);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.cev {
font-family: var(--sans);
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
min-width: 0;
}
.cev em {
font-style: normal;
font-family: var(--sans);
font-size: .66rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--terracotta-deep);
background: var(--paper-2);
border: 1px solid var(--hairline-2);
padding: .15rem .5rem;
border-radius: 999px;
white-space: nowrap;
}
.cimp {
font-size: .8rem;
letter-spacing: 1px;
color: var(--terracotta);
white-space: nowrap;
}
/* ============================================================
.gloss — inline glossary + pure-CSS data-tip tooltip
============================================================ */
.gloss {
position: relative;
color: var(--terracotta-deep);
font-weight: 600;
text-decoration: underline dotted var(--amber);
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
cursor: help;
white-space: nowrap;
}
.gloss::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 11px);
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: min(300px, 78vw);
font-family: var(--sans);
font-weight: 400;
font-size: .82rem;
line-height: 1.5;
letter-spacing: .005em;
color: #FCF6EC;
background: #3A2A1C;
border: 1px solid rgba(255,255,255,.08);
padding: .65rem .8rem;
border-radius: 12px;
box-shadow: var(--shadow-lg);
text-align: left;
white-space: normal;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 30;
transition: opacity .14s ease, transform .14s ease;
}
.gloss::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%) translateY(4px);
border: 7px solid transparent;
border-top-color: #3A2A1C;
opacity: 0;
visibility: hidden;
z-index: 31;
transition: opacity .14s ease, transform .14s ease;
}
.gloss:hover, .gloss:focus { outline: none; }
.gloss:hover::after, .gloss:focus::after,
.gloss:hover::before, .gloss:focus::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ============================================================
Blockquote — disclaimer
============================================================ */
blockquote {
margin: 2.6rem 0 0;
padding: 1rem 1.25rem;
background: var(--paper-2);
border: 1px solid var(--hairline);
border-left: 4px solid var(--amber);
border-radius: 0 var(--r) var(--r) 0;
font-family: var(--sans);
font-size: .84rem;
color: var(--ink-faint);
line-height: 1.55;
}
blockquote em { font-style: italic; }
blockquote p { margin: 0; }
/* ============================================================
Tables (defensive — may appear)
============================================================ */
table {
width: 100%;
border-collapse: collapse;
margin: .9rem 0 1.4rem;
font-size: .92rem;
background: var(--surface);
border: 1px solid var(--hairline-2);
border-radius: var(--r);
overflow: hidden;
}
th, td {
padding: .65rem .85rem;
text-align: left;
border-bottom: 1px solid var(--hairline);
font-variant-numeric: tabular-nums;
}
th {
font-family: var(--sans);
font-size: .72rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-faint);
background: var(--surface-2);
}
tr:last-child td { border-bottom: 0; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 560px) {
body { font-size: 17px; }
.wrap { padding: 1.3rem .9rem 3.5rem; }
.thirty { border-radius: var(--r); }
/* Hairline grid -> 2 columns; 6 stats tile cleanly with no orphan */
.stats { grid-template-columns: repeat(2, 1fr); }
.stat .val { font-size: 1.34rem; }
/* GRAFT: Indigo named grid-area calendar collapse */
.cal li {
grid-template-columns: auto 1fr;
grid-template-areas:
"date event"
"date meta";
gap: .25rem .8rem;
}
.cdate { grid-area: date; align-self: center; }
.cev { grid-area: event; }
.ctime { grid-area: meta; font-size: .82rem; color: var(--ink-faint); }
.cimp { grid-area: meta; justify-self: end; align-self: center; grid-row: 2; }
/* Stacked masthead + horizontally-scrollable nav on phones */
.masthead { flex-direction: column; align-items: flex-start; }
.topbar {
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
gap: .4rem;
scrollbar-width: none;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar a { padding: .5rem .55rem; white-space: nowrap; }
}
@media (max-width: 360px) {
.stats { grid-template-columns: repeat(2, 1fr); }
.stat { padding: .7rem .7rem; }
}
@media (min-width: 900px) {
.calc { max-width: 880px; }
}
/* ---- Manual dark mode (forced via data-theme="dark", overrides OS) ---- */
:root[data-theme="dark"] {
--paper: #1A130D;
--paper-2: #241A12;
--surface: #241A12;
--surface-2: #2B1F15;
--ink: #F4E9DA;
--ink-soft: #CDBBA6;
--ink-faint: #9C8870;
--hairline: #3A2C1E;
--hairline-2: #45341F;
--rule-strong:#5A4528;
--terracotta: #F08A4B;
--terracotta-deep: #FBA66A;
--amber: #F1AE4B;
--amber-soft: #3A2A14;
--amber-tint: #2A1E10;
--up: #5BD08A;
--up-bg: #15301F;
--down: #F77B7B;
--down-bg: #361717;
--flat: #9C8870;
--flat-bg: #2A2016;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 6px 20px -8px rgba(0,0,0,.55);
--shadow-lg: 0 22px 50px -22px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.4);
}
:root[data-theme="dark"] body {
background-color: var(--paper);
background-image:
radial-gradient(1100px 460px at 100% -8%, rgba(241,174,75,.10), transparent 60%),
radial-gradient(900px 460px at -10% 4%, rgba(240,138,75,.08), transparent 55%);
}
:root[data-theme="dark"] ::selection { background: var(--terracotta); color: #1A130D; }
:root[data-theme="dark"] h1 + p strong { border-color: #4D3A1C; }
:root[data-theme="dark"] .thirty p:has(strong:first-child) { border-color: var(--hairline-2); }
:root[data-theme="dark"] .cev em { border-color: var(--hairline-2); }
:root[data-theme="dark"] .cdate { border-color: #4D3A1C; }
:root[data-theme="dark"] .gloss::after { background: #0F0A06; color: #F4E9DA; border-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .gloss::before { border-top-color: #0F0A06; }
:root[data-theme="dark"] a { text-decoration-color: rgba(240,138,75,.45); }
/* ============================================================
Accessibility — GRAFT: Indigo inset-ring focus discipline
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
.gloss:focus-visible,
a:focus-visible,
summary:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 3px;
border-radius: 4px;
}
/* ---- claim-level "why?" pop-ups + tap/focus support (added after redesign) ---- */
.why{cursor:help;position:relative;font-weight:500;color:inherit;
border-bottom:1px dashed var(--terracotta,#C2410C)}
.why::after{content:"\203A";font-size:.85em;color:var(--terracotta,#C2410C);margin-left:.12em}
.why:hover,.why:focus-visible{background:var(--amber-tint,#FDF4E3);border-radius:3px}
.gloss,.why{outline:none}
.gloss:focus-visible::after,.why:hover::after,.why:focus-visible::after{
content:attr(data-tip);position:absolute;left:0;top:1.7em;z-index:50;width:min(300px,84vw);
background:#2B2018;color:#FBF7F0;font-family:var(--sans,system-ui),sans-serif;font-weight:400;
font-size:.82rem;line-height:1.5;padding:.62rem .8rem;border-radius:10px;
box-shadow:0 12px 32px rgba(0,0,0,.30);white-space:normal;margin:0}
/* ---- JS-driven tooltip that stays within the viewport (replaces CSS ::after popup) ---- */
.gloss:hover::after,.gloss:focus-visible::after,.why:hover::after,.why:focus-visible::after{content:none !important}
#mtip{position:fixed;display:none;z-index:9999;max-width:min(320px,90vw);
background:#2B2018;color:#FBF7F0;font-family:var(--sans,system-ui),sans-serif;
font-size:.82rem;line-height:1.5;font-weight:400;padding:.62rem .8rem;border-radius:10px;
box-shadow:0 12px 32px rgba(0,0,0,.32);pointer-events:none}
:root[data-theme="dark"] #mtip{background:#0f1410;color:#e8eef0;border:1px solid #2a332c}
/* ---- top nav (Latest | Archive) ---- */
.topbar{display:flex;gap:1.3rem;justify-content:flex-end;align-items:center;
font-family:var(--sans,system-ui),sans-serif;font-size:.8rem;letter-spacing:.04em;
text-transform:uppercase;margin:-.4rem 0 1.4rem}
.topbar a{color:var(--ink-faint,#897A6A);text-decoration:none;font-weight:600}
.topbar a:hover{color:var(--terracotta,#C2410C)}
:root[data-theme="dark"] .topbar a{color:#9b8f80}
/* ---- subscribe box ---- */
.subscribe{margin:2.8rem 0 0;padding:1.4rem 1.5rem;
background:linear-gradient(180deg,var(--surface,#fff),var(--surface-2,#FCF8F2));
border:1px solid var(--hairline-2,#E0D2BD);border-radius:var(--r-lg,16px);box-shadow:var(--shadow-sm)}
.subscribe h2{margin:0 0 .85rem;border:0;padding:0;font-size:1.2rem}
.subscribe h2::after{display:none}
.subrow{display:flex;gap:.5rem;flex-wrap:wrap}
.subscribe input[type=email]{flex:1 1 220px;min-width:0;font-family:var(--sans,system-ui),sans-serif;
font-size:1rem;padding:.72rem .9rem;border:1px solid var(--hairline-2,#E0D2BD);border-radius:10px;
background:#fff;color:var(--ink,#2B2018)}
.subscribe input[type=email]:focus{outline:2px solid var(--terracotta,#C2410C);border-color:var(--terracotta,#C2410C)}
.subscribe button{font-family:var(--sans,system-ui),sans-serif;font-weight:700;font-size:.95rem;color:#fff;
cursor:pointer;border:0;border-radius:10px;padding:.72rem 1.4rem;
background:linear-gradient(135deg,var(--terracotta,#C2410C),var(--amber,#D97706))}
.subscribe button:hover{filter:brightness(1.06)}
.subnote{font-family:var(--sans,system-ui),sans-serif;font-size:.78rem;color:var(--ink-faint,#897A6A);margin:.75rem 0 0}
:root[data-theme="dark"] .subscribe input[type=email]{background:#1a201b;color:#e8eef0;border-color:#2a332c}
/* ============================================================
Calculator tool kit (shared by all /…-calculator.html pages)
============================================================ */
.calc{max-width:760px;margin:1.2em 0}
.calc-grid{display:grid;gap:14px;margin:1em 0}
.calc-row{display:flex;gap:12px;flex-wrap:wrap}
.calc-row .calc-field{flex:1;min-width:150px}
.calc-field{display:flex;flex-direction:column;gap:5px}
.calc-field label{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.calc-field input,.calc-field select{font:inherit;padding:.6em .7em;border:1px solid var(--hairline-2);
border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
.calc-field input:focus,.calc-field select:focus{outline:2px solid var(--terracotta);outline-offset:1px}
.calc-field .hint{font-size:.74rem;color:var(--ink-faint)}
/* ---- range sliders: shared by all 5 calculators ----
26px terracotta thumb + 8px hairline track on a 44px invisible hit strip
so they're easy to grab on tablets/phones; warm tokens + visible focus ring.
Tokens (--terracotta/--hairline-2/--surface) auto-adapt in dark mode. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;padding:0;
background:transparent;cursor:pointer;accent-color:var(--terracotta);touch-action:none}
/* WebKit / Blink (Chrome, Safari, Edge) */
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--hairline-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
margin-top:-9px;border-radius:50%;background:var(--terracotta);border:3px solid var(--surface);
box-shadow:0 1px 3px rgba(67,45,24,.3)}
/* Firefox */
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--hairline-2)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--terracotta);
border:3px solid var(--surface);box-shadow:0 1px 3px rgba(67,45,24,.3)}
input[type=range]::-moz-focus-outer{border:0}
/* visible keyboard focus ring (warm terracotta halo) — no glow on plain mouse drag */
input[type=range]:focus{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--terracotta)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--terracotta)}
.calc-result{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--hairline-2);
border-radius:18px;padding:1.1em 1.3em;margin:1.3em 0;box-shadow:var(--shadow)}
.calc-result .lead{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
.calc-result .big{font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--terracotta-deep);line-height:1.1;margin:.1em 0}
.calc-result .sub{color:var(--ink-soft);font-size:.92rem}
.calc-breakdown{width:100%;border-collapse:collapse;font-size:.92rem;margin:.7em 0}
.calc-breakdown td,.calc-breakdown th{padding:6px 9px;border-bottom:1px solid var(--hairline);text-align:left}
.calc-breakdown td:last-child,.calc-breakdown th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.calc-btn{font:inherit;font-weight:600;background:var(--terracotta);color:#fff;border:0;border-radius:999px;
padding:.6em 1.4em;cursor:pointer}
.calc-btn.secondary{background:transparent;color:var(--terracotta-deep);border:1px solid var(--hairline-2)}
.tool-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:1.2em 0}
.tool-card{display:block;border:1px solid var(--hairline-2);border-radius:14px;padding:14px 16px;
background:var(--surface);text-decoration:none;color:var(--ink)}
.tool-card:hover{box-shadow:var(--shadow);border-color:var(--rule-strong)}
.tool-card b{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.tool-card span{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:3px}
.explainer h2{margin-top:1.6em}
.faq dt{font-weight:600;margin-top:1em}
.faq dd{margin:.3em 0 0;color:var(--ink-soft)}
/* ---- masthead: plainmoney wordmark + nav ---- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;
flex-wrap:wrap;margin:0 0 1.7rem;padding-bottom:.75rem;border-bottom:1px solid var(--hairline,#EADFCF)}
.brand{font-family:var(--serif,Georgia),serif;font-weight:700;font-size:1.5rem;line-height:1;
letter-spacing:-.02em;color:var(--ink,#2B2018);text-decoration:none}
.brand:hover{color:var(--terracotta-deep,#9A330A);text-decoration:none}
.masthead .topbar{margin:0}
/* thumb-friendly nav tap targets (was ~13px tall, no padding) */
.topbar a{padding:.45rem .3rem;min-height:44px;display:inline-flex;align-items:center}
/* ---- site footer: trust + legal ---- */
.site-foot{margin:3.5rem 0 0;padding:1.6rem 0 0;border-top:3px double var(--rule-strong,#C9B79A)}
.foot-brand{font-family:var(--serif,Georgia),serif;font-weight:700;font-size:1.2rem;
letter-spacing:-.01em;color:var(--ink,#2B2018)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.1rem;margin:.5rem 0 .2rem;padding:0}
.foot-links a{font-family:var(--sans,system-ui),sans-serif;font-size:.85rem;font-weight:600;
color:var(--ink-soft,#5C4F42);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.foot-links a:hover{color:var(--terracotta,#C2410C);text-decoration:underline}
.foot-disc{font-family:var(--sans,system-ui),sans-serif;font-size:.76rem;line-height:1.55;
color:var(--ink-faint,#897A6A);margin:.6rem 0;max-width:64ch}
.foot-copy{font-family:var(--sans,system-ui),sans-serif;font-size:.74rem;
color:var(--ink-faint,#897A6A);margin:.3rem 0 0}
:root[data-theme="dark"] .masthead{border-color:var(--hairline,#3A2C1E)}
:root[data-theme="dark"] .brand,:root[data-theme="dark"] .foot-brand{color:var(--ink,#F4E9DA)}
/* ---- brief call-to-action (near footer) ---- */
.brief-cta{font-family:var(--sans,system-ui),sans-serif;font-size:.92rem;text-align:center;
color:var(--ink-soft,#5C4F42);margin:2.4rem 0 0}
.brief-cta a{font-weight:700}
/* ---- related calculators block ---- */
.related-calcs{margin:2.6rem 0 0}
.related-calcs h2{margin-bottom:.6rem}
/* ============================================================
Chrome: scroll progress bar, back-to-top, theme toggle button
============================================================ */
#pm-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--terracotta),var(--amber));transition:width .1s linear}
#pm-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;width:46px;height:46px;border:0;border-radius:50%;background:var(--terracotta);color:#fff;font-size:20px;cursor:pointer;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s}
#pm-top.show{opacity:1;pointer-events:auto}
.pm-themebtn{background:none;border:0;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--ink-faint);padding:.45rem .35rem;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.pm-themebtn:hover{color:var(--terracotta)}
@media (prefers-reduced-motion:reduce){#pm-prog,#pm-top{transition:none}}
/* ============================================================
Print stylesheet
============================================================ */
@media print{.masthead,.topbar,.subscribe,.site-foot,.related-calcs,.calc-actions,#pm-prog,#pm-top,.pm-themebtn{display:none!important} body{background:#fff} .calc-result,svg{break-inside:avoid}}
/* ============================================================
Micro-interactions — tap feedback (motion-safe)
============================================================ */
a,button,.tool-card{-webkit-tap-highlight-color:transparent}
.tool-card:active,.calc-btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.tool-card:active,.calc-btn:active{transform:none}}
/* ============================================================
Impact flames — colored heat icon on impact-tagged phrases
(mirror of morningscan/render/style.css so static pages match)
============================================================ */
.impact{cursor:help;border-bottom:1px dashed currentColor;text-underline-offset:2px}
.impact .flame,.cimp .flame{width:.8em;height:1em;margin-left:.18em;vertical-align:-0.12em;display:inline-block}
.impact-l1{color:#C99A3B}.impact-l2{color:#C9701F}.impact-l3{color:#C2410C}.impact-l4{color:#B23A1A}.impact-l5{color:#9E1B1B}
:root[data-theme="dark"] .impact-l1{color:#E6B85C} :root[data-theme="dark"] .impact-l2{color:#E08A3C} :root[data-theme="dark"] .impact-l3{color:#F08A4B} :root[data-theme="dark"] .impact-l4{color:#F0743C} :root[data-theme="dark"] .impact-l5{color:#F26B6B}
.cimp.impf{display:inline-flex;align-items:center;cursor:help}