/* ==========================================================================
   The Ditible — portal layer ("yahoo-style")
   --------------------------------------------------------------------------
   Loaded LAST, after every other theme sheet. It restyles the existing markup
   into a portal layout: a clean white header with a pill search, a text
   sub-nav, a soft grey canvas with white rounded panels, an image-overlay lead
   story, a single-column "For you" stream with thumbnails, ranked rails, and a
   reading-first article page.

   It only uses the site's own tokens (--brand is the crimson set in the
   dashboard), so the accent and dark mode follow automatically.
   Remove the sp_register_style('theme-yahoo', ...) call in skin.php to
   switch the whole layer off.

     01. Tokens & base
     02. Header, search, sub-nav
     03. Panels & section heads
     04. Lead story (hero)
     05. Stream cards (feed)
     06. Right rail widgets
     07. Article page
     08. Footer
     09. Tablet / mobile
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap");

/* 01. Tokens & base ======================================================= */

:root {
  --yh-canvas: #f1f2f6;
  --yh-panel: #ffffff;
  --yh-ink: #1d2228;
  --yh-ink-2: #464e56;
  --yh-meta: #6e7780;
  --yh-hair: #e0e4e9;
  --yh-radius: 16px;
  --yh-radius-sm: 10px;
  --yh-shadow: 0 1px 2px rgba(15, 20, 30, 0.04), 0 2px 10px rgba(15, 20, 30, 0.04);
  --yh-header: 64px;
  --container: 1280px;
}

[data-theme="dark"] {
  --yh-canvas: #101216;
  --yh-panel: #1a1d22;
  --yh-ink: #eef0f3;
  --yh-ink-2: #c3c8cf;
  --yh-meta: #959ca5;
  --yh-hair: #2b2f36;
  --yh-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body {
  background: var(--yh-canvas);
  color: var(--yh-ink);
}

/* 02. Header, search, sub-nav ============================================= */

.site-header {
  position: sticky;
  top: 0;
  background: var(--yh-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--yh-hair);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.site-header .header-inner {
  min-height: var(--yh-header);
  gap: 28px;
}

.site-header .brand-logo {
  height: 30px;
  width: auto;
}

/* Search: a wide pill with a soft accent ring and a round accent button. */
.site-header .search {
  flex: 1 1 auto;
  max-width: 680px;
}

.site-header .search__field {
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--brand) 38%, var(--yh-hair));
  background: var(--yh-panel);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 6%, transparent);
  padding: 0 4px 0 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-header .search__field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 16%, transparent);
}

.site-header .search__icon {
  display: none;
}

.site-header .search__input {
  font-size: 15.5px;
  color: var(--yh-ink);
}

.site-header .search__input::placeholder {
  color: var(--yh-meta);
}

.site-header .search__submit {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}

.site-header .search__submit:hover {
  background: var(--brand-hover);
}

.site-header .search__submit span {
  display: none;
}

.site-header .search__submit svg {
  width: 18px;
  height: 18px;
}

.site-header .icon-btn {
  color: var(--yh-ink-2);
}

.site-header .icon-btn:hover {
  background: color-mix(in oklab, var(--yh-ink) 6%, transparent);
  color: var(--yh-ink);
}

/* Sub-nav: plain text links with an accent underline on the current page,
   instead of a row of pills. */
.cat-rail {
  background: var(--yh-panel);
  border-top: 1px solid var(--yh-hair);
  border-bottom: 0;
}

.cat-rail .cat-rail__scroll {
  gap: 2px;
  padding-block: 0;
}

.cat-rail .cat-pill {
  position: relative;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--yh-ink-2);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.cat-rail .cat-pill:hover {
  background: transparent;
  color: var(--brand);
}

.cat-rail .cat-pill[aria-current="page"],
.cat-rail .cat-pill.active {
  background: transparent;
  color: var(--yh-ink);
  font-weight: 800;
}

.cat-rail .cat-pill[aria-current="page"]::after,
.cat-rail .cat-pill.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}

/* 03. Panels & section heads ============================================== */

#content {
  padding-top: 18px;
}

/* Every major block reads as a white rounded panel on the grey canvas. */
.hero,
.daily,
.spotlight,
.widget,
.section--topics,
.home .layout > div > .section,
.cal-teaser__card {
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
}

.home .layout {
  padding-block: 20px 48px;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.home .layout > div > .section {
  padding: 22px 24px 8px;
}

/* The search section wraps its own widget panel: show one panel, not two. */
.home .layout > div > .section--search {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  margin-bottom: 20px;
}

.home .layout > div > .section--search .widget {
  padding: 16px 20px;
}

.section--search .search__field {
  border-radius: 999px;
}

.section--topics {
  padding: 22px 24px;
  margin-bottom: 40px;
}

.section-head {
  margin-bottom: 14px;
}

.section-head__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--yh-ink);
}

.section-head__rule {
  display: none;
}

.section-head__link {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
}

.results-note {
  font-size: 12.5px;
  color: var(--yh-meta);
  margin-bottom: 4px;
}

.hero-wrap {
  margin-bottom: 20px;
}

/* 04. Lead story (hero) =================================================== */

.hero {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 24px;
  padding: 16px;
}

.hero .hero__lead {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 420px;
  background: #111;
}

.hero .hero__lead .card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.hero .hero__lead .card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero__lead:hover .card__img {
  transform: scale(1.03);
}

