/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   The layout is fluid: --gutter and --col in base.css carry the page
   from 600px to 1520px of column with no scaling tricks.
     >=1280   the artboard's proportions, column growing to 1520
     600-1279 the same composition, narrower column, some grids at 2-up
     <600     a reflowed single-column phone layout
   ══════════════════════════════════════════════════════════════ */


/* ══ TABLET / PHONE ════════════════════════════════════════════ */
@media (max-width: 599px) {

  body { font-size: 15px; }

  .stage, .wrap { max-width: 100%; padding-inline: 20px; }

  /* features: one and a bit cards, arrows below the row */
  .feats__stage { margin-top: 26px; }
  .feat { flex: 0 0 calc(100% - 56px); }
  .feats__stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  /* the prev button precedes the viewport in the DOM, so without `order` the
     three of them land on three separate flex lines */
  .feats__viewport { flex: 0 0 100%; order: 1; }
  .feats__arrow--prev { order: 2; }
  .feats__arrow--next { order: 3; }
  .feats__arrow {
    position: static;
    translate: none;            /* the desktop rule yanked it up by half its height */
    left: auto; right: auto;
    margin-top: 4px;
  }

  /* keep a readable measure — without this the copy runs the full device width */
  .about__body, .obj__intro, .hall__intro, .goal__p,
  .zone__body p, .pillar-cap p, .ftr__line { max-width: 62ch; }

  .h-section { font-size: 30px; line-height: 36px; }
  .eyebrow { font-size: 19px; line-height: 25px; }

  /* ── hero ───────────────────────────────────────────────── */
  .hero { height: auto; padding-bottom: 46px; }
  .hero__bg { height: 100%; }
  .hero__bg::after {
    background: linear-gradient(to bottom, rgba(var(--scrim), .15) 0%, rgba(var(--scrim), .55) 45%, rgba(var(--scrim), .92) 88%, var(--bg) 100%);
  }
  .hero__stage {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 0;
  }
  .hero__lockup,
  .hero__title,
  .hero__meta,
  .hero__cta,
  .countdown { position: static; margin-inline: 0; }

  /* On a phone the partner marks land on the neon tower, which leaves the
     white artwork with no separation. They get their own plain bar across
     the top of the hero — a fixed dark ground, since the marks are white
     in both themes. */
  .hero__lockup { width: min(78vw, 340px); height: auto; aspect-ratio: 605 / 87; margin-top: 34px; }
  .hero__title { font-size: 19px; line-height: 24px; }
  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
  }
  .hero__meta .meta { font-size: 15px; gap: 12px; }
  .hero__meta .i { margin-top: 0; }
  .hero__cta { width: 100%; max-width: 240px; margin-top: 26px; }
  .btn { height: 34px; font-size: 16px; border-radius: 17px; }

  .countdown { margin-top: 36px; gap: 10px; justify-content: space-between; }
  .cd { width: auto; flex: 1; }
  .cd__ring { width: 100%; aspect-ratio: 1; height: auto; font-size: clamp(26px, 7.2vw, 44px); }
  .cd__label { font-size: 12px; }

  /* ── patronage ──────────────────────────────────────────── */
  .pat { padding-top: 56px; }
  /* margin-top 0, not 30px: the 30px separated the card from the section
     heading, which is gone — left in place it stacked on the section padding
     and made this the one seam on the page deeper than the shared 92px */
  .pat__stage { margin-top: 0; padding-inline: 20px; }
  .pat-card { width: 100%; height: auto; aspect-ratio: auto; min-height: 0; padding: 0 0 26px; }
  .pat-card__frame { height: 100%; }

  /* the portrait's clip wrapper is only meaningful on the wide card; in the
     stacked layout it must flow, or the portrait escapes upward */
  /* keep the content above the absolutely-positioned frame once it stacks */
  .pat-card__pcrop,
  .pat-card__copy { position: relative; z-index: 3; }
  .pat-card__pcrop {
    position: static;
    clip-path: none;
    -webkit-clip-path: none;
  }
  .pat-card__portrait { position: static; width: 190px; height: auto; margin: -34px auto 0; }
  .pat-card__copy { position: static; width: 100%; max-width: none; padding: 0 18px; }
  .pat-name { font-size: 17px; line-height: 22px; }
  .pat-card__glow { background: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(26,107,60,.9), rgba(26,107,60,0) 100%); }

  /* ── numbers ────────────────────────────────────────────── */
  .nums { padding-top: 54px; padding-bottom: 0; }
  .nums__grid { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  /* five stats in two columns leaves the last one alone in column 1 —
     let it take the full row so it sits under the middle */
  .nums__grid > .nums__cell:last-child { grid-column: 1 / -1; }
  .nums__cell { width: 100%; padding-top: 0; }
  .nums__cell + .nums__cell::before { display: none; }
  .nums__fig { width: 100%; font-size: 32px; line-height: 36px; }
  .nums__glow { display: none; }
  .nums__cap { margin-top: 8px; font-size: 13px; line-height: 16px; }

  /* ── about ──────────────────────────────────────────────── */
  .about { padding-top: 56px; padding-inline: 20px; }
  .about__title { font-size: 28px; line-height: 34px; margin-top: 12px; }
  .about__body { margin-top: 20px; font-size: 13.5px; line-height: 20px; }
  .about__rule { width: 100%; margin-top: 32px; }

  /* ── pillars ────────────────────────────────────────────── */
  .pillars { padding-top: 56px; }
  .pillars__stage { height: auto; aspect-ratio: 505 / 302.65; margin: 30px auto 0; }
  .pillar {
    left: 0; margin-left: 0; width: 100%; height: 100%;
    border-radius: 12px;
  }
  .pillar.is-prev, .pillar.is-next { opacity: 0; pointer-events: none; transform: scale(.9); }
  .pillar__tab { width: 62px; height: 18px; margin-left: -31px; top: -9px; border-radius: 9px; }
  .pillars__arrow { top: auto; bottom: -58px; }
  .pillars__arrow--prev { left: 20px; }
  .pillars__arrow--next { left: auto; right: 20px; }
  .pillars__caps { min-height: 96px; margin-top: 76px; padding-inline: 20px; }
  .pillar-cap h3 { font-size: 22px; line-height: 27px; }
  .pillar-cap p { font-size: 14px; line-height: 20px; margin-top: 10px; }
  .pillars::before, .pillars::after { display: none; }

  /* ── objectives ─────────────────────────────────────────── */
  .obj { padding-top: 56px; }
  .obj__intro { margin-top: 14px; font-size: 13.5px; line-height: 20px; }
  .obj__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 34px;
    padding-left: 0;
    margin-top: 30px;
    padding-inline: 20px;
  }
  .goal, .goal__p, .goal__rule { width: 100%; }
  .goal__t { width: auto; }
  .goal__n { font-size: 32px; line-height: 32px; width: 64px; }
  .goal__t { margin-left: 64px; font-size: 18px; line-height: 22px; }


  /* ── special hall ───────────────────────────────────────── */
  .hall { padding-top: 56px; }
  .hall__intro { margin-top: 14px; font-size: 13.5px; line-height: 20px; }
  /* two-up, with the odd third centred under them rather than a single
     column that made the section three screens tall */
  /* minmax(0, 1fr), not 1fr: a plain 1fr floors at min-content, so the
     column holding the longest caption grew wider than its half and the
     pair sat off-centre with the second one overflowing the column */
  .hall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; margin-top: 36px; }
  .hall__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hall__ring { width: 116px; height: 116px; }
  .hall__ring .i { transform: scale(.78); }
  .hall__cap { width: 100%; max-width: 290px; margin-top: 16px; font-size: 15px; }
  .hall__rule { width: 100%; margin-top: 44px; }
  .hall::before { display: none; }

  /* ── zones ──────────────────────────────────────────────── */
  .zones { padding-top: 48px; }
  .zones__grid { width: 100%; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; padding-inline: 20px; }
  /* the card's own 70px top pad already reserves the header band, and the
     321px floor was sized for the four-across desktop card */
  .zone { width: 100%; height: auto; min-height: 0; padding-bottom: 24px; }
  .zone__head { width: 100%; }
  .zone__t { position: static; width: auto; padding: 16px 22px 0; }
  .zone__rule { left: 22px; right: 22px; width: auto; top: auto; margin-top: 14px; position: static; }
  .zone__body { position: static; height: auto; padding: 14px 22px 0; }
  .zone__body p { width: 100%; }

  /* ── audience ───────────────────────────────────────────── */
  .aud { padding-top: 52px; }
  .aud .h-section, .aud--cat .h-section { margin-bottom: 30px; }
  .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  /* five categories in two columns strands the last one in column 1 */
  .aud-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .aud-cap, .aud--cat .aud-cap { font-size: 14px; line-height: 17px; }
  .aud-rule { width: 100%; margin-top: 34px; }
  .aud--cat { padding-top: 34px; }
  .aud--cat .aud-rule { margin-top: 34px; }
  .stat-num { font-size: 34px; line-height: 26px; margin-top: 14px; }
  .stat-glow { width: 130px; }

  /* ── speakers ───────────────────────────────────────────── */
  .spk-band { padding-top: 52px; padding-bottom: 40px; }
  .spk__stage { margin-top: 34px; }
  /* One portrait at a time, held in the centre with its neighbours peeking
     in from the screen edges. Three 67px cards in a 228px window read as
     thumbnails, and the arrows sat straight on top of the faces. */
  .spk__stage { position: relative; padding-bottom: 78px; }
  .spk__viewport {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }
  .spk { width: min(244px, 63vw); }
  .spk__frame,
  .spk__name,
  .spk__role {
    transition: opacity .45s ease, transform .45s cubic-bezier(.4, .01, .2, 1);
  }
  .spk:not(.is-active) .spk__frame { transform: scale(.82); opacity: .45; }
  .spk:not(.is-active) .spk__name,
  .spk:not(.is-active) .spk__role { opacity: .38; }
  .spk.is-active .spk__frame { transform: scale(1); opacity: 1; }

  /* arrows drop below the card rather than covering it */
  .spk__arrow { top: auto; bottom: 0; translate: none; width: 46px; height: 46px; }
  .spk__arrow .i { width: 15px; height: 18px; }
  .spk__arrow--prev { left: calc(50% - 57px); right: auto; }
  .spk__arrow--next { left: calc(50% + 11px); right: auto; }
  .spk__name { font-size: 22px; line-height: 28px; }
  .spk__role { font-size: 16px; line-height: 20px; }
  .spk__rule { width: calc(100% - 40px); }

  /* ── sponsors ───────────────────────────────────────────── */
  .spons { padding-top: 44px; }

  /* ── footer ─────────────────────────────────────────────── */
  .ftr { margin-top: 44px; padding-bottom: 56px; }
  .ftr__rule { margin-bottom: 30px; }
  .ftr__cols {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 34px;
    padding-inline: 20px;
  }
  .ftr__col--a, .ftr__col--b, .ftr__col--c { padding-left: 0; }
  .ftr__col--b::before, .ftr__col--b::after { display: none; }
  .ftr__head { padding-top: 0; font-size: 15.5px; line-height: 26px; }
  .ftr__head--contact { margin-left: 0; }
  .ftr__head--links { margin-left: 0; padding-top: 26px; }
  .ftr__head--times { margin-left: 0; padding-top: 26px; }
  .ftr__line, .ftr__links { font-size: 15px; line-height: 24px; }
  .ftr__line:first-of-type { margin-top: 12px; }
  .ftr__links { margin-top: 12px; }
  .ftr__social { margin-top: 16px; gap: 14px; }
  .ftr__map { width: 100%; height: auto; aspect-ratio: 298 / 277; margin: 0; }
  .ftr__table { width: 100%; margin: 12px 0 0; }
  .ftr__table th, .ftr__table td { width: auto !important; }
  .ftr__table tbody td { font-size: 11px; line-height: 15px; height: 66px; }
  .ftr__table thead th { font-size: 12px; }
  .ftr__copy { margin-top: 30px; padding-inline: 20px; font-size: 12px; }
  .ftr__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .ftr__copy { grid-column: 1; }
}


