/* Whole House on tablets and phones (live audit 2026-10-25). Desktop (>820 px layout) unchanged.
   - 621–820 px: the photo collage is an even three-column grid (landscape photos span two) instead of two very tall columns.
   - ≤820 px: a soft shade behind the header keeps its white text readable over the photograph. */
@media (min-width:621px) and (max-width:820px){
  .scroll-collage{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row dense!important}
  .scrap,.scrap.detail,.scrap.contact,.scrap:nth-of-type(3n+1){grid-column:auto!important;height:47vw!important}
  .scrap.s02,.scrap.s07{grid-column:span 2!important}
  .scrap-note{grid-column:1/-1!important}
  .day-page{height:96vw!important}
}
@media (max-width:820px){
  .site-head[data-page="whole-house"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(18,24,20,.55),rgba(18,24,20,.18) 70%,rgba(18,24,20,0))}
}
@media (max-width:620px){
  /* Phones: contact sheets sit two-up instead of one per screen, so the collage keeps its rhythm in fewer screens. */
  .scroll-collage{grid-auto-flow:row dense!important}
  .scrap.contact{grid-column:auto!important;height:64vw!important}
}