/* Cielo v2 blog article (pairs with v2.css + v2-article.js). Generated pages: _v2src/blog_articles.py.
   Articles keep their light reading surface; this sheet brings them into the v2 system:
   - the v2 header is solid from the first frame (its light text would vanish on a light hero)
   - Instrument Sans body copy at a regular weight, Cormorant headings at 400 (the weights v2 loads)
   - a ~70 character reading column; panels and stat strips may run wider on large screens
   - no UI text under 12px; captions, FAQ and panel copy at 15 to 18px
   - the closing CTA and "Keep reading" sit on the v2 dark surface, so the page flows into the footer
   Every rule is prefixed with .v2-art so it wins over the article's own inline <style>. */

.v2-art {
  --a-bg: #fcfbf8;
  --a-bg-2: #f5f1ea;
  --a-text: #1c1a17;
  --a-soft: #3d3832;
  --a-faint: #6b6359;
  --a-line: rgba(28,26,23,0.12);
  --a-gold: #c8a27a;
  --a-gold-ink: #8a6a3f;
  --a-measure: 720px;
  background: var(--bg);
  color: #efe9df;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  overflow-x: hidden;
}
/* the article's inline :root reuses --ink for a near-black; v2 surfaces need v2's light --ink back */
.v2-art .v2h, .v2-art .v2-pop, .v2-art .v2f, .v2-art .final-cta { --ink: #efe9df; }
.v2-art .v2a { background: var(--a-bg); color: var(--a-text); }
.v2-art .v2a h1, .v2-art .v2a h2, .v2-art .v2a h3, .v2-art .v2a h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
.v2-art .v2a a { color: inherit; }
.v2-art [id] { scroll-margin-top: calc(var(--hh) + 64px); }

/* header: solid from the start */
.v2-art .v2h::before { opacity: 1; }
.v2-art .v2h { border-bottom-color: rgba(239,233,223,0.08); }
.v2-art #progress { top: var(--hh); z-index: 49; height: 2px; background: var(--a-gold); }

/* hero */
.v2-art .art-hero { background: var(--a-bg); padding: calc(var(--hh) + clamp(40px,6vw,72px)) var(--r) 0; }
.v2-art .art-hero-inner { max-width: var(--a-measure); }
.v2-art .crumb { font-size: 12px; letter-spacing: 0.14em; color: var(--a-faint); margin-bottom: 22px; }
.v2-art .crumb a:hover { color: var(--a-gold-ink); }
.v2-art .eyebrow { font-size: 12px; letter-spacing: 0.18em; font-weight: 500; color: var(--a-gold-ink); }
.v2-art .art-hero h1 { font-size: clamp(34px,4.2vw,52px); line-height: 1.1; letter-spacing: -0.01em; color: var(--a-text); max-width: 22ch; margin-bottom: 20px; }
.v2-art .art-hero .dek { font-family: 'Instrument Sans', system-ui, sans-serif; font-weight: 400; font-size: 19px; line-height: 1.6; color: var(--a-soft); }
.v2-art .hero-meta { border-top-color: var(--a-line); gap: 14px; }
.v2-art .hero-meta span { font-size: 14px; letter-spacing: 0; color: var(--a-faint); }
.v2-art .hero-meta a.byline { color: var(--a-gold-ink); border-bottom: 1px solid rgba(138,106,63,0.4); }
.v2-art .hero-meta a.byline:hover { border-bottom-color: var(--a-gold-ink); }
.v2-art .hero-meta .dot { background: var(--a-faint); opacity: 0.5; }
.v2-art .hero-img-wrap { max-width: 1040px; margin-top: 40px; }
.v2-art .hero-img { border-top: 0; background: #211e1b; }
.v2-art .hero-img img, .v2-art .cielo-panel-img img { filter: none; }
.v2-art picture { display: contents; }

/* jump nav: sticks under the header */
.v2-art .jump-nav { top: var(--hh); background: rgba(252,251,248,0.96); border-bottom-color: var(--a-line); }
.v2-art .jump-nav-inner { max-width: var(--a-measure); }
.v2-art .jump-nav a { font-size: 14px; letter-spacing: 0.01em; color: var(--a-faint); padding: 16px 14px; }
.v2-art .jump-nav a:hover { color: var(--a-text); }
.v2-art .jump-nav a.active { color: var(--a-gold-ink); border-bottom-color: var(--a-gold); }

/* body copy */
.v2-art .art-body { max-width: calc(var(--a-measure) + 2 * var(--r)); padding-top: 64px; padding-bottom: 24px; }
.v2-art .art-body > section { margin-bottom: 64px; }
.v2-art .art-body p, .v2-art .art-body li { font-size: 18px; line-height: 1.75; font-weight: 400; color: var(--a-soft); }
.v2-art .art-body p { margin-bottom: 24px; }
.v2-art .art-body h2 { font-size: clamp(28px,3vw,38px); line-height: 1.15; color: var(--a-text); margin-bottom: 22px; }
.v2-art .art-body h3 { color: var(--a-text); }
.v2-art .art-body h2 em, .v2-art .cielo-panel-text h3 em, .v2-art .final-cta h2 em { color: var(--a-gold-ink); }
.v2-art .art-body strong { font-weight: 600; color: var(--a-text); }
.v2-art .art-body a.cite { color: var(--a-gold-ink); border-bottom: 1px solid rgba(138,106,63,0.4); transition: border-color 200ms ease; }
.v2-art .art-body a.cite:hover { border-bottom-color: var(--a-gold-ink); }

/* callouts, stats, quotes */
.v2-art .callout-quick { background: var(--a-bg-2); border-left-color: var(--a-gold); }
.v2-art .callout-quick .cq-label, .v2-art .callout-muted .cm-label, .v2-art .cielo-panel-text .eyebrow { font-size: 12px; letter-spacing: 0.16em; }
.v2-art .callout-quick .cq-label { color: var(--a-gold-ink); }
.v2-art .callout-quick p { font-size: 23px; line-height: 1.5; color: var(--a-text); }
.v2-art .callout-muted { background: var(--a-bg); border-color: var(--a-line); }
.v2-art .callout-muted .cm-label { color: var(--a-faint); }
.v2-art .stat-strip { background: var(--a-line); border-color: var(--a-line); }
.v2-art .stat-cell { background: #fff; padding: 28px 22px; }
.v2-art .stat-num { font-size: clamp(26px,2.8vw,34px); font-weight: 500; color: var(--a-gold-ink); }
.v2-art .stat-label, .v2-art .stat-cite { font-size: 15px; color: var(--a-soft); }
.v2-art .pull { font-size: clamp(24px,2.6vw,30px); color: var(--a-text); border-left-color: var(--a-gold); }

/* why Cielo panel */
.v2-art .cielo-panel { background: var(--a-bg-2); border-top: 2px solid var(--a-gold); }
.v2-art .cielo-panel-text h3 { font-size: clamp(26px,2.8vw,34px); }
.v2-art .cielo-panel-text p { font-size: 17px; line-height: 1.7; font-weight: 400; color: var(--a-soft); }
.v2-art .btn-line { font-size: 13px; letter-spacing: 0.12em; font-weight: 500; color: var(--a-text); border-color: rgba(28,26,23,0.3); }
.v2-art .btn-line:hover { background: var(--a-text); border-color: var(--a-text); color: var(--a-bg); }
@media (min-width: 1160px) {
  .v2-art .art-body .cielo-panel, .v2-art .art-body .stat-strip { margin-left: -100px; margin-right: -100px; }
}

/* FAQ */
.v2-art .faq-item { border-bottom-color: var(--a-line); }
.v2-art .faq-item:first-child { border-top-color: var(--a-line); }
.v2-art .faq-q { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--a-text); }
.v2-art .faq-q .plus::before, .v2-art .faq-q .plus::after { background: var(--a-gold-ink); }
.v2-art .faq-item.open .faq-a { max-height: 640px; }
.v2-art .faq-a p { font-size: 17px; }

/* sources */
.v2-art .sources-list a, .v2-art .sources-list span.src-plain { font-size: 15px; line-height: 1.6; }
.v2-art .sources-list a { color: var(--a-gold-ink); }
.v2-art .sources-list span.src-plain { color: var(--a-faint); }

/* one-off article components: their own inline styles stay, only the small text grows */
.v2-art .material-desc, .v2-art .cost-desc, .v2-art .warn-desc, .v2-art .warn-card p, .v2-art .detail-desc, .v2-art .zone-desc,
.v2-art .cycle-list li, .v2-art .compare-cell, .v2-art .compare-table td, .v2-art .compare-table th, .v2-art .step-text { font-size: 16px; line-height: 1.6; }
.v2-art .art-body .material-desc, .v2-art .art-body .cycle-list li, .v2-art .art-body .warn-card p { font-size: 16px; }
.v2-art .compare-table th, .v2-art .compare-label, .v2-art .ramp-table .rt-h, .v2-art .split-card .split-label, .v2-art .cycle-label,
.v2-art .ev-strength { font-size: 12px; letter-spacing: 0.14em; }
.v2-art .material-cat, .v2-art .cost-cat, .v2-art .warn-cat, .v2-art .detail-cat, .v2-art .zone-cat, .v2-art .ev-name { font-size: 21px; line-height: 1.25; }
.v2-art .cycle-title { font-size: 24px; }
.v2-art .cost-range, .v2-art .ev-source, .v2-art .body-img-cap, .v2-art .stat-cell span, .v2-art .link-plain, .v2-art .spec-label, .v2-art .zone-num { font-size: 15px; }
.v2-art .art-body .compare-table td, .v2-art .art-body .compare-table th { color: var(--a-soft); }
/* card grids drew their 1px rules with a tinted background, which also filled any empty last-row cell; rules move onto the cards */
.v2-art :is(.cost-grid, .detail-grid, .evidence-grid, .material-grid, .spec-grid, .warn-grid, .zone-grid, .stat-strip) { background: transparent; border-color: var(--a-line); }
.v2-art :is(.cost-grid, .detail-grid, .evidence-grid, .material-grid, .spec-grid, .warn-grid, .zone-grid, .stat-strip) > * { box-shadow: 0 0 0 1px var(--a-line); }
.v2-art .btn-ghost { height: auto; padding: 15px 30px; font-size: 13px; letter-spacing: 0.12em; font-weight: 500; }
.v2-art .art-hero .btn-ghost { color: var(--a-text); border-color: rgba(28,26,23,0.3); }
.v2-art .final-cta .btn-ghost { color: var(--ink); border: 1px solid rgba(239,233,223,0.35); background: transparent; }
.v2-art .final-cta .btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* keep reading (internal links to related articles) */
.v2-art .v2a-more { background: var(--a-bg-2); border-top: 1px solid var(--a-line); padding: clamp(56px,7vw,88px) var(--r); }
.v2-art .v2a-more-in { max-width: 1040px; margin: 0 auto; }
.v2-art .v2a-more-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.v2-art .v2a-more h2 { font-size: clamp(28px,3vw,38px); line-height: 1.15; color: var(--a-text); }
.v2-art .v2a-more-all { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--a-gold-ink); }
.v2-art .v2a-more-all:hover { color: var(--a-text); }
.v2-art .v2a-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: clamp(28px,3vw,40px); }
.v2-art .v2a-card { display: flex; flex-direction: column; gap: 14px; }
.v2-art .v2a-card-img { aspect-ratio: 3/2; overflow: hidden; background: #e8e1d6; }
.v2-art .v2a-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.v2-art .v2a-card:hover .v2a-card-img img { transform: scale(1.03); }
.v2-art .v2a-card-topic { font-size: 13px; color: var(--a-faint); }
.v2-art .v2a-card h3 { font-size: 24px; line-height: 1.2; color: var(--a-text); transition: color 200ms ease; }
.v2-art .v2a-card:hover h3 { color: var(--a-gold-ink); }

.v2-art .v2a-build { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: clamp(40px,5vw,56px); padding-top: 28px; border-top: 1px solid var(--a-line); }
.v2-art .v2a-build-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--a-faint); }
.v2-art .v2a-build a { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--a-text); border-bottom: 1px solid rgba(138,106,63,0.4); transition: color 200ms ease, border-color 200ms ease; }
.v2-art .v2a-build a:hover { color: var(--a-gold-ink); border-bottom-color: var(--a-gold-ink); }