/* ── Below 1100 the hero stops being an absolutely-composed poster and
      becomes a flow layout, so the meta row and the CTAs can never
      collide the way they do when the canvas narrows ──────────────── */
@media (max-width: 1099px) {
  /* the hero reflows to a flow column below 1100, so the host mark pins to
     the top of the stage rather than a percentage of its height */
  .hero__yasref { top: clamp(14px, 3vw, 24px); right: 0; width: clamp(72px, 11vw, 104px); }
  /* Contact and Quick Links share one column below 1100, so they share one
     left edge. The -3.94px / -9.6px pulls are artboard offsets from the
     original side-by-side layout and set the two icons 6px apart here. */
  .ftr__head--contact,
  .ftr__head--links { margin-left: 0; }
  /* the links column's inset and divider belong to the three-across desktop
     footer; stacked under Contact they just push it out of line */
  .ftr__col--links,
  .ftr__col--c { padding-left: 0; }
  .ftr__col--links::before,
  .ftr__col--c::before { display: none; }
  .hero { height: auto; padding-bottom: clamp(40px, 5vw, 64px); }
  .hero__bg { height: 100%; }
  /* Below 1100 the copy stops being a left column and runs the full width,
     so the tower's neon sits directly behind the headline, the date row and
     the CTAs. Two layers here: the ground fade on top (it has to finish on
     --bg, which flips with the version), and a readability wash beneath it
     on --scrim-photo, which never flips — it is laid over a photograph, not
     over the page. */
  .hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(var(--scrim), .15) 0%, rgba(var(--scrim), .5) 45%, rgba(var(--scrim), .9) 88%, var(--bg) 100%),
      linear-gradient(180deg,
        rgba(var(--scrim-photo), .04) 0%,
        rgba(var(--scrim-photo), .62) 15%,
        rgba(var(--scrim-photo), .74) 38%,
        rgba(var(--scrim-photo), .72) 76%,
        rgba(var(--scrim-photo), .34) 100%);
  }
  /* The light version's ground fade is white, and at 45% down it was sitting
     right under the headline — re-brightening exactly what the wash below it
     had just darkened. Layering dark under white can only ever recover
     (1 - white alpha) of the signal, so the fade has to start later instead:
     it holds off until the copy has run out, then meets the page. */
  html[data-theme="light"] .hero__bg::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--scrim), 0) 0%,
        rgba(var(--scrim), 0) 80%,
        rgba(var(--scrim), .26) 92%,
        var(--bg) 100%),
      linear-gradient(180deg,
        rgba(var(--scrim-photo), .04) 0%,
        rgba(var(--scrim-photo), .66) 15%,
        rgba(var(--scrim-photo), .78) 38%,
        rgba(var(--scrim-photo), .76) 76%,
        rgba(var(--scrim-photo), .40) 100%);
  }
  /* the countdown is the last thing before the hero meets the page, so it sits
     where the white fade is strongest. Same plate the wide light hero uses. */
  html[data-theme="light"] .cd__ring {
    background: rgba(9, 16, 12, .52);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .34),
                inset 0 0 0 1px rgba(243, 238, 226, .10);
  }
  html[data-theme="light"] .cd__label { text-shadow: 0 1px 6px rgba(9, 16, 12, .75); }
  .hero__stage {
    height: auto;
    display: flex;
    flex-direction: column;
    padding-top: 22px;
  }
  .hero__lockup,
  .hero__title,
  .hero__meta,
  .hero__cta,
  .countdown { position: static; margin-inline: 0; }

  /* the marks land on the neon tower with no separation, so below 1100 they
     get their own plain bar across the top — a fixed dark ground, since the
     artwork is white in both versions */
  .hero__lockup { width: min(604.97px, 88%); margin-top: clamp(26px, 4vw, 48px); }
  .hero__title { margin-top: clamp(38px, 5.2vw, 56px); }
  .hero__meta { margin-top: clamp(16px, 2.4vw, 26px); left: 0; }
  .hero__cta { width: 100%; max-width: 260px; margin-top: clamp(20px, 2.6vw, 30px); }
  .btn { height: 38px; font-size: 17px; border-radius: 9px; }
  .countdown { margin-top: clamp(28px, 4vw, 48px); gap: clamp(12px, 2.4vw, 36px); }
}

