/* ══════════════════════════════════════════════════════════════════
   STICKY TOP BAR
   ------------------------------------------------------------------
   The site's real header, shared by every page. It sits over the hero
   photograph with no ground of its own, then fades to a solid bar with
   a hairline once the page scrolls — so the hero art stays full-bleed
   but the menu is reachable everywhere.

   The previous menu lived inside the hero, which is a fixed-height
   composition of absolutely-positioned pieces; seven links could not
   fit between the language switcher and the host mark and wrapped to a
   second line. Out here the bar owns the full column width.
   ══════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* At rest the bar carries a very light scrim rather than nothing at all:
     a soft top-down wash plus a touch of blur, so the links stay legible
     over the brightest part of the tower photograph without putting a
     hard-edged band across the artwork. It fades out downwards, so there
     is no visible seam where the bar ends. */
  background: linear-gradient(to bottom,
              rgba(11, 20, 15, .42) 0%,
              rgba(11, 20, 15, .26) 55%,
              rgba(11, 20, 15, 0) 100%);
  backdrop-filter: blur(3px) saturate(105%);
  -webkit-backdrop-filter: blur(3px) saturate(105%);
  border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
.topbar__inner {
  width: var(--col);
  margin-inline: auto;
  min-height: clamp(62px, 5.4vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.2vw, 40px);
}

