/* 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); }
/* The Bluff Room: motion in the club's own language. The room is lit by lamps and a marquee, and everything is
   printed like a menu card. So headings come on like a sign bulb warming up, menu cards open from their centre
   rule, each row's dot leader runs out to its price, and photographs come up on a dimmer. */

/* 1. Headings: a bulb that catches, dips and holds. */
@keyframes mo-lamp { 0% { opacity: 0; filter: brightness(1.7); } 16% { opacity: .8; } 28% { opacity: .18; } 44% { opacity: .92; } 56% { opacity: .5; filter: brightness(1.35); } 100% { opacity: 1; filter: none; } }
.mo-ready .mo { opacity: 0; }
.mo-ready .mo.in { opacity: 1; animation: mo-lamp .7s linear both; animation-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .card .card-head.mo.in { animation-delay: .28s; }

/* 2. Menu cards and ruled boxes: opened from the centre, the way a folded card is. */
.mo-ready .card.mo, .mo-ready .note-box.mo { opacity: 0; clip-path: inset(0 50% 0 50%); transition: opacity .3s ease-out, clip-path .75s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .card.mo.in, .mo-ready .note-box.mo.in { opacity: 1; clip-path: inset(-12px); animation: none; }

/* 3. Rows: the line is set, then its dot leader runs out to the price. */
.mo-ready li.mo, .mo-ready .press-terms > .mo, .mo-ready .dirs > .mo, .mo-ready details.mo { opacity: 0; transform: translateY(10px); transition: opacity .45s ease-out, transform .55s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready li.mo.in, .mo-ready .press-terms > .mo.in, .mo-ready .dirs > .mo.in, .mo-ready details.mo.in { opacity: 1; transform: none; animation: none; }
.mo-ready .mo.row > .lead, .mo-ready .mo > .row > .lead { clip-path: inset(0 100% 0 0); transition: clip-path .6s ease-out; transition-delay: calc(var(--mo-i, 0) * 70ms + .18s); }
.mo-ready .mo.in.row > .lead, .mo-ready .mo.in > .row > .lead { clip-path: inset(0); }
.mo-ready .mo.row > .lead ~ *, .mo-ready .mo > .row > .lead ~ * { opacity: 0; transition: opacity .3s ease-out; transition-delay: calc(var(--mo-i, 0) * 70ms + .55s); }
.mo-ready .mo.in.row > .lead ~ *, .mo-ready .mo.in > .row > .lead ~ * { opacity: 1; }

/* 4. Photographs in their brass mats, and the road map: brought up on the dimmer. */
.mo-ready .frame.mo, .mo-ready .map-wrap.mo { opacity: 0; filter: brightness(.25) sepia(.5); transition: opacity .5s ease-out, filter .85s ease-out; transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .frame.mo.in, .mo-ready .map-wrap.mo.in { opacity: 1; filter: none; animation: none; }

/* 5. Footer blocks: quiet, just settle. */
.mo-ready .site-foot .mo { opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .site-foot .mo.in { opacity: 1; transform: none; animation: none; }

/* The band: four menu-card spot drawings under a run of marquee bulbs. The bulbs light left to right (and back along
   the bottom) as the band scrolls through; with scripts off or motion reduced they are simply all lit. */
.mo-band { position: relative; background: var(--lounge); border-block: 1px solid rgba(200,161,90,.45); padding-block: calc(var(--s7) + 14px) calc(var(--s7) + 10px); }
.mo-bulbs { position: absolute; left: 16px; right: 16px; top: 15px; height: 12px; pointer-events: none;
  background: radial-gradient(circle, #3d1a14 0 3.6px, #7d5a2a 4px 5.4px, transparent 6px) 0 50% / 30px 12px space no-repeat; background-repeat: space no-repeat; }
.mo-bulbs::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, #fffaf0 0 1.2px, var(--lamp) 2.6px, #e2a74b 4.2px, transparent 4.8px) 0 50% / 30px 12px; background-repeat: space no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,210,130,.75)) drop-shadow(0 0 10px rgba(255,190,100,.3));
  clip-path: inset(-16px max(-16px, calc(100% - var(--mo-p, 1) * 400%)) -16px -16px); }
.mo-bulbs--low { top: auto; bottom: 15px; }
.mo-bulbs--low::after { clip-path: inset(-16px -16px -16px max(-16px, calc(200% - var(--mo-p, 1) * 400%))); }
.mo-band__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) clamp(16px, 3vw, 48px); }
.mo-item { display: grid; justify-items: center; align-content: start; text-align: center; text-decoration: none; color: var(--white); padding: var(--s2) var(--s2) var(--s3); border-radius: var(--r); }
.mo-ico { display: block; width: min(100%, 168px); margin-bottom: var(--s4); }
.mo-ico img { width: 100%; height: auto; transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease-out; }
.mo-name { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; }
.mo-rule { display: block; width: 72px; height: 9px; margin: var(--s3) auto; background: radial-gradient(circle, var(--brass) 2.5px, transparent 3px) center / 9px 9px no-repeat, linear-gradient(var(--brass), var(--brass)) center / 100% 1px no-repeat; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.mo-item small { display: block; font-family: var(--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.35; color: var(--brass); max-width: 22ch; }
.mo-item:hover { color: var(--white); }
.mo-item:hover .mo-name, .mo-item:focus-visible .mo-name { color: var(--brass-hi); }
.mo-item:hover img, .mo-item:focus-visible img { transform: translateY(-5px); filter: drop-shadow(0 0 10px rgba(255,210,130,.5)) drop-shadow(0 0 26px rgba(255,190,100,.25)); }
.mo-item:hover .mo-rule, .mo-item:focus-visible .mo-rule { width: 112px; }
@media (max-width: 760px) { .mo-band__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s3); } .mo-ico { width: min(100%, 128px); } .mo-name { font-size: 1.25rem; } .mo-item small { font-size: 1rem; } }
@media (max-width: 640px) { .mo-band { padding-block: calc(var(--s6) + 14px) calc(var(--s6) + 10px); } .mo-bulbs { background-size: 24px 12px; left: 12px; right: 12px; } .mo-bulbs::after { background-size: 24px 12px; } }

/* ================= Round 2 ================= */

/* ---- Menu: the name in the middle like the head of a menu card, two links each side, and a thin row of facts above.
   The thin row scrolls away (the header sticks 40px above the screen), the main row stays and, after the first scroll,
   floats as a small menu card: lounge green, brass edge with the card's second rule inside it.
   The page you are on has its marquee bulb lit under the link. ---- */
:root { --mo-top-h: 40px; --mo-nav-h: 72px; --mo-nav-h-float: 56px; --mo-nav-max: 1160px; --mo-brand-gap: 232px;
  --mo-nav-bg: var(--lounge); --mo-nav-ink: var(--white); --mo-nav-line: var(--brass); --mo-nav-radius: var(--r);
  --mo-nav-shadow: inset 0 0 0 3px var(--lounge), inset 0 0 0 4px rgba(200,161,90,.5), 0 18px 30px rgba(5,14,9,.55);
  --mo-nav-pad: max(16px, calc((100vw - var(--wrap)) / 2)); }
html { scroll-padding-top: 96px; }
.skip:focus { z-index: 70; }
.mo-hdr { height: calc(var(--mo-top-h) + var(--mo-nav-h)); top: calc(-1 * var(--mo-top-h)); background: var(--lounge); box-shadow: 0 1px 0 rgba(200,161,90,.45);
  transition: transform 340ms cubic-bezier(.2,.7,.2,1), background-color .2s linear, box-shadow .2s linear; }
.mo-scrolled .mo-hdr { background: transparent; box-shadow: none; }

/* the thin row */
.mo-top { pointer-events: auto; height: var(--mo-top-h); margin: 0 calc(-1 * var(--mo-nav-gap)); box-shadow: inset 0 -1px 0 rgba(200,161,90,.25); color: var(--sage); font-size: .875rem; line-height: 1.2; }
.mo-top__in { width: min(100% - 32px, var(--wrap)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.mo-top p { margin: 0; max-width: none; }
.mo-top__hours { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: var(--s3); border-left: 2px solid var(--brass); }
.mo-top__hours strong { color: var(--white); }
.mo-top__short { display: none; font-family: var(--serif); font-style: italic; font-size: .9375rem; color: var(--brass); }
.mo-top a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--sage); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .15s; }
.mo-top a:hover { color: var(--white); }
.mo-top__tel { display: none !important; }

/* the main row */
.mo-bar { gap: 0; transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), padding var(--mo-nav-move), background-color .2s linear, border-color .2s linear, box-shadow .2s linear; }
.mo-scrolled .mo-bar { padding: 0 16px; }
.mo-brand { position: absolute; left: 50%; top: 50%; z-index: 1; flex-direction: column; align-items: center; gap: 0; padding: 4px 8px; font-family: var(--serif); font-size: 1.625rem; line-height: 1; white-space: nowrap; color: var(--white);
  transform: translate(-50%, -50%); transition: transform var(--mo-nav-move); }
.mo-brand:hover { color: var(--white); }
.mo-brand .brand-sub { display: flex; align-items: center; gap: 8px; padding: 0; margin-top: 4px; }
.mo-brand .brand-sub::before, .mo-brand .brand-sub::after { content: ""; width: 22px; height: 1px; background: var(--brass); opacity: .8; }
.mo-scrolled .mo-brand { transform: translate(-50%, -50%) scale(.8); }
.mo-nav { flex: 1 1 auto; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mo-brand-gap); align-items: center; }
.mo-nav > ul { gap: 6px; }
.mo-nav > .mo-l { justify-content: flex-end; }
.mo-nav > .mo-r { justify-content: flex-start; }
.mo-tel { margin-right: auto; }
.mo-tel .mo-link { color: var(--sage); font-variant-numeric: tabular-nums; padding-left: 0; }
.mo-nav__note { display: none; }
.mo-link { position: relative; min-height: 44px; padding: 0 14px; font: 500 1rem/1.15 var(--sans); color: var(--white); transition: color .15s; }
.mo-link small, .mo-l-lead { display: none; }
.mo-link:hover { color: var(--brass-hi); }
/* the bulb under a link: a dark socket shows on hover, and it is lit on the page you are on */
.mo-nav li:not(.mo-tel) > .mo-link::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #3d1a14; box-shadow: 0 0 0 1.5px #7d5a2a; opacity: 0; transition: opacity .15s; }
.mo-nav li:not(.mo-tel) > .mo-link:hover::after { opacity: 1; }
.mo-nav li > .mo-link[aria-current="page"] { color: var(--brass-hi); }
.mo-nav li > .mo-link[aria-current="page"]::after { opacity: 1; background: radial-gradient(circle at 38% 34%, #fffaf0 0 18%, var(--lamp) 42%, #e2a74b 100%); box-shadow: 0 0 6px 2px rgba(255,210,130,.55); }
.mo-cta { position: absolute; right: calc(var(--mo-nav-pad) - var(--mo-nav-gap)); top: 50%; min-height: 44px; padding: .6em 1.1em; font-size: .9375rem; transform: translateY(-50%); transition: background-color .15s, color .15s, right var(--mo-nav-move); }
.mo-scrolled .mo-cta { right: 10px; min-height: 40px; }
.mo-cta[aria-current="page"] { box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 4px rgba(14,35,24,.4), 0 0 0 2px var(--lounge), 0 0 0 3px var(--brass-hi); }
.mo-menu-btn { min-height: 44px; padding: 0 14px; font: 600 1rem/1 var(--sans); color: var(--white); border-color: rgba(200,161,90,.7); border-radius: var(--r); transition: background-color .15s; }
.mo-menu-btn[aria-expanded="true"] { background: rgba(200,161,90,.16); }
.mo-menu-btn[aria-expanded="true"]::after { content: "\00d7"; content: "\00d7" / ""; font-size: 1.3em; line-height: .8; }
@media (min-width: 760px) { .menu-tools { top: calc(var(--mo-nav-h-float) + var(--mo-nav-gap) + 8px); } }

/* 960 to 1180: no room for the number beside the links, so it takes the address's place in the thin row */
@media (max-width: 1180px) {
  :root { --mo-brand-gap: 196px; }
  .mo-tel, .mo-top__addr { display: none !important; }
  .mo-top__tel { display: inline-flex !important; }
  .mo-brand { font-size: 1.5rem; }
  .mo-link { padding: 0 10px; }
  .mo-nav > ul { gap: 2px; }
}

/* Under 960 (where the site's own Reserve and Call dock appears): "Menu" on the left, the name in the middle, Reserve on the right,
   and the links open as a full screen in the marquee and menu-card look. The panel stops above the dock, so Reserve and Call stay in reach. */
@media (max-width: 959px) {
  :root { --mo-top-h: 30px; --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; --mo-nav-pad: 16px; }
  .mo-top__in { justify-content: center; }
  .mo-top__hours, .mo-top__tel { display: none !important; }
  .mo-top__short { display: block; }
  .mo-bar { justify-content: space-between; }
  .mo-scrolled .mo-bar { padding: 0 8px; }
  .mo-brand { font-size: 1.3rem; }
  .mo-brand .brand-sub::before, .mo-brand .brand-sub::after { width: 14px; }
  .mo-scrolled .mo-brand { transform: translate(-50%, -50%) scale(.86); }
  .mo-menu-btn { display: inline-flex; order: -1; }
  .mo-cta, .mo-scrolled .mo-cta { position: static; transform: none; margin-left: 0; min-height: 44px; padding: 0 .9em; }
  .mo-scrolled .mo-cta, .mo-scrolled .mo-menu-btn { min-height: 40px; }
  .mo-nav { position: fixed; z-index: -1; left: 0; right: 0; top: 0; bottom: calc(69px + env(safe-area-inset-bottom)); display: none; max-height: none; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--mo-top-h) + var(--mo-nav-h) + 46px) 20px 28px; color: var(--white); border: 0; border-radius: 0; box-shadow: none;
    background: radial-gradient(90% 46% at 50% 0%, rgba(255,190,110,.13), transparent 72%), var(--lounge); }
  .mo-nav-open .mo-nav { display: block; animation: mo-menu-in .22s ease-out both; }
  html.mo-nav-open { overflow: hidden; }
  /* a run of lit marquee bulbs over the card */
  .mo-nav::before { content: ""; position: absolute; left: 20px; right: 20px; top: calc(var(--mo-top-h) + var(--mo-nav-h) + 14px); height: 12px; max-width: 440px; margin-inline: auto; pointer-events: none;
    background: radial-gradient(circle, #fffaf0 0 1.2px, var(--lamp) 2.6px, #e2a74b 4.2px, transparent 4.8px) 0 50% / 24px 12px; background-repeat: space no-repeat;
    filter: drop-shadow(0 0 4px rgba(255,210,130,.75)) drop-shadow(0 0 10px rgba(255,190,100,.3)); }
  /* the two lists are the two halves of one menu card */
  .mo-nav > ul { position: relative; flex-direction: column; align-items: stretch; gap: 0; max-width: 440px; margin-inline: auto; padding-inline: 20px; background: var(--felt); border: 1px solid var(--brass); }
  .mo-nav > ul::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(200,161,90,.6); pointer-events: none; }
  .mo-nav > .mo-l { border-bottom: 0; padding-top: 10px; }
  .mo-nav > .mo-l::before { bottom: 0; border-bottom: 0; }
  .mo-nav > .mo-r { border-top: 0; padding-bottom: 10px; }
  .mo-nav > .mo-r::before { top: 0; border-top: 0; }
  .mo-tel { display: none !important; }
  .mo-nav li + li, .mo-nav > .mo-r > li { border-top: 1px solid rgba(200,161,90,.25); }
  .mo-nav > .mo-l > li:nth-child(2) { border-top: 0; }
  .mo-link { width: 100%; min-height: 76px; padding: 14px 0 13px; display: grid; grid-template-columns: auto minmax(24px, 1fr) 11px; align-items: baseline; column-gap: 8px; row-gap: 4px; white-space: normal; text-align: left; }
  .mo-l-name { font: 400 1.75rem/1.1 var(--serif); }
  .mo-l-lead { display: block; height: 4px; background: radial-gradient(circle, var(--brass) 1.1px, transparent 1.6px) 0 50% / 7px 4px repeat-x; opacity: .9; }
  .mo-link small { display: block; grid-column: 1 / -1; font: italic 400 1.0625rem/1.3 var(--serif); color: var(--brass); }
  .mo-nav li:not(.mo-tel) > .mo-link::after { position: static; grid-column: 3; grid-row: 1; align-self: center; width: 9px; height: 9px; margin: 0 1px; opacity: 1; }
  .mo-nav__note { display: block; max-width: 440px; margin: 22px auto 0; padding-left: var(--s4); border-left: 2px solid var(--brass); color: var(--sage); font-size: 1rem; line-height: 1.5; }
  .mo-nav__note strong { color: var(--white); }
  .mo-nav-open .mo-nav li { animation: mo-lamp .26s linear both; animation-delay: calc(var(--mo-li, 0) * 30ms + 60ms); }
  .mo-nav > .mo-l > li:nth-child(3) { --mo-li: 1; } .mo-nav > .mo-r > li:nth-child(1) { --mo-li: 2; } .mo-nav > .mo-r > li:nth-child(2) { --mo-li: 3; }
  /* scripts off: the links are simply set out under the bar */
  html:not(.js) .mo-hdr { position: static; height: auto; }
  html:not(.js) .mo-bar { height: auto; flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .mo-brand { position: static; transform: none; align-items: flex-start; }
  html:not(.js) .mo-menu-btn { display: none; }
  html:not(.js) .mo-nav { position: static; display: block; flex: 1 0 100%; order: 3; z-index: auto; padding: 12px 0 4px; background: none; overflow: visible; }
  html:not(.js) .mo-nav::before { display: none; }
}
@keyframes mo-menu-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@media (max-width: 500px) { .mo-cta__more { display: none; } }
@media (max-width: 380px) {
  .mo-brand { font-size: 1.125rem; padding-inline: 2px; }
  .mo-brand .brand-sub::before, .mo-brand .brand-sub::after { display: none; }
  .mo-menu-btn { padding: 0 10px; font-size: .9375rem; }
  .mo-cta, .mo-scrolled .mo-cta { padding: 0 .65em; font-size: .9rem; }
  .mo-nav { padding-inline: 12px; } .mo-nav::before { left: 12px; right: 12px; }
  .mo-nav > ul { padding-inline: 16px; } .mo-l-name { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .mo-brand, .mo-cta { transition: none; } }

/* ---- Hero: one pinned scroll section. The club opening for the evening: the marquee starts to run (a wave of light travels once
   round the sign's bulbs), the hanging "Supper Club" board swings on its chains, the sign's glow warms the wall behind it,
   the lamp over the bar comes up on the old fashioned while the picture draws closer in its brass mat, and a dot leader
   runs out along the bottom like a row on the menu card. The headline, text and buttons do not move. ---- */
/* the hero is held at the very top of the window with the floating menu over its own padding, so its lamp-glow background runs unbroken behind the bar */
.mo-pin { --mo-pin-offset: 0px; --mo-pin-extra: 90vh; }
.mo-pin.is-pinned > .hero { position: sticky; }
.mo-pin.is-pinned .bulbs i { filter: brightness(calc(1 - min(1, var(--mo-pin) * 8, (1 - var(--mo-pin)) * 8) * .62 * (.5 - .5 * sin(var(--i) * 23.478deg - var(--mo-pin) * 1080deg)))); }
.mo-pin.is-pinned .sign-board { transform-origin: 50% -18px; transform: rotate(calc(sin(var(--mo-pin) * 900deg) * 2.6deg)); }
.mo-pin.is-pinned .sign-panel::after { content: ""; position: absolute; inset: -56px; z-index: -1; border-radius: 80px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,190,110,.5), rgba(255,190,110,.16) 62%, transparent); opacity: calc(var(--mo-pin) * .9); }
.mo-pin.is-pinned .hero-photo { transform: translateY(calc(var(--mo-pin) * -14px)); }
.mo-pin.is-pinned .hero-photo img { transform: scale(calc(1 + var(--mo-pin) * .12)); clip-path: inset(calc((1 - 1 / (1 + var(--mo-pin) * .12)) * 50%));
  filter: brightness(calc(.84 + var(--mo-pin) * .3)) saturate(calc(.86 + var(--mo-pin) * .24)); }
.mo-pin.is-pinned > .hero::after { content: ""; position: absolute; left: max(16px, calc((100% - var(--wrap)) / 2)); right: max(16px, calc((100% - var(--wrap)) / 2)); bottom: 30px; height: 4px; pointer-events: none;
  background: radial-gradient(circle, var(--brass) 1.1px, transparent 1.6px) 0 50% / 7px 4px repeat-x; clip-path: inset(0 calc(100% - var(--mo-pin) * 100%) 0 0); }
.mo-cta__more { margin-left: .28em; }
/* so the hero fits one tall-enough window and can be held: a slightly smaller sign, the headline on three lines, less air above and below */
@media (min-width: 960px) and (min-height: 890px) {
  .mo-ready .mo-pin { margin-top: calc(-1 * var(--mo-nav-h)); }
  .mo-ready .mo-pin > .hero { padding-block: calc(var(--mo-nav-h) + 28px) 44px; }
  .mo-ready .mo-pin .sign { max-width: 560px; margin-bottom: 24px; }
  .mo-ready .mo-pin .hero h1 { max-width: none; }
}