/* Scene height controls composition, never whether scroll motion is enabled. */
body{--header-height:76px}
.cover-sticky{height:calc(100svh - var(--header-height));min-height:0;max-height:none}
.cover:not(.webgl-failed) .three-stage{inset:20% 0 7%}
.headline :is(h1,h2){font-size:clamp(100px,min(20.5vw,32svh),328px)}
.cover-negi .headline h2{font-size:clamp(110px,min(22vw,35svh),360px)}
.scroll-explain{top:14%;bottom:auto}
.explain-panel h2{font-size:clamp(30px,4.6svh,60px);line-height:1.25;margin:14px 0}
.explain-panel>p:not(.explain-kicker){font-size:clamp(14px,1.8svh,17px);line-height:1.85}
.explain-panel>figure img{width:min(62%,190px)}
.explain-rule{margin-top:18px;padding-top:12px}
.explain-panel .article-link{margin-top:18px}
/* Middle widths retain room for both the heading and its adjoining caption. */
@media(min-width:761px) and (max-width:1100px){
 .header{gap:14px}.header nav.desktop-nav{gap:16px}.brand-note{display:none}
 .header-buy{padding:10px 15px}.brand strong{font-size:25px}
 .meal-heading h2{font-size:clamp(68px,9vw,100px)}
 .field .news-heading h2{font-size:clamp(40px,5.7vw,63px)}
 .reading-mode .cover-purchase{width:44%;gap:0 10px}
 .reading-mode .cover-purchase>p{font-size:12px}
 .reading-mode .cover-purchase .button{padding:10px;font-size:12px}
 .cover .headline>p{font-size:24px}
 .cover .scene-title{font-size:clamp(28px,3.8vw,40px)}
 .cover .scene-desc{font-size:13px}
 .cover .explain-panel h2{font-size:clamp(28px,4.5svh,40px)}
}
@media(max-width:760px){
 body{--header-height:66px}
 .cover-sticky{height:calc(100svh - var(--header-height));min-height:0;padding-inline:5%}
 .edition{height:30px;font-size:10px}
 .edition span:first-child{font-size:10px}
 .headline{padding-top:11px}
 .headline :is(h1,h2){font-size:21.7vw;line-height:1.08}
 .cover-negi .headline h2{font-size:31vw;line-height:1.04}
 .headline>p,.cover-negi .headline>p{font-size:clamp(16px,4.8vw,20px);line-height:1.4;margin-top:7px}
 .cover:not(.webgl-failed) .three-stage{inset:0}
 .cover-side.right{top:26%;right:5%}
 .round-stamp{width:66px;height:66px;font-size:9px}
 .round-stamp strong{font-size:21px}.round-stamp>span{font-size:8px}
 .vertical-type{font-size:17px;margin-top:11px}.cover-side .eyebrow{font-size:8px}
 .cover-side.left{left:5%}
 .reading-mode .cover-side.left{top:10%}
 .cover-bottom,.reading-mode .cover-bottom{left:5%;right:5%;bottom:56px;gap:10px}
 .scene-title{font-size:clamp(26px,7.7vw,33px);margin:4px 0 6px;line-height:1.18}
 .scene-desc{font-size:12px;line-height:1.7}
 .scene-index{font-size:10px}
 .cover-purchase,.reading-mode .cover-purchase{padding-top:9px;grid-template-columns:1fr 1.1fr;gap:0 10px}
 .cover-purchase>p,.reading-mode .cover-purchase>p{font-size:11px;line-height:1.4}
 .cover-purchase strong,.reading-mode .cover-purchase strong{font-size:26px;line-height:1.15}
 .cover-purchase>span{font-size:10px}
 .cover-purchase .button,.reading-mode .cover-purchase .button{font-size:12px;line-height:1.4;padding:10px;min-height:50px}
 .cover-foot{left:5%;right:5%;height:44px;gap:5px}
 .cover-foot>a{font-size:10px;min-width:73px;gap:6px}
 .scene-step-buttons button{min-height:40px;width:44px;font-size:10px}
 .scroll-explain{left:6%;right:6%;top:38%;bottom:auto}
 .explain-kicker{font-size:11px;padding-top:8px}
 .cover .explain-panel h2,.cover-negi .explain-panel:last-child h2{font-size:clamp(22px,5.8vw,26px);line-height:1.25;margin:9px 0}
 .cover .explain-panel h2 br{display:none}
 .cover .explain-panel>p:not(.explain-kicker){font-size:14px;line-height:1.8}
 .explain-rule{margin-top:12px;padding-top:9px;font-size:10px}
 .explain-panel .article-link{margin-top:11px;padding:8px 0;font-size:12px;line-height:1.5}
 .explain-panel>figure{display:none}
 .meal-heading h2{font-size:clamp(49px,14.5vw,90px)}
 .meal-heading>p{font-size:10px;line-height:1.6}
 .field .news-heading h2{font-size:clamp(31px,9.4vw,62px)}
 .field .news-heading>p{font-size:9px}
 .field .news-heading{gap:8px}
 .shop-intro{min-width:0}.shop-intro>span{white-space:normal}
 .product-origin{white-space:nowrap}
 .footer-top{flex-wrap:wrap;gap:16px}.footer-top>.back-top{margin-left:auto}
 .footer-bottom{align-items:flex-start;flex-wrap:wrap;gap:13px}
 .footer-bottom>div{flex-wrap:wrap;gap:8px 14px}
}

