/* ==========================================================================
   Awards & Media — slides 32, 33 and 34 of old.pptx

   Geometry is the source canvas's (1920x1080, 108px gutters, 1704px content),
   rebased by 1300/1704 = 0.763 like the rest of the site and expressed against
   the 1300px container. Positions are percentages of the content width.

   Crops are NOT from the PowerPoint. The PPTX writes every picture with
   `stretch` and no `srcRect`, so all five photo crops and the video poster are
   lost there. The windows below come from the Canva element data for pages
   32-34 (design DAGWh8EbLBY), where each image fill carries an `imageBox`
   giving the image's drawn box inside its frame. Every asset in this file is
   pre-cropped to that window, so `cover` re-crops nothing meaningful.

   Drawn in CSS rather than exported, following the precedent already set on
   the biography section: the laptop mock-up (the source draws it as a vector
   shape), the polaroid frames, and every drop shadow — the source assets for
   those are blurred grey blobs (ppt/media/image20.png, image142.png).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — slide 32
   Source: title x=108 y=309 772x203 84px Cinzel Decorative Bold
           caption x=117 y=596 645x146 29.3px | link row x=117 y=742
           note x=897 y=108 811x72 26.7px | laptop x=740 y=215 1154x662
   -------------------------------------------------------------------------- */

/* The slide's own background — a floral paper distinct from the flat sheet
   the other two slides (and the site body) use. Canva places it with
   imageBox=(0,-23.44 1966.89x1080) in a 1920x1080 frame, i.e. very slightly
   wider than the frame and nudged left; the asset is pre-cropped to that
   1.2%..98.8% horizontal window, so `cover` is exact.

   Flattened onto #ecebe8 and shipped without alpha — it always covers. */
.am-hero-bleed {
  /* Anchored to the top: the artwork is a canopy hanging from the top of the
     slide, so `center` would crop the flowers away on a shorter section. */
  background: #ecebe8 url('../../images/awards-media-texture.png') center top / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/awards-media-texture.webp') type('image/webp'),
    url('../../images/awards-media-texture.png')  type('image/png')
  ));
}

.am-hero { padding-block: clamp(2rem, 6vw, 4.9rem); }

/* 84.01px in the source. Cinzel Decorative renders lowercase as small
   capitals, which is what gives the design its large-A/small-WARDS look — so
   the text stays in title case rather than being uppercased. */
.am-hero__title {
  margin: 0 0 clamp(1rem, 4.90vw, 3.98rem);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.93vw, 4.01rem);   /* 84.01 -> 64.1px */
  font-weight: 700;
  line-height: 1.23;
  color: var(--c-ink);
}

.am-hero__caption {
  margin: 0;
  font-size: clamp(0.95rem, 1.72vw, 1.40rem);  /* 29.33 -> 22.4px */
  line-height: 1.28;
  color: var(--c-ink);
}

/* Play badge plus the video URL, sitting on one baseline as in the source
   (icon x=117, label x=199, both at y~742). */
.am-hero__link {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.20vw, 0.98rem);         /* 20.4 -> 15.6px */
  margin: clamp(0.6rem, 1.92vw, 1.56rem) 0 0;
}

/* The badge is wrapped in a <picture>, so the <picture> is the flex item and
   has to carry the sizing — width on the <img> alone lets the wrapper shrink. */
.am-hero__link picture {
  flex: 0 0 auto;
  width: clamp(26px, 3.46vw, 45px);            /* 58.9 -> 45px */
}

.am-hero__link img { width: 100%; }

/* Was the source's #5271FF, which measured 3.4:1 on the page texture and
   failed WCAG AA at body size. Changed to the body ink on request, along with
   every other video link on the site — 5.25:1 on the page background. The
   underline stays: it is now the only cue that these are links. */
.am-hero__link a,
.am-news__url a {
  color: #6b5e54;
  text-decoration: underline;
  word-break: break-all;
}

.am-hero__link a {
  font-size: clamp(0.8rem, 1.41vw, 1.145rem);  /* 24.0 -> 18.3px */
}

/* The source indents this 157px into the laptop's column rather than aligning
   it to the laptop's left edge. Reproduced, and dropped at the tablet
   breakpoint where the column is the full width. */
