.ui-home{timeline-scope:--bowls-cover;container-type:inline-size}
.ui-header{border-bottom-color:transparent}
.ui-home-hero{position:relative;z-index:0;overflow:clip;background:#FDE7C9;background-image:linear-gradient(var(--rice),#FDE7C9);background-size:100% 96px;background-repeat:no-repeat;color:var(--ink)}
.ui-home-copy{position:relative;z-index:1;padding-top:var(--space-6);padding-bottom:var(--space-4)}
.ui-home-copy p{max-width:65ch}
.ui-home-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ui-home-actions .ui-btn{padding-inline:var(--space-4)}
/* Source geometry comes from heroScene metadata through the template.
   Only portrait viewports up to 899px use solo mode, including without JS. */
.ui-home-hero{
 --home-title-lines:1;--home-description-lines:2;--home-action-rows:1;
 --home-copy-fallback:calc(var(--space-6) + var(--space-4) * 3 + var(--text-h1) * 1.15 * var(--home-title-lines) + var(--text-body) * 1.5 * var(--home-description-lines) + (var(--text-body) * 1.5 + var(--space-3) * 2 + var(--line) * 2) * var(--home-action-rows) + var(--space-2) * (var(--home-action-rows) - 1));
 --home-above:91px;
 --home-available:max(280px,calc(100svh - var(--home-above) - var(--home-copy-height,var(--home-copy-fallback))));
 --home-whole:1;
}
/* Reserve the unchanged bilingual copy from the existing type/space tokens.
   JS measures wrapping precisely when fonts or user text settings differ. */
:root:lang(en) .ui-home-hero{--home-title-lines:2}
@media(min-width:378px){:root:lang(en) .ui-home-hero{--home-title-lines:1}}
@media(max-width:343px){:root:lang(en) .ui-home-hero{--home-action-rows:2}}
@media(min-width:686px){:root:lang(en) .ui-home-hero{--home-description-lines:1}}
@media(min-width:493px){:root:lang(zh) .ui-home-hero{--home-description-lines:1}}
.ui-home-scene{
 --scene-unit:min(calc(var(--home-available) / var(--design-height)),calc(100cqw / var(--source-width)),1.2px);
 position:relative;height:calc(var(--design-height) * var(--scene-unit));
}
.ui-home-piece{position:absolute;max-width:none;width:calc(var(--piece-width) * var(--scene-unit));height:calc(var(--piece-height) * var(--scene-unit));bottom:calc(var(--piece-bottom) * var(--scene-unit))}
.ui-home-piece--left{left:0}
.ui-home-piece--right{right:0}
.ui-home-piece--center{left:calc((100% - var(--source-width) * var(--scene-unit)) / 2 + var(--piece-x) * var(--scene-unit))}
.ui-home-counter{position:absolute;inset:auto 0 0;height:calc(var(--counter-height) * var(--scene-unit));background-image:var(--counter-image);background-repeat:repeat-x;background-size:calc(var(--counter-width) * var(--scene-unit)) 100%}
@media (max-width: 899px) and (orientation: portrait){
 .ui-home-hero{--home-whole:0}
 .ui-home-scene{--scene-unit:min(calc(var(--home-available) / var(--design-height)),calc(100cqw / var(--solo-width)))}
 .ui-home-piece--left,.ui-home-piece--right{display:none}
 .ui-home-piece--center{left:calc(50% + (var(--piece-x) - var(--solo-center)) * var(--scene-unit))}
}
/* The flat sheet starts flush below the artwork, with no overlap at rest.
   Content and footer stay one continuous opaque sheet in document flow. */
.ui-home-content{position:relative;z-index:1;background:var(--rice);view-timeline:--bowls-cover block;view-timeline-inset:var(--header-height) max(0px,calc(100svh - var(--header-height) - var(--home-hero-height,100svh)))}
.ui-home~.ui-footer{position:relative;z-index:1;margin-top:0;padding-top:var(--space-12);background:var(--rice);color:var(--ink)}
.ui-home~.ui-footer .ui-link{color:var(--ink)}
.ui-home~.ui-footer :is(.ui-footer-action,.ui-footer-content .ui-link){min-height:var(--target)}
.ui-home-section{padding-top:var(--space-8)}
.ui-home-section>h2{margin-bottom:var(--space-3)}
.ui-home-bowls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.ui-home-includes{max-width:420px}
.ui-home #visit p{max-width:65ch;margin-bottom:0}
@media(min-width:600px){.ui-home-bowls{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}}

/* Enhancement only: setting data-pin changes neither size nor initial position. */
@media(prefers-reduced-motion:no-preference){
 .ui-home-hero[data-pin]{position:sticky;top:var(--header-height)}
 @supports(animation-timeline:view()){
  .ui-home-hero[data-pin] .ui-home-scene{animation:kitchen-cover-art linear both;animation-timeline:--bowls-cover;animation-range:entry 0% entry 100%}
  .ui-home-hero[data-pin] .ui-home-copy{animation:kitchen-cover-copy linear both;animation-timeline:--bowls-cover;animation-range:entry 0% entry 100%}
 }
}
@keyframes kitchen-cover-art{from{opacity:1}to{opacity:.45}}
@keyframes kitchen-cover-copy{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.ui-home-hero{position:relative}.ui-home-copy,.ui-home-scene{animation:none}}
@media(min-width:768px){
 .ui-home #visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-8);align-items:start}
 .ui-home #visit h2{grid-column:1/-1}
 .ui-home #visit address{grid-column:1;grid-row:2}
 .ui-home #visit>a{grid-column:1;justify-self:start}
 .ui-home #visit p{grid-column:2;grid-row:2/4}
}
@media(min-width:900px){
 .ui-home-bowls{grid-template-columns:repeat(4,minmax(0,1fr))}
 .ui-home #your-bowl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto min-content 1fr;column-gap:var(--space-8);align-items:start}
 .ui-home #broths{position:absolute}
 .ui-home #your-bowl>h2{grid-column:1/-1}
 .ui-home-build-copy{grid-column:1;grid-row:2}
 .ui-home-includes{grid-column:2;grid-row:2/4;width:100%}
 .ui-home #your-bowl>.ui-link{grid-column:1;grid-row:3;justify-self:start}
}

.ui-home-extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4) var(--space-2)}
.ui-home-extras .ui-extra-name{font-size:var(--text-secondary)}
.ui-home-extras .ui-extra-price{font-size:var(--text-body)}
@media(min-width:900px){.ui-home-extras{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}}