/* Four-area homepage cards: existing tile look, two columns desktop, one mobile. */
.area-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.area-feature{overflow:hidden;min-width:0}
.area-feature-link{display:block;height:100%;color:inherit;text-decoration:none}
.area-feature .tile-image{height:auto;aspect-ratio:16/9;overflow:hidden}
.area-feature .tile-image img{display:block;width:100%;height:100%;object-fit:cover}
.area-feature .tile-body h3{color:inherit}
.area-feature .tile-body p{color:#57616a}
.area-feature-action{display:inline-block;color:#a77a29;text-decoration:underline;text-underline-offset:3px}
.area-feature-link:hover .area-feature-action,.area-feature-link:focus-visible .area-feature-action{text-decoration-thickness:2px}
.area-feature-link:focus-visible{outline:3px solid #b39b62;outline-offset:-3px}
@media(max-width:650px){.area-feature-grid{grid-template-columns:1fr;gap:18px}}

/* Homepage visual browse area only: use more desktop width without
   changing the global shell, text measure, other pages or mobile layout. */
@media(min-width:1100px){
  #browse-by-area > .shell{
    width:min(calc(100% - 64px),1480px);
    max-width:1480px;
  }
  #browse-by-area .lead{max-width:760px}
}