/* =========================================================================
   Canonical component: Hero cover (Requirement 6.12)

   `.tkc-hero` is the `.main-header` region carrying the site's cover image. The
   image reference used to sit in an inline `style="background-image: url(...)"`
   attribute written into the theme's list, single, and 404 layouts under
   `themes/hugo-theme-air/`. It now arrives on a component-local custom property,
   `--tkc-hero-image`, that the project-level `partials/hero.html` sets to the
   resolved cover URL, and this rule is the one place that consumes it:

     background-image: var(--tkc-hero-image)

   The custom property is the only inline style the hero element carries, so no
   color, font-size, or spacing literal rides along in the markup (Requirement
   9.5). `--tkc-hero-image` is a component-local property naming one page's
   asset, not a site-wide Design_Token, so it takes no `--tkc-<category>-` name
   and defines no scale value.

   All geometry -- the region's height, min-height, and responsive behavior --
   stays with the theme's own `.main-header` rules in `screen.css`; this sheet
   adds only the cover paint. `background-size`, `-position`, and `-repeat` are
   the frame contract for a cover image, stated once, matching what the theme's
   inline attribute relied on the base rule to supply.
   ========================================================================= */

.tkc-hero {
  background-image: var(--tkc-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}