/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Hollow Pine: motion in the print shop's own language. The site already "pulls" its hero labels into register once;
   here everything that scrolls in is another pass through the press. Type and rows are pulled into register from up
   and to the right (the same offset as the hero plates), labels and photos are laid down by a squeegee pass, and the
   four badges in the band are stamped on. Nothing is hidden unless the script is running (.mo-ready). */
.mo-ready .mo { opacity: 0; transform: translate(14px, -10px); transition: opacity .28s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; }

/* headlines: inked left to right */
.mo-ready h2.mo { opacity: 1; transform: none; clip-path: inset(-12% 100% -12% -2%); transition: clip-path .75s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready h2.mo.in { clip-path: inset(-12% -2% -12% -2%); }

/* die-cut labels and photos: one squeegee pass, top to bottom, landing a hair off and settling */
.mo-ready .sheet > li.mo, .mo-ready .tiers > li.mo, .mo-ready .rules-label.mo, .mo-ready .week-photo.mo, .mo-ready .room-photos.mo, .mo-ready .pour-photo.mo, .mo-ready .map.mo, .mo-ready .mugwall.mo, .mo-ready .credit.mo {
  opacity: 1; transform: translate(6px, -8px); clip-path: inset(-8px -8px 100% -8px);
  transition: clip-path .8s cubic-bezier(.3, .6, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .sheet > li.mo.in, .mo-ready .tiers > li.mo.in, .mo-ready .rules-label.mo.in, .mo-ready .week-photo.mo.in, .mo-ready .room-photos.mo.in, .mo-ready .pour-photo.mo.in, .mo-ready .map.mo.in, .mo-ready .mugwall.mo.in, .mo-ready .credit.mo.in { transform: none; clip-path: inset(-8px -8px -8px -8px); }

/* the badges in the band: stamped on */
.mo-ready .mo-item.mo { opacity: 0; transform: scale(1.14) rotate(-3deg); transition: opacity .16s linear, transform .42s cubic-bezier(.2, .9, .3, 1); transition-delay: calc(var(--mo-i, 0) * 90ms); }
.mo-ready .mo-item.mo.in { opacity: 1; transform: none; }

/* The badge band: a strip of the lichen press bed with crop marks, four two-ink badges that link to the main pages.
   Each badge turns a few degrees as the page scrolls, and a ghost of its key plate slides into register at mid-screen. */
.mo-band { background-color: var(--lichen); color: var(--ink); padding: var(--s5) 0; overflow: hidden; }
@media (min-width: 800px) { .mo-band { padding: var(--s6) 0; } }
.mo-bed { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding: var(--s4) var(--s3); margin: 0 4px; }
.mo-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--ink); padding: var(--s2); border-radius: var(--r); }
.mo-ic { display: block; width: min(100%, 168px); margin-bottom: var(--s3); will-change: transform; }
.mo-ic img { width: 100%; height: auto; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(calc((var(--mo-p, .5) - .5) * -22px) calc((var(--mo-p, .5) - .5) * 16px) 0 rgba(29, 64, 48, .3)); }
.mo-name { font: 400 1.375rem/1.08 var(--display); color: var(--pine); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--red); margin-bottom: 6px; }
.mo-item small { display: block; font: 700 .9375rem/1.4 var(--text); color: var(--ink); max-width: 22ch; text-wrap: balance; }
.mo-item:hover .mo-ic img, .mo-item:focus-visible .mo-ic img { transform: translate(-3px, -5px) rotate(-4deg); filter: drop-shadow(5px 6px 0 var(--pine)); }
.mo-item:hover .mo-name { text-decoration-thickness: 3px; }
@media (max-width: 760px) { .mo-bed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); padding: var(--s4) var(--s2); } .mo-ic { width: min(100%, 124px); } .mo-name { font-size: 1.25rem; } }