.hero .hero__lead .card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 120px 26px 24px;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.86) 100%);
  color: #fff;
}

.hero .hero__lead .card__title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #fff;
  -webkit-line-clamp: 3;
}

.hero .hero__lead .card__title a {
  color: #fff;
}

.hero .hero__lead .card__title a::after {
  border-radius: 14px;
}

.hero .hero__lead .card__excerpt {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  -webkit-line-clamp: 2;
}

.hero .hero__lead .card__meta,
.hero .hero__lead .meta-item,
.hero .hero__lead .source-chip,
.hero .hero__lead .source-chip__name {
  color: rgba(255, 255, 255, 0.9);
}

.hero .hero__lead .source-chip__logo {
  background: #fff;
  border-radius: 50%;
}

/* The rail: "Top stories" style list with thumbnails on the left. */
.hero .hero__rail {
  border-left: 0;
  padding: 6px 4px 6px 0;
  justify-content: space-between;
}

.hero .hero__rail .card--compact {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.hero .hero__rail .card--compact + .card--compact {
  border-top: 1px solid var(--yh-hair);
  padding-top: 14px;
  margin-top: 14px;
}

.hero .hero__rail .card__media {
  width: 118px;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--yh-radius-sm);
}

.hero .hero__rail .card__body {
  gap: 6px;
}

.hero .hero__rail .card__title {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.28;
  -webkit-line-clamp: 3;
}

.hero .hero__rail .source-chip--author {
  display: none;
}

/* 05. Stream cards (feed) ================================================= */

/* One story per row: thumbnail on the left, category label, heavy headline,
   one line of excerpt, source and time. */
.feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feed > .card,
.feed .card:not(.card--compact) {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "img cat"
    "img body";
  column-gap: 20px;
  row-gap: 2px;
  padding: 18px 0;
  border-bottom: 1px solid var(--yh-hair);
}

.feed > .card:last-child {
  border-bottom: 0;
}

.feed .card:not(.card--compact) .card__media {
  display: contents;
}

.feed .card:not(.card--compact) .card__img {
  grid-area: img;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface-2);
}

.feed .card:hover .card__img {
  transform: none;
  filter: brightness(0.94);
}

/* The category leaves the photo and becomes the accent kicker above the
   headline. */
.feed .card:not(.card--compact) .card__cat {
  grid-area: cat;
  position: static;
  justify-self: start;
  align-self: end;
  padding: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  z-index: 3;
}

.feed .card:not(.card--compact) .card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Title first, then excerpt, then source + time on one meta line. */
.feed .card .card__title {
  order: 1;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--yh-ink);
  -webkit-line-clamp: 3;
}

.feed .card .card__title a:hover {
  color: var(--brand);
  text-decoration: none;
}

.feed .card .card__excerpt {
  order: 2;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--yh-ink-2);
  -webkit-line-clamp: 2;
}

.feed .card .card__chips {
  order: 3;
  margin-top: 4px;
}

.feed .card .card__meta {
  order: 4;
}

.feed .card .source-chip__name,
.feed .card .card__meta,
.feed .card .meta-item {
  font-size: 12.5px;
  color: var(--yh-meta);
  font-weight: 500;
}

.feed .card .source-chip:not(.source-chip--author) .source-chip__name {
  color: var(--yh-ink-2);
  font-weight: 700;
}

.load-more {
  padding: 18px 0 14px;
}

/* 06. Right rail widgets =================================================== */

.sidebar {
  gap: 20px;
}

.sidebar .widget {
  padding: 18px 20px;
}

.widget__head {
  margin-bottom: 12px;
  padding-bottom: 0;
  border: 0;
}

.widget__head svg {
  color: var(--brand);
}

.widget__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--yh-ink);
}

/* Trending: numbered rows, the number in a small outlined square. */
.q-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--yh-hair);
}

.q-list li:last-child {
  border-bottom: 0;
}

.q-list__rank {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--yh-ink);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--yh-ink);
  background: transparent;
}

.q-list li:nth-child(-n + 3) .q-list__rank {
  border-color: var(--brand);
  color: var(--brand);
}

.q-list a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--yh-ink);
  text-transform: capitalize;
}

.q-list a:hover {
  color: var(--brand);
}

.sidebar .card--compact .card__title,
.sidebar .pop-list .card__title {
  font-weight: 700;
}

/* Popular list in the article rail: small square thumb, headline, one meta
   line that never wraps word by word. */
.sidebar .card--compact {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sidebar .card--compact:has(.card__rank) {
  grid-template-columns: 20px 64px minmax(0, 1fr);
}

.sidebar .card--compact .card__media {
  width: 64px;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 10px;
}

.sidebar .card--compact .card__title {
  font-size: 14.5px;
  line-height: 1.3;
  -webkit-line-clamp: 3;
}

.sidebar .card--compact .card__meta {
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 12px;
}

.sidebar .card--compact .card__meta .meta-item + .meta-item {
  display: none;
}

.sidebar .card__rank {
  color: var(--brand);
  font-weight: 800;
}

/* 07. Article page ========================================================== */

/* The reading page is a single white sheet, as on a portal article. */
body:has(.article) {
  background: var(--yh-panel);
}

body:has(.article) #content > .container {
  max-width: 1200px;
}

body:has(.article) .layout {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  padding-block: 8px 56px;
}

body:has(.article) .layout > div {
  max-width: 780px;
}

.crumbs {
  padding-top: 6px;
  font-size: 12.5px;
}

