/* ---------- BREWERIES PAGE ---------- */
.page-hero { padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 80px); text-align: center; }
.page-hero h1 { max-width: 14ch; margin-inline: auto; }
.page-hero p { margin: var(--s-4) auto 0; font-size: var(--t-lg); color: var(--stout-70); max-width: 44ch; }
.finder { position: sticky; top: 72px; z-index: 5; background: var(--malt); padding-block: var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px solid var(--stout-12); }
.finder input { width: 100%; min-height: 56px; padding: 0 22px; font: 500 var(--t-md) var(--body); color: var(--stout); background: var(--foam); border: 2px solid var(--stout); border-radius: 999px; }
.finder input::placeholder { color: var(--stout-70); }
.finder input:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.chips a { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-decoration: none; padding: 5px 9px; border: 1px solid var(--stout-12); border-radius: 999px; background: var(--foam); transition: background-color .2s, color .2s; }
.chips a:hover { background: var(--stout); color: var(--foam); }
.finder__count { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--stout-70); }
.state { scroll-margin-top: 190px; padding-block: var(--s-4); border-top: 2px solid var(--stout); }
.state h3 { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--s-3); }
.state h3 span { font-family: var(--body); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; color: var(--copper); }
.state ul { columns: 3 260px; column-gap: var(--s-5); }
.state li { break-inside: avoid; padding-block: 10px; border-bottom: 1px solid var(--stout-12); font-size: var(--t-sm); line-height: 1.45; }
.state li strong { font-weight: 700; }
.bl__city { color: var(--stout-70); }
.bl__beer { display: block; font-style: italic; color: var(--stout-70); }
.state[hidden], .state li[hidden] { display: none; }
.no-match { padding-block: var(--s-5); text-align: center; color: var(--stout-70); }
.join { text-align: center; }
.join h2 { max-width: 16ch; margin-inline: auto; }
.join p { margin: var(--s-3) auto 0; font-size: var(--t-lg); color: var(--stout-70); max-width: 46ch; }
.textlink { color: var(--copper); font-weight: 700; text-underline-offset: 4px; }
.textlink:hover { color: var(--stout); }
@media (max-width: 900px) { .finder { top: 72px; } .chips { display: none; } .state { scroll-margin-top: 170px; } }
@media (max-width: 520px) { .finder { top: 64px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }