/* Targeted responsive fixes — fluid layout preserved; loads after styles.css / site.css */

:root {
  --page-gutter: clamp(16px, calc(3 * var(--site-vw)), 80px);
  --mobile-header-height: 72px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Prevent grid/flex children from forcing horizontal scroll */
.home-hero,
.home-hero-copy,
.home-breakfast,
.breakfast-art,
.breakfast-copy,
.spiked,
.spiked-copy,
.visit-band,
.contact-panel,
.category-strip,
.menu-grid,
.lower-grid,
.category,
footer {
  min-width: 0;
}

.home-exterior-frame,
.home-exterior-art,
.spiked-photo-art {
  min-width: 0;
  max-width: 100%;
}

/* Navigation accessibility (existing mobile pattern unchanged) */
.menu-toggle{
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle:focus-visible,
.btn:focus-visible,
.nav a:focus-visible {
  outline: 2px solid var(--teal, #177b82);
  outline-offset: 3px;
}

.nav-left a:not(.mobile-nav-link) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Duplicates from script.js — mobile drawer only, never desktop bar */
.nav-left .mobile-nav-link {
  display: none;
}

/* Mailing list: keep input + button on one row (wrap caused landscape footer distortion) */
footer .mailing div{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
}

footer .mailing input{
  min-width: 0;
  flex: 1 1 160px;
}

/*
 * Hamburger when the header grid is too narrow (matches styles.css @860px), or on
 * short landscape where left/right nav collides (e.g. ~924×412). Portrait widths
 * like 1024px keep desktop nav until 861px+ rules in styles.css apply.
 */
@media (max-width: 860px),
  ((max-width: 1099px) and (orientation: landscape) and (max-height: 500px)) {
  .topbar {
    height: 72px;
    grid-template-columns: 48px 1fr 54px;
    padding: 0 12px;
    border-bottom: 1px solid var(--teal, #1c7b83);
  }

  .topbar:before,
  .topbar:after,
  .topbar .nav-right {
    display: none;
  }

  .topbar .brand {
    grid-column: 2;
    grid-row: 1;
    height: 70px;
    align-self: center;
    margin-top: 0;
  }

  .topbar .brand img {
    width: 140px;
    height: auto;
  }

  .topbar > .open-hours {
    position: static;
    grid-column: 3;
    grid-row: 1;
    transform: none;
    width: 42px;
    min-height: 54px;
    justify-self: end;
  }

  .topbar > .open-hours small {
    font-size: 10px;
  }

  .topbar > .open-hours strong {
    font-size: 27px;
  }

  .topbar .menu-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 10px;
    z-index: 12;
  }

  .topbar .menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--red, #7f1d24);
  }

  .topbar .nav-left {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--mobile-header-height);
    z-index: 30;
    height: auto;
    max-height: calc(100dvh - var(--mobile-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--cream, #fff9e9);
    padding: 16px 25px;
    box-shadow: 0 8px 12px rgb(0 0 0 / 15%);
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .topbar .nav-left.open {
    display: flex;
  }

  .topbar .nav-left.open a,
  .topbar .nav-left.open .mobile-nav-link {
    width: 100%;
  }

  .topbar .nav-left.open .mobile-nav-link {
    display: block;
  }

  .topbar .nav .active:after {
    right: auto;
    width: 40px;
  }
}

/*
 * Landscape mobile nav — open editorial layout (not tabular).
 * Grid used for alignment only; no cell borders or column rules.
 */
@media (orientation: landscape) and (max-width: 1099px) and (max-height: 820px) {
  .topbar {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .topbar .menu-toggle {
    justify-self: start;
  }

  .topbar .brand {
    justify-self: center;
  }

  .topbar > .open-hours {
    justify-self: end;
  }

  .topbar .nav-left.open{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    align-content: start;
    column-gap: clamp(28px, calc(5 * var(--site-vw)), 72px);
    row-gap: clamp(20px, 3vh, 34px);
    padding:
      clamp(12px, 2vh, 18px)
      clamp(24px, calc(4 * var(--site-vw)), 42px)
      clamp(16px, 2.5vh, 24px);
    border-top: 1px solid rgba(28, 123, 131, 0.12);
    box-shadow: 0 8px 14px rgb(0 0 0 / 10%);
  }

  .topbar .nav-left.open > a:not(.order),
  .topbar .nav-left.open > .mobile-nav-link:not(.order){
    position: relative;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    font-size: clamp(0.95rem, calc(1.2 * var(--site-vw)), 1.08rem);
    line-height: 1.1;
    letter-spacing: 0.015em;
    color: var(--ink, #003f50);
    transition:
      color 180ms ease,
      transform 180ms ease;
  }

  .topbar .nav-left.open > a:not(.order):not(.active):hover,
  .topbar .nav-left.open > a:not(.order):focus-visible,
  .topbar .nav-left.open > .mobile-nav-link:not(.order):not(.active):hover,
  .topbar .nav-left.open > .mobile-nav-link:not(.order):focus-visible{
    color: var(--red, #7f1d24);
    transform: translateX(2px);
  }

  .topbar .nav-left.open > a:not(.order):not(.active)::after,
  .topbar .nav-left.open > .mobile-nav-link:not(.order):not(.active)::after{
    content: "";
    position: absolute;
    left: 4px;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 180ms ease;
  }

  .topbar .nav-left.open > a:not(.order):not(.active):hover::after,
  .topbar .nav-left.open > a:not(.order):not(.active):focus-visible::after,
  .topbar .nav-left.open > .mobile-nav-link:not(.order):not(.active):hover::after,
  .topbar .nav-left.open > .mobile-nav-link:not(.order):not(.active):focus-visible::after{
    width: 26px;
  }

  .topbar .nav-left.open > a.active::after,
  .topbar .nav-left.open > .mobile-nav-link.active::after{
    left: 4px;
    right: auto;
    bottom: 2px;
    width: 26px;
    height: 1px;
  }

  .topbar .nav-left.open > a.order,
  .topbar .nav-left.open > .mobile-nav-link.order{
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: clamp(18px, 3vh, 28px);
    padding: 11px 20px;
    border: 0;
    border-radius: 6px;
    letter-spacing: 0.025em;
    line-height: 1;
    transform: none;
    transition: filter 180ms ease;
  }

  .topbar .nav-left.open > a.order::before,
  .topbar .nav-left.open > .mobile-nav-link.order::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * clamp(10px, 1.8vh, 14px));
    height: 1px;
    background: rgba(28, 123, 131, 0.1);
    pointer-events: none;
  }

  .topbar .nav-left.open > a.order,
  .topbar .nav-left.open > .mobile-nav-link.order{
    position: relative;
  }

  .topbar .nav-left.open > a.order:hover,
  .topbar .nav-left.open > a.order:focus-visible,
  .topbar .nav-left.open > .mobile-nav-link.order:hover,
  .topbar .nav-left.open > .mobile-nav-link.order:focus-visible{
    filter: brightness(0.92);
    transform: none;
  }

  .topbar .nav-left.open > a.order span,
  .topbar .nav-left.open > .mobile-nav-link.order span {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    margin-left: 0;
  }
}

/* Landscape: compact Order Online CTA (not a full-width banner) */
@media (orientation: landscape) and (max-width: 1099px) and (max-height: 820px) {
  .topbar .nav-left.open > a.order,
  .topbar .nav-left.open > .mobile-nav-link.order{
    width: auto;
    max-width: min(100%, 300px);
    justify-self: start;
    justify-content: flex-start;
    margin-inline: 0;
    padding: 11px 20px;
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (max-width: 759px) and (max-height: 820px) {
  .topbar .nav-left.open{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, calc(6 * var(--site-vw)), 32px);
  }
}

@media (orientation: landscape) and (max-width: 1099px) and (max-height: 430px) {
  .topbar .nav-left.open{
    row-gap: 10px;
    padding-block: clamp(8px, 1.5vh, 12px);
  }
}

/* Short laptop / tablet portrait height */
@media (max-height: 720px) and (min-width: 768px) {
  .home-hero {
    min-height: 0;
    padding-block: clamp(12px, 2.5vh, 28px);
  }

  .home-exterior-frame {
    min-height: 0;
  }

  .events-hero,
  .about-hero-built,
  .visit-hero {
    min-height: 0;
  }
}

/* Phone landscape: stay compact without switching to a different desktop layout */
@media (max-height: 500px) and (max-width: 960px) {
  .home-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, calc(2 * var(--site-vw)), 16px);
    padding-block: clamp(14px, 3vh, 22px) clamp(10px, 2vh, 16px);
  }

  .home-page .home-hero h1.home-hero-script {
    margin-top: clamp(4px, 1.2vh, 10px);
  }

  .home-exterior-frame {
    min-height: clamp(180px, 48vh, 280px);
    margin-bottom: -24px;
  }

  .home-page .home-exterior-art {
    min-width: 0;
    transform: none;
  }
}

@media (orientation: landscape) and (max-width: 1099px) {
  /*
   * Breakfast band: 1100px rules use minmax(520px, …) — too wide for ~900px
   * landscape; copy + CTA bleed over the meal-times divider. Keep same layout.
   */
  .home-breakfast {
    grid-template-columns: minmax(0, 1fr) max-content minmax(110px, 0.48fr);
    gap: clamp(18px, calc(3 * var(--site-vw)), 32px);
    align-items: center;
  }

  .home-breakfast > .breakfast-art {
    min-width: 0;
  }

  .breakfast-art {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(8px, calc(1.5 * var(--site-vw)), 14px);
    align-items: center;
  }

  .breakfast-art img.home-breakfast-art {
    width: 100%;
    max-width: min(calc(36 * var(--site-vw)), 200px);
    max-height: min(36vh, 190px);
    margin: 0;
    object-fit: contain;
  }

  .breakfast-copy {
    min-width: 0;
    padding-right: clamp(10px, calc(2 * var(--site-vw)), 18px);
    box-sizing: border-box;
  }

  .breakfast-copy p,
  .breakfast-copy .btn {
    max-width: 100%;
  }

  .home-breakfast > .meal-times {
    padding-left: clamp(20px, calc(2.8 * var(--site-vw)), 28px);
    flex-shrink: 0;
  }

  .home-breakfast > .breakfast-food-frame {
    min-width: 0;
  }
}

@media (orientation: landscape) and (max-width: 1099px) and (max-height: 820px) {
  .home-hero-copy {
    padding: 57px 20px 20px 0;
  }

  .home-breakfast > .breakfast-food-frame {
    height: clamp(150px, 40vh, 240px);
  }
}

/*
 * 719–1099px: desktop 5-column footer kicks in at 861px (styles.css) and crushes
 * Instagram / Privacy / Terms; keep the same 2-column tablet footer through 1099px.
 */
@media (min-width: 719px) and (max-width: 1099px) {
  footer {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
  }

  footer .footer-logo {
    grid-column: 1 / -1;
    justify-self: center;
    width: 145px;
    height: auto;
  }

  footer nav {
    padding-left: 20px;
    text-align: left;
    align-items: flex-start;
  }

  footer .mailing,
  footer .social {
    border-left: 0;
    padding: 0;
  }

  footer .mailing input {
    width: 100%;
  }

  footer .social {
    text-align: center;
  }

  footer .social p {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(8px, calc(1.5 * var(--site-vw)), 15px);
    white-space: nowrap;
  }
}

/* Phone landscape: same tablet footer, slightly tighter padding */
@media (orientation: landscape) and (max-width: 860px) and (min-width: 719px) {
  footer {
    align-items: start;
    gap: 16px 20px;
    padding: 14px clamp(16px, calc(4 * var(--site-vw)), 24px);
  }

  footer .footer-logo {
    width: min(150px, calc(42 * var(--site-vw)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .topbar .nav-left.open > a:not(.order),
  .topbar .nav-left.open > .mobile-nav-link,
  .topbar .nav-left.open > a:not(.order):not(.active)::after{
    transition: none;
    transform: none;
  }
}

@media (min-width: 861px) and (max-width: 999px) {
  .topbar {
    padding-left: 0;
  }

  .topbar .nav-left,
  .topbar .nav-right {
    font-size: clamp(12px, calc(1.15 * var(--site-vw)), 13px);
  }

  .topbar .nav-right .order {
    font-size: clamp(12px, calc(1.15 * var(--site-vw)), 13px);
  }
}

/* ==========================================================================
   Jaime responsive QA — targeted fixes (docs/Williamsburg_Diner_Jaime_Responsive_QA_Cursor_Prompt.md)
   ========================================================================== */

/* Menu hero photo — focal point = pancake stack (lower-left in hero.png) */
@media (min-width: 861px) {
  #menu .hero-photo {
    margin-left: clamp(0%, calc(6 * var(--site-vw)), 16%);
    background-size: clamp(112%, calc(105 * var(--site-vw)), 132%) auto;
    background-position: 34% 118%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 8%, #000 22%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, transparent 8%, #000 22%, #000 100%);
  }
}

@media (min-width: 861px) and (max-width: 1200px) {
  #menu > .hero {
    height: clamp(300px, calc(30 * var(--site-vw)), 360px);
  }

  #menu .hero-photo {
    inset: 0 0 clamp(-96px, calc(-11 * var(--site-vw)), -68px) 0;
    background-size: clamp(118%, calc(112 * var(--site-vw)), 138%) auto;
    background-position: 32% 120%;
  }

  #menu > .hero:after {
    bottom: clamp(-96px, calc(-11 * var(--site-vw)), -68px);
    height: clamp(130px, calc(18 * var(--site-vw)), 185px);
  }

  #menu > .hero .hero-copy {
    padding-left: clamp(36px, calc(5.5 * var(--site-vw)), 74px);
  }

  #menu > .hero .hero p {
    margin-left: clamp(28px, calc(4.8 * var(--site-vw)), 76px);
    font-size: clamp(13px, calc(1.45 * var(--site-vw)), 17px);
    letter-spacing: clamp(1.2px, calc(0.22 * var(--site-vw)), 2.5px);
  }

  #menu > .menu-grid {
    padding-top: clamp(36px, calc(7 * var(--site-vw)), 64px);
  }
}

