/* Selected mobile reference. Only new elements are hidden outside phone width. */
.landing .mobile-selected-header,
.landing .hero .mobile-selected-delivery,
.landing .mobile-selected-menu-label,
.landing .mobile-selected-scene-space { display: none; }

@media (max-width: 599px) {
  .landing { --paper: #fae9d3; --hero-paper: #fbead4; }
  .landing .top-scene {
    display: block;
    --scene-lift: clamp(34px, 10vw, 42px);
    height: calc(100vw * 1854 / 848 + clamp(0px, 480px - 120vw, 48px) - var(--scene-lift));
    min-height: 0;
    overflow: visible;
    background: var(--hero-paper) url('/assets/landing/mobile-hero-fast-20261024/scene-848.webp') center calc(0px - var(--scene-lift)) / 100% calc(100% + var(--scene-lift)) no-repeat;
  }
  .landing .top-scene > .hero-background-picture,
  .landing .top-scene > .site-header,
  .landing .hero .hero-art,
  .landing .hero .hero-branch,
  .landing .hero .hero-vertical { display: none; }
  .landing .mobile-selected-header {
    position: absolute;
    inset: max(10px, env(safe-area-inset-top, 0px)) 16px auto 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 5;
  }
  .landing .mobile-selected-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #17150f;
    background: none;
    text-shadow: 0 1px 3px #fae9d3, 0 0 3px #fae9d3;
  }
  .landing .mobile-selected-brand > img { width: 74px; height: auto; flex: none; filter: drop-shadow(0 0 2px #fae9d3); }
  .landing .mobile-selected-brand > span {
    display: block;
    padding-left: 10px;
    border-left: 1px solid #85664680;
    font: 400 14px/1.2 'Prata', serif;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .landing .mobile-selected-brand small {
    display: block;
    margin-top: 6px;
    font: 400 7px/1.3 'Onest', sans-serif;
    letter-spacing: .1em;
  }
  .landing :is(.mobile-selected-toggle, .mobile-selected-close) {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #17150f;
    cursor: pointer;
  }
  .landing :is(.mobile-selected-toggle, .mobile-selected-close) img { width: 27px; height: 27px; filter: drop-shadow(0 0 2px #fbead4) drop-shadow(0 0 2px #fbead4); }
  .landing .mobile-selected-toggle { position: relative; isolation: isolate; }
  .landing .mobile-selected-toggle::before { content: ''; position: absolute; inset: 8px; z-index: -1; background: radial-gradient(ellipse, #fbead4d9 20%, #fbead480 45%, transparent 72%); filter: blur(2px); pointer-events: none; }
  .landing :is(.mobile-selected-toggle, .mobile-selected-close):focus-visible { outline: 2px solid #97271f; outline-offset: 3px; }
  .landing .hero.frame {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .landing .hero .hero-copy {
    --hero-size: clamp(53px, 15.3vw, 68px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: calc(78px + env(safe-area-inset-top, 0px)) 0 0;
  }
  .landing .hero .hero-heading {
    --paper-halo: none;
    max-width: calc(100% - 40px);
    margin: 0;
    z-index: 1;
  }
  .landing .hero h1 { line-height: .76; letter-spacing: -.035em; text-shadow: none; }
  .landing .hero .hero-ink { mask: none; }
  .landing .hero .hero-city, .landing .hero .hero-city-brush { filter: none; }
  .landing .hero .hero-cta {
    flex-shrink: 0;
    align-self: center;
    min-width: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fae9d3;
    text-indent: 0;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .landing .hero .hero-cta::before { mask-size: 100% 100%; }
  .landing .hero .mobile-selected-delivery {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 78%;
    min-height: 52px;
    margin: 8px 0 0;
    padding: 12px 18px;
    font: 400 clamp(22px, 6vw, 27px)/1 'Forum', serif;
    letter-spacing: .04em;
  }
  .landing .mobile-selected-delivery .mobile-selected-phone { width: 24px; height: 24px; flex: none; }
  .landing .mobile-selected-delivery[aria-disabled='true'] { cursor: default; }
  .landing .mobile-selected-delivery[aria-disabled='true']:hover::before { background: #97271f; }
  .landing .hero .mobile-selected-menu {
    width: 58%;
    min-height: 44px;
    margin: 0;
    padding: 10px 15px;
    font: 400 clamp(19px, 5vw, 27px)/1 'Forum', serif;
    letter-spacing: .08em;
    text-indent: .08em;
  }
  .landing .mobile-selected-desktop-label { display: none; }
  .landing .mobile-selected-menu-label { display: inline; }
  .landing .hero .hero-features { position: static; width: 78%; margin: 8px 4% 0 0; padding: 0; }
  .landing .hero-features .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; }
  .landing .hero-features .features li { display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 0 4px; text-align: center; border: 0; }
  .landing .hero .hero-features .features li + li { border-left: 1px solid var(--accent, #97271f); }
  .landing .hero-features .features li:nth-child(n + 4) { display: none; }
  .landing .hero-features .features .icon { width: 38px; height: 38px; min-width: 0; min-height: 0; filter: url('#accent-tint') drop-shadow(0 0 2px #fae9d3) drop-shadow(0 0 5px #fae9d3cc); }
  .landing .hero-features .features span { font: 400 clamp(11px, 2.95vw, 16px)/1.35 'Prata', serif; letter-spacing: 0; text-shadow: 0 0 2px #fae9d3, 0 0 5px #fae9d3, 0 0 8px #fae9d3b3; }
  .landing .mobile-selected-scene-space { display: none; }

  /* Restore the requested lower-page corrections from the mobile r3 preview. */
  .landing #popular .popular-inner { width: calc(100% - 40px); padding-top: 22px; padding-bottom: 34px; }
  .landing #popular .popular-header { height: 178px; padding: 0; position: relative; }
  .landing #popular .popular-eyebrow { font-size: 11px; letter-spacing: .45em; color: #d9aa91; margin: 0 0 19px; position: relative; z-index: 1; }
  .landing #popular h2 { font-size: 45px; line-height: .94; white-space: normal; max-width: 290px; transform: none; letter-spacing: -.035em; text-shadow: 0 0 2px #080909, 0 1px 6px #080909; }
  .landing #popular h2 em { display: block; font-size: 1.15em; margin-top: 2px; color: #bd6558; }
  .landing #popular h2 em::after { width: 116px; height: 14px; left: 21px; bottom: -17px; }
  /* The masked edge ends above the section, so no page paper shows through. */
  .landing #popular .popular-surface { inset: -10px 0; mask-size: 100% 10px, 100% calc(100% - 9px); }
  .landing #popular .popular-surface::before { background: #080909; mask-size: 100% 100%, 100% 18px; }
  .landing #popular .popular-surface::after { content: ''; position: absolute; inset: 0 0 auto; height: 210px; background: linear-gradient(90deg, #08090999 0%, #08090933 38%, transparent 62%), url('/assets/landing/popular-glass-20261022/landscape.png') right -270px top 4px / 1000px auto no-repeat; mask-image: linear-gradient(#000 0%, #000 76%, transparent 100%); }
  .landing #popular .dish-card { background: #080909; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .landing #popular .popular-viewport { margin-top: 0; }
  .landing #popular .popular-footer .all-dishes { min-height: 44px; padding-block: 8px; color: #fae9d3; font: 400 clamp(19px, 5vw, 27px)/1 'Forum', serif; letter-spacing: .08em; text-indent: .08em; }
  .landing #about { padding-top: 0; margin-top: -1px; background: var(--paper) url('/assets/art/paper-texture.webp') center / 640px; }
  .landing #contacts { background-color: var(--paper); }
  .landing #about .scene-art { position: relative; width: 205%; margin: -2px 0 0 -4%; mask-image: linear-gradient(#fff, #fff), url('/assets/landing/hero-refresh/dish-mask-1536.webp'); mask-size: 100% calc(100% - 179px), 100% 180px; mask-position: center top, center bottom; mask-repeat: no-repeat; mask-mode: luminance, luminance; mask-composite: add; }
  .landing #about .about-copy { margin-top: 39px; }
  .landing #about .about-eyebrow { letter-spacing: .4em; }
  .landing #delivery { padding-bottom: 282px; }
  .landing #delivery .delivery-decor,
  .landing #contacts .contacts-branch-top { display: none; }

  .landing #footer .footer-inner { padding-bottom: calc(100vw / 3 + 8px); }
  .landing #footer .footer-brand { display: flex; justify-content: center; }
  .landing #footer .footer-social-column { text-align: center; }
  .landing #footer .footer-social-column > .footer-label::after { margin-inline: auto; }
  .landing #footer .socials { justify-content: center; }
  .landing #footer .footer-ornament { margin-inline: auto; }
  .landing .mobile-selected-navigation nav a[aria-current='page'],
  .landing #footer nav a[aria-current='page'] { text-decoration: none; }
  .landing .mobile-selected-navigation nav a[aria-current='page']::after,
  .landing #footer nav a[aria-current='page']::after { content: none; display: none; }

  html:has(.mobile-selected-navigation[open]) { overflow: hidden; }
  .landing .mobile-selected-navigation {
    position: fixed;
    inset: max(12px, env(safe-area-inset-top, 0px)) 12px auto;
    width: calc(100% - 24px);
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 24px);
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--hero-paper) url('/assets/art/paper-texture.webp') center / 640px;
    color: #17150f;
  }
  .mobile-selected-navigation::backdrop { background: #17150f40; }
  .landing .mobile-selected-nav-paper { min-height: 0; padding: 12px 14px 20px; }
  .landing .mobile-selected-nav-header { position: sticky; top: 0; z-index: 1; background: var(--hero-paper) url('/assets/art/paper-texture.webp') center / 640px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .landing .mobile-selected-navigation nav { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 12px; }
  .landing .mobile-selected-navigation nav a { padding: 6px 16px; min-height: 44px; color: #17150f; font: 500 28px/1.1 'Jiahe Display', serif; text-align: center; }
  .landing .mobile-selected-navigation nav a[href^='/menu/'] { color: #97271f; }
  .landing .mobile-selected-navigation nav a:focus-visible { outline: 2px solid #97271f; outline-offset: 2px; }
  .landing .mobile-selected-nav-address { margin: 12px auto 0; max-width: 28ch; font: 400 17px/1.3 'Forum', serif; text-align: center; }
  .landing .mobile-selected-nav-hours { margin: 8px 0 0; font: 400 17px/1.3 'Forum', serif; text-align: center; }
  .landing .mobile-selected-nav-call { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 220px; max-width: 100%; min-height: 44px; margin: 12px auto 0; padding: 10px 20px; color: #fae9d3; font: 400 22px/1 'Forum', serif; text-decoration: none; }
  .landing .mobile-selected-nav-call::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #97271f; mask: url('/assets/landing/hero-refresh/stroke.webp') center / 100% 100% no-repeat; }
  @media (prefers-reduced-motion: no-preference) {
    .landing .mobile-selected-navigation[open] { animation: selected-nav-enter 220ms cubic-bezier(.22, 1, .36, 1); }
    @keyframes selected-nav-enter { from { opacity: .4; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  }
}
