:root {
  /* Theme tokens (#72). Every color on the site resolves to one of these; a theme overrides them
     under [data-theme="..."] (see #75). Values match the original WordPress theme exactly. */
  --sb-page: #fff; /* page background behind the panels */
  --sb-blush: #faf3f0;
  --sb-charcoal: #313131;
  --sb-coral: #dd6d51;
  --sb-cream: #fff8f0;
  --sb-forest: #1a2c17;
  --sb-gold: #b8a55b;
  --sb-green: #2b4d47;
  --sb-grey: #999;
  --sb-ink: #352e0e;
  --sb-linen: #f4ede0;
  --sb-mist: #f0efee;
  --sb-olive: #5c5431;
  --sb-rose: #b9867a;
  --sb-rose-deep: #955e52;
  --sb-sage: #d7dcc7;
  --sb-seafoam: #a5c3bc;
  --sb-slate: #6d6e71;
  --sb-stone: #c3c1b6;
  --sb-teal: #36786f;
  --sb-white: #fff;
  --sb-ink-rgb: 53 46 14;
  --sb-forest-rgb: 26 44 23;
}

/* ==== Theme colors (#72) ====
   Below: every color declaration from the vendored theme stylesheets (sv_custom, then
   strangebird_custom), re-declared in source order and media queries with colors swapped for
   tokens, so the cascade is unchanged. The vendored files are untouched. Generated 2026-10-01. */