/* Wide but short viewport (e.g. 1258×380) — shallow hero must still show table */
@media (min-width: 861px) and (max-height: 520px) {
  #menu .hero-photo {
    background-size: clamp(128%, calc(120 * var(--site-vw)), 152%) auto;
    background-position: 30% 128%;
  }
}

@media (max-width: 860px) {
  #menu > .hero {
    grid-template-rows: minmax(190px, auto) minmax(175px, 1fr);
    height: clamp(368px, calc(92 * var(--site-vw)), 400px);
  }

  #menu .hero-photo {
    margin-left: 0;
    inset: clamp(188px, calc(46 * var(--site-vw)), 220px) 0 clamp(-72px, calc(-10 * var(--site-vw)), -56px) 0;
    height: auto;
    background-size: clamp(155%, calc(170 * var(--site-vw)), 195%) auto;
    background-position: 38% 112%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #menu .hero::after {
    bottom: clamp(-72px, calc(-10 * var(--site-vw)), -56px);
    height: 125px;
  }
}

@media (max-width: 560px) {
  #menu .hero-photo {
    background-size: clamp(168%, calc(185 * var(--site-vw)), 210%) auto;
    background-position: 40% 115%;
  }
}

@media (max-width: 400px) {
  #menu > .hero {
    height: clamp(380px, calc(118 * var(--site-vw)), 420px);
    grid-template-rows: minmax(200px, auto) minmax(185px, 1fr);
  }

  #menu .hero-photo {
    inset: clamp(196px, calc(48 * var(--site-vw)), 228px) 0 clamp(-68px, calc(-12 * var(--site-vw)), -52px) 0;
    background-size: clamp(178%, calc(195 * var(--site-vw)), 220%) auto;
    background-position: 42% 118%;
  }
}

/* Home hero: header band + fluid script on large screens */
@media (min-width: 901px) and (max-width: 1099px) {
  .home-page .home-hero {
    padding-top: clamp(28px, 4.5vh, 44px);
  }

  .home-page .home-hero-copy {
    padding-top: clamp(12px, 2vh, 20px);
  }

  .home-page .home-hero h1.home-hero-script {
    margin-top: clamp(8px, 1.8vh, 16px);
  }
}

@media (min-width: 1100px) {
  .home-page .home-hero h1.home-hero-script {
    width: min(100%, clamp(480px, calc(38 * var(--site-vw)), 720px));
    aspect-ratio: 520 / 340;
    margin-bottom: clamp(4px, calc(0.6 * var(--site-vw)), 8px);
  }

  .home-page .home-hero-copy p {
    margin-bottom: clamp(8px, calc(1 * var(--site-vw)), 12px);
  }

  .home-page .home-hero-script .home-script-line {
    font-size: clamp(68px, calc(4.8 * var(--site-vw)), 82px);
  }

  .home-page .home-hero-script .home-script-always {
    font-size: clamp(76px, calc(5.2 * var(--site-vw)), 90px);
  }

}

@media (min-width: 1300px) and (max-width: 1919px) {
  .home-page .home-hero {
    padding-top: clamp(44px, 4.2vh, 72px);
  }

  .home-page .home-hero-copy {
    padding-top: clamp(14px, 1.6vh, 26px);
  }

  .home-page .home-hero h1.home-hero-script {
    margin-top: clamp(10px, calc(1.2 * var(--site-vw)), 22px);
  }
}



@media (min-width: 901px) {
  .home-page .home-hero-copy .hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .home-page .home-hero {
    padding-top: clamp(44px, calc(11 * var(--site-vw)), 68px);
  }

  .home-page .home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-top: clamp(16px, 4vh, 28px);
    max-width: min(100%, 520px);
  }

  .home-page .home-hero h1.home-hero-script {
    margin-top: clamp(12px, 3vh, 22px);
    margin-bottom: clamp(4px, 1vh, 8px);
    width: min(100%, 480px);
    align-self: flex-start;
  }

  .home-page .home-hero-copy p {
    margin: 0 0 clamp(8px, 2vh, 12px);
    max-width: min(100%, 380px);
  }

  .home-page .home-hero-copy .hero-actions {
    justify-content: flex-start;
    width: 100%;
    max-width: min(100%, 420px);
    margin-inline: 0;
    position: relative;
    z-index: 2;
  }
}

/* Home hero bridge — full resolution ladder (homepage) */
@media (max-width: 860px) {
  .visit-page .visit-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "photo" "eyebrow" "address" "actions"; row-gap: 20px; }
  .visit-page .visit-hero .visit-copy { display: contents; }
  .visit-page .visit-copy h1.visit-script-title { grid-area: title; width: min(420px, calc(100% - 48px)); margin: 24px 24px 0; }
  .visit-page .visit-hero .visit-exterior-frame { grid-area: photo; order: unset; }
  .visit-page .visit-copy .visit-eyebrow { grid-area: eyebrow; margin: 12px 28px 0; }
  .visit-page .visit-copy .contact-lines { grid-area: address; margin: 0 28px; }
  .visit-page .visit-copy .visit-actions { grid-area: actions; margin: 0 28px 32px; }
}
@media (max-width: 400px) {
  .home-page .home-hero {
    --hero-bridge-left: 0;
    --hero-bridge-right: 0;
    --hero-bridge-top: auto;
    --hero-bridge-bottom: clamp(12px, 4vh, 44px);
    --hero-bridge-height: clamp(200px, calc(62 * var(--site-vw)), 320px);
    --hero-bridge-bg-x: 0%;
    --hero-bridge-mask-x1: 4%;
    --hero-bridge-mask-x2: 96%;
  }
}

@media (min-width: 401px) and (max-width: 560px) {
  .home-page .home-hero {
    --hero-bridge-left: 0;
    --hero-bridge-right: 2%;
    --hero-bridge-top: auto;
    --hero-bridge-bottom: clamp(18px, 5vh, 52px);
    --hero-bridge-height: clamp(210px, calc(58 * var(--site-vw)), 340px);
    --hero-bridge-bg-x: 2%;
  }
}

@media (min-width: 561px) and (max-width: 720px) {
  .home-page .home-hero {
    --hero-bridge-left: 1%;
    --hero-bridge-right: 3%;
    --hero-bridge-top: auto;
    --hero-bridge-bottom: clamp(24px, 6vh, 60px);
    --hero-bridge-height: clamp(240px, calc(52 * var(--site-vw)), 380px);
    --hero-bridge-bg-x: 3%;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .home-page .home-hero {
    --hero-bridge-left: 2%;
    --hero-bridge-right: 4%;
    --hero-bridge-top: auto;
    --hero-bridge-bottom: clamp(32px, 7vh, 84px);
    --hero-bridge-height: clamp(270px, calc(48 * var(--site-vw)), 420px);
    --hero-bridge-bg-x: 4%;
  }
}

/* ≤900px: skyline behind copy (not under exterior photo) */
@media (max-width: 900px) {
  .home-page .home-hero {
    --hero-bridge-left: 0;
    --hero-bridge-right: 0;
    --hero-bridge-top: clamp(108px, calc(24 * var(--site-vw)), 188px);
    --hero-bridge-bottom: auto;
    --hero-bridge-height: clamp(280px, calc(72 * var(--site-vw)), 420px);
    --hero-bridge-bg-x: center;
    --hero-bridge-bg-y: bottom;
    --hero-bridge-bg-size: contain;
    --hero-bridge-mask-x1: 45%;
    --hero-bridge-mask-x2: 72%;
    --hero-bridge-mask-y1: 84%;
    --hero-bridge-mask-y2: 60%;
  }

  .home-page .home-hero::before {
    left: 0;
    right: 0;
    top: var(--hero-bridge-top);
    bottom: auto;
    height: var(--hero-bridge-height);
    z-index: 1;
    background: var(--optimized-image-46) center bottom / contain no-repeat;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--hero-bridge-mask-x1),
        #000 var(--hero-bridge-mask-x2),
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--hero-bridge-mask-y1),
        #000 var(--hero-bridge-mask-y2),
        transparent 100%
      );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--hero-bridge-mask-x1),
        #000 var(--hero-bridge-mask-x2),
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--hero-bridge-mask-y1),
        #000 var(--hero-bridge-mask-y2),
        transparent 100%
      );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .home-page .home-hero-copy {
    z-index: 3;
  }

  .home-page .home-exterior-frame {
    z-index: 2;
  }
}

