/* VOLT Home Journal (blog). Light editorial layout on the site's paper background, Poppins from styles.css.
   The gold accent (--yellow, #FEBE10) is reserved for the single primary call to action of each view (.button). */
.blog-page{background:var(--paper);color:var(--charcoal)}
.blog-container{width:min(90%,760px);margin-inline:auto}
.blog-wide{width:min(90%,1180px);margin-inline:auto}
.blog-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-breadcrumb{flex-wrap:wrap;gap:8px 12px;margin-bottom:28px}
.blog-page .eyebrow{color:var(--muted)}
.blog-page a:not(.button):not(.text-link):not(.blog-button-dark):hover{text-decoration-thickness:2px}

/* Article head */
.blog-head{padding-top:56px}
.blog-head h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.05em;margin-top:16px;max-width:18ch}
.blog-answer{margin-top:32px;padding:24px 28px;background:#f0f0eb;border-left:3px solid var(--charcoal)}
.blog-answer h2{font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.6;color:var(--muted)}
.blog-answer p{margin-top:10px;font-size:1.0625rem;line-height:1.7;font-weight:500}
.blog-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.6;color:var(--muted)}
.blog-byline{color:var(--charcoal);font-weight:600}
.blog-reviewer{flex-basis:100%;order:5}
.blog-updated{color:var(--charcoal)}
.blog-hero{margin-top:40px}
.blog-hero img,.blog-hub-hero img{width:100%;height:auto;aspect-ratio:12/7;object-fit:cover;background:#e8e8e2}
.blog-hub-hero img{aspect-ratio:2/1}
.blog-page figcaption{font-size:.75rem;color:var(--muted);margin-top:10px;line-height:1.6}

/* Article body */
.blog-body{padding-bottom:96px}
.blog-lead{font-size:1.1875rem;line-height:1.7;margin-top:44px;color:var(--charcoal)}
.blog-body p{font-size:1.0625rem;line-height:1.78;color:#33332f}
.blog-body p+p{margin-top:18px}
.blog-body section>h2{font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.22;letter-spacing:-.035em;margin:60px 0 18px;scroll-margin-top:24px}
.blog-body a:not(.button):not(.text-link):not(.blog-button-dark){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.blog-toc{margin-top:40px;padding:22px 0;border-top:1px solid var(--charcoal);border-bottom:1px solid var(--line)}
.blog-toc h2{font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.blog-toc ol{margin:12px 0 0;padding-left:22px;display:grid;gap:6px}
.blog-toc li{font-size:.9375rem;line-height:1.6}
.blog-toc a{text-decoration:none!important}
.blog-toc a:hover{text-decoration:underline!important}
.blog-product{float:right;width:180px;margin:6px 0 20px 32px;padding:18px 18px 12px;background:#f0f0eb}
.blog-product img{width:100%;height:auto;mix-blend-mode:multiply}
.blog-product figcaption{margin-top:8px}
.blog-body section::after{content:'';display:block;clear:both}

/* Takeaway and primary call to action (the only gold element in the article body) */
.blog-takeaway{margin-top:72px;padding-top:40px;border-top:1px solid var(--charcoal)}
.blog-takeaway h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.18;letter-spacing:-.04em;margin-top:14px}
.blog-takeaway>p:not(.eyebrow){margin-top:16px}
.blog-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:28px}

/* FAQ, sources, related */
.blog-faq{margin-top:72px}
.blog-faq>h2,.blog-sources>h2,.blog-related>h2{font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.22;letter-spacing:-.035em}
.blog-faq-item{padding:22px 0;border-bottom:1px solid var(--line)}
.blog-faq-item:first-of-type{margin-top:18px;border-top:1px solid var(--line)}
.blog-faq-item h3{font-size:1.0625rem;line-height:1.45;letter-spacing:-.01em}
.blog-faq-item p{margin-top:8px;font-size:.9688rem;color:var(--muted)}
.blog-sources{margin-top:64px}
.blog-sources>h2{font-size:1.25rem}
.blog-sources ol{margin:14px 0 0;padding-left:22px;font-size:.875rem;line-height:1.7;color:var(--muted)}
.blog-sources li+li{margin-top:6px}
.blog-sources a{overflow-wrap:anywhere}
.blog-related{margin-top:56px}
.blog-related>h2{font-size:1.25rem}
.blog-related ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 32px}

/* Newsletter (secondary action: charcoal, never gold) */
.blog-newsletter{margin-top:72px;padding:40px;background:#f0f0eb;display:grid;grid-template-columns:1.3fr 1fr;gap:28px 40px;align-items:center}
.blog-newsletter h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.035em;margin-top:10px}
.blog-newsletter p:not(.eyebrow){margin-top:12px;font-size:.9375rem;line-height:1.7;color:#45453f}
.blog-newsletter .blog-fine{font-size:.75rem;color:var(--muted);margin-top:12px}
.blog-button-dark{display:inline-flex;gap:20px;align-items:center;justify-content:space-between;background:var(--charcoal);color:var(--paper);padding:16px 23px;font-size:.875rem;font-weight:600;line-height:1.6;min-height:52px;transition:background .2s}
.blog-button-dark:hover{background:#3a3a37}

/* Hub */
.blog-hub-head{padding-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 56px;align-items:end}
.blog-hub-head>.blog-breadcrumb,.blog-hub-head>.eyebrow,.blog-hub-head>h1,.blog-hub-head>.blog-lead{grid-column:1}
.blog-hub-head>.blog-breadcrumb{margin-bottom:12px}
.blog-hub-head h1{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.08;letter-spacing:-.05em;max-width:14ch}
.blog-hub-head .blog-lead{margin-top:8px;max-width:46ch;font-size:1.0625rem}
.blog-hub-hero{grid-column:2;grid-row:1/span 4;align-self:center}
.blog-list{margin-top:80px}
.blog-list>h2{font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--charcoal)}
.blog-cards{display:grid;gap:48px;margin-top:32px}
.blog-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 48px;align-items:center}
.blog-card-image img{width:100%;height:auto;aspect-ratio:12/7;object-fit:cover}
.blog-card h3{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.18;letter-spacing:-.04em;margin-top:12px}
.blog-card h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.blog-card-copy>p:not(.eyebrow){margin-top:14px;font-size:.9375rem;color:#45453f}
.blog-card-copy .blog-card-meta{font-size:.8125rem;color:var(--muted)}
.blog-card .text-link{margin-top:14px}
.blog-hub-page>.blog-wide:last-child{padding-bottom:96px}

@media (max-width:820px){
 .blog-head,.blog-hub-head{padding-top:32px}
 .blog-hub-head{grid-template-columns:1fr}
 .blog-hub-hero{grid-column:1;grid-row:auto;margin-top:24px}
 .blog-card{grid-template-columns:1fr}
 .blog-newsletter{grid-template-columns:1fr;padding:28px 24px}
 .blog-product{width:132px;margin-left:20px;padding:12px 12px 8px}
 .blog-product figcaption{display:none}
 .blog-answer{padding:20px 20px}
 .blog-lead{font-size:1.0625rem}
 .blog-body p{font-size:1rem}
 .blog-list{margin-top:56px}
 .blog-actions .button{width:100%}
}
.blog-card h3 a{text-decoration:none}
.blog-card h3 a:hover{text-decoration:underline}
@media (max-width:820px){.blog-answer p{font-size:1rem;line-height:1.65}.blog-head h1{font-size:2.15rem}}