/* Home page sections below the hero (About lives in hero.css for now). See DESIGN.md. */

/* Founding Members: headline and intro on one row, then a full-width logo wall in a
   hairline grid. Logos sit muted as navy silhouettes (filter #logo-mono in index.html)
   and fade to their own colours on hover. Each --w is the logo's width in a 260px cell
   in _source/logos/preview-white.png, scaled here to the real cell (tools/build_logo_wall.py). */
.members {
  background: var(--white); padding: 64px var(--margin); overflow: clip;
}
.members > .wrap { padding-inline: 0; max-width: var(--maxw); }
.members__title { grid-column: 1 / -1; }
.members__intro { grid-column: 1 / -1; margin-top: 16px; max-width: 46ch; }
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.logos {
  grid-column: 1 / -1;
  position: relative;
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; padding: 1px;
  background: var(--white); /* the gaps under the hairlines are solid too */
  container-type: inline-size;
}
/* The top and bottom rules run the full width of the page */
.logos::before, .logos::after {
  content: ""; position: absolute; left: -100vw; right: -100vw; height: 1px; background: var(--hairline);
}
.logos::before { top: 0; }
.logos::after { bottom: 0; }

/* Each cell draws its own 1px outline; across the 1px gaps neighbouring outlines coincide */
.logos li {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: 12px;
  outline: 1px solid var(--hairline);
  background: var(--white); /* solid, so no contour line crosses a logo */
}
.logo { position: relative; display: block; width: calc(var(--w) * 100cqw / 760); max-width: 76%; }
.logo img { display: block; width: 100%; height: auto; }
.logo__mono { filter: url(#logo-mono); transition: opacity 0.25s ease; }
.logo__colour { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; }

/* Colour on hover only where there is a real pointer; touch screens keep the muted wall */
@media (hover: hover) and (pointer: fine) {
  .logos li:hover .logo__colour { opacity: 1; }
  .logos li:hover .logo__mono { opacity: 0; }
}

/* The last cell fills the final row */
.logos .logos__join { grid-column: span 2; aspect-ratio: auto; }
.logos__join a {
  font-size: 1.125rem; color: var(--navy);
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s ease;
}
.logos__join a:hover, .logos__join a:focus-visible { text-decoration-color: var(--coral); }

@media (min-width: 768px) {
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logos li { aspect-ratio: 16 / 9; }
  .logo { width: calc(var(--w) * 100cqw / 1080); max-width: 74%; }
  .logos .logos__join { grid-column: span 1; aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .members { padding: 128px var(--margin); }
  .members__title { grid-column: 1 / span 5; align-self: end; }
  .members__intro { grid-column: 7 / span 5; align-self: end; margin-top: 0; padding-bottom: 6px; }
  .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 64px; }
  .logo { width: calc(var(--w) * 100cqw / 1560); max-width: 70%; }
}

/* Why Bermuda: full-bleed navy band. The drone footage (still on phones, slow connections
   and reduced motion; video otherwise, added by sections.js) is shown as a navy duotone:
   greyscale first, then multiplied into the navy. No cyan survives, and the footage can
   only darken the navy, so white text always has at least navy-on-white contrast. */
.why {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--navy); color: var(--white);
  padding: 96px var(--margin) 64px;
}
.why > .wrap { padding-inline: 0; max-width: var(--maxw); }
/* The wrapper is its own layer, so the blend sits on it and multiplies into the band's navy */
.why__media { position: absolute; inset: 0; z-index: -2; mix-blend-mode: multiply; }
.why__media img, .why__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(1.08); /* greyscale with enough contrast for islands and boats */
}
.why__media video { opacity: 0; transition: opacity 1s ease; }
.why__media video.is-playing { opacity: 1; }


.why__title { grid-column: 1 / -1; color: var(--white); }
.why__intro { grid-column: 1 / -1; margin-top: 20px; max-width: 52ch; color: var(--white); }