@media (min-width: 901px) and (max-width: 1099px) {
  .home-page .home-hero {
    --hero-bridge-left: 3%;
    --hero-bridge-right: 6%;
    --hero-bridge-top: clamp(72px, 9.5vh, 108px);
    --hero-bridge-bottom: auto;
    --hero-bridge-height: clamp(480px, 50vh, 580px);
    --hero-bridge-bg-x: 5%;
    --hero-bridge-bg-y: 40%;
  }
}

@media (min-width: 1100px) and (max-width: 1299px) {
  .home-page .home-hero {
    --hero-bridge-left: 3.5%;
    --hero-bridge-right: 7%;
    --hero-bridge-top: clamp(76px, 9vh, 112px);
    --hero-bridge-height: clamp(510px, 52vh, 600px);
    --hero-bridge-bg-x: 7%;
    --hero-bridge-bg-y: 38%;
  }
}

/* 901–1300: skyline mask — values from Jaime devtools reference */
@media (min-width: 901px) and (max-width: 1300px) {
  .home-page .home-hero {
    --hero-bridge-bg-size: contain;
    --hero-bridge-mask-x1: 67%;
    --hero-bridge-mask-x2: 7%;
    --hero-bridge-mask-y1: 8%;
    --hero-bridge-mask-y2: 44%;
  }
}

@media (min-width: 1300px) and (max-width: 1919px) {
  .home-page .home-hero {
    --hero-bridge-left: 4%;
    --hero-bridge-right: 8%;
    --hero-bridge-top: clamp(80px, 8.5vh, 116px);
    --hero-bridge-height: clamp(530px, 53vh, 630px);
    --hero-bridge-bg-x: 7%;
    --hero-bridge-bg-y: 36%;
  }
}



@media (max-height: 500px) and (max-width: 960px) {
  .home-page .home-hero {
    --hero-bridge-left: 36%;
    --hero-bridge-right: 0;
    --hero-bridge-top: clamp(84px, 20vh, 120px);
    --hero-bridge-bottom: auto;
    --hero-bridge-height: clamp(170px, 56vh, 250px);
    --hero-bridge-bg-x: 10%;
    --hero-bridge-bg-size: cover;
  }
}

@media (orientation: landscape) and (max-width: 1099px) and (max-height: 820px) and (min-width: 901px) {
  .home-page .home-hero {
    --hero-bridge-top: clamp(128px, 22vh, 172px);
    --hero-bridge-height: clamp(360px, 64vh, 500px);
    --hero-bridge-left: clamp(2%, calc(3 * var(--site-vw)), 6%);
    --hero-bridge-bg-x: 4%;
  }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 520px) {
  .home-page .home-hero {
    --hero-bridge-left: 28%;
    --hero-bridge-right: 0;
    --hero-bridge-top: clamp(72px, 18vh, 108px);
    --hero-bridge-bottom: auto;
    --hero-bridge-height: clamp(160px, 52vh, 230px);
    --hero-bridge-bg-x: 8%;
  }
}

/* Coffee cup + Open 24 badge */
@media (min-width: 561px) and (max-width: 1024px) {
  .coffee-art {
    justify-items: center;
  }

  .coffee-art img {
    width: min(100%, clamp(260px, calc(32 * var(--site-vw)), 320px));
    height: auto;
    max-height: clamp(280px, calc(34 * var(--site-vw)), 320px);
  }

  .coffee-art .hours-oval {
    margin-top: -4px;
    transform: rotate(-2deg) translateX(clamp(0px, calc(3 * var(--site-vw)), 14px));
  }
}

.visit-band {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #fffbed, #fff7e8);
}

@media (max-width: 900px) {
  .visit-band {
    padding-bottom: clamp(42px, calc(5 * var(--site-vw)), 62px);
  }
}

@media (max-width: 900px) {
  .visit-cta .sky {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  }

  .home-page .home-breakfast {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: clamp(22px, calc(5.5 * var(--site-vw)), 32px) clamp(12px, calc(3 * var(--site-vw)), 18px);
    align-items: center;
    padding-inline: clamp(16px, calc(4 * var(--site-vw)), 25px);
    min-height: 0;
  }

  .home-page .home-breakfast > .breakfast-art {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .home-page .home-breakfast > .meal-times {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    border-left: 1px solid var(--teal);
    border-top: 0;
    padding: 0 0 0 clamp(14px, calc(3.5 * var(--site-vw)), 22px);
    margin: 0;
    font-size: clamp(13px, calc(3.4 * var(--site-vw)), 17px);
    line-height: 1.36;
    letter-spacing: 0.07em;
    position: relative;
    z-index: 2;
  }

  .home-page .home-breakfast > .breakfast-food-frame {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: min(100%, clamp(200px, calc(54 * var(--site-vw)), 280px));
    height: clamp(190px, calc(50 * var(--site-vw)), 270px);
    margin: 0;
    justify-self: end;
    align-self: center;
    transform: rotate(2.4deg);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }

  .home-page .breakfast-food-frame img {
    transform: none;
    object-fit: cover;
    object-position: center 50%;
  }

  .home-page .breakfast-art {
    justify-items: center;
    text-align: center;
  }

  .home-page .breakfast-copy {
    justify-items: center;
  }
}

/* Menu — intermediate card width + dish labels */
@media (min-width: 861px) and (max-width: 1299px) {
  .menu-grid,
  .lower-grid {
    gap: clamp(12px, calc(1.6 * var(--site-vw)), 22px);
    padding-inline: clamp(16px, calc(2.5 * var(--site-vw)), 40px);
  }

  .category .copy {
    width: min(58%, 52%);
  }

  .custom-script-heading .script-line {
    font-size: clamp(58px, calc(5.5 * var(--site-vw)), 76px);
  }

  .category p {
    max-width: 96%;
  }

  .favorite-items figcaption {
    white-space: normal;
    line-height: 1.2;
    font-size: clamp(10px, calc(0.85 * var(--site-vw)), 12px);
    max-width: 9em;
    justify-self: center;
  }
}

@media (min-width: 861px) and (max-width: 1099px) {
  .category h2 {
    line-height: 0.76;
  }
}

/* ==========================================================================
   About page — responsive refinements (scoped to .about-page)
   ========================================================================== */

.about-page .about-hero-built > img {
  object-position: center clamp(36%, calc(5 * var(--site-vw)), 42%);
}

.about-page .about-hero-copy h1 {
  margin-bottom: clamp(18px, calc(2.5 * var(--site-vw)), 26px);
}

.about-page .about-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-page .about-hero-copy h1 .about-hero-a {
  display: block;
  font: clamp(64px, calc(7 * var(--site-vw)), 112px) / 0.78 var(--display);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.about-page .about-hero-copy h1 .about-hero-worth {
  display: block;
  font: clamp(54px, calc(5.85 * var(--site-vw)), 96px) / 0.82 var(--display);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-left: clamp(36px, calc(6 * var(--site-vw)), 112px);
  margin-top: clamp(10px, calc(1.6 * var(--site-vw)), 22px);
}

.about-page .about-script-title {
  margin-top: clamp(12px, calc(1.8 * var(--site-vw)), 20px);
}

.about-page .about-script-line {
  font-size: clamp(118px, calc(10.5 * var(--site-vw)), 132px);
}

.about-page .about-hero-copy p {
  margin-top: 0;
  margin-left: clamp(20px, calc(5.5 * var(--site-vw)), 88px);
  max-width: min(520px, 92%);
}

.about-page .hero-about-spark {
  z-index: 4;
  pointer-events: none;
  background: #fff;
  filter: drop-shadow(1px 1px 0 rgba(85, 16, 22, 0.45));
}

.about-page .hero-about-spark.spark-one {
  left: 4.3%;
  top: 18%;
}

.about-page .hero-about-spark.spark-two {
  left: 44%;
  top: 53%;
}

@media (min-width: 1280px) {
  .about-page .hero-about-spark.spark-two {
    left: clamp(28%, calc(32 * var(--site-vw)), 36%);
  }
}

.about-page .about-title-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.about-page .about-title-line-2 {
  padding-left: clamp(28px, calc(5 * var(--site-vw)), 96px);
}

.about-page .welcome-title-lines {
  gap: clamp(8px, calc(1.2 * var(--site-vw)), 16px);
  line-height: 0.78;
}

.about-page .origin-note.script {
  color: var(--teal);
}

.about-page .origin-spark {
  right: clamp(48px, calc(6 * var(--site-vw)), 90px);
  bottom: clamp(28px, calc(4 * var(--site-vw)), 52px);
}

.about-page .origin-cocktail {
  width: clamp(190px, calc(16 * var(--site-vw)), 248px);
}

.about-page .about-photo-card {
  filter: none;
}

.about-page .detail-photo {
  filter: none;
  box-shadow: none;
}

.about-page .detail-photo::after {
  content: none;
}

.about-page .detail-photo img {
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: cover;
}

.about-page .detail-clock img {
  object-position: center 40%;
}

.about-page .detail-uniform img {
  object-position: center 38%;
}

.about-page .detail-lights img {
  object-position: center 48%;
}

.about-page .neighborhood-heading h2 em {
  margin-left: clamp(22px, calc(4.8 * var(--site-vw)), 72px);
}

.about-page .details-copy .about-body-copy {
  max-width: min(480px, 100%);
}

.about-page .about-block-title.about-title-lines {
  font-size: clamp(58px, calc(5.4 * var(--site-vw)), 96px);
  white-space: normal;
}

@media (min-width: 1001px) {
  .about-page .details-inner {
    grid-template-columns: minmax(320px, 0.7fr) minmax(520px, 1.3fr);
  }
}

@media (max-width: 1000px) {
  .about-page .details-inner {
    grid-template-columns: 1fr;
  }

  .about-page .detail-collage {
    max-width: 700px;
    width: 100%;
    justify-self: center;
  }
}

@media (min-width: 901px) {
  .about-page .about-hero-built > img {
    object-position: clamp(52%, 58%, 62%) clamp(34%, calc(4.5 * var(--site-vw)), 40%);
  }

  .about-page .origins-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  }

  .about-page .origin-visual {
    min-height: clamp(460px, calc(38 * var(--site-vw)), 520px);
  }

  .about-page .about-photo-card {
    height: clamp(420px, calc(36 * var(--site-vw)), 500px);
  }

  .about-page .origin-cocktail {
    width: clamp(210px, calc(17 * var(--site-vw)), 260px);
  }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .about-page .about-photo-card {
    height: clamp(440px, calc(42 * var(--site-vw)), 520px);
  }

  .about-page .about-origin-frame {
    min-height: 100%;
  }
}

@media (min-width: 861px) and (max-width: 1000px) {
  .about-page .about-neighborhood-built {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 10px clamp(20px, calc(3 * var(--site-vw)), 40px);
  }

  .about-page .about-neighborhood-built > img.neighborhood-wall-art {
    grid-column: 1 / -1;
  }

  .about-page .neighborhood-copy h3 {
    font-size: clamp(21px, calc(2.2 * var(--site-vw)), 25px);
  }
}

@media (min-width: 861px) {
  .about-page .origins-inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  }

  .about-page .origin-copy {
    border-left: 2px solid var(--line);
    border-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 900px) and (max-width: 999px) {
  .about-page .origin-copy {
    padding-left: clamp(22px, calc(3.5 * var(--site-vw)), 36px);
  }
}

@media (max-width: 860px) {
  .about-page .origins-inner {
    grid-template-columns: 1fr;
  }

  .about-page .origin-copy {
    border-left: 0;
    border-top: 2px solid var(--line);
    padding: 32px 0 0;
  }

  .about-page .about-neighborhood-built {
    grid-template-columns: 1fr;
  }

  .about-page .about-hero-worth {
    margin-left: clamp(24px, calc(8 * var(--site-vw)), 48px);
  }

  .about-page .about-hero-copy p {
    margin-left: clamp(12px, calc(4 * var(--site-vw)), 32px);
  }

  .about-page .about-title-line-2 {
    padding-left: clamp(18px, calc(6 * var(--site-vw)), 48px);
  }

  .about-page .neighborhood-heading h2 em {
    margin-left: clamp(16px, calc(5 * var(--site-vw)), 40px);
  }
}

@media (max-width: 900px) {
  .about-page .about-hero-copy h1 .about-hero-a {
    font-size: clamp(52px, calc(8 * var(--site-vw)), 61px);
  }

  .about-page .about-hero-copy h1 .about-hero-worth {
    font-size: clamp(46px, calc(7 * var(--site-vw)), 54px);
    line-height: 0.88;
  }

  .about-page .about-script-line {
    font-size: clamp(88px, calc(14 * var(--site-vw)), 112px);
  }
}

/* ==========================================================================
   Visit Us page — responsive refinements (scoped to .visit-page)
   ========================================================================== */

.visit-page .visit-hero {
  position: relative;
  border-bottom: none;
}

.visit-page .visit-hero + .map-section {
  border-top: none;
}
.visit-page .visit-hero + .ink-section-rule:has(+ .map-section) { display: none; }

.visit-page .visit-copy h1.visit-script-title {
  width: min(580px, 100%);
  margin: 0 0 0 -8px;
}

.visit-page .visit-title-line {
  font-size: clamp(112px, calc(9.2 * var(--site-vw)), 128px);
}

.visit-page .visit-title-us {
  font-size: clamp(116px, calc(9.4 * var(--site-vw)), 132px);
}

.visit-page .visit-copy .visit-eyebrow {
  margin: clamp(8px, calc(1.2 * var(--site-vw)), 14px) 0 clamp(18px, calc(2 * var(--site-vw)), 24px);
  margin-left: clamp(28px, calc(5 * var(--site-vw)), 64px);
  padding-bottom: 14px;
  position: relative;
}

.visit-page .visit-copy .visit-eyebrow::before,
.visit-page .visit-copy .visit-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  width: min(260px, 92%);
  border-radius: 50%;
  pointer-events: none;
}

