/* Dawn article: the standard blog article family (the pages that used blog-article.css).
   Loads after dawn.css. Design only: the article markup, text, links and schema are unchanged,
   so every class styled here is the original one.

   Legacy names: the articles' own per-page styles were written against tokens.css. Mapping those
   names onto Dawn values here lets every page take the Dawn look without its markup changing.
   Names only the bespoke data stories use are deliberately absent. */
:root{
  --font-display:var(--f);
  --font-body:var(--f);
  --font-article:var(--f);
  --font-mono:var(--f);
  --charcoal:var(--ink);
  --text-primary:var(--ink);
  --text-secondary:var(--soft);
  --text-light:var(--soft);
  --text-muted:var(--soft);
  --muted:var(--soft);
  --body-grey:var(--soft);
  --ink-faint:var(--soft);
  --cream:var(--page);
  --paper:var(--page);
  --off-white:var(--page);
  --cream-deep:var(--tile);
  --mist:var(--tile);
  --warm-beige:var(--faint);
  --clay:var(--ink);
  --accent:var(--ink);
  --accent-deep:var(--ink);
  --clay-deep:var(--ink);
  --accent-soft:var(--tile);
  --dark-green:var(--ink);
  --dark-green-deep:var(--dusk);
  --logo-orange:var(--amber);
  --light-orange:var(--amber);
  --soft-gold:var(--amber);
  --fs-display:var(--t-display);
  --fs-page:var(--t-card);
  --fs-section:var(--t-h2);
  --fs-cta:var(--t-h2);
  --fs-card:var(--t-step);
  --fs-lead:var(--t-lede);
  --fs-body:var(--t-body);
  --fs-small:var(--t-small);
  --fs-caption:var(--t-caption);
  --fs-eyebrow:var(--t-caption);
  --fs-art-title:var(--t-card);
  --fs-art-title-m:var(--t-card);
  --fs-art-lead:var(--t-lede);
  --fs-art-lead-m:var(--t-lede);
  --fs-art-h2:var(--t-h2);
  --fs-art-h2-m:var(--t-h2);
  --fs-art-body:var(--t-body);
  --fs-art-body-m:var(--t-body);
  --fs-art-meta:var(--t-caption);
}

/* column */
.blog-article{max-width:760px;margin:0 auto;padding:clamp(120px,15vh,160px) var(--gut) 0;font-size:var(--t-body);line-height:1.72;color:var(--ink)}
.blog-article > h1{font-size:var(--t-card);letter-spacing:-.03em;line-height:1.05;margin-top:18px;max-width:20ch}
.blog-meta-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:var(--t-caption);color:var(--soft)}
.blog-meta-info a{color:inherit;text-decoration:none}
.blog-category{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.blog-category::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.blog-last-updated,.blog-updated,.blog-byline{margin-top:8px;font-size:var(--t-caption);color:var(--soft)}
.article-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-caption);color:var(--soft)}
.article-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.article-eyebrow + .blog-meta-info .blog-category{display:none}
.blog-hero-image{display:block;width:100%;height:auto;margin-top:36px;border-radius:26px;clip-path:inset(0 round 26px)}
.blog-intro{margin-top:36px;font-size:var(--t-lede);line-height:1.6;color:var(--ink)}
.blog-intro p + p{margin-top:14px}