/* ---- Menu: a bold label bar. Across the top it is the old pine header. After the first scroll it floats as a die-cut beer label:
   bone stock with scooped corners (the same cut as the site's labels), a thick ink outline, a fine key line inside, and a hard hop
   shadow. The shape is drawn by .mo-die so nothing in the bar (or the phone menu) is clipped by it. ---- */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 64px; --mo-nav-gap: 12px; --mo-nav-max: 980px; --mo-nav-pad: var(--gut); --mo-nav-bg: var(--bone); --mo-nav-ink: var(--bone);
  --mo-nav-line: transparent; --mo-nav-shadow: none; --mo-nav-radius: 0px; --mo-mark: var(--hop); --mo-hover: var(--lichen); --mo-R: 13px; --mo-key: 7px; }
html.mo-scrolled { --mo-nav-ink: var(--ink); --mo-mark: var(--red); --mo-hover: var(--pine); }
.mo-hdr { --focus: var(--hop); }
.mo-scrolled .mo-hdr { --focus: var(--ink); }
html:not(.mo-scrolled) .mo-hdr { background: var(--pine) var(--grain); }
.mo-bar { isolation: isolate; max-width: calc(var(--wrap) + 2 * var(--gut) - 2 * var(--mo-nav-gap)); transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), padding var(--mo-nav-move), color .2s linear; }
.mo-scrolled .mo-bar { max-width: var(--mo-nav-max); padding: 0 16px 0 22px; background: transparent; border-color: transparent; box-shadow: none; }
.mo-die { position: absolute; inset: -1px; z-index: -1; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 0 var(--hop)); transition: opacity .2s linear, filter .32s cubic-bezier(.2, .7, .2, 1); }
.mo-scrolled .mo-die { opacity: 1; filter: drop-shadow(5px 6px 0 var(--hop)); }
.mo-die i { position: absolute; inset: 0; z-index: 1; }
.mo-die::before, .mo-die::after, .mo-die i::before, .mo-die i::after { content: ""; position: absolute; inset: var(--x); --r: calc(var(--mo-R) + var(--x)); --n: calc(-1 * var(--x)); --p: calc(100% + var(--x));
  -webkit-mask: radial-gradient(circle at var(--n) var(--n), #0000 var(--r), #000 calc(var(--r) + .6px)) 0 0 / 51% 51% no-repeat, radial-gradient(circle at var(--p) var(--n), #0000 var(--r), #000 calc(var(--r) + .6px)) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at var(--n) var(--p), #0000 var(--r), #000 calc(var(--r) + .6px)) 0 100% / 51% 51% no-repeat, radial-gradient(circle at var(--p) var(--p), #0000 var(--r), #000 calc(var(--r) + .6px)) 100% 100% / 51% 51% no-repeat;
  mask: radial-gradient(circle at var(--n) var(--n), #0000 var(--r), #000 calc(var(--r) + .6px)) 0 0 / 51% 51% no-repeat, radial-gradient(circle at var(--p) var(--n), #0000 var(--r), #000 calc(var(--r) + .6px)) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at var(--n) var(--p), #0000 var(--r), #000 calc(var(--r) + .6px)) 0 100% / 51% 51% no-repeat, radial-gradient(circle at var(--p) var(--p), #0000 var(--r), #000 calc(var(--r) + .6px)) 100% 100% / 51% 51% no-repeat; }
.mo-die::before { --x: 0px; background: var(--ink); }
.mo-die::after { --x: 3px; background: var(--bone) var(--grain); }
.mo-die i::before { --x: var(--mo-key); background: var(--ink); }
.mo-die i::after { --x: calc(var(--mo-key) + 1.5px); background: var(--bone) var(--grain); }

.mo-brand { gap: 12px; min-height: 44px; }
.mo-brand .logo-mark { width: 40px; height: 40px; color: inherit; }
.mo-brand-name { font: 400 1.375rem/1 var(--display); white-space: nowrap; }
.mo-brand-sub { display: block; font: 700 .875rem/1.3 var(--text); color: var(--lichen); margin-top: 3px; }
.mo-scrolled .mo-brand-sub { color: var(--pine); }
.mo-link { font: 400 1.0625rem/1 var(--display); letter-spacing: .01em; min-height: 44px; padding: 0 14px; text-decoration: underline 3px transparent; text-underline-offset: 8px; transition: text-decoration-color .15s linear; }
.mo-link:hover { text-decoration-color: var(--mo-hover); }
.mo-link[aria-current="page"] { text-decoration-color: var(--mo-mark); }
.mo-bar > .mo-cta { min-height: 44px; padding: 8px 18px; margin-left: 8px; }
.mo-scrolled .mo-bar > .mo-cta { min-height: 40px; padding-block: 6px; }
.mo-menu-btn { min-height: 44px; padding: 0 14px; font: 800 1rem/1 var(--text); border: 2px solid currentColor; border-radius: var(--r); }
.mo-scrolled .mo-menu-btn { min-height: 40px; }
.mo-w-close, .mo-menu-btn[aria-expanded="true"] .mo-w-menu { display: none; }
.mo-menu-btn[aria-expanded="true"] .mo-w-close { display: inline; }
.mo-nav-cta, .mo-hours, .mo-nav .mo-colorbar { display: none; }

/* On a phone: "Menu" opens a full screen of the pine press bed with the pages in big label type, the main button, and today's hours line
   (the site's own schedule script fills it in). The label bar stays on top of it; the bottom quick bar is covered while it is open. */
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 56px; --mo-nav-gap: 8px; --mo-key: 5.5px; }
  .mo-bar > .mo-cta { margin-left: auto; }
  .mo-scrolled .mo-bar { padding: 0 12px 0 16px; }
  .mo-brand .logo-mark { width: 36px; height: 36px; }
  .mo-brand-name { font-size: 1.25rem; }
  .mo-scrolled .mo-brand-sub { display: none; }
  .mo-menu-btn { margin-left: auto; }
  .mo-bar > .mo-cta + .mo-menu-btn { margin-left: 0; }
  html.js.mo-nav-open { overflow: hidden; }
  html.js .mo-nav { position: fixed; inset: 0; z-index: -2; max-height: none; height: 100dvh; padding: calc(var(--mo-nav-h) + 20px) var(--gut) calc(28px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none;
    background: var(--pine) var(--grain); color: var(--bone); --focus: var(--hop); --mo-mark: var(--hop); overscroll-behavior: contain; }
  html.js.mo-nav-open .mo-nav { display: flex; flex-direction: column; animation: mo-pass .28s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .mo-nav > ul { flex: none; }
  html.js .mo-link { font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.05; min-height: 72px; padding: 0; justify-content: flex-start; border-bottom: 2px solid var(--lichen); text-underline-offset: 10px; text-decoration-thickness: 4px; }
  html.js .mo-nav-cta { display: block; margin-top: var(--s4); }
  html.js .mo-nav-cta .btn { width: 100%; min-height: 56px; font-size: 1.1875rem; }
  html.js .mo-hours { display: flex; gap: 12px; align-items: flex-start; margin: auto 0 0; padding-top: var(--s5); font-weight: 700; max-width: 34ch; }
  html.js .mo-hours .i { color: var(--hop); margin-top: 1px; }
  html.js .mo-nav .mo-colorbar { display: flex; flex: none; }
  /* without the script the button could not open anything, so the links sit in a plain row under the name */
  html:not(.js) .mo-menu-btn { display: none; }
  html:not(.js) .mo-hdr { height: auto; }
  html:not(.js) .mo-bar { height: auto; flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .mo-nav { position: static; display: block; flex-basis: 100%; max-height: none; padding: 0; border: 0; box-shadow: none; background: none; color: inherit; }
  html:not(.js) .mo-nav > ul { flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .mo-link { width: auto; padding: 0 14px 0 0; }
}
@media (max-width: 559px) { .mo-bar > .mo-cta { display: none; } .mo-bar > .mo-cta + .mo-menu-btn { margin-left: auto; } }
@media (max-width: 359px) { .mo-brand { gap: 8px; } .mo-brand .logo-mark { width: 32px; height: 32px; } .mo-brand-name { font-size: 1.125rem; } .mo-brand-sub { font-size: .8125rem; } }
@keyframes mo-pass { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Hero: one pinned scroll section, a print being pulled. The photo starts as a one-ink pine proof; a hop squeegee bar travels down
   the sheet and leaves full colour behind it. When the bar reaches the three labels their colour plates slide into register one after
   another, and the labels lift off the sheet and fan out. A hop rule along the bottom shows how far the pull has gone.
   The headline, the intro and the buttons do not move. ---- */
.mo-pin { --mo-pin-offset: 76px; --mo-pin-extra: 90vh; }
/* the hero is a little taller than a 900 px window, so where the pin can run it gives up some padding (has to apply before the kit measures it) */
@media (min-width: 960px) and (min-height: 820px) {
  .mo-ready .mo-pin > .hero { padding: 28px 0 32px; }
  .mo-ready .mo-pin .tonight { margin-top: 28px; padding-top: 20px; }
}
.mo-pin.is-pinned { --k1: clamp(0, calc((var(--mo-pin) - .56) / .2), 1); --k2: clamp(0, calc((var(--mo-pin) - .63) / .2), 1); --k3: clamp(0, calc((var(--mo-pin) - .7) / .2), 1); --kl: clamp(0, calc((var(--mo-pin) - .66) / .34), 1); }
/* the strip behind the floating bar stays pine press bed for the length of the pin, so the label floats over the hero's colour */
.mo-pin.is-pinned { display: flow-root; }
.mo-pin.is-pinned::before { content: ""; display: block; position: sticky; top: 0; height: var(--mo-pin-offset); margin-top: calc(-1 * var(--mo-pin-offset)); background: var(--pine) var(--grain); pointer-events: none; }
.mo-pin.is-pinned > .hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--hop); transform-origin: 0 50%; transform: scaleX(var(--mo-pin)); }
.mo-pin.is-pinned .hero-art::before { content: ""; position: absolute; inset: 0; background: var(--pine); mix-blend-mode: color; pointer-events: none; clip-path: inset(calc(var(--mo-pin) * 100%) 0 150px 0); }
.mo-pin.is-pinned .hero-art::after { content: ""; position: absolute; left: -14px; right: -14px; top: 0; bottom: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(var(--ink) 0 2px, var(--hop) 2px 12px, var(--ink) 12px 14px) top / 100% 14px no-repeat; transform: translateY(calc(var(--mo-pin) * (100% + 6px))); }
.mo-pin.is-pinned .fan .fan-1 { transform: translate(calc(var(--kl) * -14px), calc(var(--kl) * -30px)) rotate(calc(-7deg - var(--kl) * 5deg)); }
.mo-pin.is-pinned .fan .fan-2 { transform: translateY(calc(var(--kl) * -52px)) rotate(calc(2deg - var(--kl) * 3deg)) scale(calc(1 + var(--kl) * .06)); }
.mo-pin.is-pinned .fan .fan-3 { transform: translate(calc(var(--kl) * 10px), calc(var(--kl) * -26px)) rotate(calc(8deg + var(--kl) * 5deg)); }
.mo-pin.is-pinned .fan-1 .plate { transform: translate(calc(-2px + (1 - var(--k1)) * 11px), calc(2.2px - (1 - var(--k1)) * 9px)); }
.mo-pin.is-pinned .fan-2 .plate { transform: translate(calc(-1.4px - (1 - var(--k2)) * 10px), calc(-2.2px - (1 - var(--k2)) * 8px)); }
.mo-pin.is-pinned .fan-3 .plate { transform: translate(calc(.8px + (1 - var(--k3)) * 11px), calc(2.7px + (1 - var(--k3)) * 8px)); }