.visit-page .visit-copy .visit-eyebrow::before {
  bottom: 5px;
  height: 1.6px;
  background: var(--teal);
  opacity: 0.85;
  transform: rotate(-0.6deg);
}

.visit-page .visit-copy .visit-eyebrow::after {
  bottom: 0;
  height: 0.85px;
  background: var(--red);
  opacity: 0.42;
  transform: rotate(0.35deg);
}

.visit-page .visit-copy .contact-lines {
  border-top: none;
  padding-top: 0;
}

.visit-page .visit-hero-spark {
  z-index: 3;
  pointer-events: none;
}

.visit-page .visit-hero-spark-red {
  left: clamp(2%, calc(4 * var(--site-vw)), 5%);
  top: clamp(14%, 18vh, 22%);
  width: clamp(32px, calc(3 * var(--site-vw)), 40px);
  height: clamp(46px, calc(4.2 * var(--site-vw)), 55px);
}

.visit-page .visit-hero-spark-teal {
  left: clamp(38%, calc(42 * var(--site-vw)), 46%);
  top: clamp(52%, 54vh, 58%);
  width: clamp(28px, calc(2.6 * var(--site-vw)), 36px);
  height: clamp(40px, calc(3.8 * var(--site-vw)), 48px);
  background: var(--teal);
  filter: drop-shadow(0.65px 0.65px 0 rgba(6, 63, 76, 0.45));
}

.visit-page .visit-skyline {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  line-height: 0;
}

.visit-page .visit-skyline img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: clamp(220px, calc(32 * var(--site-vw)), 480px);
  object-fit: cover;
  object-position: center bottom;
}

@media (min-width: 1281px) {
  .visit-page .visit-exterior-frame {
    margin-left: clamp(-56px, calc(-4 * var(--site-vw)), -28px);
    min-width: calc(100% + clamp(28px, calc(3 * var(--site-vw)), 56px));
  }
}

@media (min-width: 861px) and (max-width: 900px) {
  .visit-page .visit-hero {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  }

  .visit-page .visit-exterior-frame {
    order: unset;
    height: auto;
    min-height: clamp(320px, calc(42 * var(--site-vw)), 480px);
    margin-left: clamp(-28px, calc(-3 * var(--site-vw)), -12px);
    min-width: calc(100% + clamp(12px, calc(2 * var(--site-vw)), 28px));
  }
}

@media (min-width: 861px) {
  .visit-page .map-section {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 290px);
    gap: clamp(20px, calc(2.5 * var(--site-vw)), 30px);
  }
}

@media (min-width: 861px) and (max-width: 980px) {
  .visit-page .visit-hours-links {
    display: grid;
    justify-items: center;
  }

  .visit-page .visit-hours-links a {
    justify-content: center;
    text-align: center;
    grid-template-columns: 31px minmax(0, 1fr);
    width: min(100%, 260px);
  }
}

@media (max-width: 860px) {
  .visit-page .map-section {
    grid-template-columns: 1fr;
  }

  .visit-page .visit-copy .visit-eyebrow {
    margin-left: clamp(16px, calc(5 * var(--site-vw)), 28px);
  }
}


/* ==========================================================================
   Jaime Additional Responsive Changes (homepage)
   ========================================================================== */

/* Hero: scale photo in frame + ink line under CTAs; photo layers above line */
.home-page .home-hero {
  overflow: visible;
}

/* Do not lift whole band over hero (site.css z-index:4); keeps art overlap, fixes photo bleed */
.home-page .home-breakfast {
  z-index: auto;
}

/* Breakfast band: keep copy + CTA left of meal-times divider (901–1067) */
@media (min-width: 901px) and (max-width: 1067px) {
  .home-page .home-breakfast {
    grid-template-columns: minmax(0, 1fr) minmax(100px, max-content) minmax(0, 0.6fr);
    gap: clamp(10px, calc(1.4 * var(--site-vw)), 18px);
    padding-inline: clamp(16px, calc(2.8 * var(--site-vw)), 28px);
    padding-right: clamp(12px, calc(2 * var(--site-vw)), 22px);
    align-items: center;
  }

  .home-page .home-breakfast > .breakfast-art {
    min-width: 0;
    max-width: 100%;
  }

  .home-page .breakfast-art {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(2px, calc(0.6 * var(--site-vw)), 8px);
  }

  .home-page .breakfast-art img.home-breakfast-art {
    width: min(calc(32 * var(--site-vw)), 268px);
    max-width: 100%;
    margin: clamp(-108px, calc(-11.5 * var(--site-vw)), -78px) -8px -22px clamp(calc(-2 * var(--site-vw)), -14px, -6px);
  }

  .home-page .breakfast-copy {
    min-width: 0;
    max-width: 100%;
    padding: clamp(8px, calc(1 * var(--site-vw)), 14px) clamp(6px, calc(0.9 * var(--site-vw)), 10px) clamp(8px, calc(1 * var(--site-vw)), 14px)
      clamp(10px, calc(1.5 * var(--site-vw)), 22px);
    box-sizing: border-box;
  }

  .home-page .breakfast-copy p {
    font-size: clamp(13px, calc(1.55 * var(--site-vw)), 15px);
    line-height: 1.32;
    max-width: 100%;
  }

  .home-page .breakfast-copy .btn {
    max-width: 100%;
    width: fit-content;
    min-height: 44px;
    padding-inline: clamp(16px, calc(2 * var(--site-vw)), 20px);
    font-size: clamp(14px, calc(1.5 * var(--site-vw)), 15px);
  }

  .home-page .home-breakfast > .meal-times {
    padding-left: clamp(12px, calc(1.5 * var(--site-vw)), 20px);
    font-size: clamp(14px, calc(1.55 * var(--site-vw)), 17px);
    line-height: 1.62;
    white-space: nowrap;
  }

  .home-page .home-breakfast > .breakfast-food-frame {
    height: clamp(228px, calc(27 * var(--site-vw)), 268px);
  }
}

