/* ==================================================

   EDIT THESE SETTINGS FIRST

   ================================================== */

.blog-hub {

  --ink: #102f49;

  --blue: #005fdb;

  --green: #2f9f5f;

  --hub-width: 1440px;

  --hub-gutter: 90%;

  --grid-gap: 26px;

  --card-padding: 24px;

  --hero-padding: 38px 0 32px;

  --featured-columns: 1.18fr 1fr;

}

/* ==================================================

   MAGAZINE PAGE

   Heading, featured story, filters and article cards

   ================================================== */

.blog-hub {

  background: #f5f7fa;

  color: var(--ink);

  font-family: Inter, Arial, sans-serif;

  padding-bottom: 70px;

}

.blog-hub * {

  box-sizing: border-box;

}

.blog-hub .blog-container {

  width: min(var(--hub-width), var(--hub-gutter));

  margin-inline: auto;

}

.blog-hub .blog-hero {

  background: #fff;

  border: 0;

  border-bottom: 1px solid #e2e8ef;

  padding: var(--hero-padding);

  margin-bottom: 30px;

  position: relative;

}

.blog-hub .blog-hero:after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 5%;

  width: 80px;

  height: 4px;

  background: var(--green);

}

.blog-eyebrow {

  font-size: .74rem;

  letter-spacing: .18em;

  font-weight: 800;

  color: #256748;

}

.blog-hub .blog-hero h1 {

  font-size: clamp(2.4rem, 5vw, 4.5rem);

  letter-spacing: -.055em;

  line-height: 1.05;

  color: var(--ink);

  margin: 12px 0 14px;

}

.blog-hub .blog-hero p {

  font-size: 1.08rem;

  margin: 0;

  max-width: 780px;

  color: #526579;

  line-height: 1.6;

}

.blog-section-heading {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

  margin: 0 0 16px;

  font-size: .8rem;

  text-transform: uppercase;

  letter-spacing: .1em;

  font-weight: 800;

}

.blog-section-note {

  font-size: .78rem;

  color: #627285;

  font-weight: 500;

  letter-spacing: 0;

  text-transform: none;

}

.blog-hub .blog-featured {

  grid-template-columns: var(--featured-columns);

  background: #102f49;

  color: white;

  border-radius: 18px;

  box-shadow: 0 12px 30px #102f4910;

  margin-bottom: 38px;

  min-width: 0;

  display: grid;

  overflow: hidden;

  text-decoration: none;

}

.blog-hub .blog-featured img {

  display: block;

  min-height: 390px;

  max-height: 510px;

  transition: transform .35s;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.blog-hub .blog-featured-body {

  padding: clamp(24px, 3.4vw, 48px);

  align-self: center;

  min-width: 0;

}

.blog-hub .blog-featured h2 {

  font-size: clamp(1.8rem, 2.8vw, 2.9rem);

  line-height: 1.12;

  letter-spacing: -.035em;

  color: #fff;

  margin: 18px 0;

}

.blog-hub .blog-featured p {

  color: #d4e1ed;

  font-size: 1rem;

  line-height: 1.7;

  margin-bottom: 24px;

}

.blog-hub .blog-pill {

  background: #eaf4ff;

  color: #07589d;

  font-size: .72rem;

  padding: 7px 11px;

  font-weight: 800;

  line-height: 1.3;

  display: inline-block;

  border-radius: 999px;

}

.blog-hub .blog-featured .blog-pill {

  background: #dff5e7;

  color: #195d36;

}

.blog-story-meta {

  color: #c7d6e4;

  font-size: .8rem;

  line-height: 1.5;

  margin-bottom: 24px;

}

.blog-story-meta span {

  margin: 0 8px;

}

.blog-read-link {

  display: inline-flex;

  gap: 26px;

  align-items: center;

  border-bottom: 1px solid #91adc6;

  padding-bottom: 7px;

  font-size: .9rem;

  color: white;

}

.blog-latest-heading {

  border-top: 1px solid #dce4ed;

  padding-top: 26px;

  margin-bottom: 20px;

}

.blog-latest-heading h2 {

  font-size: 1.7rem;

  text-transform: none;

  letter-spacing: -.04em;

  margin: 0;

  color: var(--ink);

}

.blog-hub .blog-tools {

  gap: 16px;

  margin-bottom: 24px;

  align-items: center;

  display: flex;

  justify-content: space-between;

}

.blog-hub .blog-filters {

  gap: 8px;

  display: flex;

  flex-wrap: wrap;

}

.blog-hub .blog-filters button {

  font: inherit;

  font-size: .8rem;

  font-weight: 700;

  border: 1px solid #dce4ed;

  padding: 10px 15px;

  color: #42566b;

  transition: background .15s;

  background: #fff;

  border-radius: 999px;

  cursor: pointer;

}

.blog-hub .blog-filters button.active {

  background: var(--ink);

  border-color: var(--ink);

  color: white;

}

.blog-hub .blog-filters button:hover {

  border-color: #8da4ba;

}

.blog-hub .blog-tools input {

  font: inherit;

  font-size: .86rem;

  border-radius: 999px;

  padding: 12px 18px;

  background: #fff;

  min-width: 230px;

  max-width: 100%;

  color: var(--ink);

  border: 1px solid #d9e1ea;

}

.blog-hub .blog-grid {

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: var(--grid-gap);

  display: grid;

}

.blog-hub .blog-card {

  display: flex;

  flex-direction: column;

  min-width: 0;

  border-radius: 15px;

  border: 1px solid #e0e6ed;

  box-shadow: none;

  transition: transform .2s, box-shadow .2s;

  background: #fff;

  overflow: hidden;

  text-decoration: none;

  color: inherit;

}

.blog-hub .blog-card[hidden] {

  display: none !important;

}

.blog-hub .blog-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 28px #102f4912;

}

