/* welcomedrinks.com, "The Tray". Rule of the house: the page is warm white and ink; the only colour lives inside a glass. */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/familjen-grotesk-latin.woff2?v=1") format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/familjen-grotesk-italic-latin.woff2?v=1") format("woff2")}

:root{
  --ground:#FAF7F2;--ink:#1A1917;--muted:#6F6A63;--line:#DED8CE;--line-soft:#ECE7DE;--tray:#F2EDE4;--glass-empty:#ECE8E1;--well:#F4F0E9;
  --font:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s5:3rem;--s6:4rem;--s7:6rem;
  --maxw:72rem;--measure:65ch;--radius:14px;
  --shadow-lift:0 26px 30px -14px rgba(26,25,23,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.25rem,5vw,4.25rem);line-height:.98;letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3vw,2.5rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p,ul,ol,table,figure{margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(var(--maxw),100% - 2.5rem);margin-inline:auto}
.prose{max-width:var(--measure)}
.prose p+p,.prose ul+p,.prose p+ul,.prose p+ol{margin-top:var(--s2)}
.prose li+li{margin-top:.35rem}
.kicker{font-weight:500;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.9375rem}
.lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.5;color:var(--muted);max-width:44ch}

/* buttons: ink is the only solid dark fill on the page */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--ink);color:var(--ground);text-decoration:none;font-weight:600;font-size:1.0625rem;padding:.9rem 1.6rem;border-radius:999px;border:0;cursor:pointer;min-height:44px;transition:transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--well)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:1.25rem 0}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.brand i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center}
.brand i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot,#FF6B3D)}
.site-nav{display:flex;gap:1.6rem;font-weight:500;font-size:.95rem}
.site-nav a{text-decoration:none;color:var(--muted);padding:.5rem 0}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.menu-btn{display:none;appearance:none;background:none;border:2px solid var(--ink);border-radius:999px;padding:.45rem .9rem;font-weight:600;cursor:pointer;min-height:44px}
@media (max-width:760px){
  .menu-btn{display:inline-flex;align-items:center}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--ground);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.5rem 1.25rem;z-index:20}
  .site-nav a{padding:.8rem 0;border-bottom:1px solid var(--line-soft);font-size:1.05rem}
  .site-nav a:last-child{border-bottom:0}
  .site-head.open .site-nav{display:flex}
  .site-head{position:relative}
}