/* scrolled state — a quiet ground so the links never fight the photo */
.topbar.is-stuck {
  background: linear-gradient(rgba(18, 30, 23, .92), rgba(18, 30, 23, .92));
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── live build: header is not sticky ──────────────────────────────
   The live site has no menu, so there is nothing in the bar worth
   keeping on screen while the reader scrolls. It sits at the top of the
   hero and leaves with it — no scrim, no scrolled state. */
.is-live .topbar {
  position: absolute;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.is-live .topbar.is-stuck {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.is-live .topbar .lang { text-shadow: 0 1px 10px rgba(8, 16, 12, .7); }

/* ── brand mark ────────────────────────────────────────────────────
   The home hero already shows the lockup at full size, so the bar's
   copy stays hidden until the page scrolls and the hero one leaves.
   Inner pages have no hero lockup, so it shows from the start. */
.topbar__mark { display: flex; align-items: center; text-decoration: none; flex: none; }
.topbar__lockup {
  display: block;
  width: clamp(112px, 11vw, 152px);
  aspect-ratio: 605 / 87;
  background: var(--cream);
  --m: url('../assets/icons/ycsf-lockup.svg');
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .45s ease, transform .45s ease;
}
.topbar.is-stuck .topbar__lockup,
.is-page .topbar__lockup { opacity: 1; transform: none; }

/* ── links ─────────────────────────────────────────────────────────*/
.sitenav { flex: 1 1 auto; display: flex; justify-content: center; }
.sitenav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitenav__list a {
  position: relative;
  display: block;
  padding: 9px 2px;
  font-family: var(--f-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: color .3s ease;
}
.sitenav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.4, .12, .2, 1);
}
.sitenav__list a:hover, .sitenav__list a:focus-visible { color: var(--ink-strong); }
.sitenav__list a:hover::after,
.sitenav__list a:focus-visible::after,
.sitenav__list a[aria-current="page"]::after { transform: scaleX(1); }
.sitenav__list a[aria-current="page"] { color: var(--ink-strong); }

/* ── right-hand end: language switcher, CTA, toggle ────────────────*/
/* margin-inline-start:auto so the group still sits at the far end on the
   Arabic and Chinese editions, where the menu is absent and there is no
   flexible middle to push against */
.topbar__end { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px);
               flex: none; margin-inline-start: auto; }
.topbar .lang { position: static; top: auto; left: auto; }

/* ── header order, mirrored per language ───────────────────────────
   The switcher sits at the leading edge of the reading order in every
   language — the left in English and Chinese, the right in Arabic —
   and the host mark takes the opposite end. Ordering the flex children
   rather than positioning them means the whole bar mirrors itself from
   the document's own direction.

   space-between rather than an auto margin on the switcher, because the
   bar has to hold both shapes: staging's English edition has the menu in
   the middle (.sitenav is flex:1 1 auto, so it absorbs the slack and the
   ends stay put), while the Arabic and Chinese editions — and every LIVE
   page — have no menu at all, and space-between still parks the switcher
   and the mark on opposite edges with nothing flexible between them.
   An auto margin could not do both: auto margins eat free space before
   flex-grow does, so it would have collapsed the centred menu. */
.topbar__end { display: contents; }
.topbar .lang    { order: 1; }
.sitenav         { order: 2; }
.topbar__mark    { order: 3; }
.sitenav__toggle { order: 4; }

.sitenav__toggle { display: none; }

/* the hero starts under the bar rather than behind its links */
.hero--page .hero__stage { padding-top: clamp(96px, 9vw, 132px); }

/* The host mark keeps its artboard position (hero.css, top 4.54%). It was
   pushed down while the header carried a booth CTA on that side; with the
   CTA gone the clearance is unnecessary, and the mark sits where the
   original composition puts it in every language. */


/* ── below 1100: the links move into a drop panel ──────────────────
   Seven English items + the switcher + the mark need ~927px of the bar's
   928px column at 1100. One pixel below that they do not fit, and the row
   used to overflow the bar rather than wrap or collapse — 59px out at
   1000, 128px at 900. Squeezing the gap and the type (the old 1099 tier)
   never recovered enough, so the panel now takes over at the first width
   where the row stops fitting instead of 200px later. */
@media (max-width: 1099px) {
  /* Only the inner pages need the bar's mark on a phone — the home
     hero already shows the lockup full size, and forcing the bar copy
     visible there put it straight on top of the YASREF mark. */
  .is-page .topbar__lockup { opacity: 1; transform: none; }
  .sitenav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: rgba(18, 30, 23, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4, .12, .2, 1);
  }
  .sitenav.is-open { max-height: 70vh; }
  .is-flat .sitenav { transition: none; }
  .sitenav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: var(--col);
    margin-inline: auto;
    padding: 6px 0 14px;
  }
  .sitenav__list a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .sitenav__list a::after { display: none; }

  /* the drop panel is position:absolute, so it is out of the flex flow and
     space-between would strand the mark in the middle of the bar. Push the
     mark and the burger together onto the trailing edge. Harmless on LIVE,
     where there is no burger and this is what space-between already did. */
  .topbar__mark { margin-inline-start: auto; }

  .sitenav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 36px;
    padding: 0 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
  }
  .sitenav__toggle span { display: block; height: 2px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
  .sitenav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sitenav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .sitenav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 599px) {
  /* At 375 the bar wanted 357px of content in 316px — a 112px lockup, a
     175px language switcher and the 42px toggle — so the right-hand group
     ran off the screen. Everything is trimmed to fit, with nothing hidden. */
  .topbar__inner { gap: 10px; min-width: 0; }
  .topbar__end   { gap: 8px; min-width: 0; }
  .topbar__lockup { width: 92px; }
  .topbar .lang { gap: 4px; font-size: 11.5px; }
  .topbar .lang a { padding: 9px 5px; }    /* taller for the thumb, narrower on the page */
  .topbar .lang .div { margin: 0; }
  .sitenav__toggle { width: 40px; height: 34px; padding: 0 8px; }
}

