a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:3px solid rgba(215,137,145,.95);outline-offset:4px}

.gallery-card.image-fallback{background:linear-gradient(145deg,#2b2220,#4a3534)}
.gallery-card.image-fallback::before{content:"ROBY'S";position:absolute;inset:auto auto 18px 18px;z-index:1;color:rgba(255,255,255,.72);font:600 1rem var(--display);letter-spacing:.14em}
.gallery-card.image-fallback img{filter:saturate(.7) brightness(.68);transform:scale(1.02)}

.menu-icon{width:78px;height:78px;overflow:hidden;border:0;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:50%;box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px rgba(215,171,91,.28);font-size:0;color:transparent;transition:transform .25s,box-shadow .25s}
.menu-card:nth-child(1) .menu-icon{background-image:url("src/menu-icons/hot.svg")}
.menu-card:nth-child(2) .menu-icon{background-image:url("src/menu-icons/cold.svg")}
.menu-card:nth-child(3) .menu-icon{background-image:url("src/menu-icons/tea.svg")}
.menu-card:nth-child(4) .menu-icon{background-image:url("src/menu-icons/refreshers.svg")}
.menu-card:nth-child(5) .menu-icon{background-image:url("src/menu-icons/dessert.svg")}
.menu-card:nth-child(6) .menu-icon{background-image:url("src/menu-icons/food.svg")}
.menu-card:hover .menu-icon{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 0 1px rgba(236,195,115,.46)}

/* The generated wordmark is asymmetric around the red O: BY'S is wider than R.
   Size the lockup to its visible bounds and offset the O so the visible R aligns
   with the same container edge as the hero copy. Center the subtitle under the
   complete ROBY'S word, not under the O. */
.site-header .brand-copy{width:132px;align-items:flex-start}
.site-header .brand-copy strong{margin-right:0;margin-left:25px}
.site-header .brand-copy small{width:100%;margin-top:4px!important;font-size:.54rem!important;letter-spacing:.20em!important;text-align:center;text-indent:.20em}

[inert]{pointer-events:none;user-select:none}
.lightbox button:focus-visible{outline-color:#fff}

@media(max-width:680px){
  .mobile-cta a:focus-visible{outline-offset:2px}
  .menu-icon{width:54px;height:54px;box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 0 1px rgba(215,171,91,.3)}
  .site-header .brand-copy{display:flex!important;width:106px}
  .site-header .brand-copy strong{margin-left:22px}
  .site-header .brand-copy small{display:block!important;margin-top:3px!important;font-size:.46rem!important;letter-spacing:.14em!important;text-indent:.14em}
}

@media(max-width:390px){
  .menu-icon{width:48px;height:48px}
  .site-header .brand-copy{display:flex!important;width:90px}
  .site-header .brand-copy strong{margin-left:19px}
  .site-header .brand-copy small{font-size:.46rem!important;letter-spacing:.11em!important;text-indent:.11em}
}

/* Manual QA: protect hero copy from the bright cup artwork on short phones. */
@media(max-width:430px) and (max-height:700px){
  .hero-overlay{background:linear-gradient(180deg,rgba(17,10,9,.16) 0%,rgba(17,10,9,.3) 38%,rgba(17,10,9,.68) 68%,rgba(17,10,9,.9) 100%)}
  .hero h1{font-size:clamp(3rem,15vw,3.6rem);line-height:.9}
  .hero-text{max-width:21rem;font-size:.8rem;line-height:1.3;text-shadow:0 2px 12px rgba(0,0,0,.82)}
  .hero-actions{gap:8px;margin-top:12px}
  .hero-actions .button{min-height:44px}
  .hero-meta{display:none}
}

@media(prefers-reduced-motion:reduce){.menu-icon{transition:none}}