/* footer */
.site-foot{margin-top:var(--s7);border-top:1px solid var(--line);padding:var(--s5) 0 var(--s6);color:var(--muted);font-size:.95rem}
.foot-grid{display:grid;gap:var(--s4);grid-template-columns:1.4fr 1fr 1fr}
.foot-grid h2{font-size:1rem;color:var(--ink);margin-bottom:.6rem;letter-spacing:0}
.foot-grid ul{list-style:none;padding:0}
.foot-grid li+li{margin-top:.35rem}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-rule{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* ---- the glass, top-down ---- */
.glass{--size:120px;--drink:#ccc;display:block;position:relative;width:var(--size);height:var(--size);border-radius:50%;background:var(--glass-empty);box-shadow:inset 0 0 0 calc(var(--size)*.05) rgba(255,255,255,.55),inset 0 calc(var(--size)*-.08) calc(var(--size)*.15) rgba(0,0,0,.12),0 6px 10px -6px rgba(26,25,23,.35);overflow:hidden;flex:none;--t:calc(.25s + var(--i,0) * .38s)}
.glass .fill{position:absolute;inset:0;border-radius:50%;background:var(--drink)}
.glass .liq{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 34%,rgba(0,0,0,.08) 100%);animation:sway 3.8s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes sway{from{transform:translate(-5%,3%)}to{transform:translate(5%,-3%)}}
.glass .ice{position:absolute;width:22%;height:22%;border-radius:22%;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);left:var(--ix,30%);top:var(--iy,40%);animation:sway 3.8s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.glass .ice.two{left:52%;top:58%}
.glass .wheel{position:absolute;right:8%;top:10%;width:34%;height:34%;border-radius:50%;background:repeating-conic-gradient(var(--wheel,#F6C85F) 0 36deg,rgba(255,255,255,.95) 36deg 45deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),inset 0 0 0 5px var(--wheel,#F6C85F),0 0 0 1px rgba(255,255,255,.6)}
.glass .wheel::after{content:"";position:absolute;left:50%;top:50%;width:18%;height:18%;border-radius:50%;background:rgba(255,255,255,.95);transform:translate(-50%,-50%)}
.glass .leaf{position:absolute;right:14%;top:14%;width:30%;height:16%;border-radius:100% 0;background:#3F8A4B;transform:rotate(-35deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.glass .berry{position:absolute;right:16%;top:14%;width:16%;height:16%;border-radius:50%;background:#7A0E2C;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.glass .stick{position:absolute;left:22%;top:46%;width:56%;height:9%;border-radius:4px;background:#8A5A2B;transform:rotate(-28deg);box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.glass .twist{position:absolute;right:10%;top:18%;width:44%;height:12%;border-radius:999px;background:#F2E27A;transform:rotate(-30deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.glass .wedge{position:absolute;right:10%;top:10%;width:30%;height:30%;background:var(--wedge,#BFD86B);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:4px}
.glass .sprig{position:absolute;right:16%;top:12%;width:8%;height:48%;border-radius:999px;background:#4E7A48;transform:rotate(28deg)}
.glass .sprig::before,.glass .sprig::after{content:"";position:absolute;left:-90%;top:20%;width:280%;height:22%;border-radius:999px;background:#4E7A48}
.glass .sprig::after{top:55%}
.glass .star{position:absolute;right:14%;top:14%;width:28%;height:28%;background:#6B3B1E;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.glass .rim{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(26,25,23,.35)}
.glass .ripple{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;pointer-events:none}

/* the pour: rest state is the full glass; html.pour runs it once per session */
html.pour .glass .fill{clip-path:circle(0% at 50% 50%);animation:pour .6s cubic-bezier(.2,.7,.2,1) both var(--t)}
@keyframes pour{to{clip-path:circle(75% at 50% 50%)}}
html.pour .glass .ripple{animation:ripple .7s ease-out both calc(var(--t) + .3s)}
@keyframes ripple{from{scale:.25;opacity:.85}to{scale:1.02;opacity:0}}
html.pour .glass .ice{animation:sway 3.8s ease-in-out infinite alternate var(--d,0s),icein .45s ease-out both calc(var(--t) + .4s)}
@keyframes icein{from{opacity:0;translate:0 14%}to{opacity:1;translate:0 0}}
html.pour .glass .wheel,html.pour .glass .leaf,html.pour .glass .berry,html.pour .glass .stick,html.pour .glass .twist,html.pour .glass .wedge,html.pour .glass .sprig,html.pour .glass .star{animation:drop .5s cubic-bezier(.2,.9,.3,1.25) both calc(var(--t) + .5s)}
@keyframes drop{from{scale:1.9;opacity:0}to{scale:1;opacity:1}}
html.pour .brand i::after{animation:dotin .5s cubic-bezier(.2,.7,.2,1) both .05s}
@keyframes dotin{from{scale:0}to{scale:1}}

/* ---- the tray ---- */
.tray-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.tray{position:relative;list-style:none;margin:0;padding:0;width:min(560px,100%,68vh);aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);background:var(--tray);box-shadow:inset 0 0 0 14px var(--ground),inset 0 0 0 16px var(--line),0 40px 60px -40px rgba(26,25,23,.35)}
.tray li{position:absolute;left:var(--x);top:var(--y);width:24%;aspect-ratio:1;transform:translate(-50%,-50%)}
.tray .glass{--size:100%;width:100%;height:100%}
.tray .pick{display:block;height:100%;border-radius:50%;text-decoration:none}
.tray .pick .glass{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease;cursor:grab}
.tray .pick:hover .glass,.tray .pick:focus-visible .glass{transform:translateY(-12px) scale(1.07);box-shadow:inset 0 0 0 6px rgba(255,255,255,.55),inset 0 -10px 18px rgba(0,0,0,.12),var(--shadow-lift)}
.tray .pick:hover .liq{animation-duration:1.2s}
.tray .label{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,4px);white-space:nowrap;font-size:.8125rem;font-weight:600;letter-spacing:.02em;background:var(--ink);color:var(--ground);padding:6px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:2}
.tray .pick:hover + .label,.tray .pick:focus-visible + .label{opacity:1;transform:translate(-50%,0)}
.tray-caption{font-size:.8125rem;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;gap:10px;text-align:center}
.tray-caption::before{content:"";width:22px;height:1px;background:var(--line);flex:none}
.tray.small{width:min(220px,100%);box-shadow:inset 0 0 0 8px var(--ground),inset 0 0 0 9px var(--line);border-width:1.5px}
.tray.small li{width:34%}
.tray.small .label{display:none}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,4vw,4rem);align-items:center;padding:clamp(1.5rem,4vh,3rem) 0 clamp(2rem,6vh,4rem)}
.hero .copy{max-width:560px}
.hero .kicker{margin-bottom:1.1rem}
.hero .lede{margin:1.4rem 0 1.8rem}
.hero .micro{margin-top:.9rem;font-size:.9rem;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:2rem}.hero .tray-wrap{order:2}.tray{width:min(420px,88vw)}}

/* ---- sections ---- */
.section{padding:var(--s6) 0 0}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s2) var(--s4);margin-bottom:var(--s4)}
.section-head .kicker{margin-bottom:.6rem}
.section-head p{max-width:52ch;color:var(--muted)}
.band{margin-top:var(--s6);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:center}
@media (max-width:900px){.band-grid{grid-template-columns:1fr}}

/* how it works: three steps as one aligned row */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.step{display:grid;grid-template-rows:auto auto 1fr;gap:.75rem;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--ground)}
.step .num{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.step svg{width:56px;height:56px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step h3{margin-top:.25rem}
.step p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* cards: equal rows via subgrid, one button size, pinned bottom */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:.6rem;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 30px -24px rgba(26,25,23,.5)}
.card .glass{--size:88px}
.card .tags{font-size:.8125rem;color:var(--muted);letter-spacing:.02em}
.card h3{font-size:1.35rem}
.card p{color:var(--muted);font-size:.975rem}
.card .go{align-self:end;margin-top:.5rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* occasion trays */
.occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.occasion{display:grid;grid-template-rows:auto auto auto 1fr;justify-items:center;text-align:center;gap:.75rem;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none}
.occasion:hover{background:var(--well)}
.occasion h3{font-size:1.2rem}
.occasion p{color:var(--muted);font-size:.95rem;max-width:26ch}
.occasion .go{align-self:end;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.occasion .tray-wrap{width:100%}
@media (max-width:900px){.occasions{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.occasions{grid-template-columns:1fr}}

/* ---- drink page ---- */
.drink-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1rem,3vh,2rem) 0 var(--s5)}
.drink-hero .glass{--size:min(360px,70vw);margin-inline:auto}
.drink-hero .glass .liq{inset:5%}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 1.5rem;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);max-width:520px}
.facts div{display:grid;gap:.15rem}
.facts dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.facts dd{margin:0;font-weight:600}
@media (max-width:900px){.drink-hero{grid-template-columns:1fr}.drink-hero .glass{--size:min(280px,60vw)}}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.spec{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec th,.spec td{padding:.7rem .9rem;text-align:left;border-top:1px solid var(--line-soft);vertical-align:top}
.spec thead th{border-top:0;background:var(--well);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.spec td.n{white-space:nowrap;text-align:right;font-weight:600}
.spec td.when{color:var(--muted);font-size:.9rem;white-space:nowrap}
.spec tfoot td{background:var(--well);color:var(--muted);font-size:.9rem}
.source{font-size:.9375rem;color:var(--muted);margin-top:var(--s2)}
.source a{color:var(--ink)}

/* the jug with its stepper */
.jug-panel{border:1.5px solid var(--ink);border-radius:var(--radius);padding:var(--s3);background:var(--ground)}
.jug-panel h2{font-size:1.6rem}
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:var(--s2) 0 var(--s3)}
.stepper label{font-weight:600}
.stepper input{font:inherit;font-weight:700;font-size:1.25rem;width:5.5rem;padding:.45rem .6rem;border:2px solid var(--ink);border-radius:10px;background:var(--ground);color:var(--ink);text-align:center;min-height:44px;font-variant-numeric:tabular-nums}
.stepper .quick{display:flex;flex-wrap:wrap;gap:.4rem}
.stepper .quick button{appearance:none;border:1.5px solid var(--line);background:var(--ground);border-radius:999px;padding:.4rem .8rem;cursor:pointer;font-weight:600;min-height:38px}
.stepper .quick button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.jug-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:var(--s3)}
.jug-summary div{padding:.8rem 1rem;background:var(--well);border-radius:10px}
.jug-summary b{display:block;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.jug-summary span{font-size:.8125rem;color:var(--muted)}
@media (max-width:560px){.jug-summary{grid-template-columns:1fr}}
.toggle{display:flex;align-items:center;gap:.6rem;margin-top:var(--s2);font-weight:500}
.toggle input{width:20px;height:20px;accent-color:var(--ink)}
.twin-jug{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line)}
.twin-jug[hidden]{display:none}
.method{list-style:none;padding:0;counter-reset:step}
.method li{position:relative;padding-left:3rem;counter-increment:step}
.method li+li{margin-top:1rem}
.method li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:2rem;height:2rem;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.house-note{margin-top:var(--s2);padding:1rem 1.2rem;border-left:3px solid var(--ink);background:var(--well);font-size:.95rem}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.5rem;color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:.6rem;color:var(--muted);max-width:65ch}
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (max-width:560px){.related{grid-template-columns:1fr}}