.blog-hub .blog-card img,

.blog-hub .blog-placeholder {

  display: block;

  height: auto;

  aspect-ratio: 16/10;

  object-fit: cover;

}

.blog-hub .blog-placeholder {

  display: grid;

  place-items: center;

  background: linear-gradient(135deg, #174d82, #43a047);

  color: #fff;

  font-size: 1.5rem;

  font-weight: 800;

}

.blog-hub .blog-card-body {

  padding: var(--card-padding);

  display: flex;

  flex-direction: column;

  flex: 1;

}

.blog-hub .blog-card h2 {

  font-size: clamp(1.2rem, 1.65vw, 1.55rem);

  line-height: 1.25;

  letter-spacing: -.025em;

  margin: 16px 0 10px;

  color: var(--ink);

  overflow-wrap: anywhere;

}

.blog-hub .blog-card .blog-pill {

  align-self: flex-start;

}

.blog-hub .blog-card p {

  font-size: .93rem;

  line-height: 1.65;

  margin: 0 0 20px;

  color: #596c7e;

}

.blog-hub .blog-card small {

  font-size: .76rem;

  color: #607184;

  line-height: 1.5;

  margin-top: auto;

  padding-top: 16px;

  border-top: 1px solid #edf0f4;

  display: block;

}

.blog-card-read {

  display: flex;

  justify-content: space-between;

  margin-top: 15px;

  color: #07589d;

  font-size: .82rem;

  font-weight: 800;

}

.blog-hub a:focus-visible,

.blog-hub button:focus-visible,

.blog-hub input:focus-visible {

  outline: 3px solid #005fdb;

  outline-offset: 4px;

}

@media(min-width:1300px) {

  .blog-hub .blog-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}

@media(max-width:1000px) {

  .blog-hub .blog-featured {

    grid-template-columns: 1fr 1fr;

  }

  .blog-hub .blog-featured img {

    min-height: 360px;

  }

  .blog-hub .blog-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media(max-width:700px) {

  .blog-hub .blog-hero {

    padding: 28px 0;

  }

  .blog-hub .blog-featured {

    grid-template-columns: 1fr;

  }

  .blog-hub .blog-featured img {

    height: auto;

    min-height: 0;

    aspect-ratio: 16/10;

  }

  .blog-hub .blog-featured-body {

    padding: 26px;

  }

  .blog-hub .blog-grid {

    grid-template-columns: 1fr;

  }

  .blog-hub .blog-tools {

    align-items: stretch;

    flex-direction: column;

  }

  .blog-hub .blog-tools input {

    width: 100%;

    min-width: 0;

  }

  .blog-hub .blog-card-body {

    padding: 22px;

  }

  .blog-section-note {

    display: none;

  }

  .blog-hub .blog-card h2 {

    font-size: 1.4rem;

  }

}

@media(prefers-reduced-motion:reduce) {

  .blog-hub .blog-card,

  .blog-hub .blog-featured img {

    transition: none;

  }

  .blog-hub .blog-card:hover {

    transform: none;

  }

}

.blog-hub .blog-empty {

  text-align: center;

  padding: 40px;

}

/* ==================================================

   ARTICLE PAGES AND READER COMMENTS

   Includes tablet and mobile adjustments

   ================================================== */

.article-page {

  background: #f6f8fb;

  color: #203047;

  padding-bottom: 70px;

  padding-top: 42px;

}

.article-container {

  width: min(1180px, calc(100% - 36px));

  margin: auto;

  max-width: 1180px;

  box-sizing: border-box;

  background: #fff;

  padding: clamp(28px, 4vw, 52px);

  border-radius: 22px;

  box-shadow: 0 12px 35px rgba(15, 76, 129, .08);

}

.article-back {

  display: inline-block;

  margin-bottom: 25px;

}

.article-container h1 {

  font-size: clamp(32px, 3.5vw, 44px);

  line-height: 1.15;

  margin: 14px 0;

}

.article-meta {

  color: #788391;

}

.article-lede {

  max-width: 980px;

  font-size: 1.18rem;

  line-height: 1.58;

  color: #536171;

  margin: 0 0 24px;

}

.article-page .article-content {
  width: 100%;
  max-width: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #263747;
}

.article-page .article-content p {

  margin: 0 0 20px;

}

.article-content p:last-child {

  margin-bottom: 0;

}

.article-content h2 {

  font-size: 1.8rem;

  line-height: 1.25;

  margin: 2rem 0 .8rem;

}

.article-content h3 {

  font-size: 1.4rem;

  line-height: 1.3;

  margin: 1.7rem 0 .7rem;

}

.article-content ul,

.article-content ol {

  margin: .4rem 0 1.2rem;

  padding-left: 1.6rem;

}

.article-content li {

  margin: .35rem 0;

  line-height: 1.55;

}

.article-content hr {

  border: 0;

  border-top: 1px solid #dfe6ee;

  margin: 2rem 0;

}

.article-container>img,

.article-container>picture,

.article-container>picture img,

.article-container .article-image,

.article-container .featured-image,

.article-container .article-featured-image,

.article-container .blog-article-image {

  display: block;

  width: 100%;

  max-width: 100%;

  height: 420px;

  object-fit: cover;

  object-position: center;

  border-radius: 16px;

  margin: 24px 0 30px;

  box-sizing: border-box;

}

.article-container>picture {

  overflow: hidden;

}

.article-container>picture img {

  margin: 0;

}

.article-content img {

  display: block;

  max-width: 100%;

  height: auto;

  border-radius: 12px;

  margin: 20px auto;

}

.article-content blockquote {

  border-left: 4px solid #43a047;

  margin: 25px 0;

  padding: 10px 20px;

  background: #f2f8f3;

}

.article-cta {

  margin-top: 45px;

  padding: 28px;

  border-radius: 16px;

  background: #14243a;

  color: #fff;

}

.article-cta a {

  display: inline-block;

  margin-top: 8px;

  background: #43a047;

  color: #fff;

  padding: 11px 15px;

  border-radius: 9px;

  text-decoration: none;

  font-weight: 800;

}

@media(max-width:600px) {

  .article-page {

    padding-top: 18px;

  }

  .article-container {

    width: min(100% - 20px, 1180px);

    padding: 24px 20px;

    border-radius: 16px;

  }

  .article-container h1 {

    font-size: clamp(2rem, 10vw, 2.7rem);

  }

  .article-page .article-content {

    font-size: 16px;

    line-height: 1.65;

  }

  .article-container>img,

  .article-container>picture,

  .article-container>picture img,

  .article-container .article-image,

  .article-container .featured-image,

  .article-container .article-featured-image,

  .article-container .blog-article-image {

    height: 230px;

    border-radius: 12px;

    margin: 18px 0 22px;

  }

  .article-container>picture img {

    margin: 0;

  }

  .article-content img {

    height: auto;

    margin: 18px auto 22px;

  }

}

.article-page .article-cta {

  background: linear-gradient(135deg, #eaf5ff 0%, #eef8f1 100%);

  color: #203047;

  border: 1px solid #cfe1ed;

  box-shadow: 0 10px 24px rgba(15, 76, 129, 0.08);

}

.article-page .article-cta h2 {

  color: #0f4c81;

  margin-top: 0;

}

.article-page .article-cta p {

  color: #40576d;

}

.article-page .article-cta a {

  background: #43a047;

  color: #ffffff;

}

.article-page .article-cta a:hover,

.article-page .article-cta a:focus {

  background: #34853a;

}

.article-comments {

  margin-top: 42px;

  padding-top: 34px;

  border-top: 1px solid #dfe6ee;

}

.comments-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 24px;

  margin-bottom: 20px;

}

.comments-heading h2 {

  margin: 10px 0 0;

  color: #17324d;

}

.comments-heading p {

  margin: 0;

  color: #687385;

}

.comment-message {

  padding: 14px 16px;

  border-radius: 10px;

  background: #eef8f1;

  border: 1px solid #c9e3cd;

  color: #286b30;

  margin-bottom: 18px;

}

.comments-empty {

  padding: 20px;

  background: #f6f8fb;

  border-radius: 12px;

  color: #687385;

}

.comment-list {

  display: grid;

  gap: 12px;

  margin-bottom: 28px;

}

.comment-item {

  padding: 18px 20px;

  border: 1px solid #dfe5ec;

  border-radius: 14px;

  background: #fff;

}

.comment-item.author-reply {

  margin-left: 36px;

  background: #eef7ff;

  border-color: #cbdfee;

}

.comment-meta {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 8px;

}

.comment-meta strong {

  color: #17324d;

}

.comment-meta span {

  color: #788391;

  font-size: .86rem;

}

.comment-item p {

  margin: 0;

  line-height: 1.55;

}

.comment-form {

  padding: 24px;

  border-radius: 16px;

  background: #f6f8fb;

  border: 1px solid #dfe5ec;

}

.comment-form h3 {

  margin-top: 0;

}

.comment-fields {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.comment-form label {

  display: block;

  font-weight: 700;

  color: #31445b;

  margin-bottom: 14px;

}

.comment-form label small {

  font-weight: 400;

}

.comment-form input,

.comment-form textarea {

  display: block;

  width: 100%;

  box-sizing: border-box;

  margin-top: 6px;

  border: 1px solid #cfd8e3;

  border-radius: 10px;

  padding: 11px 12px;

  font: inherit;

  background: #fff;

}

.comment-form button {

  border: 0;

  border-radius: 9px;

  padding: 11px 16px;

  background: #43a047;

  color: #fff;

  font-weight: 800;

  cursor: pointer;

}

.comment-honeypot {

  position: absolute !important;

  left: -9999px !important;

  width: 1px;

  height: 1px;

  overflow: hidden;

}

@media(max-width:600px) {

  .comments-heading,

  .comment-meta {

    display: block;

  }

  .comments-heading p,

  .comment-meta span {

    display: block;

    margin-top: 6px;

  }

  .comment-fields {

    grid-template-columns: 1fr;

  }

  .comment-item.author-reply {

    margin-left: 14px;

  }

  .comment-form {

    padding: 18px;

  }

}

/* ==================================================

   NEWSPAPER LAYOUT — BLOG HUB ONLY

   Main editorial column and independent advertising sidebar

   ================================================== */

.blog-hub {

  --hub-width: 1680px;

  --hub-gutter: 90%;

  --grid-gap: 18px;

  --card-padding: 18px;

  --featured-columns: 1.15fr 1fr;

  background: #f7f8fa;

}

.blog-hub .blog-hero {

  background: #fff;

  padding: 25px 0 23px;

  margin-bottom: 24px;

}

.blog-hub .blog-hero h1 {

  font-size: clamp(2.4rem, 4vw, 3.7rem);

  margin: 7px 0;

}

.blog-hub .blog-newspaper-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 320px;

  gap: clamp(24px, 3vw, 48px);

  align-items: start;

}

.blog-hub .blog-main-column {

  min-width: 0;

}

.blog-hub .blog-section-heading {

  margin-bottom: 12px;

}

.blog-hub .blog-featured {

  border-radius: 4px;

  background: #fff;

  color: var(--ink);

  border: 1px solid #e1e5eb;

  box-shadow: none;

  margin-bottom: 28px;

}

.blog-hub .blog-featured img {

  min-height: 320px;

  max-height: 450px;

}

.blog-hub .blog-featured-body {

  padding: clamp(18px, 2.2vw, 32px);

}

.blog-hub .blog-featured h2 {

  color: var(--ink);

  font-size: clamp(1.65rem, 2.4vw, 2.6rem);

  margin: 13px 0;

}

.blog-hub .blog-featured p {

  color: #50647a;

  font-size: .94rem;

  margin-bottom: 14px;

}

.blog-hub .blog-featured .blog-story-meta {

  color: #62758a;

  margin-bottom: 14px;

}

.blog-hub .blog-featured .blog-read-link {

  color: #07589d;

  border-bottom-color: #a9c2d8;

}

.blog-hub .blog-card {

  border-radius: 5px;

}

.blog-hub .blog-card h2 {

  font-size: clamp(1.08rem, 1.45vw, 1.4rem);

}

.blog-hub .blog-card p {

  font-size: .88rem;

}

.blog-hub .blog-card img {

  width: 100%;

}

.blog-hub .blog-latest-heading {

  border-top: 3px solid #102f49;

}

.blog-hub .blog-sidebar {

  min-width: 0;

  display: grid;

  gap: 24px;

}

.blog-hub .blog-side-panel {

  background: #fff;

  border: 1px solid #e0e6ed;

  padding: 18px;

}

.blog-hub .blog-side-label {

  font-size: .69rem;

  font-weight: 800;

  letter-spacing: .1em;

  color: #718195;

  margin-bottom: 12px;

}

.blog-hub .blog-ad-panel {

  padding: 10px;

}

.blog-hub .blog-ad-panel .blog-side-label {

  text-align: center;

  font-weight: 500;

  margin: 4px 0 9px;

}

.blog-hub .blog-ad-placeholder {

  min-height: 250px;

  background: #eef2f6;

  border: 1px dashed #cbd4df;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color: #69798a;

  text-align: center;

  padding: 20px;

}

.blog-hub .blog-ad-placeholder strong {

  font-size: 1.7rem;

  color: #40536a;

}

.blog-hub .blog-ad-placeholder small {

  max-width: 170px;

  line-height: 1.4;

}

.blog-hub .blog-ad-placeholder-tall {

  min-height: 460px;

}

.blog-hub .blog-tip-panel {

  border-top: 4px solid var(--green);

}

.blog-hub .blog-promo-panel {

  border-top: 4px solid var(--blue);

}

.blog-hub .blog-side-panel h2 {

  font-size: 1.3rem;

  line-height: 1.25;

  margin: 0 0 10px;

  color: var(--ink);

}

.blog-hub .blog-side-panel p {

  font-size: .9rem;

  line-height: 1.6;

  margin: 0;

  color: #53667a;

}

.blog-hub .blog-promo-panel a {

  display: inline-block;

  margin-top: 15px;

  font-size: .9rem;

  font-weight: 800;

  color: #07589d;

}

/* Large desktop: wider advertising sidebar */

@media (min-width: 1501px) {

  .blog-hub .blog-newspaper-layout {

    grid-template-columns: minmax(0, 1fr) 380px;

  }

}

@media (max-width: 1150px) {

  .blog-hub .blog-newspaper-layout {

    grid-template-columns: minmax(0, 1fr) 260px;

    gap: 22px;

  }

  .blog-hub .blog-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media (max-width: 850px) {

  .blog-hub .blog-newspaper-layout {

    grid-template-columns: minmax(0, 1fr);

  }

  .blog-hub .blog-sidebar {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media (max-width: 700px) {

  .blog-hub .blog-featured {

    grid-template-columns: 1fr;

  }

  .blog-hub .blog-featured img {

    min-height: 0;

    height: auto;

    aspect-ratio: 16/10;

  }

  .blog-hub .blog-grid {

    grid-template-columns: 1fr;

  }

  .blog-hub .blog-sidebar {

    grid-template-columns: 1fr;

  }

}

/* Article page: category and discussion pills */

.article-page .blog-pill {

  display: inline-block;

  padding: 7px 12px;

  border-radius: 999px;

  background: #f9e9eb;

  color: #a83240;

  font-size: .75rem;

  font-weight: 800;

  line-height: 1.3;

  vertical-align: middle;

}

.article-page .article-back {

  margin-right: 14px;

}

/* Article heading and author spacing */
.article-page .article-container h1 {
    margin-bottom: 4px;
}

.article-page .article-meta {
    display: block;
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 1.5;
}

.article-page .article-lede {
    margin-top: 0;
    margin-bottom: 24px;
}