.blog-page { background: var(--cream); }
.blog-page a:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.blog-page .site-header .brand img { opacity: 1; transform: none; }
.blog-skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--paper); color: var(--ink); }
.blog-skip-link:focus { top: 12px; }
.blog-breadcrumbs { margin-bottom: 42px; color: var(--muted); }
.blog-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0; }
.blog-page .blog-breadcrumbs li { font-size: .8rem; }
.blog-breadcrumbs li + li::before { content: '/'; margin-right: 10px; color: var(--gold); }
.blog-breadcrumbs a:hover { text-decoration: underline; }
.blog-intro { padding: 155px 0 58px; }
.blog-intro h1 { max-width: 900px; font-size: clamp(3.3rem, 7.4vw, 6.3rem); letter-spacing: -.035em; }
.blog-intro h1 span { color: var(--gold); }
.blog-intro .lede { max-width: 630px; margin: 24px 0 0; }
.blog-stories { padding: 0 0 110px; }
.blog-section-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.blog-section-label h2 { font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.blog-section-label > span { color: var(--muted); font-size: .78rem; }
.blog-featured { display: grid; grid-template-columns: minmax(0, 498px) minmax(0, 1fr); align-items: center; gap: 48px; padding: 32px; background: var(--paper); border: 1px solid var(--line); }
.blog-featured-photo { display: block; }
.blog-featured-photo img { width: 100%; max-width: 498px; height: auto; }
.blog-featured-copy { padding: 4px 8px 4px 0; }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--muted); font-size: .76rem; }
.story-category { color: var(--green-700); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.blog-featured h3 { margin: 24px 0 18px; font-size: clamp(2.2rem, 3.4vw, 3.35rem); line-height: 1.04; }
.blog-featured h3 a:hover { color: var(--green-700); }
.blog-featured-copy > p { color: var(--muted); }
.blog-page .blog-featured .story-byline { margin: 22px 0; font-size: .82rem; }
.story-header { padding-top: 155px; padding-bottom: 45px; }
.story-header h1 { max-width: 1060px; margin: 25px 0; font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: 1.05; letter-spacing: -.025em; }
.story-title-break { display: none; }
.blog-page .story-deck { max-width: 700px; color: var(--muted); font-size: 1.27rem; }
.blog-page .story-author { margin-top: 24px; font-size: .9rem; }
.story-context { display: flex; flex-wrap: wrap; gap: 24px 54px; margin: 35px 0 0; padding: 23px 0; border-block: 1px solid var(--line); }
.story-context dt { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.story-context dd { margin: 6px 0 0; font-size: .88rem; }
.story-content { padding: 10px 0 65px; background: var(--paper); }
.story-copy { width: min(720px, calc(100% - 40px)); margin: 42px auto; }
.story-copy h2 { margin-bottom: 24px; font-size: clamp(2.05rem, 3.2vw, 3.1rem); line-height: 1.1; }
.story-copy p { line-height: 1.85; }
.story-copy .story-opening { margin-bottom: 38px; font-size: 1.35rem; color: var(--green-700); line-height: 1.65; }
.story-photo { width: min(498px, calc(100% - 40px)); margin: 42px auto; }
.story-photo img { width: 100%; height: auto; }
.story-photo figcaption { margin-top: 12px; font-size: .78rem; line-height: 1.6; color: var(--muted); }
.story-photo-pair { width: min(1060px, calc(100% - 40px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; margin: 45px auto; }
.story-photo-pair .story-photo { width: 100%; max-width: 498px; margin: 0 auto; }
.story-photo-portrait { max-width: 375px; }
.story-source { padding: 25px 28px; border-left: 3px solid var(--gold); background: var(--cream); }
.blog-page .story-source p { margin: 0; font-size: .9rem; }
.story-bottom-links { padding-top: 15px; }
.story-cta { padding: 65px 0; background: var(--green-900); color: white; }
.story-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.story-cta h2 { font-size: clamp(2.8rem, 4vw, 4rem); }
.story-cta p:not(.eyebrow) { max-width: 620px; margin: 18px 0 0; color: rgba(255,255,255,.78); }
.story-cta .btn { flex-shrink: 0; }
@media (min-width: 681px) and (max-width: 1100px) {
  .blog-intro, .story-header { padding-top: 165px; }
}
@media (max-width: 980px) {
  .blog-featured { gap: 30px; padding: 24px; }
  .blog-featured h3 { font-size: 2.5rem; }
  .story-cta .container { display: block; }
  .story-cta .btn { margin-top: 28px; }
}
@media (max-width: 680px) {
  .blog-intro, .story-header { padding-top: 112px; }
  .blog-breadcrumbs { margin-bottom: 30px; }
  .blog-featured { grid-template-columns: 1fr; gap: 25px; padding: 18px; }
  .blog-featured-copy { padding: 0 2px 10px; }
  .blog-featured h3 { margin-top: 18px; font-size: 2.35rem; }
  .blog-page .blog-featured-copy > p { font-size: 1rem; }
  .blog-section-label > span { display: none; }
  .story-context { gap: 20px; flex-direction: column; }
  .story-photo-pair { grid-template-columns: 1fr; gap: 30px; }
  .story-copy, .story-photo, .story-photo-pair { width: calc(100% - 32px); }
  .story-photo-pair .story-photo { width: 100%; }
  .blog-page .story-copy p { font-size: 1.05rem; }
  .blog-page .story-copy .story-opening { font-size: 1.2rem; }
  .story-source { padding: 20px; }
  .blog-stories { padding-bottom: 70px; }
}