:root{
  --deep:#03163A; --water:#0A62B8; --aqua:#35B9F0; --mist:#EAF7FF; --foam:#F7FCFF;
  --copper:#B5683A; --copper2:#E0A074; --forest:#0A2B22; --ink:#0B1B2E;
  --display:'Bodoni Moda','Didot',serif; --body:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--foam);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;font-weight:300;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;margin:0}
h2{font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:-.005em}
h3{font-size:1.35rem}
.eyebrow{font-size:.76rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--water);margin:0 0 1.2rem}
.lede{font-size:1.15rem;max-width:36rem}
section{padding:5.5rem 1.4rem;position:relative}
@media(min-width:900px){section{padding:8.5rem 7vw}}
.lock{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:clamp(1.5rem,5vw,2.6rem);margin:.6rem 0 0;font-weight:500}
.tag{letter-spacing:.42em;text-transform:uppercase;font-size:.72rem;color:var(--water);margin:.5rem 0 0;font-weight:400}
.cta{display:inline-block;border:1px solid currentColor;padding:.95rem 2rem;border-radius:999px;text-decoration:none;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;font-weight:500;transition:background .3s,color .3s}
.cta:hover{background:var(--deep);color:#fff}
.pill{border:1px solid currentColor;text-decoration:none;padding:.45rem 1.1rem;border-radius:999px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.fine{font-size:.8rem;opacity:.65}

/* top */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem;color:#fff;transition:background .4s,color .4s}
.top.solid{background:rgba(247,252,255,.86);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(3,22,58,.08)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:.9rem}
.brand img{height:40px;width:auto}
.top nav{display:none;gap:1.8rem}
.top nav a{text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
@media(min-width:960px){.top{padding:.8rem 7vw}.top nav{display:flex}}

/* ============ hero ============ */
#hero{height:420vh;padding:0;background:var(--deep)}
.hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
#swirl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff 0,#fff 30%,rgba(255,255,255,.85) 60%,rgba(234,247,255,.8) 100%);opacity:0;pointer-events:none}
.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;pointer-events:none;will-change:opacity,transform}
.s1{color:#fff;text-shadow:0 2px 30px rgba(3,22,58,.55)}
.s1 .eyebrow{color:#fff}
.s1 h1{font-size:clamp(3.2rem,13vw,9rem);font-weight:400;letter-spacing:-.01em;font-style:italic}
.move{margin-top:2rem;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase}
.move span{display:inline-block;animation:bob 1.6s infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.s2 p{font-family:var(--display);font-style:italic;font-size:clamp(1.7rem,6vw,4rem);color:#fff;text-shadow:0 2px 30px rgba(3,22,58,.6);max-width:14em;margin:0}
.s3 img{width:clamp(210px,50vw,330px);filter:drop-shadow(0 20px 30px rgba(10,98,184,.25))}
.s3{color:var(--deep)}

/* ============ welcome ============ */
.cols{display:grid;gap:2.2rem;max-width:70rem}
@media(min-width:900px){.cols{grid-template-columns:1.2fr 1fr;gap:5rem;align-items:end}}
.copy p{margin:0 0 1rem}
.strip{display:flex;gap:10px;margin:3.5rem -1.4rem 0;padding:0 1.4rem;overflow-x:auto;scroll-snap-type:x mandatory}
.strip figure{flex:0 0 58vw;max-width:260px;aspect-ratio:9/14;margin:0;border-radius:140px 140px 14px 14px;overflow:hidden;scroll-snap-align:center;background:var(--mist)}
.strip img,.strip video{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.strip{margin:5rem 0 0;padding:0;justify-content:space-between;overflow:visible}.strip figure{flex:1}.strip figure:nth-child(even){margin-top:3rem}}

/* ============ menu ============ */
#menu{background:var(--mist)}
.menu-wrap{display:grid;gap:2.5rem;max-width:74rem;margin:0 auto}
@media(min-width:960px){.menu-wrap{grid-template-columns:1.25fr 1fr;gap:4rem;align-items:start}}
.board{background:#fff;padding:2rem 1.4rem 2.2rem;border-radius:6px;box-shadow:0 30px 60px -30px rgba(3,22,58,.35)}
@media(min-width:700px){.board{padding:3rem 3rem 3.2rem}}
.board-top{font-size:.72rem;letter-spacing:.08em;opacity:.7;margin:0 0 1rem}
.board h2{text-align:center;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2.4rem,7vw,3.6rem);margin-bottom:1.6rem;transform:scaleY(1.25)}
.board dl{margin:0}
.board dl > div{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;align-items:baseline;padding:1rem 0;border-top:1px solid rgba(3,22,58,.1)}
.board dl > div > dt{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.25rem,4.4vw,1.9rem);letter-spacing:.02em;transform:scaleY(1.2);transform-origin:left bottom;white-space:nowrap}
.board dl > div > dd{margin:0;font-size:.88rem;text-align:right;opacity:.85}
@media(max-width:560px){.board dl > div{grid-template-columns:1fr}.board dl > div > dd{text-align:left}.board dl > div > dd.sum{margin-top:.3rem}}
.board-note{margin:1.6rem 0 0;font-family:var(--display);font-style:italic;font-size:1.1rem;text-align:center}

/* each board line opens to show its drinks (with JavaScript; without it every line is shown open) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.board .line{position:relative}
.board dt button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;background:none;border:0;padding:0;margin:0;cursor:default;-webkit-tap-highlight-color:transparent}
.board dt button i{display:none}
.js .board dt button,.js .board .line > .sum{cursor:pointer}
/* the small ring sits in the gap after the name, out of the flow, so every line keeps its original width and wrapping */
.js .board dt button{position:relative}
.js .board dt button i{display:block;position:absolute;left:100%;top:50%;width:9px;height:9px;margin:-5px 0 0 3px;border:1px solid rgba(10,98,184,.3);border-radius:50%;color:var(--water);transform:scaleY(.8333);transition:border-color .3s,background .3s}
.js .board dt button i::before,.js .board dt button i::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:1px;margin:-.5px 0 0 -2.5px;background:currentColor;transition:transform .35s ease}
.js .board dt button i::after{transform:rotate(90deg)}
.js .board .line.open dt button i::after{transform:rotate(90deg) scaleX(0)}
.js .board .line:hover dt button i,.js .board .line.open dt button i{border-color:var(--water)}
.board dt button:focus-visible{outline:2px solid var(--aqua);outline-offset:4px;border-radius:3px}
.board dl > div > dd.drinks{grid-column:1/-1;text-align:left;opacity:1;font-size:1rem;cursor:auto}
.js .board .drinks{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.js .board .line.open .drinks{grid-template-rows:1fr}
.board .drinks-in{min-height:0;overflow:hidden}
.js .board .line:not(.open) .drinks-in{visibility:hidden;transition:visibility 0s .45s}
.board .cards{list-style:none;margin:0;padding:.9rem 0 .2rem;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.js .board .cards{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.js .board .line.open .cards{opacity:1;transform:none;transition-delay:.08s}
.board .card{background:var(--foam);border:1px solid rgba(3,22,58,.08);border-radius:10px;padding:.95rem 1.05rem 1rem;transition:border-color .3s,box-shadow .3s,opacity .3s}
.board .card h3{font-size:1.12rem;letter-spacing:.01em;margin:0 0 .35rem}
.board .card p{margin:0;font-size:.86rem;line-height:1.5}
.board .card p + p{margin-top:.6rem}
.board .card .k b{display:block;font-family:var(--body);font-weight:500;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--water);margin-bottom:.15rem}
.board .card h3 .price{float:right;margin-left:.6rem;font-family:var(--body);font-weight:500;font-size:.86rem;letter-spacing:.04em;color:var(--water)}
.board .card .label-figs{font-size:.74rem;opacity:.7}

/* "What are you after?": a quiet row of four; a choice lights the matching drinks and dims the rest */
.after{display:none;margin:-.2rem 0 1.5rem;text-align:center}
.js .after{display:block}
.after-q{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--water);margin:0 0 .8rem}
.after-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.after-row button{font:500 .68rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--deep);background:#fff;border:1px solid rgba(3,22,58,.22);border-radius:999px;min-height:40px;padding:.5rem 1rem;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.after-row button:hover{border-color:var(--water)}
.after-row button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.after-row button:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.after-say{display:grid;max-width:30rem;margin:.9rem auto 0}
.after-say > *{grid-area:1/1;margin:0;font-family:var(--display);font-style:italic;font-size:1rem;line-height:1.45}
.after-say > span{visibility:hidden}
.board .line > dt,.board .line > .sum{transition:opacity .35s}
.board.wants .line:not(.hit) > dt,.board.wants .line:not(.hit) > .sum{opacity:.32}
.board.wants .line:not(.hit) .card,.board.wants .line.hit .card:not(.hit){opacity:.5}
.board .line::before{content:"";position:absolute;left:-.9rem;top:1.15rem;width:3px;height:1.7rem;border-radius:3px;background:var(--aqua);opacity:0;transition:opacity .35s}
.board .line.hit::before{opacity:1}
.board .sum span{background:linear-gradient(rgba(53,185,240,.3),rgba(53,185,240,.3)) no-repeat 0 92%/0 .42em;transition:background-size .45s ease}
.board .sum span.hit{background-size:100% .42em}
.board .card.hit{border-color:rgba(53,185,240,.65);box-shadow:0 0 0 3px rgba(53,185,240,.12)}
@media (prefers-reduced-motion: reduce){.js .board .drinks,.js .board .drinks-in,.js .board .line:not(.open) .drinks-in,.js .board .cards,.board .card,.js .board dt button i,.js .board dt button i::before,.js .board dt button i::after,.board .line > dt,.board .line > .sum,.board .line::before,.board .sum span,.after-row button{transition:none}.js .board .cards{transform:none}}
.pours{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pours figure{margin:0;position:relative;aspect-ratio:9/13;border-radius:12px;overflow:hidden;background:#cfe6f5}
.pours figure:nth-child(even){transform:translateY(1.6rem)}
.pours img,.pours video{width:100%;height:100%;object-fit:cover}
.pours figcaption,.exp h3{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-family:var(--body);font-weight:500}
.pours figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem .8rem .7rem;color:#fff;background:linear-gradient(transparent,rgba(3,22,58,.7))}

/* ============ copper ============ */
#copper{background:linear-gradient(160deg,#2a1408,#6b3516 55%,#B5683A);color:#fff;display:grid;gap:2.4rem;align-items:center}
#copper .eyebrow{color:var(--copper2)}
.copper-film{border-radius:999px 999px 16px 16px;overflow:hidden;aspect-ratio:9/14;max-width:360px;width:100%;margin:0 auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(224,160,116,.4)}
.copper-film video{width:100%;height:100%;object-fit:cover}
.copper-copy p{max-width:34rem}
.copper-row{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:1.8rem 0 0;max-width:34rem}
.copper-row img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.sign{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--copper2);margin-top:1.4rem}
@media(min-width:900px){#copper{grid-template-columns:minmax(260px,400px) 1fr;gap:6vw}}

/* ============ values ============ */
#values{text-align:center;background:var(--foam)}
.drops{display:grid;gap:1.6rem;max-width:66rem;margin:1rem auto 0}
@media(min-width:800px){.drops{grid-template-columns:repeat(3,1fr)}}
.drops article{padding:2.4rem 1.6rem;background:linear-gradient(180deg,#fff,var(--mist));border-radius:50% 50% 50% 50% / 38% 38% 62% 62%;aspect-ratio:1/1.12;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:inset 0 -20px 40px -20px rgba(53,185,240,.45),0 30px 50px -30px rgba(10,98,184,.35)}
.drops span{font-family:var(--display);font-size:2.4rem;color:var(--aqua)}
.drops p{margin:.5rem 0 0;font-size:.95rem;max-width:15rem}

/* ============ forest ============ */
#forest{background:linear-gradient(180deg,#1f7a5a 0,#125240 45%,#0a2b22 100%);color:#eaf6ee;min-height:100svh;overflow:hidden;padding-bottom:14rem}
#forest .eyebrow{color:#9fe3b4}
.trees{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;pointer-events:none}
.trees .far{opacity:.8}
.spores{position:absolute;inset:0;pointer-events:none}
.spores i{position:absolute;width:5px;height:5px;border-radius:50%;background:#d9ffb0;box-shadow:0 0 12px 3px rgba(190,255,150,.6);animation:float 9s infinite ease-in-out;opacity:0}
@keyframes float{0%{transform:translateY(20px);opacity:0}30%{opacity:.9}100%{transform:translateY(-140px);opacity:0}}
.forest-copy{position:relative;max-width:64rem}
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2.4rem}
@media(min-width:900px){.shelf{grid-template-columns:repeat(4,1fr)}}
.shelf article{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:120px 120px 14px 14px;padding:2.6rem 1.1rem 1.4rem;text-align:center}
.shelf p{font-size:.9rem;margin:.5rem 0 0;opacity:.9}

/* ============ guide ============ */
#guide{background:var(--mist);display:grid;gap:2rem;align-items:stretch}
@media(min-width:960px){#guide{grid-template-columns:1.1fr 1fr;gap:4rem}}
.guide-card{background:#fff;border-radius:22px;padding:2rem 1.5rem;box-shadow:0 30px 60px -30px rgba(3,22,58,.35)}
@media(min-width:700px){.guide-card{padding:3rem}}
.guide-card h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:.8rem}
#calc{display:grid;gap:1.1rem;margin:1.6rem 0}
#calc label{display:grid;gap:.4rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
#calc output{float:right;color:var(--water);letter-spacing:0;text-transform:none;font-size:1rem;justify-self:end;margin-top:-1.7rem}
#calc input[type=range]{width:100%;accent-color:var(--water)}
#calc .check{display:flex;align-items:center;gap:.6rem}
#calc select{font:inherit;padding:.7rem;border-radius:10px;border:1px solid rgba(3,22,58,.25);text-transform:none;letter-spacing:0;background:#fff}
.answer{background:var(--deep);color:#fff;border-radius:16px;padding:1.3rem 1.3rem 1.4rem}
.answer b{font-family:var(--display);font-size:2.6rem;font-weight:500;display:block;line-height:1.1}
.answer p{margin:.4rem 0 0}
.answer .pick{margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.2)}
.guide-photo{border-radius:22px;overflow:hidden;min-height:320px}
.guide-photo img{width:100%;height:100%;object-fit:cover}

/* ============ experiences ============ */
.exp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2.4rem}
@media(min-width:900px){.exp{grid-template-columns:repeat(4,1fr);gap:20px}}
.exp figure{margin:0 0 .8rem;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--mist)}
.exp figure img,.exp figure video{width:100%;height:100%;object-fit:cover}
.exp .plain.a{background:radial-gradient(circle at 50% 60%,#fff 0,#bfe6fb 35%,#35B9F0 70%,#0A62B8 100%)}
.exp .plain.b{background:radial-gradient(circle at 35% 35%,#fff 0,#e6f6ff 30%,#bfe6fb 60%,#8fd0f3 100%)}
.exp article{text-align:center}
.sister{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:4rem;padding:1.6rem 1.6rem;border-radius:20px;text-decoration:none;color:#15131C;background:linear-gradient(100deg,#FFB81C,#FF6A13 55%,#FF2E7E)}
.sister b{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.6rem);text-transform:uppercase;font-weight:700}
.sister i{font-style:normal;font-size:2rem;margin-left:auto}

/* ============ brands ============ */
#brands{background:var(--deep);color:#fff;text-align:center}
#brands .eyebrow{color:var(--aqua)}
#brands .lede{margin:1.2rem auto 0}
.glass-row{display:grid;gap:14px;margin:3rem auto 0;max-width:70rem}
@media(min-width:800px){.glass-row{grid-template-columns:repeat(3,1fr)}}
.glass-row article{aspect-ratio:4/5;border-radius:18px;background:#123 center/cover;display:grid;place-items:center;overflow:hidden}
.glass{width:78%;padding:2rem 1rem;border-radius:999px 999px 18px 18px;background:rgba(234,247,255,.16);backdrop-filter:blur(9px) saturate(1.3);-webkit-backdrop-filter:blur(9px) saturate(1.3);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 0 40px rgba(255,255,255,.15)}
.glass span{display:inline-block;margin-top:.8rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;border:1px dashed #fff;padding:.45rem .8rem;border-radius:999px}
.poured{margin:3.5rem 0 1rem;font-size:.76rem;letter-spacing:.32em;text-transform:uppercase;color:var(--aqua)}
.names{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;padding:0;margin:0 0 3rem;font-family:var(--display);font-size:1.3rem}

footer{background:var(--foam);text-align:center;padding:4.5rem 1.4rem 5rem}
footer img{width:170px;margin:0 auto}
footer a{color:var(--water)}
footer p{margin:.5rem 0}
.small{opacity:.6;font-size:.85rem}
.f-legal{max-width:20rem;margin:1.6rem auto 0;padding-top:.5rem;border-top:1px solid rgba(3,22,58,.12)}
.f-legal .small{opacity:1;margin:0;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;color:rgba(11,27,46,.55)}
.f-legal a,.f-legal button{display:inline-block;padding:.85rem .45rem .85rem .6rem;color:var(--water);text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer}
.f-legal a:hover,.f-legal button:hover{text-decoration:underline;text-underline-offset:4px}
.f-legal a:focus-visible,.f-legal button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px;border-radius:999px}
.f-settings[hidden]{display:none}
@media(max-width:480px){.f-settings{display:block}.f-dot{display:none}}

/* ============ cookie note: a frosted drop of glass resting at the bottom ============ */
.cookie-dock{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:40;display:flex;justify-content:center;pointer-events:none}
.cookie{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;max-width:44rem;padding:.65rem .75rem .65rem 1.05rem;border-radius:26px;color:var(--deep);background:rgba(234,247,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -16px 30px -20px rgba(53,185,240,.6), 0 24px 48px -24px rgba(3,22,58,.6);visibility:hidden;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), visibility 0s 1.1s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cookie{background:rgba(234,247,255,.97)}}
.cookie[hidden]{display:none}
.cookie.up{visibility:visible;opacity:1;transform:none;transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), visibility 0s}
.cookie p{margin:0}
.cookie > p:first-of-type{flex:1 1 13rem;font-size:.9rem;line-height:1.4;font-weight:400}
.cookie p span{white-space:nowrap}
.cookie-drop{flex:none;width:13px;height:13px;margin-right:.1rem;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:radial-gradient(circle at 35% 35%,#fff 0,#bfe6fb 30%,var(--aqua) 65%,var(--water) 100%);box-shadow:0 2px 6px rgba(10,98,184,.35)}
.cookie .cookie-do{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.cookie-ok{border:0;background:var(--deep);color:#fff;font:500 .7rem var(--body);letter-spacing:.18em;text-transform:uppercase;min-height:44px;padding:.5rem 1.2rem;border-radius:999px;cursor:pointer;transition:background .3s}
.cookie-ok:hover{background:var(--water)}
.cookie-do a{display:inline-block;padding:.75rem .35rem;color:var(--deep);font-size:.82rem;letter-spacing:.04em;text-decoration-color:var(--aqua);text-underline-offset:4px}
.cookie-ok:focus-visible,.cookie-do a:focus-visible{outline:2px solid var(--water);outline-offset:3px;border-radius:999px}
@media(min-width:720px){.cookie{flex-wrap:nowrap;border-radius:999px;padding-left:1.3rem}.cookie > p:first-of-type{flex:0 1 auto}}

@media (prefers-reduced-motion: reduce){.move span,.spores i{animation:none}.cookie,.cookie.up{transform:none;transition:none}}
.s1,.s2{background:radial-gradient(ellipse 60% 34% at 50% 50%,rgba(3,22,58,.5),rgba(3,22,58,0) 70%)}