.crumbs .breadcrumb-item.active {
  display: none;
}

.crumbs a {
  color: var(--yh-meta);
  font-weight: 600;
}

.article .article__head {
  gap: 14px;
  margin-bottom: 20px;
}

.article .article__cat {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: 0;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.article .article__title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--yh-ink);
}

.article .article__byline {
  padding: 14px 0;
  border-top: 1px solid var(--yh-hair);
  border-bottom: 1px solid var(--yh-hair);
  gap: 12px;
  align-items: center;
}

.article .byline__avatar {
  border-radius: 50%;
  border: 1px solid var(--yh-hair);
  background: #fff;
}

.article .byline__name,
.article .byline__name a {
  font-weight: 800;
  color: var(--yh-ink);
}

.article .byline__author,
.article .byline__meta {
  font-size: 13px;
  color: var(--yh-meta);
}

.article .byline__author a {
  color: var(--yh-ink-2);
  font-weight: 600;
}

.article .follow-btn {
  margin-left: auto;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  background: transparent;
  font-weight: 700;
}

.article .follow-btn[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
}

.article .article__hero {
  margin: 0 0 26px;
}

.article .article__hero img {
  width: 100%;
  border-radius: 12px;
}

.article .photo-credit {
  margin-top: 8px;
  font-size: 12px;
  color: var(--yh-meta);
}

.article .article__body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--yh-ink);
}

.article .article__body p {
  margin-bottom: 1.15em;
}

.article .article__body h2,
.article .article__body h3 {
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin: 1.6em 0 0.6em;
  color: var(--yh-ink);
}

.article .article__body h2 {
  font-size: 25px;
}

.article .article__body h3 {
  font-size: 21px;
}

.article .article__body a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article .article__body img {
  border-radius: 10px;
}

.article .article__body blockquote {
  border-left: 4px solid var(--brand);
  padding: 4px 0 4px 18px;
  font-size: 20px;
  font-weight: 600;
  color: var(--yh-ink-2);
}

/* "Read the original" becomes a soft accent callout. */
.article .read-original {
  border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--yh-hair));
  background: color-mix(in oklab, var(--brand) 5%, var(--yh-panel));
  border-radius: 14px;
  padding: 16px 18px;
}

.article .read-original .btn--brand {
  border-radius: 999px;
}

.article .article__note {
  border-radius: 12px;
  background: var(--yh-canvas);
  border: 0;
  font-size: 13px;
  color: var(--yh-meta);
}

.article .action-bar {
  border-radius: 999px;
}

.article .share-btn {
  border-radius: 999px;
}

/* Article right rail: light panels, ranked list. */
body:has(.article) .sidebar .widget {
  background: var(--yh-panel);
  box-shadow: none;
}

body:has(.article) .sidebar {
  position: sticky;
  top: calc(var(--yh-header) + 56px);
}

/* Related stories under the article use the stream treatment too. */
body:has(.article) .section .feed .card .card__title {
  font-size: 19px;
}

/* 08. Footer ================================================================ */

.site-footer {
  background: var(--yh-panel);
  border-top: 1px solid var(--yh-hair);
}

.footer-title {
  font-weight: 800;
  color: var(--yh-ink);
}

.footer-links a {
  color: var(--yh-ink-2);
}

.footer-links a:hover {
  color: var(--brand);
}

/* 09. Tablet / mobile ======================================================= */

@media (max-width: 1080px) {
  .home .layout,
  body:has(.article) .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body:has(.article) .layout > div {
    max-width: none;
  }

  body:has(.article) .sidebar {
    position: static;
  }

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

  .hero .hero__rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    padding: 0;
  }

  .hero .hero__rail .card--compact + .card--compact {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .site-header .header-inner {
    gap: 10px 12px;
    padding-block: 10px;
  }

  .site-header .search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
  }

  .site-header .search__field {
    height: 44px;
  }
}

@media (max-width: 720px) {
  #content {
    padding-top: 12px;
  }

  .site-header .brand-logo {
    height: 26px;
  }

  .cat-rail .cat-pill {
    height: 40px;
    padding: 0 10px;
    font-size: 13.5px;
  }

  /* Lead: shorter overlay, rail as a stacked list with small thumbnails. */
  .hero {
    padding: 10px;
    gap: 14px;
    border-radius: 14px;
  }

  .hero .hero__lead {
    min-height: 0;
    aspect-ratio: 4 / 3.4;
  }

  .hero .hero__lead .card__body {
    padding: 80px 16px 16px;
  }

  .hero .hero__lead .card__title {
    font-size: 22px;
  }

  .hero .hero__lead .card__excerpt {
    display: none;
  }

  .hero .hero__rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 4px 4px;
  }

  .hero .hero__rail .card--compact {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .hero .hero__rail .card--compact + .card--compact {
    border-top: 1px solid var(--yh-hair);
    padding-top: 12px;
    margin-top: 12px;
  }

  .hero .hero__rail .card__media {
    width: 96px;
    order: 2;
  }

  .hero .hero__rail .card__body {
    order: 1;
  }

  .hero .hero__rail .card__title {
    font-size: 15px;
  }

  .home .layout > div > .section,
  .section--topics {
    padding: 16px 14px 4px;
    border-radius: 14px;
  }

  /* Stream: text on the left, square thumbnail on the right. */
  .feed > .card,
  .feed .card:not(.card--compact) {
    grid-template-columns: minmax(0, 1fr) 104px;
    grid-template-areas:
      "cat img"
      "body img";
    column-gap: 14px;
    padding: 14px 0;
  }

  .feed .card:not(.card--compact) .card__img {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }

  .feed .card .card__title {
    font-size: 16.5px;
    line-height: 1.28;
  }

  .feed .card .card__excerpt {
    display: none;
  }

  .feed .card .source-chip--author {
    display: none;
  }

  .sidebar .widget {
    padding: 16px;
  }

  /* Article */
  .article .article__title {
    font-size: 27px;
    line-height: 1.2;
  }

  .article .article__head {
    gap: 10px;
  }

  .article .article__hero {
    margin-inline: calc(var(--gutter, 16px) * -1);
  }

  .article .article__hero img {
    border-radius: 0;
  }

  .article .photo-credit {
    padding-inline: 16px;
  }

  .article .article__body {
    font-size: 17px;
    line-height: 1.7;
  }

  .article .article__body h2 {
    font-size: 21px;
  }

  .article .follow-btn {
    padding: 6px 12px;
  }
}

