/* =========================================================
   Pinnacle Air Control: Articles (hub + article pages)
   Loaded after site-pages.css. Square corners, one accent per
   page, typography-led, no entrance animation, no hover effects
   on anything that is not a link or button.

   Accent by category, matching the service pages:
     .art--heating  brand red   (furnace topics, /heating/)
     .art--green    brand green (heat pumps, hub, general)
     .art--cooling  steel blue  (AC topics, /cooling/)
   ========================================================= */

.art-page {
  --measure: 44rem;
  --art-ink: var(--ink, #1a1a1a);
  --art-muted: var(--ink-muted, #5c5c5c);
  --art-line: var(--c-line, rgba(33, 37, 41, 0.1));
  --art-wash: #f5f6f7;
}
.art-page.art--heating {
  --accent: var(--heat-accent);
  --accent-dark: var(--heat-accent-dark);
  --marker: var(--heat-accent);
  --cta-fill: var(--heat-accent);
  --cta-fill-dark: var(--heat-accent-dark);
}
.art-page.art--green {
  --accent: #117A41;
  --accent-dark: #0C5E32;
  --marker: #117A41;
  --cta-fill: #117A41;
  --cta-fill-dark: #0C5E32;
}
.art-page.art--cooling {
  --accent: var(--cool-accent);
  --accent-dark: var(--cool-accent-dark);
  --marker: var(--cool-accent);
  --cta-fill: var(--cool-accent);
  --cta-fill-dark: var(--cool-accent-dark);
}

.art-wrap { width: min(var(--measure), 92vw); margin: 0 auto; }
.art-wide { width: min(1000px, 92vw); margin: 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Article header ---------- */
.art-head { padding: clamp(2rem, 5vw, 3.25rem) 0 0; }
.art-head .breadcrumb ol { color: var(--art-muted); }
.art-head .breadcrumb a { color: var(--art-muted); text-decoration: underline; text-underline-offset: 3px; }
.art-head .breadcrumb a:hover,
.art-head .breadcrumb a:focus-visible { color: var(--accent-dark); }
.art-head .breadcrumb [aria-current="page"] { color: var(--art-ink); }
.art-title {
  margin: 0.4rem 0 0.9rem;
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--art-ink);
}
.art-dek {
  margin: 0 0 1.5rem;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.6;
  color: var(--art-muted);
}
.art-byline {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 0;
  border-top: 1px solid var(--art-line);
  border-bottom: 1px solid var(--art-line);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--art-muted);
}
.art-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--art-wash);
}
.art-byline__name { display: block; color: var(--art-ink); font-weight: 800; font-size: 0.98rem; }
.art-byline__name a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.art-byline__name a:hover,
.art-byline__name a:focus-visible { color: var(--accent-dark); }
.art-byline__meta { display: block; }

/* ---------- Hero image ---------- */
.art-hero { margin: 1.75rem auto 0; }
.art-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-hero figcaption,
.art-figure figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--art-muted);
}

/* ---------- Body copy ---------- */
.art-body { padding: 2rem 0 clamp(3rem, 7vw, 5rem); }
.prose { color: var(--art-ink); font-size: 1.0625rem; line-height: 1.75; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  scroll-margin-top: 96px;
}
.prose h3 { margin-top: 2rem; font-size: 1.18rem; line-height: 1.3; scroll-margin-top: 96px; }
.prose h2 + *,
.prose h3 + * { margin-top: 0.7rem; }
.prose ul,
.prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.45rem; }
/* Links in long-form copy carry a quiet underline at rest so readers can
   find the sources. The rest of the site keeps its no-underline-at-rest rule
   (tokens.css N-6); these selectors are scoped to .art-page to win over it. */