/* ---- finder ---- */
.finder{max-width:760px}
.finder fieldset{border:0;padding:0;margin:0 0 var(--s4)}
.finder legend{font-weight:700;font-size:1.35rem;letter-spacing:-.01em;margin-bottom:.9rem;padding:0}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.choices label{position:relative;display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;min-height:44px;font-weight:500}
.choices label:hover{background:var(--well)}
.choices input{width:18px;height:18px;accent-color:var(--ink);margin:0;flex:none}
.choices label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choices label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:560px){.choices{grid-template-columns:1fr 1fr}}
.finder .guests{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.finder .guests input{font:inherit;font-weight:700;font-size:1.25rem;width:6rem;padding:.45rem .6rem;border:2px solid var(--ink);border-radius:10px;background:var(--ground);text-align:center;min-height:44px}
.results{margin-top:var(--s5)}
.result{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start}
.result+.result{margin-top:var(--s3)}
.result.top{border:1.5px solid var(--ink)}
.result .glass{--size:96px}
.result h3{font-size:1.5rem}
.result .why{color:var(--muted);margin:.4rem 0 .8rem}
.result .spec{margin-top:1rem}
.result .btn-row{margin-top:1rem}
@media (max-width:560px){.result{grid-template-columns:1fr}}

/* ---- tables on the batch maths page ---- */
.table{border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
.table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:520px}
.table th,.table td{padding:.7rem .9rem;text-align:left;border-top:1px solid var(--line-soft);vertical-align:top}
.table thead th{border-top:0;background:var(--well);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.table td.n{text-align:right;white-space:nowrap;font-weight:600}
.rule{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.rule:last-child{border-bottom:1px solid var(--line)}
.rule .num{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1;min-width:3rem;font-variant-numeric:tabular-nums}
.rule h3{margin-bottom:.4rem}
.rule p{color:var(--muted);max-width:65ch}
.rule p+p{margin-top:.6rem}
.rule cite{font-style:normal;font-size:.9rem}

/* bottle diagram */
.bottle-fig{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s3) 0}
.bottle-fig svg{width:min(420px,100%);height:auto;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bottle-fig figcaption{color:var(--muted);font-size:.95rem;max-width:36ch}

/* page heads */
.page-head{padding:clamp(1rem,3vh,2rem) 0 var(--s4);max-width:760px}
.page-head .kicker{margin-bottom:.9rem}
.page-head .lede{margin-top:1.2rem;max-width:56ch}

/* not found */
.empty-tray{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;padding:var(--s5) 0}
.empty-tray .tray{width:min(300px,60vw);box-shadow:inset 0 0 0 10px var(--ground),inset 0 0 0 11px var(--line)}
@media (max-width:760px){.empty-tray{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .glass .liq,.glass .ice,html.pour .glass .fill,html.pour .glass .ripple,html.pour .glass .wheel,html.pour .glass .leaf,html.pour .glass .berry,html.pour .glass .stick,html.pour .glass .twist,html.pour .glass .wedge,html.pour .glass .sprig,html.pour .glass .star,html.pour .brand i::after{animation:none!important}
  html.pour .glass .fill{clip-path:none}
  .btn,.card,.tray .pick .glass{transition:none!important}
}
@media print{.site-nav,.menu-btn,.btn{display:none}}