@media(max-width:760px){
body.short-viewport .headline{padding-top:8px}
body.short-viewport .headline :is(h1,h2){font-size:min(21.7vw,15svh)}
body.short-viewport .cover-negi .headline h2{font-size:min(31vw,19svh)}
body.short-viewport .headline>p,body.short-viewport .cover-negi .headline>p{font-size:16px;margin-top:4px}
body.short-viewport .scroll-explain{top:37%}
body.short-viewport .cover .explain-panel h2,body.short-viewport .cover-negi .explain-panel:last-child h2{font-size:22px;margin:8px 0;line-height:1.22}
body.short-viewport .cover .explain-panel>p:not(.explain-kicker){font-size:13px;line-height:1.75}
body.short-viewport .explain-rule{margin-top:10px;padding-top:7px}
body.short-viewport .explain-panel .article-link{margin-top:9px;font-size:12px;padding:6px 0}
body.short-viewport .scene-title{font-size:27px}
body.short-viewport .scene-desc{font-size:11px}
body.short-viewport .round-stamp{width:57px;height:57px}
body.short-viewport .round-stamp strong{font-size:18px}
body.short-viewport .vertical-type{font-size:15px}
body.short-viewport .cover-side .eyebrow{font-size:7px}


}
/* Explicitly paused/reduced-motion layouts remain ordinary readable document flow. */
body.motion-off .cover-sticky,.cover.webgl-failed .cover-sticky{height:auto;min-height:0;max-height:none}
body.motion-off .cover .three-stage,.cover.webgl-failed .three-stage{position:relative;inset:auto;height:280px}
body.motion-off .scroll-explain,.cover.webgl-failed .scroll-explain{position:relative;inset:auto}
body.motion-off .explain-panel>figure,.cover.webgl-failed .explain-panel>figure{display:flex}

body.narrow-short .scroll-explain{top:28%}


@media(min-width:761px) and (max-width:1100px){
 .explain-panel>figure img{width:min(60%,145px)}
}

body.landscape-viewport{--header-height:56px}
body.landscape-viewport .header{height:56px;min-height:56px;padding-block:5px}
body.landscape-viewport .cover-sticky{top:56px;height:calc(100svh - 56px);padding-inline:4%}
body.landscape-viewport .edition{height:24px;font-size:10px}
body.landscape-viewport .headline{padding-top:5px}
body.landscape-viewport .headline :is(h1,h2),body.landscape-viewport .cover-negi .headline h2{font-size:min(19vw,27svh);line-height:1}
body.landscape-viewport .headline>p,body.landscape-viewport .cover-negi .headline>p{font-size:15px;margin-top:4px}
body.landscape-viewport .cover:not(.webgl-failed) .three-stage{inset:20% 0 6%}
body.landscape-viewport .cover-side{display:none}
body.landscape-viewport .cover-bottom,body.landscape-viewport .reading-mode .cover-bottom{left:4%;right:4%;bottom:43px;display:flex;align-items:flex-end;gap:20px}
body.landscape-viewport .scene-copy{width:47%;max-width:47%}
body.landscape-viewport .scene-title{font-size:23px}
body.landscape-viewport .scene-desc{font-size:11px;line-height:1.5}
body.landscape-viewport .cover-purchase,body.landscape-viewport .reading-mode .cover-purchase{width:47%;display:grid;grid-template-columns:1fr 1.2fr;border-left:0;border-top:1px solid var(--ink);padding-top:6px;gap:0 8px}
body.landscape-viewport .cover-purchase>p,body.landscape-viewport .reading-mode .cover-purchase>p{grid-row:1;grid-column:1;font-size:10px}
body.landscape-viewport .cover-purchase strong,body.landscape-viewport .reading-mode .cover-purchase strong{display:inline;font-size:23px}
body.landscape-viewport .cover-purchase>span{grid-row:2;grid-column:1;font-size:9px}
body.landscape-viewport .cover-purchase .button,body.landscape-viewport .reading-mode .cover-purchase .button{grid-row:1/3;grid-column:2;padding:8px;font-size:11px;min-height:43px;margin:0}
body.landscape-viewport .scroll-explain{left:49%;right:4%;top:8%;bottom:auto}
body.landscape-viewport .explain-kicker{font-size:10px;padding-top:7px}
body.landscape-viewport .cover .explain-panel h2,body.landscape-viewport .cover-negi .explain-panel:last-child h2{font-size:21px;line-height:1.2;margin:8px 0}
body.landscape-viewport .cover .explain-panel h2 br{display:none}
body.landscape-viewport .cover .explain-panel>p:not(.explain-kicker){font-size:12px;line-height:1.65}
body.landscape-viewport .explain-panel>figure{display:none}
body.landscape-viewport .explain-rule{margin-top:8px;padding-top:7px;font-size:10px}
body.landscape-viewport .explain-panel .article-link{font-size:11px;margin-top:8px;padding:6px 0}
body.landscape-viewport .cover-foot{height:36px;gap:10px;left:4%;right:4%}
body.landscape-viewport .cover-foot>a{font-size:10px;min-height:34px}
body.landscape-viewport .scene-step-buttons button{min-height:34px;padding:5px 10px;flex-direction:row;width:auto;font-size:10px}