/* ==========================================================================
   10. Portal shell (3-column templates: home-yh3, category-yh3, single-yh3)
   ========================================================================== */

.yh-portal #content {
  padding-top: 0;
}

.yh-portal .container,
.yh-header .container {
  max-width: 1280px;
}

/* --- Header ------------------------------------------------------------- */

.yh-header .header-inner {
  gap: 22px;
}

.yh-header .search {
  max-width: 620px;
}

.yh-burger {
  display: none;
  margin-left: -8px;
}

.yh-header .header-actions > a.icon-btn[href*="/sources"] {
  display: none;
}

.yh-topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: none;
}

.yh-topnav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--yh-ink-2);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.yh-topnav__link::-webkit-details-marker {
  display: none;
}

.yh-topnav__link:hover {
  color: var(--brand);
}

.yh-topnav__link[aria-current="page"] {
  color: var(--yh-ink);
  font-weight: 800;
}

.yh-topnav__link svg {
  width: 15px;
  height: 15px;
}

.yh-header .header-actions {
  margin-left: 6px;
}

.yh-more {
  position: relative;
}

.yh-more[open] > summary {
  color: var(--brand);
}

.yh-more__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: 240px;
  max-height: 70vh;
  overflow: auto;
  padding: 8px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 20, 30, 0.14);
  display: flex;
  flex-direction: column;
}

.yh-more__panel a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--yh-ink);
}

.yh-more__panel a:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  color: var(--brand);
}

.yh-more__sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--yh-hair);
}

/* The homepage has the Explore rail, so it drops the section rail on wide
   screens, as a portal front page does. */
@media (min-width: 1081px) {
  .yh-portal--home .cat-rail {
    display: none;
  }
}

/* --- Drawer -------------------------------------------------------------- */

.yh-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.yh-drawer[hidden] {
  display: none;
}

.yh-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.yh-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(86vw, 340px);
  overflow-y: auto;
  background: var(--yh-panel);
  padding: 12px 16px 32px;
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.yh-drawer.is-open .yh-drawer__scrim {
  opacity: 1;
}

.yh-drawer.is-open .yh-drawer__panel {
  transform: none;
}

.yh-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

.yh-drawer__head .brand-logo {
  height: 26px;
}

.yh-drawer .yh-explore {
  border: 0;
  box-shadow: none;
  padding: 0;
}

html.yh-lock {
  overflow: hidden;
}

/* --- Leaderboard band and tiles ----------------------------------------- */

.yh-adband {
  background: color-mix(in oklab, var(--yh-ink) 5%, var(--yh-canvas));
  padding: 14px 0;
  text-align: center;
}

.yh-adband .ad-slot {
  margin: 0 auto;
}

.yh-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.yh-tiles .cal-teaser {
  display: contents;
}

.yh-tiles .cal-teaser__card,
.yh-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 74px;
  padding: 10px 14px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: 12px;
  box-shadow: var(--yh-shadow);
  color: var(--yh-ink);
  transition: border-color 0.15s ease;
}

.yh-tiles .cal-teaser__card:hover,
.yh-tile:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--yh-hair));
}

.yh-tiles .cal-teaser__go {
  display: none;
}

.yh-tiles .cal-teaser__ico,
.yh-tile__ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in oklab, var(--brand) 9%, transparent);
  color: var(--brand);
}

.yh-tile__ico svg {
  width: 20px;
  height: 20px;
}

.yh-tiles .cal-teaser__body,
.yh-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.yh-tiles .cal-teaser__label,
.yh-tile__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--yh-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yh-tiles .cal-teaser__big,
.yh-tile__title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--yh-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.yh-tile__title--cap {
  text-transform: capitalize;
}

.yh-tiles .cal-teaser__np {
  font-size: 12px;
  color: var(--brand);
}

.yh-tiles .cal-teaser__meta {
  display: none;
}

/* --- The three columns --------------------------------------------------- */

.yh3 {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  grid-template-areas: "left main right";
  gap: 20px;
  align-items: start;
  padding: 16px 0 48px;
}

.yh3__left {
  grid-area: left;
  min-width: 0;
}

.yh3__main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.yh3__right {
  grid-area: right;
  min-width: 0;
}

.yh3 .yh3__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: static;
}

.yh3 .widget {
  margin: 0;
  padding: 16px 18px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
}

.yh3 .ad-slot {
  margin: 0;
}

