/* Editorial polish and responsive layout. Loaded after experience.css. */
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-600.woff') format('woff');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-800.woff') format('woff');font-style:normal;font-weight:800;font-display:swap}

:root{--paper:#f5f2e9;--ink:#07392f;--mint:#a8dfc4;--line:rgba(7,57,47,.2);--muted:#49564f}
html{scroll-padding-top:86px}
body{font-family:Manrope,Arial,sans-serif;overflow-x:clip}
h1,h2{font-family:'Barlow Condensed',Barlow,Impact,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:.93}
h3{letter-spacing:-.01em;line-height:1.12}
.section-heading h2,.split h2,.page-hero h1,.article-hero h1{font-size:clamp(52px,6.7vw,105px)}
.eyebrow,.label{letter-spacing:.13em;font-size:11px;margin-bottom:16px}
.button,.pill.primary{min-height:46px;border-radius:999px;padding:13px 24px;line-height:1.25}
.button.small{min-height:43px;padding:10px 19px}
.text-link{min-height:44px;display:inline-flex;align-items:center;line-height:1.25;text-underline-offset:5px}
button{min-height:44px}
.site-header{height:82px;padding-inline:clamp(24px,5vw,82px);background:rgba(245,242,233,.97)}
.brand{gap:12px;flex:none}
.brand img{width:55px;height:55px}
.brand>span{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:26px;font-weight:800;line-height:.78;letter-spacing:.005em}
.brand small{font-size:7px;letter-spacing:.1em;line-height:1.25;margin-top:8px}
.site-header nav{gap:clamp(16px,2.2vw,34px);font-size:12px}
.site-header nav>a:not(.button){min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.site-header nav .button{background:var(--ink);color:white;white-space:nowrap}
.site-header nav .button:hover{background:#155643;color:white}

/* The Academy belongs in the main navigation on wide screens and in the drawer. */
.site-header .global-academy-menu{position:relative;border:0;padding:0;margin:0;min-width:0}
.site-header .global-academy-menu>summary{display:flex;align-items:center;gap:7px;min-height:44px;margin:0;list-style:none;white-space:nowrap;cursor:pointer}
.site-header .global-academy-menu>summary::-webkit-details-marker{display:none}
.site-header .global-academy-menu>summary:after{content:'⌄';font:600 16px/1 Manrope,sans-serif;transform:translateY(-2px);transition:transform .2s}
.site-header .global-academy-menu[open]>summary:after{transform:rotate(180deg) translateY(2px)}
.global-academy-panel{position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%);z-index:45;display:grid;grid-template-columns:repeat(3,minmax(145px,1fr));gap:24px;width:min(660px,calc(100vw - 36px));padding:27px;background:#fffdf8;box-shadow:0 18px 55px #092b2340;border:1px solid var(--line);font-size:13px;white-space:normal}
.global-academy-panel:before{content:'';position:absolute;inset:-14px 0 auto;height:14px}
.global-academy-panel strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:11px}
.global-academy-panel a{display:block;padding:8px 0;line-height:1.35;border-bottom:1px solid var(--line)}
.global-academy-panel a:hover{text-decoration:underline;text-underline-offset:3px}

.home-hero{height:clamp(640px,calc(100svh - 82px),900px);min-height:640px;max-height:none}
.home-hero:after{background:linear-gradient(90deg,rgba(5,21,17,.78) 0%,rgba(5,21,17,.39) 48%,rgba(5,21,17,.07) 100%)}
.home-hero img{object-position:center 52%}
.hero-content{padding:clamp(100px,12vh,170px) clamp(30px,6.2vw,100px) 100px;max-width:1040px}
.hero-content h1{font-size:clamp(96px,11.8vw,188px);letter-spacing:-.018em;line-height:.78;margin:15px 0 34px;text-transform:uppercase;text-wrap:balance}
.hero-content h1 em{color:var(--mint)}
.hero-content p:not(.eyebrow){max-width:520px;font-size:clamp(16px,1.45vw,20px);line-height:1.55;color:#fffaf1;text-wrap:pretty}
.hero-content .actions{gap:22px;margin-top:27px}
.hero-content .button{background:#ffe584}
.hero-content .button:hover{background:#ffedaa}
.hero-content .text-link{color:white}
.hero-bottom{left:clamp(30px,6.2vw,100px);right:clamp(30px,6.2vw,100px);bottom:24px}
.hero-bottom a{min-height:32px}
.ticker{font-size:30px;padding:13px 0}
.section{padding:clamp(78px,8vw,126px) clamp(30px,6.2vw,100px)}
.section-heading{margin-bottom:35px}
.section-heading h2{max-width:900px}
.story-grid,.three-grid{gap:clamp(16px,2.2vw,32px)}
.story-card{min-width:0}
.story-card>img{aspect-ratio:1.24;object-position:center;transition:filter .35s,transform .55s}
.story-card>div{padding:21px 6px 24px 0}
.story-card h3{font-size:clamp(23px,2.4vw,33px);padding-right:25px}
.story-card .eyebrow{margin-bottom:8px}
.story-card .arrow{top:21px}
.split{gap:clamp(28px,6vw,100px);padding:clamp(70px,7vw,110px) clamp(30px,6.2vw,100px)}
.split>img{height:clamp(410px,43vw,620px)}
.split p:not(.eyebrow){font-size:16px;line-height:1.7}
.feature-bagel{padding:0;gap:0;grid-template-columns:1fr 1fr}
.feature-bagel>.bagel-video{height:clamp(450px,48vw,690px)}
.feature-bagel>div:not(.bagel-video){padding:clamp(45px,6vw,95px)}
.feature-bagel h2{max-width:570px}
.bean-tabs{flex-wrap:wrap}
.bean-tabs button{font-size:12px}
.dark-section{background:#043a30}
.atmosphere{min-height:650px}
.atmosphere h2{font-size:clamp(78px,8.4vw,130px)}
.atmosphere-copy{padding:90px clamp(30px,6.2vw,100px)}
.page-hero{padding:clamp(60px,6vw,95px) clamp(30px,6.2vw,100px);gap:clamp(25px,5vw,70px);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.page-hero>img{height:clamp(350px,37vw,560px);max-height:none}
.page-hero .lede{margin-top:20px}
.page-hero h1,.page-hero p{overflow-wrap:break-word}
.site-footer{padding:clamp(65px,7vw,110px) clamp(30px,6.2vw,100px) 28px;background:#05372e}
.footer-top h2{font-size:clamp(88px,10vw,155px);line-height:.8;margin-bottom:38px}
.footer-grid{max-width:1080px;gap:50px}
.footer-grid a,.footer-bottom a{min-height:35px;display:inline-flex;align-items:center}
.footer-grid a{display:flex}
.footer-bottom{align-items:center;flex-wrap:wrap}
.assistant-toggle{min-height:48px}
dialog{overscroll-behavior:contain;overflow:auto}
.dialog-head h2{font-size:clamp(35px,4vw,58px)}
.dialog-head button{min-width:44px;min-height:44px;flex:none}
.input-row input{border:1px solid var(--line);border-radius:3px;padding:12px;background:#fff}
.suggestions button,.chip-row button,.category-button,.bean-tabs button,.light-switch button,.quiz-options button{min-height:44px}
.product-card{min-width:0;transition:border-color .25s,box-shadow .25s,transform .25s}
.product-card .button{min-height:44px}
.form-shell{max-width:1100px;padding:50px clamp(24px,5vw,60px) 100px}
.form-shell h2{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:clamp(45px,5vw,70px);font-weight:800;line-height:.95}
.form-shell .section{padding:35px 0}
.form-shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.form-shell select,.form-shell textarea{min-height:46px;font-size:15px}
.form-shell button[type=submit],.form-shell .mode-btn,.form-shell .ws-chipwahl{min-height:44px}
.form-shell fieldset{min-width:0}
.form-shell .ws-form,.form-shell #resForm,.form-shell #applyForm,.form-shell #artForm{gap:24px}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .story-card:hover>img,.story-card:focus-visible>img{filter:brightness(1.07);transform:scale(1.012)}
  .product-card:hover,.product-card:focus-within{border-color:#5c9b78;box-shadow:0 14px 32px #08392d16;transform:translateY(-3px)}
}
@media (prefers-reduced-motion:no-preference){
  .motion-ready .home-hero .hero-content>*{animation:hero-enter .75s both cubic-bezier(.2,.75,.25,1)}
  .motion-ready .home-hero .hero-content>*:nth-child(2){animation-delay:.1s}
  .motion-ready .home-hero .hero-content>*:nth-child(3){animation-delay:.2s}
  .motion-ready .home-hero .hero-content>*:nth-child(4){animation-delay:.3s}
  @keyframes hero-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
}

/* All six navigation items cannot fit comfortably at tablet widths. */
@media(max-width:1100px){
  .site-header{height:76px;padding-inline:5%}
  .brand img{width:44px;height:44px}
  .brand>span{font-size:21px}
  #nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:70px;min-height:44px;font-size:13px;padding:9px 14px}
  .site-header nav{display:none;position:absolute;top:76px;left:0;right:0;max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:20px 5% 32px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px #0002;flex-direction:column;align-items:stretch;gap:0;font-size:15px}
  .site-header nav.open,.site-header nav.is-open{display:flex}
  .site-header nav>a:not(.button),.site-header nav>a.button{display:flex;min-height:50px;padding:12px 0!important}
  .site-header nav>a:not(.button){border-bottom:1px solid var(--line)}
  .site-header nav>a.button{justify-content:center;margin-top:18px;padding-inline:22px!important}
  .site-header .global-academy-menu{border-bottom:1px solid var(--line)}
  .site-header .global-academy-menu>summary{min-height:50px}
  .global-academy-panel{position:static;transform:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;box-shadow:none;border:0;border-top:1px solid var(--line);background:#e9efe3;padding:18px;gap:18px;font-size:12px}
  .global-academy-panel:before{display:none}
  .home-hero{height:660px;min-height:620px}
  .hero-content{padding-top:115px}
  .hero-content h1{font-size:clamp(90px,11.5vw,130px)}
  .story-grid,.three-grid,.product-grid,.academy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .story-card>img{aspect-ratio:1.45;max-height:330px}
  .story-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
  .story-card:last-child:nth-child(odd)>img{height:100%;max-height:300px;width:100%}
  .story-card:last-child:nth-child(odd)>div{padding-right:22px}
  .split>img{height:440px;max-height:none}
  .feature-bagel>.bagel-video{height:520px}
  .page-hero>img{height:390px}
  .gallery-strip img{height:260px}
  .footer-top h2{font-size:clamp(82px,11vw,130px)}
}

@media(max-width:760px){
  html{scroll-padding-top:76px}
  .home-hero{height:clamp(650px,85svh,780px);min-height:650px}
  .home-hero img{object-position:62% center}
  .home-hero:after{background:linear-gradient(0deg,rgba(4,22,17,.84),rgba(4,22,17,.28) 85%),linear-gradient(90deg,rgba(4,22,17,.55),transparent)}
  .hero-content{padding:94px 6% 105px;max-width:590px}
  .hero-content h1{font-size:clamp(75px,15vw,116px);line-height:.81;margin:14px 0 25px}
  .hero-content p:not(.eyebrow){font-size:15px;max-width:370px}
  .hero-bottom{left:6%;right:6%}
  .section,.split{padding:70px 6%}
  .section-heading h2,.split h2,.page-hero h1,.article-hero h1{font-size:clamp(54px,10vw,80px)}
  .story-grid,.three-grid,.product-grid,.academy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .story-card>img{aspect-ratio:1.2;height:auto}
  .story-card h3{font-size:clamp(22px,3.7vw,29px)}
  .story-card:last-child:nth-child(odd){display:block;grid-column:1/-1}
  .story-card:last-child:nth-child(odd)>img{height:270px;max-height:none}
  .story-card:last-child:nth-child(odd)>div{padding-right:0}
  .split{grid-template-columns:1fr;gap:32px}
  .split>img{height:360px;aspect-ratio:auto}
  .feature-bagel{padding:0;grid-template-columns:1fr}
  .feature-bagel>.bagel-video{height:350px}
  .feature-bagel>div:not(.bagel-video){padding:55px 6% 65px}
  .bean-story>img{order:-1;height:350px}
  .atmosphere{min-height:680px}
  .atmosphere h2{font-size:clamp(69px,12vw,98px)}
  .atmosphere-copy{padding:75px 6% 120px}
  .page-hero{grid-template-columns:1fr;padding:55px 6% 40px}
  .page-hero>img{height:330px}
  .site-footer{padding:70px 6% 90px}
  .footer-top h2{font-size:clamp(76px,12vw,105px)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer-bottom{display:block}
  .footer-bottom>div{margin-top:12px}
  .form-shell{padding:35px 6% 80px}
  .form-shell .ws-form,.form-shell #resForm,.form-shell #applyForm,.form-shell #artForm{grid-template-columns:1fr}
  .reading-progress{top:76px}
}

@media(max-width:540px){
  .brand img{width:41px;height:41px}
  .brand>span{font-size:20px}
  .brand small{font-size:6px}
  .global-academy-panel{grid-template-columns:1fr;gap:16px}
  .global-academy-panel a{min-height:38px}
  .hero-content h1{font-size:clamp(70px,15vw,90px)}
  .hero-content p:not(.eyebrow){max-width:315px}
  .hero-content .actions{align-items:flex-start;gap:10px 20px}
  .hero-content .button{padding:12px 18px}
  .hero-bottom{font-size:8px}
  .ticker{font-size:23px}
  .section-heading h2,.split h2,.page-hero h1,.article-hero h1{font-size:clamp(50px,12vw,68px)}
  .story-grid,.three-grid,.product-grid,.academy-grid{grid-template-columns:1fr;gap:26px}
  .story-card:last-child:nth-child(odd){grid-column:auto}
  .story-card>img,.story-card:last-child:nth-child(odd)>img{height:auto;max-height:none;aspect-ratio:1.33}
  .feature-bagel>.bagel-video{height:300px}
  .bean-tabs{gap:4px}
  .bean-tabs button{flex:1;min-width:28%;padding:9px 5px;font-size:10px}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:last-child{grid-column:auto}
  .footer-top h2{font-size:clamp(70px,15vw,98px)}
  .input-row{flex-wrap:wrap}
  .input-row input{flex-basis:100%;width:100%;min-height:48px}
  .input-row .button{width:100%}
  .dialog-head h2{font-size:37px}
  .filter-panel{padding:18px}
  .form-shell .mode-toggle{flex-wrap:wrap}
  .form-shell .mode-btn{flex:1 1 135px}
}

@media(prefers-reduced-motion:reduce){.motion-ready .home-hero .hero-content>*{animation:none!important}.product-card,.story-card>img{transition:none!important}}
@media print{.site-header,.site-footer,.assistant-toggle{display:none!important}}

.product-card:active{background:#e3edde;border-color:#6b9678}
@media(prefers-reduced-motion:no-preference){.motion-ready .home-hero>picture{animation:hero-picture .95s both ease-out}@keyframes hero-picture{from{opacity:.35;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}}
@media(prefers-reduced-motion:reduce){.motion-ready .home-hero>picture,.motion-ready [data-motion-item].motion-in-view{animation:none!important}}
@media(max-width:1180px) and (min-width:761px){.lab-grid{gap:18px}.lab-card{padding:28px}.lab-card h2{font-size:40px}.lab-card .actions{gap:12px}.finder .product-card{width:47%;margin-bottom:15px}}

/* Coffee Bro is a restrained, touch-friendly companion with visible provenance. */
.assistant-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.assistant-bottom small{font-size:10px;line-height:1.5;max-width:275px;color:var(--muted)}
.assistant-bottom button{flex:none;padding:8px 10px;font-size:11px}
.assistant-message .suggestions{display:flex;flex-wrap:wrap;gap:7px}
.assistant-message .suggestions button{min-height:44px;padding:9px 13px;text-align:left;font-size:12px;border-radius:20px}
#assistant-dialog{max-height:calc(100dvh - 28px)}
#assistant-messages{overscroll-behavior:contain;min-height:120px;max-height:40dvh}
@media(max-width:540px){.assistant-bottom{align-items:flex-start}.assistant-toggle{font-size:12px;padding:10px 15px}.assistant-bottom small{font-size:9px}#assistant-dialog{max-height:calc(100dvh - 16px);padding:23px}#assistant-messages{max-height:34dvh}}

/* Text-only local help, without an avatar or portrait. */
#assistant-dialog .assistant-heading h2{font-size:38px;margin:0;line-height:1.1}
#assistant-dialog .assistant-heading .eyebrow{font-size:12px;margin:0 0 7px}