@font-face{font-family:Be Vietnam Pro;src:url('fonts/BeVietnamPro-Regular.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Be Vietnam Pro;src:url('fonts/BeVietnamPro-SemiBold.ttf') format('truetype');font-display:swap;font-weight:600 900}
@font-face{font-family:Fraunces;src:url('fonts/Fraunces.ttf') format('truetype');font-display:swap;font-weight:100 900}
body{font-family:'Be Vietnam Pro',sans-serif}
h1,h2,.wordmark,.footer-brand{font-family:Fraunces,Georgia,serif;font-weight:450}
#explore-products{display:flex;width:fit-content;margin-top:12px}
.header{z-index:30}
.browsing .header{background:#eeeae2f5;border-bottom:1px solid #173c3220}
.browsing .chapter-copy,.browsing .rail,.browsing .footer{visibility:hidden;pointer-events:none}
.browsing .copy.active,.browsing .copy.leaving{visibility:hidden;pointer-events:none}
.browsing .scene-drift,.browsing .ambient{animation-play-state:paused}
.skip{z-index:50}

/* A product atelier: one large studio image, quiet type, useful detail. */
.boutique{--paper:#eeeae2;--forest:#233c31;--muted:#60665b;--line:#233c312e;position:relative;z-index:5;background:var(--paper);color:var(--forest)}
.boutique,.boutique section[id]{scroll-margin-top:108px}
.boutique h2{font-size:clamp(38px,4.2vw,60px);font-weight:400;line-height:1.14;letter-spacing:-.035em;margin:19px 0 25px;text-wrap:balance}
.boutique h3{font-family:Fraunces,Georgia,serif;font-weight:450;font-size:28px;line-height:1.3;margin:16px 0}
.boutique p{font-size:15px;line-height:1.85;max-width:46ch}
.boutique .section-kicker{font-size:12px;letter-spacing:.015em;margin:0;color:var(--muted)}
.boutique a{color:inherit;text-underline-offset:5px}
.boutique button{font:inherit;cursor:pointer;min-height:44px;color:inherit}
.boutique [hidden]{display:none!important}
.boutique .boutique-button{display:inline-flex;justify-content:center;align-items:center;gap:28px;border:1px solid var(--forest);border-radius:2px;padding:15px 23px;min-height:52px;background:var(--forest);color:#f3eee4;text-decoration:none;font-size:13px;font-weight:400}
.boutique-button:disabled{opacity:.5;cursor:not-allowed}
.boutique-button:not(:disabled):hover{background:#355340}
.boutique .edition-note{font-size:11px;color:var(--muted);margin-top:32px;line-height:1.8}
.boutique :focus-visible{outline:2px solid #986b3f;outline-offset:5px}
.boutique #product-title:focus{outline:none}

.product-story{max-width:1460px;margin:auto;display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;padding:82px 64px 110px;gap:64px}
.product-intro{padding:0 0 0 12px}
.boutique #product-title{font-size:clamp(58px,6vw,88px);line-height:1.06;letter-spacing:-.045em;margin:30px 0 30px}
.product-subtitle{display:block;font-size:.49em;font-weight:350;letter-spacing:-.015em;line-height:1.6}
.boutique .product-description{max-width:35ch;font-size:14px}
.taste-profile{display:flex;gap:0;flex-wrap:wrap;margin:27px 0 0;font-size:11px;color:#5b6156}
.taste-profile span+span{border-left:1px solid #233c313a;margin-left:13px;padding-left:13px}
.product-links{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:35px;font-size:12px}
.product-links a:not(.boutique-button){display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.edition-note span{display:block;font-size:10px;margin-top:5px}
.product-hero{margin:0;position:relative;align-self:center}
.product-hero img{width:100%;height:auto;display:block;aspect-ratio:16/15;object-fit:cover}
.product-hero figcaption,.material-story figcaption{display:flex;justify-content:space-between;gap:16px;font-size:11px;line-height:1.6;margin-top:15px;color:var(--muted)}
.product-hero figcaption span,.material-story figcaption span{color:#687064}

.product-viewer{max-width:1320px;margin:0 auto;padding:70px 60px 105px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.12fr .88fr;gap:95px;align-items:center}
.viewer-copy{grid-column:2;grid-row:1;max-width:360px}
.viewer-copy h2{max-width:9ch}
.viewer-copy>p:not(.section-kicker){font-size:14px}
.product-spec{margin:30px 0 20px;border-top:1px solid var(--line);max-width:380px;font-size:12px}
.product-spec div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0}
.product-spec dd{margin:0;font-weight:400}
.inline-link{font-size:12px;display:inline-block;padding:12px 0;line-height:1.8}
.viewer-stage{grid-column:1;grid-row:1;max-width:500px;width:100%;justify-self:center;min-width:0}
#spin-surface{position:relative;cursor:grab;touch-action:pan-y;user-select:none;overflow:hidden;background:#bdb29d}
#spin-surface:active{cursor:grabbing}
#spin-surface img{display:block;width:100%;height:auto;aspect-ratio:6/7;object-fit:contain}
.spin-badge{position:absolute;bottom:19px;left:0;right:0;text-align:center;font-size:10px;color:#eeeae2;text-shadow:0 1px 4px #172319;background:#263427cf;width:fit-content;margin:auto;padding:7px 12px;border-radius:2px}
.spin-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:8px;border-bottom:1px solid var(--line)}
.spin-controls button{border:0;background:transparent;width:48px;font-size:19px}
.spin-controls #spin-reset{width:auto;padding:0 18px;font-size:12px}
#spin-help,.boutique .spin-status{font-size:12px;text-align:center;max-width:none;margin:9px 0;color:var(--muted);line-height:1.7}
.product-hotspots{display:flex;gap:18px;margin-top:16px;justify-content:center;flex-wrap:wrap}
.product-hotspots button{background:transparent;border:0;border-bottom:1px solid transparent;padding:8px 6px;font-size:12px}
.product-hotspots button[aria-pressed=true]{border-bottom-color:var(--forest);font-weight:600}
.boutique #product-detail,.boutique .product-detail-measure{font-size:12px;text-align:center;max-width:43ch;margin:16px auto 0;color:var(--muted)}

.material-story{max-width:1320px;margin:auto;padding:55px 60px 110px}
.material-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:100px;align-items:start;margin-bottom:38px}
.material-heading .section-kicker{grid-column:1/-1}
.material-heading h2{font-size:clamp(34px,3.4vw,48px);max-width:12ch;margin-bottom:0}
.material-heading>p:last-child{margin:22px 0 0;font-size:14px;max-width:40ch}
.material-story figure{margin:0}
.material-story img{width:100%;height:auto;max-height:545px;object-fit:cover;display:block}

.advisor{--muted:#c1c8b9;background:#233c31;color:#eeeae2;padding:85px max(60px,calc((100% - 1200px)/2));display:grid;grid-template-columns:1fr 1fr;gap:105px;align-items:center}
.barista-intro{position:relative}
.barista{width:108px;height:auto;display:block;margin:0 0 28px;color:#c5c9ac}
.advisor h2{font-size:clamp(37px,4vw,56px);margin-top:20px}
.barista-intro>p:not(.section-kicker){font-size:14px;max-width:38ch}
.advisor .advisor-privacy{font-size:12px!important;color:#c1c8b9;margin-top:28px;max-width:47ch}
.advisor-card{--forest:#233c31;--muted:#60665b;background:#eeeae2;color:var(--forest);padding:42px;min-height:415px;display:flex;flex-direction:column;justify-content:center}
.advisor-card h3{font-size:32px;font-weight:400;max-width:15ch;margin:23px 0 18px}
.advisor-card p{font-size:13px;line-height:1.9}
.advisor-card .boutique-button{margin-top:12px}
.advisor-step{font-size:11px;color:#60665b}
.advisor-progress{height:2px;background:#233c3120;margin-bottom:26px}
.advisor-progress i{display:block;height:100%;background:#7c6749;width:33.333%}
.advisor-card fieldset{padding:0;margin:18px 0 25px;border:0;min-width:0}
.advisor-card legend{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:27px;line-height:1.35;margin-bottom:20px;max-width:100%}
.advisor-option{display:flex;gap:13px;align-items:center;border:1px solid #233c312b;padding:14px;margin-top:9px;font-size:12px;cursor:pointer;min-height:52px}
.advisor-option:has(input:checked){border-color:#233c31;background:#e3e4d8}
.advisor-option input{accent-color:#233c31;width:18px;height:18px;flex-shrink:0}
.advisor-actions{display:flex;gap:10px;justify-content:space-between;align-items:center}
.advisor-actions>button:not(.boutique-button),#advisor-restart,.result-edit{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:12px;padding:10px 0}
#advisor-restart{align-self:flex-start;margin-top:20px;color:#60665b}
.advisor-card .recipe{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;font-size:13px}
.advisor-card .result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:24px}

.brew-guide{max-width:1320px;margin:auto;padding:105px 60px}
.guide-heading{max-width:680px}
.guide-heading h2{font-size:48px}
.brew-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7%;margin-top:45px}
.brew-cards article{border-top:1px solid var(--line);padding-top:28px;scroll-margin-top:120px}
.brew-icon{display:block;width:42px;height:42px;color:var(--forest)}
.brew-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.boutique .brew-ratio{font-size:11px;font-weight:600;margin-bottom:16px}
.brew-cards p{font-size:12px}
.site-footer{background:#e2e1d5;padding:55px max(60px,calc((100% - 1200px)/2)) 30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start}
.site-footer .footer-brand{font-size:60px;line-height:1;text-decoration:none}
.site-footer p{margin:0;font-size:24px;font-family:Fraunces,Georgia,serif;font-weight:350;line-height:1.5}
.site-footer nav{display:flex;flex-direction:column;align-items:start;font-size:12px;gap:3px}
.site-footer nav a{min-height:44px;display:flex;align-items:center}
.site-footer small{grid-column:1/-1;font-size:10px;line-height:1.9;border-top:1px solid var(--line);padding-top:24px;color:var(--muted)}

@media(max-width:1100px){
 .product-story{gap:35px;padding:70px 5% 85px}.product-intro{padding:0}
 .boutique #product-title{font-size:65px}.product-viewer{gap:55px;padding-left:6%;padding-right:6%}
 .material-story,.brew-guide{padding-left:6%;padding-right:6%}.material-heading{gap:0 55px}
 .advisor{padding:75px 6%;gap:55px}.advisor-card{padding:30px}.site-footer{padding-left:6%;padding-right:6%}
 .product-hero figcaption{flex-direction:column;gap:3px}
}
@media(max-width:760px){
 .product-story{grid-template-columns:1fr 1fr;gap:25px}.boutique #product-title{font-size:52px}
 .product-description{font-size:13px!important}.taste-profile{font-size:10px;gap:7px 0}.taste-profile span+span{margin-left:8px;padding-left:8px}
 .product-viewer{gap:30px}.advisor{gap:30px}.advisor-card{padding:24px}.advisor-card h3{font-size:27px}
 .boutique .boutique-button{padding:14px 17px;font-size:12px;gap:18px}
}
@media(max-width:640px){
 .boutique section[id]{scroll-margin-top:106px}
 .product-story{grid-template-columns:1fr;padding:49px 6% 66px;gap:34px}
 .boutique #product-title{font-size:66px;margin:23px 0}.product-subtitle{font-size:.47em}
 .boutique .product-description{font-size:14px!important;max-width:36ch}.taste-profile{font-size:11px;margin-top:22px}
 .product-links{margin-top:26px;gap:18px}.boutique .edition-note{margin-top:24px}
  .product-hero img{aspect-ratio:5/6;max-height:620px;object-fit:cover}.product-hero figcaption{flex-direction:row;font-size:11px;gap:12px}
 .product-viewer{grid-template-columns:1fr;padding:57px 6% 58px;gap:32px;margin:0 0}
 .viewer-copy{grid-column:1;grid-row:1;max-width:none}.viewer-copy h2{max-width:none;font-size:43px}.viewer-copy h2 br{display:none}
 .viewer-stage{grid-column:1;grid-row:2;max-width:440px}.product-spec{max-width:none;margin:25px 0 9px}
 .material-story{padding:45px 6% 62px}.material-heading{display:block;margin-bottom:28px}.material-heading h2{max-width:13ch;font-size:40px}
  .material-heading>p:last-child{margin-top:20px}.material-story img{aspect-ratio:4/3;object-fit:cover}.material-story figcaption{font-size:11px}
 .advisor{grid-template-columns:1fr;padding:58px 6%;gap:32px}.barista{width:84px;margin:0 0 22px}.advisor h2{font-size:45px}
 .advisor .advisor-privacy{margin-top:22px}.advisor-card{padding:30px 24px;min-height:360px}.advisor-card h3{font-size:30px}.advisor-card legend{font-size:25px}
 .brew-guide{padding:65px 6%}.guide-heading h2{font-size:40px}.brew-cards{grid-template-columns:1fr;gap:30px;margin-top:30px}
 .brew-cards article{display:grid;grid-template-columns:42px 1fr;column-gap:20px}.brew-cards h3{margin:0 0 10px}.brew-cards p{grid-column:2}.brew-cards p:last-child{margin-bottom:0}
 .site-footer{grid-template-columns:1fr 1fr;gap:28px}.site-footer nav{grid-column:1/-1;flex-direction:row;gap:22px}.site-footer p{font-size:20px}
}
@media(prefers-reduced-motion:no-preference){.boutique-button,.product-hotspots button{transition:background .2s,color .2s}.boutique-button span{transition:transform .2s}.boutique-button:hover span{transform:translate(2px,-2px)}}
html:not(.js) #advisor-start,html:not(.js) .spin-controls,html:not(.js) .product-hotspots{display:none}

/* Fit full desktop compositions in the usable screen, never by shrinking type.
   Short screens keep natural height and receive intermediate reading stops. */
@media(min-width:1101px) and (min-height:750px){
 .product-story,.product-viewer{padding-top:28px;padding-bottom:28px;min-height:calc(100svh - 108px)}
 .product-hero{width:100%}
 .product-hero img{max-height:calc(100svh - 205px);object-fit:contain}
 .viewer-stage{max-width:min(430px,calc((100svh - 435px)*6/7))}
 .material-story{padding-top:28px;padding-bottom:28px}
 .material-heading{margin-bottom:24px}
 .material-story img{max-height:calc(100svh - 390px);object-fit:contain}
 .advisor,.brew-guide{padding-top:40px;padding-bottom:40px}
}
@media(max-aspect-ratio:1/1){.boutique,.boutique section[id]{scroll-margin-top:100px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.boutique,.boutique section[id]{scroll-margin-top:68px}}
@media(max-aspect-ratio:1/1){.brew-cards article{scroll-margin-top:112px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.brew-cards article{scroll-margin-top:80px}}
#spin-surface[aria-busy=true] { cursor: progress; }
#spin-surface.dragging { cursor: grabbing; }
.advisor-option { transition: background-color .18s, border-color .18s; }
.advisor-option:has(input:checked) { background: #e2e5d5; border-color: #49634f; }
@media(prefers-reduced-motion:reduce) { .advisor-option { transition: none; } }