/* Each stat has its own divider; the gaps between stats are equal */
.stats { grid-column: 1 / -1; margin: 56px 0 0; display: grid; gap: 40px; }
.stat { margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.32); }
.stat__value {
  font-weight: var(--w-head); font-size: 3.5rem; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* A unit after the figure (T for trillion) sits smaller on the baseline */
.stat__unit { font-size: 0.55em; letter-spacing: 0; margin-left: 0.04em; }
.stat dd { margin: 0; }
.stat__text { margin-top: 16px; max-width: 34ch; text-wrap: pretty; }

@media (min-width: 768px) {
  .why { padding: 128px var(--margin) 96px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

@media (min-width: 1024px) {
  .why { padding: 160px var(--margin) 128px; }
  .why__title { grid-column: 1 / span 6; }
  .why__intro { grid-column: 1 / span 6; margin-top: 24px; }
  .stats { margin-top: 96px; column-gap: 64px; }
  .stat__value { font-size: 6rem; }
}

/* Committees: heading held on the left, numbered list on the right. In the column under
   the heading the page chart shows a family of nested 50 m contours that draw in as you
   scroll (depths.js); on phones and tablets they sit in a short band between heading and
   list. */
.committees { background: var(--white); padding: 64px var(--margin); }
.committees > .wrap { padding-inline: 0; max-width: var(--maxw); }
.committees__head { grid-column: 1 / -1; }
.committees__band { grid-column: 1 / -1; height: 144px; }
/* The list is one solid white box with a thin blue outline all the way round (the logo wall's
   treatment), so contour lines run behind it and round it, never through it. */
.committees__body {
  grid-column: 1 / -1;
  background: var(--white);
  outline: 1px solid var(--hairline); outline-offset: -1px;
}

.committee-list { list-style: none; margin: 0; padding: 0; }
/* Phones: number above the name so the name and mandate get the full width */
.committee {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 22px 20px 26px; border-top: 1px solid var(--hairline);
}
.committee:first-child { border-top: 0; }
.committee__num { margin-bottom: 6px; }
.committee__name {
  font-weight: var(--w-head); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--navy);
  text-decoration: underline 2px transparent; text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s ease;
}
.committee:hover .committee__name { text-decoration-color: var(--coral); }
.committee__mandate {
  margin-top: 8px; max-width: 46ch;
  font-weight: var(--w-lede); font-size: 1.25rem; line-height: 1.4; color: var(--ink);
}
.committees__note { max-width: none; padding: 24px 20px 28px; border-top: 1px solid var(--hairline); } /* full-width rule; the text keeps a readable line length */

@media (min-width: 1024px) {
  .committees { padding: 128px var(--margin); }
  .committees__head { grid-column: 1 / span 4; position: sticky; top: 96px; align-self: start; }
  .committees__band { display: none; }
  .committees__body { grid-column: 5 / span 8; }
  .committee { grid-template-columns: 3.5rem minmax(0, 1fr); padding: 32px 32px 34px; }
  .committees__note { padding: 28px 32px 32px; padding-right: 32%; }
  .committee__num { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: 0.6em; }
  .committee__name { grid-column: 2; grid-row: 1; }
  .committee__mandate { grid-column: 2; }
  .committee__name { font-size: 2rem; }
  .committee__mandate { font-size: 1.375rem; margin-top: 10px; }
}

/* Media (called In the News until 14 Oct 2026): a slider of items on mist (the About section's tone), over the depth chart. Each item is one solid
   white block with a hairline outline (the Founding Members cells' treatment): a white tile
   with the outlet's logo, then the item type (News or Blog) as a small hairline tag, the headline and the date.
   Items are compact (three across on desktop), after a news grid the team liked. Contour lines
   run behind the blocks and show in the gaps, round the heading and under the buttons; nothing
   is ever laid over a line, so no text needs a halo inside a block. A scroll-snap row, so it
   swipes and scrolls without JavaScript; sections.js adds Previous and Next, which hide when
   every item fits. */
.news { background: var(--mist); padding: 64px var(--margin); }
.news > .wrap { padding-inline: 0; max-width: var(--maxw); }
.news__title { grid-column: 1 / -1; }
.news__body { grid-column: 1 / -1; margin-top: 40px; }
.slider {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Edge to edge on phones, so each item sits exactly between the page margins */
  margin: -8px calc(-1 * var(--margin)); padding: 8px var(--margin); scroll-padding-inline: var(--margin);
}
.slider::-webkit-scrollbar { display: none; }
.press-list { --gap: 16px; --end: var(--margin); list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); }
/* A 1px spacer after the last item leaves --end of room (a zero-width one is ignored), so the last item can sit between the margins */
.press-list::after { content: ""; flex: none; width: 1px; margin-inline-start: calc(var(--end) - var(--gap) - 1px); }
.press {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column;
  background: var(--white); outline: 1px solid var(--hairline); outline-offset: -1px; /* solid: no contour line crosses a block */
}
/* The tile draws its own outline, since it sits over the block's */
.press__tile { position: relative; aspect-ratio: 16 / 9; background: var(--white); outline: 1px solid var(--hairline); outline-offset: -1px; }
/* Out of the flow, so a tall logo never stretches its tile: every tile keeps one shape */
.press__tile img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 52%; max-height: 58%; }
.press__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 20px 24px; }
/* The item type (News or Blog), as a small square-cornered tag with the logo wall's hairline */
.press__type {
  padding: 5px 10px; border: 1px solid var(--hairline);
  font-weight: 400; font-size: 0.875rem; line-height: 1.2; color: var(--navy);
}
.press__link {
  margin-top: 16px;
  font-weight: var(--w-lede); font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink);
  text-decoration: underline 1px transparent; text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s ease;
}
.press__date { margin-top: auto; padding-top: 20px; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-muted); }
/* The whole item is the link */
.press__link::after { content: ""; position: absolute; inset: 0; }
/* The block is solid white, so its text needs no halo (the section's halo is mist) */
.news .press { text-shadow: none; }
.press:hover .press__link { text-decoration-color: var(--coral); }
.press__link:focus-visible { outline: none; text-decoration-color: var(--coral); }
.press:has(.press__link:focus-visible) { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 2px; }

