/* Texture sits behind content, never over lettering or controls. */
main>section,.local-copy,.food-page,footer{position:relative;isolation:isolate}
main>section::before,.local-copy::before,.food-page::before,footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.035;background-image:url("assets/paper-grain.svg")}
.pizza{background:radial-gradient(ellipse at 15% 65%,#3c2d1f66,transparent 60%),repeating-linear-gradient(174deg,transparent 0 91px,#e8cf9d03 92px,transparent 93px 171px),var(--oak)}
.quick-info,.local-copy{background-image:repeating-linear-gradient(176deg,transparent 0 137px,#d0ad7804 138px,transparent 139px 211px)}
/* Let hero content determine its height; keep the caption in normal flow. */
.hero{display:grid;grid-template-rows:1fr auto;height:auto;min-height:max(620px,calc(90svh - 100px));max-height:none}
.hero-content{align-self:center;padding-bottom:40px}
.hero-caption{position:relative;left:auto;bottom:auto;margin:0;padding:22px 12% 30px 7%;z-index:1}
@media(max-width:1000px){.hero{min-height:650px}}
@media(max-width:680px){.hero{min-height:625px}.hero-content{padding-bottom:35px}.hero-caption{padding:20px 16% 28px 6%}}
@media(forced-colors:active){main>section::before,.local-copy::before,.food-page::before,footer::before{display:none}}

/* SVG arrows cannot switch to emoji on iPhone or tablet browsers. */
.link-arrow{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle;overflow:visible}
.button>span,.text-link>span{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}
.scroll{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.scroll .link-arrow{width:28px;height:28px;flex-basis:28px}
.header nav{font-size:15px;gap:28px}
.header .menu-toggle{font-size:13px}
@media(min-width:681px) and (max-width:900px){
 .header{position:relative;z-index:5;gap:20px}
 .header .brand img{width:170px}
 .header .menu-toggle{display:block;margin-left:auto;min-width:44px;min-height:44px;padding:10px 0;background:none;border:0;color:var(--cream)}
 .header nav{display:none;position:absolute;top:85px;left:0;right:0;background:#171612;border-bottom:1px solid var(--line);padding:20px 6%;gap:16px;flex-direction:column}
 .header nav.open{display:flex}
 .header nav a{font-size:16px;min-height:44px;display:flex;align-items:center}
}
@media(max-width:680px){.header .menu-toggle{font-size:12px}.header nav a{font-size:16px;min-height:44px;display:flex;align-items:center}}

.quick-actions{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:27px}
.quick-info .quick-actions .quick-directions{margin-top:0;min-height:36px;display:inline-flex;align-items:center;gap:8px}
.quick-info .quick-actions .quick-phone{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;white-space:nowrap;border-bottom:1px solid transparent}
.quick-info .quick-phone:hover{border-bottom-color:var(--amber)}
@media(max-width:680px){.quick-actions{padding-top:25px}.quick-info .quick-actions .quick-phone{font-size:13px}}

/* Inline, crawlable tasting notes: hover, keyboard focus or tap. */
.tap-card .beer-tasting{margin:18px 0 0;border:0;border-top:1px solid var(--line);padding:0}
.tap-card .beer-tasting>summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;font:500 13px/1.5 'DM Sans',sans-serif;color:var(--cream);cursor:pointer;list-style:none}
.beer-tasting>summary::-webkit-details-marker{display:none}
.beer-tasting>summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.beer-tasting[open]>summary>span{transform:rotate(45deg)}
.tap-card .tasting-content{padding:0 0 5px}
.tap-card .tasting-content p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.tap-card .tasting-content .beer-abv{color:var(--amber);font-weight:600;margin-bottom:6px}
.tap-card:has(.beer-tasting[open]){border-color:var(--amber)}

.beer-counter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin:30px 0 10px;padding:22px 0;gap:20px}
.beer-counter>div{display:flex;flex-direction:column;gap:6px}
.beer-counter strong{font:600 36px/1.1 'DM Sans',sans-serif;color:var(--amber);font-variant-numeric:tabular-nums}
.beer-counter span,.range-count-note{font-size:13px;line-height:1.6;color:var(--muted)}
.range-count-note{max-width:700px;margin:0 0 24px}
@media(max-width:680px){.beer-counter{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.beer-counter strong{font-size:30px}}

/* Small mechanical tally, with no animation or extra assets. */
.beer-counter{display:flex;align-items:center;gap:18px;border:0;margin:28px 0 12px;padding:0}
.beer-counter .tally-display{display:flex;flex-direction:row;gap:3px;padding:6px;background:#0e0e0c;border:1px solid var(--line);border-radius:3px;box-shadow:inset 0 1px 5px #0008}
.beer-counter .tally-display>span{display:grid;place-items:center;width:30px;height:42px;font:600 30px/1 monospace;color:var(--cream);background:linear-gradient(#24231e 49%,#090907 50%,#25231e 52%);border:1px solid #494439;border-radius:2px}
.beer-counter .tally-label{gap:4px}
.beer-counter .tally-label>strong{font:600 14px/1.5 'DM Sans',sans-serif;color:var(--amber)}
.beer-counter .tally-label>strong>span{font:inherit;color:inherit}
.beer-counter .tally-label>span{font-size:12px;line-height:1.6}
.beer-counter b{font-weight:500}
.range-count-note{font-size:12px;max-width:620px}
@media(max-width:380px){.beer-counter{gap:12px}.beer-counter .tally-display>span{width:25px;height:38px;font-size:27px}.beer-counter .tally-label>strong{font-size:13px}}

/* Keep the four plain upcoming beers aligned; Archer has its own full row. */
#coming-soon .coming-soon-archer{grid-column:1/-1}
#coming-soon .coming-soon-archer .archer-info{margin-top:12px}

#bottles .beer-list{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){#bottles .beer-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){#bottles .beer-list{grid-template-columns:1fr}}

#bottles .beer-entry{padding:0;min-width:0}
.beer-entry .beer-tasting{border:0;margin:0;padding:0}
.beer-entry .beer-tasting>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:64px;padding:14px 0;font:400 14px/1.6 'DM Sans',sans-serif}
.beer-entry .beer-tasting>summary>span{color:var(--amber);flex-shrink:0}
.beer-entry .tasting-content{padding:0 0 18px;font-size:13px;line-height:1.7;color:var(--muted)}
.beer-entry .tasting-content p{margin:0 0 5px}
.beer-entry .beer-abv{color:var(--amber);font-weight:600}
.beer-entry .tasting-content small{font-size:11px}
#bottles .beer-list{align-items:start}

@media(min-width:901px) and (hover:hover) and (pointer:fine){
 .beer-entry{position:relative}
 .beer-entry .tasting-content{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:10;padding:16px;background:#252119;border:1px solid var(--amber);box-shadow:0 10px 22px #0008}
}

#bottles .beer-tasting:not([open])>summary>span{transform:none}
#bottles .beer-tasting[open]>summary>span{transform:rotate(45deg)}

/* A little more pub-wall wear. Texture remains behind all content. */
main>section::before,.local-copy::before,.food-page::before,footer::before{opacity:.085}
.quick-info,.local-copy,.food-page{background-color:#1c1913}
.tap-card,.coming-soon-list li,.mentions-grid article{border-top-style:dashed;border-color:#b08b525c}
.button{box-shadow:3px 3px 0 #08080680;border-color:#d7a461}
.image-stamp{outline-style:dashed}
.bar-image>img,.visit figure img{border:1px solid #89704c66;box-shadow:5px 5px 0 #08080666}
.venue-faq summary{font-weight:600}