/* ==========================================================================
   Women's Advocacy — slides 27-31 of old.pptx

   Geometry comes from two places, and where they disagree Canva wins:

     extract.py           the PowerPoint export. Reliable for positions and
                          type sizes, but it writes every image with `stretch`
                          and no srcRect, so all crops are lost.
     Canva DAGWh8EbLBY    pages 27-31, read with open_transaction. Gives the
                          real imageBox for every frame, plus element opacity,
                          bullet lists and text-transform, none of which
                          survive the PPTX export. Canva reports `pos` as y,x —
                          transposed — so every pair below has been swapped.

   Every source size is rebased by 1300/1704 = 0.763 and expressed against the
   1300px container, as in site.css. Positions inside a photo cluster are
   percentages of that cluster's own source bounding box, so the cluster scales
   as one piece however wide its column ends up.
   ========================================================================== */

/* `.wa` is the body class swati_body_class() puts on the advocacy page, and
   every token below used to hang off it alone. That was fine while these bands
   only ever appeared on that page — but wa-hero is now also a band on home,
   where the body carries no `wa` class, so `var(--wa-hero)` and the rest
   resolved to nothing: an invalid declaration, and the title fell back to the
   inherited body size while its siblings kept theirs. Same for --font-hand
   under the photo captions.

   `.wa-bleed` is the wrapper every one of these bands carries, so declaring the
   tokens there too puts them within reach wherever a band lands. On the
   advocacy page it changes nothing — same values, one level further in, and
   custom properties inherit either way. */
.wa,
.wa-bleed {
  /* The deck sets every handwritten photo caption in "Canva Student Font", a
     licensed face that appears nowhere else in this build (the footer has the
     same problem with TT Drugs). The site body face stands in. If a licensed
     handwriting face is ever added, set it here and all ten captions follow. */
  --font-hand: var(--font-body);

  /* Photo furniture, taken from the deck's own frame artwork.
     --c-card  polaroid body,  Canva SHAPE fill #f2f1eb  (slides 28 and 31)
     --c-mat   landscape mat,  image43.png sampled       (slide 30 — neutral)
     --c-edge  photo stroke,   Canva stroke #fffbf7      (slides 29 and 31) */
  --c-card: #f2f1eb;
  --c-mat:  #f3f3f3;
  --c-edge: #fffbf7;

  /* The deck draws every drop shadow as a pre-blurred bitmap (image20.png, at
     29% opacity, peak alpha 164). Drawn in CSS here instead, following the
     biography frames — the bitmap is 64KB of blur the browser does for free. */
  --shadow-photo: 0 clamp(5px, 0.92vw, 12px) clamp(12px, 2.31vw, 30px) rgba(41, 41, 41, 0.30);

  /* Type scale. Source sizes are Canva canvas px (= PowerPoint pt x 96/72). */
  --wa-hero:    clamp(2.00rem, 4.93vw, 4.01rem);   /* 84.01 -> 64.1px */
  --wa-title:   clamp(1.90rem, 4.70vw, 3.82rem);   /* 80    -> 61.0px */
  --wa-title-l: clamp(2.00rem, 5.01vw, 4.07rem);   /* 85.33 -> 65.1px */
  --wa-fact:    clamp(0.85rem, 1.57vw, 1.27rem);   /* 26.67 -> 20.4px */
  --wa-link:    clamp(0.80rem, 1.41vw, 1.14rem);   /* 24    -> 18.3px */
  --wa-vidcap:  clamp(0.90rem, 1.80vw, 1.46rem);   /* 30.67 -> 23.4px */
}

/* --------------------------------------------------------------------------
   Shared section chrome
   -------------------------------------------------------------------------- */

/* Several florals run off the canvas edge in the source, so any section that
   carries one has to clip rather than widen the page. */
.wa-bleed {
  position: relative;
  overflow: hidden;
}

/* Decoration is anchored to the content box rather than the viewport, like
   .ornament-tr in site.css: widths are percentages of .page, offsets are vw
   against the 1300px container, so the florals keep their relationship to the
   copy at every width instead of drifting to the screen edges. */
.wa-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.wa-decor img { width: 100%; }

.wa-page { position: relative; z-index: 1; }
.wa-page > * { position: relative; z-index: 1; }

