/* Event Artistry — H1 reveal-mask clipping fix
   -------------------------------------------------------------------------
   THE FAULT (measured on the live site, mobile 375px):
     The hero H1 uses leading-[0.92], so its line-height (39.7px) is SMALLER
     than its font-size (43.2px). The glyph content box is 47px tall. Each line
     of the H1 sits inside a `span.overflow-hidden` that acts as the clipping
     mask for the slide-up reveal animation, and that mask is only as tall as
     the line box (40px). The 7px of overflow is split above and below the line
     box, so the mask shaves the TOP off the capitals — most obviously on
     "BALLOONS", the first word people see.

     Measured: "Balloons" and "that fill" masks had clientHeight 40 vs
     scrollHeight 47. The third line, "the room", was already fine because it
     carries pb-[0.06em] — someone hit the same bug and padded only the bottom
     of the last line.

   THE FIX
     Give each mask headroom with padding-top, then pull it back by the same
     amount with a negative margin-top, so the text renders in exactly the same
     place as before but is no longer clipped. 0.18em comfortably covers the
     0.08em shortfall at every breakpoint because both are font-relative.

   WHY CSS AND NOT AN EDIT TO THE MARKUP
     The hero is React-hydrated. Changing the class attributes in the exported
     HTML causes a hydration mismatch and React restores the original markup,
     undoing the fix. A stylesheet cannot be reverted that way.

   Scoped to h1 on purpose: the h2/h3 masks were measured and are NOT clipped,
   and applying a negative margin to them would shift section spacing.
   ------------------------------------------------------------------------- */

h1 span.overflow-hidden {
  padding-top: 0.18em;
  margin-top: -0.18em;
}

/* The negative margin on the FIRST line also pulls the whole H1 up by 0.18em,
   which tightened the gap under the eyebrow from 24px to 16px on mobile. Give
   that 0.18em straight back on the H1's own margin so the heading, and
   everything below it, sits exactly where it did before.
   Note the [class] on the selector: the H1 carries Tailwind's mt-[var(--s-4)],
   and a class selector out-specifies a bare element selector, so `h1 { }` alone
   is silently ignored. h1[class] wins without needing !important. */
h1[class] {
  margin-top: calc(var(--s-4) + 0.18em);
}


/* ===========================================================================
   Portfolio / gallery tile captions — mobile and tablet only
   ---------------------------------------------------------------------------
   THE FAULT
     Each image tile (.ea-hoverswap, used on 31 pages, 500+ tiles) carries a
     caption overlaid on the photograph. On a pointer device it is hidden and
     slides up on hover. On TOUCH there is no hover, and the build's fallback is:

         @media (hover: none) { .ea-hoverswap-cap { opacity: 1 } }

     ...which pins the caption permanently on top of the image. The captions are
     full sentences (40-68 chars, avg 54). On a 159px-wide mobile tile that wraps
     to five or six lines in tracked-out uppercase and covers the whole photo,
     while the gradient scrim darkens whatever is left. On the portfolio page you
     could not see the installations at all.

     Contrast measured against the section background it sits on (--paper,
     rgb(250,249,246)):
         gold  #d4b15a  = 1.95:1   (WCAG AA needs 4.5:1 for body text)
         silver #6c6c6c = 4.99:1   PASS

   THE FIX (James chose "Option B", 2026-09-02)
     Below the breakpoint, take the caption out of the overlay and set it under
     the image in normal flow, in silver sentence case at a readable size.
     DESKTOP IS DELIBERATELY UNTOUCHED: there the tiles are much larger, the
     caption is only two or three lines and sits within the strong part of the
     scrim, so the hover reveal still works and still reads.

   The !important on the colour is needed: a broad rule in the main stylesheet,
   `.ea-demo2 section[class*="--ink"] .ea-label { color: var(--gold-lift) }`,
   is specificity (0,3,1) and beats any reasonable selector here. It exists to
   lift labels on DARK sections; these tiles sit on --paper.

   As ever, this is CSS and not a markup edit, because the tiles are
   React-hydrated and changed class attributes get reverted on hydration.
   =========================================================================== */

@media (max-width: 63.99rem) {
  .ea-hoverswap { aspect-ratio: auto; overflow: visible; }

  .ea-hoverswap-media {
    aspect-ratio: 4 / 5;
    height: auto;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
  }

  .ea-hoverswap-cap {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    padding: var(--s-3) 0 0;
    text-align: left;
  }

  /* the 2px spectrum bar belongs to the overlay treatment, not a flow caption */
  .ea-hoverswap-cap::before { display: none; }

  .ea-hoverswap-cap .ea-label {
    color: var(--silver) !important;
    text-transform: none;
    letter-spacing: .01em;
    font-size: .8125rem;
    line-height: 1.45;
    font-weight: 400;
    display: block;
  }
}