/* Pour Ashtown here. Tokens and form parts live in site.css. */

.pour-hero { padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 72px); }
.pour-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.pour-title { font-size: clamp(3.2rem, 7.6vw, 6.6rem); line-height: 1.04; color: var(--fir); margin-bottom: 22px; }
.pour-photo { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 50px rgba(42,29,20,.22); }
@media (max-width: 860px) { .pour-hero-grid { grid-template-columns: 1fr; } .pour-photo { order: -1; aspect-ratio: 16 / 9; } }

/* ---------- map + venues ---------- */
.near-grid { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 40px clamp(36px, 6vw, 96px); align-items: start; }
.near-map { position: sticky; top: calc(var(--header-h) + 24px); }
.near-map .section-title { margin-bottom: 18px; }
.tapline { width: 100%; height: auto; }
.tapline .city { font-family: var(--display); font-weight: 650; font-size: 26px; fill: var(--fir); }
.tapline .count { font-family: var(--body); font-size: 15px; fill: var(--text-2); }
.tapline .quiet .city { fill: #A8977F; }
.tapline .hwy { font-family: var(--body); font-weight: 700; font-size: 18px; fill: var(--fir); }
.tapline .river-label { font-family: var(--body); font-style: italic; font-size: 14px; fill: #6F8A8E; }

.city-group { margin-bottom: 40px; }
.city-name {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 2px solid var(--fir);
  font-family: var(--display); font-weight: 650; font-variation-settings: "SOFT" 100, "opsz" 96; font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1.1; color: var(--fir);
}
.city-name span { font: 700 .9rem/1 var(--body); color: var(--text-2); }
.city-group ul { list-style: none; margin: 0; padding: 0; }
.venue { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.venue-name { font-family: var(--display); font-weight: 650; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 1.35rem; line-height: 1.2; color: var(--ink); }
.venue-name a { text-decoration: none; }
.venue-name a:hover { color: var(--red); text-decoration: underline; text-decoration-color: var(--amber); }
.venue-meta { grid-column: 1; font-size: .95rem; color: var(--text-2); }
.venue-beers { grid-column: 1; font-weight: 600; font-size: .98rem; }
.venue-when { grid-column: 2; grid-row: 1 / span 3; align-self: start; white-space: nowrap; font: 600 .9rem/1.3 var(--body); color: var(--text-2); padding-top: 6px; }
.venue.standing .venue-when { color: var(--good); }
@media (max-width: 900px) {
  .near-grid { grid-template-columns: 1fr; }
  .near-map { position: static; max-width: 420px; }
}
@media (max-width: 520px) {
  .venue { grid-template-columns: 1fr; }
  .venue-when { grid-column: 1; grid-row: auto; padding-top: 2px; }
}

/* ---------- the ask: a form on fir ---------- */
.ask-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(36px, 6vw, 96px); align-items: start; }
.ask-intro .lede { margin-top: 22px; color: #E1D6C2; }
.ask-note { margin-top: 20px; padding: 14px 18px; border-radius: 12px; background: rgba(255,246,230,.07); color: #E1D6C2; max-width: 30em; }
.ask .field > label, .ask .legend { color: var(--cream); }
.ask .opt { color: #B8C9BE; }
.ask-form { display: grid; gap: 18px; }
.ask-form .grid-2 { gap: 18px 20px; }
.ask .input { border-color: transparent; }
.modes { border: 0; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode { position: relative; cursor: pointer; }
.mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode span { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 1.5px solid rgba(255,246,230,.35); border-radius: 12px; }
.mode strong { font-family: var(--display); font-weight: 650; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 1.15rem; line-height: 1.2; color: var(--cream); }
.mode small { font-size: .88rem; color: #C9D6CD; }
.mode:hover span { border-color: var(--cream); }
.mode input:checked + span { background: var(--amber); border-color: var(--amber); }
.mode input:checked + span strong { color: var(--ink); }
.mode input:checked + span small { color: #4A3520; }
.mode input:focus-visible + span { outline: 3px solid var(--cream); outline-offset: 2px; }
@media (max-width: 1100px) { .ask-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .modes { grid-template-columns: 1fr; } }

.beer-chips .chip span { background: transparent; color: var(--cream); border-color: rgba(255,246,230,.4); min-height: 42px; padding: 7px 16px; }
.beer-chips .chip input:checked + span { background: var(--cream); color: var(--fir); border-color: var(--cream); }
.ask .form-error { background: #3B1F17; color: #FFE1D6; border-left-color: var(--amber); }
.form-done { border-left: 5px solid var(--amber); background: rgba(255,246,230,.1); color: #fff; padding: 12px 16px; border-radius: 0 10px 10px 0; font-weight: 600; }
.ask .ts:empty { display: none; }