/* ==========================================================================
   Breed Right — self-hosted webfonts.

   WHY: the site previously pulled Inter and Playfair Display from Google.
   That cost two extra DNS lookups, two TLS handshakes and one RENDER-BLOCKING
   stylesheet on a third-party origin before a single glyph could be measured,
   and it sent every visitor's IP address to Google on every page view — a
   third-party disclosure that has to be justified under UK GDPR and named in
   the privacy notice. Serving the same bytes from breedright.co.uk removes
   all four problems and makes the fonts cacheable for a year.

   WHAT THESE FILES ARE: the latin and latin-ext WOFF2 subsets that Google
   Fonts itself serves, saved verbatim. Both families are licensed under the
   SIL Open Font License 1.1, which permits redistribution; the full licence
   text ships beside them (OFL-Inter.txt, OFL-PlayfairDisplay.txt) as the
   licence requires, and PROVENANCE.md records the exact source URL, byte
   count and SHA-256 of every file.

   Both are VARIABLE fonts: ONE 48 KB file covers Inter 400/500/600/700 and
   ONE 38 KB file covers Playfair Display 600/700/800. The latin-ext files are
   listed second and are downloaded ONLY if a page actually contains a
   character in that range (an accented kennel name, say) — on ordinary
   English pages they cost nothing.

   font-display: swap — text paints immediately in the fallback and swaps when
   the webfont lands. Never invisible text, never a blocked first paint.
   ========================================================================== */

/* ---- Inter (UI text) ---------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Playfair Display (display headings) -------------------------------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   LAYOUT-SHIFT INSURANCE FOR IMAGES

   Two rules, both at ELEMENT specificity so every existing class rule in
   styles.css still wins. They live here rather than in styles.css so that one
   <link> is the whole change to the <head>.

   1. `img { height: auto; }` — the width/height ATTRIBUTES are what stop the
      page jumping when a photograph arrives, but HTML maps them to the CSS
      width and height properties as presentational hints. Without this rule an
      <img width="1280" height="834"> that is only constrained by the existing
      `img { max-width: 100% }` would be squeezed to the container width while
      keeping its 834px height — a distorted photograph. `height: auto` hands
      the height back to the intrinsic aspect ratio, which is the whole point.
      Every component rule (`.breed-card img { height: 100% }`,
      `.credit-list__item img { height: 48px }`, ...) is class-scoped and
      therefore unaffected.

   2. `picture { display: contents; }` — every image rule in styles.css targets
      `img` as a DESCENDANT (`.breed-card img`), so those rules keep applying
      inside a <picture>. What does NOT survive is the box: <picture> is an
      inline element, so `height: 100%` on the img would resolve against it
      instead of against the card. `display: contents` removes the picture's
      own box and hands the img straight back to the card's grid context.
      Inert until some template actually emits a <picture>.
   -------------------------------------------------------------------------- */
img { height: auto; }

picture { display: contents; }