/* -- color declarations from /wp-content/themes/sv_custom/style.css -- */
.grey { color: var(--sb-slate); }
.dk-grey { color: var(--sb-charcoal); }
.ot-grey { color: var(--sb-mist); }
.brown { color: var(--sb-ink); }
.cream { color: var(--sb-blush); }
.green { color: var(--sb-teal); }
.lt-green { color: var(--sb-seafoam); }
.yellow { color: var(--sb-gold); }
.lt-yellow { color: var(--sb-linen); }
.red { color: var(--sb-coral); }
.white { color: var(--sb-white); }
.grey-bg { background: var(--sb-slate); }
.dk-grey-bg { background: var(--sb-charcoal); }
.lt-grey-bg { background: var(--sb-mist); }
.brown-bg { background: var(--sb-ink); }
.cream-bg { background: var(--sb-blush); }
.green-bg { background: var(--sb-teal); }
.lt-green-bg { background: var(--sb-seafoam); }
.yellow-bg { background: var(--sb-gold); }
.lt-yellow-bg { background: var(--sb-linen); }
.red-bg { background: var(--sb-coral); }
.white-bg { background: var(--sb-white); }
.plain a, a.plain { text-decoration: none; }
a { color: var(--sb-gold); text-decoration: none; }
a:hover { color: var(--sb-teal); }
.cover { background: url(/wp-content/themes/sv_custom/images/trans.png) no-repeat center; background-size: cover; }
.border { border: 18px solid var(--sb-white); }
.border-left { border-left: 18px solid var(--sb-white); }
.border-right { border-right: 18px solid var(--sb-white); }
.border-bottom { border-bottom: 18px solid var(--sb-white); }
.border-top { border-top: 18px solid var(--sb-white); }
.text ul li:before { background: var(--sb-slate); }
.text h1,
.text h2,
.text h3,
.text h4 { color: var(--sb-teal); }
.text blockquote { border-left: 2px solid rgb(var(--sb-ink-rgb) / 0.3); color: var(--sb-teal); }
body { color: var(--sb-slate); background: var(--sb-page); }
a.button { color: var(--sb-teal); background: var(--sb-blush); border: none; }
a.button:hover { color: var(--sb-blush); background: var(--sb-teal); }
a.button.yellow { color: var(--sb-gold); }
a.button.white-bg { background: var(--sb-white); }
a.button.white-bg:hover { background: var(--sb-teal); }
a.button.yellow:hover,
a.button.white-bg.yellow:hover { color: var(--sb-blush); background: var(--sb-gold); }
ul.scroll-nav a { color: var(--sb-teal); border-bottom: 2px solid var(--sb-teal); }
ul.scroll-nav a:hover { color: var(--sb-ink); border-color: var(--sb-ink); }
.sv-intro:before { background: url(/wp-content/themes/sv_custom/images/down-arrow-brown.svg) no-repeat center; }
a.grid-link:hover rect { fill: var(--sb-ink); }
ul.sv-nav a { color: rgb(var(--sb-ink-rgb) / 0.5); }
ul.sv-nav a:hover,
ul.sv-nav li#current a { color: var(--sb-ink); }
a:hover .concept-title { color: var(--sb-gold); }
ul.slick-dots li { background: rgba(255, 255, 255, 0.5); border: none; }
ul.slick-dots li.slick-active { background: var(--sb-white); }
.footer-credit a { color: var(--sb-slate); }
.footer-credit a.underline { color: var(--sb-charcoal); text-decoration: underline; }
.footer-credit a:hover,
.footer-credit a.underline:hover { color: var(--sb-teal); }
.footer-text { border-top: 3px solid var(--sb-ink); }
.footer-text a { color: var(--sb-ink); text-decoration: underline; }
.footer-text a:hover { color: var(--sb-teal); }
ul.footer-nav a { color: var(--sb-gold); }
ul.footer-nav a:hover { color: var(--sb-ink); }
footer .info-block { border-top: 3px solid var(--sb-ink); }
.info-text a { color: var(--sb-ink); }
.info-text a:hover { color: var(--sb-gold); }
.news-list { border-top: 2px solid var(--sb-charcoal); }
.news-row + .news-row { border-top: 1px solid var(--sb-charcoal); }
.news-title { color: var(--sb-teal); }
.news-title a { color: var(--sb-teal); }
.news-title a:hover { color: var(--sb-charcoal); }
.news-cat { color: var(--sb-gold); }
.news-row:before { color: var(--sb-coral); }
ul.tab-nav a { color: rgb(var(--sb-ink-rgb) / 0.3); }
ul.tab-nav a:hover,
ul.tab-nav a.active { color: var(--sb-ink); }
.tab-text b,
.tab-text strong { color: var(--sb-ink); }
body.family-wrap { background: transparent; }
.mobile-tab-nav a polygon { fill: var(--sb-teal); }
@media only screen and (max-width: 1023px) {
  .border,
  .border-left,
  .border-right,
  .border-top,
  .border-bottom { border-width: 10px; }
}
@media only screen and (max-width: 600px) {
  .mobile-tab-title { color: var(--sb-ink); }
}
.ir { border: 0; background-color: transparent; background-repeat: no-repeat; }
.visuallyhidden { border: 0; }
@media print {
  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  pre, blockquote { border: 1px solid var(--sb-grey); }
}
/* -- color declarations from /wp-content/themes/strangebird_custom/style.css -- */
.lt-green { color: var(--sb-sage); }
.lt-green-bg { background: var(--sb-sage); }
.green { color: var(--sb-green); }
.green-bg { background: var(--sb-green); }
.dk-green { color: var(--sb-forest); }
.dk-green-bg { background: var(--sb-forest); }
.pink { color: var(--sb-rose); }
.pink-bg { background: var(--sb-rose); }
.brown { color: var(--sb-ink); }
.brown-bg { background: var(--sb-ink); }
.lt-brown { color: var(--sb-stone); }
.lt-brown-bg { background: var(--sb-stone); }
.family-bg { background: var(--sb-sage); }
.text a { color: var(--sb-rose); }
.text a:hover { color: var(--sb-charcoal); }
.text h1,
.text h2,
.text h3,
.text h4,
.text blockquote { color: var(--sb-rose); }
.header-hours { color: var(--sb-rose); }
a.order polygon { fill: var(--sb-rose); }
a.order:hover polygon { fill: var(--sb-gold); }
a.order { color: var(--sb-rose); }
a.order:hover { color: var(--sb-gold); }
a.nav-toggle div { background: var(--sb-charcoal); }
.header-bg { background: var(--sb-sage); }
.header-border { border-bottom: 1px solid var(--sb-charcoal); }
.info-block { border-top: 1px solid var(--sb-charcoal); }
.info-block-label { color: rgb(var(--sb-ink-rgb) / 0.5); }
.info-rows { color: var(--sb-charcoal); }
.info-rows a { color: var(--sb-charcoal); }
.info-rows a:hover { color: var(--sb-rose); }
.info-wrap:before { background: var(--sb-charcoal); }
.gallery-wrap:before { background: var(--sb-white); }
.gallery-cycle-wrap a.slick-prev polygon,
.gallery-cycle-wrap a.slick-next polygon { fill: var(--sb-rose); }
.menu-intro-headline { color: var(--sb-charcoal); }
a.menu-scroll { color: var(--sb-rose); }
a.menu-scroll:hover { color: var(--sb-charcoal); }
.view-arrow polygon { fill: var(--sb-rose); }
a.menu-scroll:hover .view-arrow polygon { fill: var(--sb-charcoal); }
ul.menu-nav { background: var(--sb-rose); }
ul.menu-nav li { color: var(--sb-charcoal); }
ul.menu-nav li:hover,
ul.menu-nav li.resp-tab-active { color: var(--sb-blush); }
ul.menu-nav li:before { background: url(/wp-content/themes/strangebird_custom/images/menu-tab.svg) no-repeat center top; }
.menu-item { color: var(--sb-charcoal); }
.menu-item:before { background: url(/wp-content/themes/strangebird_custom/images/menu-image-arrow.svg) no-repeat left center; }
.menu-extras { color: var(--sb-charcoal); }
.menu-border { border-bottom: 1px dashed var(--sb-charcoal); color: var(--sb-charcoal); }
a.button { color: var(--sb-green); background: var(--sb-sage); }
a.button:hover { color: var(--sb-white); background: var(--sb-green); }
body { color: var(--sb-ink); }
ul.tab-nav a { color: var(--sb-stone); }
ul.tab-nav a:hover,
ul.tab-nav a.active { color: var(--sb-rose); }
.header-border,
.info-block,
.menu-border { border-color: rgb(var(--sb-ink-rgb) / 0.3); }
.info-wrap:before { background: rgb(var(--sb-ink-rgb) / 0.3); }
ul.menu-nav { background: var(--sb-forest); }
ul.menu-nav li { color: var(--sb-rose); }
ul.menu-nav li:hover,
ul.menu-nav li.resp-tab-active { color: var(--sb-white); }
.menu-intro-headline { color: var(--sb-green); }
iframe { border: none !important; }
.family-bg { background: var(--sb-sage); }
.mobile-tab-nav a polygon { fill: var(--sb-green); }
a.mobile-order { background: var(--sb-green); color: var(--sb-sage); }
a.mobile-order polygon { fill: var(--sb-sage); }
a.mobile-order:hover { color: var(--sb-sage); background: var(--sb-ink); }
a.mobile-order:hover polygon { fill: var(--sb-sage); }
html span.op-closed { color: var(--sb-ink); }
ul.tab-nav a:hover,
ul.tab-nav a.active { color: var(--sb-green); }
@media only screen and (max-width: 1023px) {
  .gallery-cycle-wrap a.slick-prev polygon,
  .gallery-cycle-wrap a.slick-next polygon { fill: var(--sb-white); }
  .border,
  .border-left,
  .border-right,
  .border-top,
  .border-bottom { border-width: 10px; }
  a.resp-accordion { background-color: var(--sb-green) !important; color: var(--sb-sage); border-top: 10px solid var(--sb-white); }
  a.resp-accordion:first-child { border: none; }
  a.resp-accordion:before { background: var(--sb-sage); }
  a.resp-accordion:after { background: var(--sb-sage); }
  a.resp-accordion.resp-tab-active:before,
  a.resp-accordion.resp-tab-active:after { background: var(--sb-sage); }
  a.resp-accordion.resp-tab-active { background-color: var(--sb-rose) !important; color: var(--sb-sage); }
}
@media only screen and (max-width: 600px) {
  .mobile-tab-title { color: var(--sb-ink); }
}
.ir { border: 0; background-color: transparent; background-repeat: no-repeat; }
.visuallyhidden { border: 0; }
@media print {
  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  pre, blockquote { border: 1px solid var(--sb-grey); }
}
.ir { border: 0; background-color: transparent; background-repeat: no-repeat; }
.visuallyhidden { border: 0; }
@media print {
  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  pre, blockquote { border: 1px solid var(--sb-grey); }
}
/* ==== End theme colors ==== */

