/* Shared responsive layout for every Machim route and language. */
:root { --page-gutter: clamp(1.25rem,5vw,6rem); --header-clearance: 7.5rem; }
html { scroll-padding-top: var(--header-clearance); }
body { -webkit-text-size-adjust: 100%; }
:is(main,section,article,.header-tools,.product-copy,.contact-copy,.location-panel) { min-width: 0; }
:is(h1,h2,h3,p,a,button) { overflow-wrap: break-word; }
main [id] { scroll-margin-top: 1.25rem; }
.skip { z-index: 100; }
.cinema-header { inset: 1rem max(1rem,calc((100vw - 1440px) / 2)) auto; gap: 1.25rem; padding: .75rem 1.25rem; }
.cinema-header nav { gap: clamp(.8rem,1.3vw,1.4rem); }
.cinema-header nav a { min-height: 44px; display: flex; align-items: center; font-size: .9375rem; }
.cinema-header nav a[aria-current]::after { bottom: 0; }
.cinema-header .header-tools { gap: .625rem; }
.cinema-header .motion-toggle { font-size: .875rem; min-height: 44px; max-width: 8rem; padding: .5rem .75rem; }
.cinema-header .language-picker select { font-size: 1rem; min-height: 44px; }
.cinema-header .menu-toggle { min-height: 44px; min-width: 44px; font-size: .875rem; }
.cinema-header .logo { display: flex; align-items: center; min-height: 44px; }
.cinematic :is(.button,.cinema-button,.flavor-nav a,.pair-filters button) { min-height: 48px; font-size: 1rem; }
.cinematic :is(.flavor-nav a,.pair-filters button) { display: inline-flex; align-items: center; justify-content: center; }
.cinematic :is(.story-block,.brand-detail,.contact-layout,.pair-row,.product-panel) { padding-inline: max(var(--page-gutter),calc((100% - 1280px) / 2)); }
.cinematic .pair-list { padding-inline: 0; }
.cinematic .product-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,6vw,6rem); }
.cinematic .product-panel .flavor-poster { justify-self: center; margin: 0 auto; }
.cinematic .product-copy h2 { line-height: 1.35; }
.cinematic .product-copy h2 > .flavor-description { line-height: 1.65; letter-spacing: normal; font-size: 1rem; }
.cinematic .product-benefits { gap: 1.25rem 1rem; }
.cinematic .flavor-chips span { font-size: .875rem; }
.cinematic .contact-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,6vw,6rem); }
.cinematic .contact-board { margin-right: 0; }
.cinematic .copy-row button { min-height: 44px; font-size: .875rem; }
.cinematic .channel { min-height: 88px; }
.cinematic .channel small { overflow-wrap: anywhere; }
.cinematic :is(.page-heading > p,.film-intro,.mascot-dialog p,#city-description) { font-size: 1rem; }
.cinematic .footer-top { max-width: 1280px; margin-inline: auto; padding-inline: 0; }
.cinematic .footer-top > div > a { min-height: 44px; display: inline-flex; align-items: center; font-size: .875rem; }
.cinematic .footer-bottom { max-width: 1280px; margin-inline: auto; font-size: .875rem; }
.cinematic :is(.scene-eyebrow,.chapter-tag,.side-label,.film-bottom,.story-note,.city-choice > span > small) { font-size: .875rem; }
.cinematic :is(.brand-detail h2,.editorial-heading h1,.editorial-heading h2) { line-height: 1.5; }
.freeze-content,.australia-section { padding-inline: max(var(--page-gutter),calc((100% - 1280px) / 2)); }
.horeca-content { padding-inline: var(--page-gutter); }
.dedicated-content .horeca-content { padding-top: 2rem; background: linear-gradient(#fff9ed,#17251e 5rem,#17251e 90%,#fff9ed); }
.dedicated-content .horeca-content .editorial-heading { padding-top: 5rem; }
.horeca-layout,.oem-content { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,6vw,5rem); }
.wholesale-unit { font-size: clamp(4rem,8vw,7rem); }
.wholesale-unit span { margin-left: .5rem; letter-spacing: .08em; }
.horeca-examples img { max-width: 1100px; margin: 0 auto; object-fit: contain; }
.seafood-dot { min-width: 44px; }
.story-controls button { min-height: 44px; }
.story-flavors button { overflow-wrap: anywhere; }
.locator { grid-template-columns: minmax(0,1.3fr) minmax(320px,1fr); gap: 2rem; }
.city-choice { font-size: 1rem; }
.film-copy { width: 47%; max-width: 640px; }
.film-copy h1 { font-size: clamp(2.5rem,5vw,5rem); line-height: 1.3; }
.landing-controls { top: calc(var(--header-clearance) + .25rem); }
.landing-film .film-copy { padding-top: 3rem; }

/* Landscape artwork with controls below the picture. */
.how-to-eat { padding: clamp(2.75rem,6vw,5.5rem) max(var(--page-gutter),calc((100% - 1280px) / 2)); }
.eat-heading { max-width: none; margin-bottom: 2rem; }
.eat-heading h2 { font-size: clamp(2rem,3.8vw,3.5rem); line-height: 1.4; margin-bottom: 1rem; }
.eat-heading h2 br { display: none; }
.eat-heading h2 em::before { content: ' '; }
.eat-heading > p:last-child { max-width: none; font-size: 1rem; }
.eat-layout { max-width: none; grid-template-columns: minmax(0,1.55fr) minmax(300px,1fr); gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.eat-media { min-width: 0; }
.eat-stage { aspect-ratio: 910 / 512; border: 1px solid #795f3920; border-radius: 1.25rem; background: #f4e8dc; }
.eat-video,.eat-fallback { width: 100%; height: 100%; object-fit: contain; }
.eat-stage .eat-start { bottom: 1rem; }
.eat-controls { margin: 1rem 0 0; gap: .5rem; }
.eat-controls button { font-size: .875rem; min-height: 44px; padding: .6rem 1rem; }
.eat-controls .eat-sound { margin-left: auto; background: #fffaf0; }
.eat-controls .eat-sound[aria-pressed=false] { border-color: #a42424; color: #a42424; }
.eat-audio-hint,.eat-error { font-size: .875rem; line-height: 1.75; margin: .75rem 0 0; color: #674d31; }
.eat-steps { gap: .5rem; }
.eat-steps button { padding: 1rem; gap: 1rem; border: 1px solid #c9b89470; border-radius: 1rem; background: #ffffff40; min-height: 90px; }
.eat-steps strong { font-size: 1.25rem; line-height: 1.5; margin-bottom: .25rem; }
.eat-step-description { font-size: 1rem; line-height: 1.65; }
.eat-note { margin: 1rem 0 0; font-size: .875rem; }

@media (max-width:1359px) {
  .cinema-header .menu-toggle { display: block; }
  .cinema-header .header-tools { margin-left: auto; }
  .cinema-header nav { display: none; position: absolute; inset: calc(100% + .5rem) 0 auto; width: 100%; max-height: calc(100dvh - var(--header-clearance)); overflow-y: auto; overscroll-behavior: contain; background: #fff9ed; border: 1px solid #19372f26; border-radius: 1rem; box-shadow: 0 14px 30px #0002; padding: .75rem; flex-direction: column; align-items: stretch; gap: .25rem; }
  .cinema-header nav.open { display: flex; }
  .cinema-header nav a { width: 100%; font-size: 1rem; padding: .75rem 1rem; border: 0; gap: 1rem; border-radius: .625rem; }
  .cinema-header nav a:is([aria-current],:hover) { background: #eee6d5; }
  .cinema-header nav small { display: inline; }
  .cinema-header nav a[aria-current]::after { display: none; }
}
@media (max-width:980px) {
  .eat-layout { grid-template-columns: minmax(0,1fr); max-width: 800px; margin: 0 auto; }
  .eat-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
  .eat-steps button { height: 100%; }
  .cinematic .product-panel { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 2rem; }
  .locator { grid-template-columns: minmax(0,1fr); max-width: 800px; margin: auto; }
  .map-wrap { max-width: 640px; width: 100%; margin: auto; }
  .location-panel { width: 100%; }
  .city-choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .horeca-layout,.oem-content { gap: 2rem; }
  .oem-options { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .wholesale-card { padding: 1.5rem; }
}
@media (max-width:760px) {
  :root { --header-clearance: 6.5rem; }
  .cinema-header { inset: max(.5rem,env(safe-area-inset-top)) .625rem auto; min-height: 70px; padding: .5rem .75rem; flex-wrap: wrap; gap: .5rem; }
  .cinema-header .logo,.cinema-header .logo img { width: 80px; max-width: 80px; flex-basis: 80px; }
  .cinema-header .header-tools { gap: .375rem; flex-wrap: wrap; max-width: 100%; }
  .cinema-header .motion-toggle { font-size: .875rem; max-width: 7rem; padding: .4rem .5rem; line-height: 1.4; }
  .cinema-header .language-picker select { padding-left: .4rem; padding-right: .1rem; }
  .cinema-header .menu-toggle { padding: .5rem .25rem; }
  .film-sticky { min-height: 720px; }
  .chapter-film { height: auto; min-height: 720px; }
  .chapter-film .film-sticky { height: max(720px,95svh); position: relative; }
  .home-film { height: 145svh; min-height: 800px; }
  .film-copy,.landing-film .film-copy { width: auto; left: var(--page-gutter); right: var(--page-gutter); top: auto; bottom: 6.25rem; transform: none; max-width: none; padding-top: 0; }
  .film-copy h1,.landing-film .film-copy h1 { font-size: clamp(2.125rem,8.4vw,3.25rem); line-height: 1.35; }
  .film-intro,.landing-film .film-intro { font-size: 1rem; line-height: 1.8; margin: 1rem 0 1.25rem; }
  .film-bottom,.landing-film .film-bottom { left: var(--page-gutter); right: var(--page-gutter); font-size: .75rem; letter-spacing: 0; flex-wrap: wrap; gap: .5rem; }
  .film-bottom > span:last-child { font-size: .75rem; }
  .scene-eyebrow,.landing-film .scene-eyebrow { font-size: .875rem; letter-spacing: .025em; }
  .landing-controls { right: var(--page-gutter); top: var(--header-clearance); }
  .cinematic .story-block { display: block; padding-block: 2.75rem; }
  .brand-detail { display: flex; flex-direction: column; gap: 2rem; }
  .cinematic .product-panel { display: flex; flex-direction: column; padding-block: 2.5rem; gap: 2rem; min-height: 0; }
  .cinematic .product-copy { width: 100%; }
  .cinematic .product-copy h2 { font-size: clamp(2.25rem,9vw,3rem); }
  .cinematic .product-panel .flavor-poster { max-width: 440px; }
  .cinematic .product-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cinematic .pair-row { display: flex; flex-direction: column; gap: 1.75rem; padding-block: 2rem 3rem; }
  .cinematic .pair-row :is(figure,.seafood-gallery) { width: 100%; }
  .cinematic .pair-row .seafood-carousel { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; margin-top: .5rem; }
  .cinematic .pair-row .seafood-track .seafood-slide { padding: 0; }
  .cinematic .contact-layout { display: grid; grid-template-columns: minmax(0,1fr); padding-block: 2rem 3rem; gap: 1.5rem; }
  .cinematic .contact-board { margin: 0; padding: 1.5rem; }
  .horeca-layout,.oem-content { grid-template-columns: minmax(0,1fr); }
  .oem-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .freeze-benefits { grid-template-columns: minmax(0,1fr); }
  .freeze-benefits article { padding: 1.5rem; }
  .city-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .city-choice { min-height: 80px; font-size: 1rem; }
  .city-choice > span > small,.city-choice > b small { font-size: .75rem; letter-spacing: .025em; }
  .cinematic .footer-top { display: flex; flex-direction: column; align-items: start; gap: 1rem; }
  .cinematic .footer-top > div { gap: .25rem 1.25rem; }
  .cinematic .footer-bottom { font-size: .75rem; flex-wrap: wrap; line-height: 1.8; }
  .eat-heading h2 br { display: initial; }
  .eat-steps button { padding: 1rem; gap: .625rem; }
  .eat-controls { gap: .5rem; }
  .eat-controls button { flex: 1 1 auto; padding-inline: .75rem; }
  .eat-controls .eat-sound { margin-left: 0; }
}
@media (max-width:380px) {
  .cinema-header .logo,.cinema-header .logo img { width: 60px; max-width: 60px; flex-basis: 60px; }
  .cinema-header { padding-inline: .5rem; gap: .25rem; }
  .cinema-header .header-tools { gap: .125rem; }
  .cinema-header .motion-toggle { max-width: 6rem; padding-inline: .375rem; }
  .eat-steps,.brand-checks,.oem-options { grid-template-columns: minmax(0,1fr); }
  .eat-stage { border-radius: .75rem; }
  .story-flavors { gap: .75rem; }
  .story-flavors button { flex-direction: column; align-items: flex-start; gap: .25rem; font-size: .875rem; }
  .cinematic .contact-board { padding: 1.125rem; }
}
@media (max-height:600px) and (min-width:761px) {
  .film-sticky,.chapter-film { min-height: 720px; }
  .home-film { min-height: 850px; }
  .film-copy { top: 220px; transform: none; }
}
@media (prefers-reduced-motion:reduce) {
  .home-film { height: auto; }
  .film-sticky { position: relative; }
  .eat-stage,.eat-steps button { transition: none; }
}