/* ==========================================================================
   FRONT PAGE BACKGROUND
   --------------------------------------------------------------------------
   The photograph behind the hero. To try a different one, comment out the
   block that is active and uncomment another. Nothing else needs to change.

     --hero-wide   shown on tablets and desktops   (landscape crop)
     --hero-tall   shown on phones                 (portrait crop)

   Both are needed: a landscape crop looks wrong on a phone and vice versa.

   Using your own photo? Put a landscape and a portrait crop in assets/img/
   and point the two lines at them. Roughly 1500-1800px wide for the landscape
   and 1000px wide for the portrait is plenty.

   These use .webp (smaller). Every one also exists as .jpg — swap the
   extension if you ever need to support a very old browser.
   ========================================================================== */
:root {

  /* ---- Scored sourdough boule on the cooling rack ---------- ACTIVE ---- */
  --hero-wide: url("../assets/img/hero-boule-wide.webp");
  --hero-tall: url("../assets/img/hero-boule-tall.webp");

  /* /* ---- Pão francês, close on the crust -------------------------------- */
  /* --hero-wide: url("../assets/img/hero-bread-wide.webp");
  --hero-tall: url("../assets/img/hero-bread-tall.webp"); */
  /* ---------------------------------------------------------------------- */ 

  /* /* ---- The plain boule, whole loaf on the rack ------------------------ */
  /* --hero-wide: url("../assets/img/hero-rack-wide.webp");
  --hero-tall: url("../assets/img/hero-rack-tall.webp"); */
  /* ----------------------------------------------------------------------  */

  /* /* ---- Margherita pizza ---------------------------------------------- */
  /* --hero-wide: url("../assets/img/hero-pizza-wide.webp");
  --hero-tall: url("../assets/img/hero-pizza-tall.webp"); */
  /* ---------------------------------------------------------------------- */ 

  /* Nudge the framing if a photo sits badly: 50% is centred, lower % pans up. */
  --hero-focus: 46%;
}