.blog-hero{position:relative;overflow:hidden;padding:170px 0 90px;background:linear-gradient(135deg,#18222b 0%,#253748 70%,#4a4035 100%);color:#fff}.blog-hero.has-image{min-height:650px;display:flex;align-items:flex-end;background-position:center;background-size:cover}.blog-hero.has-image:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,28,38,.94) 0%,rgba(17,28,38,.8) 45%,rgba(17,28,38,.22) 100%)}.blog-hero .container{position:relative;z-index:1;max-width:1180px}.blog-hero .hero-copy{max-width:760px}.blog-kicker{display:inline-block;color:#cfa876;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}.blog-hero h1{font-size:clamp(2.6rem,6vw,5.3rem);line-height:.98;max-width:950px;margin-bottom:24px}.blog-deck{font-size:1.2rem;line-height:1.7;max-width:790px;color:rgba(255,255,255,.86)}.blog-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:.9rem;color:rgba(255,255,255,.68)}
.blog-index{padding:90px 0}.blog-intro{max-width:780px;margin:0 auto 48px;text-align:center}.blog-intro h2{font-size:clamp(2rem,4vw,3.2rem)}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.article-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(32,42,51,.12);background:#fff;color:#202a33;box-shadow:0 14px 40px rgba(18,30,42,.07);transition:transform .2s ease,border-color .2s ease}.article-card:hover{transform:translateY(-3px);border-color:#cfa876}.article-card.is-planned{box-shadow:none;background:#f8f3eb;padding:34px}.article-card-image{aspect-ratio:16/8;overflow:hidden;background:#d9d2c8}.article-card-image img{width:100%;height:100%;object-fit:cover}.article-card-content{display:flex;flex-direction:column;flex:1;padding:30px 34px 34px}.article-card .card-label{color:#8a6336;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem}.article-card h2{font-size:1.75rem;margin:12px 0;color:#202a33}.article-card p{line-height:1.7;color:#43505a}.article-card a{margin-top:auto;padding-top:14px;color:#202a33;font-weight:600}.article-card .coming{margin-top:auto;padding-top:14px;color:#66717a;font-size:.9rem}
.article-layout{display:grid;grid-template-columns:minmax(0,800px) 280px;gap:68px;align-items:start;padding:80px 0}.article-body{font-size:1.08rem;line-height:1.85}.article-body h2{font-size:clamp(1.85rem,3vw,2.55rem);margin:54px 0 16px;line-height:1.15}.article-body h3{font-size:1.4rem;margin:32px 0 10px}.article-body p,.article-body ul,.article-body ol{margin-bottom:20px}.article-body ul,.article-body ol{padding-left:24px}.article-body li{margin-bottom:10px}.article-body a{color:#8a6336;text-decoration:underline;text-underline-offset:3px}.article-figure{margin:38px 0 46px}.article-figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.article-figure figcaption{margin-top:10px;font-size:.78rem;line-height:1.5;color:#7b858d}.answer-box{padding:26px 28px;border-left:4px solid #cfa876;background:rgba(207,168,118,.11);margin:0 0 38px}.answer-box strong{display:block;margin-bottom:7px}.article-note{padding:22px 24px;background:#f3f5f7;color:#202a33;border-radius:2px;margin:28px 0;font-size:.97rem}.article-toc{position:sticky;top:118px;border-top:3px solid #cfa876;padding-top:20px}.article-toc h2{font-family:'DM Sans',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}.article-toc ol{padding-left:20px}.article-toc li{margin:12px 0}.article-toc a{color:inherit;font-size:.92rem}.source-list{font-size:.88rem;padding-top:22px;border-top:1px solid rgba(32,42,51,.14)}.article-cta{margin-top:60px;padding:38px;background:#18222b;color:#fff}.article-cta h2{margin-top:0;color:#fff}.article-cta p{color:rgba(255,255,255,.8)}.article-cta .btn{display:inline-block;margin-top:6px;color:#18222b;background:#cfa876;border-color:#cfa876}.editorial-disclosure{font-size:.78rem;color:rgba(255,255,255,.62);margin-top:12px}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:30px}.article-toc{position:static;order:-1}.article-grid{grid-template-columns:1fr}.blog-hero{padding:135px 0 70px}.blog-hero.has-image{min-height:610px;background-position:62% center}.blog-hero.has-image:before{background:linear-gradient(180deg,rgba(17,28,38,.28),rgba(17,28,38,.94) 62%)}.article-card-content{padding:26px}.article-figure{margin:30px -20px 38px}.article-figure figcaption{padding:0 20px}}

/* Guides: centered reading layout and compact index. */
.article-layout.container { display:block; width:100%; max-width:960px; margin-inline:auto; padding:40px 28px 64px; }
.article-body { width:100%; max-width:100%; }
.article-body > p, .article-body > h2, .article-body > h3, .article-body > ul, .article-body > ol, .article-body > .source-list { max-width:740px; margin-left:auto; margin-right:auto; }
.article-body h2[id] { scroll-margin-top:125px; }
.article-toc { position:static; margin:28px auto 36px; max-width:740px; padding:20px 0; border-bottom:1px solid var(--color-soft-gray); }
.article-toc h2 { margin:0 0 14px; font-family:var(--font-body); font-size:.85rem; }
.article-toc ol { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; margin:0; padding-left:22px; }
.article-toc li { margin:0; }
.article-figure { margin:32px 0; }
.article-figure img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.article-figure figcaption { color:var(--color-charcoal); opacity:.75; }
.blog-index { padding:40px 0 64px; }
.blog-index > .container { max-width:1180px; }
.blog-intro { margin-bottom:28px; }
.blog-hero:not(.has-image) { padding:140px 0 44px; }
.blog-hero:not(.has-image) h1 { font-size:clamp(2.6rem,5vw,4.2rem); }
.blog-hero.has-image { min-height:520px; padding:145px 0 48px; }
.blog-hero h1 { font-size:clamp(2.6rem,4.7vw,4.4rem); color:#fff; }
.blog-hero .blog-deck, .blog-hero .blog-meta, .blog-hero .editorial-disclosure { color:#f2f0ec; }
.blog-hero.has-image:before { background:linear-gradient(90deg,rgba(17,28,38,.94),rgba(17,28,38,.82) 65%,rgba(17,28,38,.55)); }
.article-card-image { aspect-ratio:16/9; }
.article-card-image img { display:block; }
.article-card.is-wide { grid-column:1/-1; display:grid; grid-template-columns:minmax(300px,.85fr) 1.15fr; }
.article-card.is-wide .article-card-image { min-height:290px; aspect-ratio:auto; }
.hub-image-note { margin:24px 0 0; font-size:.85rem; opacity:.75; }
.dark-theme .article-body a:not(.btn) { color:#dfbd90; }
.article-table-wrap { max-width:100%; margin:28px 0 34px; overflow-x:auto; border:1px solid rgba(32,42,51,.16); }
.article-table { width:100%; min-width:680px; border-collapse:collapse; background:#fff; color:#202a33; font-size:.94rem; line-height:1.55; }
.article-table th, .article-table td { padding:15px 16px; border-right:1px solid rgba(32,42,51,.12); border-bottom:1px solid rgba(32,42,51,.12); text-align:left; vertical-align:top; }
.article-table th:last-child, .article-table td:last-child { border-right:0; }
.article-table tbody tr:last-child td { border-bottom:0; }
.article-table th { background:#18222b; color:#fff; font-weight:600; }
.article-table tbody tr:nth-child(even) { background:#f6f3ee; }
@media(max-width:600px) {
 .blog-hero.has-image:before { background:rgba(17,28,38,.84); }
 .article-layout.container { padding:28px 20px 44px; }
 .article-toc ol { grid-template-columns:1fr; }
 .article-figure { margin:28px 0; }
 .article-figure figcaption { padding:0; }
 .blog-hero.has-image { padding:135px 0 36px; min-height:540px; }
 .blog-index { padding-top:28px; }
 .article-card.is-wide { display:flex; grid-column:auto; }
 .article-card.is-wide .article-card-image { min-height:0; aspect-ratio:16/9; }
}

/* Guide cards: the visible article link covers the entire card. */
.article-card{position:relative;cursor:pointer}
.article-card a::after{content:"";position:absolute;inset:0;z-index:2}
.article-card:focus-within{outline:3px solid #8a6336;outline-offset:3px}
.article-card:hover .article-card-image img,.article-card:focus-within .article-card-image img{transform:scale(1.035)}
.article-card-image img{transition:transform .45s ease}

/* Scroll reveals are progressive enhancement; content stays visible without JS. */
@media (prefers-reduced-motion:no-preference){
 .blog-motion-ready .blog-reveal-card,.blog-motion-ready .blog-reveal-heading,.blog-motion-ready .blog-reveal-image{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
 .blog-motion-ready .blog-reveal-card,.blog-motion-ready .blog-reveal-heading{transform:translateY(22px)}
 .blog-motion-ready .blog-reveal-image{transform:translateX(var(--reveal-x,28px))}
 .blog-motion-ready .blog-reveal-card.is-visible,.blog-motion-ready .blog-reveal-heading.is-visible,.blog-motion-ready .blog-reveal-image.is-visible{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.article-card,.article-card-image img{transition:none}}