.yh3 .section--search {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.yh3 .section--search .widget__head {
  display: none;
}

/* --- Explore list -------------------------------------------------------- */

.yh-explore__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yh-explore__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--yh-ink);
}

.yh-explore__link:hover {
  background: color-mix(in oklab, var(--brand) 6%, transparent);
  color: var(--brand);
}

.yh-explore__link[aria-current="page"] {
  color: var(--brand);
  font-weight: 800;
}

.yh-explore__ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  color: var(--brand);
}

.yh-explore__ico svg {
  width: 17px;
  height: 17px;
}

.yh-explore__sub {
  margin: 12px 4px 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yh-meta);
}

/* --- Topic lists in the rail -------------------------------------------- */

.yh-topic .topic {
  border: 0;
  padding: 0;
  background: none;
}

.yh-topic .topic__head {
  margin-bottom: 6px;
  padding: 0;
  border: 0;
}

.yh-topic .topic__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.yh-topic .topic__more {
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
}

.yh-topic .topic-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--yh-hair);
}

.yh-topic .topic-item__logo {
  display: none;
}

.yh-topic .topic-item__thumb {
  grid-column: 1;
  grid-row: 1;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.yh-topic .topic-item__body {
  grid-column: 2;
  grid-row: 1;
}

.yh-topic .topic-item:not(:has(.topic-item__thumb)) .topic-item__body {
  grid-column: 1 / -1;
}

.yh-topic .topic-item__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.yh-topic .topic-item__title a:hover {
  color: var(--brand);
}

.yh-topic .topic-item__meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--yh-meta);
}

/* --- Lead carousel -------------------------------------------------------- */

.yh-top {
  padding: 12px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
}

.yh-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}

.yh-hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.yh-hero__track::-webkit-scrollbar {
  display: none;
}

.yh-hero__slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 9.4;
  scroll-snap-align: start;
  overflow: hidden;
}

.yh-hero__media {
  position: absolute;
  inset: 0;
}

.yh-hero__media .card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.yh-hero__slide:hover .card__img {
  transform: scale(1.03);
}

.yh-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 90px 110px 20px 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.88) 100%);
}

.yh-hero__title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.yh-hero__title a {
  color: #fff;
}

.yh-hero__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.yh-hero__body .source-chip,
.yh-hero__body .source-chip__name,
.yh-hero__body .card__meta,
.yh-hero__body .meta-item {
  color: rgba(255, 255, 255, 0.92);
}

.yh-hero__body .source-chip__name {
  font-weight: 700;
}

.yh-hero__body .source-chip__logo {
  background: #fff;
  border-radius: 50%;
}

.yh-hero__count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.yh-hero__nav {
  position: absolute;
  right: 14px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  gap: 8px;
}

.yh-hero__btn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.yh-hero__btn:hover {
  background: var(--brand);
}

.yh-hero__btn svg {
  width: 18px;
  height: 18px;
}

.yh-hero--single .yh-hero__body {
  padding-right: 22px;
}

/* Three-up row under the lead. */
.yh-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.yh-row .card--compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  margin: 0;
}

.yh-row .card--compact .card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 10px;
}

.yh-row .card--compact .card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yh-row .card--compact .card__title {
  order: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-line-clamp: 3;
}

.yh-row .card--compact .card__chips {
  order: 2;
}

.yh-row .card--compact .card__meta {
  order: 3;
  font-size: 12px;
}

.yh-row .source-chip--author {
  display: none;
}

.yh-row .source-chip__name {
  font-size: 12.5px;
  color: var(--yh-meta);
}

/* --- Stream panel -------------------------------------------------------- */

.yh3__stream {
  margin: 0;
  padding: 16px 20px 8px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
}

.yh-stream-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}

.yh-stream-head__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--yh-ink);
}

.yh-stream-head__link,
.yh-stream-head__note {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

.yh-stream-head__note {
  color: var(--yh-meta);
  font-weight: 600;
}

.yh-stream-head__link svg {
  width: 15px;
  height: 15px;
}

.yh3__main .feed > .card,
.yh3__main .feed .card:not(.card--compact) {
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 16px;
  padding: 14px 0;
}

.yh3__main .feed .card .card__title {
  font-size: 19px;
  line-height: 1.24;
}

.yh3__main .feed .card .card__excerpt {
  -webkit-line-clamp: 1;
  font-size: 14px;
}

.yh3__main .feed .card .source-chip--author {
  display: none;
}

.yh3__main .results-note {
  padding: 4px 0 10px;
  text-align: center;
}

.yh3__main .spotlight {
  margin: 0;
}

/* --- Section front head --------------------------------------------------- */

.yh-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 16px 20px 18px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
}

.yh-section-head .crumbs {
  grid-column: 1 / -1;
  padding: 0 0 10px;
  margin: 0;
}

.yh-section-head__ico {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
}

.yh-section-head__ico svg {
  width: 26px;
  height: 26px;
}

.yh-section-head__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--yh-ink);
}

.yh-section-head__desc {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--yh-ink-2);
}

/* --- Article ribbon ------------------------------------------------------- */

.yh-ribbon {
  background: var(--yh-panel);
  border-bottom: 1px solid var(--yh-hair);
}

.yh-ribbon__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
}

.yh-ribbon__label {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--yh-ink);
}

.yh-ribbon__scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}

.yh-ribbon__scroll::-webkit-scrollbar {
  display: none;
}

