/* page styles: hot-deals-for-locals.html */
/* This page's hero line is a full sentence rather than the usual
       one- or two-word place name every other .mast page carries, so
       the shared clamp(34px,6.4vw,96px) reads oversized here. Scoped to
       .mast__title--sm so every other page's masthead is untouched. */
    .mast__title--sm{font-size:clamp(24px,4vw,56px)}

    /* lighter dark overlay on this page's four region cards, so more of each
       photo shows; a soft text-shadow keeps the white title readable */
    .gate__veil{background:linear-gradient(180deg,rgb(var(--ink-rgb) / 0) 55%,rgb(var(--ink-rgb) / .3) 78%,rgb(var(--ink-rgb) / .65) 100%)}
    .gate:hover .gate__veil{background:linear-gradient(180deg,rgb(var(--ink-rgb) / 0) 45%,rgb(var(--ink-rgb) / .38) 74%,rgb(var(--ink-rgb) / .75) 100%)}
    .gate__title,.gate__desc{text-shadow:0 1px 10px rgb(var(--ink-rgb) / .55)}
    /* smaller choice cards: two side by side at every width */
    .gateGrid{max-width:520px;gap:16px}
    @media (max-width:640px){
      .gateGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;gap:12px}
      .gateGrid .gate{aspect-ratio:4/5}
      .gateGrid .gate__body{padding:14px;gap:8px}
      .gateGrid .gate__title{font-size:14.5px;margin:0}
      .gateGrid .gate__go{width:32px;height:32px}
    }
    /* page is just the two cards, centred under the menu */
    .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .dealsPick{min-height:calc(100vh - 260px);display:flex;align-items:center;padding-top:calc(var(--navh) + clamp(40px,6vw,80px))}
    .dealsPick .wrap{width:100%}
    /* no dark banner behind the menu here, so it is solid from the start */
    .nav{background:rgb(var(--ink-rgb) / .82);box-shadow:inset 0 -1px 0 var(--line)}