/* ── 600–1099: the same fluid composition, but the widest grids drop
      to fewer columns so nothing gets crushed ─────────────────────── */
@media (min-width: 600px) and (max-width: 1099px) {
  .h-section { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.2; }
  .hero__title { font-size: clamp(21px, 2.9vw, 33px); line-height: 1.2; }
  .hero__lockup { width: min(604.97px, 60%); }

  /* and in three columns the last row holds two, which would sit left.
     Six half-columns let that pair be offset into the centre. */
  .nums__grid  { grid-template-columns: repeat(6, 1fr); row-gap: 40px; }
  .nums__grid > .nums__cell { grid-column: span 2; }
  .nums__grid > .nums__cell:nth-child(4) { grid-column: 2 / span 2; }
  .nums__grid > .nums__cell:nth-child(5) { grid-column: 4 / span 2; }
  /* three columns leaves two on the last row, which would sit left */
  .aud-grid    { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 44px; }
  .aud-grid > * { grid-column: span 2; }
  .aud-grid > *:nth-child(4) { grid-column: 2 / span 2; }
  .aud-grid > *:nth-child(5) { grid-column: 4 / span 2; }
  .zones__grid { grid-template-columns: repeat(2, 1fr); }
  .obj__grid   { grid-template-columns: repeat(2, 1fr); }
  .feat { flex: 0 0 calc((100% - 2 * 18px) / 3); }
  /* two columns on tablet: the text stacks on the left, the map holds the
     right instead of dropping full-width underneath everything */
  .ftr__cols   { grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: clamp(24px, 4vw, 56px); }
  /* both sit in the same column, so they share one left edge — the 34.75px
     inset is an artboard offset that only makes sense beside the map */
  .ftr__col--a     { grid-column: 1; grid-row: 1; padding-left: 0; }
  .ftr__col--links { grid-column: 1; grid-row: 2; padding-left: 0; }
  .ftr__col--links::before { display: none; }
  /* tablet: text stacks left, map then timings hold the right column */
  .ftr__col--b     { grid-column: 2; grid-row: 1; }
  .ftr__col--c     { grid-column: 2; grid-row: 2; padding-left: clamp(24px, 4vw, 56px); }
  .ftr__col--c::before { display: none; }
  /* three portraits wide, capped by the column. The old min() subtracted
     160px of arrow room from a stage that was already the run's width,
     which left the third portrait hanging past the right edge; letting it
     simply fill the stage then made every card visible at once, so the
     arrows had nothing to do. */
  .spk__viewport {
    width: min(100%, calc(var(--spk-card) * 3 + var(--spk-gap) * 2));
    margin-inline: auto;
  }
  /* the arrows hang outside the stage on desktop, where the gutter has room
     for them. At 600 that put them 6px off both screen edges, so here they
     tuck against the stage instead — the window is narrower than the stage
     now, so they still clear the portraits. */
  .spk__arrow--prev { left: 0; right: auto; }
  .spk__arrow--next { right: 0; left: auto; }
  .pillar-cap h3 { font-size: 26px; line-height: 32px; }

  /* the patronage card grows with its copy rather than holding a poster ratio */
  .pat-card { aspect-ratio: auto; min-height: 0; padding-block: 26px; }
  .pat-card__pcrop { position: static; clip-path: none; -webkit-clip-path: none; }
  .pat-card__portrait { position: static; width: 200px; margin: -46px auto 6px; }
  .pat-card__copy { position: static; width: 100%; max-width: none; padding-inline: clamp(20px, 5%, 56px); }
}