.art-page .prose a:not([class]),
.art-page .prose a:not([class]):visited {
  color: var(--art-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 26, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art-page .prose a:not([class]):hover,
.art-page .prose a:not([class]):focus-visible {
  color: var(--accent-dark);
  text-decoration-color: currentColor;
}
.art-page .art-toc a:not([class]),
.art-page .art-list__title a:not([class]) { text-decoration: none; }
.art-page .art-toc a:not([class]) { font-weight: 500; }
.art-page .art-list__title a:not([class]) { font-weight: 800; }
.art-page .art-toc a:not([class]):hover,
.art-page .art-list__title a:not([class]):hover { text-decoration: underline; }
.art-page .art-sources a:not([class]),
.art-page .art-sources a:not([class]):visited { color: var(--art-muted); font-weight: 400; }
.art-page .art-cta a:not([class]),
.art-page .art-cta a:not([class]):visited { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.art-page .art-cta a:not([class]):hover { color: #fff; text-decoration-color: #fff; }
.art-page .hub-about a:not([class]) { color: var(--art-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(26, 26, 26, 0.35); text-underline-offset: 3px; }
.hub-group .art-tag { display: none; }
.prose strong { font-weight: 800; }
.prose sup { line-height: 0; font-size: 0.72em; }
.prose sup a { text-decoration: none; font-weight: 700; }

/* Direct answer: the summary a reader or an answer engine should lift. */
.art-answer {
  border-left: 4px solid var(--accent);
  background: var(--art-wash);
  padding: 1.1rem 1.25rem;
}
.art-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.art-answer p { margin: 0; }
.art-answer p + p { margin-top: 0.6rem; }

/* Table of contents */
.art-toc { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--art-line); }
.art-toc .art-kicker { color: var(--art-muted); }
.art-toc ol { margin: 0; padding-left: 1.2rem; columns: 2 17rem; column-gap: 2.5rem; font-size: 0.95rem; line-height: 1.5; }
.art-toc li { break-inside: avoid; margin: 0 0 0.35rem; }
.art-toc a { color: var(--art-ink); }
.art-toc a:hover,
.art-toc a:focus-visible { color: var(--accent-dark); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--art-ink); }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.data-table--wide { min-width: 36rem; }
.data-table caption {
  caption-side: bottom;
  padding-top: 0.6rem;
  text-align: left;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--art-muted);
}
.data-table th,
.data-table td {
  padding: 0.65rem 0.75rem 0.65rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--art-line);
}
.data-table thead th {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-muted);
}
.data-table tbody th { font-weight: 700; }
.data-table .num { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 0.75rem; }

/* ---------- Charts and stats ---------- */
.art-figure { margin-top: 2rem; }
.chart { border-top: 2px solid var(--art-ink); padding-top: 0.9rem; }
.chart__title { margin: 0 0 0.6rem; font-weight: 800; font-size: 1rem; line-height: 1.35; }
.chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.chart svg text { fill: var(--art-ink); font-size: 13px; }
.chart svg .t-muted { fill: var(--art-muted); font-size: 12px; }
.chart svg .t-strong { font-weight: 800; }
.chart svg .grid line { stroke: rgba(33, 37, 41, 0.12); stroke-width: 1; }
.chart svg .axis { stroke: var(--art-ink); stroke-width: 1; }
.chart svg .bar { fill: var(--accent); }
.chart svg .bar--muted { fill: #adb5bd; }
.chart svg .mark { fill: var(--art-ink); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.1rem 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--art-ink);
}
.stat__num {
  display: block;
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent-dark);
}
.stat__label { display: block; margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.4; color: var(--art-muted); }
.art-fine { font-size: 0.84rem; line-height: 1.5; color: var(--art-muted); }

