/* ============================================================
   home.css — HOME ROUTE ONLY — hero
   Loads after site.css. Route layout only; shared furniture lives in site.css.
   ============================================================ */
@layer route {

/* Homepage validation pass: moderately tighter section rhythm before the same
   density decision is propagated to the rest of the site. */
.band:not(.hero):not(.bleed){padding-block:clamp(2.8rem,6vw,5.25rem)}
.bleed:not(.hero){min-height:clamp(20rem,48vh,32rem);padding-block:clamp(2.2rem,5vw,4rem)}

.hero.bleed{padding-block:clamp(2.75rem,6vw,5rem) clamp(2.4rem,5vw,3.6rem)}

/* ------------------------------------------------------------
   HERO — copy off the photograph.
   The band system reserves full-bleed photography for one short line;
   this hero carries four paragraphs. Scrimming it heavily enough to hold
   them destroyed 86 percent of the image detail (measured). So the copy
   and the photograph now occupy separate space instead of the same pixels.
     1000px and up : copy on solid ink at left, photograph at right
     below 1000px  : photograph on top as its own band, copy beneath
   ------------------------------------------------------------ */

@media (min-width:1000px){
  .hero.bleed .bleed-img{left:auto;right:0;width:42%}
  /* solid ink under the copy, then a short feather into the open photograph */
  .hero.bleed--side::after{
    background:linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 54%,
      rgba(22,34,58,.72) 60%,
      rgba(22,34,58,.22) 70%,
      rgba(22,34,58,.14) 100%)}
  .hero .wrap>*{max-width:min(50ch,52%)}
  .hero h1{max-width:min(18ch,52%)}
  .hero .lede{max-width:min(46ch,52%)}
  .hero .sub{max-width:min(48ch,52%)}
}

@media (max-width:999px){
  .hero.bleed{display:block;min-height:0;background:var(--ink);
    padding-block:0 clamp(2.2rem,6vw,3rem)}
  .hero.bleed picture{display:block}
  .hero.bleed .bleed-img{position:relative;inset:auto;width:100%;
    height:clamp(10rem,25vh,14rem);z-index:0}
  /* no scrim: the copy is no longer over the image */
  .hero.bleed::after{content:none}
  .hero .wrap{padding-top:clamp(1.45rem,5vw,2.2rem)}
}

.hero h1{max-width:18ch;font-size:clamp(2.05rem,1.35rem + 3.1vw,3.95rem)}

.hero .lede{max-width:50ch;margin-top:1.35rem}

/* colour deliberately not set here: the hero is an ink ground, so .sub must
   inherit .bleed .sub{--manila-deep} from site.css. --carbon measured 2.59:1
   against --ink and had been overriding it since before the split. */
.hero .sub{max-width:54ch;margin-top:1rem;font-size:.99rem}

.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

@media (max-width:430px){
  .hero .label{margin-bottom:1.15rem}
  .hero .lede{margin-top:1.15rem}
  .hero-actions{margin-top:1.55rem}
}

}