/* ==========================================================================
   Utilities and responsive behaviour.
   Mobile is designed, not shrunk: the hero stacks with the illustration
   reduced, the tile row stays a swipeable carousel, and cards go single-column.
   ========================================================================== */

.t2 { color: var(--text-2); }
.t3 { color: var(--text-3); }
.lead { font-size: var(--text-subheading); color: var(--text-3); }
.small { font-size: var(--text-body); }
.center { text-align: center; }
.measure { max-inline-size: var(--text-w); }
.mbs-3 { margin-block-start: var(--sp-12); }
.mbs-4 { margin-block-start: var(--sp-16); }
.mbs-5 { margin-block-start: var(--sp-24); }
.mbs-6 { margin-block-start: var(--sp-32); }
.mbs-7 { margin-block-start: var(--sp-48); }
.mbe-4 { margin-block-end: var(--sp-16); }
.mbe-6 { margin-block-end: var(--sp-32); }
.hidden { display: none !important; }
.row-center { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-12); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.embed { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-cards); background: #0b0f1a; }
.embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); align-items: start; }
.split--wide { grid-template-columns: 1.6fr 1fr; }

/* The six-item nav needs ~1100px; below that it collapses into the menu
   panel. Phones additionally drop the header CTA (see 720px). */
@media (max-width: 1080px) {
  .navtoggle { display: grid; order: 3; }
  .masthead__act { margin-inline-start: auto; }
  .mainnav {
    display: none; position: absolute; inset-block-start: var(--nav-h); inset-inline: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--surface); box-shadow: 0 12px 24px rgba(0,0,0,.08);
    padding: var(--sp-8) var(--sp-20) var(--sp-24);
    max-block-size: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  html[dir="ltr"] .mainnav { margin: 0; }
  .mainnav.is-open { display: flex; }
  .mainnav > li > a { padding-block: var(--sp-12); font-size: var(--text-body-lg); border-block-end: 1px solid var(--rule); }
  .mainnav .sub, .mainnav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    padding: var(--sp-4) 0 var(--sp-8); padding-inline-start: var(--sp-12);
  }
}

@media (max-width: 1080px) {
  .foot__grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero__grid, .lead-story, .split, .split--wide, .newsletter { grid-template-columns: 1fr; }
  .hero { padding-block: var(--sp-48); }
  .hero__art { max-inline-size: 360px; order: -1; }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder { grid-template-columns: 1fr; padding: var(--sp-32) var(--sp-20); gap: var(--sp-32); }
  .ladder::before { inset-block: calc(var(--sp-32) + 32px) calc(var(--sp-32) + 60px); inset-inline-start: 50%; inline-size: 2px; block-size: auto; }
  .index--split { columns: 1; }
  .tiles__nav { display: none; } /* touch scrolling replaces arrows */
}

@media (max-width: 720px) {
  /* Phone header: wordmark · search · menu. The hero CTA replaces the header
     CTA, and the footer's language select replaces the header pill. */
  .masthead__act .btn--outline, .masthead__act .lang { display: none; }
  .masthead__in { gap: var(--sp-8); }
  .masthead__act .btn--ghost { inline-size: 40px; min-block-size: 40px; padding: 0; }
  .wordmark b { font-size: var(--text-body-lg); }

  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .band { padding-block: var(--sp-48); }
  .hero__art { max-inline-size: 300px; }
  .bubble { font-size: 12px; padding: 6px 10px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > :first-child { grid-column: 1 / -1; }
  .newsletter { padding: var(--sp-24); }
  .newsletter form { flex-direction: column; }
  .sheet { padding: var(--sp-32) var(--sp-20); }
  .prose { font-size: var(--text-body-lg); }
}

@media print {
  .masthead, .foot, .next, .filters, .navtoggle, .hero__art { display: none; }
  body, .hero, .pagehead { background: #fff; color: #000; }
  .hero h1, .pagehead h1 { color: #000; }
}