@media (max-width: 1279px) {
  .sci-header__inner,
  .sci-shell,
  .sci-footer__inner {
    width: min(100% - 64px, 960px);
  }

  .sci-header__inner {
    gap: var(--sci-space-5);
  }

  .sci-header__nav {
    gap: var(--sci-space-4);
  }

  .sci-header__nav-optional {
    display: none;
  }

  .sci-story-list {
    grid-template-columns: 1fr;
  }

  .sci-home-hero {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
    gap: 0 var(--sci-space-6);
  }

  .sci-home-hero h1 {
    font-size: 38px;
  }
}

/* The desktop nav is a single-row utility bar. Its items are nowrap and the
 * English labels are long, so when the header's actual width gets tight the
 * last items would otherwise slide under the action controls. Compact by
 * container width (not viewport) so 1280-1600px laptops and 4K screens both
 * render a clean single row:
 *   > 1560px  full menu (Sustainability + Research & Columns included)
 *   <= 1560px drop the optional items (still in the mobile drawer)
 *   <= 1280px also drop the inline language switch
 *   <= 1120px also drop the standalone Subscriptions CTA
 */
@container (max-width: 1560px) {
  .sci-header__nav .sci-header__nav-optional {
    display: none;
  }

  .sci-header__nav {
    gap: var(--sci-space-4);
  }

  .sci-header__actions {
    gap: var(--sci-space-3);
  }
}

@container (max-width: 1280px) {
  .sci-header__nav {
    gap: 10px;
  }

  .sci-header__lang {
    display: none;
  }
}

@container (max-width: 1120px) {
  .sci-header__nav {
    gap: 8px;
  }

  .sci-header__actions {
    gap: var(--sci-space-2);
  }

  .sci-header__actions .sci-button {
    display: none;
  }
}