@media (max-width: 359px) {
  /* 12px is the floor the rest of the phone layout keeps, so the switcher
     holds it and the lockup gives up the width instead */
  .topbar__lockup { width: 72px; }
  .topbar .lang { font-size: 12px; gap: 2px; }
  .topbar .lang a { padding: 9px 2px; }
  .topbar__inner { gap: 8px; }

  /* the sector card's inner box was still wider than its track — these
     have to live here rather than in responsive.css, which loads first
     and therefore loses to this file */
  .sector, .sector .zone__t, .sector .zone__rule, .sector .zone__body {
    max-width: 100%;
    min-width: 0;
  }
  .zones__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════
   INNER PAGES
   ------------------------------------------------------------------
   Conference · Exhibition · Networking · Attend · Plan Your Visit ·
   Media.

   Everything here is expressed in the tokens base.css already
   defines — --s-section, --t-display, --col, the brand ramp — so the
   inner pages inherit the home page's rhythm, type scale and colour
   rather than re-stating any of it. Where a component already exists
   on the home page (.goal, .zone, .nums__cell, .aud-item) the markup
   reuses that class and only the grid around it is new.
   ══════════════════════════════════════════════════════════════════ */


/* ── page hero ─────────────────────────────────────────────────────
   A shortened version of the home hero: same photograph, same glow,
   no countdown or lockup animation. */
/* The home hero is a fixed-height stage with absolutely-positioned
   children. The page hero is the same photograph and glow but sized by
   its content, so every piece is returned to normal flow. */
.hero--page { height: auto; min-height: 0; }
.hero--page .hero__stage {
  padding-top: clamp(58px, 6vw, 86px);
  padding-bottom: clamp(46px, 5.4vw, 88px);
  display: block;
}
.hero--page .hero__lockup,
.hero--page .hero__title { position: static; margin-inline: 0; }
.hero--page .hero__lockup {
  width: min(320px, 46vw);
  height: auto;
  aspect-ratio: 605 / 87;
  display: block;
}
.hero__home { display: inline-block; text-decoration: none; }

.hero__title--page {
  font-size: var(--t-display);
  margin-top: clamp(28px, 3.4vw, 54px);
}
.hero__pagemeta {
  margin-top: var(--s-tight);
  max-width: 62ch;
  font-family: var(--f-body);
  font-size: var(--t-micro);
  line-height: 1.9;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ── generic page section ──────────────────────────────────────────
   Matches the home page's section rhythm exactly. */
.pg { padding-top: var(--s-section); padding-bottom: var(--s-section); }
.pg .h-section { text-align: center; }

.pg__prose {
  max-width: var(--measure);
  margin: var(--s-head) auto 0;
  text-align: center;
}
.pg__prose p {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.95;
  color: var(--ink-soft);
}
.pg__prose p + p { margin-top: 1.15em; }
.page-lede {
  font-size: var(--t-lede) !important;
  line-height: 1.7 !important;
  color: var(--ink-strong) !important;
  font-weight: 600;
}
.page-lede + p { margin-top: 1.5em !important; }

.pg__cta { margin-top: var(--s-block); display: flex; justify-content: center; }

.pg__note {
  margin-top: var(--s-tight);
  text-align: center;
  font-family: var(--f-body);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}


/* ── to-be-announced ───────────────────────────────────────────────
   The workbook marks these sections TBA. They are rendered as an
   honest placeholder rather than filled with invented copy. */
.pg--tba .pg__tba {
  margin: var(--s-head) auto 0;
  max-width: 46ch;
  padding: clamp(30px, 4vw, 54px) clamp(20px, 3vw, 40px);
  border: 1px dashed var(--line);
  border-radius: 2px;
  text-align: center;
  font-family: var(--f-display);
  font-size: var(--t-sub);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ── program at a glance ───────────────────────────────────────────
   The same bordered card as the Exhibition Zones, minus the coloured
   header. Two stacked rows, so every card in a row shares one grid and
   lines up exactly — which the earlier two-column split could not do. */
.prog__row {
  display: grid;
  gap: clamp(14px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
.prog__row--four { margin-top: var(--s-head); }
.prog__row--two  { margin-top: clamp(18px, 2vw, 26px); }
/* Two across rather than four, and the architecture pair full width.
   Measured at 1440: four across gave each title 237px of room when the
   longest needs 369, so every one of them broke — and the widest card
   wrapped for the sake of 5px. At these widths each title fits on a
   single line, and only genuinely long copy on a narrow screen wraps. */
@media (min-width: 640px) { .prog__row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prog__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 96px;
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
  border-radius: 10px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              filter .45s ease;
}
.prog__card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 13px 24px var(--shadow));
}
.prog__card:hover .zone__border { filter: brightness(1.16) saturate(1.06); }
.prog__card-t {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--ink);
  /* when a wrap is genuinely unavoidable, split the lines evenly rather
     than leaving one word stranded */
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}
.prog__card--wide { min-height: 78px; }

.prog__arch { margin-top: var(--s-block); }
.prog__arch-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) { .prog__card:hover { transform: none; } }


/* ── Why Participate — five of the home page's .goal cards ─────────*/
.obj__grid--five {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 40px);
  margin-top: var(--s-head);
}
/* Five cards never fill a row evenly, so the last row is centred rather
   than left with a hole beside it. The grid is laid out in half-columns —
   six tracks for three cards, four for two — and the trailing cards are
   placed one half-column in, which centres them without breaking the
   subgrid rows the titles, rules and copy align on. */