/* ---------- Lists and callouts ---------- */
.prose .checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.6rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--accent);
}
.art-note {
  padding: 1rem 1.2rem;
  border: 1px solid var(--art-line);
  border-left: 4px solid var(--art-ink);
  background: #fff;
}
.art-note > * { margin: 0; }
.art-note > * + * { margin-top: 0.5rem; }
.art-note--safety { border-left-color: var(--pinnacle-red-dark, #c21f2e); background: var(--pinnacle-red-tint-soft, #fbe9eb); }
.art-note__title { font-weight: 800; }

/* ---------- Estimate tool embed ---------- */
.art-estimator { margin-top: 1.5rem; }
.art-estimator .estimate-tool-card { box-shadow: none; }
.art-estimator h3 { margin-top: 0; }
@media (max-width: 640px) {
  .art-estimator .estimate-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.art-faq .faq-item summary { font-size: 1rem; line-height: 1.45; }
.art-faq .faq-item p { margin: 0; padding: 0 1.4rem 1.2rem; line-height: 1.7; }

/* ---------- CTA ---------- */
.art-cta { background: var(--art-ink); color: #fff; padding: clamp(1.5rem, 4vw, 2.25rem); }
.prose .art-cta h2 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.art-cta p { margin: 0.6rem 0 0; color: #ced4da; }
.art-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.art-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.3rem;
  border: 2px solid transparent;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
.prose .art-btn { text-decoration: none; }
.prose .art-btn--primary,
.art-btn--primary { background: var(--cta-fill, var(--accent)); color: #fff; }
.prose .art-btn--primary:hover,
.art-btn--primary:hover,
.art-btn--primary:focus-visible { background: var(--cta-fill-dark, var(--accent-dark)); color: #fff; }
.prose .art-btn--ghost,
.art-btn--ghost { border-color: #fff; color: #fff; }
.prose .art-btn--ghost:hover,
.art-btn--ghost:hover,
.art-btn--ghost:focus-visible { background: #fff; color: var(--art-ink); }

/* ---------- Sources ---------- */
.art-sources {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--art-muted);
  border-top: 1px solid var(--art-line);
  border-bottom: 1px solid var(--art-line);
}
.art-sources > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.art-sources > summary::-webkit-details-marker { display: none; }
.art-sources > summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
}
.art-sources[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.art-sources__title { color: var(--art-ink); font-weight: 800; font-size: 1.1rem; }
.art-sources__count { font-size: 0.85rem; }
.art-sources[open] .art-sources__count { visibility: hidden; }
.art-sources ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.art-sources li + li { margin-top: 0.4rem; }

.art-sources li { overflow-wrap: anywhere; }
.art-sources li:target { color: var(--art-ink); background: var(--art-wash); }

/* ---------- Author box ---------- */
.art-author {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-top: 1.25rem;
  border-top: 2px solid var(--art-ink);
}
.art-author .art-avatar { width: 120px; height: 120px; }
.art-author__name { margin: 0; font-weight: 800; font-size: 1.05rem; }
.art-author__role { margin: 0.1rem 0 0.5rem; font-size: 0.88rem; color: var(--art-muted); }
.art-author__bio { margin: 0; font-size: 0.97rem; line-height: 1.65; }

/* ---------- Lists of articles (hub + related) ---------- */
.art-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--art-ink); }
.prose .art-list { padding-left: 0; }
.art-list > li { margin: 0; padding: 1.75rem 0; border-bottom: 1px solid var(--art-line); }
.prose .art-list > li + li { margin-top: 0; }
.art-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.art-row__thumb { display: block; background: var(--art-wash); }
.art-row__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.art-row__text > :first-child { margin-top: 0; }
.art-list__title { margin: 0.35rem 0 0; font-size: 1.35rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.hub-group .art-list__title { margin-top: 0; }
.prose .art-list__title { margin-top: 0.3rem; font-size: 1.18rem; }
.prose .art-row { grid-template-columns: 160px minmax(0, 1fr); gap: 1.1rem; }
.art-list__title a { color: var(--art-ink); text-decoration: none; }
.prose .art-list__title a { color: var(--art-ink); text-decoration: none; }
.art-list__title a:hover,
.art-list__title a:focus-visible { color: var(--accent-dark); text-decoration: underline; }
.art-list__sum { margin: 0.35rem 0 0; color: var(--art-muted); line-height: 1.6; }
.art-list__meta { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--art-muted); }
.art-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.art-tag--heating { color: var(--heat-accent-dark, #c21f2e); }
.art-tag--green { color: #0C5E32; }
.art-tag--cooling { color: var(--cool-accent-dark, #154e7c); }

.hub-group + .hub-group { margin-top: 4rem; }
.hub-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin-bottom: 0.9rem; }
.hub-group__head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -0.015em; }
.hub-group__head p { margin: 0; color: var(--art-muted); font-size: 0.95rem; }

/* Hub pagination: 10 articles per page (see claude/articles-src/build.py). */
.art-pager { margin-top: 2.5rem; }
.art-pager ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.art-pager a,
.art-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--art-line);
  font-weight: 700;
  color: var(--art-ink);
  text-decoration: none;
}
.art-pager a:hover,
.art-pager a:focus-visible { border-color: var(--accent); color: var(--accent-dark); }
.art-pager [aria-current="page"] { background: var(--art-ink); border-color: var(--art-ink); color: #fff; }
.hub-about { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--art-line); color: var(--art-muted); font-size: 0.95rem; line-height: 1.7; max-width: 62ch; }
.hub-about p { margin: 0; }
.hub-about p + p { margin-top: 0.7rem; }


@media (max-width: 700px) {
  .art-row,
  .prose .art-row { grid-template-columns: 1fr; gap: 0.9rem; }
  .art-row__thumb img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .prose { font-size: 1rem; }
  .art-author { grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; }
  .art-author .art-avatar { width: 88px; height: 88px; }
}

/* ---------- Block spacing inside the article column ---------- */
.prose > .art-block { margin-top: 3rem; }
.prose .art-block > h2:first-child { margin-top: 0; }
.art-faq h2 + .faq-item { margin-top: 1rem; }
.prose > .art-toc { margin-top: 1.5rem; }
.prose > .art-toc + * { margin-top: 1.75rem; }

.data-table tbody th { min-width: 8.5rem; }
.prose a[href^="tel"] { white-space: nowrap; }
/* Charts keep a readable text size on phones: below 600px the SVG holds a
   minimum width and the figure scrolls sideways, the same way tables do. */
.chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .chart svg { min-width: 540px; }
}