/* Homepage-only layout and cards. Extracted from index.php. */
    /* Main news feature: a large lead story with two stacked supporting stories. */
    .main-news-feature {
      display: grid;
      grid-template-columns: minmax(0, 1.8fr) minmax(280px, .72fr);
      gap: 34px;
      align-items: start;
    }

    .main-news-lead {
      min-width: 0;
    }

    .main-news-lead-image {
      display: block;
      height: 455px;
      overflow: hidden;
      background: #eef1f4;
    }

    .main-news-lead-image img,
    .main-news-secondary-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease;
    }

    .main-news-lead:hover .main-news-lead-image img,
    .main-news-secondary:hover .main-news-secondary-image img {
      transform: scale(1.025);
    }

    .main-news-lead-copy {
      padding-top: 17px;
    }

    .main-news-topic {
      display: inline-block;
      margin-bottom: 7px;
      color: var(--red-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .main-news-lead h2 {
      margin: 0 0 10px;
      max-width: 780px;
      color: #0a0f17;
      font-size: 22px;
      line-height: 1.12;
      letter-spacing: -.7px;
    }

    .main-news-lead h2 a,
    .main-news-secondary h3 a {
      color: inherit;
      text-decoration: none;
    }

    .main-news-lead-copy > p:not(.main-news-meta) {
      margin: 0 0 10px;
      max-width: 760px;
      color: #566579;
      font-size: 14px;
      line-height: 1.65;
    }

    .main-news-meta {
      margin: 0;
      color: #8993a1;
      font-size: 11px;
      font-weight: 600;
    }

    .main-news-secondary-list {
      display: grid;
      gap: 26px;
      min-width: 0;
    }

    .main-news-secondary {
      min-width: 0;
    }

    .main-news-secondary-image {
      display: block;
      height: 156px;
      overflow: hidden;
      background: #eef1f4;
    }

    .main-news-secondary-copy {
      padding-top: 10px;
    }

    .main-news-secondary h3 {
      margin: 0 0 7px;
      color: #111827;
      font-size: 17px;
      line-height: 1.27;
      letter-spacing: -.18px;
    }

    .main-news-secondary-intro {
      display: -webkit-box;
      overflow: hidden;
      margin: 0 0 8px;
      color: #566579;
      font-size: 13px;
      line-height: 1.5;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .main-news-secondary-meta {
      margin: 0;
      color: var(--red-dark);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .main-news-secondary-meta time {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
    }

    .main-feature-bottom-grid {
      margin-top: 38px;
      padding-top: 30px;
      border-top: 1px solid var(--line);
    }

    .main-feature-bottom-grid .editorial-story {
      text-align: left;
    }

    .main-feature-bottom-grid .editorial-story h3 {
      margin-right: 0;
      margin-left: 0;
      text-align: left;
    }

    .main-feature-bottom-grid .editorial-intro {
      margin-right: 0;
      margin-left: 0;
      text-align: left;
    }

    .main-feature-bottom-grid .editorial-byline {
      display: block;
      margin: 0;
      padding: 0;
      border-top: 0;
      color: var(--red-dark);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      line-height: 1.4;
      text-transform: uppercase;
      text-align: left;
    }

    .home-category-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 22px;
      padding: 0 0 13px;
      border-bottom: 1px solid var(--line);
    }

    .home-category-heading-copy {
      min-width: 0;
      max-width: 790px;
      padding-left: 14px;
      border-left: 4px solid var(--red);
    }

    .home-category-heading h2 {
      margin: 0 0 5px;
      padding-left: 0;
      color: #0a0f17;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: -.4px;
    }

    .home-category-heading h2::before {
      display: none;
    }

    .home-category-description {
      margin: 0;
      color: #68768a;
      font-size: 13px;
      line-height: 1.6;
    }

    .home-category-heading > a {
      flex: 0 0 auto;
      padding-bottom: 3px;
      color: var(--red-dark);
      font-size: 12px;
      font-weight: 700;
    }

    .trending-home-section {
      padding-top: 42px;
    }

    .trending-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 34px 30px;
    }

    .trending-grid .editorial-story {
      min-width: 0;
    }

    .trending-grid .editorial-image {
      height: 190px;
    }

    .trending-grid .editorial-story h3 {
      margin-right: 4px;
      margin-left: 4px;
    }

    .trending-grid .editorial-byline time {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
    }

    .must-read-section {
      padding-top: 46px;
    }

    .must-read-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
      gap: 34px;
      align-items: start;
    }

    .must-read-lead {
      min-width: 0;
    }

    .must-read-lead-image {
      display: block;
      height: 365px;
      overflow: hidden;
      background: #eef1f4;
    }

    .must-read-lead-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .editors-picks-section .must-read-lead-image img,
    .editors-picks-section .must-read-mini-image img,
    .explainers-grid .explainer-image img {
      transition: transform .35s ease;
    }

    .editors-picks-section .must-read-lead:hover .must-read-lead-image img,
    .editors-picks-section .must-read-mini:hover .must-read-mini-image img,
    .explainers-grid .explainer-card:hover .explainer-image img {
      transform: scale(1.025);
    }

    .must-read-lead-copy {
      padding-top: 16px;
    }

    .must-read-label,
    .must-read-mini-label {
      color: var(--red-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .must-read-lead h3 {
      margin: 7px 0 9px;
      max-width: 760px;
      font-size: 28px;
      line-height: 1.18;
      letter-spacing: -.45px;
    }

    .must-read-lead h3 a,
    .must-read-mini h3 a {
      color: inherit;
      text-decoration: none;
    }

    .must-read-lead-copy > p:not(.must-read-meta) {
      margin: 0 0 10px;
      max-width: 760px;
      color: #58677a;
      font-size: 14px;
      line-height: 1.65;
    }

    .must-read-meta {
      margin: 0;
      color: #8a94a3;
      font-size: 11px;
      font-weight: 600;
    }

    .must-read-list {
      display: grid;
      gap: 0;
      min-width: 0;
    }

    .must-read-mini {
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      padding: 0 0 15px;
      margin: 0 0 15px;
      border-bottom: 1px solid var(--line);
    }

    .must-read-mini:last-child {
      margin-bottom: 0;
    }

    .must-read-mini-image {
      display: block;
      height: 86px;
      overflow: hidden;
      background: #eef1f4;
    }

    .must-read-mini-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .must-read-mini h3 {
      margin: 4px 0 6px;
      font-size: 15px;
      line-height: 1.32;
    }

    .must-read-mini time {
      color: #8a94a3;
      font-size: 10px;
      font-weight: 600;
    }

    .extra-home-section {
      padding-top: 46px;
    }

    .research-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 1120px;
      margin-right: auto;
      margin-left: auto;
    }

    .research-grid article {
      display: flex;
      min-height: 310px;
      flex-direction: column;
      transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .research-grid article:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 8px 18px rgba(16, 29, 48, .08) !important;
    }

    .research-card h3,
    .explainer-card h3 {
      font-family: inherit;
    }

    .home-purpose-link {
      display: flex;
      height: 100%;
      flex: 1;
      flex-direction: column;
      color: inherit;
      text-decoration: none;
    }

    .home-purpose-meta {
      display: inline-block;
      margin: -20px 0 13px;
      color: var(--red-dark);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .home-purpose-cta {
      margin-top: auto;
      padding-top: 4px;
      color: var(--red-dark);
      font-size: 12px;
      font-weight: 800;
    }

    .research-card h3 {
      margin: 0 0 9px;
      font-size: 17px;
      line-height: 1.35;
    }

    .research-card h3 a,
    .policy-watch-item h3 a,
    .explainer-card h3 a,
    .brief-item h3 a,
    .video-card h3 a {
      color: inherit;
      text-decoration: none;
    }

    .research-card p {
      margin: 0 0 8px;
      color: #68768a;
      font-size: 13px;
      line-height: 1.55;
    }

    .policy-watch-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 34px;
    }

    .policy-watch-item {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
    }

    .policy-watch-number {
      color: var(--red);
      font-size: 25px;
      font-weight: 800;
      line-height: 1;
    }

    .policy-watch-item h3 {
      margin: 0 0 6px;
      font-size: 17px;
      line-height: 1.32;
    }

    .policy-watch-item p {
      margin: 0;
      color: #748094;
      font-size: 12px;
      line-height: 1.5;
    }

    .quit-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }

    .quit-card {
      min-width: 0;
    }

    .quit-image {
      display: block;
      height: 205px;
      overflow: hidden;
      background: #eef1f4;
    }

    .quit-image img,
    .youth-lead-image img,
    .video-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease;
    }

    .quit-card:hover .quit-image img,
    .youth-lead:hover .youth-lead-image img,
    .video-card:hover .video-image img {
      transform: scale(1.025);
    }

    .quit-card h3 {
      margin: 12px 0 7px;
      font-size: 18px;
      line-height: 1.3;
    }

    .quit-card h3 a { color: inherit; text-decoration: none; }
    .quit-card p { margin: 0 0 8px; color: #68768a; font-size: 13px; line-height: 1.55; }
    .quit-card .editorial-byline { text-align: left; }

    .explainers-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 1120px;
      margin-right: auto;
      margin-left: auto;
    }

    .explainer-card h3 {
      margin: 0 0 8px;
      font-size: 17px;
      line-height: 1.35;
    }

    .explainer-card p { margin: 0 0 8px; color: #707c8e; font-size: 12px; line-height: 1.5; }

    .explainers-grid .explainer-card {
      min-height: 0;
      padding: 24px;
    }

    .explainer-card .explainer-image {
      display: block;
      aspect-ratio: 16 / 9;
      margin-bottom: 16px;
      overflow: hidden;
      border-radius: 4px;
      background: #eef1f4;
    }

    .explainer-card .explainer-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .explainer-card a { color: inherit; text-decoration: none; }
    .explainer-card a:hover { color: var(--red-dark); }

    .facts-explainer-grid .fact-metric-image {
      display: grid;
      place-items: center;
      background: #eef1f4;
    }

    .facts-explainer-grid .fact-metric-image span {
      color: var(--red-dark);
      padding: 0 8px;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1.12;
    }

    .facts-explainer-grid .fact-source {
      display: inline-block;
      margin-top: 2px;
      color: var(--red-dark);
      font-size: 11px;
      font-weight: 750;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .home-page main .home-card-byline {
      margin: 0;
      padding: 0;
      border: 0;
      color: var(--red-dark);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .11em;
      line-height: 1.4;
      text-transform: none;
    }

    .home-page main .home-card-byline time {
      color: inherit;
      font: inherit;
      text-transform: none;
      letter-spacing: normal;
    }

    .youth-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
      gap: 30px;
      align-items: start;
    }

    .youth-lead-image {
      display: block;
      height: 330px;
      overflow: hidden;
      background: #eef1f4;
    }

    .youth-lead h3 { margin: 13px 0 8px; font-size: 25px; line-height: 1.22; }
    .youth-lead h3 a { color: inherit; text-decoration: none; }
    .youth-lead p { margin: 0 0 8px; color: #68768a; font-size: 13px; line-height: 1.6; }
    .youth-list { display: grid; gap: 0; }
    .youth-list .must-read-mini { grid-template-columns: 110px minmax(0, 1fr); }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }

    .video-card { min-width: 0; }
    .video-image { position: relative; display: block; height: 210px; overflow: hidden; background: #eef1f4; }
    .video-play {
      position: absolute;
      left: 16px;
      bottom: 16px;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      font-size: 15px;
      box-shadow: 0 8px 20px rgba(0,0,0,.18);
    }
    .video-card h3 { margin: 12px 0 6px; font-size: 18px; line-height: 1.3; }
    .video-card p { margin: 0; color: #758094; font-size: 12px; line-height: 1.5; }
    .video-empty { padding: 26px 28px; border: 1px dashed #cfd5dd; background: #fafbfc; color: #68768a; font-size: 13px; line-height: 1.6; }

    .brief-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 34px;
    }

    .brief-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 12px;
      padding: 15px 0;
      border-bottom: 1px solid var(--line);
    }

    .brief-index { color: var(--red); font-size: 12px; font-weight: 800; padding-top: 2px; }
    .brief-item h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.35; }
    .brief-meta { margin: 0; color: #9099a6; font-size: 10px; font-weight: 600; text-transform: uppercase; }

    /* Consistent article-card typography and alignment across the homepage. */
    .home-page main article {
      text-align: left !important;
    }

    .home-page main article h2,
    .home-page main article h3 {
      color: #000000 !important;
      text-align: left !important;
    }

    .home-page main article h2 a,
    .home-page main article h3 a {
      color: #000000 !important;
      transition: none;
    }

    /* Keep article-title colour unchanged on hover. */
    .home-page main article h2 a:hover,
    .home-page main article h3 a:hover {
      color: #000000 !important;
    }

    /* Consistent article-title sizing. */
    .home-page main article h3 {
      font-size: 14px !important;
      font-weight: 700 !important;
    }

    .home-page main .main-news-lead h2 {
      font-size: 22px !important;
    }

    .home-page main article p,
    .home-page main article time {
      text-align: left !important;
    }

    .home-page main .editorial-story h3,
    .home-page main .editorial-intro,
    .home-page main .editorial-feature h3,
    .home-page main .editorial-feature .editorial-intro {
      margin-right: 0;
      margin-left: 0;
      text-align: left !important;
    }

    .home-page main .editorial-byline,
    .home-page main .main-news-meta,
    .home-page main .main-news-secondary-meta,
    .home-page main .must-read-meta,
    .home-page main .category-meta,
    .home-page main .blog-meta,
    .home-page main .brief-meta {
      justify-content: flex-start;
      text-align: left !important;
      padding-top: 0 !important;
      border-top: 0 !important;
    }

    .home-page main .editorial-byline {
      display: block;
      margin-top: 0;
    }

    /* Keep dates in normal title case even when their surrounding topic/meta text is uppercase. */
    .home-page main time {
      text-transform: none !important;
      letter-spacing: normal;
    }

    /* Match the National accent treatment on the older section-heading blocks too. */
    .home-page main .section-heading:not(.home-category-heading) {
      padding-left: 14px;
      border-left: 4px solid var(--red);
    }

    .home-page main .section-heading:not(.home-category-heading) h2 {
      font-size: 22px;
      line-height: 1.18;
    }

    @media (max-width: 899.98px) {
      .main-news-feature {
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
      }

      .main-news-lead-image {
        height: 390px;
      }

      .trending-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .must-read-layout {
        grid-template-columns: 1fr;
      }

      .must-read-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
      }

      .research-grid,
      .explainers-grid,
      .explore-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .youth-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 575.98px) {
      .main-news-feature {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .main-news-lead-image {
        height: 230px;
      }

      .main-news-lead h2 {
        font-size: 27px;
      }

      .main-news-secondary-list {
        grid-template-columns: 1fr;
      }

      .main-news-secondary-image {
        height: 210px;
      }

      .home-category-heading {
        align-items: flex-start;
      }

      .home-category-heading h2 {
        font-size: 22px;
      }

      .trending-grid {
        grid-template-columns: 1fr;
      }

      .trending-grid .editorial-image {
        height: 220px;
      }

      .must-read-lead-image {
        height: 230px;
      }

      .must-read-lead h3 {
        font-size: 23px;
      }

      .must-read-list {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .must-read-mini {
        grid-template-columns: 108px minmax(0, 1fr);
      }

      .must-read-mini-image {
        height: 76px;
      }

      .research-grid,
      .policy-watch-list,
      .quit-grid,
      .explainers-grid,
      .video-grid,
      .brief-grid,
      .explore-more-grid {
        grid-template-columns: 1fr;
      }

      .research-grid article,
      .explainers-grid article {
        min-height: 0;
      }

      .quit-image,
      .video-image {
        height: 220px;
      }

      .explore-more-image {
        height: 220px;
      }

      .youth-lead-image {
        height: 230px;
      }
    }


    /* Explore More: compact discovery shelf for the bottom of the homepage. */
    .explore-more-section {
      padding-top: 46px;
      padding-bottom: 42px;
    }

    .explore-more-heading {
      margin-bottom: 24px;
    }

    .explore-more-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px;
    }

    .explore-more-column {
      min-width: 0;
    }

    .explore-more-label {
      margin: 0 0 9px;
      color: var(--red-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .explore-more-image {
      display: block;
      height: 150px;
      overflow: hidden;
      border-radius: 7px;
      background: #eef1f4;
    }

    .explore-more-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease;
    }

    .explore-more-image:hover img {
      transform: scale(1.035);
    }

    .explore-more-column h3 {
      margin: 13px 0 7px;
      line-height: 1.35;
    }

    .explore-more-intro {
      display: -webkit-box;
      overflow: hidden;
      margin: 0 0 9px;
      color: #667386;
      font-size: 12px;
      line-height: 1.55;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .explore-more-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin: 0 0 14px;
      color: var(--red-dark);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.4;
    }

    .explore-more-meta time {
      color: var(--red-dark);
      font: inherit;
    }

    .explore-more-links {
      border-top: 1px solid var(--line);
    }

    .explore-more-links a {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 8px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: #303945;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
    }

    .explore-more-links a:last-child {
      border-bottom: 0;
    }

    .explore-more-links a:hover {
      color: #303945;
    }

    .explore-more-index {
      color: var(--red);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .03em;
      padding-top: 1px;
    }

    /* Keep every homepage heading black. */
    .home-page main h1,
    .home-page main h2,
    .home-page main h3,
    .home-page main h4,
    .home-page main h5,
    .home-page main h6,
    .home-page main h1 a,
    .home-page main h2 a,
    .home-page main h3 a,
    .home-page main h4 a,
    .home-page main h5 a,
    .home-page main h6 a,
    .home-page main h1 a:hover,
    .home-page main h2 a:hover,
    .home-page main h3 a:hover,
    .home-page main h4 a:hover,
    .home-page main h5 a:hover,
    .home-page main h6 a:hover {
      color: #000000 !important;
    }

    /* Final compact article-title typography. */
    .main-news-lead h2 {
      font-size: 22px !important;
      font-weight: 650 !important;
    }

    .home-page main article h3 {
      font-size: 14px !important;
      font-weight: 700 !important;
    }

    .home-page main article h2 a:hover,
    .home-page main article h3 a:hover {
      color: #000000 !important;
    }


    /* Topic labels link to their topic page without changing the current visual style. */
    .home-page .article-topic-link {
      color: inherit;
      text-decoration: none;
    }

    .home-page .article-topic-link:hover {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* Functional latest-news ticker while preserving the existing visual treatment. */
    .home-page .ticker p a {
      color: inherit;
      text-decoration: none;
      transition: opacity .18s ease;
    }

    .home-page .ticker p a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .home-page .ticker-controls button {
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: 1;
      padding: 0;
      margin: 0;
      cursor: pointer;
    }

    .home-page .ticker-controls button:hover,
    .home-page .ticker-controls button:focus-visible {
      opacity: .62;
    }