@media (min-width: 700px) and (max-width: 1099px) {
  .obj__grid--five { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .obj__grid--five .goal { grid-column: span 2; }
  .obj__grid--five .goal:nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1100px) {
  .obj__grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .obj__grid--five .goal { grid-column: span 2; }
  .obj__grid--five .goal:nth-child(4) { grid-column: 2 / span 2; }
  .obj__grid--five .goal:nth-child(5) { grid-column: 4 / span 2; }
}


/* ── Target Sectors ────────────────────────────────────────────────
   The zone card, but its icon sits inside the body rather than in a
   coloured header strip — these eight glyphs come from the client's
   Target Sectors deck and read better on the card's own ground. */
.sector { padding-top: 26px; }
.sector .zone__t { margin-top: 0; }
.sector .zone__body p { margin: 0; }
.sector__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--a), var(--b));
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              filter .45s ease;
}
.sector__ico .zone__ico { width: 28px; height: 28px; color: var(--cream); }
.sector:hover .sector__ico { transform: scale(1.08) rotate(-5deg); filter: brightness(1.12); }

@media (max-width: 599px) {
  .sector__ico { width: 46px; height: 46px; }
  .sector__ico .zone__ico { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .sector:hover .sector__ico { transform: none; } }


/* ── participation timeline ────────────────────────────────────────*/
.tl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 44px);
  margin-top: var(--s-head);
}
@media (min-width: 900px) { .tl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tl {
  padding: clamp(24px, 2.6vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
}
.tl__when {
  margin-top: 6px;
  font-family: var(--f-body);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tl__list { margin: 18px 0 0; padding: 0; list-style: none; }
.tl__list li {
  position: relative;
  padding: 0 0 0 20px;
  font-family: var(--f-body);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--ink-soft);
}
.tl__list li + li { margin-top: 12px; }
.tl__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 2px;
  background: var(--red);
}


/* ── Who Attends ───────────────────────────────────────────────────*/
.who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 40px);
  margin: var(--s-head) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .who__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.who__t {
  font-family: var(--f-display);
  font-size: var(--t-sub);
  line-height: 1.35;
  color: var(--ink-strong);
}
.who__p {
  margin-top: 14px;
  font-family: var(--f-body);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--ink-soft);
}


/* ── attendance figures — the home page's .nums cells, four up ─────*/
.nums__grid--four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 56px);
  margin: var(--s-head) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .nums__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* sections.css shrinks the first cell's halo, a value tuned for the home
   page's shorter "130+". All four figures here are full width, so the
   halo is returned to the standard height. */
.nums__grid--four .nums__cell:first-child .nums__glow { height: 110.16px; }


/* ── forum pillars, as static cards ────────────────────────────────*/
.pcard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 46px);
  margin-top: var(--s-head);
}
@media (min-width: 780px)  { .pcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pcard__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pcard { position: relative; }
.pcard img {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 685;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.pcard__body { margin-top: clamp(18px, 2vw, 26px); }
.pcard__t {
  font-family: var(--f-display);
  font-size: var(--t-sub);
  line-height: 1.35;
  color: var(--ink-strong);
}
.pcard__p {
  margin-top: 14px;
  font-family: var(--f-body);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--ink-soft);
}


/* ── media: channels and accreditation ─────────────────────────────*/
.chan__grid,
.acc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 46px);
  margin-top: var(--s-head);
}
@media (min-width: 780px) {
  .chan__grid, .acc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.chan__t, .acc__t {
  font-family: var(--f-display);
  font-size: var(--t-sub);
  color: var(--ink-strong);
}
.chan__list, .acc__list { margin: 18px 0 0; padding: 0; list-style: none; }
.chan__list li, .acc__list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--ink-soft);
}


/* ── responsive ────────────────────────────────────────────────────*/
@media (max-width: 899px) {
  /* the menu collapses behind a toggle; the CTAs stay visible */

  /* ?flat=1 is the site's QA mode: it kills transitions so geometry can be
     measured. The preview pane reports document.hidden, which freezes
     transitions mid-flight and made this menu measure 0px tall even when
     open, so the nav opts into flat mode too. */
}

@media (max-width: 599px) {
  .hero--page { padding-bottom: 40px; }
  .hero__title--page { font-size: 26px; line-height: 1.25; }
  .hero__pagemeta { font-size: 10px; letter-spacing: .05em; }
}