.yh-ribbon__link {
  flex: none;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yh-ink-2);
  white-space: nowrap;
  border-left: 1px solid var(--yh-hair);
}

.yh-ribbon__link:first-child {
  padding-left: 0;
  border-left: 0;
}

.yh-ribbon__link:hover {
  color: var(--brand);
}

.yh-article-shell .crumbs {
  padding-top: 14px;
}

.yh-article-rail .widget {
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
}

/* --- Portal responsive ---------------------------------------------------- */

@media (max-width: 1279px) {
  .yh3 {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "main right"
      "main left";
    grid-template-rows: auto 1fr;
  }

  .yh-topnav__link:not(summary) {
    display: none;
  }
}

@media (max-width: 1180px) {
  .yh-burger {
    display: inline-flex;
  }
}

@media (max-width: 1080px) {
  .yh3 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "right"
      "left";
    grid-template-rows: none;
  }

  .yh-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .yh-tiles::-webkit-scrollbar {
    display: none;
  }

  .yh-tiles > * {
    scroll-snap-align: start;
  }

  .yh-topnav {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Mobile header: menu left, logo centred, account right, search below. */
  .yh-header .header-inner {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "burger brand actions"
      "search search search";
    align-items: center;
  }

  .yh-header .yh-burger {
    grid-area: burger;
  }

  .yh-header .brand {
    grid-area: brand;
    justify-self: center;
  }

  .yh-header .header-actions {
    grid-area: actions;
    margin: 0;
  }

  .yh-header .search {
    grid-area: search;
  }
}

@media (max-width: 720px) {
  .yh-shell {
    padding-inline: 12px;
  }

  .yh-tiles {
    grid-auto-columns: 78%;
    gap: 10px;
    margin-top: 12px;
  }

  .yh3 {
    gap: 14px;
    padding-top: 12px;
  }

  .yh3__main {
    gap: 14px;
  }

  .yh-top {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .yh-hero__slide {
    aspect-ratio: 4 / 3.3;
  }

  .yh-hero__body {
    padding: 70px 16px 16px;
  }

  .yh-hero__title {
    font-size: 21px;
  }

  .yh-hero__nav {
    display: none;
  }

  .yh-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 64%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .yh-row::-webkit-scrollbar {
    display: none;
  }

  .yh-row .card--compact {
    scroll-snap-align: start;
  }

  .yh3__stream {
    padding: 14px 14px 4px;
  }

  /* Phone stream: thumbnail on the left, as the portal app does. */
  .yh3__main .feed > .card,
  .yh3__main .feed .card:not(.card--compact) {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "img cat"
      "img body";
    column-gap: 12px;
  }

  .yh3__main .feed .card:not(.card--compact) .card__img {
    aspect-ratio: 1 / 1.05;
  }

  .yh3__main .feed .card .card__title {
    font-size: 16px;
  }

  .yh-section-head__title {
    font-size: 26px;
  }

  .yh-section-head__ico {
    width: 40px;
    height: 40px;
  }
}

/* Rails grow with their content: no viewport height cap, no inner scroll. */
.yh3 .sidebar,
.yh3 .yh3__stack {
  position: static;
  max-height: none;
  overflow: visible;
}

.yh3 .sidebar > .widget {
  position: static;
}

/* Spotlight shelf in the narrower centre column: fewer, wider cards. */
.yh3__main .spotlight {
  --spot-cols: 3.4;
}

@media (max-width: 720px) {
  .yh3__main .spotlight {
    --spot-cols: 2.3;
  }
}

/* The calendar cards sit inside a display:contents wrapper, so they need
   their own snap point or the strip opens scrolled past them. */
.yh-tiles .cal-teaser__card {
  scroll-snap-align: start;
}

/* Article rail: grows with its content like the portal rails. */
.yh-article-rail {
  max-height: none;
  overflow: visible;
}

.yh-article-rail > .widget {
  position: static;
}

/* Spotlight shelf as a panel: inner padding on every side, and the rail kept
   inside the card. The rail's own 4px bleed (room for focus rings) stays,
   but the panel clips anything past its rounded edge. */
.spotlight {
  padding: 18px 20px 16px;
  overflow: hidden;
}

.spotlight .spotlight__head {
  margin-bottom: 12px;
}

.spotlight .spotlight__tabs {
  padding-bottom: 12px;
}

.spotlight .spotlight__rail {
  padding-bottom: 4px;
}

@media (max-width: 720px) {
  .spotlight {
    padding: 14px 14px 12px;
  }
}

/* ==========================================================================
   11. Inner pages (archive, search, sources, source, journalist(s), for you,
       following, today, the daily): Explore rail | page | its own sidebar
   ========================================================================== */

.yh-portal-inner .container,
body:has(.yh-3col) .container {
  max-width: 1280px;
}

.layout.yh-3col {
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 20px;
  padding-block: 18px 48px;
}

.layout.yh-3col.layout--full,
.layout.yh-3col:not(:has(> .sidebar)) {
  grid-template-columns: 260px minmax(0, 1fr);
}

/* Without the rail (portal switched off) the layout keeps its old columns. */
.layout.yh-3col:not(:has(> .yh3__left)) {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.layout.yh-3col.layout--full:not(:has(> .yh3__left)) {
  grid-template-columns: minmax(0, 1fr);
}

.layout.yh-3col > .sidebar {
  position: static;
  max-height: none;
  overflow: visible;
}

.layout.yh-3col > .sidebar > .widget {
  position: static;
}

.yh-inner-left .yh-explore {
  padding: 14px 14px;
}

.yh-inner-left .yh-explore__link {
  font-size: 14px;
  padding: 5px 4px;
}

/* Listings in the middle column read as one white panel, like the portal
   stream. */
.layout.yh-3col > div > .section:has(> .feed),
.layout.yh-3col > div > section.section:has(.feed) {
  padding: 16px 20px 8px;
  background: var(--yh-panel);
  border: 1px solid var(--yh-hair);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
}

.layout.yh-3col .feed > .card,
.layout.yh-3col .feed .card:not(.card--compact) {
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 16px;
}

.layout.yh-3col .feed .card .card__title {
  font-size: 19px;
}

.layout.yh-3col .feed .card .card__excerpt {
  -webkit-line-clamp: 1;
}

/* Page heroes become a compact white band under the header. */
.page-hero {
  background: var(--yh-panel);
  border-bottom: 1px solid var(--yh-hair);
  padding-block: 20px 18px;
}

.page-hero .container {
  max-width: 1280px;
}

.page-hero__eyebrow {
  color: var(--brand);
  font-weight: 800;
}

.page-hero__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--yh-ink);
}