/* body copy */
.blog-content{margin-top:12px}
.blog-content > p,.blog-content li,.blog-content td{max-width:68ch}
.blog-content p{margin-top:18px}
.blog-content h2{font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.08;margin-top:80px;max-width:22ch;scroll-margin-top:100px}
.blog-content h3{font-size:var(--t-step);letter-spacing:-.02em;line-height:1.18;margin-top:44px;scroll-margin-top:100px}
.blog-content h2 + h3{margin-top:28px}
.blog-content h4{font-size:var(--t-lede);font-weight:400;margin-top:28px}
.blog-content strong{font-weight:500}
.blog-content a,.blog-intro a,.sources a,.disclaimer a,.back-to-blog{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.blog-content a:hover,.blog-intro a:hover,.sources a:hover,.back-to-blog:hover{text-decoration-color:var(--ink)}
.blog-content ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.blog-content ul li{position:relative;padding-left:20px}
.blog-content ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.blog-content ol{margin-top:18px;padding-left:22px;display:grid;gap:10px}
.blog-content ol li::marker{color:var(--soft);font-variant-numeric:tabular-nums}
.blog-content blockquote,.expert-quote{margin:32px 0 0;padding:28px 30px;border-radius:26px;clip-path:inset(0 round 26px);background:var(--sand);font-size:var(--t-quote);letter-spacing:-.015em;line-height:1.3}
.blog-content blockquote p{margin:0}
.quote-attribution,.quote-role{display:block;margin-top:12px;font-size:var(--t-caption);color:var(--soft);letter-spacing:0;line-height:1.5}
.section-divider{border:0;border-top:1px solid var(--line);margin:56px 0 0}
.blog-content img{max-width:100%;height:auto;border-radius:26px;margin-top:28px}

/* boxes */
.tldr,.newsletter-callout,.archive-callout,.data-note{margin-top:32px;padding:22px 24px;background:var(--sand);font-size:var(--t-small);line-height:1.6}
.tldr-label{display:block;font-size:var(--t-caption);color:var(--soft);margin-bottom:6px}
.newsletter-callout a,.archive-callout a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.post-cta-top{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.post-cta-btn,.cta-button,.blog-content a.post-cta-btn,.blog-content a.cta-button{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--ink);color:var(--page);font-size:var(--t-ui);text-decoration:none;transition:background .3s}
.post-cta-btn:hover,.cta-button:hover,.blog-content a.post-cta-btn:hover,.blog-content a.cta-button:hover{background:var(--dusk)}
.author-card{display:flex;gap:16px;align-items:flex-start;margin-top:40px;padding:22px;background:var(--tile)}
.author-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
.author-name{font-size:var(--t-ui)}
.author-role{font-size:var(--t-caption);color:var(--soft)}
.author-bio{margin-top:6px;font-size:var(--t-small);color:var(--soft)}
.linkedin-card,.card-link{display:block;margin-top:28px;padding:22px;background:var(--tile);color:var(--ink);text-decoration:none!important;transition:background .3s}
.linkedin-card:hover,.card-link:hover{background:var(--sand)}

/* data */
.data-table-wrap{margin-top:28px;overflow-x:auto}
.data-table,.comparison-table,.blog-content table{width:100%;margin-top:28px;border-collapse:collapse;font-size:var(--t-small);line-height:1.5;font-variant-numeric:tabular-nums}
.data-table-wrap > table{margin-top:0}
.blog-content th{text-align:left;font-weight:400;font-size:var(--t-caption);color:var(--soft);padding:0 14px 10px 0;border-bottom:1px solid var(--ink)}
.blog-content td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.blog-content td.positive{color:var(--ink)}
.blog-content td.positive::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:7px;vertical-align:2px}
.table-footnote,.chart-source,.sources,.disclaimer{margin-top:12px;font-size:var(--t-caption);color:var(--soft);line-height:1.55}
.sources,.disclaimer{margin-top:40px}
.chart-container{margin-top:28px;padding:22px;background:var(--tile)}
.bar-row{display:grid;grid-template-columns:minmax(90px,28%) 1fr auto;align-items:center;gap:12px;margin-top:10px;font-size:var(--t-small)}
.bar-label{color:var(--soft)}
.bar-track{height:10px;background:var(--tile)}
.bar-fill{height:100%;background:var(--amber)}
.bar-value{font-variant-numeric:tabular-nums}