/* 1100–1279: only the very widest rows step down */
@media (min-width: 1100px) and (max-width: 1279px) {
}

/* very small phones */
@media (max-width: 400px) {
  .hero__title { font-size: 15.5px; line-height: 20px; }
  .cd__ring { font-size: 22px; }
  .nums__fig { font-size: 27px; }
  /* the audience tiles stay two-up here rather than dropping to a single
     column — an icon and a three-word caption fit fine at 168px, and one
     column made the section twice as long to scroll */
}

/* users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── the partner bar's edge-to-edge pull ────────────────────────
   This has to live after the `max-width: 1099px` block, not inside the
   `599` one further up: both match on a phone and the later block wins,
   so the correction was being overridden by the flow tier's plain
   `-1 * var(--gutter)`. Below 600 the stage adds a 20px inset on top of
   the gutter, and the bar has to clear both to reach the screen edge. */
@media (max-width: 599px) {

  /* Phone hero: the lockup runs the full text column and everything under it
     drops further down the frame. Both have to sit after the 1099 flow tier
     — it declares the same properties and would otherwise win here. */
  .hero__lockup { width: 100%; margin-top: 88px; }   /* clears the language
     switch and the host mark — the 1099 tier's clamp() sat it too high */
  .hero__title  { margin-top: 88px; }
}