/* Grids that sat in a full-width page (sources, journalists, following) get
   a little less room now; let them reflow. */
.layout.yh-3col .src-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

@media (max-width: 1279px) {
  /* The Explore list lives in the header drawer below this width. */
  .layout.yh-3col > .yh3__left {
    display: none;
  }

  .layout.yh-3col {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .layout.yh-3col.layout--full,
  .layout.yh-3col:not(:has(> .sidebar)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .layout.yh-3col {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .page-hero__title {
    font-size: 26px;
  }

  .layout.yh-3col > div > .section:has(> .feed),
  .layout.yh-3col > div > section.section:has(.feed) {
    padding: 14px 14px 4px;
  }

  .layout.yh-3col .feed > .card,
  .layout.yh-3col .feed .card:not(.card--compact) {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "img cat"
      "img body";
    column-gap: 12px;
  }

  .layout.yh-3col .feed .card:not(.card--compact) .card__img {
    aspect-ratio: 1 / 1.05;
  }

  .layout.yh-3col .feed .card .card__title {
    font-size: 16px;
  }
}

/* Smaller screens: the search pill on its own row, centred under the logo. */
@media (max-width: 900px) {
  .yh-header .search {
    justify-self: center;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
}

/* Load more replaces the page numbers when script runs. */
.load-more.is-js .pagination {
  display: none;
}

.yh-loadmore {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 46px;
  margin: 6px auto 4px;
  border: 1.5px solid var(--brand);
  border-radius: 999px;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.yh-loadmore:hover {
  background: var(--brand);
  color: #fff;
}

.yh-loadmore.is-busy {
  opacity: 0.7;
  cursor: progress;
}

.yh-loadmore-end {
  margin: 8px 0 4px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yh-meta);
}

/* Rails on smaller screens: full width, two widgets per row on tablets,
   one per row on phones (the old sidebar rule aligned them to the left). */
@media (max-width: 1080px) {
  .yh3 .yh3__stack,
  .layout.yh-3col > .sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: 16px;
  }

  .yh3 .yh3__stack > *,
  .layout.yh-3col > .sidebar > * {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .yh3 .yh3__stack,
  .layout.yh-3col > .sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Widget contents fill their widget on tablets and phones. */
@media (max-width: 1080px) {
  .yh3 .widget,
  .layout.yh-3col > .sidebar .widget {
    width: 100%;
  }

  .yh3 .section--search .search,
  .yh3 .section--search .search__field,
  .layout.yh-3col .section--search .search,
  .yh3 .wx,
  .layout.yh-3col .wx,
  .yh3 .widget__foot .btn,
  .layout.yh-3col .widget__foot .btn {
    width: 100%;
    max-width: none;
  }

  .yh3 .src-strip__row,
  .yh3 .q-list li {
    width: 100%;
  }
}

/* Inner pages place their columns in source order; the homepage's named
   grid areas do not exist here. */
.layout.yh-3col > .yh3__left {
  grid-area: auto;
}

/* Sticky rails (wide screens). The script in theme-yahoo.js sets each rail's
   `top`: under the header for a short rail, or negative for a tall one so it
   scrolls until its last widget is on screen and then holds. */
@media (min-width: 1280px) {
  .yh3 > .yh3__left,
  .yh3 > .yh3__right {
    position: sticky;
    align-self: start;
  }
}

@media (min-width: 1081px) {
  .layout.yh-3col > .yh3__left,
  .layout.yh-3col > .sidebar,
  .yh-article-shell .layout > .yh-article-rail {
    position: sticky;
    align-self: start;
  }
}

/* Sticky rails scroll on their own when they are taller than the window. */
@media (min-width: 1280px) {
  .yh3 > .yh3__left,
  .yh3 > .yh3__right {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    padding-right: 2px;
    padding-bottom: 4px;
  }
}

@media (min-width: 1081px) {
  .layout.yh-3col > .yh3__left,
  .layout.yh-3col > .sidebar,
  .yh-article-shell .layout > .yh-article-rail {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    padding-right: 2px;
    padding-bottom: 4px;
  }
}

/* The scrollbar shows while the pointer is over the rail. */
.yh3 > .yh3__left:hover,
.yh3 > .yh3__right:hover,
.layout.yh-3col > .yh3__left:hover,
.layout.yh-3col > .sidebar:hover,
.yh-article-rail:hover {
  scrollbar-color: color-mix(in oklab, var(--yh-ink) 25%, transparent) transparent;
}

/* Photo credit sits on a brand-coloured pill over the image: white text. */
.article .photo-credit,
.article .photo-credit__label,
.article .photo-credit a {
  color: #fff;
}

.article .photo-credit__label {
  opacity: 0.85;
  font-weight: 500;
}

.article .photo-credit a {
  font-weight: 700;
  text-decoration: none;
}

.article .photo-credit a:hover {
  text-decoration: underline;
}

/* Article page: a wider right rail, so ranked headlines get room. */
@media (min-width: 1081px) {
  body:has(.article) #content > .container,
  .yh-article-shell {
    max-width: 1280px;
  }

  body:has(.article) .layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
  }

  .yh-article-rail .widget {
    padding: 18px 18px;
  }

  .yh-article-rail .card--compact:has(.card__rank) {
    grid-template-columns: 18px 76px minmax(0, 1fr);
    gap: 12px;
  }

  .yh-article-rail .card--compact .card__media {
    width: 76px;
  }

  .yh-article-rail .card--compact .card__title {
    font-size: 15px;
    line-height: 1.32;
  }
}

/* ==========================================================================
   12. Portal footer
   ========================================================================== */

.yh-footer {
  --f-bg: #121418;
  --f-ink: #f2f4f7;
  --f-ink-2: #b4bac3;
  --f-meta: #858c96;
  --f-hair: rgba(255, 255, 255, 0.09);
  margin-top: 56px;
  padding: 0 0 22px;
  background: var(--f-bg);
  border-top: 0;
  color: var(--f-ink-2);
}

.yh-footer .container {
  max-width: 1280px;
}

/* Call-out card, lifted half over the top edge of the footer. */
.yh-footer__cta {
  position: relative;
  top: -36px;
  margin-bottom: -8px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, var(--brand) 0%, color-mix(in oklab, var(--brand) 70%, #000) 100%);
  box-shadow: 0 18px 40px color-mix(in oklab, var(--brand) 28%, transparent);
}

.yh-footer__cta-text {
  flex: 1;
  min-width: 0;
}

.yh-footer__cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.yh-footer__cta-kicker svg {
  width: 15px;
  height: 15px;
}

.yh-footer__cta-title {
  margin: 4px 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
}

.yh-footer__cta-sub {
  margin: 0;
  font-size: 14.5px;
  opacity: 0.88;
}

.yh-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: none;
}

.yh-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.yh-footer__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.yh-footer__btn--solid {
  background: #fff;
  border-color: #fff;
  color: var(--brand);
}

.yh-footer__btn--solid:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand);
}

.yh-footer__btn svg {
  width: 16px;
  height: 16px;
}

/* Main columns. */
.yh-footer__main {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr 1fr;
  gap: 36px;
  padding: 20px 0 30px;
}

.yh-footer__logo img {
  height: 32px;
  width: auto;
}

.yh-footer__logo span {
  font-size: 26px;
  font-weight: 800;
  color: var(--brand);
}

.yh-footer__blurb {
  margin: 14px 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--f-ink-2);
  max-width: 340px;
}

.yh-footer__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yh-footer__quick a,
.yh-footer__quick button {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--f-hair);
  background: rgba(255, 255, 255, 0.04);
  color: var(--f-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.yh-footer__quick a:hover,
.yh-footer__quick button:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.yh-footer__quick svg {
  width: 18px;
  height: 18px;
}

.yh-footer__title {
  margin: 4px 0 14px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-ink);
}

.yh-footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.yh-footer__links--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
}