/* `.wa-page > *` and `.wa-decor` have the same specificity, so without this
   rule the later `position: relative` won and every floral dropped into normal
   flow — each one reserving its full height above the copy. The florals must
   stay out of flow and behind it; percentages below are against the .page
   padding box (--region-max, 1330px), which is what absolute positioning
   resolves them against. */
.wa-page > .wa-decor { position: absolute; z-index: 0; }

/* Slide titles. 28/30/31 are Cinzel; 29 is Cinzel one step larger. All four
   carry a text-transform in the design — the PPTX export bakes the uppercase
   into the literal string, Canva stores the sentence case. Sentence case is
   authored here so assistive tech gets real words. */
.wa-title {
  margin: 0 0 clamp(0.75rem, 2.2vw, 1.8rem);
  font-family: var(--font-engraved);
  font-size: var(--wa-title);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.048em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.wa-title--lg { font-size: var(--wa-title-l); line-height: 1.03; }

/* Bulleted body copy. Source marL is 518173 EMU (54.4px) with a -259086 EMU
   hang against a 32px face — 1.275em / -0.638em, so em values carry the
   rebase without further arithmetic. */
.wa-list {
  margin: 0;
  padding-left: 1.28em;
  font-size: var(--step-body);
  line-height: 1.8;
  color: var(--c-ink);
}

.wa-list > li { margin-bottom: 0.2em; }

/* A YouTube reference: a line of caption, then the icon and the bare URL, laid
   out exactly as the source prints it. */
.wa-video {
  margin: clamp(1.25rem, 3.6vw, 2.9rem) 0 0;
  font-size: var(--wa-vidcap);
  line-height: 1.28;
  color: var(--c-ink);
}

.wa-video p { margin: 0; }

.wa-video__link {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.1vw, 0.9rem);
  margin-top: clamp(0.4rem, 1.2vw, 1rem);
  font-size: var(--wa-link);
}

.wa-video__link img { width: clamp(28px, 3.46vw, 45px); }   /* 58.9 -> 45px */

/* Was the source's #5271FF at 3.4:1. The body ink instead, on request, with
   every other video link on the site — 5.25:1. The underline is now the only
   cue that these are links, so it stays. */
.wa-link {
  color: #6b5e54;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Shared photo furniture
   -------------------------------------------------------------------------- */

/* A cluster is laid out as percentages of its own source bounding box, so it
   needs a fixed aspect and a positioning context. container-type makes it a
   size container; the polaroids inside become containers in turn, which is
   what lets their handwritten captions be sized in cqw — a percentage of the
   card, the only thing on this page that scales predictably. */
.wa-cluster {
  position: relative;
  container-type: inline-size;
}

.wa-cluster > * { position: absolute; margin: 0; }

/* Polaroid, slides 28 and 31. The design draws it as a Canva SHAPE on a
   430.4x500 viewBox with the photo window at x 19.5..404.5, y 23.2..392.8.
   The four percentages below reproduce that window and the card's own height
   falls out of the sum — no aspect-ratio needed, and none wanted, since the
   two would fight over the same box.

   The window has to sit on the inner <picture>, not on the card. Percentage
   padding resolves against the *containing block's* width, and the card is an
   absolutely positioned child of .wa-cluster, so on the card itself these
   values were percentages of the whole cluster — 2.6x too big on slide 28.
   That inflated every card to 1.49:1 against the source's 1.16:1, shrank each
   photo to 73% of the card where the design has 89%, and pushed the last
   polaroid 75px below the cluster, where the section's overflow:hidden cut the
   bottom line off its caption. <picture> is in normal flow inside the card, so
   here the same numbers mean what they say.

   Keeping the card free of padding also makes container-query units measure
   the card rather than the photo window, which is what the handwritten
   captions below are sized against. */
.wa-polaroid {
  container-type: inline-size;
  background: var(--c-card);
  box-shadow: var(--shadow-photo);
}

.wa-polaroid > picture {
  display: block;
  padding: 5.390% 6.017% 24.907% 4.531%;
}

.wa-polaroid img {
  width: 100%;
  aspect-ratio: 1.04165;          /* 89.452% / 85.875% of the card width */
  object-fit: cover;
}

/* Two kinds of caption: some sit in the deep bottom band in black, some over
   the photograph in white. */
.wa-cap {
  position: absolute;
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(0.75rem, 1.5vw, 1.2rem);   /* fallback where cqw is absent */
  line-height: 1.1;
  color: #000;
}

/* The white captions carry no shadow in the deck and can land on a pale part
   of the photograph. The shadow is the one change made to the source styling
   here, and it is what keeps the names above the contrast floor. */
.wa-cap--over {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* Landscape mat, slide 30. image43.png is a white card drawn already tilted
   14.46deg inside its own PNG, which is why the deck's frame rotation and its
   photo rotation differ by exactly that much. Rebuilt as a padded card that
   carries only the net rotation, so it stays sharp and a 184KB bitmap goes
   away. The border measures an even 59/1472 of the artwork on all four sides. */
.wa-mat {
  background: var(--c-mat);
  box-shadow: var(--shadow-photo);
}

/* On the inner <picture> for the same reason as .wa-polaroid above: on the
   absolutely positioned card this was 4.95% of the cluster, so the mat drew a
   border 19% wider than the artwork's. */
.wa-mat > picture {
  display: block;
  padding: 4.95%;
}

.wa-mat img {
  width: 100%;
  aspect-ratio: 640.25 / 427.41;
  object-fit: cover;
}

/* ==========================================================================
   Hero — slide 27
   Source geometry (1920x1080 canvas):
     floral      x=0   y=0    892x1083, element opacity 22% (baked into alpha)
     title       x=108 y=438  w=773  84.01px Cinzel Decorative Bold, ls -0.048
     window      x=827 y=108  985x1316 — 344px of it runs past the canvas
     photo grid  x=854 y=176  three 304px columns, 9px gutters, 297px rows
     labels      "Indian Embassy, NY" and "At the White House", white, on the
                 bottom edge of their tile
   ========================================================================== */

.wa-hero-bleed {
  background: url('../../images/womens-advocacy-floral-left.png') left top / auto 100% no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/womens-advocacy-floral-left.webp') type('image/webp'),
    url('../../images/womens-advocacy-floral-left.png')  type('image/png')
  ));
}

