/* Recognisable brewery tap: a brief amber pour when the link is activated. */
.nav nav,.nav nav>ul{align-items:center}
.nav nav a.toc-tap-nav{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:3px 12px 3px 3px;min-height:78px;border:1.5px solid #244b32;background:#eddfb9;box-shadow:3px 3px 0 #df7422;color:#202820;white-space:nowrap;isolation:isolate}
.toc-tap-label{font-size:.94rem;font-weight:700;line-height:1.25}
.toc-tap-label small{display:block;font:700 .49rem/1.5 monospace;letter-spacing:.08em;margin-top:4px}
.toc-nav-tap{position:relative;display:block;flex:0 0 66px;width:66px;height:78px;--tap-size:66px;perspective:330px}
.toc-nav-tap img{position:absolute;top:0;left:0;display:block;width:var(--tap-size);height:var(--tap-size);object-fit:contain}
/* Complementary masks keep the original photograph intact at rest.
   Only the handle above the valve collar moves; the faucet stays fixed. */
.toc-nav-tap .toc-tap-body{clip-path:polygon(0 0,49% 0,49% 8%,54.5% 50%,56.5% 51.5%,56.5% 53%,66% 53%,66% 51.5%,68% 50%,68% 0,100% 0,100% 100%,0 100%);z-index:2}
.toc-nav-tap .toc-tap-handle{clip-path:polygon(49% 0,68% 0,68% 50%,66% 51.5%,66% 53%,56.5% 53%,56.5% 51.5%,54.5% 50%,49% 8%);transform-origin:61% 53.5%;z-index:1;backface-visibility:hidden}
.toc-tap-nav.is-pouring .toc-tap-handle{animation:toc-tap-handle 1.8s cubic-bezier(.3,0,.2,1) both}
@keyframes toc-tap-handle{0%,100%{transform:rotateZ(0) rotateX(0)}20%,67%{transform:rotateZ(18deg) rotateX(-18deg)}86%{transform:rotateZ(0) rotateX(0)}}
.toc-tap-pour{position:absolute;left:61%;top:calc(var(--tap-size) * .885);width:4px;height:17px;opacity:0;transform:scaleY(0);transform-origin:top;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#b86718 0 20%,#f3b43f 20% 70%,#ffe1a0 70%);pointer-events:none}
.toc-tap-splash{position:absolute;left:calc(61% - 4px);top:calc(var(--tap-size) * .885 + 16px);width:3px;height:2px;opacity:0;background:#df941f;box-shadow:5px 0 #f3b43f,9px -2px #df941f,-2px -3px #f3b43f;pointer-events:none}
.nav nav a.toc-tap-nav[aria-current=page]{background:#e6b963}
.nav nav a.toc-tap-nav:focus-visible{outline:3px solid #244b32;outline-offset:5px;background:#e6b963}
@media(hover:hover){.nav nav a.toc-tap-nav:hover{background:#e6b963}}
.toc-tap-nav.is-pouring .toc-tap-pour{animation:toc-tap-pour 1.8s ease-out both}
.toc-tap-nav.is-pouring .toc-tap-splash{animation:toc-tap-splash 1.8s steps(4,end) both}
@keyframes toc-tap-pour{0%,15%{opacity:0;transform:scaleY(0)}30%,70%{opacity:1;transform:scaleY(1)}86%{opacity:.6;transform:scaleY(.65)}94%,100%{opacity:0;transform:scaleY(0)}}
@keyframes toc-tap-splash{0%,28%{opacity:0;transform:translateY(-2px)}38%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2px)}}
@media(min-width:701px) and (max-width:1000px){
 .nav{gap:20px;flex-wrap:wrap;justify-content:center}
 .nav nav{width:100%;justify-content:center;gap:12px 22px}
 .nav nav>ul{justify-content:center;gap:12px 22px;flex-wrap:wrap}
}
@media(max-width:700px){
 .nav{display:flex;flex-wrap:wrap;justify-content:center;padding:16px 6%;gap:16px}
 .nav>.wordmark,.nav>.custom-logo-link{margin-inline:auto}
 .nav nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:10px 8px}
 .nav nav>ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1/-1;width:100%;gap:10px 8px}
 .nav nav a{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:.76rem;padding:8px 2px;white-space:nowrap}
 .nav nav a.toc-shop-nav{display:flex;padding:8px 3px;border:0}
 .nav nav a.toc-tap-nav{gap:1px;padding:2px;min-height:60px;box-shadow:2px 2px 0 #df7422}
 .toc-nav-tap{flex-basis:44px;width:44px;height:59px;--tap-size:44px}
 .toc-tap-label{font-size:.76rem}
 .toc-tap-label small{display:none}
 .nav nav>ul .sub-menu{display:flex;flex-wrap:wrap}
}
@media(max-width:360px){.nav nav,.nav nav>ul{grid-template-columns:1.1fr .95fr .95fr}}
@media(prefers-reduced-motion:reduce){
 .toc-tap-nav .toc-tap-pour,.toc-tap-nav .toc-tap-splash,.toc-tap-nav .toc-tap-handle{animation:none!important}
}