/* Breakfast band: keep copy + CTA left of meal-times divider (1100–1360) */
@media (min-width: 1100px) and (max-width: 1360px) {
  .home-page .home-breakfast {
    grid-template-columns: minmax(0, 1.06fr) minmax(112px, max-content) minmax(0, 0.74fr);
    gap: clamp(12px, calc(1.6 * var(--site-vw)), 24px);
    padding-inline: clamp(20px, calc(3.2 * var(--site-vw)), 42px);
    padding-right: clamp(16px, calc(2.5 * var(--site-vw)), 32px);
    align-items: center;
  }

  .home-page .home-breakfast > .breakfast-art {
    min-width: 0;
    max-width: 100%;
  }

  .home-page .breakfast-art {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(4px, calc(0.8 * var(--site-vw)), 10px);
  }

  .home-page .breakfast-art img.home-breakfast-art {
    width: min(calc(26 * var(--site-vw)), 332px);
    max-width: 100%;
    margin: clamp(-115px, calc(-10 * var(--site-vw)), -88px) -6px -28px clamp(calc(-1.5 * var(--site-vw)), -12px, -8px);
  }

  .home-page .breakfast-copy {
    min-width: 0;
    max-width: 100%;
    padding: clamp(10px, calc(1.2 * var(--site-vw)), 18px) clamp(8px, calc(1 * var(--site-vw)), 14px) clamp(10px, calc(1.2 * var(--site-vw)), 18px)
      clamp(14px, calc(1.8 * var(--site-vw)), 28px);
    box-sizing: border-box;
  }

  .home-page .breakfast-copy p {
    font-size: clamp(14px, calc(1.35 * var(--site-vw)), 16px);
    line-height: 1.35;
    max-width: 100%;
  }

  .home-page .breakfast-copy .btn {
    max-width: 100%;
    width: fit-content;
  }

  .home-page .home-breakfast > .meal-times {
    padding-left: clamp(16px, calc(1.8 * var(--site-vw)), 24px);
    font-size: clamp(16px, calc(1.45 * var(--site-vw)), 19px);
    line-height: 1.75;
    white-space: nowrap;
  }

  .home-page .home-breakfast > .breakfast-food-frame {
    height: clamp(260px, calc(24 * var(--site-vw)), 300px);
  }
}

/* Hero → breakfast: balanced gap (not flush, not the old large band) — 900–1300 only */
@media (min-width: 900px) and (max-width: 1300px) {
  .home-page .home-hero {
    min-height: 0;
    padding-bottom: clamp(14px, calc(2 * var(--site-vw)), 26px);
  }

  .home-page .home-breakfast {
    min-height: 0;
    padding-top: clamp(18px, calc(2.6 * var(--site-vw)), 34px);
    margin-top: clamp(-6px, calc(-0.6 * var(--site-vw)), 6px);
  }

  .home-page .breakfast-art img.home-breakfast-art {
    margin-top: clamp(-72px, calc(-6.8 * var(--site-vw)), -52px);
  }
}

/* Above 1300px: restore original hero/breakfast seam (no section overlap) */
@media (min-width: 1301px) {
  .home-page .home-breakfast {
    margin-top: 0;
    padding-top: 18px;
    min-height: 430px;
  }

  .home-page .breakfast-art img.home-breakfast-art {
    margin: -82px -2px -30px calc(-1.5 * var(--site-vw));
  }
}

/* 1360–1560px: stop breakfast art/copy from overlapping hero + each other */
@media (min-width: 1360px) and (max-width: 1560px) {
  .home-page .home-hero {
    padding-bottom: clamp(20px, calc(2.2 * var(--site-vw)), 32px);
  }

  .home-page .home-breakfast {
    padding-top: clamp(32px, calc(3.2 * var(--site-vw)), 48px);
    min-height: 0;
    align-items: center;
  }

  .home-page .home-breakfast > .breakfast-art {
    min-width: 0;
    max-width: 100%;
  }

  .home-page .breakfast-art {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(10px, calc(1.2 * var(--site-vw)), 16px);
  }

  .home-page .breakfast-art img.home-breakfast-art {
    width: min(calc(27 * var(--site-vw)), 408px);
    max-width: 100%;
    margin: clamp(-44px, calc(-4 * var(--site-vw)), -28px) -2px -28px calc(-1.2 * var(--site-vw));
  }

  .home-page .breakfast-copy {
    min-width: 0;
    max-width: 100%;
    padding: clamp(14px, calc(1.6 * var(--site-vw)), 22px) clamp(10px, calc(1.2 * var(--site-vw)), 16px) clamp(14px, calc(1.6 * var(--site-vw)), 22px)
      clamp(18px, calc(2 * var(--site-vw)), 36px);
    box-sizing: border-box;
  }

  .home-page .breakfast-copy p,
  .home-page .breakfast-copy .btn {
    max-width: 100%;
  }
}

.home-page .home-hero-copy {
  z-index: 2;
}

.home-page .home-hero-ink-line {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  margin: clamp(10px, 1.6vh, 16px) 0 0;
}

.home-page .home-exterior-frame {
  z-index: 6;
}

@media (max-width: 900px) {
  .home-page .home-exterior-frame {
    z-index: 2;
  }
}

.home-page svg.home-exterior-art {
  width: 100%;
  height: auto;
}

@media (min-width: 901px) {
  .home-page .home-hero {
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  }

  .home-page .home-exterior-frame {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    justify-self: stretch;
    align-self: center;
    margin: -10px clamp(-140px, calc(-4.8 * var(--site-vw)), -76px) clamp(-140px, calc(-4.8 * var(--site-vw)), -76px)
      clamp(-28px, calc(-1.2 * var(--site-vw)), -18px);
  }

  .home-page svg.home-exterior-art {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 900 / 650;
  }
}

/* Category strip: art + label inside each cell only (matches site.css block) */
.home-page .category-strip {
  position: relative;
  z-index: 5;
  isolation: isolate;
}

.home-page .cat-link {
  display: grid;
  grid-template-rows: 150px auto;
  place-items: center;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  text-align: center;
}

.home-page .cat-link img {
  grid-row: 1;
  align-self: center;
  width: 100%;
  height: 145px;
  max-height: 145px;
  object-fit: contain;
  object-position: center center;
}

/* Category strip vs Spiked: two distinct sections (no photo overlap into nav above) */
.home-page .category-strip + .ink-section-rule {
  position: relative;
  z-index: 4;
}

.home-page .spiked {
  position: relative;
  z-index: 3;
  overflow: visible;
  margin-top: 0;
  padding-top: clamp(10px, calc(1.6 * var(--site-vw)), 22px);
  padding-bottom: clamp(24px, calc(3.5 * var(--site-vw)), 40px);
  isolation: isolate;
}

/* Photo frame sizing/margins: site.css (start-of-day); z-index from styles.css */

.home-page .spiked + .ink-section-rule {
  position: relative;
  z-index: 2;
  margin-top: clamp(-28px, calc(-3 * var(--site-vw)), -12px);
}

.home-page .spiked-copy h2.spiked-script-title {
  line-height: 0.82;
}

.home-page .spiked-title-top {
  display: block;
}

.home-page .spiked-title-fountain {
  display: block;
  margin-left: clamp(56px, calc(10 * var(--site-vw)), 120px);
  transform: rotate(4deg);
  transform-origin: left center;
  color: var(--teal);
}

.home-page .spiked-copy > img {
  width: auto;
  height: clamp(290px, calc(27 * var(--site-vw)), 380px);
  max-width: min(100%, 440px);
  object-fit: contain;
}

@media (min-width: 1100px) {
  .home-page .spiked-copy > img {
    height: clamp(310px, calc(24 * var(--site-vw)), 400px);
  }
}

@media (min-width: 901px) and (max-width: 1099px) {
  .home-page .spiked-copy > img {
    height: clamp(285px, calc(29 * var(--site-vw)), 350px);
  }
}

@media (min-width: 901px) and (max-width: 1050px) {
  .home-page .spiked-copy > img {
    height: clamp(280px, calc(30 * var(--site-vw)), 340px);
  }
}

@media (max-width: 900px) {
  .home-page .spiked {
    overflow: visible;
    margin-top: 0;
    padding-top: clamp(8px, calc(2 * var(--site-vw)), 18px);
  }

  .home-page .spiked-copy > img {
    height: clamp(265px, calc(36 * var(--site-vw)), 310px);
  }
}

/* Come Say Hi */
.visit-band {
  position: relative;
  z-index: 2;
  overflow: visible;
}

@media (max-width: 900px) {
  .visit-cta .sky {
    height: clamp(280px, calc(22 * var(--site-vw)), 420px);
    max-height: 440px;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}

.coffee-art {
  position: relative;
  z-index: 4;
  margin-right: clamp(-20px, calc(-3 * var(--site-vw)), -6px);
}

@media (max-width: 900px) {
  .coffee-art img {
    width: min(100%, clamp(290px, calc(27 * var(--site-vw)), 400px));
    height: auto;
    max-height: clamp(310px, calc(29 * var(--site-vw)), 420px);
    object-fit: contain;
  }
}

.coffee-art .hours-oval {
  margin-top: clamp(-26px, calc(-3 * var(--site-vw)), -14px);
  margin-left: clamp(-44px, calc(-5 * var(--site-vw)), -18px);
  z-index: 5;
}

.contact-panel h2.script {
  font-size: clamp(44px, calc(4.8 * var(--site-vw)), 58px);
  line-height: 0.92;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .contact-panel h2.script {
    white-space: normal;
    font-size: clamp(40px, calc(10.5 * var(--site-vw)), 50px);
  }
}

@media (min-width: 781px) and (max-width: 1080px) {
  .contact-panel h2.script {
    font-size: clamp(42px, calc(4.2 * var(--site-vw)), 52px);
  }
}

/* Visit band — desktop (901px+): bigger cup, Open 24 tucked to contact card, fluid title */
@media (min-width: 901px) {
  .visit-band {
    gap: clamp(18px, calc(2.5 * var(--site-vw)), 42px);
    padding: 38px clamp(24px, calc(4 * var(--site-vw)), 70px);
    min-height: 390px;
    align-items: center;
  }

  .visit-cta .sky {
    width: min(110%, 100%);
    max-width: 100%;
    height: clamp(245px, calc(16 * var(--site-vw)), 270px);
    max-height: 270px;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .coffee-art {
    min-width: 0;
    max-width: 100%;
    margin-right: clamp(-28px, calc(-2.2 * var(--site-vw)), -10px);
    z-index: 2;
    justify-self: end;
    align-self: center;
  }

  .coffee-art img {
    display: block;
    width: min(100%, 338px);
    max-width: min(100%, clamp(278px, calc(24 * var(--site-vw)), 338px));
    height: auto;
    max-height: 328px;
    margin-inline: 0 0;
    object-fit: contain;
    object-position: center center;
  }

  .coffee-art .hours-oval {
    margin-top: clamp(-40px, calc(-3.8 * var(--site-vw)), -24px);
    margin-left: clamp(-118px, calc(-9.5 * var(--site-vw)), -68px);
    margin-right: clamp(-52px, calc(-4 * var(--site-vw)), -24px);
    z-index: 7;
  }

  .contact-panel {
    position: relative;
    z-index: 5;
    height: auto;
    min-height: 0;
    align-self: center;
  }

  .contact-panel-inner {
    padding-bottom: 18px;
  }

  .contact-panel h2.script {
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .contact-panel h2.script {
    font-size: clamp(34px, calc(3.35 * var(--site-vw)), 42px);
  }
}

@media (min-width: 1041px) and (max-width: 1180px) {
  .contact-panel h2.script {
    font-size: clamp(38px, calc(3.65 * var(--site-vw)), 48px);
  }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .contact-panel h2.script {
    font-size: clamp(42px, calc(4.05 * var(--site-vw)), 54px);
  }
}

@media (min-width: 1321px) {
  .contact-panel h2.script {
    font-size: clamp(48px, calc(4.8 * var(--site-vw)), 58px);
  }
}

/* Override generic spiked overflow clip on homepage */
@media (max-width: 900px) {
  .home-page .spiked {
    overflow: visible;
  }
}

@media (min-width: 901px) {
  .home-page .breakfast-food-frame {
    position: relative;
    z-index: 1;
    align-self: end;
    margin-top: clamp(48px, 7vh, 92px);
    margin-bottom: clamp(6px, 1.2vh, 16px);
  }
}

/* All-day breakfast photo: fill hand-cut frame (no legacy tight JPG zoom) */
.home-page .breakfast-food-frame {
  overflow: hidden;
}

.home-page .breakfast-food-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: none;
  transform-origin: center center;
}

/* Spiked bar photo: size from SVG viewBox — never stretch to copy column height */
@media (min-width: 901px) {
  .home-page .spiked {
    align-items: center;
  }

  .home-page .spiked-photo-frame {
    align-self: center;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    margin: 0 -18px 0 -64px;
  }

  .home-page svg.spiked-photo-art {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    aspect-ratio: 760 / 470;
  }
}

@media (max-width: 900px) {
  .home-page .spiked-photo-frame {
    min-height: 390px;
    margin: 0 -24px 0 -34px;
  }
}

@media (max-width: 560px) {
  .home-page .spiked-photo-frame {
    min-height: 340px;
    margin: 0 -24px 0 -28px;
  }
}

/* ==========================================================================
   Private Events page — responsive refinements (scoped to .events-page)
   ========================================================================== */

.events-page .events-hero + .ink-section-rule,
.events-page .host-grid + .ink-section-rule {
  display: none;
}

.events-page .events-hero-spark {
  background: #fff;
  filter: drop-shadow(1px 1px 0 rgba(85, 16, 22, 0.45));
}

.events-page .events-title-book {
  width: min(580px, 96%);
  margin: -16px 0 -42px -12px;
}

.events-page .events-title-book text {
  font-size: clamp(138px, calc(11.5 * var(--site-vw)), 152px);
}

.events-page .events-title-book .events-book-initial {
  font-size: 1.34em;
}

.events-page .events-hero-meta {
  flex-wrap: wrap;
}

.events-page .host-card:nth-child(1) img {
  object-position: center 42%;
}

.events-page .host-card:nth-child(2) img {
  object-position: center 40%;
}

.events-page .check-grid .check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.events-page .check-grid .check-mark {
  flex-shrink: 0;
  font-style: normal;
  line-height: 1.35;
}

.events-page .event-night .event-night-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: none;
  line-height: 0.95;
}

.events-page .event-night-your {
  display: block;
  transform: rotate(-0.8deg);
  transform-origin: left center;
}

.events-page .event-night-our {
  display: block;
  margin-left: clamp(36px, calc(10 * var(--site-vw)), 108px);
  font-family: var(--script);
  font-size: 1.08em;
  font-weight: 400;
  text-transform: none;
  transform: rotate(-2.8deg);
  transform-origin: left center;
  letter-spacing: 0.02em;
}

@media (min-width: 901px) {
  .events-page #space.scene-card {
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(22px, calc(2.4 * var(--site-vw)), 36px);
    align-items: center;
  }

  .events-page #space.scene-card > div:first-child {
    padding-block: clamp(8px, calc(1.2 * var(--site-vw)), 18px);
  }

  .events-page #space .scene-gallery {
    min-height: clamp(300px, calc(22 * var(--site-vw)), 380px);
    margin: 0;
    overflow: visible;
  }

  .events-page #space .scene-shot-booths {
    width: 36%;
    height: clamp(240px, calc(18 * var(--site-vw)), 300px);
    top: 12px;
    left: -1%;
  }

  .events-page #space .scene-shot-bar {
    width: 50%;
    height: clamp(270px, calc(20 * var(--site-vw)), 330px);
    left: 26%;
    top: -8px;
  }

  .events-page #space .scene-shot-room {
    width: 36%;
    height: clamp(250px, calc(18 * var(--site-vw)), 310px);
    right: -2%;
    top: 18px;
  }
}


@media (max-width: 989px) {
  .events-page .camera-ready {
    height: auto;
    min-height: 0;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .events-page .camera-ready > img {
    height: clamp(260px, calc(42 * var(--site-vw)), 360px);
  }

  .events-page .camera-ready .copy {
    padding-bottom: clamp(32px, calc(6 * var(--site-vw)), 56px);
  }
}

@media (min-width: 901px) and (max-width: 1210px) {
  .events-page .catering {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.15fr) minmax(220px, 0.85fr);
    padding-left: clamp(72px, calc(7 * var(--site-vw)), 108px);
    gap: clamp(12px, calc(2 * var(--site-vw)), 28px);
  }

  .events-page .catering > img.catering-waitress {
    position: absolute;
    left: clamp(-8px, calc(0.5 * var(--site-vw)), 12px);
    top: auto;
    bottom: -20px;
    width: min(300px, calc(26 * var(--site-vw)));
    height: auto;
    max-height: 460px;
    object-fit: contain;
    object-position: left bottom;
    margin: 0;
  }

  .events-page .catering-copy {
    padding-inline: clamp(8px, calc(1.5 * var(--site-vw)), 20px);
  }
}

@media (max-width: 1049px) {
  .events-page .catering {
    overflow: visible;
  }

  .events-page .catering-art {
    overflow: visible;
    padding-bottom: 12px;
    justify-items: center;
  }

  .events-page .catering-art .btn {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 14px;
    justify-self: center;
    max-width: calc(calc(100 * var(--site-vw)) - 48px);
  }
}

@media (max-width: 900px) {
  .events-page .catering {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "art"
      "waitress";
    grid-template-rows: auto auto auto;
    padding: 36px clamp(20px, calc(5 * var(--site-vw)), 28px) 0;
    min-height: 0;
    overflow: visible;
  }

  .events-page .catering > .catering-copy {
    grid-area: copy;
  }

  .events-page .catering > .catering-art {
    grid-area: art;
    min-height: 0;
    align-self: center;
  }

  .events-page .catering-art img {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .events-page .catering > img.catering-waitress {
    position: relative;
    grid-area: waitress;
    top: auto;
    left: auto;
    width: min(360px, calc(100% + clamp(16px, calc(4 * var(--site-vw)), 24px)));
    max-width: 100%;
    height: auto;
    margin: 8px 0 -1px calc(-1 * clamp(20px, calc(5 * var(--site-vw)), 28px) - clamp(10px, calc(2.5 * var(--site-vw)), 16px));
    object-fit: contain;
    object-position: left bottom;
    justify-self: start;
    align-self: end;
  }
}

@media (min-width: 560px) and (max-width: 900px) {
  .events-page .event-night .night-copy {
    top: 10%;
    right: clamp(4%, calc(3 * var(--site-vw)), 8%);
    max-width: min(46%, 320px);
  }

  .events-page .event-night img {
    object-position: 38% 48%;
  }
}

@media (max-width: 559px) {
  .events-page .event-night .night-copy {
    top: 8%;
    right: 5%;
    max-width: 52%;
  }

  .events-page .event-night img {
    object-position: 42% 52%;
  }
}

/* Balanced shared header with a centered logo and unboxed hours. */
.home-page .home-hero-script { position: relative; }
.home-page .home-hero-copy { position: relative; }
.home-page .home-hero-copy::before {
  content: ""; position: absolute; pointer-events: none;
  inset: auto;
  width: 52px; height: 70px; left: 64%; top: 0;
  background: var(--teal); transform: rotate(-8deg);
  clip-path: polygon(50% 0,56% 35%,80% 14%,65% 43%,100% 50%,65% 57%,82% 85%,56% 65%,50% 100%,44% 65%,18% 85%,35% 57%,0 50%,35% 43%,20% 14%,44% 35%);
}
.home-page .home-hero-script::before,
.home-page .home-hero-script::after {
  content: ""; position: absolute; pointer-events: none;
  clip-path: polygon(50% 0,56% 35%,80% 14%,65% 43%,100% 50%,65% 57%,82% 85%,56% 65%,50% 100%,44% 65%,18% 85%,35% 57%,0 50%,35% 43%,20% 14%,44% 35%);
}
.home-page .home-hero-script::before { width: 38px; height: 52px; right: 10%; top: 21%; background: var(--red); transform: rotate(12deg); }
.home-page .home-hero-script::after { width: 25px; height: 36px; left: 8%; top: 72%; background: var(--teal); transform: rotate(-14deg); }
@media (max-width: 600px) {
  .home-page .home-hero-copy::before { width: 36px; height: 48px; left: 76%; top: 0; }
  .home-page .home-hero-script::before { width: 25px; height: 35px; right: 2%; }
  .home-page .home-hero-script::after { width: 18px; height: 26px; left: 4%; }
}
/* Menu hero preview: food variety with a quiet cream wash behind the title. */
#menu > .hero { height: 500px; overflow: visible; isolation: isolate; }
#menu .hero-photo {
  inset: 0 0 -190px; margin-left: 0;
  background-image: linear-gradient(90deg, var(--cream) 0%, rgba(255,249,233,.97) 20%, rgba(255,249,233,.7) 35%, rgba(255,249,233,0) 58%), var(--optimized-image-33);
  background-size: cover;
  background-position: center, center 76%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}