/* the contact form drops to a single column on phones */
@media (max-width: 599px) {
  .contact__form { grid-template-columns: 1fr; }
}

/* ── Around Yanbu ─────────────────────────────────────────────
   Four destination cards drop to two columns on tablet and one on phone.
   Subgrid only aligns rows across cards that share a row, so it holds at
   every count; at one column it has nothing to align and costs nothing. */
@media (min-width: 600px) and (max-width: 1099px) {
  .ay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  /* .stage keeps its desktop --col width and puts the 20px gutter inside it,
     which left these cards 40px narrower than the zone cards right above.
     The other grids take the full width and carry the gutter themselves. */
  .ay__grid { width: 100%; padding-inline: 20px;
              grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* the header must take the same full-width treatment or it starts 29px
     further in than the cards it introduces */
  .ay-band .wrap { width: 100%; max-width: none; padding-inline: 20px; }
  .ay__h::after { width: 100%; }
  .ay { grid-row: span 5; }
  .ay__t { font-size: 21px; margin-inline: 16px; }
  .ay__meta,
  .ay__list,
  .ay__cta { margin-inline: 16px; }
  .ay__lede { font-size: 15px; }
}

/* ── Around Yanbu ─────────────────────────────────────────────
   The coverflow is the design at every width; only its proportions change.
   One card nearly fills a phone, with its neighbours just showing. */
@media (max-width: 899px) {
  .ay-band { --ay-w: 56vw; --ay-peek: 44vw; }
}
@media (max-width: 599px) {
  .ay-band { --ay-w: 74vw; --ay-peek: 56vw; }
  .ay__arrow--prev { left: -14px; }
  .ay__arrow--next { right: -14px; }
  .ay__body { margin-inline: 8px; padding: 22px 16px 28px; }
}

/* ── Patronage, restored as an empty frame ────────────────────
   With no portrait and no copy inside, the card has nothing to give it
   height, and the tiers above deliberately release the artboard's aspect
   ratio so the content can stack. These come last so they win, and hold the
   frame open as a reserved space rather than a collapsed line. */
/* the frame takes its height from the slide inside it — the artboard's
   891.5/255 ratio was cut for the portrait layout and is too shallow for
   three stacked blocks of copy */
.pat-card { aspect-ratio: auto; height: auto; min-height: 255px; }
@media (max-width: 599px) {
  .pat-card { min-height: 0; padding: 0; }
  /* one row is too tight for a phone — the marks stack, and the rules turn
     horizontal so they still read as separators between them */
  .pat-marks { --gap: 26px; flex-direction: column; }
  .pat-sep { flex-basis: 1px; width: 120px; height: 1px; }
}

/* ── one rhythm down the phone ────────────────────────────────
   Each band had accumulated its own top and bottom values as the page was
   built — 56/56 here, 54/0 there, 34/56, 40/44 — so the air between sections
   ran anywhere from 56px to 112px and the scroll felt uneven. One value for
   every band gives a constant 92px between any two. Comes last so it wins
   over the per-section rules above; the hero sits outside <main> and keeps
   its own framing. */
@media (max-width: 599px) {
  /* section[class], not bare section: every band sets its padding through a
     class (.pat, .nums, .zones …) at 0-1-0, so a plain element selector at
     0-0-2 loses however late it comes. The attribute selector takes it to
     0-1-1 and it wins. */
  main > section[class] { padding-block: 46px; }
}


/* ══ FORUM LOCATION HIDDEN ═════════════════════════════════════
   The map column is commented out of the markup for now. These are the
   only rules that depend on it being gone — delete this whole block when
   the column comes back. */

/* desktop drops from four tracks to three; the survivors take the width */
@media (min-width: 1100px) {
  .ftr__cols { grid-template-columns: minmax(0, 1.02fr) minmax(0, .74fr) minmax(0, 1fr); }
}

/* tablet stacked the map above the timings in the right-hand column, so
   without it the timings have to climb into row 1 or leave a hole */
@media (min-width: 600px) and (max-width: 1099px) {
  .ftr__col--c { grid-row: 1; }
}

/* ══ PHONE READABILITY ═════════════════════════════════════════════
   --t-micro bottoms out at 11px, which the audit flagged on the Around
   Yanbu meta, the timeline dates and the section notes. On a phone the
   floor moves to 12px; the desktop value is untouched. Footer and other
   small links also grow to a comfortable tap height. */
@media (max-width: 599px) {
  :root { --t-micro: clamp(12px, .80vw, 13px); }

  .ftr__line a,
  .ftr__col--links a,
  .lang a { display: inline-block; padding-block: 8px; }
  .ftr__col--links li { line-height: 1.2; }
}

/* ══ PHONE AUDIT FIXES ═════════════════════════════════════════════
   Measured across all nine pages at 375 and 320. Each rule below
   answers a specific finding, not a guess.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* Around Yanbu's meta, CTA and footnote resolved to 10–11px, below the
     12px floor the rest of the phone layout uses. They carry their own
     clamps rather than --t-micro, so they are raised directly. */
  .ay__meta { font-size: 12px; }
  .ay__note { font-size: 12px; }
  .ay__cta  { font-size: 12px; min-height: 40px; }

  /* Tap targets. The bar's lockup link collapsed to 13px tall, the hero
     meta rows to 24px, and the Around Yanbu dots to 7px — all under a
     comfortable thumb. Heights grow; nothing moves visually. */
  .topbar__mark { min-height: 42px; }
  .hero__meta .meta { min-height: 40px; display: flex; align-items: center; }
  .ay__dots button, .ay__dot {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* At 320 the footer columns measured 264px inside a 270px column but
     still ran 9px past the edge — the grid track was not allowed to
     shrink below its content. */
  .ftr__cols, .ftr__col { min-width: 0; }
  .ftr__col > * { max-width: 100%; }
  .ftr__table { max-width: 100%; }

  /* The zone card kept its desktop side padding, which at 320 pushed a
     291px card through a 270px column. */
  .zone { padding-left: 16px; padding-right: 16px; padding-top: 62px; min-width: 0; }
  .zones__grid { min-width: 0; }
}

/* The pillars coverflow parks its off-centre slides outside the stage,
   which has no clipping of its own. In LTR they land inside the viewport
   anyway; mirrored for Arabic they ran up to 177px past the edge and gave
   the page a horizontal scrollbar. Clipping the section contains them in
   every language without changing the coverflow itself. */
@media (max-width: 899px) {
  .pillars { overflow: hidden; }
}

/* ── 320px specifics ───────────────────────────────────────────────
   Three findings from the audit at the narrowest phone width. */
@media (max-width: 359px) {
  /* "Exhibition Dates & Timings" was one unbroken run, 9px past the edge */
  .ftr__head--times span { white-space: normal; overflow-wrap: anywhere; }
  .ftr__head { align-items: flex-start; }

  /* the Target Sectors card kept a wider inner box than its track */
  .sector, .sector .zone__rule, .sector .zone__body { max-width: 100%; min-width: 0; }
  .zones__grid { grid-template-columns: minmax(0, 1fr); }

  /* the switcher had dropped to 11px, under the 12px floor everything
     else on a phone now respects */
  .topbar .lang { font-size: 12px; gap: 2px; }
  .topbar .lang a { padding: 9px 2px; }
}