@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Inter:wght@400&family=Noto+Serif+JP:wght@400;500&display=swap');
:root{--ink:#30382c;--paper:#fafaf6;--yellow:#edf0ba;--green:#c5e8ac;--orange:#ffebc7;color:var(--ink);background:var(--paper);font-family:'Noto Serif JP',serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth}h1,h2,h3,p{font-weight:400;margin:0}h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,5vw,5rem);letter-spacing:.05em}h3{font-size:clamp(1.5rem,2.8vw,2.75rem);line-height:1.9;margin:1.5rem 0}p{font-size:1rem;line-height:2.4}img{width:100%;height:100%;object-fit:contain;display:block}.hero{height:100svh;min-height:640px;position:relative;background-color:#34463c;background-size:cover;background-position:center;overflow:hidden;color:white}.hero-logo{position:absolute;left:9%;top:25%;width:20%;height:48%;animation:rise 1.8s both}.hero-copy{position:absolute;left:43%;top:28%;writing-mode:vertical-rl;font-size:2rem;letter-spacing:.24em;animation:rise 1.8s .9s both}.hero-bottles{position:absolute;left:52%;top:12%;width:43%;height:83%}.hero-bottle{position:absolute;width:62%;height:86%;animation:rise 1.8s .25s both}.hero-bottle.sansho{left:0;top:0}.hero-bottle.ginger{right:0;top:0}.hero-bottle.yuzu{left:20%;top:12%;z-index:2;animation-delay:.65s}.showcase{position:relative;min-height:800px;height:95svh;overflow:hidden;background:var(--yellow);transition:background 1.2s}.showcase[data-flavor=sansho]{background:var(--green)}.showcase[data-flavor=ginger]{background:var(--orange)}.flavor-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s,visibility 1.2s}.flavor-slide.is-active{opacity:1;visibility:visible}.flavor-copy{position:absolute;left:24%;top:23%;width:36%;z-index:2}.flavor-number{font-family:Inter,sans-serif;font-size:1rem;display:flex;align-items:center;gap:1rem}.flavor-number:after{content:'';width:130px;height:1px;background:currentColor}.flavor-copy h2{font-size:clamp(4rem,7vw,7rem);margin-top:1.5rem}.flavor-copy h3{font-size:1.5rem;margin:0 0 2rem}.flavor-bottle{position:absolute;right:8%;top:10%;height:82%;width:25%}.flavor-art{position:absolute;width:38%;height:58%;left:-5%;bottom:-7%}.motion-toggle{position:absolute;bottom:1rem;right:1rem;border:1px solid currentColor;background:transparent;color:inherit;border-radius:2rem;padding:.7rem 1rem;font:inherit;font-size:.875rem;cursor:pointer}.section{padding:10rem 9%;position:relative}.concept{min-height:850px;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden}.concept-art{position:relative;height:600px}.concept-art>div{position:absolute;width:80%;height:75%}.concept-art>div:nth-child(2){right:-20%;top:-10%}.concept-art>div:nth-child(3){right:0;bottom:-10%;height:45%}.story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;padding-left:0}.story-photo{height:740px}.story-photo img{object-fit:cover}.flavors header{text-align:center;margin-bottom:5rem}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.card{border-radius:30px;overflow:hidden;position:relative;height:560px;text-align:center;padding:3rem 1.5rem;background:var(--card-pale);transition:background .7s}.card h3{font-family:'Cormorant Garamond',serif;font-size:3rem;margin:0;line-height:1.2}.card p{font-size:.875rem;line-height:1.6;margin-top:1rem;position:relative;z-index:3}.card-bottle{position:absolute;inset:36% 20% 4%;z-index:2;transition:transform .7s}.card-art{position:absolute;inset:42% -10% -10%;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}.card-mark{position:absolute;inset:33% 12% 5%;opacity:.12}@media(min-width:701px) and (hover:hover) and (pointer:fine){.card:hover{background:var(--card-strong)}.card:hover .card-bottle{transform:translateY(-8px) scale(1.18)}.card:hover .card-art{opacity:1;transform:translateY(0)}}footer{background:#20251f;color:white;padding:5rem 9% 2rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem}footer .footer-logo{width:150px;height:195px}footer p{margin-top:1rem}footer nav{justify-self:end;display:flex;flex-direction:column;gap:1.1rem;font-family:'Cormorant Garamond',serif;letter-spacing:.15em}footer nav span{font-size:.875rem}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}footer small{grid-column:1/-1;border-top:1px solid #ffffff80;padding-top:1.8rem;text-align:right;font: .75rem Inter,sans-serif;letter-spacing:.15em}.bubbles{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.bubble{position:absolute;bottom:-100px;border-radius:50%;border:1px solid #ffffff90;box-shadow:inset 3px 3px 7px #ffffff60,inset -2px -2px 8px #a9c9be20;animation:float var(--duration) linear forwards}.motion-paused *{animation-play-state:paused!important}.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.4s,transform 1.4s}.js .reveal.visible{opacity:1;transform:none}@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes float{0%{opacity:0;transform:translate(0,0)}15%{opacity:.6}85%{opacity:.25}100%{opacity:0;transform:translate(var(--drift),-120vh)}}
@media(max-width:700px){.hero{min-height:680px}.hero-logo{left:12%;top:8%;width:35%;height:29%;animation-name:fade}.hero-copy{left:auto;right:15%;top:10%;font-size:1.6rem}.hero-bottles{left:8%;top:38%;width:86%;height:60%}.showcase{height:950px;min-height:0}.flavor-copy{left:9%;top:7%;width:82%}.flavor-copy h2{font-size:4rem}.flavor-copy h3{margin-bottom:1rem}.flavor-bottle{right:4%;top:42%;width:48%;height:52%}.flavor-art{left:-18%;bottom:-3%;width:85%;height:55%}.section{padding:6rem 8%}.concept{display:block;min-height:900px}.concept-art{height:420px;margin-top:2rem}.story{display:flex;flex-direction:column;padding:3rem 0;gap:0}.story-photo{width:100%;height:650px}.story .section-copy{padding:2rem 8%;margin-top:-250px;position:relative}.story-photo img{object-position:40% center}.cards{grid-template-columns:1fr;gap:3rem}.card{height:580px}.flavors header{margin-bottom:3rem}.flavors h3{font-size:1.5rem}.card h3{font-size:3.5rem}footer{padding:4rem 7% 2rem;gap:2rem}footer .footer-logo{width:120px;height:155px}footer p{font-size:1rem}footer small{font-size:.75rem;line-height:1.8}.motion-toggle{font-size:.75rem}}
/* PC composition follows the supplied 1490px-wide artboards. */
body{background:#fafafa url('assets/paper-white.jpeg') center top/100% auto repeat-y}
.hero{height:auto;min-height:0;aspect-ratio:1.405;background-image:url('assets/water.jpeg');background-size:155% auto;background-position:48% 87%}
.hero-logo{left:9.5%;top:21%;width:33%;height:67%}
.hero-copy{left:42%;top:62%;font-size:clamp(1rem,2.5vw,3rem);line-height:1.2;letter-spacing:.14em}
.hero-bottles{left:44%;top:5%;width:53%;height:91%}
.hero-bottle.sansho{left:6%;top:11%;width:36%;height:87%;transform-origin:bottom center}
.hero-bottle.sansho img{transform:rotate(-12deg)}
.hero-bottle.ginger{right:6%;top:6%;width:34%;height:90%}
.hero-bottle.ginger img{transform:rotate(6deg)}
.hero-bottle.yuzu{left:-3%;top:0;width:110%;height:96%}
.hero-bottle.yuzu img{transform:rotate(10deg)}
@media(max-width:700px){.hero{aspect-ratio:auto;height:100svh;min-height:720px;background-size:auto 150%;background-position:50% 90%}.hero-logo{left:10%;top:6%;width:40%;height:32%}.hero-copy{left:auto;right:17%;top:9%;font-size:1.5rem}.hero-bottles{left:2%;top:39%;width:96%;height:57%}}
.showcase{height:auto;min-height:0;aspect-ratio:1.405;background-color:#f8fad7;background-image:url('assets/paper-flavor.jpeg');background-size:cover;background-blend-mode:multiply}
.showcase[data-flavor=sansho]{background-color:#e9f6df}.showcase[data-flavor=ginger]{background-color:#fbedd1}
.flavor-copy{inset:0;width:100%;pointer-events:none}.flavor-number{position:absolute;left:34.5%;top:27%;letter-spacing:.2em;font-family:'Cormorant Garamond',serif}.flavor-number:after{width:8.6vw;opacity:.4}
.flavor-copy h2{position:absolute;left:10%;top:34%;width:31%;text-align:center;margin:0;font-size:clamp(3rem,6.5vw,7rem);letter-spacing:0;line-height:1.2}
.flavor-copy h3{position:absolute;left:10%;top:49%;width:31%;text-align:center;font-size:clamp(1.25rem,2vw,2.2rem);letter-spacing:.2em;margin:0}
.flavor-copy p{position:absolute;left:41.5%;top:39%;font-size:clamp(.875rem,1.18vw,1.25rem);line-height:1.65;letter-spacing:.08em}
.flavor-bottle{right:7%;top:7%;width:23%;height:88%;transform:rotate(-7deg)}.flavor-slide[data-id=sansho] .flavor-bottle{transform:rotate(3deg)}.flavor-slide[data-id=ginger] .flavor-bottle{transform:rotate(-4deg)}
.flavor-art{left:1%;bottom:-13%;width:46%;height:57%}.flavor-accent{position:absolute}.accent-0{left:6%;top:9%;width:18%;height:25%}.accent-1{left:47%;top:53%;width:20%;height:28%}
.flavor-slide[data-id=sansho] .flavor-art{left:1%;bottom:-24%;width:68%;height:69%;transform:rotate(4deg)}.flavor-slide[data-id=sansho] .accent-0{left:4%;top:-28%;width:45%;height:56%;transform:rotate(176deg)}.flavor-slide[data-id=sansho] .accent-1{left:49%;top:3%;width:18%;height:31%;transform:rotate(72deg)}
.flavor-slide[data-id=ginger] .flavor-art{left:1%;bottom:-13%;width:43%;height:61%;transform:rotate(-12deg)}.flavor-slide[data-id=ginger] .accent-0{left:5%;top:4%;width:22%;height:31%;transform:rotate(28deg)}.flavor-slide[data-id=ginger] .accent-1{left:47%;top:50%;width:21%;height:36%;transform:rotate(17deg)}
.motion-toggle{border:0;font-size:.75rem;opacity:.7;z-index:4}
.section h2{font-size:.875rem;letter-spacing:.18em}.section h3{font-size:clamp(1.375rem,1.8vw,2rem);line-height:1.45;margin:3.3rem 0 4.5rem}.section p{font-size:1rem;line-height:1.55}.concept{display:block;padding:0;height:65vw;min-height:740px;max-height:1100px}.concept .section-copy{position:absolute;left:15.5%;top:34%;z-index:2}.concept-art{position:absolute;right:-1%;top:0;width:57%;height:104%;margin:0}.concept-art>.plant{position:absolute;inset:auto}.concept-art>.plant-0{left:16%;top:1%;width:28%;height:26%;transform:rotate(34deg)}.concept-art>.plant-1{right:-10%;top:0;width:60%;height:43%;transform:rotate(-17deg)}.concept-art>.plant-2{left:33%;top:24%;width:40%;height:28%;transform:rotate(-15deg)}.concept-art>.plant-3{right:4%;top:37%;width:25%;height:20%}.concept-art>.plant-4{left:9%;top:44%;width:42%;height:34%;transform:rotate(35deg)}.concept-art>.plant-5{right:-7%;top:48%;width:43%;height:28%;transform:rotate(-25deg)}.concept-art>.plant-6{left:22%;bottom:-1%;width:52%;height:43%;transform:rotate(83deg)}.concept-art>.plant-7{right:-2%;bottom:6%;width:30%;height:31%;transform:rotate(20deg)}
.story{padding:0 5.3% 5rem;gap:7.5%;grid-template-columns:48% 44.5%;position:relative}.story-photo{height:auto;aspect-ratio:.706}.story-photo img{object-position:45% center}.story .section-copy{padding-top:2rem}.story .section-copy p{max-width:32rem}.flavors{padding:1rem 7% 6.5rem}.flavors header{text-align:left;margin-bottom:4rem}.flavors h3{margin:3rem 0 0}.cards{gap:2.5%}.card{height:auto;aspect-ratio:.735;padding:3.2rem 1rem 0;border-radius:25px}.card h3{font-size:clamp(2rem,3.4vw,3.7rem);margin:0;line-height:1.1}.card p{font-size:.875rem;line-height:1.4;margin-top:.7rem}.card-bottle{inset:34% 24% 5%}.card-mark{inset:35% 15% 4%;opacity:1}.card-art{inset:48% -9% -14%}.card:first-child{--card-pale:#fff5b5!important;--card-strong:#edf092!important}.card:nth-child(2){--card-pale:#f3ffc7!important}
footer{padding:5rem 6% 2rem;gap:3rem}footer .footer-logo{width:190px;height:240px}footer p{font-size:1.5rem;margin-top:2.5rem}footer nav{margin-right:13%;font-size:1.2rem;gap:1.2rem}footer small{margin-top:1rem;padding-top:2rem}
@media(max-width:700px){.showcase{aspect-ratio:auto;height:960px}.flavor-number{left:9%;top:6%}.flavor-number:after{width:85px}.flavor-copy h2{left:6%;top:12%;width:88%;text-align:left;font-size:4.3rem}.flavor-copy h3{left:9%;top:22%;width:auto;font-size:1.4rem}.flavor-copy p{left:9%;top:29%;font-size:1rem;line-height:1.8}.flavor-bottle{right:8%;top:44%;height:50%;width:39%}.flavor-art{left:-20%;bottom:-2%;width:86%;height:45%}.accent-0{left:auto;right:1%;top:18%;width:23%;height:16%}.accent-1{left:5%;top:49%;width:37%;height:23%}.flavor-slide[data-id=sansho] .flavor-art{left:-33%;bottom:-9%;width:112%;height:47%}.flavor-slide[data-id=sansho] .accent-0{left:48%;top:-5%;width:75%;height:30%}.flavor-slide[data-id=sansho] .accent-1{left:0;top:47%;width:43%;height:25%}.flavor-slide[data-id=ginger] .flavor-art{left:-19%;bottom:-8%;width:84%;height:43%}.flavor-slide[data-id=ginger] .accent-0{left:auto;right:0;top:17%;width:24%;height:16%}.flavor-slide[data-id=ginger] .accent-1{left:5%;top:48%;width:35%;height:26%}.concept{height:1050px;min-height:0;max-height:none;padding:5rem 9%}.concept .section-copy{position:relative;left:auto;top:auto}.section h3{font-size:1.65rem;margin:2.5rem 0 3rem}.concept-art{width:110%;height:600px;top:auto;bottom:0;right:-5%}.concept-art>.plant-0{top:0}.story{display:flex;padding:3rem 0 4rem}.story-photo{height:650px;aspect-ratio:auto;order:2}.story .section-copy{display:contents}.story h2{order:1;width:82%;margin:0 auto 3rem}.story h3{order:3;align-self:flex-start;margin:-260px 9% 2rem;z-index:2}.story p{order:4;padding:0 9%;position:relative;z-index:2;font-size:.9rem}.story-photo{mask-image:linear-gradient(#000 45%,#0003 78%,transparent 100%)}.flavors{padding:5rem 9%}.flavors header{margin-bottom:3rem}.flavors h3{font-size:1.5rem}.cards{gap:3rem}.card{aspect-ratio:.735;padding-top:2.75rem}.card h3{font-size:3.3rem}.card p{font-size:.875rem}.card-bottle{inset:34% 23% 5%}footer{padding:4rem 7% 2rem;gap:2rem}footer .footer-logo{width:125px;height:160px}footer nav{margin:0;font-size:1rem}footer p{font-size:1.2rem;margin-top:1.5rem}footer small{font-size:.65rem;letter-spacing:.1em}}
.card-mark{opacity:.14}
.showcase[data-flavor]{background-image:url('assets/paper-flavor.jpeg');background-size:cover;background-blend-mode:multiply}
.hero-copy span{display:inline}
.card[data-flavor=yuzu]{--card-strong:#ffdf29!important}
.card[data-flavor=sansho]{--card-strong:#c2eaa7!important}
.card[data-flavor=ginger]{--card-strong:#ffb567!important}
.card-art{inset:auto auto -2% -16%;width:75%;height:47%;z-index:1}
.card-art-extra{left:auto;right:-14%;width:67%;height:47%}
.card[data-flavor=sansho] .card-art:not(.card-art-extra){left:auto;right:-25%;width:91%;height:57%;transform:translateY(30px) rotate(-15deg)}
.card[data-flavor=sansho] .card-art-extra{left:-23%;right:auto;width:80%;height:48%}
.card[data-flavor=ginger] .card-art{left:-20%;width:86%;height:48%;transform:translateY(30px) rotate(18deg)}
.card[data-flavor=ginger] .card-art-extra{left:auto;right:-15%;width:60%;transform:translateY(30px) rotate(-12deg)}
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 .card:hover .card-bottle{transform:translateY(12%) scale(1.38);transform-origin:50% 0}
 .card:hover .card-mark{filter:brightness(0) invert(1);opacity:.35}
 .card[data-flavor=yuzu]:hover{color:#776718}.card[data-flavor=sansho]:hover{color:#496b30}.card[data-flavor=ginger]:hover{color:#996121}
 .card[data-flavor=sansho]:hover .card-art:not(.card-art-extra){transform:translateY(0) rotate(-15deg)}
 .card[data-flavor=ginger]:hover .card-art{transform:translateY(0) rotate(18deg)}
 .card[data-flavor=ginger]:hover .card-art-extra{transform:translateY(0) rotate(-12deg)}
}
/* Mobile artboard: 590 × 1284. Keep a shared coordinate system for all flavors. */
@media(max-width:700px){
 .hero{height:auto;min-height:0;aspect-ratio:590/1284;background-size:auto 113%;background-position:51% 75%}
 .hero-logo{left:21%;top:10%;width:57%;height:32%;animation-name:fade}
 .hero-copy{display:flex;flex-direction:column;writing-mode:vertical-rl;left:38%;right:auto;top:44.5%;height:15%;width:24%;font-size:clamp(1.9rem,8.15vw,3.5rem);letter-spacing:.08em;line-height:1.5}
 .hero-copy span{display:block;white-space:nowrap}
 .hero-bottles{left:10%;top:62%;width:79%;height:36.5%}
 .hero-bottle.sansho{left:6%;top:10%;height:88%;width:36%}
 .hero-bottle.ginger{right:7%;top:5%;height:91%;width:34%}
 .hero-bottle.yuzu{left:-3%;top:0;height:97%;width:110%}
 .showcase{height:auto;min-height:0;aspect-ratio:590/1284}
 .flavor-number{left:30%;top:13.5%;font-size:clamp(1rem,4.2vw,1.55rem);gap:3.5vw}
 .flavor-number:after{width:31vw}
 .flavor-copy h2{left:8%;top:18%;width:84%;text-align:center;font-size:clamp(2.9rem,12.7vw,5rem);line-height:1.1}
 .flavor-copy h3{left:8%;top:26.3%;width:84%;text-align:center;font-size:clamp(1rem,3.7vw,1.5rem);letter-spacing:.14em}
 .flavor-copy p{left:10%;top:42.5%;font-size:clamp(.75rem,2.55vw,1rem);line-height:1.65;letter-spacing:.05em}
 .flavor-bottle{right:10%;top:33.5%;height:59%;width:38%;transform:rotate(-7deg);z-index:1}
 .flavor-slide[data-id=sansho] .flavor-bottle{right:20%;transform:rotate(3deg)}
 .flavor-slide[data-id=ginger] .flavor-bottle{right:16%;transform:rotate(-4deg)}
 .flavor-art{left:-1%;bottom:3%;width:53%;height:23%}
 .accent-0{left:auto;right:-6%;top:2%;width:33%;height:16%}
 .accent-1{left:13%;top:59%;width:27%;height:13%}
 .flavor-slide[data-id=sansho] .flavor-art{left:-13%;bottom:1%;width:70%;height:27%;transform:rotate(9deg)}
 .flavor-slide[data-id=sansho] .accent-0{left:auto;right:-17%;top:-1%;width:58%;height:20%;transform:rotate(170deg)}
 .flavor-slide[data-id=sansho] .accent-1{left:14%;top:59%;width:30%;height:14%;transform:rotate(10deg)}
 .flavor-slide[data-id=ginger] .flavor-art{left:6%;bottom:3%;width:48%;height:21%;transform:rotate(-15deg)}
 .flavor-slide[data-id=ginger] .accent-0{left:auto;right:4%;top:1%;width:33%;height:16%;transform:rotate(40deg)}
 .flavor-slide[data-id=ginger] .accent-1{left:18%;top:60%;width:25%;height:13%;transform:rotate(23deg)}
 .motion-toggle{bottom:.5%;right:2%;padding:.5rem;font-size:.65rem}
 .flavors{padding:4rem 0 6rem}
 .flavors header{padding:0 9%;margin-bottom:4.5rem;text-align:center}
 .flavors h3{font-size:clamp(1.2rem,5vw,1.9rem);margin-top:2.5rem}
 .cards{width:66.2%;margin:auto;gap:21vw}
 .card{aspect-ratio:390/535;border-radius:4vw;padding:10% 3% 0}
 .card h3{font-size:clamp(1.8rem,8.5vw,3.5rem);line-height:1.12}
 .card p{font-size:clamp(.75rem,2.25vw,.875rem);line-height:1.5;margin-top:2%}
 .card-bottle{inset:34% 25% 5%}
 .card-mark{inset:35% 15% 4%}
 footer{padding:12vw 6% 3vw;gap:5vw}
 footer>div{padding-left:8%}footer .footer-logo{width:24vw;height:29vw}
 footer p{font-size:clamp(1rem,3.2vw,1.3rem);margin-top:3vw;white-space:nowrap}
 footer nav{margin-right:10%;font-size:clamp(.875rem,2.7vw,1.1rem);gap:2.4vw}footer nav span{font-size:.65rem}
 footer small{margin-top:1vw;font-size:clamp(.5rem,1.5vw,.75rem);padding-top:3vw;letter-spacing:.1em}
}
.flavor-slide{transition:opacity 1.6s cubic-bezier(.22,.61,.36,1),visibility 1.6s;will-change:opacity}
.showcase{transition:background-color 1.6s ease-in-out}
@media(max-width:700px){
 main{overflow-x:clip}
 .hero-bottle.yuzu{left:-8%}
 .flavor-slide .flavor-bottle{right:13%;top:34%;height:58%;width:37%;transform:rotate(-4deg);transform-origin:50% 80%}
 .flavor-slide[data-id=sansho] .flavor-bottle{right:13%;transform:rotate(2deg)}
 .flavor-slide[data-id=ginger] .flavor-bottle{right:13%;transform:rotate(-3deg)}
 .concept{height:auto;min-height:0;padding:5rem 9% 0;overflow:visible;z-index:1}
 .concept-art{position:relative;top:auto;right:auto;bottom:auto;width:122%;height:auto;aspect-ratio:1/1.22;margin:2.5rem -11% -1.5rem}
 .concept-art>.plant-0{left:8%;top:2%;width:27%;height:25%;transform:rotate(28deg)}
 .concept-art>.plant-1{right:-4%;top:0;width:57%;height:38%;transform:rotate(-18deg)}
 .concept-art>.plant-2{left:30%;top:23%;width:45%;height:29%;transform:rotate(-12deg)}
 .concept-art>.plant-3{right:0;top:39%;width:23%;height:20%}
 .concept-art>.plant-4{left:1%;top:40%;width:44%;height:31%;transform:rotate(25deg)}
 .concept-art>.plant-5{right:0;top:54%;width:37%;height:24%;transform:rotate(-18deg)}
 .concept-art>.plant-6{left:14%;bottom:3%;width:53%;height:34%;transform:rotate(60deg)}
 .concept-art>.plant-7{right:0;bottom:5%;width:27%;height:27%;transform:rotate(20deg)}
 .story{padding-top:4rem}

}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.bubbles{display:none}}

/* Shared card composition keeps the label clear in both states. */
.cards .card{padding:0}
.cards .card h3{position:absolute;top:11%;left:3%;width:94%;margin:0;line-height:1.1;z-index:3}
.cards .card p{position:absolute;top:24%;left:5%;width:90%;margin:0;line-height:1.4;z-index:3}
.cards .card-bottle{inset:37% 24% 5%;transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
@media(min-width:701px) and (hover:hover) and (pointer:fine){.cards .card:hover .card-bottle{transform:scale(1.38)}}
@media(max-width:700px){
 .js .cards .card{opacity:1;visibility:visible;transform:none;transition:background-color .9s,color .9s}
 .cards .card.is-centered{background:var(--card-strong)}
 .cards .card.is-centered .card-bottle{transform:scale(1.38)}
 .card.is-centered .card-mark{filter:brightness(0) invert(1);opacity:.35}
 .card.is-centered .card-art{opacity:1;transform:translateY(0)}
 .card[data-flavor=yuzu].is-centered{color:#776718}
 .card[data-flavor=sansho].is-centered{color:#496b30}
 .card[data-flavor=ginger].is-centered{color:#996121}
 .card[data-flavor=sansho].is-centered .card-art:not(.card-art-extra){transform:rotate(-15deg)}
 .card[data-flavor=ginger].is-centered .card-art{transform:rotate(18deg)}
 .card[data-flavor=ginger].is-centered .card-art-extra{transform:rotate(-12deg)}
}

/* Crossfading bottles share one unbroken pendulum movement. */
.flavor-slide{transition:opacity 2.8s ease-in-out,visibility 2.8s}
.showcase{transition:background-color 2.8s ease-in-out}
.showcase-bottles{position:absolute;right:7%;top:7%;width:23%;height:88%;z-index:1;pointer-events:none;transform-origin:50% 78%;animation:bottle-sway 12s ease-in-out infinite;will-change:transform}
.showcase-bottles .flavor-bottle{inset:0;width:100%;height:100%;transform:none;opacity:0;visibility:hidden;transition:opacity 2.8s ease-in-out,visibility 2.8s}
.showcase-bottles .flavor-bottle.is-active{opacity:1;visibility:visible}
@keyframes bottle-sway{0%,100%{transform:translateX(-2%) rotate(-5deg)}50%{transform:translateX(2%) rotate(3deg)}}
@media(max-width:700px){.showcase-bottles{right:13%;top:34%;height:58%;width:37%}}