/* Shared background Hero contract: gallery/detail Heroes keep their own composition. */
.cha-background-hero{position:relative;isolation:isolate;--cha-hero-cloud-height:clamp(5rem,11vw,10rem);--cha-hero-paper:#f8f5ed}
.food-page>.cha-background-hero{--cha-hero-paper:#f8f5ee}
.tea-home>.cha-background-hero{--cha-hero-paper:#f5f1e7}
.cha-background-hero>.cha-shell{position:relative;z-index:3;min-width:0}
.cha-background-hero :is(h1,h2,p){overflow-wrap:break-word}
@media(max-width:48rem){.cha-background-hero{--cha-hero-cloud-height:4.5rem}}
/* Shared hero baseline, taken from the homepage. Content may grow instead of clipping. */
:root{--cha-hero-height:clamp(40rem,56vw,53rem)}
body .tea-home .tea-intro,body .tea-overview .to-hero,body .green-page .green-hero{height:auto;min-height:var(--cha-hero-height)}
body .tea-home .tea-intro{display:flex;align-items:center}
body .tea-home .tea-intro>.tea-intro__inner{min-height:var(--cha-hero-height)}
body .tea-overview .to-hero>.cha-shell,body .green-page .green-hero>.cha-shell{padding-block:calc(var(--cha-header-height,76px) + 2rem) 3rem}
/* Bound the square gallery to the common hero height on wide layouts. */
@media(min-width:45.01rem){body .tea-detail .td-gallery{width:100%;max-width:calc((var(--cha-hero-height) - var(--cha-header-height,76px) - 10rem)/1.24);justify-self:start}}
@media(max-width:48rem){:root{--cha-hero-height:38rem}}
/* D: one shared cloud-and-water edge. Inline SVG inherits each page's paper color. */
:is(.cha-hero-cloud-transition,.green-page>.green-hero:not(.td-hero),.tea-overview>.to-hero){position:relative;isolation:isolate;--cha-hero-cloud-height:clamp(5rem,11vw,10rem)}
.cha-hero-cloud-transition{--cha-hero-paper:#f5f1e7}
.green-page>.green-hero:not(.td-hero){--cha-hero-paper:#f8f5ed}
.tea-overview>.to-hero{--cha-hero-paper:#f8f5ee}
.cha-hero-transition{display:block;position:absolute;z-index:2;left:0;bottom:-1px;width:100%;height:var(--cha-hero-cloud-height);overflow:hidden;pointer-events:none}
.cha-hero-transition__back{fill:#e2ddd1;fill:color-mix(in srgb,var(--cha-hero-paper) 86%,#6a634e)}
.cha-hero-transition__paper{fill:var(--cha-hero-paper)}
.cha-hero-transition__lines{fill:none;stroke:#8e9981;stroke-width:1.2;opacity:.65;stroke-linecap:round;stroke-linejoin:round}
.cha-hero-transition__lines>path{vector-effect:non-scaling-stroke}
:is(.green-page>.green-hero:not(.td-hero),.tea-overview>.to-hero)>.cha-shell{position:relative;z-index:3}
.cha-hero-cloud-transition>.cha-shell{z-index:3}
/* Balance the copy against the visible image area, including the lower ornamental edge. */
body .tea-overview .to-hero>.cha-shell,body .green-page .green-hero:not(.td-hero)>.cha-shell{padding-top:calc(var(--cha-header-height,76px) + .5rem);padding-bottom:calc(3rem + var(--cha-hero-cloud-height)*.45)}
@media(max-width:48rem){
 :is(.cha-hero-cloud-transition,.green-page>.green-hero:not(.td-hero),.tea-overview>.to-hero){--cha-hero-cloud-height:4.5rem}
 body .tea-overview .to-hero>.cha-shell,body .green-page .green-hero:not(.td-hero)>.cha-shell{padding-bottom:calc(3rem + var(--cha-hero-cloud-height)*.33)}
}