/* Strange Bird — additions layered on the original 2NDST theme (strangebird_custom/style.css).
   Palette: sage #d7dcc7 · green #2b4d47 · terracotta #b9867a · brown #352e0e · cream #fff8f0
   Text-safe terracotta var(--sb-rose-deep) (4.98:1 with cream, ~5.2:1 on white) is used wherever terracotta carries text. */

.sb-icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.22em;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--sb-rose);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Quick actions under the headline */
.sb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: -20px auto 50px;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 1023px) {
  .sb-actions {
    margin: 28px auto 36px;
  }
}
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1.5px solid var(--sb-green);
  border-radius: 999px;
  color: var(--sb-green);
  font-family: "p22-underground", Arial, Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.sb-btn:hover {
  background: var(--sb-green);
  color: var(--sb-cream);
}
.sb-btn--primary {
  background: var(--sb-green);
  color: var(--sb-cream);
}
.sb-btn--primary:hover {
  background: var(--sb-rose-deep);
  border-color: var(--sb-rose-deep);
  color: var(--sb-cream);
}

/* Info block labels with icons */
.info-block-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-block-label .sb-icon {
  width: 1.35em;
  height: 1.35em;
  color: var(--sb-rose);
  stroke-width: 1.8;
}
.info-rows td {
  white-space: nowrap;
}

/* Happenings tab nav with icons */
ul.tab-nav a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
ul.tab-nav a .sb-icon {
  width: 1.4em;
  height: 1.4em;
  margin-top: .05em;
}
.mobile-tab-title .sb-icon {
  color: var(--sb-rose);
  margin-right: 6px;
}
/* Contrast (WCAG 1.4.3 / 1.4.1): links were terracotta at 2.2–3.1:1 and shown by colour alone */
.text a,
.tab-text a {
  color: var(--sb-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.text a:hover,
.tab-text a:hover {
  color: var(--sb-rose-deep);
}
.info-block-label {
  color: var(--sb-olive); /* was rgb(var(--sb-ink-rgb) / .5) = 2.68:1 on sage */
}
ul.tab-nav a {
  color: var(--sb-slate); /* inactive tabs were var(--sb-stone) = 1.81:1 */
}
ul.tab-nav a:hover,
ul.tab-nav a.active {
  color: var(--sb-rose-deep);
}

/* Footer links */
.sb-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 6px;
  padding: 0;
  list-style: none;
}
.sb-footer-links .sb-btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 12px;
}
.footer-text .sb-icon,
.info-text .sb-icon {
  margin-right: 4px;
}

/* Mobile: sticky action bar */
.sb-mobilebar {
  display: none;
}
@media only screen and (max-width: 600px) {
  .sb-actions {
    gap: 8px;
    margin: 22px auto 30px;
  }
  .sb-actions .sb-btn {
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
  }
  .intro-block .sb-actions .sb-btn--primary,
  .intro-block .sb-actions .sb-directions {
    display: none; /* live in the sticky bar on phones */
  }
  .sb-mobilebar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--sb-green);
    box-shadow: 0 -4px 18px rgb(var(--sb-forest-rgb) / .25);
  }
  .sb-mobilebar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    border-radius: 12px;
    color: var(--sb-cream);
    font-family: "p22-underground", Arial, Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .sb-mobilebar a .sb-icon {
    width: 22px;
    height: 22px;
  }
  .sb-mobilebar a.sb-mobilebar__primary {
    flex: 1.4;
    background: var(--sb-rose-deep);
  }
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-btn { transition: none; }
}

/* Skip link: hidden until keyboard focus */
.sb-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--sb-green);
  color: var(--sb-cream);
  font-weight: bold;
  text-decoration: none;
}
.sb-skip:focus {
  top: 12px;
}
#main:focus {
  outline: none;
}

/* Gallery dots: real buttons with a 24px hit area */
ul.slick-dots li {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  overflow: visible;
  text-indent: 0;
}
ul.slick-dots li + li {
  margin-left: 0;
}
ul.slick-dots li.slick-active {
  background: none;
}
ul.slick-dots li button {
  position: relative;
  display: block;
  width: 24px; /* the whole 24px cell is the tap target (#115); the dot is drawn by ::before */
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}
ul.slick-dots li button::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
ul.slick-dots li.slick-active button::before {
  background: var(--sb-white);
}
ul.slick-dots li button:focus-visible {
  outline: 2px solid var(--sb-white);
  outline-offset: 3px;
}
.gallery-cycle ul.slick-dots {
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  width: auto;
  bottom: 6px;
  height: 24px;
  line-height: 0;
}
/* 17 photos x 24px is wider than a phone: let the dots wrap onto a second row there. */
@media only screen and (max-width: 480px) {
  .gallery-cycle ul.slick-dots { flex-wrap: wrap; height: auto; padding: 0 60px; } /* clear of the pause button */
}

/* Gallery pause/play (WCAG 2.2.2) */
.sb-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 102;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--sb-forest-rgb) / .6);
  color: var(--sb-cream);
  cursor: pointer;
}
.sb-pause:hover {
  background: rgb(var(--sb-forest-rgb) / .85);
}
.sb-pause .sb-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.sb-pause:focus-visible {
  outline: 2px solid var(--sb-cream);
  outline-offset: 2px;
}