/* Deliberately not .page: the window has to reach the section's bottom edge,
   so there is no bottom padding for it to be clipped away from. */
.wa-hero {
  max-width: var(--region-max);
  margin-inline: auto;
  padding: clamp(1.5rem, 6.34vw, 5.15rem) var(--gutter) 0;   /* y=108 -> 82px */
}

.wa-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--wa-hero);
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: -0.048em;
  color: var(--c-ink);
}

/* The window is a browser-chrome graphic (image24.png), recoloured
   #808184 -> #ddccc2 in the design: a title bar, three knocked-out dots and
   4px rails around a transparent interior. All of that is cheaper and sharper
   in CSS than as a 985px bitmap. */
.wa-window {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 985.36 / 972;      /* 972 = the 1080 canvas less the y=108 top */
  border-radius: clamp(5px, 0.76vw, 10px) clamp(5px, 0.76vw, 10px) 0 0;
  overflow: hidden;
}

/* Title bar. The three dots are knocked out of the artwork; the page texture
   behind them is near-flat #ecebe8, so filling them with the page colour is
   indistinguishable and survives the border-radius clip. Colour first,
   gradients second, so the bar still paints if cqw is unsupported. */
.wa-window::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4.578%;                  /* 44.5 / 972 */
  z-index: 2;
  background: #ddccc2;
  background-image:
    radial-gradient(circle 0.635cqw at 4.516% 48.3%, var(--c-bg) 98%, transparent 100%),
    radial-gradient(circle 0.635cqw at 6.629% 48.3%, var(--c-bg) 98%, transparent 100%),
    radial-gradient(circle 0.635cqw at 8.749% 48.3%, var(--c-bg) 98%, transparent 100%);
}

/* Side rails only — the interior stays transparent so the page texture reads
   through it, exactly as the source artwork does. */
.wa-window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-inline: clamp(2px, 0.33vw, 4.3px) solid #ddccc2;   /* 5.6 -> 4.3px */
  border-radius: inherit;
  pointer-events: none;
}

