/* One continuous stone/sage canvas. Warm ivory belongs to the pouch. */
.inline-flavor-notes[hidden]{display:none}
.flavor-item{min-width:0}
.flavor-item>.flavor{width:100%;height:100%}
@media(max-width:768px){
  html{overflow-anchor:none}
  .blends{overflow-anchor:none}
  .blends .flavor-list{grid-template-columns:1fr;gap:0}
  .flavor-item{border-bottom:1px solid var(--line);padding-block:12px}
  .flavor-item>.flavor{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:16px;align-content:center;text-align:left;height:auto;min-height:140px;padding:12px 22px 12px 0!important}
  .flavor-item .ingredient-art{grid-column:1;grid-row:1 / span 4;width:100%;align-self:center;margin:0}
  .flavor-item .flavor strong,.flavor-item .flavor-sub,.flavor-item .flavor small,.flavor-item .ingredients{grid-column:2}
  .flavor-item .flavor strong{font-size:23px;margin-bottom:4px}
  .flavor-item .flavor small{margin:4px 0}
  .flavor-item .flavor:after{content:'+';position:absolute;right:0;top:12px;color:var(--ink);font:24px/1 var(--body);background:none;clip-path:none;width:auto;height:auto;left:auto;bottom:auto}
  .flavor-item .flavor[aria-expanded=true]:after{content:'−'}
  .blends .flavor-detail{display:none}
  .inline-flavor-notes{padding:6px 8px 12px;border:0;text-align:left}
  .inline-flavor-notes>p:last-child{font-size:18px;line-height:1.6;color:var(--ink);margin:0}
}
.follow{background:var(--paper)}
.hero{width:100%}
.hero .status{margin:0 0 14px}
.flavor,.flavor:nth-child(odd),.uses article{border:0!important}
/* Lift the paper in the existing illustrations to white; multiply lets the
   shared page color show through without tinting the pouch or kitchen scene. */
.ingredient-art,.food-art{filter:brightness(1.08) contrast(1.16);mix-blend-mode:multiply!important}
.blends.section{padding-block:25px 30px}
.blends .section-heading{margin-bottom:16px}
.development-heading{display:flex;align-items:center;gap:20px;margin:0!important;font:700 11px/1.5 var(--body);letter-spacing:2.6px;text-transform:uppercase;color:var(--ink)}
.development-heading:before,.development-heading:after{content:'';height:1px;background:var(--line);flex:1}
.ingredient-art{max-width:208px;margin:0 auto 6px;aspect-ratio:3/2!important}
.flavor{padding:0 12px 16px!important}
.flavor strong{font-size:24px;min-height:0;margin-bottom:5px;line-height:1.05}
.flavor-sub{font-size:11px;min-height:0;line-height:1.5;color:var(--ink)}
.flavor small{font-size:13px;margin:7px 0;color:#343b35}
.ingredients{font:500 13px/1.65 var(--body);letter-spacing:.2px;text-transform:none;color:#292e29}
.blends .flavor-detail{--note-accent:#435d3c;position:relative;max-width:880px;min-height:0;margin:32px auto 0;padding-top:25px}
.flavor-detail:before{content:'';position:absolute;top:0;left:calc(50% - 44px);width:88px;height:5px;background:var(--note-accent);clip-path:polygon(0 28%,96% 0,100% 72%,3% 100%)}
.detail-kicker{font:700 11px/1.5 var(--body);letter-spacing:2px;text-transform:uppercase;color:#343b35;margin-bottom:8px}
.flavor-detail #detail-label{font:700 32px/1.15 var(--display);letter-spacing:-.6px;text-transform:none;color:var(--ink);margin-bottom:12px}
.blends .flavor-detail>p:last-child{font-size:20px;line-height:1.6;color:var(--ink);max-width:790px;margin-inline:auto}
.blends .footnote{font-size:12px;margin-top:20px;color:#41483f}
@media(min-width:769px){
  .header.wrap,.hero-copy.wrap{width:calc(100% - 96px);max-width:none}
  .hero{height:auto!important;aspect-ratio:2.2/1!important;min-height:520px!important}
  .hero-art{width:100%!important;height:100%;right:0;object-fit:cover!important;object-position:center;mask-image:none}
  .hero-copy{padding-top:clamp(38px,4vw,75px)!important}
  .hero-copy.wrap{width:calc(100% - clamp(128px,16vw,280px))}
  .hero h1{font-size:clamp(43px,4.1vw,72px)!important;max-width:52%!important}
  .blends.wrap{width:calc(100% - 96px);max-width:none}
}
/* Compact header: logo and follow action together, navigation on its own row. */
@media(max-width:1100px){
  .header{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:'brand follow' 'nav nav';column-gap:16px;row-gap:4px;min-height:0;padding-block:12px 8px}
  .header .brand{grid-area:brand;width:auto;min-width:0}
  .header .brand img.header-lockup{display:block;width:min(280px,100%);height:auto;max-height:80px}
  .header .header-follow{grid-area:follow;order:initial;margin:0;padding:12px 14px;min-height:44px;font-size:10px}
  .header nav{grid-area:nav;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0;gap:8px;order:initial}
  .header nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 0;font-size:11px;letter-spacing:1px;white-space:nowrap}
  .header nav a:after{bottom:4px;left:20%;right:20%}
}
@media(max-width:480px){
  .header{column-gap:12px}
  .header .brand img.header-lockup{width:min(240px,100%)}
  .header .header-follow{padding:10px 11px;font-size:9px;letter-spacing:.8px}
  .header nav a{font-size:10px;letter-spacing:.7px}
}
@media(min-width:769px) and (max-width:1100px){
  .header.wrap,.hero-copy.wrap,.blends.wrap{width:calc(100% - 64px)}
  .hero-copy.wrap{width:calc(100% - 128px)}
  .hero h1{font-size:38px!important;max-width:55%!important}
  .hero-copy{padding-top:28px!important}
  .hero .eyebrow{margin-bottom:12px}
  .hero h1{margin-bottom:20px}
  .hero .intro{font-size:16px;line-height:1.5;margin-bottom:14px}
  .hero .button{font-size:10px;padding:12px 16px}
  .flavor strong{font-size:20px}
  .flavor{padding-inline:7px!important}
}
@media(max-width:768px){
  .hero-art{width:210%;margin-left:-103%;margin-top:0;mask-image:none}
  .blends.section{padding-block:24px 30px}
  .flavor-list{gap:22px 0}
  .flavor strong{font-size:21px}
  .development-heading{font-size:10px;letter-spacing:1.6px;gap:10px}
  .flavor-detail #detail-label{font-size:28px}
  .blends .flavor-detail>p:last-child{font-size:18px}
}