/* The complete desk navigation is intentionally compacted before its action
 * controls start wrapping. This preserves one calm, 64px utility bar on
 * laptop widths without changing the editorial content grid. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sci-header__nav {
    display: none;
  }

  .sci-header__menu {
    display: inline-grid;
  }

  .sci-mobile-nav {
    position: fixed;
    z-index: 10001;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(88vw, 380px);
    padding: var(--sci-space-5);
    flex-direction: column;
    gap: 0;
    box-shadow: var(--sci-shadow-drawer);
    background: var(--sci-bg);
  }

  .sci-mobile-nav[hidden],
  .sci-nav-backdrop[hidden] {
    display: none;
  }

  .sci-mobile-nav__head {
    display: flex;
    min-height: var(--sci-header-mobile);
    margin-bottom: var(--sci-space-5);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--sci-border);
  }

  .sci-mobile-nav > a {
    padding: var(--sci-space-4) var(--sci-space-2);
    border-bottom: 1px solid var(--sci-border);
    color: var(--sci-text);
    font-size: 17px;
    font-weight: 620;
    text-decoration: none;
  }

  .sci-mobile-nav__section {
    padding: var(--sci-space-6) var(--sci-space-2) var(--sci-space-2);
    color: var(--sci-text-tertiary);
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sci-mobile-nav > .sci-mobile-nav__subitem {
    padding-block: var(--sci-space-3);
    padding-left: var(--sci-space-5);
    color: var(--sci-text-secondary);
    font-size: 15px;
  }

  .sci-mobile-nav .sci-mobile-nav__ask {
    margin-top: var(--sci-space-5);
    border: 0;
    border-radius: var(--sci-radius-sm);
    background: var(--sci-blue-soft);
    color: var(--sci-blue);
    text-align: center;
  }

  .sci-nav-backdrop {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: block;
    background: rgba(17, 24, 39, 0.35);
  }
}

@media (max-width: 1023px) {
  .jeg_sidecontent .jeg_viewport {
    margin-left: 0 !important;
  }

  #jeg_sidecontent {
    display: none !important;
  }

  .jeg_header.normal .jeg_stickybar.jeg_navbar {
    max-width: 100% !important;
  }

  .sci-header__nav {
    display: none;
  }

  .sci-header__menu {
    display: inline-grid;
  }

  .sci-mobile-nav {
    position: fixed;
    z-index: 10001;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(88vw, 380px);
    padding: var(--sci-space-5);
    flex-direction: column;
    gap: 0;
    box-shadow: var(--sci-shadow-drawer);
    background: var(--sci-bg);
  }

  .sci-mobile-nav[hidden],
  .sci-nav-backdrop[hidden] {
    display: none;
  }

  .sci-mobile-nav__head {
    display: flex;
    min-height: var(--sci-header-mobile);
    margin-bottom: var(--sci-space-5);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--sci-border);
  }

  .sci-mobile-nav > a {
    padding: var(--sci-space-4) var(--sci-space-2);
    border-bottom: 1px solid var(--sci-border);
    color: var(--sci-text);
    font-size: 17px;
    font-weight: 620;
    text-decoration: none;
  }

  .sci-mobile-nav__section {
    padding: var(--sci-space-6) var(--sci-space-2) var(--sci-space-2);
    color: var(--sci-text-tertiary);
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sci-mobile-nav > .sci-mobile-nav__subitem {
    padding-block: var(--sci-space-3);
    padding-left: var(--sci-space-5);
    color: var(--sci-text-secondary);
    font-size: 15px;
  }

  .sci-mobile-nav .sci-mobile-nav__ask {
    margin-top: var(--sci-space-5);
    border: 0;
    border-radius: var(--sci-radius-sm);
    background: var(--sci-blue-soft);
    color: var(--sci-blue);
    text-align: center;
  }

  .sci-nav-backdrop {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: block;
    background: rgba(17, 24, 39, 0.35);
  }

  .sci-home-lead {
    grid-template-columns: 1fr;
  }

  .sci-attention {
    padding: var(--sci-space-8) 0 0;
    border-top: 1px solid var(--sci-border-strong);
    border-left: 0;
  }

  .sci-attention__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--sci-space-8);
  }

  .sci-home-stream {
    grid-template-columns: 1fr;
  }

  .sci-topic-rail {
    padding: var(--sci-space-8) 0 0;
    border-top: 1px solid var(--sci-border-strong);
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .sci-header {
    min-height: var(--sci-header-mobile);
  }

  .sci-header__inner,
  .sci-shell,
  .sci-footer__inner {
    width: calc(100% - 40px);
  }

  .sci-header__inner {
    min-height: var(--sci-header-mobile);
    gap: var(--sci-space-2);
  }

  .sci-header__actions {
    gap: var(--sci-space-1);
  }

  .sci-header__ask,
  .sci-header__login,
  .sci-header__lang,
  .sci-header__actions .sci-button {
    display: none;
  }

  .sci-account__name,
  .sci-account__chevron {
    display: none;
  }

  .sci-account__trigger {
    padding: 2px;
  }

  .sci-account__menu {
    position: fixed;
    top: calc(var(--sci-header-mobile) - 2px);
    right: 20px;
    width: min(300px, calc(100vw - 40px));
  }

  .sci-main {
    min-height: calc(100vh - var(--sci-header-mobile));
    padding-block: var(--sci-space-10) var(--sci-space-16);
  }

  .sci-main.sci-home {
    padding-top: 0;
  }

  .sci-page-heading {
    margin-bottom: var(--sci-space-8);
  }

  .sci-page-heading h1 {
    font-size: 36px;
  }

  .sci-page-heading > p:not(.sci-kicker) {
    font-size: 17px;
  }

  .sci-story-card {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: var(--sci-space-4);
  }

  .sci-story-card h2 {
    font-size: 18px;
  }

  .sci-story-card p {
    display: none;
  }

  .sci-search__row {
    flex-direction: column;
  }

  .sci-state-panel {
    padding: var(--sci-space-8) var(--sci-space-5);
  }

  .sci-state-panel__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sci-footer__inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: var(--sci-space-5);
  }

  .sci-home__dateline {
    min-height: 72px;
  }

  .sci-home__edition {
    font-size: 12px;
  }

  .sci-home-lead {
    padding-top: var(--sci-space-10);
    gap: var(--sci-space-8);
  }

  .sci-home-hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media"
      "summary";
    gap: var(--sci-space-6);
  }

  .sci-home-signal {
    margin-bottom: var(--sci-space-4);
    font-size: 14px;
  }

  .sci-home-hero h1 {
    font-size: clamp(32px, 9.2vw, 38px);
    line-height: 1.22;
  }

  .sci-home-hero__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .sci-home-hero__summary {
    padding-top: 0;
    gap: var(--sci-space-4);
  }

  .sci-home-hero__summary > p {
    font-size: 17px;
    -webkit-line-clamp: 5;
  }

  .sci-attention {
    padding-top: var(--sci-space-6);
  }

  .sci-attention__list {
    grid-template-columns: 1fr;
  }

  .sci-attention-story h3 {
    font-size: 19px;
  }

  .sci-ask-strip {
    padding-block: var(--sci-space-6);
    grid-template-columns: 1fr;
    gap: var(--sci-space-4);
  }

  .sci-ask-strip__brand {
    grid-template-columns: 1fr;
    gap: var(--sci-space-2);
  }

  .sci-ask-strip__brand p {
    font-size: 12px;
  }

  .sci-home-stream {
    padding-top: var(--sci-space-8);
    gap: var(--sci-space-8);
  }

  .sci-latest__list .sci-story-card {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .sci-latest__list .sci-story-card__media {
    grid-column: 2;
  }

  .sci-topic-rail {
    padding-top: var(--sci-space-6);
  }

  .sci-home-empty {
    min-height: 480px;
    padding-block: var(--sci-space-10);
  }

  .sci-home-loading {
    min-height: 520px;
    padding-block: var(--sci-space-10);
    grid-template-columns: 1fr;
  }

  .sci-home-loading__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    grid-row: 2;
  }
}