#menu > .menu-section-nav { position: relative; z-index: 2; padding-top: 24px; padding-bottom: 24px; }
#menu > .menu-section-nav a { background: var(--cream); }
#menu > .hero::after { content: none; }
@media (min-width: 861px) {
  #menu > .hero .hero-copy { align-self: center; padding-top: 20px; padding-bottom: 20px; }
}
@media (max-width: 860px) {
  #menu > .hero { height: 555px; grid-template-rows: 245px 310px; }
  #menu > .hero .hero-copy { padding-top: 40px; }
  #menu .hero-photo { inset: 235px 0 -160px; background-image: linear-gradient(180deg, var(--cream), rgba(255,249,233,0) 28%), var(--optimized-image-33); background-size: cover; background-position: center, center 75%; }
}
/* One diner-frame palette, with each photo retaining its own cut silhouette. */
.home-page .breakfast-food-frame { padding: 0; background: transparent; clip-path: none; overflow: visible; box-shadow: none; filter: drop-shadow(0 10px 12px rgba(63,32,26,.16)); }
.breakfast-photo-art { display: block; width: 100%; height: 100%; overflow: visible; }
.breakfast-frame-outer, .breakfast-frame-gap, .breakfast-frame-inner { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.breakfast-frame-outer { stroke: var(--red); stroke-width: 12px; }
.breakfast-frame-gap { stroke: var(--cream); stroke-width: 7px; }
.breakfast-frame-inner { stroke: #0b4e58; stroke-width: 2px; }
.visit-page .visit-frame-outer,
.about-origin-outer, .scene-frame-outer { fill: none; stroke: var(--red); stroke-width: 18px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.visit-page .visit-frame-gap,
.about-origin-gap, .scene-frame-gap { fill: none; stroke: var(--cream); stroke-width: 11px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.visit-page .visit-frame-inner,
.about-origin-inner, .scene-frame-inner { fill: none; stroke: #0b4e58; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.visit-page .visit-exterior-frame { filter: drop-shadow(0 10px 14px rgba(75,43,20,.16)); }
.detail-photo::before { background: var(--red); }
.detail-photo::after { inset: 3px; background: var(--cream); }
.detail-photo img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); padding: 2px; background: #0b4e58; }
/* Preview a calmer hero while retaining the original illustration asset. */
.home-page .home-hero::before { content: none; background-image: none; }
/* A restrained sign-painted offset, previewed on the homepage title only. */
.home-page .home-hero-script .home-script-line,
#menu .hero .script-line,
.visit-page .visit-script-title .visit-title-line {
  stroke: var(--cream);
  stroke-width: 1.25px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  filter: drop-shadow(2.5px 2.5px 0 #c6ad79);
}
.events-page .events-title-book text,
.events-page .events-title-diner text,
.about-page .about-hero-stack,
.about-page .about-script-line {
  stroke: var(--red);
  stroke-width: 1.25px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  filter: drop-shadow(2.5px 2.5px 0 var(--red));
}
body, body.home-page { overflow-x: clip; overflow-y: visible; }
.opening-announcement { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 11px 20px; background: var(--red); color: var(--cream); text-align: center; font: 16px/1.35 var(--copy); }
.opening-announcement strong { font: 18px/1.35 var(--display); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 600px) {
  .opening-announcement { flex-direction: column; gap: 2px; padding: 10px 16px; font-size: 14px; }
  .opening-announcement strong { font-size: 16px; }
}
.header-shell { position: sticky; top: 0; z-index: 40; height: 160px; pointer-events: none; }
.header-shell .topbar { pointer-events: auto; }
html { scroll-padding-top: 104px; }
.home-page .topbar { border-bottom: 0; }
.topbar.topbar--simple {
  height: 160px;
  grid-template-columns: 1fr 1fr 260px 1fr 1fr;
  grid-template-rows: 112px 24px;
  gap: 0 24px;
  padding: 12px clamp(24px, calc(3 * var(--site-vw)), 48px);
}
.topbar--simple::before, .topbar--simple::after { content: none; }
.topbar--simple .menu-toggle { display: none; }
.topbar--simple .brand { grid-column: 3; grid-row: 1; height: 112px; margin: 0; align-self: center; justify-self: center; }
.topbar--simple .brand img { width: 250px; height: 112px; }
.topbar--simple .nav { display: contents; font-size: 22px; }
.topbar--simple .nav > a { grid-row: 1; justify-self: stretch; align-self: center; justify-content: center; text-align: center; white-space: nowrap; padding: 20px 10px; transition: color .18s ease; }
.topbar--simple .nav > a:hover,
.topbar--simple .nav > a:focus-visible { background: transparent; color: var(--red); }
.topbar--simple #site-nav > a::after { content: none; }
.topbar--simple .nav-label { position: relative; display: inline-block; }
.topbar--simple .nav-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.topbar--simple .nav > a:hover .nav-label::after,
.topbar--simple .nav > a:focus-visible .nav-label::after,
.topbar--simple .nav > a[aria-current="page"] .nav-label::after { transform: scaleX(1); }
.topbar--simple .nav > a:nth-child(1) { grid-column: 1; }
.topbar--simple .nav > a:nth-child(2) { grid-column: 2; }
.topbar--simple .nav > a:nth-child(3) { grid-column: 4; }
.topbar--simple .nav > a:nth-child(4) { grid-column: 5; }
.header-hours { grid-column: 3; grid-row: 2; text-align: center; color: var(--red); font: 14px var(--sans); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.header-hours span { margin-inline: 5px; }
.topbar.topbar--simple { transition: height .22s ease, grid-template-rows .22s ease, background-color .22s ease, box-shadow .22s ease; }
.topbar--simple .brand, .topbar--simple .brand img { transition: width .22s ease, height .22s ease; }
.topbar--simple .header-hours { transition: opacity .15s ease; }
.topbar.topbar--simple.is-compact { height: 88px; grid-template-rows: 64px 0; background: rgba(255, 249, 233, .98); box-shadow: 0 4px 16px rgba(35, 26, 15, .1); }
.topbar--simple.is-compact .brand, .topbar--simple.is-compact .brand img { height: 64px; }
.topbar--simple.is-compact .brand img { width: 150px; }
.topbar--simple.is-compact .header-hours { opacity: 0; visibility: hidden; }
.topbar.is-compact + .ink-section-rule { display: none; }
.menu-section-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding: 24px 20px 0; position: relative; z-index: 2; font: 16px var(--sans); text-transform: uppercase; }
.menu-section-nav a { padding: 10px 16px; border: 1px solid var(--teal); border-radius: 4px; background: var(--cream); }
.menu-section-nav a:hover { color: var(--red); }
@media (max-width: 1000px) {
  .header-shell { height: 122px; }
  .topbar.topbar--simple { height: 122px; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: 80px 18px; gap: 0 8px; padding: 12px 16px; }
  .topbar--simple .brand { grid-column: 2; justify-self: center; height: 80px; }
  .topbar--simple .brand img { width: 180px; height: 80px; }
  .topbar--simple .menu-toggle { display: flex; grid-column: 3; grid-row: 1; }
  .topbar--simple .nav { display: none; }
  .topbar--simple .nav-left.open { display: flex; position: absolute; grid-column: 1 / -1; top: 100%; left: 0; right: 0; gap: 6px; padding: 16px 24px; font-size: 17px; align-items: flex-start; background: var(--cream); }
  .header-hours { grid-column: 1 / -1; font-size: 12px; }
  .topbar.topbar--simple .nav-left.open > a { width: 100%; padding: 16px; font-size: 21px; justify-content: flex-start; transform: none; }
  .topbar.topbar--simple .nav-left.open > a:hover,
  .topbar.topbar--simple .nav-left.open > a:focus-visible { background: transparent; color: var(--red); transform: none; }
  .topbar.topbar--simple .nav-left.open > a[aria-current="page"] { color: var(--red); }
  .topbar.topbar--simple.is-compact { height: 76px; min-height: 76px; grid-template-rows: 52px 0; padding: 12px 16px; }
  .topbar.topbar--simple, .topbar--simple .brand, .topbar--simple .brand img { transition: background-color .22s ease, box-shadow .22s ease; }
  .topbar--simple.is-compact .brand, .topbar--simple.is-compact .brand img { height: 52px; }
  .topbar--simple.is-compact .brand img { width: 124px; }
  .topbar--simple .nav-left.open { max-height: calc(100dvh - 122px); }
  .topbar--simple.is-compact .nav-left.open { max-height: calc(100dvh - 76px); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar--simple .nav > a, .topbar--simple .nav-label::after { transition: none; }
  .topbar.topbar--simple, .topbar--simple .brand, .topbar--simple .brand img, .topbar--simple .header-hours { transition: none; }
}
/* Homepage-only variant of the shared contact section. */
.home-page .visit-band--painted {
  isolation: isolate;
  background: none;
  padding-block: 48px;
}

.home-page .visit-band--painted::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -160px 0 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,249,233,.78), rgba(255,249,233,.38) 55%, rgba(255,249,233,.12)),
    var(--optimized-image-45) center 58% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 240px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 240px);
}

.home-page .visit-band--painted .visit-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.home-page .visit-band--painted .visit-cta-copy {
  padding: 24px;
  max-width: 430px;
  background: rgba(255,249,233,.94);
  border-radius: 8px;
  box-shadow: 0 5px 24px rgba(62,44,26,.12);
}

@media (max-width: 900px) {
  .home-page .visit-band--painted::before {
    top: -100px;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  }

  .home-page .visit-band--painted .visit-cta {
    align-items: center;
  }

  .home-page .visit-band--painted .visit-cta-copy {
    padding: 20px;
  }
}

/* Consistent interior gutters: artwork stays inside the same padded canvas. */
#menu .category {
  padding: clamp(24px, calc(2 * var(--site-vw)), 32px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto auto;
  gap: 20px;
  align-items: center;
}

#menu .category .copy {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  padding: 0;
}

#menu .category > img {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: 240px;
  margin: 0;
  transform: none;
  object-fit: contain;
}

#menu .category .copy p,
#menu .category .copy ul {
  width: 100%;
  max-width: 100%;
}

#menu .category .custom-script-heading {
  margin: 18px 0 16px;
}

@media (max-width: 600px) {
  #menu .category {
    padding: 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
  }

  #menu .category > img {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 280px);
    justify-self: center;
    max-height: 220px;
  }

  #menu .dessert-card .dessert-list {
    grid-row: 3;
  }
}

/* Give the menu cards a consistent amount of breathing room. */
#menu > .menu-grid {
  gap: clamp(24px, calc(2 * var(--site-vw)), 32px);
  padding-top: clamp(24px, calc(2 * var(--site-vw)), 32px);
  padding-bottom: clamp(24px, calc(2 * var(--site-vw)), 32px);
}

#menu .lower-grid {
  gap: clamp(24px, calc(2 * var(--site-vw)), 32px);
}

#menu > .favorites {
  margin-top: 0;
  padding: clamp(24px, calc(2 * var(--site-vw)), 32px);
  column-gap: 24px;
}

#menu > .dietary {
  background: transparent;
  border: 0;
  border-image: none;
}

#menu > .dietary::before,
#menu > .dietary::after {
  display: none;
}