.am-hero__note {
  margin: 0 0 clamp(0.6rem, 2.05vw, 1.67rem);
  margin-left: 15.3%;
  font-size: clamp(0.9rem, 1.57vw, 1.27rem);   /* 26.67 -> 20.3px */
  line-height: 1.5;
  color: var(--c-ink);
}

/* Laptop mock-up. The source draws it as a vector shape on a 628.5x360.5
   viewBox, so every value below is that viewBox as a percentage:
     lid    x 57.6..570   y 0..342.4      #E9E9E9
     bezel  x 60.3..568.3 y 1.7..342.4    #000000
     screen x 75.8..552.6 y 21.8..320.2   the video
     base   x 0..628.5    y 342.4..350.1  #E9E9E9, notch #CCCCCC
     rule   x 12.9..615.7 y 357.7..360.5  #CCCCCC
   The bezel is within a couple of units of the lid on every side, so the two
   collapse into one element with a hairline light edge. */
.am-laptop {
  position: relative;
  aspect-ratio: 628.5 / 360.5;
  margin: 0;
}

.am-laptop__lid {
  position: absolute;
  z-index: 1;
  left: 9.16%;
  width: 81.53%;
  top: 0;
  height: 95.01%;
  padding: 4.25% 3.47% 4.33% 3.55%;
  background: #0d0d0d;
  border: 1px solid #e9e9e9;
  border-radius: 1.7% / 3%;
}

.am-laptop__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.am-laptop__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.am-laptop__base {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 94.98%;
  height: 2.14%;
  background: #e9e9e9;
  border-radius: 0 0 0.6em 0.6em;
}

.am-laptop__base::before {                     /* hinge notch, x 272.5..355.9 */
  content: '';
  position: absolute;
  left: 43.36%;
  width: 13.27%;
  top: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 0 0 0.3em 0.3em;
}

.am-laptop__base::after {                      /* the thin rule beneath it */
  content: '';
  position: absolute;
  left: 2.05%;
  width: 95.91%;
  top: 198%;
  height: 36%;
  background: #ccc;
  border-radius: 999px;
}

/* Stands in for ppt/media/image142.png, a blurred grey ellipse the source
   places at x=845 y=797 1115x218 — i.e. centred just below the laptop. The
   source lets it run 5.7% past the laptop's right edge; here it stops at the
   edge so nothing pokes outside the section on a narrow viewport. */
.am-laptop::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 9.15%;
  right: 0;
  top: 87.87%;
  height: 32.90%;
  background: radial-gradient(closest-side ellipse,
              rgba(60, 51, 51, 0.34), rgba(60, 51, 51, 0) 100%);
}

/* --------------------------------------------------------------------------
   Awards list + polaroid cluster — slide 33
   Source: heading x=89 y=89 806x175 80px Cinzel
           list    x=89 y=294 915x697 30.67px, line-height 1.8, disc bullets
           cards   (1204,73) (1459,387) (1033,322) (1215,587), 373x434/366x425
           flourishes x=1495 y=-102 536x448 rot -29.63deg | x=692 y=2 465x371
   -------------------------------------------------------------------------- */

.am-section {
  position: relative;
  overflow: hidden;                 /* clips the flourishes' bleed */
}

.am-section > .page { position: relative; z-index: 1; }

/* Both flourishes are decorative and sit behind the content. Their vertical
   offsets are negative in the source, so they are expressed as translateY of
   the element's own height — a percentage `top` would resolve against the
   section height, which is not the slide's. Widths are percentages of the
   1920 canvas, capped at the assets' native size so they never upscale on a
   very wide viewport. */
.am-orn {
  position: absolute;
  z-index: 0;
  top: 0;
  pointer-events: none;
}

.am-orn--rose  { max-width: 565px; }
.am-orn--sprig { max-width: 613px; }

.am-orn img { width: 100%; }

.am-awards { padding-block: clamp(2rem, 6vw, 4.9rem); }

.am-section--awards .am-orn--rose  { left: 77.87%; width: 27.90%; transform: translateY(-22.86%) rotate(-29.63deg); }
.am-section--awards .am-orn--sprig { left: 36.02%; width: 24.24%; transform: translateY(0.53%); }

