.cofcof-story{--story-paper:#f7f1e7;--story-ink:#201e19;--story-accent:#c7d0b5;--story-fruit:#b46f53;background:#efe8dc;color:var(--story-ink);padding-block:clamp(40px,5.5vw,72px)}.cofcof-story .cofcof-bx{max-width:1320px}.cofcof-story-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.cofcof-story-head .cofcof-eyebrow{color:inherit;font-size:11px;letter-spacing:.13em;margin:0 0 14px}.cofcof-story-head h2{color:inherit;max-width:23ch;font-size:clamp(28px,3.6vw,48px);line-height:1.08;margin:0;letter-spacing:-.04em}.cofcof-story-head h2 p,.cofcof-story-business-cta h3 p{margin:0}.cofcof-story-head h2 em{color:#79562f}.cofcof-story-intro{max-width:39ch;font:500 15px/1.65 var(--fn);margin:0}.cofcof-story-meta{font:600 11px/1.5 var(--fn);text-transform:uppercase;letter-spacing:.12em;margin:0;flex-shrink:0}.cofcof-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0;counter-reset:story}.cofcof-story-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}.cofcof-story-panel{--story-accent:#c7d0b5;min-width:0;display:flex;flex-direction:column;position:relative;border:1px solid #938774;background:var(--story-paper);color:var(--story-ink);overflow:hidden;border-radius:0}.cofcof-story-panel:nth-child(3n+2){--story-accent:#dfc68f}.cofcof-story-panel:nth-child(3n){--story-accent:#d6b4a7}.cofcof-story-number{display:block;padding:13px 16px 0;font:700 10px/1.4 var(--fn);letter-spacing:.1em;z-index:1}.cofcof-story-picture{position:relative;margin:0 10px;aspect-ratio:320/190;flex-shrink:0}.cofcof-story-art{display:block;width:100%;height:100%;color:#29261f;overflow:visible}.cofcof-story-caption{padding:16px 20px 22px;border-top:1px solid #d5cbbb;flex:1;display:flex;flex-direction:column;background:#f7f1e7}.cofcof-story-caption h3{font:800 clamp(18px,1.6vw,22px)/1.2 var(--fn);letter-spacing:-.025em;margin:0 0 10px;color:#201e19}.cofcof-story-caption p{font:500 14px/1.65 var(--fn);margin:0;color:#4c4439}.cofcof-story-caption strong{font:700 12px/1.5 var(--fn);display:block;margin:0 0 9px}.cofcof-story-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}.cofcof-story-tags span{padding:4px 6px;border:1px solid #c9bca7;font:600 10px/1.4 var(--fn);color:#514332;border-radius:0}.cofcof-story-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px}.cofcof-story-foot p{max-width:82ch;font:500 12px/1.65 var(--fn);margin:0}.cofcof-story-replay{min-height:44px;padding:10px 16px;flex-shrink:0;display:inline-flex;align-items:center;gap:22px;border:1px solid currentColor;background:transparent;color:inherit;font:700 11px/1.4 var(--fn);cursor:pointer;border-radius:0}.cofcof-story-replay[hidden]{display:none}.cofcof-story-replay:disabled{opacity:.55;cursor:default}.cofcof-story-replay:focus-visible,.cofcof-story-purchase:focus-visible,.cofcof-story-proof:focus-visible{outline:3px solid #9c702c;outline-offset:4px}.cofcof-story-replay:hover{background:#d8bb82;color:#201e19}.cofcof-story-controls{display:flex;justify-content:flex-end;margin-top:20px}.cofcof-story--dark{background:#201e19;color:#f7f1e7}.cofcof-story--dark .cofcof-story-head h2 em{color:#dfbd7e}.cofcof-story--process .cofcof-story-picture{max-height:145px;margin-top:2px}.cofcof-story--process .cofcof-story-caption{padding:14px 18px 18px}.cofcof-story--process .cofcof-story-caption h3{font-size:18px}.cofcof-story--process .cofcof-story-caption p{font-size:13px}.cofcof-story--origin .cofcof-story-caption h3{font-size:20px}.cofcof-story--origin .cofcof-story-caption p{font-size:13px}.cofcof-story-purchase{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 6px;margin-top:auto;min-height:44px;color:#513b18;font:800 12px/1.45 var(--fn);text-decoration:none;border-bottom:2px solid #8a652e}.cofcof-story-purchase span{font-size:21px}.cofcof-story-contact{display:block;font:500 10px/1.5 var(--fn);color:#5f5547;margin-top:8px}.cofcof-story--business .cofcof-story-caption p{margin-bottom:18px}.cofcof-story-footnote{font:500 13px/1.65 var(--fn);margin:20px 0 0;max-width:90ch}.cofcof-story-business-cta{display:flex;justify-content:space-between;gap:28px;align-items:center;border-top:1px solid #a99c85;margin-top:30px;padding-top:28px}.cofcof-story-business-cta h3{font:800 clamp(22px,2.5vw,32px)/1.2 var(--fn);letter-spacing:-.03em;max-width:30ch;margin:0 0 12px}.cofcof-story-business-cta p{font:500 14px/1.6 var(--fn);max-width:68ch;margin:0}.cofcof-story-business-cta .cofcof-btn{flex-shrink:0;min-height:48px}.cofcof-story-proof{display:inline-flex;align-items:center;gap:14px;color:#674619;font:700 12px/1.5 var(--fn);margin-top:14px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.cofcof-story--education .cofcof-cafes-edu-in{display:flex;flex-direction:column;gap:32px}.cofcof-story--education .cofcof-cafes-edu-score,.cofcof-story--education .cofcof-cafes-edu-guide{width:100%;min-width:0}.cofcof-story--education .cofcof-cafes-edu-p{max-width:80ch}.cofcof-story--education .cofcof-cafes-edu-scale{margin-top:20px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.cofcof-story--education .cofcof-cafes-edu-score,.cofcof-story--education .cofcof-cafes-edu-guide{max-width:none}.cofcof-story--education .cofcof-cafes-edu-guide{margin-top:0}.cofcof-story--education .cofcof-cafes-edu-card,.cofcof-story--education .cofcof-cafes-edu-scard{border-radius:0}.cofcof-story--education .cofcof-cafes-edu-h2{margin-bottom:16px}.cofcof-story--education .cofcof-cafes-edu-p{font-size:16px;line-height:1.7;margin-bottom:20px}.cofcof-story--education .cofcof-cafes-edu-scard{padding:14px 18px}.cofcof-story--education .cofcof-cafes-edu-snum{font-size:30px;line-height:1.1}.cofcof-story--education .cofcof-cafes-edu-cards{margin-top:20px}.cofcof-story--education .cofcof-cafes-edu-guide{border-top:1px solid #bbad98;padding-top:28px}.cofcof-story.is-story-playing .story-hand{animation:cofcof-story-hand 3.6s ease both}.cofcof-story.is-story-playing .story-steam{animation:cofcof-story-steam 3.6s ease both}.cofcof-story.is-story-playing .story-grow{animation:cofcof-story-grow 3.6s ease both;transform-origin:center 75%;transform-box:fill-box}.cofcof-story.is-story-playing .story-beans{animation:cofcof-story-beans 3.6s ease both}.cofcof-story.is-story-playing .story-sheet,.cofcof-story.is-story-playing .story-spoon{animation:cofcof-story-sheet 3.6s ease both}.cofcof-story.is-story-playing .story-pour{animation:cofcof-story-pour 3.6s ease both;stroke-dasharray:24;stroke-dashoffset:0}.cofcof-story.is-story-paused .cofcof-story-art *{animation-play-state:paused!important}@keyframes cofcof-story-hand{0%,12%{transform:translate(8px,-4px)}45%,65%{transform:translate(-3px,2px)}to{transform:none}}@keyframes cofcof-story-steam{0%,12%{opacity:.2;transform:translateY(5px)}50%{opacity:1;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes cofcof-story-grow{0%,12%{transform:scale(.88)}55%{transform:scale(1.04)}to{transform:none}}@keyframes cofcof-story-beans{0%,15%{transform:translateY(-7px)}55%,70%{transform:translateY(3px)}to{transform:none}}@keyframes cofcof-story-sheet{0%,20%{transform:translate(3px,4px) rotate(-2deg)}60%{transform:translate(-2px,-2px)}to{transform:none}}@keyframes cofcof-story-pour{0%,20%{stroke-dashoffset:24;opacity:0}40%,80%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:1}}.cofcof-sub-hero-videos .cofcof-sub-hero-video{transition:transform .22s ease,border-color .22s ease;background:#f7f1e7;border:1px solid #c7baa5;padding:5px 5px 10px}.cofcof-sub-hero-videos .cofcof-sub-hero-video figcaption{padding-inline:5px;color:#3e352b}.cofcof-sub-hero-videos .cofcof-sub-hero-video video{border:0}@media(hover:hover)and (pointer:fine){.cofcof-sub-hero-videos .cofcof-sub-hero-video:hover,.cofcof-sub-hero-videos .cofcof-sub-hero-video:focus-within{transform:translateY(-4px);border-color:#79562f}.cofcof-story--business .cofcof-story-panel:hover .cofcof-story-purchase{color:#201e19;border-color:#201e19}.cofcof-story--business .cofcof-story-panel:hover .cofcof-story-picture{transform:translateY(-2px)}}.cofcof-story--business .cofcof-story-picture{transition:transform .22s ease}@media(min-width:750px)and (max-width:1100px){.cofcof-story-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:749px){.cofcof-story-head{display:block;margin-bottom:20px}.cofcof-story-head h2{font-size:30px;max-width:24ch}.cofcof-story-head .cofcof-eyebrow{font-size:10px}.cofcof-story-intro{font-size:14px;margin-top:14px;max-width:43ch}.cofcof-story-meta{margin-top:12px}.cofcof-story-grid,.cofcof-story-grid--four{grid-template-columns:minmax(0,1fr);gap:10px}.cofcof-story-panel{display:grid;grid-template-columns:106px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}.cofcof-story-number{grid-column:1/-1;padding:10px 12px 0;font-size:9px}.cofcof-story-picture{grid-column:1;grid-row:2;align-self:center;width:112px;max-width:100%;height:112px;margin:0 0 8px;aspect-ratio:auto;overflow:hidden}.cofcof-story-art{width:100%;max-width:none;transform:none;height:112px}.cofcof-story-caption{grid-column:2;grid-row:2;border-top:0;align-self:stretch;padding:13px 12px 16px 6px;background:transparent}.cofcof-story-caption h3{font-size:17px;margin-bottom:8px}.cofcof-story-caption p{font-size:12px;line-height:1.6}.cofcof-story-caption strong{font-size:11px;margin-bottom:6px}.cofcof-story--process .cofcof-story-picture{margin:0}.cofcof-story--process .cofcof-story-caption{padding:12px 12px 15px 6px}.cofcof-story--process .cofcof-story-caption h3,.cofcof-story--origin .cofcof-story-caption h3{font-size:17px}.cofcof-story--process .cofcof-story-caption p,.cofcof-story--origin .cofcof-story-caption p{font-size:12px}.cofcof-story-tags{margin-top:10px;gap:4px}.cofcof-story-tags span{font-size:9px;padding:3px 5px}.cofcof-story-foot{display:block}.cofcof-story-foot p{font-size:11px}.cofcof-story-foot .cofcof-story-replay{margin-top:16px}.cofcof-story-business-cta{display:block;margin-top:22px;padding-top:22px}.cofcof-story-business-cta p{font-size:13px}.cofcof-story-business-cta .cofcof-btn{margin-top:20px;width:100%}.cofcof-story--business .cofcof-story-caption p{margin-bottom:12px}.cofcof-story-purchase{font-size:11px}.cofcof-story-contact{font-size:9px}.cofcof-story--education .cofcof-cafes-edu-in{gap:24px}.cofcof-story--education .cofcof-cafes-edu-scale{grid-template-columns:repeat(2,minmax(0,1fr))}.cofcof-story--education .cofcof-cafes-edu-p{font-size:14px}.cofcof-story--education .cofcof-cafes-edu-scard{padding:12px}.cofcof-story--education .cofcof-cafes-edu-snum{font-size:27px}.cofcof-sub-hero-main .cofcof-sub-hero-videos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;padding:4px 0 12px;max-width:100%;justify-content:start;scrollbar-width:thin}.cofcof-sub-hero-videos .cofcof-sub-hero-video{padding:3px 3px 8px;scroll-snap-align:start}.cofcof-sub-hero-videos .cofcof-sub-hero-video figcaption{padding:0 3px}}@media(prefers-reduced-motion:reduce){.cofcof-story .cofcof-story-art *{animation:none!important}.cofcof-story-replay{display:none!important}.cofcof-sub-hero-videos .cofcof-sub-hero-video,.cofcof-story--business .cofcof-story-picture{transition:none!important;transform:none!important}}
/*# sourceMappingURL=/cdn/shop/t/67/assets/cofcof-narrative30.css.map */