/* FAQ: accordion (as the homepage) and the static block form */
.faq-accordion{margin-top:24px;border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;text-align:left;background:none;border:0;padding:20px 0;font:inherit;font-size:var(--t-faq);letter-spacing:-.012em;line-height:1.3;color:var(--ink);cursor:pointer}
.faq-icon{position:relative;flex:none;width:14px;height:14px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq-item.active .faq-icon::after{transform:rotate(0)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-answer-inner{padding:0 0 20px;color:var(--soft)}
.faq-answer-inner p{margin-top:0}
.faq-block{margin-top:24px;border-top:1px solid var(--ink)}
.faq-q{font-size:var(--t-faq);letter-spacing:-.012em;margin-top:22px}

/* end of article */
.cta-section{margin-top:88px;padding:clamp(26px,4vw,44px);background:var(--tile)}
.cta-section h3{font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.1;max-width:20ch}
.cta-section p{margin-top:10px;color:var(--soft)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.post-newsletter{margin-top:8px;padding:clamp(26px,4vw,44px);background:var(--sand)}
.post-newsletter h3{font-size:var(--t-step);letter-spacing:-.02em}
.post-newsletter p{margin-top:8px;font-size:var(--t-small);color:var(--soft)}
.post-nl-form{display:flex;flex-wrap:wrap;margin-top:20px;border-bottom:1px solid var(--ink);max-width:460px}
.post-nl-form input{flex:1;min-width:0;background:none;border:0;border-radius:0;font:inherit;font-size:var(--t-small);color:var(--ink);padding:10px 0}
.post-nl-form input:focus{outline:none}
.post-nl-form input::placeholder{color:var(--soft)}
.post-nl-form button{background:none;border:0;font:inherit;font-size:var(--t-small);color:var(--ink);cursor:pointer;padding-left:14px}
.post-nl-form .nl-msg{flex-basis:100%;font-size:var(--t-caption);color:var(--soft);min-height:0}
.nl-msg:not(:empty){padding:8px 0}
.back-to-blog{display:inline-block;margin-top:40px;font-size:var(--t-small)}

/* newsletter modal, opened from the in-article callout */
.newsletter-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:var(--gut);background:rgba(22,27,42,.55)}
.newsletter-modal.active{display:flex}
.newsletter-modal-content{position:relative;width:100%;max-width:440px;padding:34px;background:var(--page)}
.newsletter-modal-content h2{font-size:var(--t-h2);letter-spacing:-.025em}
.newsletter-modal-content p{margin-top:10px;font-size:var(--t-small);color:var(--soft)}
.modal-close{position:absolute;top:10px;right:12px;background:none;border:0;font:inherit;font-size:var(--t-step);color:var(--ink);cursor:pointer;line-height:1}
.newsletter-form{margin-top:22px;display:grid;gap:12px}
.newsletter-form label{font-size:var(--t-caption);color:var(--soft)}
.newsletter-form input{width:100%;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;font:inherit;font-size:var(--t-lede);padding:8px 0;color:var(--ink)}
.newsletter-form input:focus{outline:none}
.newsletter-submit{justify-self:start;padding:12px 20px;background:var(--ink);color:var(--page);border:0;font:inherit;font-size:var(--t-ui);cursor:pointer}
.newsletter-message{font-size:var(--t-caption);color:var(--soft)}

/* the page ends on a short dusk into the footer */
.dusk.slim{padding-top:34vh;margin-top:110px}

/* wide screens: a wider column with larger type keeps the line length near 85 characters */
@media (min-width:1100px){
  .blog-article{max-width:880px;--t-body:18.5px;--t-lede:21px;--t-small:16.5px;--t-ui:15.5px;--t-caption:14px}
}

@media (max-width:760px){
  .blog-article{padding-top:104px}
  .blog-content h2{margin-top:64px}
  .bar-row{grid-template-columns:1fr auto;row-gap:4px}
  .bar-row .bar-track{grid-column:1/-1;grid-row:2}
  .blog-content blockquote,.expert-quote{border-radius:22px;clip-path:inset(0 round 22px)}
}

/* components some articles carry (newsletter editions, comparison pieces) */
.section-label{display:inline-flex;align-items:center;gap:9px;margin-top:64px;font-size:var(--t-caption);color:var(--soft)}
.section-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.section-label + h2{margin-top:14px}
.stat-callout{margin-top:32px;padding:26px 28px;background:var(--tile)}
.stat-callout .stat-figure{display:block;font-size:var(--t-figure);letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.stat-callout .stat-caption{display:block;margin-top:12px;font-size:var(--t-caption);color:var(--soft);max-width:48ch;line-height:1.5}
.callout-block,.archive-notice{margin-top:32px;padding:22px 24px;background:var(--sand);font-size:var(--t-small);line-height:1.6}
.callout-block p{margin:0}
.callout-block p + p{margin-top:10px}
.archive-notice strong{font-weight:500}
.chart-title{margin-top:36px;font-size:var(--t-lede);letter-spacing:-.01em}
.chart-footnote{margin-top:10px;font-size:var(--t-caption);color:var(--soft);line-height:1.55}
.yield-chart-wrap{margin-top:24px;padding:22px;background:var(--tile)}
.yield-chart-wrap svg{display:block;width:100%;height:auto}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--ink);color:var(--page)!important;font-size:var(--t-ui);text-decoration:none!important;transition:background .3s}
.btn-primary:hover{background:var(--dusk)}
.back-link{display:inline-block;margin-top:24px;font-size:var(--t-small);color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.table-wrapper,.comparison-table-wrapper{margin-top:28px;overflow-x:auto}
.table-wrapper > table,.comparison-table-wrapper > table{margin-top:0}
.market-table,.comparison-table{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.5;font-variant-numeric:tabular-nums}
.market-table th,.comparison-table th{text-align:left;font-weight:400;font-size:var(--t-caption);color:var(--soft);padding:0 14px 10px 0;border-bottom:1px solid var(--ink);background:none}
.market-table td,.comparison-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;background:none}
.market-table .positive{color:var(--ink)}
.market-table .positive::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:7px;vertical-align:2px}