.am-section--news .am-orn--rose  { left: 75.32%; width: 27.90%; transform: translateY(-32.04%) rotate(-29.63deg); }
.am-section--news .am-orn--sprig { left: 31.33%; width: 20.43%; transform: translateY(-11.09%); }

/* 80px in the source. Cinzel sets lowercase as small capitals, so the case of
   the markup is load-bearing: both slide 33 ("AWARDS & MEDIA") and slide 34
   ("AUTHOR IN THE NEWS") are literal capitals in the source and are typed that
   way here. No text-transform — the slide 32 hero really is mixed case and
   must keep its small-caps look. */
.am-title {
  margin: 0 0 clamp(0.75rem, 2.53vw, 2.06rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.85rem, 4.70vw, 3.82rem);  /* 80 -> 61.0px */
  font-weight: 400;
  line-height: 1.01;
  color: var(--c-ink);
}

.am-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: clamp(0.95rem, 1.80vw, 1.462rem); /* 30.67 -> 23.4px */
  line-height: 1.8;
  color: var(--c-ink);
}

.am-list li { margin-bottom: 0.35em; }
.am-list li:last-child { margin-bottom: 0; }

/* Cluster box is the source cluster's own 792x939, so the four cards scale
   together however wide the column ends up. */
.am-cluster {
  position: relative;
  aspect-ratio: 792 / 939;
}

/* Polaroid frame. The source shape's photo window sits at x 19.5..404.5 and
   y 23.2..393.3 on a 430.4x500 viewBox — narrow at the top and sides, deep at
   the bottom. The window is inset absolutely rather than by padding: the card
   is itself absolutely positioned, so percentage padding on it would resolve
   against the cluster's width, not the card's, and the frame came out three
   times too deep. Insets are safe because they resolve against the card. */
.am-card {
  position: absolute;
  margin: 0;
  aspect-ratio: 373.17 / 433.51;
  background: #f2f1eb;
  /* Replaces ppt/media/image20.png, a blurred strip the source lays under
     each card at 29% opacity, centred ~10px below its bottom edge. */
  box-shadow: 0 14px 24px rgba(60, 51, 51, 0.26);
}

.am-card__win {
  position: absolute;
  left: 4.53%;
  right: 4.53%;
  top: 4.64%;
  bottom: 21.35%;
  overflow: hidden;
  background: #ddd8d2;
}

.am-card__win picture,
.am-card__win img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Source sets every caption in "Canva Student Font", a licensed handwriting
   face that appears nowhere else in the deck. The site body face is used
   instead, the same substitution the footer makes for TT Drugs — but Century
   Gothic is far wider than that handwriting face, and a straight rebase to
   28.5px ran "Honored by Mr. L. K. Advani" 130px past the frame. The captions
   are set at 20px so each still sits on one line inside its card. */
/* In the source the four captions are free-standing text shapes drawn AFTER
   all four cards, so every caption sits on top of every frame. Nesting each
   one in its own <figure> put them back in card order, and the Advani card
   (later in the DOM, and overlapping x 1215..1581 y 587..1012) painted over
   the left half of "WIFTV, Vancouver". z-index restores the source stacking:
   .am-card is position:absolute with z-index:auto, so it is not a stacking
   context and this lifts the captions above the sibling cards. */
.am-card figcaption {
  z-index: 2;
  font-size: clamp(0.75rem, 1.54vw, 1.25rem);   /* 37.33 -> 28.5px, set at 20px */
  line-height: 1.4;
  color: #000;
}

/* Cards 2 and 4 caption inside the deep bottom margin, centred. The source
   text box is wider than the card itself, so a little overhang is kept.
   Card 4 (Advani) is genuinely centred in the source: its box x=1173 w=451
   centres on 1398.5 against a card centre of 1398. */
.am-card__cap {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 21.35%;                   /* = 24.80% of the card's width */
  display: grid;
  place-items: center;
  text-align: center;
}

