/* P2 only. Layout/motion remain code-owned; media/text live in fixed SCF sections. */
.yokocho-homepage .yk-header{position:fixed;top:0;left:0;right:0}
.admin-bar.yokocho-homepage .yk-header{top:var(--yk-shell-admin-offset,32px)}
.yokocho-homepage .ykh-home{padding:0;overflow-wrap:normal;background:var(--yk-ink)}
.ykh-home section{position:relative;isolation:isolate}
.ykh-home h1,.ykh-home h2{color:#fff;text-transform:uppercase;margin:0 0 32px;font-weight:400;letter-spacing:-.055em}
.ykh-home h1 span,.ykh-home h2 span{display:block}
.ykh-home h2{font:400 clamp(32px,4.5vw,72px)/.98 var(--yk-extended)}
.ykh-home h2 span+span{font-family:var(--yk-display);font-size:.65em;line-height:1.12;letter-spacing:-.04em}
.ykh-prose{font:400 17px/1.55 var(--yk-body);max-width:550px}
.ykh-prose p{margin:0 0 28px}
.ykh-actions{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:32px}
.ykh-home .yk-button{min-height:34px;padding:8px 30px;font-size:14px;border-radius:4px;white-space:normal;line-height:1.15}
.ykh-home .ykh-outline{background:transparent;border:2px solid #fff;color:#fff;padding-block:6px}
.ykh-home a.ykh-outline:hover{background:#fff;color:var(--yk-deep)}
.ykh-home .ykh-pending{cursor:default}
.ykh-image{display:block;width:100%;height:100%;object-fit:cover}
.ykh-hero{height:100svh;min-height:740px;overflow:hidden}
.ykh-hero-background{position:absolute;inset:0;z-index:-2}
.ykh-hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--yk-ink),transparent 20%)}
.ykh-hero-copy{position:absolute;left:54px;top:46%;transform:translateY(-50%);z-index:2;width:652px;max-width:48%}
.ykh-hero .yk-eyebrow{color:white;font-size:16px;letter-spacing:.3em;margin-bottom:22px;white-space:nowrap}
.ykh-hero h1{font:400 120px/.88 var(--yk-display);letter-spacing:-.055em;margin-bottom:38px}
.ykh-hero .ykh-prose{max-width:600px;font-size:18px}
.ykh-hero .ykh-actions{margin-top:30px}
.ykh-bowl{position:absolute;z-index:1;bottom:0;right:0;width: min(66%,900px);height:auto;object-fit:contain}
.ykh-story{background:var(--yk-deep)}
.ykh-story-stage{position:relative;overflow:hidden}
.ykh-welcome-copy{padding:140px 40px 60px;width:45%;position:relative;z-index:2}
.ykh-welcome-copy h2 span:first-child{font-family:var(--yk-display);font-size:.65em}
.ykh-welcome-copy h2 span+span{font-family:var(--yk-extended);font-size:1em}
.ykh-kanji{position:absolute;inset:5% 2% 40% 60%;background:url('../homepage/welcome.webp') center/contain no-repeat;color:transparent;pointer-events:none}
.ykh-welcome-film{position:relative;width:100%;height:80svh;min-height:500px;background:var(--yk-deep)}
.ykh-film{display:block;width:100%;height:100%;object-fit:cover;background:var(--yk-deep)}
.ykh-video-toggle{position:absolute;right:20px;bottom:20px;z-index:5;padding:10px 16px;background:var(--yk-ink);color:#fff;border:1px solid #fff;border-radius:4px;font:400 13px/1.3 var(--yk-body);cursor:pointer}
.ykh-ramen{display:grid;grid-template-columns:1fr 1.1fr;min-height:100svh;align-items:center;padding:70px 0 70px 40px;position:relative;isolation:isolate;background:var(--yk-deep);scroll-margin-top:150px}
.ykh-ramen:before{content:"";position:absolute;inset:5% 43% 20% 2%;background:url('../homepage/ramen.webp') center/contain no-repeat;z-index:-1}
.ykh-ramen-copy{padding-right:7%;position:relative;z-index:1}
.ykh-ramen-image{height:100%;max-height:100svh;object-fit:contain;object-position:right center;mask-image:linear-gradient(0deg,transparent,#000 12%,#000 90%,transparent)}
/* Only JS + full desktop enable the scroll composition. Default is linear and readable. */
.ykh-story.ykh-motion{height:300svh}
.ykh-motion .ykh-story-stage{position:sticky;top:0;height:100svh}
.ykh-motion .ykh-welcome-copy{position:absolute;left:40px;top:calc(50% + var(--ykh-welcome-offset,15vh));transform:translateY(-50%);padding:0;width:38%;opacity:var(--ykh-copy,1)}
.ykh-motion .ykh-kanji{inset:45% 2% 10% 60%;opacity:var(--ykh-copy,1)}
.ykh-motion .ykh-welcome-film{position:absolute;inset:0;width:100%;height:100%;min-height:0;clip-path:inset(var(--ykh-inset-top,30%) var(--ykh-inset-x,40%) var(--ykh-inset-bottom,6%));z-index:1}
.ykh-motion .ykh-welcome-film .ykh-video-toggle{right:auto;left:50%;bottom:calc(var(--ykh-inset-bottom,6%) + 16px);transform:translateX(-50%)}
.ykh-motion .ykh-welcome-copy{z-index:2;pointer-events:var(--ykh-events,auto)}
.ykh-motion .ykh-ramen{position:absolute;inset:0;transform:translateY(var(--ykh-ramen-y,100%));z-index:3;min-height:0}
.ykh-tile{position:relative;overflow:hidden;border-radius:24px;background:var(--yk-deep);min-height:0}
.ykh-chef{display:grid;grid-template-columns:1fr 1fr;padding:0 40px 20px;gap:40px;min-height:100svh;background:linear-gradient(var(--yk-green),var(--yk-ink));align-items:center}
.ykh-chef-photo{align-self:stretch;overflow:hidden;border-radius:24px;min-height:720px}
.ykh-chef-photo img{object-position:center 45%;mask-image:linear-gradient(0deg,transparent,#000 10%)}
.ykh-chef-copy{padding:70px 0 90px;position:relative;isolation:isolate}
.ykh-chef-copy .ykh-prose{max-width:540px}
.ykh-chef-kanji{display:block;position:absolute;right:0;bottom:-100px;z-index:-1;width:90%;height:220px;max-width:500px;color:transparent;background:url('../homepage/chef.webp') center/contain no-repeat}
.ykh-location{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:140px 40px;min-height:100svh;background:linear-gradient(var(--yk-green) 50%,var(--yk-deep))}
.ykh-location:before{content:"";position:absolute;inset:0 8% 25%;z-index:-1;background:url('../homepage/location.webp') center/contain no-repeat}
.ykh-location h2{font-size:48px;margin-bottom:0}
.ykh-location address{font:400 30px/1.1 var(--yk-display);color:var(--yk-gold);text-transform:uppercase;margin:32px 0 40px;font-style:normal}
.ykh-location .ykh-actions{justify-content:center;margin:0}
.ykh-hours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;max-width:1200px;margin:48px auto 0;gap:12px}
.ykh-hours>div{padding:16px 7px;border:1px solid transparent;border-radius:12px;display:flex;flex-direction:column;justify-content:center}
.ykh-hours .ykh-today{border-color:var(--yk-gold)}
.ykh-hours dt{font:700 12px/1.4 var(--yk-body);letter-spacing:.07em;text-transform:uppercase}
.ykh-hours small{display:block;color:var(--yk-gold);font-size:12px;margin:4px 0}
.ykh-hours dd{font-size:13px;margin:7px 0 0}
.ykh-hours [hidden]{display:none!important}
.ykh-hours-status{margin:0 0 22px;color:var(--yk-gold);font:700 17px/1.5 var(--yk-body);letter-spacing:.08em;text-transform:uppercase}
.ykh-open-now{width:max-content;margin:10px 0 0;color:var(--yk-gold);font:italic 400 15px/1.3 var(--yk-body);letter-spacing:0;text-transform:none;transform:rotate(-7deg);transform-origin:center}.ykh-open-now[hidden]{display:none!important}
.ykh-closing{height:auto;aspect-ratio:1672/941;position:relative;background:var(--yk-ink)}
.ykh-closing:after{content:"";position:absolute;inset:0;background:linear-gradient(var(--yk-deep),transparent 20%,transparent 75%,var(--yk-ink))}
.yokocho-homepage .yk-footer{padding-top:20px;background:var(--yk-ink)}
.ykh-review-note{position:fixed;left:12px;bottom:8px;z-index:21;margin:0;background:var(--yk-ink);padding:6px 10px;border:1px solid var(--yk-gold);font-size:11px}

@media(min-width:1600px){.ykh-bowl{right:5%}.ykh-hero-copy{max-width:652px}}
@media(max-width:1100px){.ykh-hero-copy{max-width:65%}.ykh-hero h1{font-size:100px}.ykh-bowl{right:-15%;width:80%}.ykh-hero .yk-eyebrow{font-size:12px}.ykh-home h2{font-size:40px}.ykh-welcome-copy{width:65%}.ykh-hours{gap:3px}.ykh-hours dt{font-size:10px}}
@media(max-width:900px){
    .ykh-hero{min-height:900px}
    .ykh-hero-copy{left:32px;right:32px;top:190px;transform:none;max-width:none;width:auto}
    .ykh-hero h1{font-size:clamp(62px,11vw,100px)}
    .ykh-hero .ykh-prose{max-width:520px}
    .ykh-bowl{width:80%;max-width:700px;right:-10%;bottom:-3%}
    .ykh-welcome-copy{width:80%;padding:100px 32px 50px}
    .ykh-welcome-film{height:70svh;min-height:440px}
    .ykh-kanji{inset:0 0 50% 45%}
    .ykh-ramen{padding:90px 0 60px 32px;min-height:800px;grid-template-columns:1.1fr 1fr}
    .ykh-chef{padding-inline:24px;gap:28px;min-height:800px}
    .ykh-chef-photo{min-height:700px}
    .ykh-prose{font-size:16px}
    .ykh-location{padding:90px 24px 120px;min-height:780px}
    .ykh-location h2{font-size:36px}
    .ykh-location address{font-size:26px}
    .ykh-hours{grid-template-columns:repeat(4,minmax(0,1fr));max-width:600px}
    .ykh-hours dt{font-size:11px}
}
@media(max-width:600px){
    .admin-bar.yokocho-homepage .yk-header{top:var(--yk-shell-admin-offset,46px)}
    .ykh-home h2{font-size:clamp(26px,7.5vw,40px);letter-spacing:-.04em;margin-bottom:26px}
    .ykh-home .yk-eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:24px}
    .ykh-home .yk-button{font-size:11px;min-height:44px;padding:10px 16px}
    .ykh-actions{gap:12px;margin-top:25px}
    .ykh-hero{height:100svh;min-height:820px}
    .ykh-hero-copy{left:22px;right:22px;top:172px}
    .ykh-hero .yk-eyebrow{white-space:normal;max-width:280px;font-size:8px;line-height:1.8;letter-spacing:.22em;margin-bottom:20px}
    .ykh-hero h1{font-size:clamp(48px,15vw,86px);line-height:.95;margin-bottom:26px}
    .ykh-hero .ykh-prose{font-size:15px;max-width:330px}
    .ykh-hero .ykh-prose p{margin-bottom:0}
    .ykh-hero .ykh-actions{margin-top:22px}
    .ykh-bowl{width:120%;max-width:none;right:-20%;bottom:-1%}
    .ykh-hero-background{object-position:61% center;filter:brightness(.75)}
    .ykh-welcome-copy{width:100%;padding:80px 22px 40px}
    .ykh-kanji{inset:0 0 65% 45%;opacity:.45}
    .ykh-prose{font-size:16px;line-height:1.6}
    .ykh-welcome-film{height:70svh;min-height:400px;max-height:650px}
    .ykh-ramen{display:flex;flex-direction:column;padding:80px 0 0;min-height:0;gap:20px}
    .ykh-ramen-copy{padding:0 22px;align-self:stretch}
    .ykh-ramen:before{inset:0 0 50% 10%;opacity:.5}
    .ykh-ramen-image{height:auto;max-height:650px}
    .ykh-tile{border-radius:16px}
    .ykh-video-toggle{right:10px;bottom:10px;padding:10px;font-size:12px;min-height:44px}
    .ykh-chef{display:flex;flex-direction:column;gap:0;padding:10px 22px 40px;min-height:0}
    .ykh-chef-photo{min-height:0;height:520px;width:100%}
    .ykh-chef-copy{padding:48px 0 0}
    .ykh-chef-kanji{position:relative;right:auto;bottom:auto;height:130px;margin-top:30px}
    .ykh-location{padding:75px 22px 100px;min-height:0}
    .ykh-location h2{font-size:clamp(24px,7vw,36px);line-height:1.2}
    .ykh-location address{font-size:20px;margin:30px 0;line-height:1.3}
    .ykh-hours{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:32px}
    .ykh-hours>div{padding:13px 5px}.ykh-hours dt{font-size:11px}
    .ykh-location:before{inset:0 0 45%;opacity:.65}
    .ykh-closing{aspect-ratio:1/1}.ykh-closing img{object-position:50% center}
}
@media(prefers-reduced-motion:reduce){.ykh-home *, .ykh-home *:before, .ykh-home *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* P2 desktop refinement: viewport stages and depth, isolated from the P1 shell. */
.ykh-video-toggle{width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0;opacity:0}
.ykh-video-toggle:focus-visible{width:44px;height:44px;clip-path:none;opacity:1;right:16px;left:auto;bottom:16px;padding:8px;border:1px solid var(--yk-gold);border-radius:50%;outline:2px solid white;outline-offset:3px;transform:none}
@media(min-width:1000px){
    .ykh-hero{height:100svh;min-height:640px}
    .ykh-hero:after{background:linear-gradient(0deg,var(--yk-ink) 2%,transparent 100%);inset:auto 0 0;height:23.1vh}
    .ykh-story-stage:before,.ykh-story-stage:after,.ykh-ramen:after,.ykh-mosaic:before,.ykh-mosaic:after,.ykh-chef:before,.ykh-chef:after{content:"";position:absolute;pointer-events:none}
    .ykh-story-stage:before{inset:0;z-index:1;background:linear-gradient(var(--yk-ink),transparent 28.6%,transparent 76.7%,var(--yk-ink) 98%)}
    .ykh-story-stage:after{inset:0 50% 0 0;z-index:1;background:linear-gradient(90deg,var(--yk-ink),transparent);opacity:var(--ykh-shade,1)}
    .ykh-motion .ykh-welcome-film{z-index:0}
    .ykh-motion .ykh-welcome-film .ykh-video-toggle:focus-visible{right:calc(var(--ykh-inset-x,40%) + 16px);left:auto;bottom:calc(var(--ykh-inset-bottom,6%) + 16px);transform:none}
    /* The composition stays still; its viewport mask opens from the bottom.
       Equivalent to Framer's opposing stage/content translations, without nested transforms. */
    .ykh-motion .ykh-ramen{transform:none;clip-path:inset(var(--ykh-ramen-y,100%) 0 0);z-index:4}
    .ykh-ramen:after{inset:0;z-index:2;background:linear-gradient(var(--yk-ink),transparent 28.6%,transparent 76.7%,var(--yk-ink) 98%)}
    .ykh-ramen-copy{z-index:3}
    .ykh-mosaic:before{inset:0 0 auto;height:25%;z-index:2;background:linear-gradient(var(--yk-ink),transparent 90%)}
    .ykh-mosaic:after,.ykh-chef:before{inset:0 auto 0 0;width:15%;z-index:2;background:linear-gradient(90deg,var(--yk-ink) 22.8%,transparent)}
    .ykh-chef{min-height:100svh;gap:40px;position:relative}
    .ykh-chef-photo{min-height:0;height:calc(100svh - 20px)}
    .ykh-chef-copy{padding:60px 0 90px}
    .ykh-chef:after{inset:auto 0 0;height:35%;z-index:2;background:linear-gradient(transparent,var(--yk-ink) 87.5%)}
    .ykh-chef-copy{z-index:3}
    .ykh-chef-kanji{width:100%;max-width:none;height:320px;bottom:-170px}
    .ykh-bowl{right:100px}
    .ykh-location{min-height:100svh}
    .ykh-visit{position:relative;background:var(--yk-green);isolation:isolate}
    .ykh-visit-motion{height:220svh}
    .ykh-visit-motion .ykh-chef{position:absolute;inset:0 0 auto;height:100svh;min-height:0;z-index:2;overflow:hidden;mask-image:linear-gradient(#000 94%,transparent 100%)}
    .ykh-visit-motion .ykh-location{position:sticky;top:0;height:100svh;min-height:0;z-index:1;padding-block:100px}
    /* Footer remains the shared P1 component; reserve its measured height in the final viewport. */
    .ykh-closing{height:max(300px,calc(100svh - var(--ykh-footer-height,230px)));aspect-ratio:auto}
    .ykh-closing:after{background:linear-gradient(var(--yk-deep),transparent 25%,transparent 65%,var(--yk-ink))}
}
@media(min-width:1000px) and (max-height:749px){
    .ykh-chef{min-height:780px}.ykh-chef-photo{height:760px}
    .ykh-location{min-height:720px}
}

#yk-enter{scroll-margin-top:150px}