/* ==========================================================================
   Home — Key Highlights, slide 5 of old.pptx
   Appended to home.html under the Biography section. Nothing in here is used
   by any other page, so it is loaded from home.html only.

   Source geometry (1920x1080 canvas, 108px gutters, 1704px of content),
   everything rebased by 1300/1704 = 0.763:

     background   full-bleed floral, image22.png
     "Key         x=423 y=178  1075x265   85.33px Cinzel Decorative Bold,
      HiGhliGhtS"                         centred, line-height 1.03,
                                          letter-spacing -0.048em, #6B5E54
     tile         850x115, fill #DDCCC2, 1px stroke #6B5E54
     label        26.67px Century Gothic, centred, #6B5E54, caps
     column x     108 (left) and 999 (right)      -> 41px gutter
     row y        408, 592, 776                   -> 69px gutter

   Two source defects are carried through deliberately; see the notes on
   .keyhi-grid and .keyhi-tile below.
   ========================================================================== */

/* Full-bleed background. As with .home-bleed this is a plain block wrapper
   rather than `width: 100vw` — 100vw includes the scrollbar and would make
   the page scroll horizontally.

   The asset is pre-cropped to the window Canva actually shows. The design's
   page background carries imageBox=(0, -23.44  1966.89x1080) inside the
   1920x1080 frame, i.e. the artwork is drawn slightly wider than the page and
   nudged left, so only x 1.19%..98.81% of it is visible, full height. The
   PPTX export loses that and writes the whole 2594x1427 image with `stretch`,
   which squashes the pattern by ~2%. Canva is the authority.

   `center top` rather than `center`: the vines hang from the top edge of the
   artwork and this section is much wider than 16:9 on the web, so `cover`
   would otherwise crop away the part that carries the design.

   #ebebeb is the artwork's own flat paper tone, sampled from the asset, so
   the section keeps its colour if the image has not painted yet. */
.keyhi-bleed {
  background: #ebebeb url('../../images/keyhi-floral.jpg') center top / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/keyhi-floral.webp') type('image/webp'),
    url('../../images/keyhi-floral.jpg')  type('image/jpeg')
  ));
}

/* Matches the .bio block above it. The slide's own top offset rebases to
   136px, but slides stack here rather than sitting on their own page, so the
   inter-section padding follows the rhythm the rest of home.html already
   uses instead of the source's full-slide margin. */
.keyhi { padding-block: clamp(2rem, 6vw, 4.9rem); }

/* 85.33px -> 65.1px. The gap below is the source's own: the last baseline
   sits at y=337 and the first tile starts at y=408, so 71px -> 54px. */
.keyhi-title {
  margin: 0 0 clamp(1.25rem, 4.17vw, 3.39rem);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.01vw, 4.07rem);   /* 85.33 -> 65.1px */
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.048em;
  text-align: center;
  color: var(--c-ink);
}

/* The source's two columns are 850px wide with a 41px gutter, which comes to
   102.2% of the 1704px content width — the right-hand column overhangs the
   right gutter by 37px and the whole grid sits 18px right of centre. That is
   a slip in the deck, not a design; the columns are normalised to two equal
   tracks here (634px each against the source's 649px) so the block is
   centred and nothing overflows. The gutter is the source's, to the pixel.

   Column-major fill so the tiles land in the source's arrangement while the
   DOM keeps the running order of the Key Highlights menu, which is also the
   order a single column reads in below 767px. */
.keyhi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 2.41%;                              /* 41 / 1704 */
  row-gap: clamp(1rem, 4.05vw, 3.29rem);          /* 69 -> 52.6px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The <li> is the grid item; the link inside it is stretched to fill so the
   whole tile is the hit area rather than just the text. */
.keyhi-grid > li { display: grid; }

/* 115 tall -> 87.5px. `min-height` rather than `height` so a label that wraps
   on a narrow screen grows the tile instead of spilling out of it. */
.keyhi-tile {
  display: grid;
  place-items: center;
  min-height: clamp(2.75rem, 6.73vw, 5.47rem);    /* 115 -> 87.5px */
  padding: 0.6rem clamp(0.75rem, 1.9vw, 1.5rem);
  background: #ddccc2;
  border: 1px solid var(--c-ink);
  /* A strict rebase floor would put these labels at 12px on a phone, which is
     too small for a link. Floored at 13.6px instead; the tile grows if a long
     label wraps. */
  font-size: clamp(0.85rem, 1.57vw, 1.27rem);     /* 26.67 -> 20.35px */
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  transition: background-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

/* #6B5E54 on #DDCCC2 is 4.02:1, which is under AA for 20px text. Both values
   are the source's and are reproduced so the build matches the design. To
   make the tiles accessible without changing the palette, darken the label
   only — #62574D on the same fill reaches 4.51:1 and is indistinguishable
   at this size. */

/* The deck has no interactive states. These are invented, and deliberately
   lighten the fill rather than darken it, so hovering can only raise the
   label's contrast, never lower it. */
.keyhi-tile:hover,
.keyhi-tile:focus-visible {
  background: #e7dad2;
  transform: translateY(-2px);
  box-shadow: var(--shadow-panel);
}

.keyhi-tile:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* One column, which reverts the flow to row order — the DOM order and the
     Key Highlights menu order. */
  .keyhi-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    row-gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .keyhi-tile:hover,
  .keyhi-tile:focus-visible { transform: none; }
}