:root{--cream:#fffcf3;--ink:#231815;--orange:#f4773c;--green:#48653d;--p:0;--header:88px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans CJK TC','PingFang TC','Microsoft JhengHei',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ae471e;outline-offset:6px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button{border:0;background:none}header{height:var(--header);position:fixed;top:0;left:0;width:100%;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 4.5%;background:rgba(255,252,243,.94);border-bottom:1px solid #23181516;backdrop-filter:blur(14px)}.brand img{width:84px;height:58px;object-fit:contain;mix-blend-mode:multiply}header nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:650;letter-spacing:.06em}.text-button{padding:0}header nav a:hover,header nav button:hover{color:#be4c20}.order{background:var(--ink);color:var(--cream);border-radius:100px;padding:14px 22px;font-size:14px;display:flex;gap:26px}.order:hover{background:#a74722}.nav-toggle{display:none}.skip{position:fixed;top:-100px;left:20px;background:var(--cream);padding:15px;z-index:200}.skip:focus{top:10px}.chapter{position:relative;height:165vh;height:165svh}.stage{height:100vh;height:100svh;min-height:660px;position:sticky;top:0;overflow:hidden;padding-top:var(--header);isolation:isolate}.scene{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;z-index:-3}.eyebrow{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.17em;font-weight:700;line-height:1.6}.hero{height:180svh}.hero-scene{object-position:70% center;transform:scale(calc(1 + var(--p)*.23));transform-origin:71% 47%}.hero-wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fffcf3ef 0%,#fffcf3d9 25%,#fffcf300 58%)}.hero-copy{position:absolute;top:21%;left:8%;z-index:5;transform:translateY(calc(var(--p)*-45px));opacity:calc(1 - var(--p)*.6)}.hero h1{font-family:Arial,Helvetica,sans-serif;font-weight:850;font-size:clamp(76px,7.7vw,128px);letter-spacing:-.075em;line-height:.96;margin:20px 0 26px}.hero h1 em{color:#df622e;font-family:Georgia,serif;font-weight:500;letter-spacing:-.065em}.hero-zh{font-weight:650;font-size:21px;letter-spacing:.06em}.round-link{display:inline-flex;align-items:center;gap:25px;font-size:14px;font-weight:650;padding:0;margin-top:28px}.round-link b{font-size:23px;font-weight:400;border:1px solid currentColor;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;transition:.25s}.round-link:hover b{transform:rotate(-25deg);background:var(--ink);color:var(--cream)}.jumping-mascot{position:absolute;left:61%;top:17%;width:140px;z-index:3;transform:translate(calc(var(--jump)*70px),calc(var(--jump)*210px)) rotate(calc(var(--jump)*90deg)) scale(calc(1 - var(--jump)*.55));opacity:var(--mascot-opacity,1);will-change:transform}.jumping-mascot img{width:100%;height:auto}.splash{position:absolute;left:70%;top:42%;width:70px;height:35px;opacity:var(--splash,0);transform:scale(calc(1 + var(--jump)*.5));border:3px solid #fff9;border-radius:50%;z-index:2}.splash i{position:absolute;width:8px;height:18px;border-radius:50%;background:#ffedab;left:20%;top:-30px;transform:rotate(-30deg)}.splash i:nth-child(2){left:80%;top:-20px;transform:rotate(30deg)}.splash i:nth-child(3){left:50%;top:-45px;width:6px;height:10px}.stage-foot{position:absolute;bottom:37px;left:8%;right:8%;display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.08em;z-index:6}.scroll-cue{font-size:12px}.chapter-copy{position:absolute;left:8%;top:27%;width:42%;z-index:5}.chapter-copy h2{font-size:clamp(36px,4.2vw,67px);letter-spacing:-.055em;line-height:1.28;margin:20px 0 24px;font-weight:800}.chapter-copy h2 span{color:#bb532c}.chapter-copy>p:not(.eyebrow){font-size:16px;line-height:2;letter-spacing:.035em}.tiny-label{display:inline-block;font-size:11px;letter-spacing:.07em;border:1px solid currentColor;border-radius:30px;padding:9px 16px;margin-top:25px}.tea{height:155svh}.tea-scene{transform:scale(calc(1.5 - var(--p)*.5));transform-origin:76% 76%}.scene-wash{position:absolute;inset:0;background:linear-gradient(90deg,#fffcf3ee,#fffcf3bc 25%,#fffcf300 65%);z-index:-1}.tea .chapter-copy{top:27%}.large-word{position:absolute;bottom:12%;left:8%;font-family:Arial,sans-serif;font-size:clamp(18px,3vw,50px);font-weight:900;letter-spacing:-.045em;opacity:.5}.roast{height:260svh;background:#eee6cf}.roast .stage{background:#eee6cf}.roast .chapter-copy{top:22%;width:42%}.roast .chapter-copy h2{font-size:clamp(36px,4vw,64px)}.roast-art{position:absolute;width:53%;max-width:840px;right:0;top:9%;transform:rotate(calc(var(--roast)*20deg));mix-blend-mode:multiply}.roast-art>img{width:100%;height:auto}.roast-leaves{position:absolute;inset:0;clip-path:circle(35% at 50% 50%);filter:sepia(var(--roast)) saturate(calc(1 + var(--roast)*.4)) brightness(calc(1 - var(--roast)*.45));opacity:var(--roast-opacity,1)}.roast-stamp{position:absolute;right:7%;top:12%;font-family:Arial,sans-serif;font-size:10px;letter-spacing:.09em;text-align:center;display:grid;place-items:center;width:95px;height:95px;border:1px solid;border-radius:50%;transform:rotate(-16deg);line-height:1.6;background:#fffcf3aa}.roast-readout{margin-top:30px;display:flex;gap:18px;align-items:center}.roast-readout>span{font:80px/.9 Georgia,serif;color:#9c542d}.roast-readout strong{display:block;font-size:24px}.roast-readout small{display:block;font-size:12px;margin-top:9px}.roast-controls{position:absolute;bottom:6%;left:8%;width:84%;z-index:8}.roast-controls label{font-size:13px;font-weight:650;display:flex;justify-content:space-between}.roast-controls label small{font-size:11px;font-weight:400}.roast-controls input{width:100%;margin:18px 0 10px;appearance:none;height:8px;border-radius:20px;background:linear-gradient(90deg,#8daa5e,#c5a65a,#ad793e,#794923,#3c291f);cursor:ew-resize}.roast-controls input::-webkit-slider-thumb{appearance:none;height:24px;width:24px;border:4px solid var(--cream);background:var(--ink);border-radius:50%;box-shadow:0 0 0 1px var(--ink)}.roast-controls input::-moz-range-thumb{height:18px;width:18px;border:4px solid var(--cream);background:var(--ink);border-radius:50%}.roast-stops{display:flex;justify-content:space-between}.roast-stops button{font-size:12px;padding:6px 0}.fine{font-size:11px;line-height:1.8;color:#73645b;margin-top:14px}.split{display:grid;grid-template-columns:1fr 1fr}.split .chapter-copy{position:relative;align-self:center;left:auto;top:auto;width:auto;margin:0 8% 12% 16%}.portrait-art{position:relative;height:100%;overflow:hidden}.portrait-art>img{height:100%;width:100%;object-fit:cover;transform:scale(calc(1.08 - var(--p)*.08));transform-origin:50% 65%}.cream{background:#f7ecdd}.cream .portrait-art{margin-top:-88px;height:calc(100% + 88px)}.cream .chapter-copy{z-index:8}.whisper{margin-top:25px;font-size:13px!important;font-weight:600}.cream-pour{position:absolute;inset:0;background:linear-gradient(0deg,transparent 40%,#f7ecdd 80%);transform:translateY(calc(var(--p)*-110%));pointer-events:none;opacity:calc(.8 - var(--p)*.8)}.caramel{background:#331c16;color:#ffecd0}.caramel .chapter-copy{margin-left:12%;margin-right:14%}.caramel .chapter-copy h2 span{color:#f3b268}.caramel .portrait-art{margin-top:-88px;height:calc(100% + 88px)}.caramel .eyebrow{color:#e1b88f}.caramel .round-link:hover b{background:#ffecd0;color:#331c16}.caramel-glint{position:absolute;top:32%;left:50%;font-size:80px;color:#fff0a0;transform:translateY(calc(var(--p)*180px)) rotate(calc(var(--p)*100deg));opacity:calc(.3 + var(--p)*.6)}.orchard{background:#edf4e2;height:180svh}.orchard .stage{background:#edf4e2}.orchard-heading{position:absolute;top:16%;left:8%;z-index:5}.orchard-heading h2{font-size:clamp(34px,4.3vw,68px);line-height:1.2;letter-spacing:-.05em;margin-top:14px}.orchard-heading h2 span{font-size:14px;letter-spacing:.04em;margin-left:25px;font-weight:500}.orchard-scene{position:absolute;bottom:-4%;left:0;width:100%;height:80%;object-fit:cover;object-position:50% 60%;transform:scale(calc(1.09 - var(--p)*.09));z-index:0;mask-image:linear-gradient(transparent,black 16%);transition:filter .4s}.fruit-options{position:absolute;left:8%;top:34%;z-index:6;display:flex;gap:8px}.fruit-options button{background:#fffcf3e6;border:1px solid #b6c1a5;border-radius:30px;padding:11px 20px;font-size:13px;transition:.2s}.fruit-options button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}.fruit-result{position:absolute;right:8%;bottom:14%;z-index:5;background:#fffcf3f2;border:1px solid #fff;padding:23px 30px;min-width:235px;box-shadow:0 12px 40px #233e1a12;transform:translateY(calc((1 - var(--p))*15px));border-radius:4px}.fruit-result small{font-size:10px;letter-spacing:.15em;display:block}.fruit-result strong{display:block;font-size:27px;letter-spacing:-.04em;margin:10px 0}.fruit-result>span{display:block;font-size:12px}.fruit-result button{font-size:11px;padding:0;border-bottom:1px solid;margin-top:18px;padding-bottom:4px}.stores{height:190svh;background:#f1f3ee}.shop-art{position:absolute;width:72%;right:-9%;top:22%;transform:scale(calc(1 - var(--p)*.48)) translate(calc(var(--p)*-20%),calc(var(--p)*-20%));opacity:calc(1 - var(--p)*.9);transform-origin:60% 50%;z-index:1}.shop-art>img:first-child{width:100%;mix-blend-mode:multiply}.shop-logo{position:absolute;width:6%;height:auto;top:34%;left:49%;mix-blend-mode:multiply}.city-map{position:absolute;left:49%;top:22%;width:44%;height:58%;border-radius:42% 48% 46% 37%;background:radial-gradient(ellipse at 45% 50%,#d5e2c7 20%,#e4ecdc 65%,transparent 66%);opacity:var(--map-opacity,0);transform:scale(calc(.85 + var(--p)*.15));z-index:4;pointer-events:var(--map-events,none)}.map-caption{position:absolute;top:0;left:8%;font-size:11px;letter-spacing:.1em}.map-note{position:absolute;bottom:0;left:8%;font-size:10px}.pin{position:absolute;font-size:14px;display:flex;align-items:center;gap:10px;background:var(--cream);padding:12px 18px;border:1px solid #c7d3bb;border-radius:100px;box-shadow:0 5px 0 #c5d2b9;transition:background .2s}.pin:hover{background:#fff0d9}.pin b{color:#bd522b;font:25px Georgia,serif}.taipei{top:28%;left:42%}.newtaipei{top:47%;left:21%}.keelung{top:10%;left:65%}.taoyuan{top:68%;left:4%}.yilan{top:75%;left:66%}.store-list{position:relative;padding:90px 8% 85px;background:var(--cream);scroll-margin-top:30px}.list-title{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:35px}.list-title h2{font-size:34px;letter-spacing:-.04em;margin-top:12px}.store-filters{display:flex;gap:10px;flex-wrap:wrap}.store-filters button{padding:8px 12px;border-bottom:1px solid transparent;font-size:12px}.store-filters button[aria-pressed=true]{border-color:#b34a20;color:#b34a20}.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 35px}.store-card{border-top:1px solid #d9d1c3;padding:25px 0 30px}.store-no{font:10px Arial,sans-serif;letter-spacing:.12em;color:#76675e}.store-card h3{font-size:21px;margin:14px 0 10px}.store-card p{font-size:12px;line-height:1.7;min-height:40px}.store-card>div{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:12px}.store-card>div a:last-child{border:1px solid #d9d1c3;padding:6px 12px;border-radius:30px}.store-card[hidden]{display:none}.goodbye{height:100svh}.ending-scene{object-position:75% center;filter:saturate(.8)}.ending-wash{position:absolute;inset:0;background:linear-gradient(90deg,#fffcf3f8,#fffcf3df 45%,#fffcf350)}.ending-copy{position:absolute;left:8%;top:23%;z-index:5}.ending-copy h2{font-size:clamp(35px,4.3vw,69px);line-height:1.28;letter-spacing:-.04em;margin:22px 0}.ending-copy h2 span{color:#c15027}.ending-copy>p:not(.eyebrow){font-size:15px;line-height:1.9}.ending-actions{display:flex;gap:12px;margin:30px 0 26px}.primary,.secondary{display:inline-flex;padding:15px 23px;border-radius:30px;font-size:13px;font-weight:600;align-items:center;justify-content:center}.primary{background:var(--ink);color:var(--cream)}.primary:hover{background:#aa4823}.secondary{border:1px solid var(--ink);background:#fffcf388}.ending-logo{width:94px;height:auto;mix-blend-mode:multiply}.story-progress{position:fixed;left:0;bottom:0;width:100%;height:3px;background:#23181511;z-index:120}.story-progress i{display:block;height:100%;width:0;background:var(--orange)}.chapter-indicator{position:fixed;bottom:12px;left:22px;display:flex;gap:9px;align-items:center;z-index:90;font-size:9px;background:#fffcf3de;border-radius:25px;padding:8px 13px}.chapter-indicator>span:first-child{font:14px Georgia,serif}.motion-toggle{position:fixed;right:22px;bottom:12px;background:#fffcf3de;padding:8px 13px;z-index:90;border:1px solid #23181522;border-radius:25px;font-size:10px}.travelling-leaf{position:fixed;width:35px;height:25px;right:3%;top:40%;z-index:80;color:#8ca85e;pointer-events:none;transform:rotate(-25deg);opacity:.9}.travelling-leaf svg{width:100%}footer{padding:40px 8% 55px;display:flex;justify-content:space-between;gap:25px;font-size:10px;background:var(--ink);color:var(--cream);letter-spacing:.035em}footer p{font:italic 18px Georgia,serif}footer>div{display:flex;gap:20px}dialog{border:0;background:var(--cream);color:var(--ink);padding:35px;width:min(1100px,94vw);max-height:90svh;border-radius:12px}dialog::backdrop{background:#231815bb;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.dialog-head h2{font-size:27px;margin:8px 0 16px}.close-dialog{font-size:35px;align-self:flex-start;padding:0 8px}.dialog-head+p{font-size:12px;margin-bottom:24px}.menu-image img{width:100%;height:auto}.dialog-links{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px;font-size:13px}body:has(dialog[open]){overflow:hidden}.motion-reduced .chapter{height:auto!important}.motion-reduced .stage{position:relative;height:100svh;min-height:660px}.motion-reduced .scene,.motion-reduced .portrait-art>img,.motion-reduced .orchard-scene{transform:none}.motion-reduced .jumping-mascot{transform:none!important;opacity:1!important}.motion-reduced .splash,.motion-reduced .travelling-leaf,.motion-reduced .cream-pour,.motion-reduced .caramel-glint{display:none}.motion-reduced .hero-copy{transform:none;opacity:1}.motion-reduced .city-map{opacity:1;transform:none;pointer-events:auto}.motion-reduced .shop-art{opacity:.12;transform:none}.motion-reduced .roast-art{transform:none}.motion-reduced .scroll-cue{visibility:hidden}
@media(min-width:1600px){.chapter-copy{left:10%;width:35%}.hero-copy{left:10%}.hero-scene{object-position:center}.roast-art{right:4%}.stage-foot{left:10%;right:10%}}
@media(max-width:1000px){header nav{gap:18px;font-size:12px}.hero-copy{left:6%}.chapter-copy{left:6%}.roast-art{top:20%;width:57%;right:-3%}.roast .chapter-copy{width:43%}.stage-foot{left:6%;right:6%}.orchard-heading h2 span{display:block;margin:13px 0 0}.orchard-heading{top:15%}.fruit-options{top:35%}.list-title{display:block}.store-filters{margin-top:25px}.store-grid{gap:0 25px}.store-card h3{font-size:19px}.store-card p{min-height:60px}}
@media(max-width:700px){:root{--header:72px}html{scroll-padding-top:78px}header{padding:8px 6%;height:72px}.brand img{width:68px;height:48px}header nav{position:absolute;top:71px;left:0;width:100%;display:none;padding:28px;background:var(--cream);border-bottom:1px solid #d9d1c3;flex-direction:column;align-items:stretch;font-size:16px;gap:25px}header nav.open{display:flex}.text-button{text-align:left}.nav-toggle{display:block;font-size:21px;margin-left:16px;padding:8px}.order{margin-left:auto;padding:10px 16px;font-size:11px;gap:15px}.stage{min-height:650px}.chapter{height:150svh}.hero{height:165svh}.hero-scene{top:35%;height:65%;object-position:72% 50%;transform:scale(calc(1 + var(--p)*.12));transform-origin:72% 65%}.hero-wash{background:linear-gradient(180deg,#fffcf3 25%,#fffcf300 53%);z-index:-1}.hero-copy{top:15%;left:8%;width:86%}.hero .eyebrow{font-size:8px;letter-spacing:.16em}.hero h1{font-size:64px;line-height:.94;margin:14px 0 12px;letter-spacing:-.07em}.hero h1 br:nth-of-type(2){display:none}.hero h1 em{margin-left:12px}.hero-zh{font-size:14px}.hero .round-link{margin-top:16px;font-size:11px;gap:14px}.hero .round-link b{width:31px;height:31px;font-size:18px}.jumping-mascot{width:94px;left:57%;top:49%;transform:translate(calc(var(--jump)*25px),calc(var(--jump)*130px)) rotate(calc(var(--jump)*90deg)) scale(calc(1 - var(--jump)*.55))}.splash{left:67%;top:64%}.stage-foot{left:8%;right:8%;bottom:50px;font-size:8px}.stage-foot>span:last-child{font-size:8px;max-width:48%;text-align:right}.chapter-copy{left:8%;top:17%;width:84%}.chapter-copy h2{font-size:38px;line-height:1.26;margin:15px 0}.chapter-copy>p:not(.eyebrow){font-size:13px;line-height:1.9}.eyebrow{font-size:9px;letter-spacing:.12em}.tiny-label{font-size:9px;margin-top:16px;padding:7px 12px}.tea .chapter-copy{top:17%}.tea-scene{object-position:74% 50%;height:70%;top:30%;transform:scale(calc(1.35 - var(--p)*.35));transform-origin:80% 75%}.scene-wash{background:linear-gradient(180deg,#fffcf3 18%,#fffcf3ed 32%,#fffcf300 59%)}.large-word{bottom:12%;font-size:21px}.roast{height:225svh}.roast .chapter-copy{top:15%;width:84%}.roast .chapter-copy h2{font-size:34px;margin:12px 0}.roast .chapter-copy>p:not(.eyebrow){font-size:12px}.roast-art{width:86%;right:7%;top:36%;max-height:55%;}.roast-stamp{width:65px;height:65px;font-size:7px;right:1%;top:16%}.roast-readout{position:absolute;right:0;top:46px;margin:0;gap:10px}.roast-readout>span{font-size:40px}.roast-readout strong{font-size:17px}.roast-readout small{display:none}.roast-controls{bottom:7%;left:8%;width:84%}.roast-controls label{font-size:11px}.roast-controls label small{font-size:9px}.roast-stops button{font-size:10px}.roast-controls .fine{font-size:9px;margin-top:8px}.split{display:block}.split .chapter-copy{position:absolute;left:8%;top:17%;width:84%;margin:0}.split .portrait-art{position:absolute;top:33%;height:67%;width:100%;margin:0;z-index:-1}.portrait-art>img{object-position:50% 62%;object-fit:cover}.cream .portrait-art{mask-image:linear-gradient(transparent,black 25%);}.cream .chapter-copy>p:not(.eyebrow),.caramel .chapter-copy>p:not(.eyebrow){max-width:74%;font-size:12px}.cream .tiny-label{position:absolute;right:0;top:20px;writing-mode:vertical-rl;border:0;letter-spacing:.1em;font-size:9px;padding:0}.cream .whisper{display:none}.cream-pour{background:linear-gradient(0deg,transparent 10%,#f7ecdd 65%)}.caramel .portrait-art{mask-image:linear-gradient(transparent,black 25%)}.caramel .chapter-copy .round-link{margin-top:16px;font-size:11px}.caramel .chapter-copy .tiny-label{position:absolute;right:0;top:20px;font-size:9px}.caramel .round-link b{width:32px;height:32px;font-size:17px}.caramel-glint{font-size:50px;top:40%}.orchard{height:165svh}.orchard-heading{left:8%;top:16%;width:84%}.orchard-heading h2{font-size:39px;margin-top:12px}.orchard-heading h2 span{font-size:12px;margin-top:14px}.orchard-scene{height:65%;bottom:7%;object-position:50% 50%;width:100%;max-width:none;transform:scale(calc(1.08 - var(--p)*.08))}.fruit-options{top:33%;left:8%;gap:7px}.fruit-options button{font-size:11px;padding:9px 16px}.fruit-result{bottom:11%;right:8%;padding:15px 20px;min-width:220px}.fruit-result strong{font-size:23px;margin:6px 0}.fruit-result small{font-size:8px}.fruit-result>span{font-size:10px}.fruit-result button{font-size:10px;margin-top:12px}.stores{height:175svh}.stores .chapter-copy{top:16%}.stores .round-link{font-size:11px;margin-top:14px;gap:15px}.stores .round-link b{width:32px;height:32px;font-size:17px}.shop-art{top:44%;width:120%;right:-10%}.city-map{top:47%;left:5%;width:90%;height:39%}.map-caption{font-size:8px;top:-5%}.map-note{font-size:8px;bottom:-5%}.pin{font-size:11px;padding:9px 12px;gap:7px}.pin b{font-size:20px}.keelung{left:64%}.yilan{left:67%}.taipei{left:40%}.newtaipei{left:15%}.taoyuan{left:0}.store-list{padding:60px 8% 55px}.list-title h2{font-size:28px}.store-filters{gap:5px;margin-top:20px}.store-filters button{font-size:11px;padding:8px 9px}.store-grid{grid-template-columns:1fr}.store-card{padding:20px 0 25px}.store-card h3{font-size:21px;margin:10px 0}.store-card p{min-height:0;font-size:12px}.store-card>div{margin-top:15px}.store-card .store-no{font-size:9px}.goodbye{height:100svh}.ending-copy{left:8%;top:18%;width:84%}.ending-copy h2{font-size:38px;margin:18px 0}.ending-copy>p:not(.eyebrow){font-size:13px}.ending-wash{background:linear-gradient(180deg,#fffcf3f2,#fffcf3df 50%,#fffcf377)}.ending-scene{object-position:75% 80%;top:30%;height:70%}.ending-actions{flex-direction:column;align-items:flex-start;gap:10px;margin:23px 0}.primary,.secondary{font-size:12px;padding:13px 22px}.ending-logo{width:80px}.travelling-leaf{right:3%;width:25px;opacity:.75}.chapter-indicator{left:10px;bottom:10px;font-size:8px;padding:7px 10px}.motion-toggle{right:10px;bottom:10px;font-size:9px}.chapter-indicator>span:first-child{font-size:12px}footer{padding:32px 8% 60px;flex-wrap:wrap;gap:20px}footer>div{width:100%;gap:24px}footer p{font-size:14px}dialog{padding:22px 18px;width:94vw}.dialog-head h2{font-size:20px}.dialog-head+p{font-size:10px}.dialog-links{font-size:11px;gap:10px}.dialog-links .primary{padding:12px 15px}.close-dialog{font-size:28px}.motion-reduced .stage{min-height:650px}}
@media(max-width:370px){.hero h1{font-size:56px}.chapter-copy h2{font-size:32px}.roast .chapter-copy h2{font-size:29px}.roast-readout{top:38px}.roast-readout>span{font-size:32px}.fruit-options button{padding:9px 13px}.ending-copy h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(min-width:701px){.hero-scene{top:88px;height:calc(100% - 88px);object-position:70% 0%}.jumping-mascot{width:120px}}
.roast-leaves{clip-path:circle(38% at 50% 50%)}
html{scroll-padding-top:0}.store-list{scroll-margin-top:88px}
@media(min-width:701px){.roast-art{width:min(50vw,65svh);right:5%;top:15%}}
@media(max-width:700px){.roast-art{width:min(80vw,41svh);right:calc((100% - min(80vw,41svh))/2);top:37%}.store-list{scroll-margin-top:72px}}
@media(max-width:700px){.hero h1{font-size:56px;line-height:.94;margin:14px 0 16px}.hero h1 br:nth-of-type(2){display:initial}.hero h1 em{margin-left:0}.hero-copy{top:14%}.hero-scene{top:44%;height:56%}.hero-wash{background:linear-gradient(180deg,#fffcf3 36%,#fffcf300 51%)}.jumping-mascot{width:80px}.hero .stage-foot{padding:8px 12px;border-radius:20px;background:#fffcf3df;bottom:52px}.hero .stage-foot>span:first-child{display:none}.hero .stage-foot>span:last-child{max-width:none;width:100%;text-align:center}}
/* Chapter links jump directly; native scrolling still drives the illustrations. */
html{scroll-behavior:auto}
@media(min-width:701px){.split .portrait-art{height:calc(100% - 40px);margin:0 20px 40px;align-self:center}.split .portrait-art>img{object-fit:contain;transform:scale(calc(.96 + var(--p)*.04))}.cream-pour{background:linear-gradient(0deg,transparent 30%,#f7ecdd 85%)}}

@media(max-width:370px){.hero h1{font-size:50px}}

.more-brand{display:flex;justify-content:center;gap:35px;padding:28px 8%;font-size:12px;background:var(--cream);border-top:1px solid #23181518}@media(max-width:700px){.more-brand{gap:18px;flex-wrap:wrap;font-size:11px}}

/* Match the partner page's arch and undistorted image proportions. */
.stores{background:var(--cream)}
.stores .shop-art{width:min(44%,calc((100svh - 190px)*1.13));max-width:640px;right:7%;top:50%;transform:translateY(-43%);transform-origin:center;opacity:calc(1 - var(--p)*.9)}
.stores .shop-art>img:first-child{display:block;width:100%;height:auto;aspect-ratio:1.13;object-fit:cover;object-position:center;border-radius:48% 48% 18px 18px;mix-blend-mode:normal}
.stores .shop-logo{display:none}
@media(max-width:700px){.stores .shop-art{top:44%;right:7%;width:86%;max-width:460px;transform:none}.stores .shop-art>img:first-child{aspect-ratio:1.5;border-radius:80px 80px 16px 16px}}
@media(max-width:700px){.stores .shop-art{top:52%}}
/* Review polish, 2026-09-29 */
.caramel-actions{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px}
.caramel .caramel-actions .tiny-label,.caramel .caramel-actions .round-link{position:static;margin:0}
.caramel .stage-foot{bottom:24px;left:6.5%;right:6.5%;gap:24px;align-items:center}
.caramel .stage-foot span:first-child{padding:7px 12px;background:#321c14;border-radius:4px}
footer div:last-child{flex-wrap:wrap;gap:20px}
.roast-art{transform:rotate(calc(var(--roast)*5deg))}
.roast-leaves{filter:sepia(calc(var(--roast)*.6)) saturate(1) brightness(calc(1 - var(--roast)*.2))}
@media(min-width:761px){.caramel .portrait-art{height:calc(100% - 120px);margin-top:0;align-self:center}.caramel .chapter-copy{margin-bottom:70px}}
@media(max-width:760px){.caramel-actions{gap:12px;margin-top:16px;flex-direction:row;align-items:center;flex-wrap:wrap}.caramel .caramel-actions .tiny-label{font-size:11px;padding:8px 12px}.caramel .stage-foot{bottom:68px;font-size:11px}.caramel .stage-foot span:last-child{display:none}}
@media(min-width:761px){.caramel .stage-foot{bottom:54px;left:9%;right:9%}.caramel .portrait-art{height:calc(100% - 160px)}}
/* Roast changes with scroll; the basket stays still. */
.roast .roast-art{transform:none}
.roast .roast-leaves{filter:sepia(calc(var(--roast)*.85)) saturate(calc(.9 - var(--roast)*.25)) brightness(calc(1.2 - var(--roast)*.72));opacity:1}
.roast-art{aspect-ratio:1;mix-blend-mode:multiply}
.roast-art>img.roast-stage{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;clip-path:circle(47% at 50% 50%);filter:none}
.roast-art>img.roast-stage:first-child{opacity:1}
.roast-stamp{z-index:6}

/* Primary content pages remain visible above the fold on every screen. */
.home-page{--header:126px}.home-page header{height:var(--header);padding-bottom:48px}.brand-pages{position:absolute;right:4.5%;bottom:11px;display:flex;align-items:center;gap:28px;font-size:13px;font-weight:650}.brand-pages a{padding:5px 0;border-bottom:1px solid #b7502940}.brand-pages a:hover{color:#b75029;border-color:#b75029}
@media(max-width:700px){.home-page{--header:116px}.home-page header{padding-bottom:48px}.home-page header nav{top:115px}.home-page .brand-pages{left:6%;right:6%;bottom:10px;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:0}.home-page .hero-copy{top:max(15%,136px)}.home-page .chapter-copy,.home-page .roast .chapter-copy,.home-page .split .chapter-copy,.home-page .tea .chapter-copy,.home-page .stores .chapter-copy{top:max(17%,132px)}}


.roast-stops{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.roast-stops button{text-align:center;padding:8px 0}.roast-readout small{max-width:320px;line-height:1.8}
@media(max-width:700px){.roast-stops{gap:3px}.roast-stops button{font-size:10px;letter-spacing:0}.roast .roast-readout{position:static;margin-top:14px;gap:12px}.roast .roast-readout>span{font-size:32px}.roast .roast-readout strong{font-size:18px}.roast .roast-art{top:43%;width:min(80vw,34svh);right:calc((100% - min(80vw,34svh))/2)}}