/* Home Cost Guide — public identity.
   Deliberately NOT the TrafficFlow dark system: that is the internal product
   identity. These are consumer titles that must read as independent
   publications, and the five sites must look visibly different from each other
   (a network of identical templates is the fingerprint to avoid).
   Per-site look lives entirely in the .theme-* block.
   No webfonts — LCP on paid traffic is money. */

.theme-ink {
  --paper:   #faf8f5;   /* warm off-white, not clinical */
  --surface: #ffffff;
  --ink:     #15181c;
  --muted:   #6b6559;
  --rule:    #e6e1d8;
  --accent:  #c2703a;   /* terracotta: brick, tools, warmth — not corporate blue */
  --accent-d:#9c5428;
  --serif:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.1875rem; line-height: 1.68;
}
.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap.wide { max-width: 68rem; }

/* The other four titles. Each gets its own paper, ink, accent and type
   voice so the network never reads as one template. */
.theme-road {
  --paper: #f4f5f6; --surface: #ffffff; --ink: #1b1f24; --muted: #5d6670;
  --rule: #dfe2e6; --accent: #e0a526; --accent-d: #9a6c0b;
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.theme-road .masthead { background: #1b1f24; border-bottom: 4px solid var(--accent); }
.theme-road .masthead .brand, .theme-road .wordmark .w-first, .theme-road .wordmark .w-last { color: #fff; }
.theme-road .mark { color: #2c333b; }
.theme-road .tagline { color: #aab3bd; }
.theme-road .article h1, .theme-road .lead h1 { letter-spacing: -.03em; font-weight: 800; }
.theme-moss {
  --paper: #f6f4ec; --surface: #fffdf6; --ink: #1f3a2b; --muted: #5f6b5d;
  --rule: #dcd8c8; --accent: #7fa35a; --accent-d: #4e6e30;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.theme-moss .masthead { border-bottom: 2px solid var(--accent); }
.theme-clay {
  --paper: #fdf7f2; --surface: #ffffff; --ink: #3b2a26; --muted: #7a6660;
  --rule: #efe1d8; --accent: #e07a5f; --accent-d: #b0503a;
  --serif: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
.theme-clay .masthead { border-bottom: 3px solid var(--accent); }
.theme-clay figure img, .theme-clay .railbox, .theme-clay .card img { border-radius: 14px; }
.theme-pantry {
  --paper: #fbf6ea; --surface: #fffdf7; --ink: #2a1f18; --muted: #72645a;
  --rule: #e9dfc9; --accent: #d9452e; --accent-d: #a52f1c;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.theme-pantry .masthead { border-bottom: 3px double var(--accent); }
.theme-pantry .article h1, .theme-pantry .lead h1 { font-style: italic; }

/* ---------- masthead / brand ---------- */
.masthead { background: var(--surface); border-bottom: 3px double var(--ink); }
.bar {
  max-width: 68rem; margin: 0 auto; padding: 1.1rem 1.25rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none;
}
.mark { width: 34px; height: 34px; flex: none; }
.wordmark {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em; line-height: 1;
}
.wordmark .w-first { font-weight: 700; margin-right: .22em; }
.wordmark .w-key { font-weight: 700; color: var(--accent); margin-right: .22em; }
.wordmark .amp { color: var(--accent); font-style: italic; margin-right: .22em; }
.wordmark .w-last { font-weight: 400; font-style: italic; }
.tagline {
  margin: 0; font-family: var(--sans); font-size: .6875rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); text-align: right;
}

.sections { border-top: 1px solid var(--rule); background: var(--surface); }
.sections .inner {
  max-width: 68rem; margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; gap: 1.6rem; flex-wrap: wrap;
}
.sections a {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); text-decoration: none; font-weight: 600;
}
.sections a:hover { color: var(--accent-d); }

/* ---------- two-column shell ---------- */
.shell {
  max-width: 68rem; margin: 0 auto; padding: 0 1.25rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.5rem;
  align-items: start;
}

/* ---------- article ---------- */
.article { padding: 2.5rem 0 1rem; min-width: 0; }
.article h1 {
  font-size: clamp(2rem, 4.6vw, 2.85rem); line-height: 1.11;
  letter-spacing: -.022em; margin: 0 0 .7rem;
}
.dek { font-size: 1.28rem; color: var(--muted); margin: 0 0 1.25rem; line-height: 1.5; }
.byline {
  font-family: var(--sans); font-size: .8125rem; color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: .7rem 0; margin: 0 0 1.75rem;
}
.byline strong { color: var(--ink); }
.body p { margin: 0 0 1.3rem; }
.body h2 {
  font-size: 1.58rem; line-height: 1.24; margin: 2.3rem 0 .8rem;
  letter-spacing: -.014em;
}
.body h2:first-child { margin-top: 0; }
.body h3 { font-size: 1.22rem; margin: 1.9rem 0 .6rem; }
.body a { color: var(--accent-d); text-underline-offset: .15em; }
.body ul, .body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.body li { margin-bottom: .55rem; }

/* ---------- figures ---------- */
figure { margin: 2.1rem 0; }
figure img {
  width: 100%; height: auto; display: block; border-radius: 2px; background: #ece9e3;
}
figcaption {
  font-family: var(--sans); font-size: .75rem; color: var(--muted);
  margin-top: .55rem; line-height: 1.45;
}
.chart { background: var(--surface); border: 1px solid var(--rule); padding: 1.1rem 1.2rem; }
.chart svg { width: 100%; height: auto; display: block; }

/* ---------- pager ---------- */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-size: .9rem; margin: 2.5rem 0;
  border-top: 1px solid var(--rule); padding-top: 1.25rem;
}
.pager .of { color: var(--muted); font-size: .8rem; }
.pager a { color: var(--accent-d); font-weight: 600; text-decoration: none; }
.pager .next { background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 3px; }

/* ---------- in-article link blocks ---------- */
.inseries {
  font-family: var(--sans); font-size: .8125rem; color: var(--muted); margin: -.6rem 0 1.5rem;
}
.inseries a { color: var(--accent-d); font-weight: 600; }
.cluster, .sources {
  border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.25rem;
}
.cluster h2, .sources h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.cluster ul { list-style: none; padding: 0; margin: 0; }
.cluster li, .sources li {
  font-family: var(--sans); font-size: .875rem; margin-bottom: .6rem;
  line-height: 1.5; color: var(--muted);
}
.sources ul { padding-left: 1.1rem; }
.cluster a, .sources a { color: var(--accent-d); font-weight: 600; }

/* ---------- sidebar ---------- */
.rail { padding: 2.9rem 0 1rem; position: sticky; top: 1.5rem; }
.railbox {
  background: var(--surface); border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; border-radius: 2px;
}
.railbox h2 {
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 .8rem; padding-bottom: .55rem; border-bottom: 1px solid var(--rule);
}
.railbox ul { list-style: none; padding: 0; margin: 0; }
.railbox li { margin-bottom: .75rem; line-height: 1.35; }
.railbox li:last-child { margin-bottom: 0; }
.railbox a {
  color: var(--ink); text-decoration: none; font-size: 1rem;
  font-weight: 600; letter-spacing: -.01em;
}
.railbox a:hover { color: var(--accent-d); }
.railbox .soon, .standards p {
  font-family: var(--sans); font-size: .8125rem; color: var(--muted);
  margin: 0 0 .6rem; line-height: 1.5;
}
.standards p:last-child { margin-bottom: 0; }
.standards a { color: var(--accent-d); font-size: .8125rem; font-weight: 600; }

.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.toc li {
  counter-increment: toc; position: relative; padding-left: 1.5rem;
  margin-bottom: .6rem; line-height: 1.35;
}
.toc li::before {
  content: counter(toc); position: absolute; left: 0; top: .15rem;
  font-family: var(--sans); font-size: .6875rem; font-weight: 700;
  color: var(--accent);
}
.toc a { font-size: .9375rem; font-weight: 500; }
.body h2 { scroll-margin-top: 1.5rem; }

/* ---------- home ---------- */
.lead { padding: 2.25rem 0 0; max-width: 46rem; }
.lead a { color: inherit; text-decoration: none; display: block; }
.lead img { width: 100%; height: auto; border-radius: 2px; margin-bottom: 1.1rem; }
.kicker {
  display: inline-block; font-family: var(--sans); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: var(--accent); padding: .22rem .5rem; border-radius: 2px;
  margin-bottom: .6rem;
}
.lead h1 {
  font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.024em; margin: 0 0 .6rem;
}
.lead .dek { font-size: 1.3rem; color: var(--muted); margin: 0; line-height: 1.45; }
.sectionhead {
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  border-top: 1px solid var(--rule); margin: 3rem 0 0; padding-top: .9rem;
}
.cards {
  list-style: none; padding: 0; margin: 1.5rem 0 3rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.25rem;
}
.card a { color: inherit; text-decoration: none; display: block; }
.card img { width: 100%; height: auto; border-radius: 2px; margin-bottom: .75rem; }
.card h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.015em; }
.card p { color: var(--muted); font-size: .93rem; margin: 0; line-height: 1.5; }

/* ---------- static pages ---------- */
.page h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
.page .note {
  font-family: var(--sans); font-size: .8rem; color: var(--muted);
  border-left: 3px solid var(--accent); padding-left: .9rem;
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--rule); background: var(--surface); margin-top: 3.5rem;
  padding: 2rem 0 2.5rem; font-family: var(--sans); font-size: .8125rem; color: var(--muted);
}
.foot .wrap { max-width: 68rem; }
.foot p { margin: 0 0 .75rem; line-height: 1.55; max-width: 46rem; }
.foot .legal { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1rem 0 .75rem; }
.foot .legal a { color: var(--accent-d); }
.foot .copy { font-size: .75rem; }

@media (max-width: 1040px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 44rem; }
  .rail { position: static; padding-top: .5rem; padding-bottom: 2rem; }
}
@media (max-width: 620px) {
  body { font-size: 1.125rem; }
  .bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .tagline { text-align: left; }
  .article { padding-top: 1.75rem; }
}