/* Bridge: theme.json's global "elements.h1/h2/h3" styles set a fixed/clamp()
   font-size for every <h1>/<h2>/<h3> on the site (the pre-existing fluid
   typography system). WordPress injects that as an UNLAYERED global style,
   which beats any @layer'd Tailwind text-size utility (declared inside
   `@layer utilities` in reference.css) applied to a heading, regardless of
   specificity — e.g. the home hero's `text-5xl md:text-7xl lg:text-8xl`
   never actually reaches lg:text-8xl; it's stuck at theme.json's clamp().
   This restates the handful of size utilities actually used on headings in
   the ported reference blocks, unlayered, so they win as intended. Keep in
   sync with blocks/*/render.php if a new heading size utility is used. */

:is(h1, h2, h3)[class~="text-xl"] { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
:is(h1, h2, h3)[class~="text-2xl"] { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
:is(h1, h2, h3)[class~="text-4xl"] { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }
:is(h1, h2, h3)[class~="text-5xl"] { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }

@media (width >= 48rem) {
  :is(h1, h2, h3)[class~="md:text-5xl"] { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }
  :is(h1, h2, h3)[class~="md:text-6xl"] { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); }
  :is(h1, h2, h3)[class~="md:text-7xl"] { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); }
}

@media (width >= 64rem) {
  :is(h1, h2, h3)[class~="lg:text-8xl"] { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); }
}