/* Opt-in responsive composition only. Desktop children keep their original boxes. */
.ykh-film-track,.ykh-ramen-track,.ykh-location-track{display:contents}
@media(max-width:999px){
  .yokocho-homepage{--ykh-safe-top:140px}
  /* Match the next section's ink; keep the approved Hero content and imagery. */
  .ykh-hero:after{background:linear-gradient(0deg,var(--yk-deep),transparent 32%)}
  .ykh-story{background:var(--yk-deep)}
  .ykh-welcome-copy{width:100%;max-width:680px;margin:auto;padding:90px 22px 40px}
  .ykh-kanji{inset:0 0 auto 35%;height:420px;opacity:.22}
  .ykh-welcome-film{overflow:hidden;mask-image:linear-gradient(transparent,#000 9%,#000 87%,transparent)}
  .ykh-mobile-motion .ykh-story-stage{overflow:visible}
  .ykh-mobile-motion .ykh-welcome-film .ykh-video-toggle{right:calc(var(--ykh-mobile-x,22%) + 12px);bottom:calc(var(--ykh-mobile-bottom,12%) + 16px)}
  .ykh-ramen{display:flex;flex-direction:column;gap:12px;padding:32px 0 env(safe-area-inset-bottom,0px);min-height:0;background:var(--yk-deep)}
  .ykh-ramen-copy{padding:0 22px;width:100%;max-width:680px;align-self:center;z-index:3}
  .ykh-ramen .ykh-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px}
  .ykh-ramen .ykh-actions .yk-button{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding-inline:8px;min-height:48px}
  .ykh-ramen:before{inset:8% 0 30%;opacity:.3}
  .ykh-ramen-image{width:100%;height:clamp(340px,58svh,620px);max-height:none;object-fit:cover;object-position:50% 65%;mask-image:linear-gradient(transparent,#000 12%,#000 72%,transparent)}
  .ykh-mosaic{position:relative;background:linear-gradient(var(--yk-deep),var(--yk-green));padding-top:60px;padding-bottom:60px}
  .ykh-mosaic:before,.ykh-mosaic:after{content:"";position:absolute;left:0;right:0;height:100px;pointer-events:none;z-index:2}
  .ykh-mosaic:before{top:0;background:linear-gradient(var(--yk-deep),transparent)}
  .ykh-mosaic:after{bottom:0;background:linear-gradient(transparent,var(--yk-green))}
  .ykh-chef{background:linear-gradient(var(--yk-green),var(--yk-deep));position:relative;padding-bottom:100px}
  .ykh-chef-photo img{mask-image:linear-gradient(transparent,#000 8%,#000 78%,transparent)}
  .ykh-chef-copy{isolation:isolate}
  .ykh-chef-kanji{position:absolute;inset:auto -16px -50px;width:calc(100% + 32px);max-width:none;height:clamp(300px,85vw,560px);margin:0;opacity:.6;z-index:-1;background-position:center bottom}
  .ykh-location{background:linear-gradient(var(--yk-deep),var(--yk-green) 32%,var(--yk-deep));padding:40px 22px calc(50px + env(safe-area-inset-bottom,0px));min-height:0;gap:0}
  .ykh-location:before{inset:8% 0 30%;opacity:.35}
  .ykh-location address{font-size:clamp(18px,4.8vw,26px);margin:24px 0;line-height:1.3}
  .ykh-location h2{font-size:clamp(24px,6.5vw,40px);line-height:1.15;margin-bottom:0}
  .ykh-location .ykh-actions{gap:10px;flex-wrap:wrap}
  .ykh-location .yk-button{padding-inline:14px}
  .ykh-hours-status{font-size:15px;letter-spacing:.06em;margin-bottom:22px;max-width:100%}
  /* One native slide contains the original day and all its Core services. */
  .ykh-hours{--ykh-slide:78vw;display:flex;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;width:calc(100% + 44px);max-width:calc(100% + 44px);margin:28px -22px 0;padding:12px calc((100% + 44px - var(--ykh-slide))/2);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--yk-gold) transparent;touch-action:pan-x pan-y pinch-zoom;cursor:grab}
  .ykh-hours>div{flex:0 0 var(--ykh-slide);min-width:0;min-height:158px;scroll-snap-align:center;padding:20px 12px;border:1px solid transparent;border-radius:8px;text-align:center;background:transparent}
  .ykh-hours dt{color:#fff;font:700 11px/1.4 var(--yk-body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;white-space:normal}
  .ykh-hours dd{color:var(--yk-gold);font:400 clamp(24px,6.5vw,34px)/1.55 var(--yk-display);margin:0;white-space:nowrap}
  .ykh-hours .ykh-today{border-color:transparent}
  .ykh-hours .ykh-day-selected{border-color:var(--yk-gold);background:#ffffff08}
  .ykh-hours [aria-current="date"] dt{color:var(--yk-gold)}
  .ykh-hours>div:focus-visible{outline:2px solid #fff;outline-offset:-4px}
  .ykh-hours.ykh-hours-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
  .ykh-location-track.ykh-mobile-stage{display:block;position:relative;background:var(--yk-deep)}
  .ykh-mobile-stage .ykh-location{position:sticky;top:min(var(--ykh-safe-top),var(--ykh-bottom-top));min-height:calc(100svh - var(--ykh-safe-top))}
  .ykh-home .ykh-video-toggle{width:44px;height:44px;min-height:44px;overflow:visible;clip-path:none;padding:8px;border:1px solid #ffffff90;border-radius:50%;opacity:1;background:#010a07a6;z-index:5}
  .ykh-welcome-film[inert] .ykh-video-toggle{visibility:hidden}
  /* A stable small viewport avoids jumps when browser bars expand or retract. */
  @media(max-height:500px){
  }
}
@media(min-width:601px) and (max-width:999px){
  .ykh-welcome-copy{padding-top:100px}
  .ykh-chef{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .ykh-chef-copy{padding-block:70px}
  .ykh-chef-kanji{inset:auto -20px -40px;height:420px}
  .ykh-chef-photo{min-height:650px}
  .ykh-ramen{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;padding:60px 28px;align-items:center}
  .ykh-ramen-copy{padding:0;max-width:none}
  .ykh-ramen-image{height:62svh;min-height:440px}
  .ykh-ramen .ykh-actions{grid-template-columns:1fr}
  .ykh-location{padding-inline:40px}
  .ykh-hours{--ykh-slide:64vw;width:calc(100% + 80px);max-width:calc(100% + 80px);margin-inline:-40px;padding-inline:calc((100% + 80px - var(--ykh-slide))/2)}
}
@media(max-width:999px) and (prefers-reduced-motion:reduce){
  .ykh-film-track,.ykh-ramen-track,.ykh-location-track{display:contents!important;height:auto!important}
  .ykh-welcome-film,.ykh-ramen,.ykh-location{position:relative!important;top:auto!important;clip-path:none!important;mask-image:none!important}
  .ykh-welcome-film{height:65svh;min-height:320px}
}





/* P2 composition correction: separate editorial flow/photo stage, shared Chef cover. */
.ykh-ramen-visual{display:contents}
@media(max-width:999px){
 .ykh-ramen-track.ykh-mobile-stage{height:auto}
 .ykh-mobile-stage .ykh-ramen{position:relative;top:auto;min-height:0;display:flex;flex-direction:column}
 .ykh-mobile-stage .ykh-ramen-visual{display:contents}
 .ykh-mobile-stage .ykh-ramen-image{position:relative;top:auto}
 .ykh-visit.ykh-mobile-reveal{position:relative;isolation:isolate;height:calc(var(--ykh-chef-height) + var(--ykh-location-height) + 80svh);background:var(--yk-deep)}
 .ykh-mobile-reveal .ykh-chef{position:absolute;inset:0 0 auto;z-index:2}
 .ykh-mobile-reveal .ykh-location-track.ykh-mobile-stage{height:100%;position:relative;z-index:1}
 .ykh-mobile-reveal .ykh-location{position:sticky;top:min(var(--ykh-safe-top),var(--ykh-bottom-top))}
}

@media(max-width:999px){
 .ykh-mobile-reveal.ykh-reveal-tall{height:auto}
 .ykh-mobile-reveal.ykh-reveal-tall .ykh-chef{position:relative;inset:auto}
 .ykh-mobile-reveal.ykh-reveal-tall .ykh-location-track{height:auto}
 .ykh-mobile-reveal.ykh-reveal-tall .ykh-location{position:relative;top:auto}
}

/* Final mobile Welcome: one scroll scene; desktop wrappers generate no boxes. */
.ykh-welcome-scene,.ykh-welcome-pin{display:contents}
/* Mobile carousel: show neighboring days through a decorative edge fade. */
@media(max-width:600px){
 .ykh-hours{--ykh-slide:70vw;mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
 .ykh-hours>div:not(.ykh-day-selected){border-color:#ffffff38;background:#ffffff06}
}
@media(max-width:999px){
 .ykh-mobile-motion .ykh-welcome-scene{display:block;position:relative;height:calc(var(--ykh-welcome-height,100svh) + 160svh)}
 .ykh-mobile-motion .ykh-welcome-pin{display:grid;position:sticky;top:min(var(--ykh-safe-top),calc(100svh - var(--ykh-welcome-height)));min-height:calc(100svh - var(--ykh-safe-top));isolation:isolate}
 .ykh-mobile-motion .ykh-welcome-pin:before{content:"";position:absolute;height:100svh;visibility:hidden;pointer-events:none}
 .ykh-mobile-motion .ykh-welcome-copy{position:relative;z-index:3;grid-area:1/1;align-self:center;padding:70px 22px 50px;opacity:var(--ykh-welcome-alpha,1);pointer-events:none}
 .ykh-mobile-motion .ykh-welcome-copy>*{pointer-events:auto}
 .ykh-mobile-motion .ykh-welcome-copy[inert]{pointer-events:none;visibility:hidden}
 .ykh-mobile-motion .ykh-film-track{display:contents;height:auto}
 .ykh-mobile-motion .ykh-welcome-film{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;z-index:1;clip-path:inset(var(--ykh-mobile-top,12%) var(--ykh-mobile-x,26%) var(--ykh-mobile-bottom,12%) round var(--ykh-mobile-radius,24px))}
 .ykh-mobile-motion .ykh-welcome-film .ykh-film{opacity:var(--ykh-film-intensity,.5)}
 .ykh-mobile-motion .ykh-welcome-film:after{content:"";position:absolute;inset:0;background:var(--yk-deep);opacity:var(--ykh-film-shade,.2);pointer-events:none}
 .ykh-mobile-motion .ykh-kanji{z-index:2;pointer-events:none;opacity:calc(.22 * var(--ykh-welcome-alpha,1))}
}