body.motion-off .cover .cover-sticky{position:relative;top:0;height:auto;min-height:0;max-height:none}
body.motion-off .cover:not(.webgl-failed) .three-stage{position:relative;inset:auto;height:280px}
body.motion-off .cover .scroll-explain{position:relative;inset:auto;opacity:1}
body.motion-off .cover .cover-bottom{position:relative;inset:auto}
/* Short portrait screens give the explanation a column beside the photograph. */
body.very-short-portrait .headline{padding-top:4px}
body.very-short-portrait .headline :is(h1,h2){font-size:18vw}
body.very-short-portrait .cover-negi .headline h2{font-size:23vw}
body.very-short-portrait .headline>p{font-size:14px;margin-top:3px}
body.very-short-portrait .scene-desc{display:none}
body.very-short-portrait .reading-mode .cover-side.left{display:none}
body.very-short-portrait .scroll-explain{left:37%;right:5%;top:8%;bottom:auto}
body.very-short-portrait .cover .explain-panel h2,body.very-short-portrait .cover-negi .explain-panel:last-child h2{font-size:18px;line-height:1.22;margin:7px 0}
body.very-short-portrait .cover .explain-panel>p:not(.explain-kicker){font-size:12px;line-height:1.6}
body.very-short-portrait .explain-kicker{font-size:9px;padding-top:6px;letter-spacing:0}
body.very-short-portrait .explain-panel .article-link{font-size:11px;line-height:1.5;margin-top:8px;padding:6px 0;gap:5px}
body.very-short-portrait .explain-rule{font-size:9px;margin-top:8px;padding-top:6px;gap:6px}
body.motion-off.very-short-portrait .cover .scroll-explain{inset:auto}
.header .brand{flex-shrink:0}.header .brand strong,.header-buy,.contents-toggle{white-space:nowrap}
@media(max-width:360px){
 .header{gap:6px;padding-inline:4%}
 .header .brand{gap:5px}.header .brand img{width:22px}.header .brand strong{font-size:20px}
 .header-actions{gap:5px}.motion-toggle{width:32px;height:32px}
 .contents-toggle{font-size:10px;gap:2px;padding:2px;min-width:34px}.contents-toggle>span{font-size:12px}
 .header-buy{font-size:11px;gap:8px;padding:9px 11px;min-height:38px}.header-buy span{font-size:20px}
}
body.very-short-portrait .cover-side.left{display:none}

/* Drawn cutlery cannot switch to an operating system's emoji font. */
.cutlery-mark svg{display:block;width:100%;height:100%;overflow:visible}
.meal-heading h2 .cutlery-mark{display:inline-block;width:.65em;height:.65em;font:inherit;vertical-align:.01em;margin-left:.10em;transform:rotate(4deg)}
.footer-word>.cutlery-mark{display:block;flex:0 0 auto;width:.4em;height:.4em;font:inherit;transform:rotate(-9deg)}

/* Reserve a real rail beside the photograph, even when the eyebrow fades. */
.cover-side.left{width:90px}
.cover-negi .cover-side.left{width:132px}
@media(max-width:760px){
 .cover-side.left{width:50px}
 .cover-negi .cover-side.left{width:76px}
}