/* Icon sprite container */
.sb-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 404 page */
.sb-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; }
.sb-404 .sb-logo { width: min(335px, 80vw); margin-bottom: 48px; }
.sb-404 h1.intro-headline { margin-bottom: 20px; font-size: clamp(2.2em, 5vw, 4.2em); }
.sb-404 p { max-width: 30em; margin: 0 auto 36px; font-size: 1.15em; line-height: 1.6; color: var(--sb-ink); }
.sb-404 .sb-mark { width: 72px; height: 72px; color: var(--sb-rose-deep); margin-bottom: 24px; stroke-width: 1.4; }
.sb-404 .sb-actions {
  margin-top: 0;
}

/* Readable type (#18): theme set body copy at 13px and the footer credit at 10px */
.info-right .text.small-text {
  font-size: 15px;
  line-height: 1.65;
}
.footer-credit {
  font-size: 12px;
}
@media only screen and (max-width: 600px) {
  .info-right .text.small-text,
  .tab-text {
    font-size: 16px;
    line-height: 1.6;
  }
  .footer-text,
  .footer-text p,
  .photo-credit .text,
  .footer-blocks .info-text {
    font-size: 14px;
  }
}

/* Consent banner (only shown once a cookie-based tool is configured; see assets/analytics-config.js) */
#sb-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--sb-cream);
  color: var(--sb-ink);
  border: 2px solid var(--sb-green);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  line-height: 1.4;
}
#sb-consent p { margin: 0 0 12px; }
#sb-consent a { color: var(--sb-green); text-decoration: underline; }
.sb-consent__actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 790px) {
  /* Sit above the sticky mobile booking bar instead of covering it. */
  #sb-consent { bottom: 84px; }
}
.sb-cookie-settings[hidden] { display: none; }

/* Privacy / legal pages */
.sb-legal { max-width: 720px; margin: 0 auto; padding: 48px 20px 72px; color: var(--sb-ink); font-size: 16px; line-height: 1.6; }
.sb-legal .sb-logo { width: min(335px, 80vw); margin-bottom: 40px; }
.sb-legal h1.intro-headline { font-size: clamp(2em, 5vw, 3.2em); margin-bottom: 8px; }
.sb-legal h2 { margin: 32px 0 8px; font-size: 1.25em; color: var(--sb-green); }
.sb-legal ul { padding-left: 1.2em; }
.sb-legal li { margin-bottom: 8px; }
.sb-legal a:not(.sb-btn) { color: var(--sb-green); text-decoration: underline; }