/* ══════════════════════════════════════════════════════════════════
   ALIGNMENT
   ------------------------------------------------------------------
   Every card grid uses the same device the home page's Exhibition
   Zones use: the card is itself a grid whose rows are `subgrid`, so
   the title, the rule and the body sit on shared rows across the
   whole row of cards. A two-line title can then no longer push its
   own rule and copy out of line with a one-line neighbour.
   ══════════════════════════════════════════════════════════════════ */

/* ── Why Participate (.goal cards) ─────────────────────────────────
   The home page's .goal floats its number beside a fixed-width title,
   which only stays aligned because those titles carry hand-placed
   <br>s. These titles come from the workbook and wrap freely, so the
   card becomes a two-column grid instead. */
.obj__grid--five { grid-auto-rows: auto; align-items: start; }
.obj__grid--five .goal {
  display: grid;
  grid-template-columns: 87.3px minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  column-gap: 0;
}
.obj__grid--five .goal__n { grid-column: 1; grid-row: 1; float: none; width: auto; }
.obj__grid--five .goal__t { grid-column: 2; grid-row: 1; width: auto; margin: 2.9px 0 0; }
.obj__grid--five .goal__rule { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 9.09px; }
.obj__grid--five .goal__p { grid-column: 1 / -1; grid-row: 3; align-self: start; }

/* ── Target Sectors ────────────────────────────────────────────────
   .zone reserves 70px of top padding for the coloured header strip,
   which these cards do not have. */
.sector { min-height: 0; padding-top: 26px; }
.sector .zone__body { align-self: start; }

/* ── Who Attends ───────────────────────────────────────────────────*/
.who__grid { grid-auto-rows: auto; align-items: start; }
.who {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}
.who .goal__rule { align-self: start; margin-top: 14px; }
.who__p { margin-top: 14px; align-self: start; }

/* ── Forum Pillars ─────────────────────────────────────────────────*/
.pcard__grid { grid-auto-rows: auto; align-items: start; }
.pcard {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;              /* image · title · rule · body */
  align-content: start;
}
.pcard__t { margin-top: clamp(18px, 2vw, 26px); align-self: start; }
.pcard .goal__rule { align-self: start; margin-top: 14px; }
.pcard__p { align-self: start; }

/* ── Participation Timeline ────────────────────────────────────────*/
.tl__grid { grid-auto-rows: auto; align-items: stretch; }
.tl {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;              /* number · title · date · rule · list */
  align-content: start;
}
.tl .goal__n { float: none; width: auto; }
.tl .goal__t { width: auto; margin: 6px 0 0; }
.tl .goal__rule { align-self: start; margin-top: 14px; }
.tl__list { align-self: start; }

/* ── Media channels and accreditation ──────────────────────────────*/
.chan__grid, .acc__grid { grid-auto-rows: auto; align-items: start; }
.chan, .acc {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;              /* title · rule · list */
  align-content: start;
}
.chan .goal__rule, .acc .goal__rule { align-self: start; margin-top: 12px; }
.chan__list, .acc__list { align-self: start; }


/* ══════════════════════════════════════════════════════════════════
   MOTION — the same reveal, stagger and rule-sweep as the home page
   ------------------------------------------------------------------
   sections.css defines the stagger delays and the shine only as far
   as the sixth child, which covers the home page's largest grid.
   Target Sectors and Who Attends carry eight, so the sequence is
   continued here on the same .09s step.
   ══════════════════════════════════════════════════════════════════ */
[data-reveal="stagger"].is-in > *:nth-child(7)  { transition-delay: .54s; }
[data-reveal="stagger"].is-in > *:nth-child(8)  { transition-delay: .63s; }
[data-reveal="stagger"].is-in > *:nth-child(9)  { transition-delay: .72s; }
[data-reveal="stagger"].is-in > *:nth-child(10) { transition-delay: .81s; }

[data-reveal="stagger"].is-in > *:nth-child(7)  .goal__rule::after { animation-delay: .84s; }
[data-reveal="stagger"].is-in > *:nth-child(8)  .goal__rule::after { animation-delay: .93s; }
[data-reveal="stagger"].is-in > *:nth-child(9)  .goal__rule::after { animation-delay: 1.02s; }
[data-reveal="stagger"].is-in > *:nth-child(10) .goal__rule::after { animation-delay: 1.11s; }