.wa-window__grid {
  position: absolute;
  left: 2.177%;                    /* 21.45 / 985.36 */
  right: 2.177%;
  top: 6.981%;                     /* (175.86 - 108) / 972 */
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(3px, 0.53vw, 7px);    /* 9.1 -> 6.9px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-window__grid > li { position: relative; overflow: hidden; }
.wa-window__grid figure { margin: 0; height: 100%; }

.wa-window__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Row 1: a portrait tile, then a wide tile across two columns.
   Row 2: a wide tile, and a tall tile carried down into row 3.
   Row 3: two tiles, the second of which the canvas cuts off — reproduced by
   anchoring that one crop to the top of its cell. */
.wa-tile--wide { grid-column: span 2; }
.wa-tile--tall { grid-row: span 2; }
.wa-tile--clip img { object-position: 50% 0; }

.wa-tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(0.75rem, 1.6vw, 1.3rem);   /* fallback where cqw is absent */
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* cqw is a percentage of the window, which is what the grid tracks derive
   from, so the labels scale with their tile. */
.wa-tile__cap--embassy { bottom: 1.4%; font-size: max(0.75rem, 3.789cqw); line-height: 0.93; }
.wa-tile__cap--wh      { bottom: 1.2%; font-size: max(0.75rem, 4.060cqw); line-height: 1.4; }

/* ==========================================================================
   An active promoter of women leaders — slide 28
   Source geometry (1920x1080 canvas):
     floral      x=547  y=-20  544x433
     floral      x=1520 y=-152 536x448 rot -29.63
     title       x=89   y=257  w=900  80px Cinzel, uppercase
     bullets     x=89   y=462  w=894  32px, disc, four items
     six polaroids; cluster bounding box (rotation included) x=1016..1821
     y=38..1020
   ========================================================================== */

.wa-promoter { padding-block: clamp(1.25rem, 2.25vw, 1.83rem) clamp(2rem, 3.55vw, 2.89rem); }

.wa-promoter .wa-decor--tl { left: 26.30%; top: -1.20vw; width: 31.21%; }
.wa-promoter .wa-decor--tr { left: 82.11%; top: -8.92vw; width: 30.73%; transform: rotate(-29.63deg); }

.wa-leaders { aspect-ratio: 804.9 / 981.2; }

.wa-leaders .wa-polaroid--1 { left: 11.69%; top:  1.99%; width: 42.59%; transform: rotate(-7.0569deg); }
.wa-leaders .wa-polaroid--2 { left: 57.98%; top:  0.97%; width: 41.76%; transform: rotate(-0.5957deg); }
.wa-leaders .wa-polaroid--3 { left: 15.11%; top: 31.86%; width: 38.88%; transform: rotate(8.6548deg); }
.wa-leaders .wa-polaroid--4 { left:  3.67%; top: 58.36%; width: 38.32%; transform: rotate(-10.2697deg); }
.wa-leaders .wa-polaroid--5 { left: 58.48%; top: 42.66%; width: 35.97%; transform: rotate(6.6903deg); }
.wa-leaders .wa-polaroid--6 { left: 47.66%; top: 63.67%; width: 37.94%; transform: rotate(-0.5957deg); }

/* Caption boxes as percentages of their own card; font sizes in cqw, which is
   what the design's absolute sizes come to once the card is scaled. */
.wa-cap--rahmani  { left:   3.500%; top:  6.694%; width: 100.26%; font-size: max(0.75rem, 10.889cqw); line-height: 0.93; text-align: left; }
.wa-cap--gaouette { left:   0.756%; top: 82.207%; width:  99.76%; font-size: max(0.75rem, 7.537cqw); line-height: 1;    text-align: center; }
.wa-cap--clinton  { left:  36.156%; top:  8.907%; width:  69.60%; font-size: max(0.75rem, 10.889cqw); text-align: center; }
.wa-cap--harris   { left:  -3.508%; top: 83.269%; width: 123.23%; font-size: max(0.75rem, 10.204cqw); text-align: center; }
/* The deck gives this caption a 302px box on a 289px card — 121% of the card
   once the offset is added — which put its right edge past the viewport
   between roughly 1150px and 1300px wide, where .wa-bleed clipped it. The box
   is left-aligned, so shrink-wrapping the text renders identically and keeps
   the whole caption inside the column at every width. */
.wa-cap--pelosi   { left:  16.910%; top:  8.455%; width: max-content; max-width: 83%; font-size: max(0.75rem, 11.107cqw); text-align: left; }
.wa-cap--titus    { left:   8.553%; top: 79.487%; width:  82.81%; font-size: max(0.75rem, 9.475cqw); line-height: 1.19; text-align: center; }

/* ==========================================================================
   The Warrior Queen Project — slide 29
   Source geometry (1920x1080 canvas):
     floral      x=-52  y=-59 346x540, flipped horizontally
     title       x=89   y=158 w=1044  85.33px Cinzel, uppercase
     photos      x=1026 y=76  268x270 and x=1316 y=76 551x270, 8px #fffbf7
     rule        y=401, full bleed from x=-52 to x=1972
     divider     x=960.5, running down from y=401
     columns     x=89 w=837 and x=995 w=843, 26.67px, disc bullets
     links       x=1079 y=896 and y=973, 24px; icons at x=1003 and x=995
   ========================================================================== */

.wa-wqp-top  { padding-block: clamp(1.5rem, 3.90vw, 3.17rem) clamp(1rem, 2.66vw, 2.16rem); }
.wa-wqp-body { padding-block: clamp(1rem, 2.26vw, 1.83rem) clamp(2.5rem, 4.47vw, 3.63rem); }

.wa-wqp-top .wa-decor--tl { left: -8.05%; top: -3.45vw; width: 19.88%; }

/* The rule is a direct child of the section rather than of .page, which is
   what lets it bleed the full width as the source line does. */
.wa-rule {
  position: relative;
  z-index: 1;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-ink);
}