/* ==== Menu page (#150, #151): public/menu/index.html is generated from menu/menu.json ==== */
.sb-menu { max-width: 760px; margin: 0 auto; padding: 40px 20px 96px; color: var(--sb-ink); font-size: 16px; line-height: 1.5; }
.sb-menu-head { text-align: center; }
.sb-menu .sb-logo { width: min(335px, 80vw); margin-bottom: 28px; }
.sb-menu h1.intro-headline { font-size: clamp(2.4em, 7vw, 3.6em); margin: 0; color: var(--sb-green); }
.sb-menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.sb-menu-nav { position: sticky; top: 0; z-index: 5; margin: 28px -20px 0; padding: 0 20px; background: var(--sb-sage); border-bottom: 1px solid rgb(var(--sb-ink-rgb) / .15); }
.sb-menu-nav ul { display: flex; gap: 4px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sb-menu-nav ul::-webkit-scrollbar { display: none; }
@media only screen and (min-width: 791px) { .sb-menu-nav ul { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.sb-menu-nav a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--sb-green); font-family: "p22-underground", Arial, Verdana, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.sb-menu-nav a:hover, .sb-menu-nav a:focus-visible { background: rgb(var(--sb-ink-rgb) / .08); }
.sb-menu-nav a:focus-visible { outline: 2px solid var(--sb-green); outline-offset: 1px; }
.sb-menu-group { scroll-margin-top: 64px; }
.sb-menu-group-title { margin: 48px 0 0; padding-top: 16px; border-top: 2px solid var(--sb-green); color: var(--sb-green); font-family: "p22-underground", Arial, Verdana, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: .24em; text-transform: uppercase; }
.sb-menu-section { margin-top: 32px; scroll-margin-top: 64px; }
.sb-menu-title { margin: 0; color: var(--sb-green); font-family: "Rockwell", "p22-underground", Arial, Verdana, sans-serif; font-size: 1.7em; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; }
.sb-menu-subtitle { margin: 2px 0 0; font-size: 14px; font-style: italic; }
.sb-menu-items, .sb-menu-addons, .sb-menu-list ul, .sb-menu-legend { margin: 0; padding: 0; list-style: none; }
.sb-menu-item { padding: 14px 0; border-bottom: 1px dashed rgb(var(--sb-ink-rgb) / .25); }
.sb-menu-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sb-menu-name { margin: 0; color: var(--sb-green); font-family: "Rockwell", "p22-underground", Arial, Verdana, sans-serif; font-size: 1.05em; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; }
.sb-menu-raw { margin-left: 1px; }
.sb-menu-tags { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sb-menu-tag { padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; color: var(--sb-green); font-family: "p22-underground", Arial, Verdana, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: .06em; text-decoration: none; cursor: help; }
.sb-menu-note { font-size: 13px; font-style: italic; }
.sb-menu-price { margin-left: auto; font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-menu-price-label { font-size: 12px; font-weight: normal; letter-spacing: .04em; text-transform: uppercase; }
.sb-menu-desc { margin: 4px 0 0; font-size: 15px; }
.sb-menu-addons { margin-top: 6px; font-size: 14px; }
.sb-menu-addons li { display: inline; margin-right: 14px; }
.sb-menu-addons .sb-menu-price { margin-left: 2px; }
.sb-menu-list { margin-top: 16px; }
.sb-menu-list-title { margin: 0 0 4px; font-family: "p22-underground", Arial, Verdana, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.sb-menu-list li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgb(var(--sb-ink-rgb) / .25); }
.sb-menu-footer { margin: 10px 0 0; font-size: 14px; font-style: italic; }
.sb-menu-foot { margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--sb-green); }
.sb-menu-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; margin-top: 10px; font-size: 14px; }
.sb-menu-legend abbr { display: inline-block; min-width: 3.2em; font-weight: bold; text-decoration: none; }
.sb-menu-notes { margin-top: 20px; font-size: 13px; }
.sb-menu-notes p { margin: 0 0 8px; }
.sb-menu-foot .sb-menu-actions { margin-top: 28px; }

/* ==== Illustrated menu (#153): the printed menu's watercolors and hand lettering ====
   Art is cut from public/menu.pdf by scripts/extract-menu-art.py; text stays real HTML. */
.sb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-menu--art { max-width: 1060px; }
.sb-sheet { margin-top: 24px; padding: 40px clamp(20px, 5vw, 60px) 48px; background: var(--sb-white); border-radius: 4px; box-shadow: 0 12px 32px rgb(var(--sb-ink-rgb) / .14); }
.sb-cols { display: grid; gap: 0 64px; }
@media only screen and (min-width: 860px) { .sb-cols { grid-template-columns: 1fr 1fr; } }
.sb-letter { display: block; max-width: 100%; height: auto; }
.sb-menu--art .sb-menu-group-title { margin-top: 40px; }
.sb-menu--art .sb-menu-section { margin-top: 36px; }
.sb-menu--art .sb-sheet > .sb-menu-section:first-child, .sb-menu--art .sb-col > .sb-menu-section:first-child { margin-top: 0; }
.sb-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.sb-sec-arts { display: flex; align-items: flex-end; gap: 4px; max-width: 55%; }
.sb-sec-art { display: block; max-width: 100%; height: auto; }
.sb-menu-section--ramen .sb-sechead { flex-direction: column-reverse; align-items: flex-start; }
.sb-menu-section--ramen .sb-sec-arts { max-width: 100%; }
.sb-menu--art .sb-menu-title { margin: 0; }
.sb-menu--art .sb-menu-subtitle,
.sb-menu--art .sb-menu-desc,
.sb-menu--art .sb-menu-addons,
.sb-menu--art .sb-menu-list li,
.sb-menu--art .sb-menu-footer { font-family: "p22-underground", Arial, Verdana, sans-serif; font-size: 12px; font-style: normal; letter-spacing: .14em; line-height: 1.75; text-transform: uppercase; }
.sb-menu--art .sb-menu-subtitle { margin-top: 6px; font-size: 11px; font-weight: bold; letter-spacing: .2em; }
.sb-menu--art .sb-menu-item { padding: 12px 0 6px; border-bottom: 0; }
.sb-menu--art .sb-menu-line { align-items: center; }
.sb-menu--art .sb-menu-name { line-height: 1; }
.sb-menu--art .sb-menu-name .sb-letter { display: inline-block; vertical-align: middle; }
.sb-menu--art .sb-menu-price { margin-left: 6px; font-family: "p22-underground", Arial, Verdana, sans-serif; font-size: 15px; }
.sb-menu--art .sb-menu-desc { margin-top: 6px; }
.sb-menu--art .sb-menu-list { margin-top: 20px; }
.sb-menu--art .sb-menu-list-title .sb-letter { margin-bottom: 6px; }
.sb-menu--art .sb-menu-list li { justify-content: flex-start; padding: 2px 0; border-bottom: 0; }
.sb-menu--art .sb-menu-list .sb-menu-price { margin-left: 0; font-size: 12px; }
.sb-cards { display: grid; gap: 40px 28px; margin: 8px 0 0; padding: 0; list-style: none; }
@media only screen and (min-width: 560px) { .sb-cards { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (min-width: 860px) {
  .sb-cards { grid-template-columns: repeat(3, 1fr); }
  .sb-menu-section--cocktails .sb-card:nth-child(3n+2) { margin-top: 64px; } /* the printed page's scattered layout */
}
.sb-card { text-align: center; }
.sb-card-art { display: block; width: auto; max-width: 100%; height: 210px; margin: 0 auto 14px; object-fit: contain; }
.sb-card .sb-menu-name .sb-letter { margin: 0 auto; }
.sb-card .sb-menu-desc { max-width: 30ch; margin: 8px auto 0; }
.sb-card-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; margin: 8px 0 0; }
.sb-card-price .sb-menu-price { margin-left: 0; }
.sb-end { margin: 48px auto 0; text-align: center; }
.sb-end img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.sb-end--shoyu-shop .sb-end-art { width: min(240px, 60vw); }
.sb-end--shoyu-shop .sb-letter { margin-top: 12px; }
.sb-end--logo .sb-end-art { width: min(520px, 100%); }
/* motion (menu.js adds .sb-reveal-on only without reduced motion): art drifts into place, cocktails bob */
.sb-reveal-on .sb-reveal { opacity: 0; transform: translateY(22px) rotate(-4deg); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.sb-reveal-on .sb-reveal.is-in { opacity: 1; transform: none; }
.sb-reveal-on .sb-card-art.is-in { animation: sb-bob 6s ease-in-out 1.1s infinite alternate; }
.sb-reveal-on .sb-card:nth-child(2n) .sb-card-art.is-in { animation-duration: 7.5s; animation-delay: 1.6s; }
.sb-reveal-on .sb-card:nth-child(3n) .sb-card-art.is-in { animation-duration: 6.8s; animation-direction: alternate-reverse; }
@keyframes sb-bob { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-7px) rotate(1.5deg); } }

/* ==== Menu page: the homepage food video stays in the background (#153) ====
   Fixed behind the sheets, under the same forest overlay as the hero; the text that sits
   directly on it (header, nav, group labels, key) turns cream. Poster only for reduced motion. */
.sb-menu-bg { position: fixed; inset: 0; z-index: -1; background: var(--sb-forest); }
body.sb-menu-page { background: var(--sb-forest); } /* cream text stays readable even before the poster loads */
.sb-menu-bg::after { content: ""; position: absolute; inset: 0; background: rgb(var(--sb-forest-rgb) / .72); }
.sb-menu-bg-poster, .sb-menu-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-menu-bg-video { opacity: 0; transition: opacity .6s ease; }
.sb-menu-bg.is-playing .sb-menu-bg-video { opacity: 1; }
.sb-menu-pause { position: fixed; z-index: 20; }
.sb-menu-page .sb-onvideo, .sb-menu-page .sb-onvideo .sb-menu-title { color: var(--sb-cream); }
.sb-menu-page .sb-menu-head h1.intro-headline { color: var(--sb-cream); }
.sb-menu-page .sb-menu-nav { background: rgb(var(--sb-forest-rgb) / .88); border-bottom-color: rgb(255 248 240 / .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sb-menu-page .sb-menu-nav a { color: var(--sb-cream); }
.sb-menu-page .sb-menu-nav a:hover, .sb-menu-page .sb-menu-nav a:focus-visible { background: rgb(255 248 240 / .14); }
.sb-menu-page .sb-menu-nav a:focus-visible { outline-color: var(--sb-cream); }
.sb-menu-page .sb-menu-group-title { color: var(--sb-cream); border-top-color: var(--sb-cream); }
.sb-menu-page .sb-menu-foot { border-top-color: var(--sb-cream); }
@media (prefers-reduced-motion: reduce) { .sb-menu-bg-video { transition: none; } }

/* ==== Seasonal menu swaps (Halloween 2026) ====
   menu.json sections with "theme" show only while assets/theme.js has that theme on; sections with
   "hide_in_theme" step aside. The theme's date window ends 2026-11-01 00:00 ET, so the regular
   cocktails come back on their own, with no deploy. */
[data-show-theme] { display: none; }
[data-theme="halloween"] [data-show-theme="halloween"] { display: revert; }
[data-theme="halloween"] [data-hide-theme="halloween"] { display: none; }
/* the book: cover beside "Scary Potions to Sip in the Dark" */
.sb-book { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 48px; margin-bottom: 28px; }
.sb-book-cover { display: block; width: min(250px, 62vw); height: auto; rotate: -3deg; box-shadow: 0 18px 36px rgb(0 0 0 / .3); }
.sb-book-title { flex: 0 1 380px; }
.sb-book-title .sb-letter { margin: 0 auto; }
.sb-menu-section--potions .sb-card:nth-child(3n+2) { margin-top: 0; }
@media only screen and (min-width: 860px) {
  .sb-menu-section--potions .sb-card:nth-child(3n+2) { margin-top: 64px; }
}
/* Halloween on the menu page: Neal's church wash replaces the food video, like the book's pages */
.sb-menu-bg-wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
/* Halloween: the wash is a header band at the top of the page (scrolls away), not a full-screen backdrop */
[data-theme="halloween"] .sb-menu-bg { position: absolute; inset: 0 0 auto 0; height: auto; overflow: hidden; }
[data-theme="halloween"] .sb-menu-bg-wash {
  position: static; display: block; width: 100%; height: clamp(240px, 40vh, 460px); margin: 0;
  object-fit: cover; object-position: center 40%; opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
}
[data-theme="halloween"] body.sb-menu-page { background: #f3efe9; }
[data-theme="halloween"] .sb-menu-bg { background: #f3efe9; }
[data-theme="halloween"] .sb-menu-bg::after,
[data-theme="halloween"] .sb-menu-bg-poster,
[data-theme="halloween"] .sb-menu-bg-video,
[data-theme="halloween"] .sb-menu-pause { display: none; }
[data-theme="halloween"] .sb-menu-page .sb-onvideo,
[data-theme="halloween"] .sb-menu-page .sb-onvideo .sb-menu-title { color: var(--sb-ink); }
[data-theme="halloween"] .sb-menu-page .sb-menu-head h1.intro-headline { color: #a8232b; }
/* the logo and MENU sit on the church wash: ink-black logo, and a soft paper glow behind both */
[data-theme="halloween"] .sb-menu-page .sb-menu-head .sb-logo { filter: brightness(0) drop-shadow(0 0 6px rgb(243 239 233 / .95)) drop-shadow(0 0 14px rgb(243 239 233 / .8)); }
[data-theme="halloween"] .sb-menu-page .sb-menu-head h1.intro-headline { text-shadow: 0 0 10px rgb(243 239 233 / .95), 0 0 22px rgb(243 239 233 / .8); }
[data-theme="halloween"] .sb-menu-page .sb-onvideo .sb-btn--primary { background: #a8232b; border-color: #a8232b; color: #fff; }
[data-theme="halloween"] .sb-menu-page .sb-onvideo .sb-btn--primary:hover { background: #24141c; border-color: #24141c; color: #fff; }
[data-theme="halloween"] .sb-menu-page .sb-onvideo .sb-btn:not(.sb-btn--primary) { color: #24141c; border-color: #24141c; }
[data-theme="halloween"] .sb-menu-page .sb-onvideo .sb-btn:not(.sb-btn--primary):hover { background: #24141c; color: #fff; }
[data-theme="halloween"] .sb-menu-page .sb-onvideo .sb-btn:focus-visible { outline-color: #24141c; }
[data-theme="halloween"] .sb-menu-page .sb-menu-nav { background: rgb(243 239 233 / .92); border-bottom-color: rgb(36 20 28 / .15); }
[data-theme="halloween"] .sb-menu-page .sb-menu-nav a { color: #24141c; }
[data-theme="halloween"] .sb-menu-page .sb-menu-nav a:hover, [data-theme="halloween"] .sb-menu-page .sb-menu-nav a:focus-visible { background: rgb(36 20 28 / .08); }
[data-theme="halloween"] .sb-menu-page .sb-menu-nav a:focus-visible { outline-color: #24141c; }
[data-theme="halloween"] .sb-menu-page .sb-menu-group-title { color: #a8232b; border-top-color: #24141c; }
[data-theme="halloween"] .sb-menu-page .sb-menu-foot { border-top-color: #24141c; }
[data-theme="halloween"] .sb-menu-page .sb-sheet { background: rgb(255 255 255 / .92); }

/* If Slick never initializes (script blocked or failed), show each carousel's first slide
   instead of nothing: the source markup pre-classes slides .slick-slide (display:none). */
.gallery-cycle:not(.slick-initialized) > .slick-slide:first-child,
.tab-text-cycle:not(.slick-initialized) > .slick-slide:first-child,
.tab-image-cycle:not(.slick-initialized) > .slick-slide:first-child { display: block; float: none; height: auto; }

/* Footer credit: keep each link on one line ("A Chariot joint" wrapped mid-phrase on phones). */
.footer-credit a { white-space: nowrap; }

/* ==== Layout: no white frame (#73) ====
   The theme framed the page with 18px (10px on phones) white borders via .border-* classes.
   Sections now run edge to edge; the gallery no longer needs to bleed past the frame. */
.border-top, .border-right, .border-bottom, .border-left { border-width: 0; }
@media only screen and (max-width: 790px) {
  .gallery-wrap { width: 100%; left: 0; }
  /* keep the happenings text 25px from the edge (it relied on the 10px frame); photo stays full-bleed */
  .tabs-block .tab-block-left { padding-left: 25px; padding-right: 25px; }
}

/* ==== Hero background video (#74) ====
   Poster <img> is the LCP element; the muted loop fades in over it once playing. sb.js skips
   the video for prefers-reduced-motion and Save-Data/slow connections (poster only). */
.intro-bg { overflow: hidden; }
.sb-hero {
  position: relative;
  isolation: isolate;
  color: var(--sb-cream);
}
.sb-hero-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--sb-forest);
}
.sb-hero-media::after {   /* overlay: keeps cream text above WCAG AA on every frame */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--sb-forest-rgb) / .70) 0%, rgb(var(--sb-forest-rgb) / .76) 100%);
}
.sb-hero-poster,
.sb-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-hero-video { opacity: 0; transition: opacity .6s ease; }
.sb-hero.is-playing .sb-hero-video { opacity: 1; }
.sb-hero .intro-headline { color: var(--sb-cream); }
.sb-hero .sb-btn:not(.sb-btn--primary), .sb-onvideo .sb-btn:not(.sb-btn--primary) { color: var(--sb-cream); border-color: var(--sb-cream); }
.sb-hero .sb-btn:not(.sb-btn--primary):hover, .sb-onvideo .sb-btn:not(.sb-btn--primary):hover { background: var(--sb-cream); color: var(--sb-green); }
.sb-hero .sb-btn--primary, .sb-onvideo .sb-btn--primary { background: var(--sb-cream); color: var(--sb-green); border-color: var(--sb-cream); }
.sb-hero .sb-btn--primary:hover, .sb-onvideo .sb-btn--primary:hover { background: var(--sb-rose); border-color: var(--sb-rose); color: var(--sb-cream); }
.sb-hero .sb-btn:focus-visible, .sb-onvideo .sb-btn:focus-visible { outline: 2px solid var(--sb-cream); outline-offset: 3px; }
.sb-hero-pause { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sb-hero-video { transition: none; }
}
@media only screen and (max-width: 790px) {
  .section-pad.intro-pad.sb-hero { padding-top: 44px; padding-bottom: 68px; }
}

/* ==== Hero video to the top of the page (#74) ====
   The header (logo) floats over the video instead of sitting above it, with no rule under it.
   Hero top padding = old header (99px) + gap (50px) + old padding, so the headline stays where
   it was: 219px on desktop (70px padding), 193px on phones (44px). Homepage only (body.home). */
body.home #container { position: relative; }
body.home header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
body.home header .header-bg { background: transparent; }
body.home header .header-border { border-bottom: 0; }   /* no rule across the video */
body.home .intro-block .intro-bg { padding-top: 0; }
body.home .section-pad.intro-pad.sb-hero { padding-top: 219px; }
@media only screen and (max-width: 790px) {
  body.home .section-pad.intro-pad.sb-hero { padding-top: 193px; }
}

/* ==== Hours / address / phone over the hero video ====
   A plain centered block under the buttons, in cream, no labels or icons:
   hours, a blank line, then address + phone. The story copy below has the whole width. */
.sb-hero-info {
  margin-top: 40px;
  text-align: center;
  color: var(--sb-cream);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
  line-height: 1.6;
}
.sb-hero-info p { margin: 0; }
.sb-hero-info .sb-hero-hours { margin-bottom: 1.6em; }   /* the blank line */
.sb-hero-info .sb-hero-closed { display: block; font-size: 11px; letter-spacing: .12em; opacity: .8; margin-top: 2px; }
.sb-hero-info a { color: var(--sb-cream); display: block; text-decoration: none; }
.sb-hero-info .sb-hero-phone { font-size: 11px; letter-spacing: .12em; opacity: .8; margin-top: 2px; }
.sb-hero-info .sb-hero-insta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; letter-spacing: .12em; opacity: .8; }
.sb-hero-info .sb-hero-insta .sb-icon { width: 14px; height: 14px; }
/* tap targets (#115): at least 24px tall, with space between the contact links */
.sb-hero-contact a { min-height: 24px; padding: 4px 0; }
.sb-hero-info a:hover { text-decoration: underline; }
.sb-hero-info a:focus-visible { outline: 2px solid var(--sb-cream); outline-offset: 3px; }
body.home .intro-block .info-block { border-top: 0; }
body.home .info-wrap:before { display: none; }
body.home .info-right { width: 100%; padding: 30px 0 15px; display: block; }
@media only screen and (min-width: 791px) {
  /* story copy lines up with the hero button row (701px, centered) */
  body.home .info-right .text { max-width: 701px; margin: 0 auto; }
}
@media only screen and (max-width: 790px) {
  .sb-hero-info { margin-top: 30px; font-size: 14px; }
  body.home .info-right { margin-top: 0; padding-top: 28px; }
}

/* ==== Footer, simplified ====
   Centered: email | phone | address, then (c) | Privacy Notice, then the photo credit,
   then a small "A [Chariot logo] joint" at the bottom. No dark rules (the old .footer-text / footer .info-block borders). */
.sb-footer { text-align: center; color: var(--sb-ink); }
.sb-footer .inner { opacity: .8; }   /* footer sits back a bit; all text is ink so it stays AA (7:1+) */
.sb-footer .inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sb-footer-chariot { display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--sb-ink); text-decoration: none; font-weight: normal; text-transform: uppercase;
  letter-spacing: .14em; font-size: 12px; margin-top: 14px; }
.sb-footer-chariot img { width: 150px; height: auto; display: block; }
.sb-footer-chariot:hover span { text-decoration: underline; }
.sb-footer-row { margin: 0; font-size: 14px; line-height: 1.7; font-weight: normal; text-transform: uppercase; letter-spacing: .05em; }
.sb-footer-row a { display: inline-block; min-height: 24px; padding: 2px 0; color: var(--sb-ink); text-decoration: none; } /* tap targets (#115) */
.sb-footer-row a:hover { color: var(--sb-rose-deep); text-decoration: underline; }
.sb-footer-sep { margin: 0 .7em; opacity: .5; font-weight: normal; }
.sb-footer-legal { font-size: 12px; font-weight: normal; color: var(--sb-ink); }
.sb-footer-legal a { color: var(--sb-ink); text-decoration: underline; }
.sb-footer-credit { margin: 0; font-size: 12px; color: var(--sb-ink); }
.sb-footer a:focus-visible { outline: 2px solid var(--sb-ink); outline-offset: 3px; }
@media only screen and (max-width: 600px) {
  /* stack the contact row on phones, no separators */
  .sb-footer-row:not(.sb-footer-legal) a { display: block; }
  .sb-footer-row:not(.sb-footer-legal) .sb-footer-sep { display: none; }
}

/* ==== Halloween theme (#75) ====
   Only applies when assets/theme.js sets <html data-theme="halloween"> (inside its date window,
   or with ?theme=halloween). Light version: bone page, deep-plum text, burnt-pumpkin headings,
   links and buttons, violet accents; a dark plum mobile bar with a bright pumpkin Reserve button.
   All text pairs are WCAG AA or better (body 16:1, pumpkin 5.1:1+, violet 7:1+). */
[data-theme="halloween"] {
  --sb-page: #fbf5ea;       /* bone */
  --sb-white: #fbf5ea;
  --sb-sage: #f5e6d3;       /* panels: warm pumpkin-cream */
  --sb-blush: #f1e2cf;
  --sb-linen: #f1e2cf;
  --sb-mist: #e8d6c1;
  --sb-ink: #24141c;        /* body text: deep plum */
  --sb-ink-rgb: 36 20 28;
  --sb-charcoal: #2e1f27;
  --sb-slate: #5e4b55;
  --sb-grey: #6f5c64;
  --sb-stone: #736158;
  --sb-green: #a3430a;      /* headings, links, outline buttons: burnt pumpkin */
  --sb-teal: #a3430a;
  --sb-rose: #5f3590;       /* accents, icons, labels: violet */
  --sb-rose-deep: #4a2773;
  --sb-gold: #8f5a0c;
  --sb-cream: #fffaf2;      /* text on pumpkin buttons */
  --sb-forest: #24141c;
  --sb-forest-rgb: 36 20 28;
  --sb-olive: #6b4826;      /* info labels (hours / address / phone) */
  color-scheme: light;
}
@media only screen and (max-width: 600px) {
  [data-theme="halloween"] .sb-mobilebar { background: #24141c; box-shadow: 0 -6px 18px rgb(36 20 28 / .35); }
  [data-theme="halloween"] .sb-mobilebar a { color: #fbf5ea; }
  [data-theme="halloween"] .sb-mobilebar a.sb-mobilebar__primary { background: #f28c28; color: #24141c; }
}
/* Hero video (#74), when present: plum overlay with an ember glow, cream text on top of the video. */
[data-theme="halloween"] .sb-hero { color: var(--sb-cream); }
[data-theme="halloween"] .sb-hero .intro-headline { color: #f28c28; }
[data-theme="halloween"] .sb-hero-media::after {
  background:
    radial-gradient(120% 70% at 50% 110%, rgb(242 140 40 / .28), transparent 60%),
    linear-gradient(180deg, rgb(var(--sb-forest-rgb) / .70) 0%, rgb(var(--sb-forest-rgb) / .80) 100%);
}
[data-theme="halloween"] .sb-hero .sb-btn:not(.sb-btn--primary), [data-theme="halloween"] .sb-onvideo .sb-btn:not(.sb-btn--primary) { color: var(--sb-cream); border-color: var(--sb-cream); }
[data-theme="halloween"] .sb-hero .sb-btn:not(.sb-btn--primary):hover, [data-theme="halloween"] .sb-onvideo .sb-btn:not(.sb-btn--primary):hover { background: var(--sb-cream); color: var(--sb-ink); }
[data-theme="halloween"] .sb-hero .sb-btn--primary, [data-theme="halloween"] .sb-onvideo .sb-btn--primary { background: #f28c28; border-color: #f28c28; color: #24141c; }
[data-theme="halloween"] .sb-hero .sb-btn:focus-visible, [data-theme="halloween"] .sb-onvideo .sb-btn:focus-visible { outline-color: var(--sb-cream); }