/* Previous and Next, at the right */
.slider-controls { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.slider-controls[hidden] { display: none; }
.slider-controls .btn { flex: none; }
.slider-controls .btn:disabled { opacity: 0.4; cursor: default; }
.slider-controls .btn:disabled:hover { border-color: var(--navy); color: var(--navy); background: var(--bg, var(--white)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (min-width: 768px) {
  .news { padding: 96px var(--margin); }
  .slider { margin-inline: -8px; padding-inline: 8px; scroll-padding-inline: 8px; }
  .press-list { --gap: 24px; --end: 8px; }
  .press { flex-basis: calc((100% - 24px) / 2); }
}

@media (min-width: 1024px) {
  .news { padding: 128px var(--margin); }
  .news__body { margin-top: 64px; }
  .press-list { --gap: 32px; }
  .press { flex-basis: calc((100% - 64px) / 3); }
  .press__link { font-size: 1.375rem; }
  .press__text { padding: 24px 24px 28px; }
}

/* Request to Join: a plain white section, after the Middle East Stablecoin Association's
   Get in touch band, with nothing written on the photos. The headline and text sit above, left,
   the photos are centred under them, and the button follows. Three roundtable photos in their
   own colours: the speaker large on the left, the group and the full meeting stacked on the
   right (on phones the speaker on top, the other two side by side). The grid is solid white,
   so contour lines run round it and never show in the gaps between the photos. */
.join { background: var(--white); padding: 64px var(--margin); }
.join > .wrap { padding-inline: 0; max-width: var(--maxw); }
.join__stage { grid-column: 1 / -1; width: 100%; max-width: 1002px; margin-inline: auto; }
.join__body { margin-top: 24px; }
.join__action { margin-top: 32px; display: flex; }

.join__photos {
  margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--white);
}
.join__pic { display: block; aspect-ratio: 3 / 2; background: var(--mist); }
.join__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.join__pic--lead { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .join__photos { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
  .join__pic { aspect-ratio: auto; min-height: 0; }
  .join__pic--lead { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3 / 2; }
}

@media (min-width: 1024px) {
  .join { padding: 128px var(--margin); }
  .join__body { margin-top: 32px; }
  .join__photos { margin-top: 64px; }
  .join__action { justify-content: flex-end; }
}

/* Depth chart: one tall contour map from the hero to the foot of the page. Each section
   shows its own slice, lined up with its place on the page (depths.js). Navy on white and
   mist, seafoam on navy and photo. Lines run behind content (see the contour rule below).
   The layer sits behind the content inside each section's own stacking context. */
.about, .members, .why, .committees, .news, .join, .footer { position: relative; isolation: isolate; }
.depth { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Each slice: a wrapper that takes the scroll response, and one layer per depth band that
   drifts (depths.js). The bands reach 40px past every edge, so they never leave a gap. */
.depth__map { position: absolute; left: 0; width: 100%; }
.depth__band {
  position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none;
  overflow: hidden; will-change: transform;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.depth--navy { color: var(--navy); }
/* Seafoam over the navy footage, kept faint */
.depth--foam { color: var(--seafoam); opacity: 0.3; }
.depth .g-deep { stroke-opacity: 0.34; }
.depth .g-slope { stroke-opacity: 0.55; }
.depth .g-shelf { stroke-opacity: 0.32; }
.depth .g-detail { stroke-opacity: 0.5; }

/* One rule: contour lines always run behind content, and nothing on top of them is ever
   see-through. Text stands in a cartographic halo of its section's background colour
   (--bg), so lines stop just short of the letters: 6px round body text, committee names,
   small text and the nav, about 7px round section headlines and stats. In blocks of body
   text depths.js also clears a band through the middle of each line (lowercase height),
   so the inside of a block is clear and its edges follow the letters. The halo is set on
   the section, where var(--bg) resolves to that section's colour, and inherited by its
   text. Solid things (buttons, logo cells, the portrait cutout) need none. */
.nav, .hero, .members, .committees, .join { --bg: var(--white); }
.about, .news, .footer { --bg: var(--mist); }
.nav, .hero, .about, .members, .committees, .news, .join, .footer {
  text-shadow:
    3px 0 0 var(--bg),
    2.1px 2.1px 0 var(--bg),
    0 3px 0 var(--bg),
    -2.1px 2.1px 0 var(--bg),
    -3px 0 0 var(--bg),
    -2.1px -2.1px 0 var(--bg),
    0 -3px 0 var(--bg),
    2.1px -2.1px 0 var(--bg),
    6px 0 0 var(--bg),
    5.7px 1.9px 0 var(--bg),
    4.9px 3.5px 0 var(--bg),
    3.5px 4.9px 0 var(--bg),
    1.9px 5.7px 0 var(--bg),
    0 6px 0 var(--bg),
    -1.9px 5.7px 0 var(--bg),
    -3.5px 4.9px 0 var(--bg),
    -4.9px 3.5px 0 var(--bg),
    -5.7px 1.9px 0 var(--bg),
    -6px 0 0 var(--bg),
    -5.7px -1.9px 0 var(--bg),
    -4.9px -3.5px 0 var(--bg),
    -3.5px -4.9px 0 var(--bg),
    -1.9px -5.7px 0 var(--bg),
    0 -6px 0 var(--bg),
    1.9px -5.7px 0 var(--bg),
    3.5px -4.9px 0 var(--bg),
    4.9px -3.5px 0 var(--bg),
    5.7px -1.9px 0 var(--bg);
}
.display, .h2, .stat__value {
  text-shadow:
    3.5px 0 1px var(--bg),
    2.5px 2.5px 1px var(--bg),
    0 3.5px 1px var(--bg),
    -2.5px 2.5px 1px var(--bg),
    -3.5px 0 1px var(--bg),
    -2.5px -2.5px 1px var(--bg),
    0 -3.5px 1px var(--bg),
    2.5px -2.5px 1px var(--bg),
    6.5px 0 1px var(--bg),
    6px 2.5px 1px var(--bg),
    4.6px 4.6px 1px var(--bg),
    2.5px 6px 1px var(--bg),
    0 6.5px 1px var(--bg),
    -2.5px 6px 1px var(--bg),
    -4.6px 4.6px 1px var(--bg),
    -6px 2.5px 1px var(--bg),
    -6.5px 0 1px var(--bg),
    -6px -2.5px 1px var(--bg),
    -4.6px -4.6px 1px var(--bg),
    -2.5px -6px 1px var(--bg),
    0 -6.5px 1px var(--bg),
    2.5px -6px 1px var(--bg),
    4.6px -4.6px 1px var(--bg),
    6px -2.5px 1px var(--bg);
}
.btn { text-shadow: none; }
/* Why Bermuda: the footage is the band's background and darker than any halo colour, so
   its white text has none */
.why .h2, .why .stat__value { text-shadow: none; }
.depth--foam use { stroke-opacity: 1; }

/* Footer: mist, the foot of the depth chart. One short band: logo and links on one line, the
   small print under a hairline. Lines run behind it under the contour rule. */
.footer { --bg: var(--mist); background: var(--mist); padding: 40px var(--margin) 32px; }
.footer > .wrap { padding-inline: 0; max-width: var(--maxw); }
.footer__top { display: flex; flex-direction: column; gap: 24px; }
.footer__logo { display: block; line-height: 0; align-self: flex-start; }
.footer__logo img { height: 36px; width: auto; }
/* The logo is an image, so it takes its mist halo from an SVG filter (index.html) rather than a text-shadow */
.footer__logo img { filter: url(#logo-halo); }
.footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer__nav a { display: inline-block; padding: 8px 0; color: var(--navy); text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.footer__nav a:hover { text-decoration-color: var(--coral); }
.footer__nav a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.footer__base { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; }
.footer__base p { font-size: var(--fs-label); line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-muted); }
.footer__note { max-width: 62ch; }

@media (min-width: 1024px) {
  .footer { padding: 48px var(--margin) 32px; }
  .footer__top { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__logo img { height: 44px; }
  .footer__base { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 48px; margin-top: 32px; }
  .footer__legal { text-align: right; white-space: nowrap; }
}