@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&display=swap');
/* ============================================================
   Math That Pays — companion resource site
   Plain CSS design system. No build step, no framework.
   Per-book theming via a body class: .theme-shopping etc.
   ============================================================ */

:root {
  --ink: #f5f1ea;
  --ink-soft: #b8b3a8;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.2);
  --bg: #0a0b10;
  --bg-soft: #0d1018;
  --bg-panel: #101520;
  --accent: #e8973a;        /* series default: Everyday amber */
  --accent-dark: #8a5a20;
  --accent-tint: rgba(232,151,58,.12);
  --accent-rgb: 232,151,58;
  --ok: #4fe08f;
  --warn: #ff7b6b;
  --radius: 2px;
  --maxw: 1080px;
  --readw: 760px;
  --shadow: none;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --accent2: #4cc3ec;       /* site complement: ice cyan against the amber */
  --accent2-rgb: 76,195,236;
  --mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  --cond: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
}

/* Per-book accent palettes */
.theme-shopping { --accent:#e8a030; --accent-dark:#8b601c; --accent-tint:rgba(232,160,48,.12); --accent-rgb:232,160,48; }
.theme-payslip { --accent:#35c9c4; --accent-dark:#1f7875; --accent-tint:rgba(53,201,196,.12); --accent-rgb:53,201,196; }
.theme-bills { --accent:#b98bdc; --accent-dark:#6f5384; --accent-tint:rgba(185,139,220,.12); --accent-rgb:185,139,220; }
.theme-loan { --accent:#6c93e0; --accent-dark:#405886; --accent-tint:rgba(108,147,224,.12); --accent-rgb:108,147,224; }
.theme-saving { --accent:#4fc487; --accent-dark:#2f7551; --accent-tint:rgba(79,196,135,.12); --accent-rgb:79,196,135; }
.theme-thishard { --accent:#5fd19a; --accent-dark:#397d5c; --accent-tint:rgba(95,209,154,.12); --accent-rgb:95,209,154; }
.theme-budget { --accent:#8fa8c4; --accent-dark:#556475; --accent-tint:rgba(143,168,196,.12); --accent-rgb:143,168,196; }
.theme-business { --accent:#35c9b8; --accent-dark:#1f786e; --accent-tint:rgba(53,201,184,.12); --accent-rgb:53,201,184; }
.theme-accounting { --accent:#5eb4d6; --accent-dark:#386c80; --accent-tint:rgba(94,180,214,.12); --accent-rgb:94,180,214; }
.theme-everyday { --accent:#e8973a; --accent-dark:#8b5a22; --accent-tint:rgba(232,151,58,.12); --accent-rgb:232,151,58; }
.theme-money-math { --accent:#4fe08f; --accent-dark:#2f8655; --accent-tint:rgba(79,224,143,.12); --accent-rgb:79,224,143; }
.theme-kitchen-math { --accent:#ff6b78; --accent-dark:#994048; --accent-tint:rgba(255,107,120,.12); --accent-rgb:255,107,120; }
.theme-garden-math { --accent:#4cc3ec; --accent-dark:#2d758d; --accent-tint:rgba(76,195,236,.12); --accent-rgb:76,195,236; }
.theme-work-math { --accent:#9a7cf0; --accent-dark:#5c4a90; --accent-tint:rgba(154,124,240,.12); --accent-rgb:154,124,240; }
.theme-woodworking { --accent:#d9a066; --accent-dark:#82603d; --accent-tint:rgba(217,160,102,.12); --accent-rgb:217,160,102; }
/* Maker Electronics Math — "Frost & Copper": cold greenhouse glass, warm bench light.
   Distinct from theme-woodworking's Walnut & Teal at thumbnail size, which is the test. */
.theme-electronics { --accent:#6cb8e8; --accent-dark:#406e8b; --accent-tint:rgba(108,184,232,.12); --accent-rgb:108,184,232; }
.theme-baking { --accent:#e8a35a; --accent-dark:#8b6136; --accent-tint:rgba(232,163,90,.12); --accent-rgb:232,163,90; }
.theme-renovation { --accent:#5aa6e0; --accent-dark:#366386; --accent-tint:rgba(90,166,224,.12); --accent-rgb:90,166,224; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .4rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-dark); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.1rem; }
.readable { max-width: var(--readw); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ---------- Top navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container {
  display: flex; align-items: center; gap: 1rem;
  min-height: 56px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand .brand-mark { width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto; }
.brand span { color: var(--accent); }
.site-nav nav { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
.site-nav nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .92rem;
  padding: .35rem .7rem; border-radius: 999px;
}
.site-nav nav a:hover, .site-nav nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-dark); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--accent-tint), #fff);
  border-bottom: 1px solid var(--line);
  padding: 2.6rem 0 2rem;
}
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: .76rem; font-weight: 700;
  color: var(--accent-dark); margin: 0 0 .5rem;
}
.hero p.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 60ch; }
.bookbadge {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: var(--accent); padding: .2rem .6rem; border-radius: 999px; margin-bottom: .7rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 650; font-size: .95rem; padding: .6rem 1.05rem; border-radius: 8px;
  border: 1px solid var(--accent-dark); cursor: pointer; transition: transform .04s ease, filter .15s ease;
}
.btn:hover { color:#fff; filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #fff; color: var(--accent-dark); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--accent-tint); }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card h3 { margin-top: .1rem; }
.card .meta { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-dark); }
.card p { color: var(--ink-soft); font-size: .95rem; }
.card .spacer { flex: 1; }

/* Book card with a coloured spine */
.book-card { border-left: 6px solid var(--accent); }
.book-card a.title { text-decoration: none; color: var(--ink); }
.book-card a.title:hover { color: var(--accent-dark); }

a.tile { text-decoration: none; color: inherit; display: block; }
a.tile .card:hover { border-color: var(--line-strong); transform: translateY(-1px); transition: .12s ease; }

.pill {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); border: 1px solid var(--line);
}

/* ---------- Chapter list ---------- */
.chapters { list-style: none; padding: 0; margin: .6rem 0 0; }
.chapters li {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.chapters li .n {
  flex: 0 0 auto; min-width: 2.1rem; text-align: center;
  font-weight: 700; font-size: .82rem; color: #fff; background: var(--accent);
  border-radius: 6px; padding: .1rem .35rem;
}
.chapters li .n.bonus { background: var(--ink-soft); }
.chapters li .t { font-weight: 600; }

/* ---------- Section helpers ---------- */
section { padding: .4rem 0; }
.section-pad { padding: 2rem 0; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.kicker { color: var(--accent-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; }

/* ---------- Calculator UI ---------- */
.calc {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; margin: 1.2rem 0;
}
.calc .field { margin-bottom: .9rem; }
.calc label { display: block; font-weight: 650; font-size: .92rem; margin-bottom: .25rem; }
.calc label .hint { font-weight: 400; color: var(--ink-soft); font-size: .82rem; }
.calc input[type="number"], .calc input[type="text"], .calc select {
  width: 100%; padding: .55rem .6rem; font-size: 1rem; font-family: var(--sans);
  border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink);
}
.calc input[type="email"], .calc textarea {
  width: 100%; padding: .55rem .6rem; font-size: 1rem; font-family: var(--sans);
  border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink);
}
.calc textarea { line-height: 1.45; resize: vertical; }
.calc textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.calc input:focus, .calc select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.calc-subhead { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  font-weight: 700; margin: 1.1rem 0 .5rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.calc-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.result {
  margin-top: 1.1rem; background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--accent); border-radius: 8px; padding: 1rem 1.1rem;
}
.result .big { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--accent-dark); }
.result .label { font-size: .85rem; color: var(--ink-soft); }
.result.empty { color: var(--ink-soft); border-left-color: var(--line-strong); }
.result.bad { border-left-color: var(--warn); }
.result.good { border-left-color: var(--ok); }
.stat-grid { display: grid; gap: .7rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); margin-top: .4rem; }
.stat .v { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; }
.stat .k { font-size: .8rem; color: var(--ink-soft); }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 1rem; }
table.data th, table.data td { padding: .4rem .55rem; border-bottom: 1px solid var(--line); text-align: right; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { background: var(--bg-panel); font-weight: 700; }
.table-scroll { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 1rem; }
.table-scroll table.data { margin: 0; }
.table-scroll thead th { position: sticky; top: 0; }

.row-controls { display: flex; gap: .5rem; margin: .4rem 0 0; flex-wrap: wrap; }
.chapter-link { font-size: .85rem; }

/* ---------- Buy on Amazon ---------- */
.card-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .2rem; }
.buy-amazon {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  color: #6b4b0f; background: #ffd47a; border: 1px solid #d99a1f;
  padding: .32rem .7rem; border-radius: 999px;
  transition: filter .12s ease, transform .04s ease;
}
.buy-amazon:hover { filter: brightness(1.05); color: #4b3300; }
.buy-amazon:active { transform: translateY(1px); }
.buy-amazon::before { content: "a"; font-family: Georgia, serif; font-style: italic; font-weight: 900; font-size: .95rem; line-height: 1; }
.btn.amazon {
  background: #ffb84d; color: #3a2600; border-color: #d99a1f;
}
.btn.amazon:hover { color: #2b1c00; }
.note {
  background: var(--accent-tint); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .9rem; font-size: .9rem; color: var(--ink-soft); margin: 1rem 0;
}
.note strong { color: var(--ink); }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: .85rem; color: var(--ink-soft); margin: 1rem 0 .2rem; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 3.5rem; background: var(--bg-soft); border-top: 1px solid var(--line);
  padding: 2rem 0; font-size: .9rem; color: var(--ink-soft);
}
.site-footer .container { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.site-footer a { color: var(--ink-soft); }
.site-footer .disclaimer { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1rem; font-size: .82rem; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .site-nav nav a { padding: .3rem .5rem; font-size: .85rem; }
  .hero { padding: 1.8rem 0 1.4rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-nav, .site-footer, .btn-row, .row-controls, .note { display: none !important; }
  body { color: #000; }
  .calc, .result, .card { box-shadow: none; border-color: #999; background: #fff; }
}

/* ---------- Decorative illustrations (companion art) ---------- */
.hero .hero-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero .hero-copy { flex: 1 1 340px; }
.hero .hero-art { flex: 0 1 440px; max-width: 460px; width: 100%; height: auto; }
.hero .hero-art.square { flex: 0 1 280px; max-width: 280px; }
.book-card .book-art {
  display: block; width: 100%; height: 132px; object-fit: contain;
  margin: -.15rem 0 .55rem;
}
.section-art { display:block; max-width: 260px; width: 100%; height: auto; margin: 0 auto .4rem; }
@media (max-width: 700px){ .hero .hero-art { max-width: 320px; margin: .4rem auto 0; } .hero .hero-art.square { max-width: 220px; } }
/* Statistics Didn't Have to Be This Hard: "Measured Terrain", dusk teal and apricot from the hills cover */
.theme-stats { --accent:#f4b860; --accent-dark:#926e39; --accent-tint:rgba(244,184,96,.12); --accent-rgb:244,184,96; }

.theme-side-hustle { --accent:#e0894a; --accent-dark:#86512c; --accent-tint:rgba(224,137,74,.12); --accent-rgb:224,137,74; }


/* ============================================================
   WORKOUT SKIN — matches the Math Workout covers:
   navy ground + faint grid, one glowing accent per book,
   DM Serif Display / Barlow Condensed / DM Sans, boxed tiles,
   tracked caps, thin rules with a dot, gold top and bottom bars.
   ============================================================ */
html { background: var(--bg); }
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.045) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.65;
}
body::before { /* gold bar, as on the covers */
  content: ""; display: block; height: 6px;
  background: linear-gradient(90deg, #7a3f06, #c97b18, #e8a030, #c97b18, #7a3f06);
}
::selection { background: var(--accent); color: #0a0b10; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.8rem 0 1rem; }
h2::after, .hero h1::after { /* thin rule with a dot */
  content: ""; display: block; height: 5px; margin-top: .65rem; width: min(100%, 22rem);
  background:
    radial-gradient(circle at 5px 50%, var(--accent) 2.5px, transparent 3px) left center / 12px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 12px 50% / calc(100% - 12px) 1px no-repeat;
  opacity: .85;
}
h3 { font-size: 1.28rem; }
a { color: var(--accent); }
a:hover { color: #fff; }
strong { color: #fff; }
em { color: var(--ink); }
.muted { color: var(--ink-soft); }
code, kbd { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(255,255,255,.07); padding: .05em .35em; border-radius: 2px; }

/* Nav */
.site-nav { background: rgba(10,11,16,.9); border-bottom: 1px solid rgba(var(--accent-rgb),.35); backdrop-filter: blur(8px); }
.brand { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.brand span { color: var(--accent); font-family: var(--cond); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 1.05rem; }
.site-nav nav a {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); border-radius: 0; padding: .45rem .75rem; border-bottom: 2px solid transparent;
}
.site-nav nav a:hover, .site-nav nav a[aria-current="page"] { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 78% 50%, rgba(var(--accent-rgb),.16), transparent 70%),
    linear-gradient(180deg, #101520, #0b0e16);
  border-bottom: 1px solid rgba(var(--accent-rgb),.4);
  padding: 3.4rem 0 3rem;
}
.hero .eyebrow, .kicker, .card .meta {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.hero p.lead, .hero .hero-copy .lead { color: var(--ink-soft); font-size: 1.1rem; }
.hero .hero-copy .lead em, .hero .lead em { color: var(--accent); font-family: var(--serif); font-style: italic; }
.bookbadge {
  background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; padding: .3rem .65rem; margin-bottom: 1rem;
}
.hero .hero-art.square { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.5), 0 0 48px rgba(var(--accent-rgb),.28); }
/* cartoon companion art is retired; the covers carry the visual identity */
.hero img.hero-art[src*="hero"], .section-art, img[src*="accent-"] { display: none; }

/* Buttons */
.btn {
  background: var(--accent); color: #0a0b10; border: 1px solid var(--accent); border-radius: 2px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .8rem 1.25rem;
}
.btn:hover { color: #0a0b10; filter: brightness(1.12); box-shadow: 0 0 22px rgba(var(--accent-rgb),.45); }
.btn.secondary { background: transparent; color: var(--accent); border-color: rgba(var(--accent-rgb),.7); }
.btn.secondary:hover { background: var(--accent-tint); color: #fff; box-shadow: none; }
.btn.amazon, .buy-amazon { background: #e8973a; color: #0a0b10; border: 1px solid #e8973a; border-radius: 2px; }
.btn.amazon:hover, .buy-amazon:hover { color: #0a0b10; filter: brightness(1.12); box-shadow: 0 0 22px rgba(232,151,58,.45); }
.buy-amazon { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .45rem .8rem; }
.buy-amazon::before { font-family: var(--serif); }

/* Cards = boxed tiles */
.card {
  background: linear-gradient(180deg, rgba(16,21,32,.92), rgba(12,16,25,.92));
  border: 1px solid rgba(var(--accent-rgb),.38); border-radius: 2px; box-shadow: none; padding: 1.3rem 1.35rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 8px 34px rgba(var(--accent-rgb),.14); }
.card h3 { font-size: 1.35rem; }
.card p { color: var(--ink-soft); }
.book-card { border-left: 1px solid rgba(var(--accent-rgb),.38); border-top: 3px solid var(--accent); }
.book-card a.title, .book-card a.title:hover { color: var(--ink); }
.book-card a.title:hover { color: var(--accent); }
.book-card .book-art { height: 168px; filter: drop-shadow(0 6px 22px rgba(var(--accent-rgb),.3)); }
.chapter-link { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.chapter-link:hover { color: #fff; }
a.tile .card:hover { transform: translateY(-2px); }
.pill { background: transparent; color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.5); border-radius: 2px; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; }
.note { background: transparent; border: 1px dashed rgba(var(--accent-rgb),.5); border-radius: 2px; color: var(--ink-soft); }
.note strong { color: var(--accent); }
.divider { border-top: 1px dashed rgba(var(--accent-rgb),.4); }

/* Chapter list: numbered ledger like the back cover */
.chapters li { border-bottom: 0; border-left: 3px solid var(--accent); padding: .6rem .9rem; margin-bottom: 2px; }
.chapters li:nth-child(odd) { background: rgba(255,255,255,.035); }
.chapters li .n { background: transparent; color: var(--accent); font-family: var(--cond); font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; padding: 0; }
.chapters li .n.bonus { background: transparent; color: var(--ink-soft); }
.chapters li .t { font-weight: 500; }

/* Calculators */
.calc { background: rgba(16,21,32,.9); border: 1px solid rgba(var(--accent-rgb),.38); border-radius: 2px; }
.calc label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.calc label .hint { text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.calc input[type="number"], .calc input[type="text"], .calc input[type="email"], .calc select, .calc textarea,
input[style], textarea[style], select {
  background: #0a0b10 !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; border-radius: 2px !important;
  color-scheme: dark;
}
.calc input:focus, .calc select:focus, .calc textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent) !important; }
.calc-subhead { color: var(--accent); border-top-color: rgba(var(--accent-rgb),.35); letter-spacing: .2em; }
.result { background: rgba(10,11,16,.85); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 2px; }
.result .big { font-family: var(--cond); font-weight: 800; font-size: 2.6rem; color: var(--accent); letter-spacing: .02em; line-height: 1.1; }
.result.empty { border-left-color: var(--line-strong); }
.stat .v { font-family: var(--cond); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
table.data th { background: rgba(var(--accent-rgb),.14); color: var(--accent); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
table.data th, table.data td { border-bottom-color: var(--line); }
.table-scroll { border-color: var(--line-strong); border-radius: 2px; }
table td, table th { border-color: var(--line); }

/* Footer */
.site-footer { background: #07080c; border-top: 1px solid rgba(var(--accent-rgb),.4); color: var(--ink-soft); position: relative; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.site-footer::after {
  content: ""; display: block; height: 6px; margin-top: 2rem;
  background: linear-gradient(90deg, #7a3f06, #c97b18, #e8a030, #c97b18, #7a3f06);
}
.site-footer .disclaimer { border-top-color: var(--line); }

@media print {
  body { background: #fff; color: #000; } body::before, .site-footer::after { display: none; }
  .calc, .result, .card { background: #fff; border-color: #999; }
  h1, h2, h3, strong, .result .big, .stat .v { color: #000; }
}

/* Cover-style stat tiles (home hero) */
.stat-tiles { flex: 0 1 380px; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; width: 100%; }
.stat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 118px; padding: 1rem .6rem; text-decoration: none;
  background: rgba(16,21,32,.85); border: 1px solid rgba(var(--accent-rgb),.5); border-radius: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.stat-tile b { font-family: var(--cond); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--accent); text-shadow: 0 0 22px rgba(var(--accent-rgb),.5); }
.stat-tile span { margin-top: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.stat-tile:hover, .stat-tile.hot { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.35); }


/* ============================================================
   SITE PALETTE — amber (series) + ice cyan (site chrome/links).
   Books keep their own glow; the chrome is always amber/cyan.
   ============================================================ */
a { color: var(--accent2); }
a:hover { color: #fff; }
.chapter-link { color: var(--accent); }
.site-nav { border-bottom-color: rgba(var(--accent2-rgb),.35); }
.site-nav nav a:hover, .site-nav nav a[aria-current="page"] { color: var(--accent2); border-bottom-color: var(--accent2); }
.brand { letter-spacing: .01em; }
.brand span { color: #e8973a; }
.hero { border-bottom-color: rgba(var(--accent2-rgb),.35); }
.hero .eyebrow { color: var(--accent2); }
h2::after, .hero h1::after {
  background:
    radial-gradient(circle at 5px 50%, var(--accent) 2.5px, transparent 3px) left center / 12px 5px no-repeat,
    linear-gradient(90deg, var(--accent), var(--accent2)) 12px 50% / calc(100% - 12px) 1px no-repeat;
}
.btn.secondary { color: var(--accent2); border-color: rgba(var(--accent2-rgb),.7); }
.btn.secondary:hover { background: rgba(var(--accent2-rgb),.12); }
.note { border-color: rgba(var(--accent2-rgb),.5); }
.note strong { color: var(--accent2); }
.site-footer { border-top-color: rgba(var(--accent2-rgb),.4); }
.site-footer a:hover { color: var(--accent2); }
.kicker, .card .meta { color: var(--accent); }
.calc-subhead { color: var(--accent2); border-top-color: rgba(var(--accent2-rgb),.3); }
.calc label { color: var(--ink); }

/* Data font: the workout log */
.calc input[type="number"], .calc input[type="text"], .calc select,
table.data td, .stat .k, .result .label, .crumb { font-family: var(--mono); font-size: .88em; }
.calc input[type="number"], .calc input[type="text"] { font-size: 1rem; font-variant-numeric: tabular-nums; }
.card .meta, .kicker, .eyebrow, .bookbadge, .pill { font-family: var(--mono); font-weight: 500; letter-spacing: .16em; }

/* Home hero art + stat strip */
.hero img.hero-art[src*="hero-workout"] { display: block; border: 1px solid rgba(var(--accent-rgb),.45); box-shadow: 0 0 60px rgba(var(--accent-rgb),.18), 0 0 0 1px rgba(var(--accent2-rgb),.18); }
.stat-strip { margin-top: 1.5rem; }
.stat-strip .stat-tiles { flex: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-tile:nth-child(even) { border-color: rgba(var(--accent2-rgb),.5); }
.stat-tile:nth-child(even) b { color: var(--accent2); text-shadow: 0 0 22px rgba(var(--accent2-rgb),.5); }

.theme-math-didnt { --accent:#e8a35a; --accent-dark:#8a5a2a; --accent-tint:rgba(232,163,90,.12); --accent-rgb:232,163,90; }
.theme-logic { --accent:#d4a53c; --accent-dark:#7f6220; --accent-tint:rgba(212,165,60,.12); --accent-rgb:212,165,60; }
h2 em { color: var(--accent2); font-style: italic; }
/* Chance Didn't Have to Be This Hard: the forks cover's coral path on navy, with its cobalt.
   Cobalt #3b56b8 is too dark for text on the dark skin, so links and subheads use it lightened to #8197e6. */
.theme-chance { --accent:#e2704f; --accent-dark:#8a4430; --accent-tint:rgba(226,112,79,.12); --accent-rgb:226,112,79; --accent2:#8197e6; --accent2-rgb:129,151,230; }
/* Fractions, Decimals and Percentages Didn't Have to Be This Hard: the covers' saffron piece on navy, with their blue.
   Blue #2364aa is too dark for text on the dark skin, so links and subheads use it lightened to #7fa3d6. */
.theme-fractions { --accent:#e8952e; --accent-dark:#8b5a1c; --accent-tint:rgba(232,149,46,.12); --accent-rgb:232,149,46; --accent2:#7fa3d6; --accent2-rgb:127,163,214; }
/* Your Kid's Math Homework Didn't Have to Be This Hard: the squared-paper cover's pencil yellow on navy, with its grid blue.
   Drawings sit on a cream "paper" panel so they read on the dark skin and print cleanly. */
.theme-homework { --accent:#f2a93b; --accent-dark:#8f6420; --accent-tint:rgba(242,169,59,.12); --accent-rgb:242,169,59; --accent2:#a9c0e2; --accent2-rgb:169,192,226; }
.hw-figwrap { margin: .8rem 0; max-width: 100%; overflow: hidden; }
.hw-figwrap svg.hw-fig { display: block; width: 100%; max-width: 640px; height: auto; }
.hw-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.hw-row .hw-figwrap { flex: 0 1 180px; }
.hw-steps { margin: .4rem 0 .6rem 1.2rem; padding: 0; line-height: 1.55; }
.hw-steps li { margin: .15rem 0; }
.hw-card { border-top: 1px solid var(--line); padding: .7rem 0; }
.hw-quiz { font-family: var(--cond); font-size: 2.6rem; font-weight: 800; color: var(--accent); margin: .4rem 0 .8rem; min-height: 3rem; }
.sheet-preview { background: #fff; padding: .6rem; border-radius: 4px; }
.sheet-preview svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
@media print {
  html { background: #fff !important; }
  .printables .hero, .printables .crumb, .printables .calc > *:not(#out), .printables main > *:not(.calc) { display: none !important; }
  .printables .calc, .printables #out { border: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff !important; }
  .printables .sheet-preview { padding: 0; }
  .printables .sheet-preview svg { width: 180mm; height: 250mm; max-width: none; }
  @page { margin: 12mm; }
}
/* Estimation Didn't Have to Be This Hard: the envelope cover's pencil-orange answer on deep teal.
   Teal #1d6a72 is too dark for text on the dark skin, so links and subheads use it lightened to #6fb3b9. */
.theme-estimation { --accent:#e07a2f; --accent-dark:#8a4a1c; --accent-tint:rgba(224,122,47,.12); --accent-rgb:224,122,47; --accent2:#6fb3b9; --accent2-rgb:111,179,185; }

/* Reading books: nine cards in an even 3x3 / 2-col / 1-col grid */
.grid.reading-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .grid.reading-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid.reading-grid { grid-template-columns: 1fr; } }

/* Walls That Stand (Built by Numbers, Book 1): "Coursed Light" — concrete grey and a string-line yellow. */
.theme-walls { --accent:#e3d44c; --accent-dark:#8a7f22; --accent-tint:rgba(227,212,76,.12); --accent-rgb:227,212,76; --accent2:#8fb4d9; --accent2-rgb:143,180,217; }
/* Printable sheets: a white page on screen, the page alone in print */
.walls-sheet .sheet-paper { background:#fff; color:#111; padding:1.4rem 1.5rem; border-radius:2px; font-family: var(--sans); }
.walls-sheet .sheet-paper h2 { color:#111; font-size:1.5rem; margin:.1rem 0 .1rem; }
.walls-sheet .sheet-paper h3 { color:#111; font-size:1.05rem; margin:1.1rem 0 .4rem; }
.walls-sheet .sheet-paper p { color:#222; }
.walls-sheet .sheet-sub { color:#555 !important; font-size:.82rem; margin:0 0 .9rem; }
.walls-sheet .sheet-help { color:#444 !important; font-size:.85rem; font-style:italic; }
.walls-sheet .sheet-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.walls-sheet .sheet-table { width:100%; border-collapse:collapse; font-size:.86rem; color:#111; }
.walls-sheet .sheet-table th, .walls-sheet .sheet-table td { border:1px solid #888; padding:.42rem .45rem; text-align:left; height:2.1rem; color:#111; }
.walls-sheet .sheet-table th { background:#eee; font-weight:700; }
.walls-sheet .sheet-fill { display:inline-block; margin-right:1.2rem; color:#111; }
.walls-sheet .sheet-blank { display:inline-block; min-width:7rem; border-bottom:1px solid #555; height:1rem; vertical-align:bottom; }
.walls-sheet .sheet-blank.wide { min-width:12rem; }
@media (max-width: 560px){ .walls-sheet .sheet-paper { padding:1rem .7rem; } .walls-sheet .sheet-table { font-size:.74rem; min-width:480px; } }
@media print {
  .walls-sheet .site-nav, .walls-sheet .site-footer, .walls-sheet .hero, .walls-sheet .crumb, .walls-sheet .btn-row, .walls-sheet main > p { display:none !important; }
  .walls-sheet .sheet-paper { padding:0; }
  html, body.walls-sheet { background:#fff !important; }
}
/* end Walls That Stand */

/* Fences That Stand Straight (Built by Numbers, Book 2): warm cedar and a flagging-tape orange. */
.theme-fence { --accent:#ff7a2e; --accent-dark:#a8481a; --accent-tint:rgba(255,122,46,.12); --accent-rgb:255,122,46; --accent2:#d9a77c; --accent2-rgb:217,167,124; }
/* The formula box under every result, and wide result tables that scroll inside themselves on a phone */
.fence-how { margin-top:1rem; padding:.8rem 1rem; border-left:3px solid rgba(var(--accent2-rgb),.7); background:rgba(var(--accent2-rgb),.06); }
.fence-how .fence-how-h { margin:0 0 .3rem; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); }
.fence-how ul { margin:0; padding-left:1.1rem; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.fence-how li { margin:.15rem 0; }
.fence-how strong { color:var(--ink); }
.fence-calc .fence-book { margin-top:.9rem; }
.fence-tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.6rem 0 .4rem; }
.fence-tbl table.data { margin-top:0; min-width:100%; }
.fence-tbl table.data th { white-space:normal; vertical-align:bottom; }
.fence-tbl table.data td { vertical-align:top; }
.fence-tbl .ftin { font-size:.82em; color:var(--ink-soft); white-space:nowrap; }
.fence-preset { grid-column:1 / -1; max-width:26rem; }
.fence-calc .result .calc-subhead { margin:1rem 0 .3rem; }
@media (max-width: 560px){ .fence-tbl table.data { font-size:.78rem; } .fence-tbl table.data th, .fence-tbl table.data td { padding:.35rem .4rem; } .fence-how { padding:.7rem .75rem; } }
/* Printable sheets: a white page on screen, the page alone in print */
.fence-sheet .sheet-paper { background:#fff; color:#111; padding:1.4rem 1.5rem; border-radius:2px; font-family: var(--sans); }
.fence-sheet .sheet-paper h2 { color:#111; font-size:1.5rem; margin:.1rem 0 .1rem; }
.fence-sheet .sheet-paper h3 { color:#111; font-size:1.05rem; margin:1.1rem 0 .4rem; }
.fence-sheet .sheet-paper p { color:#222; }
.fence-sheet .sheet-sub { color:#555 !important; font-size:.82rem; margin:0 0 .9rem; }
.fence-sheet .sheet-help { color:#444 !important; font-size:.85rem; font-style:italic; }
.fence-sheet .sheet-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fence-sheet .sheet-table { width:100%; border-collapse:collapse; font-size:.86rem; color:#111; }
.fence-sheet .sheet-table th, .fence-sheet .sheet-table td { border:1px solid #888; padding:.42rem .45rem; text-align:left; height:2.1rem; color:#111; }
.fence-sheet .sheet-table th { background:#eee; font-weight:700; }
.fence-sheet .sheet-fill { display:inline-block; margin-right:1.2rem; color:#111; }
.fence-sheet .sheet-blank { display:inline-block; min-width:7rem; border-bottom:1px solid #555; height:1rem; vertical-align:bottom; }
.fence-sheet .sheet-blank.wide { min-width:12rem; }
@media (max-width: 560px){ .fence-sheet .sheet-paper { padding:1rem .7rem; } .fence-sheet .sheet-table { font-size:.74rem; min-width:480px; } }
@media print {
  .fence-sheet .site-nav, .fence-sheet .site-footer, .fence-sheet .hero, .fence-sheet .crumb, .fence-sheet .btn-row, .fence-sheet main > p { display:none !important; }
  .fence-sheet .sheet-paper { padding:0; }
  html, body.fence-sheet { background:#fff !important; }
}
/* end Fences That Stand Straight */

.site-footer .copyright { grid-column: 1 / -1; margin: 0; font-size: .82rem; }