/* Shared content gutters only at the existing phone breakpoint.
   The wrapper owns the gutter; structural boxes must not add it again. */
@media only screen and (max-width: 768px) {
  body #wrapper.inner {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: none;
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 0;
    padding-right: 0;
  }
  body #wrapper.inner .box {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Compact phone header; desktop rules remain unchanged. */
@media only screen and (max-width: 768px) {
  body #header { padding: 10px 0; }
  body #header .inner { width: calc(100% - 32px); gap: 0 12px; }
  body #header .header-brand #logo .brand-designed-wordmark { width: auto; height: auto; padding: 1px 2px; font-size: 32px; }
  body #header .header-auth { gap: 10px; }
  body #header .header-auth .header-member-link { width: auto; min-width: 34px; height: 35px; }
  body #header .header-auth .header-member-icon { display: none; }
  body #header .header-auth .header-member-link span { display: inline !important; font-size: 14px; }
  body #header #search { position: relative; grid-column: 1 / -1; grid-row: 2; box-sizing: border-box; width: 100%; min-width: 0; max-width: none; margin-top: 10px; }
  body #header.mobile-search-open #search { display: block !important; }
  body #header #search form { height: 37px; }
  body #header #search .text, body #header #search .submit { height: 35px; line-height: 35px; }
  body #header #search .text { font-size: 14px; }
  body #header #search .text::placeholder { font-size: 12px; }
  body #header .mobile-search-link[aria-expanded="true"] { color: var(--site-primary, #ff5000); }
}

/* Reserve a separate column for comparison; selected tabs scroll into view. */
@media only screen and (max-width: 768px) {
  body #nav .inner, body #nav .inner.active { flex-wrap: nowrap; gap: 8px; }
  body #nav .nav-links { flex: 1 1 0; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
  body #nav .nav-compare-slot { flex: 0 0 auto; }
}

/* Two featured stories per row on phones. */
@media only screen and (max-width: 768px) {
  .channel-page .channel-text-featured-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .channel-page .channel-text-featured-list article { min-width: 0; }
}

/* Keep phone featured reading to two rows, with smaller card titles. */
@media only screen and (max-width: 768px) {
  .channel-page .channel-text-featured-list article:nth-child(n + 5) { display: none; }
  .channel-page .channel-text-featured-list .channel-featured-copy h3 { font-size: 14px; }
}

/* Reset legacy thumbnail padding so the phone aspect ratio controls height. */
@media only screen and (max-width: 768px) {
  body .editorial-article #related .thumbnail a {
    padding: 0;
    height: auto;
    aspect-ratio: 1.8;
  }
}