@media (max-width: 860px) {
  #menu > .menu-grid {
    gap: 20px;
    padding-block: 20px;
  }

  #menu .lower-grid {
    gap: 20px;
  }

  #menu > .favorites {
    padding: 20px;
    gap: 20px;
  }
}

footer .mailing button {
  width: auto;
  min-width: 54px;
  flex-shrink: 0;
  padding: 8px 12px;
  font: 14px/1 var(--sans);
  text-transform: uppercase;
  cursor: pointer;
}

footer .mailing button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.footer-logo:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* Let the final About streetscape meet the footer without divider lines. */
.scene-carousel-controls { display: none; }
@media (max-width: 860px) {
  .about-page .about-hero-built { min-height: 0; }
  .about-page .about-hero-copy { width: 100%; padding: 48px 28px 64px; }
  .about-page .about-hero-copy h1 { margin: 0 0 28px; }
  .about-page .about-hero-copy h1 .about-hero-a { font-size: clamp(44px, 11vw, 64px); line-height: 1; }
  .about-page .about-hero-copy h1 .about-hero-worth { margin: 4px 0 0; font-size: clamp(42px, 10vw, 60px); line-height: 1; }
  .about-page .about-hero-copy h1 span.about-script-title { width: 100%; max-width: 460px; margin: 10px 0 0; }
  .about-page .about-script-line { font-size: 128px; }
  .about-page .about-hero-copy p { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.5; }
  .about-page .hero-about-spark { display: none; }
  .about-page .origin-visual { display: flex; flex-direction: column; min-height: 0; padding: 0 0 32px; }
  .about-page .origin-note { position: static; order: -1; margin: 0 0 24px; font-size: clamp(40px, 10vw, 56px); line-height: .95; transform: none; text-align: left; }
  .about-page .origin-note br:nth-of-type(1), .about-page .origin-note br:nth-of-type(3) { display: none; }
  .about-page .about-photo-card { width: 100%; height: auto; margin: 0; }
  .about-page .about-origin-frame { height: auto; width: 100%; }
  .about-page .origin-cocktail { width: 110px; height: auto; bottom: 0; right: 0; }
  .about-page .origin-spark { display: none; }
  .visit-page .visit-copy h1.visit-script-title { width: min(340px, calc(100% - 64px)); margin: 18px 32px 0; transform: none; }
  .visit-page .visit-hero { row-gap: 8px; }
  .visit-page .visit-hero .visit-exterior-frame { margin-top: 0; min-height: 0; height: auto; }
  .visit-page .visit-exterior { height: auto; }
  .events-page #space .scene-gallery { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; min-height: 0; margin: 20px 0 0; padding: 8px 0 16px; }
  .events-page #space .scene-shot { position: relative; inset: auto; flex: 0 0 88%; width: 88%; height: auto; transform: none; margin: 0; scroll-snap-align: start; }
  .events-page #space .scene-shot-art { width: 100%; height: auto; }
  .events-page #space .scene-shot-bar { order: -1; }
  .events-page #space { gap: 0; }
  .scene-carousel-controls { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 20px; }
  .scene-carousel-controls button { min-width: 44px; min-height: 44px; background: var(--cream); border: 1px solid var(--teal); border-radius: 4px; color: var(--ink); font-size: 22px; }
}
.footer-mobile-nav, .footer-instagram-label { display: none; }
@media (max-width: 600px) {
  footer { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 28px 24px 20px; }
  footer .footer-logo { width: 150px; height: auto; align-self: center; margin: 0; }
  footer .footer-logo img { width: 150px; height: auto; }
  footer .footer-desktop-nav { display: none; }
  footer .footer-mobile-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; border: 0; padding: 0; margin: 0; }
  footer .footer-mobile-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 17px; border-bottom: 1px solid rgba(23,123,130,.18); }
  footer .mailing { width: 100%; border: 0; padding: 0; margin: 0; }
  footer .mailing > label:first-child { display: block; margin-bottom: 10px; font-size: 16px; }
  footer .mailing > div { display: flex; width: 100%; }
  footer .mailing input { flex: 1; min-width: 0; width: 100%; min-height: 48px; font-size: 16px; }
  footer .mailing button { min-height: 48px; min-width: 72px; }
  footer .social { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; margin: 0; border: 0; }
  footer .social .instagram-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: auto; font: 16px var(--copy); }
  footer .social .instagram-link svg { width: 24px; height: 24px; flex: none; }
  footer .footer-instagram-label { display: inline; color: var(--ink); font-size: 16px; font-style: normal; text-transform: none; }
  footer .social p { display: flex; align-items: center; gap: 16px; margin: 0; }
  footer .social p a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
}
.about-page main > .ink-section-rule { display: none; }
.about-page main { padding-bottom: 0; }
.about-page .about-neighborhood-built { border: 0; padding-bottom: 0; }
.about-page .ink-section-rule:has(+ .about-neighborhood-built),
.about-page .about-neighborhood-built + .ink-section-rule,
.about-page main + .ink-section-rule { display: none; }
.about-page .about-neighborhood-built > img.neighborhood-wall-art {
  margin-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 100%);
}
/* Shared desktop canvas: last so base width rules cannot override it. */
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden; }
.event-form .form-policy a { text-decoration: underline; }
.home-page .home-hero .hero-actions .btn.home-directions-btn { background: var(--teal); border-color: var(--teal); color: #fff; }
.home-page .hero-actions .home-hero-instagram { gap: 8px; }
.home-hero-instagram svg { width: 20px; height: 20px; flex: none; }
.events-page #event-form .event-form form,
.events-page #event-form .event-form label { min-width: 0; }
.events-page #event-form .event-form input,
.events-page #event-form .event-form select,
.events-page #event-form .event-form textarea { box-sizing: border-box; min-width: 0; max-width: 100%; }
.events-page #event-form input[type="date"] { display: block; width: 100%; min-height: 44px; -webkit-appearance: none; appearance: none; text-align: left; }
.events-page #event-form input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.35em; }
@media (max-width: 860px) {
  .about-page .detail-collage { position: relative; display: flex; gap: 16px; width: 100%; height: auto; min-height: 0; margin: 20px 0 0; padding: 8px 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .about-page .detail-collage .detail-photo { position: relative; inset: auto; flex: 0 0 88%; width: 88%; height: auto; aspect-ratio: 4 / 3; margin: 0; transform: none; scroll-snap-align: start; --detail-cut: polygon(0 0,100% 0,100% 100%,0 100%); }
  .about-page .details-inner { min-width: 0; }
  .about-page .details-inner > .scene-carousel-controls { width: 100%; }
  .events-page #event-form .event-form input,
  .events-page #event-form .event-form select,
  .events-page #event-form .event-form textarea { font-size: 16px; }
}
.catering-mobile-cta { display: none; }
@media (max-width: 600px) {
  #menu .category { gap: 16px; }
  #menu .category .custom-script-heading { width: min(100%, 270px); height: 116px; margin: 0 0 16px; }
  #menu .accomp-card .custom-script-heading,
  #menu .dessert-card .custom-script-heading { width: 100%; height: 82px; }
  #menu .category .copy p { font-size: 17px; line-height: 1.45; min-height: 0; margin: 0 0 20px; }
  #menu .category ul { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; width: 100%; padding-top: 16px; margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: .4px; white-space: normal; }
  #menu .category li::after { display: none; }
  #menu .category > img { width: min(100%, 190px); max-height: 155px; grid-row: auto; }
  #menu .category .spark { display: none; }
  #menu .dessert-card .dessert-list { grid-row: 2; }
  #menu .dessert-card > img { grid-row: 3; }
  .events-page .catering { row-gap: 24px; }
  .events-page .catering-copy .section-title { font-size: clamp(36px, 9vw, 48px); line-height: 1.08; margin-bottom: 22px; }
  .events-page .catering-copy .section-title span { display: block; }
  .events-page .catering-copy .body-copy { font-size: 17px; line-height: 1.5; }
  .events-page .catering-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; font-size: 17px; line-height: 1.4; letter-spacing: .3px; text-align: left; margin-block: 22px; }
  .events-page .catering-categories i,
  .events-page .catering-categories br { display: none; }
  .events-page .catering-categories span { display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap; }
  .events-page .catering-categories span::after { content: '•'; color: var(--red); }
  .events-page .catering-mobile-cta { display: inline-flex; }
  .events-page .catering-art .btn { display: none; }
  .events-page .catering-art img { width: min(100%, 260px); }
}
@media (max-width: 900px) {
  .events-page .event-night { height: 440px; }
  .events-page .event-night::after { background: linear-gradient(90deg, rgba(9,11,11,0) 0%, rgba(9,11,11,.12) 30%, rgba(9,11,11,.72) 53%, rgba(9,11,11,.88) 100%); }
  .events-page .event-night .night-copy { top: 50%; right: 24px; width: 49%; max-width: 300px; transform: translateY(-50%); text-align: left; }
  .events-page .event-night .event-night-title { margin: 0 0 24px; gap: 10px; font-size: clamp(30px, 7.5vw, 48px); line-height: 1.05; letter-spacing: .01em; }
  .events-page .event-night-your,
  .events-page .event-night-our { white-space: nowrap; margin-left: 0; transform: none; }
  .events-page .event-night-our { font-size: 1.18em; }
  .events-page .event-night .address { font-size: 16px; line-height: 1.45; letter-spacing: .035em; margin: 0 0 22px; }
  .events-page .event-night .btn { width: 100%; min-width: 0; padding: 14px 10px; font-size: 16px; letter-spacing: .025em; text-align: center; }
}
.home-page .photography-note { margin: 0; padding: 14px 24px 20px; text-align: center; color: var(--teal); background: var(--cream); font: italic 14px/1.5 var(--copy); }
.event-form output { font: 16px/1.5 var(--copy); }
button:disabled { cursor: wait; opacity: .65; }
@media (min-width: 1601px) {
  html { background: #dcd3c2; }
  body {
    width: 100%;
    max-width: 1600px;
    min-height: 100vh;
    margin-inline: auto;
    border-inline: 1px solid rgba(23, 123, 130, 0.32);
    box-shadow: 0 18px 50px rgba(62, 44, 26, 0.18);
  }
}





/* Optimized background variants */
:root { --optimized-image-33: url("assets/pages/event-catering-food-table.webp"); --optimized-image-45: url("assets/right-hand-wall.webp"); --optimized-image-46: url("assets/pages/home-hero-skyline.webp"); }
@media (max-width: 600px) { :root { --optimized-image-33: url("assets/pages/event-catering-food-table-mobile.webp"); --optimized-image-45: url("assets/right-hand-wall-mobile.webp"); --optimized-image-46: url("assets/pages/home-hero-skyline-mobile.webp"); } }
/* End optimized background variants */