.wa-wqp__photos {
  display: grid;
  grid-template-columns: 267.64fr 551.31fr;      /* the source's own widths */
  gap: 2.63%;                                    /* 22.13 / 841.08 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-wqp__photos img {
  width: 100%;
  aspect-ratio: 267.64 / 270.47;
  object-fit: cover;
  border: clamp(3px, 0.47vw, 6.1px) solid var(--c-edge);   /* 8 -> 6.1px */
}

.wa-wqp__photos li:last-child img { aspect-ratio: 551.31 / 270.47; }

/* Two equal columns with the source's centred hairline between them; the
   divider sits 34.5 source px clear of the copy on either side. */
.wa-wqp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wa-wqp-cols > :first-child { padding-right: 2.03%; }

.wa-wqp-cols > :last-child {
  padding-left: 2.03%;
  border-left: 1px solid var(--c-ink);
}

/* Founded / Mission / Vision / Launch — a bold label with one bulleted line
   beneath it, four times over, so a description list is the honest structure. */
.wa-facts {
  margin: 0;
  font-size: var(--wa-fact);
  line-height: 1.6;
  color: var(--c-ink);
}

.wa-facts dt { font-weight: 700; margin-top: 0.7em; }
.wa-facts dt:first-child { margin-top: 0; }

.wa-facts dd {
  position: relative;
  margin: 0 0 0 1.70em;             /* marL 431801 EMU against a 26.67px face */
}

.wa-facts dd::before {
  content: '\2022';
  position: absolute;
  left: -0.85em;                    /* indent -215900 EMU */
}

.wa-wqp__links {
  margin: clamp(1rem, 3.2vw, 2.6rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--wa-link);
}

.wa-wqp__links li {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.15rem);
  margin-bottom: clamp(0.5rem, 1.6vw, 1.3rem);
}

.wa-wqp__links img { width: clamp(20px, 3.28vw, 43px); }                 /* 56 -> 43px */
.wa-wqp__links li:last-child img { width: clamp(26px, 4.28vw, 56px); }   /* 73 -> 56px */

/* ==========================================================================
   United Nations Council CSW67 — slide 30
   Source geometry (1920x1080 canvas):
     floral      full bleed, element opacity 50% (baked into alpha)
     title       x=89  y=224 w=806  80px Cinzel, uppercase
     bullets     x=89  y=432 w=706  32px, disc, two items
     caption     x=117 y=849 w=723  30.67px  |  icon x=117 y=940 59x55
     link        x=192 y=954 w=677  24px
     mat 1       photo x=1057 y=157 640x427 rot -3.4575, card 711x498
     mat 2       photo x=949  y=564 572x382 rot  5.5346, card 635x445
     cluster bounding box (rotation included) x=898..1747  y=101..1007
   ========================================================================== */

.wa-csw-bleed {
  background: url('../../images/womens-advocacy-floral-bleed.png') center center / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/womens-advocacy-floral-bleed.webp') type('image/webp'),
    url('../../images/womens-advocacy-floral-bleed.png')  type('image/png')
  ));
}

.wa-csw { padding-block: clamp(1.75rem, 5.94vw, 4.83rem) clamp(2rem, 4.29vw, 3.49rem); }

.wa-csw__cluster { aspect-ratio: 849.6 / 905.8; }

