/* A shared wide-screen rhythm: 1× at 1600px, 1.5× at 2560px.
   Layout remains native CSS, so browser zoom and scroll pinning keep working. */
:root{--ui-unit:1px;--header-height:100px}
@media(max-width:780px){
  .site-header{gap:12px}
  .site-header .button{white-space:nowrap}
}
@media(min-width:1600px){
  :root{--ui-unit:clamp(1px,calc(.166667px + .0520833vw),1.75px);--header-height:calc(100 * var(--ui-unit));--space:clamp(88px,5vw,180px)}

  .site-header{height:var(--header-height);gap:calc(28 * var(--ui-unit));padding-block:calc(14 * var(--ui-unit))}
  .brand-link{width:calc(145 * var(--ui-unit))}
  .brand-link img{height:calc(69 * var(--ui-unit))}
  .desktop-nav{font-size:calc(12 * var(--ui-unit));gap:calc(32 * var(--ui-unit))}
  .desktop-nav a{padding-block:calc(14 * var(--ui-unit))}
  .desktop-nav a:after{bottom:calc(8 * var(--ui-unit))}
  .header-actions{gap:calc(18 * var(--ui-unit))}
  .site-header .button{padding:calc(13 * var(--ui-unit)) calc(20 * var(--ui-unit));min-height:calc(48 * var(--ui-unit));font-size:calc(12 * var(--ui-unit))}
  .button{font-size:calc(13 * var(--ui-unit));min-height:calc(60 * var(--ui-unit));gap:calc(24 * var(--ui-unit));padding:calc(19 * var(--ui-unit)) calc(28 * var(--ui-unit))}
  .button svg,.text-link svg{width:calc(22 * var(--ui-unit));height:calc(22 * var(--ui-unit))}
  .text-link{font-size:calc(12 * var(--ui-unit));gap:calc(18 * var(--ui-unit));min-height:calc(44 * var(--ui-unit))}

  .home-hero{height:calc(100svh - var(--header-height));min-height:650px}
  .hero-type h1{font-size:clamp(320px,min(26vw,44svh),900px)}
  .hero-brush{height:calc(85 * var(--ui-unit))}
  .hero-bottom{bottom:calc(35 * var(--ui-unit));gap:calc(30 * var(--ui-unit))}
  .hero-copy p{font-size:calc(16 * var(--ui-unit));max-width:calc(260 * var(--ui-unit));margin-bottom:calc(20 * var(--ui-unit))}
  .hero-buttons{gap:calc(25 * var(--ui-unit))}
  .hero-location{font-size:calc(12 * var(--ui-unit));top:clamp(32px,4svh,80px)}
  .hero-location svg{width:calc(17 * var(--ui-unit));height:calc(17 * var(--ui-unit))}
  .mascot-takeover img{width:min(58vw,72svh,calc(720 * var(--ui-unit)))}

  /* Color fields span the screen; reading and browsing stay in a bounded area. */
  .section-pad{padding-block:calc(100 * var(--ui-unit));padding-inline:max(var(--space),calc((100% - 2200px)/2))}
  .section-heading{margin-bottom:calc(48 * var(--ui-unit))}
  .section-heading h2{font-size:clamp(56px,6.3vw,calc(98 * var(--ui-unit)))}
  .favorite-grid{gap:calc(22 * var(--ui-unit))}
  .favorite{min-height:calc(510 * var(--ui-unit));padding:calc(30 * var(--ui-unit)) calc(26 * var(--ui-unit)) calc(22 * var(--ui-unit))}
  .food-title{font-size:clamp(44px,4.4vw,calc(65 * var(--ui-unit)))}
  .favorite>img{height:calc(280 * var(--ui-unit));width:calc(100% + 48 * var(--ui-unit));margin:calc(-20 * var(--ui-unit)) calc(-24 * var(--ui-unit)) calc(-10 * var(--ui-unit))}
  .favorite-caption{font-size:calc(12 * var(--ui-unit))}
  .round-arrow{width:calc(43 * var(--ui-unit));height:calc(43 * var(--ui-unit))}
  .round-arrow svg{width:calc(24 * var(--ui-unit));height:calc(24 * var(--ui-unit))}
  .marquee{padding-block:calc(18 * var(--ui-unit))}
  .marquee span{font-size:calc(31 * var(--ui-unit))}
  .marquee-track{gap:calc(35 * var(--ui-unit))}
  .marquee svg{width:calc(24 * var(--ui-unit));height:calc(24 * var(--ui-unit))}

  .vibe-panel{gap:calc(65 * var(--ui-unit));min-height:calc(750 * var(--ui-unit))}
  .vibe-panel h2{font-size:clamp(70px,8.3vw,calc(127 * var(--ui-unit)))}
  .vibe-panel-figure img{max-width:calc(365 * var(--ui-unit))}
  .craving{min-height:calc(790 * var(--ui-unit))}
  .craving h2{font-size:clamp(72px,8vw,calc(123 * var(--ui-unit)))}
  .craving-image{height:calc(420 * var(--ui-unit))}
  .craving-info{max-width:calc(410 * var(--ui-unit))}
  .craving-info h3{font-size:calc(35 * var(--ui-unit))}
  .craving-button{font-size:calc(12 * var(--ui-unit));min-height:calc(46 * var(--ui-unit));padding:calc(12 * var(--ui-unit)) calc(18 * var(--ui-unit))}
  .visit-banner h2{font-size:clamp(60px,7vw,calc(110 * var(--ui-unit)))}

  .menu-intro{padding-block:calc(65 * var(--ui-unit)) calc(70 * var(--ui-unit))}
  .menu-intro h1{font-size:clamp(85px,11vw,calc(172 * var(--ui-unit)))}
  .menu-intro img{width:calc(190 * var(--ui-unit))}
  .menu-board{padding-top:calc(50 * var(--ui-unit))}
  .menu-grid{max-width:1960px;margin-inline:auto;gap:calc(30 * var(--ui-unit))}
  .menu-filter{font-size:calc(12 * var(--ui-unit));min-height:calc(44 * var(--ui-unit));padding:calc(12 * var(--ui-unit)) calc(16 * var(--ui-unit))}
  .menu-item-art{height:calc(270 * var(--ui-unit))}
  .menu-item-title h3{font-size:calc(25 * var(--ui-unit))}
  .price{font-size:calc(15 * var(--ui-unit))}
  .menu-item-copy p{font-size:calc(12 * var(--ui-unit));max-width:65ch}
  .menu-more p{font-size:calc(13 * var(--ui-unit));max-width:65ch}
  .menu-count{font-size:calc(12 * var(--ui-unit))}
  .sharing h2{font-size:clamp(70px,7vw,calc(110 * var(--ui-unit)))}

  .vibe-hero h1{font-size:clamp(70px,8.6vw,calc(135 * var(--ui-unit)))}
  .vibe-hero-mascot img{max-width:calc(510 * var(--ui-unit))}
  .about-statement h2{font-size:clamp(60px,7vw,calc(110 * var(--ui-unit)))}
  .about-statement>div{max-width:60ch}
  .big-copy{font-size:calc(30 * var(--ui-unit))}
  .food-story{padding-block:calc(75 * var(--ui-unit));padding-inline:max(var(--space),calc((100% - 2200px)/2))}
  .food-story h2{font-size:clamp(70px,8vw,calc(123 * var(--ui-unit)))}
  .quick-answers h2{font-size:clamp(55px,5.5vw,calc(85 * var(--ui-unit)))}
  summary{font-size:calc(15 * var(--ui-unit));padding-block:calc(24 * var(--ui-unit))}
  details p{font-size:calc(13 * var(--ui-unit));max-width:65ch}
  .closing h2{font-size:clamp(70px,8vw,calc(125 * var(--ui-unit)))}

  .visit-hero{padding-block:calc(60 * var(--ui-unit))}
  .visit-hero h1{font-size:clamp(130px,17vw,calc(245 * var(--ui-unit)))}
  .visit-hero-note img{width:calc(220 * var(--ui-unit))}
  .visit-hero-note p{font-size:calc(11 * var(--ui-unit))}
  .location-info h2{font-size:clamp(70px,6.5vw,calc(103 * var(--ui-unit)))}
  address{font-size:calc(22 * var(--ui-unit))}
  .visit-facts p,.visit-facts a{font-size:calc(17 * var(--ui-unit))}
  .visit-facts h3,.visit-facts small{font-size:calc(12 * var(--ui-unit))}
  .map-frame{min-height:calc(600 * var(--ui-unit))}
  .map-frame iframe{min-height:calc(560 * var(--ui-unit))}
  .map-frame>a{font-size:calc(11 * var(--ui-unit))}
  .pickup-section h2{font-size:clamp(80px,8.5vw,calc(135 * var(--ui-unit)))}

  .vibe-panel-figure p,.menu-intro p,.sharing p,.about-statement p:not(.big-copy),.visit-banner p{font-size:calc(15 * var(--ui-unit));max-width:60ch}
  .craving-heading>p{font-size:calc(16 * var(--ui-unit));max-width:60ch}
  .craving-info p,.food-story-copy p,.pickup-section p{font-size:calc(14 * var(--ui-unit));max-width:60ch}
  .mascot-caption{font-size:calc(12 * var(--ui-unit))}
  .site-footer{padding:calc(75 * var(--ui-unit)) max(var(--space),calc((100% - 2200px)/2)) calc(25 * var(--ui-unit))}
  .footer-top{gap:calc(90 * var(--ui-unit))}
  .footer-top>a{max-width:calc(680 * var(--ui-unit))}
  .footer-links,.footer-bottom{font-size:calc(12 * var(--ui-unit))}
  .footer-bottom p:last-child{max-width:50ch}
}