/* ══════════════════════════════════════════════════════════════
   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__partners {
    position: static;
    inset: auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* the bar's own inset is set below, after the 1099 flow tier */
  }
  .hero__partners > * { position: static; }
  .p-sinopec { width: 50px;  height: 50px; }
  .p-aramco  { width: 87px;  height: 33px; }
  .p-yasref  { width: 57px;  height: 24px; }
  .p-sep     { width: 1px; height: 29px; }
  .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; }
  .pat__stage { margin-top: 30px; 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 { height: auto; min-height: 150px; 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; }
  .spons__row {
    position: static;
    height: auto;
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    gap: 30px 16px;
    padding-inline: 20px;
  }
  .spons__logo { position: static; }
  .spons__logo--1 { transform: scale(.78); }
  .spons__logo--2 { width: 108px; height: 108px; }
  .spons__logo--3 { width: 190px; height: 54px; }
  .spons__logo--4 { width: 104px; height: 104px; }
  .spons__sep { display: none; }

  /* ── 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__org-label { font-size: 10px; letter-spacing: 3px; }
  .ftr__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .ftr__copy { grid-column: 1; }
  .ftr__org {
    grid-column: 1;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


/* ── 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) {
  /* 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__partners {
    position: static;
    align-self: stretch;
    justify-content: center;
    background: #16261d;
    margin-inline: calc(-1 * var(--gutter));
    margin-top: -22px;
    padding: 13px var(--gutter);
  }
  .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) {
  .hero__partners {
    margin-inline: calc(-1 * var(--gutter) - 20px);
    padding-inline: calc(var(--gutter) + 20px);
  }

  /* 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%; }
  .hero__title  { margin-top: 88px; }
}