/* Card 2 (WIFTV) is NOT centred in the source: box x=1542 w=317 against a card
   at x=1459 w=365, i.e. left +22.74% and right -9.59% of the card width. That
   offset is load-bearing, not slop — it pushes the word clear of the Advani
   frame, whose right edge lands at x=1581 and whose photograph runs to y=921,
   straight through this caption's band. Centred, "WI" fell on that dark photo
   and the caption read as "FTV, Vancouver". Reproduced from the source. */
.am-card--wiftv .am-card__cap {
  left: 22.74%;
  right: -9.59%;
}

/* Cards 1 and 3 caption over the photograph in white. The source gives it no
   backing, so a soft shadow is added to hold it above the images. Offsets are
   percentages of the photo window, which is what they resolve against. */
.am-card__tag {
  position: absolute;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}

.am-card__tag--tl { left: 3.73%;  top: 4.64%; }
.am-card__tag--tc { left: 33.03%; right: 2%; top: 1.93%; text-align: center; }

/* Cards are placed as percentages of the cluster box; DOM order is the
   source's back-to-front stacking, so no z-index is needed. */
.am-card--arts4all    { left: 21.59%; top: 0;      width: 47.10%; }
.am-card--wiftv       { left: 53.79%; top: 33.44%; width: 46.21%; }
.am-card--asiasociety { left: 0;      top: 26.52%; width: 47.10%; }
.am-card--advani      { left: 22.98%; top: 54.74%; width: 46.21%; }

/* --------------------------------------------------------------------------
   Author in the news — slide 34, and the same band on slide 48
   Source 34: heading x=89 y=89 1025x95 80px Cinzel
              four screenshots at y=234, x=89/550/1022/1461,
                372x675, 395x675, 348x674, 351x675
              source badge x=column left y=949 ~55px, url x=+75 y=966 16.66px
   Source 48: heading x=110.6 y=122.4 1538.3x83.2
              four screenshots at y=222.1, x=108/568.6/1022.4/1461,
                361.1/358.5/348.2/348.6 wide, all four 686.7 tall
              play mark 39.1x36.8 at y=924.8, url y=937.3 17.4 tall
   -------------------------------------------------------------------------- */

.am-news { padding-block: clamp(2rem, 6vw, 4.9rem); }

.am-title--news { margin-bottom: clamp(1rem, 3.78vw, 3.08rem); }

/* Capped at 3.2rem, down from .am-title's own 3.82rem — which is slide 4's
   80pt rebased, and stays what Awards & Media's heading takes. Recapped rather
   than set flat: the floor and the slope are the shared step's, so only the
   ceiling moves and the line still comes down on a narrow screen instead of
   holding 51.2px on a phone.

   A selector list rather than a change to the base rule because this band is on
   three pages and two of them have been asked for — The Man Who Knew Infinity
   first, Warrior Queen after. Awards & Media keeps .am-title's own size. The
   body classes come from the slug map in functions.php. */
body.mwki .am-title--news,
body.warrior-queen .am-title--news { font-size: clamp(1.85rem, 4.70vw, 3.2rem); }

/* Column widths are the source's, and the four gaps average 85px of the
   1723px row — 4.95%. */
