@font-face {
  font-family: BlogDisplay;
  src: url('../fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0_3E.woff2') format('woff2');
  font-weight: 900;
  font-display: swap
}

@font-face {
  font-family: BlogSans;
  src: url('../fonts/7cHqv4kjgoGqM7E3t-4c4A.woff2') format('woff2');
  font-weight: 700;
  font-display: swap
}

.blogs-section {
  background: #fcfaf6;
  color: #071e32;
  padding: 28px 0 50px
}

.blogs-shell {
  width: min(1230px, calc(100% - 64px));
  margin: auto
}

.blogs-intro {
  text-align: center;
  margin: 0 0 52px
}

.blogs-eyebrow {
  font: 500 14px/1.4 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #ff4e0b;
  margin: 0 0 12px
}

.blogs-intro h1 {
  font: 900 clamp(40px, 5.7vw, 88px)/1.05 BlogDisplay, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  margin: 0 0 12px;
  color: #071e32
}

.blogs-intro h1 span,
.newsletter h2 span {
  color: #ff4e0b
}

.blogs-intro>p:last-child {
  font: 18px/1.5 Arial, sans-serif;
  margin: 0
}

.blog-grid {
  --gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px var(--gap);
  align-items: stretch
}

#blog-grid:empty {
  min-height: 520px;
}

.blog-card {
  flex: 0 0 calc((100% - 2 * var(--gap))/3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fffdfa;
  border: 1px solid #e3dfd7;
  border-radius: 7px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
  transform-origin: center;
  position: relative
}

.blog-cover {
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: contain;
  background: #f8f6f1;
  display: block
}

.blog-card-content {
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font: 10px/1.5 Arial, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #405b76
}

.blog-category {
  color: #ff4e0b
}

.blog-card h2 {
  font: 700 26px/1.08 BlogSans, Arial, sans-serif;
  letter-spacing: -.7px;
  color: #071e32;
  margin: 0 0 14px
}

.blog-excerpt {
  font: 18px/1.45 Arial, sans-serif;
  margin: 0 0 20px
}

.blog-read {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #071e32;
  font: 700 16px/1.3 BlogSans, Arial, sans-serif;
  cursor: pointer;
  min-height: 44px
}

.blog-read span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #ff4e0b;
  color: #ff4e0b;
  border-radius: 50%;
  font: 22px/1 Arial, sans-serif
}

@media(hover:hover) {
  .blog-card:hover {
    transform: translateY(-7px) scale(1.018);
    box-shadow: 0 14px 32px #0b20311a;
    z-index: 1
  }
}

.blog-card:focus-within {
  box-shadow: 0 10px 25px #0b20311a
}

.blog-read:focus-visible,
.newsletter button:focus-visible,
.article-close:focus-visible {
  outline: 3px solid #ff6508;
  outline-offset: 4px
}

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  border: 1px solid #e3dfd7;
  border-radius: 7px;
  padding: 30px 40px;
  margin-top: 36px
}

.newsletter h2 {
  font: 900 clamp(30px, 3.2vw, 48px)/1.08 BlogDisplay, Impact, sans-serif;
  letter-spacing: -1px;
  color: #071e32;
  margin: 0 0 10px
}

.newsletter>div>p:last-child {
  font: 16px/1.5 Arial, sans-serif;
  margin: 0
}

.newsletter-input {
  display: flex;
  border: 1px solid #d9d3c9;
  border-radius: 999px;
  min-width: 0;
  overflow: hidden
}

.newsletter input {
  background: transparent;
  border: 0;
  min-width: 0;
  width: 100%;
  padding: 15px 20px;
  font: 14px Arial, sans-serif;
  color: #071e32
}

.newsletter button {
  border: 0;
  border-radius: 999px;
  background: #ff4e0b;
  color: #fff;
  padding: 16px 26px;
  font: 15px Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer
}

.newsletter button span {
  margin-left: 10px
}

#newsletter-status {
  text-align: center;
  font: 12px/1.5 Arial, sans-serif;
  color: #405b76;
  margin: 10px 0 0
}

#blogs-status:empty {
  display: none
}

#article-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: 85dvh;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 32px;
  color: #071e32;
  background: #fcfaf6
}

#article-dialog::backdrop {
  background: #091c2ba8
}

#article-dialog h2 {
  font: 700 34px/1.1 BlogSans, Arial, sans-serif;
  margin: 15px 0
}

#article-body {
  font: 18px/1.7 Georgia, serif;
  white-space: pre-line
}

.article-close {
  float: right;
  border: 0;
  background: none;
  font: 30px Arial;
  cursor: pointer;
  color: #071e32;
  min-width: 44px;
  min-height: 44px
}

@media(max-width:900px) {
  .blog-card {
    flex-basis: calc((100% - var(--gap))/2)
  }

  .newsletter {
    grid-template-columns: 1fr;
    padding: 26px
  }

  .blogs-intro {
    margin-bottom: 36px
  }
}

@media(max-width:600px) {
  .blogs-shell {
    width: calc(100% - 36px)
  }

  .blog-card {
    flex-basis: 100%;
    max-width: 420px
  }

  .blog-card h2 {
    font-size: 25px
  }

  .blogs-intro>p:last-child {
    font-size: 16px
  }

  .newsletter {
    padding: 22px 18px
  }

  .newsletter-input {
    flex-wrap: wrap;
    border: 0;
    gap: 10px;
    border-radius: 0
  }

  .newsletter input {
    border: 1px solid #d9d3c9;
    border-radius: 999px;
    min-height: 48px
  }

  .newsletter button {
    width: 100%
  }

  .blogs-intro h1 {
    font-size: 48px
  }

  .blogs-section {
    padding-top: 24px
  }
}

@media(prefers-reduced-motion:reduce) {
  .blog-card {
    transition: none
  }

  .blog-card:hover {
    transform: none
  }
}

/* Match the supplied desktop 90% reference, leaving the shared header/form alone. */
@media (min-width: 901px) {
  .blogs-section {
    zoom: 0.9;
  }
}

/* Extend the existing semantic link/button across its entire card.
   Keyboard activation and article destinations remain unchanged. */
.blog-card {
  cursor: pointer;
}

.blog-read::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  cursor: pointer;
}

.blog-card:focus-within {
  outline: 2px solid #ff6508;
  outline-offset: 3px;
}