/* Full-viewport menu stage. Track and image share the same panel width. */
#menu.is-menu-motion .menu-viewport{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow:hidden}
#menu.is-menu-motion .menu-grid{width:100%;gap:0;align-items:stretch}
#menu.is-menu-motion .product{flex:0 0 100%;width:100%;min-width:100%;max-width:none;overflow:visible;box-sizing:border-box}
#menu.is-menu-motion .product>img{width:100%;height:100%;inset:0;object-fit:contain;object-position:center;max-height:none;border-radius:0}
#menu.is-menu-motion .product>.product-info{width:30%;max-width:440px;margin-left:60%;padding:0}
/* Keep each product readable while its whole scene travels across the screen. */
#menu.is-menu-motion .product-info>*{opacity:1;transform:none;transition:none}
/* Photograph stays in the right column, never beneath the profile copy. */
#tentang>div{isolation:isolate;color:var(--canvas-fg);min-width:0}
#tentang>div>p{color:var(--canvas-muted);opacity:1;mix-blend-mode:normal}
#tentang>div>.quote{color:var(--canvas-fg);opacity:1;mix-blend-mode:normal}
#tentang .story-type{overflow:hidden;min-width:0;min-height:520px;padding:0 0 70px;justify-content:center;align-items:flex-start;font-size:clamp(80px,7vw,100px)}
#tentang .story-type>.about-context{left:0;right:auto;top:0;bottom:auto;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;max-width:100%;transform:translate3d(var(--story-travel,0px),var(--story-rise,0px),0)}
#tentang .story-type>.story-word{margin:0;left:0;line-height:1.02;letter-spacing:-3px}
/* Compact capacity guide, with one illustration and four retained choices. */
#menu .menu-extras{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);align-items:center;gap:clamp(30px,5vw,70px);margin-top:35px;padding-top:30px}
#menu .menu-extras>div:first-child{max-width:100%;min-width:0}
#menu .menu-extras>div:first-child>p{max-width:400px;margin-top:10px}
#menu .cup-preview{min-height:0;max-width:340px;margin:10px auto 0}
#menu .cup-large-illustration{height:240px;width:100%;max-width:290px}
#menu .cup-preview-caption{gap:20px}
#menu .cup-preview-caption strong{font-size:38px}
#menu .cup-preview-panel>p{margin-top:8px}
#menu .size-block{max-width:100%;justify-self:stretch}
#menu .cup-sizes{margin-top:10px;gap:0}
#menu button.cup-size-row{grid-template-columns:46px minmax(0,1fr) auto;min-height:84px;padding:12px 8px;gap:12px}
#menu button.cup-size-row .cup-size-icon{width:40px;height:52px}
#menu .cup-size-copy{gap:3px}
#menu .cup-size-copy b{font-size:25px}
#menu .cup-guide{margin:14px 8px 0 66px}
#menu .cup-detail{margin-top:18px}
header a.nav-cta.contact-action{white-space:nowrap;gap:15px}
@media(max-width:1100px) and (min-width:801px){#tentang .story-type{font-size:80px;min-height:450px;padding-bottom:55px}header nav{gap:22px}.links{gap:22px}}
@media(max-width:800px){
 #tentang .story-type{min-height:350px;padding:0;display:flex;flex-direction:column;gap:0;font-size:clamp(62px,10vw,80px)}
 #tentang .story-type>.story-word:nth-of-type(2){padding:3px 0}
 #tentang .story-type>.about-context{left:0;top:0;bottom:auto;width:100%;height:100%;object-fit:contain}
 #menu .menu-extras{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
 #menu .cup-preview{margin-top:10px;min-height:0;max-width:260px}
 #menu .cup-large-illustration{height:210px}
 #menu .cup-preview-caption{gap:12px;flex-wrap:wrap;justify-content:center}
 #menu .cup-preview-caption strong{font-size:33px}
 #menu button.cup-size-row{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;min-height:84px;padding:12px 4px}
 #menu button.cup-size-row .cup-size-icon{width:30px;height:42px}
 #menu .cup-use{font-size:11px}
 #menu .cup-size-row>i{font-size:11px}
 #menu .cup-guide{margin-left:4px}
}
@media(max-width:560px){
 #tentang .story-type{min-height:290px;font-size:62px;padding-bottom:25px}
 #menu .menu-extras{grid-template-columns:1fr;gap:22px}
 #menu .menu-extras>div:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:center}
 #menu .menu-extras>div:first-child>.eyebrow{grid-column:1;align-self:end}
 #menu .menu-extras>div:first-child>p{grid-column:1;align-self:start;font-size:12px}
 #menu .cup-preview{grid-column:2;grid-row:1 / span 2;margin:0;max-width:none}
 #menu .cup-large-illustration{height:170px}
 #menu .cup-preview-caption{gap:7px}
 #menu .cup-preview-caption strong{font-size:29px}
 #menu .cup-preview-caption>span{font-size:11px}
 #menu .cup-preview-panel>p{font-size:10px;margin-top:5px}
 #menu button.cup-size-row{min-height:74px}
}
@media(prefers-reduced-motion:reduce){#tentang .story-type>.about-context{transform:none}}
/* Clear reading space to the left of the vehicle; only environment is masked. */
#tentang .story-type>.about-context{-webkit-mask-image:url('editorial-v29/about-reading.svg');mask-image:url('editorial-v29/about-reading.svg')}
#tentang .story-type>.story-word{color:var(--canvas-fg);mix-blend-mode:normal;font-size:.88em}