.am-news__row {
  display: grid;
  grid-template-columns: 372.21fr 395.23fr 348.25fr 351.03fr;
  column-gap: 4.95%;
  row-gap: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-news__row figure { margin: 0; }

/* Every capture in a row is as tall as the tallest of them, which is what
   levels their bottom edges and the marks and addresses under them.

   That is the asked-for `min-height: 646px` on the slide 48 set, arrived at
   rather than typed. 646px is where the second of those four stands in its
   column at the 1300px container — the tallest of the four — so "as tall as
   the tallest" gives exactly it, and goes on giving it at every other width
   and to every other row. A literal 646px would hold while the columns shrank
   underneath it, and by the 768px breakpoint each capture would be a sliver
   four times taller than wide.

   It also has to be arrived at because the band is shared. Awards & Media's
   four stand at 509px in the same columns; 646px there is a 27% stretch on
   captures that are correct as they are, and this leaves them alone.

   The chain of four rules is one mechanism. A grid item already stretches to
   its row, so the <li> has the height; each step below passes it down to the
   <img>, which is the only element that can do anything with it:

     li       a flex column, so the figure can be told to fill it
     figure   grows to the li, leaving the caption at its natural height
     picture  grows to what the figure has left above the caption
     img      stretches to the picture

   flex-basis stays auto the whole way down, so each capture still reports its
   own height first — that is what lets the tallest set the row before any of
   them grows into it. min-height: 0 undoes the auto minimum a flex item gets,
   without which nothing here could ever be shorter than its content. */
.am-news__row > li { display: flex; }

.am-news__row > li > figure {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The whole chain is spelled out because the publication mark is another
   <picture> in this row, inside the figcaption, and must not be caught. */
.am-news__row > li > figure > picture {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* align-self, not height: 100% — the img is a flex item here, so stretching
   is what the cross axis already does and there is no percentage to resolve
   against a box whose height flex only settles at layout time.

   Nothing is cropped and the proportions give instead: the three shorter
   captures on slide 48 are drawn 6.2, 12.6 and 13.5 per cent taller than
   true. That is the deck's own answer — every shape on that slide carries
   <a:stretch> with no <a:srcRect> — and on request, over cropping the foot
   off an article. The alternative loses each capture's phone chrome and the
   last lines of type; this keeps every capture whole. */
.am-news__shot {
  display: block;
  width: 100%;
  align-self: stretch;
}

.am-news__src {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.20vw, 0.98rem);         /* 20.4 -> 15.6px */
  margin-top: clamp(0.6rem, 2.37vw, 1.93rem);  /* 40.4 -> 30.8px */
}

/* The source badges carry different amounts of transparent padding and render
   at 55/58/60/55px; they are normalised to one size, as the footer icons are.
   Sizing goes on the <picture>, which is the flex item. */
.am-news__src picture {
  flex: 0 0 auto;
  width: clamp(24px, 3.22vw, 42px);            /* 54.9 -> 41.9px */
}

.am-news__src img { width: 100%; }

.am-news__url {
  min-width: 0;
  font-size: clamp(0.75rem, 0.978vw, 0.795rem); /* 16.66 -> 12.7px */
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Responsive — breakpoints match the rest of the site
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* One column: the copy leads and the imagery follows. */
  .am-hero__split > .media-col,
  .am-awards__split > .media-col { order: 2; }

  .am-hero__note { margin-left: 0; }

  .am-cluster { max-width: 34rem; margin-inline: auto; }

  .am-laptop { max-width: 46rem; margin-inline: auto; }
}

@media (max-width: 767px) {
  /* Two up rather than four. The screenshots stay under their native widths
     at this breakpoint; folding to two columns any earlier would blow the
     432-517px captures past 100% and start interpolating. */
  .am-news__row { grid-template-columns: 372.21fr 395.23fr; }

  /* Nothing to add for the levelling here. A grid item stretches to its own
     row and not to the whole grid, so two-up levels the first pair against
     each other and the second pair against each other — which is more than
     one figure could have done, and more than this row has ever done at this
     width. */

  /* Below the tablet breakpoint the cluster is already capped at 34rem, so
     the captions stop tracking the viewport and hold a legible floor. */
  .am-card figcaption { font-size: 0.75rem; }   /* was 0.72rem = 11.5px */

  /* Under ~598px of content the 34rem cap stops binding and the cluster runs
     flush to the content edge — which leaves no room for the WIFTV caption's
     9.59% right overhang, and its (empty) box edge lands up to 9px past the
     viewport. The text never got that far, but a figcaption past the edge is
     exactly what the overflow sweep is meant to catch, so the cluster gives
     the overhang somewhere to go. 91% keeps 15+0.995W inside the content box
     at every width in that band. Above ~598px the max-width still wins and
     this changes nothing. */
  .am-cluster { width: 91%; }
}

/* The play mark, for a band whose cuttings link to film rather than to writing.
   Drawn rather than uploaded — the same figure the Blue Boy band uses, at the
   size the source badges are normalised to above, so a row of them lines up
   with a row of marks and neither changes the height of the caption. */
.am-news__play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(24px, 3.22vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e8232a;
}

.am-news__play::before {
  content: "";
  border-style: solid;
  border-width: 0.36em 0 0.36em 0.6em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(10px, 1.3vw, 17px);
  margin-left: 0.12em;
}