/* The blog carries the homepage's newspaper, cream, ink, and navy surfaces. */
.blog-page,
.blog-article-page {
  background-color: var(--surface-ink,#05080c);
  color: var(--surface-copy,#cbd5df);
}

.blog-page .blog-section,
.blog-article-page .blog-section {
  background: linear-gradient(#ffffff28,#ffffff28),var(--surface-paper-image,url('/assets/img/figma/newspaper-background-hq.png')) center/1100px auto;
  color: #152735;
  border-block: 1px solid #27323b;
}

/* Functional search and filters live on an opaque navy strip. */
.blog-page .blog-tools {
  align-items: center;
  padding: 28px 30px;
  background: var(--surface-navy,#122532);
  border: 1px solid var(--surface-line,#688093);
  color: white;
  gap: 25px;
  margin-bottom: 24px;
}
.blog-page .filters { min-width: 0; gap: 8px; }
.blog-page .filter {
  color: #e5edf5;
  background: transparent;
  border-color: #8ca0b1;
  border-radius: 3px;
  padding: 11px 15px;
}
.blog-page .filter[aria-pressed=true] {
  background: #bfd1eb;
  border-color: #bfd1eb;
  color: #102532;
}
.blog-page .filter:not([aria-pressed=true]):is(:hover,:focus-visible) {
  background: #2a455a;
  border-color: #c4d5e6;
  color: white;
}
.blog-page .search { min-width: 230px; }
.blog-page .search label { color: #e4edf5; }
.blog-page .search input {
  min-width: 0;
  background: var(--surface-paper,#f8f7f2);
  border-color: #c5cfd7;
  color: #142936;
  border-radius: 3px;
}
.blog-page .search input::placeholder { color: #63717b; opacity: 1; }
.blog-page .blog-tools :is(button,input):focus-visible { outline-color: #f07665; }
.blog-page .result-count {
  color: #243846;
  background: var(--surface-paper,#f8f7f2);
  padding: 10px 14px;
  border-left: 3px solid #192c3b;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 28px;
}

/* Identical paper-card construction on the directory and related reading. */
:is(.blog-page,.blog-article-page) .blog-section .article-grid { gap: 30px; }
:is(.blog-page,.blog-article-page) .blog-section .article-card {
  padding: 17px;
  background: var(--surface-paper,#f8f7f2);
  border: 1px solid #252c33;
  box-shadow: 6px 7px 0 #15232f;
  color: #142735;
}
:is(.blog-page,.blog-article-page) .article-card img { border-radius: 5px; }
:is(.blog-page,.blog-article-page) .article-card h3 {
  margin: 0 0 14px;
  color: #142735;
  line-height: 1.27;
}
:is(.blog-page,.blog-article-page) .article-card p { color: #4b5862; line-height: 1.7; }
:is(.blog-page,.blog-article-page) .article-card .card-bottom { color: #5a6872; padding-top: 7px; }
:is(.blog-page,.blog-article-page) .article-card .arrow { color: #142735; }
:is(.blog-page,.blog-article-page) .article-card .arrow--circle { color: #142735; --circle-arrow-ink: #f8f7f2; }
:is(.blog-page,.blog-article-page) .article-card:is(:hover,:focus-visible) h3 { color: #a83225; }
:is(.blog-page,.blog-article-page) .article-card:focus-visible { outline-color: #bc3a2c; }
.blog-article-page .blog-section .section-head {
  padding: 30px 35px;
  background: var(--surface-paper,#f8f7f2);
  border: 1px solid #333c44;
  color: #142735;
  margin-bottom: 32px;
}
:is(.blog-page,.blog-article-page) .blog-section .section-head .text-link { color: #142735; }
:is(.blog-page,.blog-article-page) .blog-section .text-link .arrow--circle { color: #142735; --circle-arrow-ink: #f8f7f2; }

.blog-page .empty-results {
  background: var(--surface-navy,#122532);
  color: white;
  border: 1px solid var(--surface-line,#688093);
  padding: 40px 36px;
}
.blog-page .empty-results p { color: var(--surface-copy,#cbd5df); margin-top: 17px; }
.blog-page .empty-results .button { color: #122532; background: #bfd1eb; border-radius: 4px; }
.blog-page .empty-results .button .arrow { color: #122532; }
.blog-page .empty-results .button .arrow--circle { --circle-arrow-ink: #f8f7f2; }
.blog-page .pagination button {
  color: white;
  background: var(--surface-navy,#122532);
  border-color: #6f879b;
  border-radius: 3px;
  font: 21px/1 var(--display);
  width: 44px;
  height: 44px;
}
.blog-page .pagination button[aria-current=page] { color: #102532; background: #bfd1eb; border-color: #102532; }
.blog-page .pagination button:is(:hover,:focus-visible) { border-color: #b63729; outline-color: #b63729; }

/* Article gutters stay dark; prose sits on a solid reading sheet. */
.blog-article-page {
  background: linear-gradient(100deg,#05080ce8,#122532df),var(--surface-paper-image,url('/assets/img/figma/newspaper-background-hq.png')) center/1100px auto;
}
.blog-article-page .article-page {
  width: min(900px,calc(100% - 96px));
  margin: 65px auto 76px;
  padding: 48px 55px 55px;
  color: #192c3b;
  background: var(--surface-paper,#f8f7f2);
  border: 1px solid #142937;
  box-shadow: 10px 11px 0 #0006;
}
.blog-article-page .article-page .article-cover { border-radius: 5px; margin-bottom: 36px; }
.blog-article-page .article-page h2 { color: #172d3d; line-height: 1.3; }
.blog-article-page .article-page h3 { color: #172d3d; }
.blog-article-page .article-page p,
.blog-article-page .article-page li { color: #35434d; }
.blog-article-page .article-page .article-intro { color: #193447; }
.blog-article-page .article-page :is(p,li) a { color: #214b6b; overflow-wrap: anywhere; text-decoration-thickness: 1px; }
.blog-article-page .article-page :is(p,li) a:hover { color: #a52d23; }
.blog-article-page .article-page :is(ul,ol) { padding-left: 24px; margin: 18px 0 26px; }
.blog-article-page .article-page li+li { margin-top: 10px; }
.blog-article-page .article-page li::marker { color: #a83225; }
.blog-article-page .article-page blockquote { margin: 30px 0; padding: 6px 0 6px 22px; border-left: 3px solid #b5372a; }
.blog-article-page .article-page .article-sources {
  background: var(--surface-navy,#122532);
  color: white;
  padding: 27px 29px;
  border-left: 4px solid #d04736;
  margin-top: 38px;
}
.blog-article-page .article-page .article-sources h3 { color: white; font-size: 25px; line-height: 1.3; margin-bottom: 17px; }
.blog-article-page .article-page .article-sources p { color: #d1dce5; }
.blog-article-page .article-page .article-sources a { color: #d8e6f6; line-height: 1.7; margin-bottom: 12px; overflow-wrap: anywhere; }
.blog-article-page .article-page .article-sources a:hover { color: white; }
.blog-article-page .article-sources .external-arrow { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.blog-article-page .article-sources .arrow { color: #d8e6f6; }
.blog-article-page .article-sources .arrow--circle { color: #f8f7f2; --circle-arrow-ink: #122532; }
.blog-article-page .article-page .inline-cta {
  border-top: 0;
  margin-top: 34px;
  padding: 28px 29px;
  background: var(--surface-navy,#122532);
  color: white;
}
.blog-article-page .article-page .inline-cta h3 { color: white; font-size: 29px; line-height: 1.3; }
.blog-article-page .inline-cta .button.blue { color: #122532; background: #bfd1eb; border-radius: 4px; font-size: 24px; max-width: 100%; white-space: normal; }
.blog-article-page .inline-cta .button.blue:hover { background: #d3e0f1; }
.blog-article-page .inline-cta .button.blue .arrow { color: #122532; }
.blog-article-page .inline-cta .button.blue .arrow--circle { color: #122532; --circle-arrow-ink: #f8f7f2; }
:is(.blog-page,.blog-article-page) .page-hero .arrow--circle { color: #f8f7f2; --circle-arrow-ink: #122532; }
:is(.blog-page,.blog-article-page) .cta-band { background: var(--surface-ink,#05080c); border-top: 1px solid #637787; }

@media(max-width:900px){
  .blog-page .blog-tools { padding: 25px; gap: 24px; }
  .blog-page .search { flex: 1 1 250px; }
  .blog-page .search input { width: 100%; }
  .blog-article-page .article-page { width: calc(100% - 56px); padding: 38px 40px 44px; margin: 48px auto 58px; }
  .blog-article-page .blog-section .section-head { padding: 26px; }
  :is(.blog-page,.blog-article-page) .blog-section .article-grid { gap: 25px; }
}
@media(max-width:600px){
  .blog-page .blog-tools { padding: 23px 20px; margin-bottom: 21px; gap: 23px; }
  .blog-page .filters { gap: 7px; }
  .blog-page .filter { padding: 10px 12px; font-size: 11px; }
  .blog-page .search { min-width: 0; width: 100%; flex-basis: 100%; }
  .blog-page .search input { width: 100%; }
  .blog-page .result-count { font-size: 11px; padding: 9px 12px; margin-bottom: 25px; }
  :is(.blog-page,.blog-article-page) .blog-section .article-grid { gap: 29px; }
  :is(.blog-page,.blog-article-page) .blog-section .article-card { padding: 15px; box-shadow: 5px 6px 0 #15232f; }
  :is(.blog-page,.blog-article-page) .article-card h3 { margin-top: 0; }
  .blog-page .empty-results { padding: 29px 23px; }
  .blog-page .empty-results h2 { font-size: 34px; }
  .blog-page .empty-results p { font-size: 16px; }
  .blog-page .empty-results .button { max-width: 100%; gap: 15px; padding: 14px 17px; font-size: 22px; }
  .blog-page .pagination { margin-top: 38px; }
  .blog-article-page .article-page { width: calc(100% - 36px); margin: 32px auto 43px; padding: 25px 24px 31px; box-shadow: 6px 7px 0 #0006; }
  .blog-article-page .article-page .article-cover { margin-bottom: 29px; }
  .blog-article-page .article-page .article-intro { font-size: 19px; }
  .blog-article-page .article-page :is(p,li) { font-size: 16px; line-height: 1.8; }
  .blog-article-page .article-page h2 { font-size: 31px; margin-top: 32px; }
  .blog-article-page .article-page :is(ul,ol) { padding-left: 20px; }
  .blog-article-page .article-page .article-sources { padding: 22px 19px; margin-top: 32px; }
  .blog-article-page .article-page .article-sources h3 { font-size: 24px; }
  .blog-article-page .article-page .article-sources a { font-size: 12px; }
  .blog-article-page .article-page .article-sources p { font-size: 12px; line-height: 1.7; }
  .blog-article-page .article-page .inline-cta { padding: 23px 20px; margin-top: 27px; }
  .blog-article-page .article-page .inline-cta h3 { font-size: 27px; }
  .blog-article-page .inline-cta .button.blue { font-size: 22px; padding: 14px 17px; gap: 15px; }
  .blog-article-page .inline-cta .button .arrow { width: 35px; height: 28px; }
  .blog-article-page .blog-section .section-head { padding: 25px 22px; }
}
@media(max-width:430px){
  .blog-article-page .article-page { width: calc(100% - 24px); padding-inline: 19px; }
}
@media(max-width:360px){
  .blog-article-page .article-page { padding-inline: 16px; }
  .blog-article-page .article-page h2 { font-size: 29px; }
  .blog-article-page .article-page .inline-cta { padding-inline: 16px; }
  .blog-page .blog-tools { padding-inline: 18px; }
}