/* The original HUMMEY, refined from the founder's walkthrough. */
:root{--hummey-paper:url('assets/paper-grain.svg')}
body,body :is(.live-backdrop,.intro,.varietals,.journey-panel,.shelf-section,.site-footer,.footer-bottom,.product-main,.product-hero,.product-info,.product-facts,.wholesale-main,.error-main,.bag-dialog,.site-header.scrolled,.mobile-menu,.journey-bottom){background-image:var(--hummey-paper);background-size:384px 384px;background-repeat:repeat;background-blend-mode:multiply}
/* Grain belongs to the colored paper surfaces; photography stays untouched. */
#live-honey{z-index:2}
.live-word{z-index:4}
.live-sidenote{z-index:7}
.live-flavor-type{inset:0;font-size:min(23vw,44svh);line-height:.86;letter-spacing:-.015em;color:#fff6e0b0;height:100%;z-index:3}
/* Keep the lower edge of every word just behind the lid, regardless of its length. */
.live-flavor-type span{top:calc(41% - .61em);bottom:auto}
.live-flavor-type span:nth-child(2),.live-flavor-type span:nth-child(3){font-size:min(19vw,40svh)}
.live-jars{top:38%;height:60%;left:28%;width:44%}
.texas-map svg{display:block}
.texas-shape{stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.toast-section:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#c4b7e2f7 0%,#c4b7e2e8 19%,#c4b7e28c 35%,#c4b7e200 57%)}
.toast-copy{z-index:1;top:62px;max-width:35%}
.toast-copy h2{font-size:clamp(62px,6.8vw,104px);line-height:.94;text-shadow:none}
.toast-copy p{font-size:16px;line-height:1.45;max-width:23ch;margin-top:25px}
.journey-harvest .journey-flower,.journey-jar .journey-flower{left:calc(50% - 96px);bottom:19%;font-size:72px;opacity:.8}
.shelf-copy .button,.live-intro .button,.taste-panel .button{justify-content:center;gap:0}
@media(min-width:761px){
 .live-intro{top:52%;max-width:58%}
 .live-intro h2{font-size:clamp(42px,4.1vw,66px)}
 .live-sidenote{top:54%;right:9%;gap:23px}
 .live-sidenote>span{font-size:70px}
 .live-sidenote p{font-size:18px;line-height:1.2}
 .live-flavor-copy{top:59%;max-width:28%}
 .live-flavor-copy h2{font-size:clamp(32px,3vw,48px)}
 .journey-text h3{font-size:clamp(78px,9.3vw,149px)}
}
@media(min-width:1900px){
 .live-word{width:92%;left:4%;top:1%}
}
@media(max-width:760px){
 .live-scene{min-height:600px}
 .live-word{top:11%}
 .live-intro{top:36%;max-width:90%}
 .live-intro h2{font-size:clamp(38px,10vw,60px)}
 .live-intro .button{margin-top:20px}
 .live-sidenote{top:63%;right:8%;gap:20px}
 .live-sidenote>span{font-size:52px}
 .live-sidenote p{font-size:13px}
 .live-flavor-copy{top:12%;display:block;max-width:90%}
 .live-flavor-copy>p{font-size:10px;margin-bottom:11px}
 .live-flavor-copy h2{font-size:clamp(25px,6.8vw,36px)}
 .live-flavor-type{inset:0;font-size:32vw;height:100%}
 .live-flavor-type span{top:calc(42% - .61em)}
 .live-flavor-type span:nth-child(2){font-size:23vw}
 .live-flavor-type span:nth-child(3){font-size:24vw}
 .live-jars{left:12%;width:76%;top:40%;height:43%}
 .live-foot{gap:8px;bottom:22px}
 .live-scroll-cue{font-size:9px}
 .varietal-stage,.taste-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
 .varietal-stage>*{min-width:0}
 .toast-section{height:720px}
 .toast-section:after{background:linear-gradient(180deg,#c4b7e2 0%,#c4b7e2f2 20%,#c4b7e28c 36%,#c4b7e200 55%)}
 .toast-copy{top:35px;max-width:none;right:var(--page-pad)}
 .toast-copy h2{font-size:clamp(56px,14vw,88px)}
 .toast-copy p{font-size:14px;margin-top:19px}
 .journey-harvest .journey-flower,.journey-jar .journey-flower{left:auto;right:var(--page-pad);bottom:auto;top:-24px;font-size:52px}
}
@media(max-width:380px){
 .live-intro h2{font-size:37px}.live-intro .button{font-size:12px;min-height:44px}
 .live-foot{justify-content:space-between}.live-scroll-cue{max-width:170px}
 .header-actions{gap:16px}.bag-open{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.live-scene{min-height:650px}}

/* The original vertical word sits behind the jar, with enough of its edge exposed to read. */
.varietal-jar{padding-top:0;min-height:590px}
.varietal-ghost{left:9%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font-size:clamp(74px,8.5vw,128px);letter-spacing:-.015em;color:#fff6e099;line-height:1;z-index:1}
.varietal-jar img{translate:6% 0}
.product-visual .product-word{left:21.5%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font-size:clamp(100px,12vw,176px);line-height:1;letter-spacing:-.015em;color:var(--cream);opacity:.5;z-index:1}
.product-visual>img{translate:8% 0}
.journey-hive .journey-text h3,.journey-jar .journey-text h3{position:relative;width:max-content}
.journey-hive .journey-text h3 .journey-flower,.journey-jar .journey-text h3 .journey-flower{left:calc(100% + 26px);right:auto;top:0;bottom:auto;font-size:.62em;opacity:.8}
/* Only the settled fourth chapter receives this larger, lower heading. */
.journey-heading{transform-origin:top left;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.hive-journey.is-jar-active .journey-heading{transform:translateY(clamp(60px,12svh,130px)) scale(1.58)}
@media(max-width:1100px) and (min-width:761px){.varietal-ghost{font-size:8.4vw}.varietal-jar{min-height:550px}.product-visual .product-word{left:18%;font-size:12vw}.product-visual>img{translate:6% 0}}
@media(max-width:760px){
 .varietal-jar{padding-top:0;height:350px;min-height:0}
 .varietal-ghost{top:50%;font-size:clamp(42px,12vw,70px);left:-1%}
 .varietal-jar img{height:285px;width:200px;translate:6% 0}
 .product-visual .product-word{left:16%;top:50%;font-size:clamp(64px,17vw,105px)}
 .product-visual>img{translate:5% 0}
 .journey-hive .journey-text h3 .journey-flower,.journey-jar .journey-text h3 .journey-flower{left:calc(100% + 24px);top:-.04em;font-size:.64em}
 .hive-journey.is-jar-active .journey-heading{transform:translateY(28px) scale(1.3)}
}
/* Give the middle copy breathing room below the oversized mark on shorter laptops. */
@media(min-width:761px) and (max-height:820px){.live-intro{top:58%}.live-sidenote{top:57%}}
.hive-journey.is-jar-active .journey-heading>p{visibility:hidden}
/* The master logo stays visible and unmodified. Honey sits behind its edges. */
.live-word>img{position:relative;z-index:1}
.live-word .honey-accent{position:absolute;display:block;height:auto;z-index:0;pointer-events:none;transform-origin:50% 35%;filter:drop-shadow(0 2px 1px #58142b16)}
@media(min-width:761px) and (min-height:900px){.hive-journey.is-jar-active .journey-heading{transform:translateY(clamp(140px,17svh,200px)) scale(1.72)}}
