/* Final phone layout for the four editorial detail pages. */
@media (max-width: 700px) {
  .detail-body {
    --detail-mobile-hero: clamp(34px, 9.5vw, 38px);
    --detail-mobile-heading: clamp(32px, 9.2vw, 36px);
  }

  .detail-body .detail-main,
  .detail-body .detail-main > *,
  .detail-body .detail-split > *,
  .detail-body [data-detail-tabs],
  .detail-body [data-detail-panel] {
    min-width: 0;
  }

  .detail-body .detail-hero-copy h1 {
    font-size: var(--detail-mobile-hero);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .detail-body .detail-section h2,
  .detail-body .detail-band h2,
  .detail-body .detail-cta h2 {
    font-size: var(--detail-mobile-heading);
    line-height: 1.13;
    letter-spacing: -.03em;
    text-wrap: balance;
  }

  .detail-body h3 {
    text-wrap: balance;
  }

  .detail-body .detail-phrase {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
  }

  .detail-body p {
    text-wrap: pretty;
  }

  .detail-body .detail-lead,
  .detail-body .detail-section-head > p:not(.detail-kicker),
  .detail-body .food-hero-context,
  .detail-body .food-story-copy > p:not(.detail-kicker),
  .brands-detail .brands-perspective > p:not(.detail-kicker),
  .brands-detail .brands-value .detail-points p,
  .brands-detail .brands-goodwill-bottom > div p,
  .culture-detail .culture-hero-text,
  .culture-detail .culture-intro-copy > p:not(.culture-development),
  .culture-detail .culture-stage-copy > p:not(.detail-kicker):not(.culture-stage-takeaway),
  .culture-detail .culture-story-band > p:not(.detail-kicker):not(.culture-loop-caption),
  .culture-detail .culture-provenance-copy > p:not(.detail-kicker) {
    font-size: 16px;
    line-height: 1.7;
  }

  .detail-body .detail-hero {
    padding-top: 30px;
  }

  .detail-body .detail-kicker {
    text-wrap: balance;
  }

  .detail-body .detail-band {
    padding: 32px 24px;
  }

  .detail-body .detail-actions,
  .detail-body .detail-cta,
  .detail-body .detail-footer {
    min-width: 0;
  }

  .detail-body .detail-button,
  .detail-body .detail-link,
  .detail-body [data-detail-motion] {
    min-height: 44px;
    max-width: 100%;
  }

  .detail-body .detail-button,
  .detail-body .detail-link {
    line-height: 1.45;
  }

  .detail-body .detail-breadcrumb {
    gap: 9px;
    line-height: 1.5;
  }

  .detail-body .detail-breadcrumb a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
  }

  .detail-body [data-detail-tablist]:not([data-detail-vertical-mobile]) {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .detail-body [data-detail-tablist]:not([data-detail-vertical-mobile]) [data-detail-tab] {
    flex: 0 0 auto;
    min-height: 48px;
    white-space: nowrap;
  }

  .detail-body [data-detail-tablist] [data-detail-tab]:focus-visible {
    outline-offset: -4px;
  }

  .ai-detail .ai-hero-label {
    left: 12px;
    right: 12px;
    gap: 12px;
    padding: 14px;
  }

  .ai-detail .ai-hero-label > * {
    min-width: 0;
  }

  .ai-detail .ai-hero-label span {
    font-size: 10px;
    letter-spacing: .09em;
  }

  .ai-detail .ai-hero-label strong {
    font-size: 24px;
  }

  .ai-detail .ai-hero-label small {
    max-width: 90px;
  }

  .brands-detail .brands-perspective h3,
  .culture-detail .culture-stage-copy h3 {
    font-size: clamp(28px, 8.2vw, 32px);
    line-height: 1.14;
  }

  .brands-detail .brands-goodwill h2 {
    margin: 28px 0 30px;
  }

  .brands-detail .brands-goodwill h2 > .detail-phrase {
    display: block;
  }

  .brands-detail .brands-value .detail-points h3 {
    font-size: 26px;
    line-height: 1.2;
  }

  .brands-detail .brands-goodwill-thought {
    font-size: 27px;
    text-wrap: balance;
  }

  .culture-detail .culture-stage-copy .culture-stage-takeaway {
    font-size: 24px;
    text-wrap: balance;
  }

  .culture-detail .culture-registrations dd {
    margin-left: 31px;
    font-size: 26px;
  }
}

@media (max-width: 380px) {
  .detail-body {
    --detail-mobile-hero: 34px;
    --detail-mobile-heading: 32px;
  }

  .detail-body .topic-nav .inner,
  .detail-body .detail-main,
  .detail-body > footer.detail-footer {
    width: calc(100% - 32px);
  }

  .detail-body .topic-nav .home {
    font-size: 16px;
    gap: 7px;
  }

  .detail-body .topic-nav .trail {
    gap: 18px;
  }

  .detail-body .detail-hero {
    padding-top: 24px;
    padding-bottom: 44px;
  }

  .detail-body .detail-section {
    padding-block: 46px;
  }

  .detail-body .detail-band {
    padding: 28px 20px;
  }

  .detail-body .detail-actions {
    gap: 10px 16px;
  }

  .detail-body .detail-button {
    padding-inline: 16px;
  }

  .ai-detail .ai-hero-label strong {
    font-size: 23px;
  }

  .ai-detail .ai-audience article {
    gap: 12px;
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .ai-detail .ai-audience h2 {
    font-size: 25px;
  }

  .ai-detail .ai-journey-panel {
    padding: 18px;
  }

  .brands-detail .brands-value .detail-points h3 {
    font-size: 24px;
  }

  .brands-detail .brands-goodwill-thought {
    font-size: 25px;
  }

  .culture-detail .culture-registrations dt {
    gap: 12px;
    font-size: 15px;
  }

  .culture-detail .culture-registrations dd {
    margin-left: 25px;
    font-size: 25px;
  }

  .culture-detail .culture-stage-copy .culture-stage-takeaway {
    font-size: 22px;
  }
}