.yh-footer__links a {
  font-size: 14px;
  color: var(--f-ink-2);
  width: fit-content;
  transition: color 0.15s ease;
}

.yh-footer__links a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Trending chips. */
.yh-footer__trends {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--f-hair);
}

.yh-footer__trends-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--f-ink);
}

.yh-footer__trends-label svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.yh-footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yh-footer__chips a {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--f-hair);
  font-size: 13px;
  color: var(--f-ink-2);
  text-transform: capitalize;
}

.yh-footer__chips a:hover {
  border-color: var(--brand);
  color: #fff;
}

/* Bottom bar. */
.yh-footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--f-hair);
  font-size: 13px;
  color: var(--f-meta);
}

.yh-footer__locales {
  display: inline-flex;
  gap: 12px;
}

.yh-footer__locales a {
  color: var(--f-ink-2);
}

.yh-footer__locales a.is-active {
  color: #fff;
  font-weight: 700;
}

.yh-footer__top {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--f-ink);
}

.yh-footer__top:hover {
  color: var(--brand);
}

.yh-footer__top svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 1080px) {
  .yh-footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .yh-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .yh-footer {
    margin-top: 48px;
  }

  .yh-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
    border-radius: 16px;
  }

  .yh-footer__cta-title {
    font-size: 21px;
  }

  .yh-footer__cta-actions,
  .yh-footer__btn {
    width: 100%;
  }

  .yh-footer__btn {
    justify-content: center;
  }

  .yh-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .yh-footer__col--sections {
    grid-column: 1 / -1;
  }

  .yh-footer__trends {
    flex-direction: column;
    align-items: flex-start;
  }

  .yh-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .yh-footer__top {
    margin-left: 0;
  }
}