/* hover, matching .nums__cell and .zone on the home page */
.pcard, .who, .tl, .chan, .acc { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.pcard:hover, .who:hover { transform: translateY(-4px); }
.tl:hover { transform: translateY(-4px); }
.pcard img { transition: filter .45s ease; }
.pcard:hover img { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .pcard:hover, .who:hover, .tl:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — measured against the home page
   ------------------------------------------------------------------
   Every value below is taken from its home-page counterpart rather
   than chosen here:
     running prose   .about__body   --t-lede  / 1.6
     card body       .goal__p       --t-body  / 1.5
     card title      .goal__t       --t-sub   / 1.25 / 600 Conthrax
     list copy       .zone__body p  --t-small / 1.5  / 300 Alexandria
   ══════════════════════════════════════════════════════════════════ */

/* running prose — .goal__p metrics, not the 1.95 leading used before */
.pg__prose p {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
}
.pg__prose p + p { margin-top: 1.25em; }

/* the opening line of a section — .about__body */
.page-lede {
  font-size: var(--t-lede) !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  font-weight: 400;              /* .about__body is 400 — size carries the hierarchy */
}

/* card titles — .goal__t */
.who__t, .pcard__t, .chan__t, .acc__t, .prog__arch-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--ink);
}

/* card bodies — .goal__p */
.who__p, .pcard__p {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
}

/* list copy — .zone__body p */
.tl__list li, .chan__list li, .acc__list li, .prog__list li {
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
}
.tl__list li + li { margin-top: 14px; }
.tl__list li::before, .prog__list li::before { top: 10px; }
.prog__list li { padding-top: 13px; padding-bottom: 13px; }




/* ══════════════════════════════════════════════════════════════════
   SUBGRID ROW GAPS
   ------------------------------------------------------------------
   A subgrid inherits its parent's gap between its own rows. The card
   grids need a wide gap BETWEEN cards, which was then also being
   applied between each card's number, title, date, rule and copy —
   up to 44px of dead space inside every card. The cards restate a
   row-gap of their own; the element margins, which already match the
   home page's, do the internal spacing.
   ══════════════════════════════════════════════════════════════════ */
.obj__grid--five .goal,
.who,
.pcard,
.tl,
.chan,
.acc { row-gap: 0; }

/* with the inherited gap gone, these carry the home page's own steps */
.tl .goal__t   { margin-top: 14px; }
.tl__when      { margin-top: 8px; }
.tl .goal__rule{ margin-top: 18px; }
.tl__list      { margin-top: 13px; }   /* lands on the home zone card's 36px rule-to-copy step */
.tl__list li + li { margin-top: 12px; }
.who .goal__rule, .pcard .goal__rule { margin-top: 12px; }
.who__p { margin-top: 12.43px; }              /* .goal__p's own margin */
.pcard__p { margin-top: 6px; }
.chan .goal__rule, .acc .goal__rule { margin-top: 12px; }
.chan__list, .acc__list { margin-top: 12px; }


/* Subgrid makes every card's rule share one row, so a one-line title in a
   row whose tallest title runs to three lines leaves slack somewhere. Left
   at the default it opens between the title and its rule, which is the one
   gap that reads as broken. Anchoring the title to the bottom of its row
   moves that slack above the title instead, where it sits against the
   image or the number and is invisible. */
/* Titles start on the same line across a row. Anchoring them to the bottom
   of their shared subgrid row kept the gap to the rule even, but pushed a
   two-line title down so its first line sat below a three-line neighbour's.
   Aligned to the top, every title in a row begins together — the slack from
   the differing lengths falls above the rule instead, where it is even
   across the row because the rules share their own row. */
.pcard__t, .who__t, .tl .goal__t, .chan__t, .acc__t { align-self: start; }
/* A one-line title in a row whose tallest runs to two lines was sitting on
   the second line, dragging its number down with it. Centred, it sits
   between the two — the rules still share their own subgrid row, so the
   alignment across the row is unaffected. */
.obj__grid--five .goal__t, .obj__grid--five .goal__n { align-self: center; }


/* the bar joins the site's ?flat=1 QA mode: the preview pane reports
   document.hidden, which freezes transitions mid-flight and makes the
   scrolled state read as transparent even when it is applied */
.is-flat .topbar,
.is-flat .topbar__lockup { transition: none; }