.wa-csw__cluster .wa-mat--1 { left: 14.67%; top:  2.32%; width: 83.64%; transform: rotate(-3.4575deg); }
.wa-csw__cluster .wa-mat--2 { left:  2.35%; top: 47.66%; width: 74.71%; transform: rotate(5.5346deg); }

/* ==========================================================================
   Advisory board — slide 31
   Source geometry (1920x1080 canvas):
     floral      x=15   y=0    216x736
     floral      x=1576 y=181  361x547
     floral      x=1446 y=-187 403x425 rot -25.20
     title       x=89   y=137  w=806  80px Cinzel, uppercase
     bullets     x=89   y=278  w=793  32px (last item 30.67px), disc, four items
     caption     x=117  y=820  w=822  30.67px  |  icon x=110 y=917 59x55
     link        x=192  y=926  w=411  24px
     wide photo  x=960  y=76   860x270, 8px #fffbf7 stroke
     polaroid A  x=978  y=378  507x590 rot -3.7124
     polaroid B  x=1469 y=407  366x425 rot  9.4532
     cluster bounding box (rotation included) x=952..1867  y=68..983
   ========================================================================== */

.wa-board { padding-block: clamp(1.25rem, 3.98vw, 3.24rem) clamp(2.5rem, 5.68vw, 4.62rem); }

.wa-board .wa-decor--edge { left: -4.22%; top: 0;         width: 12.39%; }
.wa-board .wa-decor--r    { left: 85.34%; top: 10.62vw;   width: 20.69%; }
.wa-board .wa-decor--tr   { left: 77.90%; top: -10.96vw;  width: 23.10%; transform: rotate(-25.20deg); }

.wa-board__cluster { aspect-ratio: 915.28 / 915.24; }

.wa-board__wide { left: 0; top: 0; width: 95.74%; }

.wa-board__wide img {
  width: 100%;
  aspect-ratio: 860.32 / 270.47;
  object-fit: cover;
  border: clamp(3px, 0.47vw, 6.1px) solid var(--c-edge);
}

.wa-board__cluster .wa-polaroid--a { left:  2.901%; top: 33.859%; width: 55.446%; transform: rotate(-3.7124deg); }
.wa-board__cluster .wa-polaroid--b { left: 56.487%; top: 37.033%; width: 39.972%; transform: rotate(9.4532deg); }

.wa-cap--summit    { left:   8.678%; top: 81.773%; width:  88.84%; font-size: max(0.75rem, 7.357cqw); text-align: center; }
.wa-cap--arthritis { left: -18.947%; top: 84.237%; width: 123.23%; font-size: max(0.75rem, 9.840cqw); text-align: center; }

/* ==========================================================================
   Responsive — breakpoints match site.css (tablet 1024, mobile 767)
   ========================================================================== */

@media (max-width: 1024px) {
  /* Every split on this page is copy-first, so the source order already puts
     the media column second and .split's own rule does the rest. */
  .wa-hero { padding-bottom: 0; }
  .wa-hero-split { gap: clamp(1.25rem, 4vw, 2.5rem) !important; }

  /* At full width the clusters would tower over the copy, so they are capped
     and centred, as the biography cluster is. */
  .wa-window,
  .wa-leaders,
  .wa-csw__cluster,
  .wa-board__cluster {
    max-width: 34rem;
    margin-inline: auto;
  }

  /* The hero floral is sized against the section, which is far taller in one
     column — hold it back rather than letting it scale up with it. */
  .wa-hero-bleed { background-size: auto 55%; }

  /* Slide 29's two text columns stack and the vertical hairline goes with
     them; the full-bleed rule above still reads as the divider. */
  .wa-wqp-cols { grid-template-columns: 1fr; row-gap: clamp(1.25rem, 3vw, 2rem); }
  .wa-wqp-cols > :first-child { padding-right: 0; }
  .wa-wqp-cols > :last-child  { padding-left: 0; border-left: 0; }

  .wa-decor { opacity: 0.7; }
}

@media (max-width: 767px) {
  /* Side by side, the two photographs above the rule get too small to read. */
  .wa-wqp__photos { grid-template-columns: 1fr; gap: clamp(0.5rem, 2vw, 1rem); }
  .wa-wqp__photos img,
  .wa-wqp__photos li:last-child img { aspect-ratio: 16 / 9; }
}