/* closing CTA on the v2 dark surface */
.v2-art .final-cta { background: var(--surface); border-top: 0; margin-top: 0; padding: clamp(72px,9vw,112px) var(--r); }
.v2-art .final-cta h2 { font-size: clamp(32px,3.8vw,48px); line-height: 1.12; color: var(--ink); }
.v2-art .final-cta h2 em { color: var(--warm-ink); }
.v2-art .final-cta p { font-size: 18px; color: var(--body); }
.v2-art .btn-gold { height: auto; padding: 16px 32px; background: var(--accent); color: var(--bg); font-size: 13px; letter-spacing: 0.12em; font-weight: 500; }
.v2-art .btn-gold:hover { background: var(--warm-ink); color: var(--bg); }
.v2-art .final-cta-links { font-size: 15px; color: var(--muted); }
.v2-art .final-cta-links a { color: var(--warm-ink); border-bottom-color: rgba(227,201,168,0.4); }

/* reveal only when the script runs, so the text never depends on JavaScript */
.v2-art .reveal { opacity: 1; transform: none; }
.v2-js .v2-art .reveal { opacity: 0; transform: translateY(18px); }
.v2-js .v2-art .reveal.in { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .v2-art .art-body p, .v2-art .art-body li { font-size: 17.5px; }
  .v2-art .callout-quick { padding: 24px 22px; }
  .v2-art .callout-quick p { font-size: 21px; }
  .v2-art .cielo-panel-text { padding: 32px 24px; }
}