/* Spacing scale: margins and gaps come from these steps (4, 8, 12, 16, 24, 32, 48, 64px). --section is the space between page blocks, roomier on wider screens. */
/* Colours: eight named colours, then the job each one does. Dark mode only reassigns the jobs; it never adds a colour. See docs/brand.md. */
:root{--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;--section:var(--s6);--tap:2.8rem;--white:#fff;--linen:#eae0d2;--stone:#c6bcaf;--slate:#675f55;--deep:#3a342e;--ink:#1b1813;--green:#3f6b4f;--green-light:#8fbf9c;--bg:var(--white);--surface:var(--white);--tint:var(--linen);--line:var(--stone);--muted:var(--slate);--fg:var(--ink);--accent:var(--green);--on-accent:var(--white)}
@media (prefers-color-scheme:dark){:root{--bg:var(--ink);--surface:var(--ink);--tint:var(--deep);--line:var(--slate);--muted:var(--stone);--fg:var(--linen);--accent:var(--green-light);--on-accent:var(--ink)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:64rem;margin:0 auto;padding-inline:var(--s4)}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--bg);padding:.65rem 1rem;min-height:var(--tap);z-index:2}
.skip:focus{top:.5rem}
header{padding-top:var(--s6);padding-bottom:var(--s2)}
.preview-banner{margin:0;padding:.5rem 1rem;text-align:center;background:var(--tint);border-bottom:1px solid var(--line)}
@font-face{font-family:"Shantell Sans";font-weight:400 600;font-display:optional;src:url(/fonts/shantell-sans.woff2) format("woff2")}
.brand{margin:0;font:600 1.7rem/1.2 "Shantell Sans",system-ui,sans-serif}
.brand .ah{font-weight:400;color:var(--muted)}
.brand .lv{--squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1.1 9.0 L5.5 8.6 L10.1 8.4 L14.8 8.0 L19.6 7.6 L24.5 7.2 L29.5 7.0 L34.6 6.8 L39.8 6.7 L45.0 6.6 L50.2 6.6 L55.4 6.7 L60.7 6.8 L65.9 6.8 L71.1 7.0 L76.3 7.1 L81.4 7.2 L86.4 7.3 L91.4 7.4 L96.2 7.4 L101.0 7.5 L101.0 4.5 L96.3 4.4 L91.4 4.4 L86.5 4.3 L81.5 4.2 L76.4 4.1 L71.2 4.0 L66.0 3.8 L60.7 3.8 L55.5 3.7 L50.2 3.6 L45.0 3.6 L39.7 3.7 L34.5 3.8 L29.4 4.0 L24.4 4.2 L19.4 4.6 L14.5 5.0 L9.8 5.7 L5.2 6.8 L0.9 7.9Z'/%3E%3C/svg%3E");position:relative;padding-bottom:.15em;margin-right:1.6em;color:var(--accent);white-space:nowrap}
.brand .lv::after{content:"";forced-color-adjust:none;position:absolute;inset:auto 0 0;height:.3em;background:currentColor;-webkit-mask:var(--squiggle) 0 0/100% 100% no-repeat;mask:var(--squiggle) 0 0/100% 100% no-repeat}
/* The shamrock's stem starts where the underline's flat end stops, at the same weight. */
.brand .sh{position:absolute;left:100%;bottom:.075em;width:1.5em;height:1.4em;overflow:visible}
.brand a,footer a,.lang a,.plain a,main p>a:only-child,.card h2 a,.mini h3 a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap)}
.brand a{text-decoration:none}
main{padding-top:var(--s4);padding-bottom:var(--section);min-height:60vh;overflow-wrap:anywhere}
main>:is(h1,h2,p,ul,dl){max-width:40rem}
main>.cards,main>.featured{max-width:none}
h1,h2,h3{text-wrap:balance}
h1{font-size:1.75rem;line-height:1.25;margin:var(--s4) 0 var(--s2)}
h2{font-size:1.2rem;line-height:1.3;margin:var(--s6) 0 var(--s2)}
p{margin:var(--s2) 0}
/* Bullet lists in page text: a shallow indent, and a drawn dot in the accent colour so it stays clear in dark mode.
   The real marker stays (transparent) so Safari keeps announcing a list; high contrast mode shows it instead of the dot. */
main>ul:not([class]){margin:var(--s3) 0;padding-left:var(--s5)}
main>ul:not([class])>li{position:relative;margin:0 0 var(--s1)}
main>ul:not([class])>li::marker{color:transparent}
main>ul:not([class])>li::before{content:"";position:absolute;left:calc(-1 * var(--s4));top:.6em;width:.45em;height:.45em;border-radius:50%;background:var(--accent)}
@media (forced-colors:active){main>ul:not([class])>li::marker{color:CanvasText}main>ul:not([class])>li::before{display:none}}
.meta{color:var(--muted);font-size:.9rem}
.lede{font-size:1.15rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.search{max-width:40rem}
.search label{font-weight:600}
.field{position:relative;display:flex;gap:var(--s2)}
input,button,select{font:inherit;color:var(--fg);border:1px solid var(--muted);border-radius:.4rem;padding:.6rem .75rem;min-height:var(--tap);background:var(--surface)}
input,#search h1{scroll-margin-top:calc(env(safe-area-inset-top) + .75rem)}
input{flex:1;min-width:0}
button{min-width:var(--tap);background:var(--accent);border-color:var(--accent);color:var(--on-accent);cursor:pointer}
.pop{overflow-y:auto;overscroll-behavior:contain;max-height:min(22rem,40vh);max-height:min(22rem,40dvh);position:absolute;z-index:1;left:0;right:0;top:100%;margin-top:var(--s1);background:var(--surface);border:1px solid var(--muted);border-radius:.4rem;box-shadow:0 .5rem 1.5rem rgb(0 0 0/.12)}
.pop p{margin:0;padding:.6rem .75rem}
[role=option]{display:block;min-height:var(--tap);padding:.6rem .75rem;color:var(--fg);text-decoration:none}
[role=option]:hover{background:var(--tint)}
[role=option][aria-selected=true]{background:var(--tint);outline:2px solid var(--accent);outline-offset:-2px}
/* Narrow phones shrink the question with the screen so it stays on one line; from about 390px it keeps the usual 6vw scale. */
.home h1{overflow-wrap:break-word;font-size:clamp(1.6rem,7.2vw,clamp(1.75rem,6vw,2.5rem));margin:0 0 var(--s3)}
.home .search{max-width:36rem}
.home input{font-size:1.25rem;padding:.7rem 1rem}
.home .field button{padding:.7rem 1.1rem}
.home{padding-top:18vh}
.has-hero{padding-top:0}
.band{display:block;height:clamp(16rem,46vh,28rem);background:var(--tint);-webkit-mask:linear-gradient(to bottom,#000 80%,transparent);mask:linear-gradient(to bottom,#000 80%,transparent)}
.band img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.lift{position:relative;margin-top:-6.5rem}
/* A local glow keeps the heading readable without washing out the whole photo. */
.lift::before{content:"";position:absolute;inset:-2rem 0 -1rem;background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 60%,transparent) 20%,transparent);pointer-events:none}
.lift .search{position:relative;margin-inline:auto}
.lift h1{text-shadow:0 0 .2rem var(--bg),0 0 .6rem var(--bg),0 0 1.2rem var(--bg)}
.lift input{box-shadow:0 0 1.5rem color-mix(in srgb,var(--bg) 80%,transparent)}
.lift+.featured{margin-top:var(--section)}
/* Empty home: balance the heading and centre the note in the light area between the photo's fade and the footer. */
.soon h1{text-wrap:balance}
.soon h1+p{margin-top:var(--s7)}
.soon p:last-child{margin-bottom:0}
#hint{display:flex;align-items:baseline;column-gap:var(--s2)}
#hint .try{flex:none;white-space:nowrap}
#hint-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s1);min-width:0}
#hint a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 .2rem;color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}
#hint a:hover{text-decoration-color:currentColor}
.home .search+.featured{margin-top:var(--s8)}
.featured h2{font-size:1rem;color:var(--muted);margin-top:0}
.featured+.recent{margin-top:var(--section)}
.featured>*,.featured .cards{max-width:48rem;margin-inline:auto}
.featured .cards{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:var(--s5) var(--s4)}
.mini h3{font-size:1rem;margin:0}
.mini a{color:var(--fg)}
.mini .nophoto,.mini img{margin-bottom:var(--s2)}
header.wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s6)}
header .search.compact{flex:1 1 14rem;max-width:24rem}
header .lang{margin:0 0 0 auto}
.lang a{padding:0 .25rem}
.cards,.plain,.prods{list-style:none;padding:0;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--s6) var(--s5)}
.card{min-width:0}
.card img,.hero{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.4rem;margin-bottom:var(--s3);background:var(--tint)}
/* Private previews only: a saved photo is already cropped to 4:3. */
.crop-top{object-position:50% 0}.crop-bottom{object-position:50% 100%}.crop-left{object-position:0 50%}.crop-right{object-position:100% 50%}
.nophoto{aspect-ratio:4/3;border-radius:.4rem;margin-bottom:var(--s3);background:var(--tint)}
/* The empty frame only aligns cards in a row; stacked, it is wasted space. */
@media (max-width:35rem){.card:not(.mini)>.nophoto{display:none}}
.card h2{font-size:1.1rem;margin:0}
.card p{margin:var(--s1) 0}
.card .meta{margin:0}
.card .row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
.crumb{margin:0;font-size:.9rem}
main>h1:first-child,.crumb+h1{margin-top:0}
.count{margin:0 0 var(--s5)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2);margin:var(--section) 0 0}
.pager>p{flex-basis:100%;margin:0;text-align:center}
.pager ol{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1);list-style:none;margin:0;padding:0}
.pager li{display:flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--muted)}
.pager a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 .65rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface);text-decoration:none}
.pager a:hover{border-color:var(--accent)}
.pager [aria-current]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
/* On phones the numbers take their own row under Previous and Next. */
@media (max-width:35rem){.pager ol{order:1;flex-basis:100%}}
.card h2 a{color:var(--fg)}
pre{background:var(--surface);border:1px solid var(--line);border-radius:.4rem;padding:var(--s3);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.85rem}
code{font-family:ui-monospace,Menlo,Consolas,monospace}
.tag{display:inline-block;font-size:.8rem;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:1rem;padding:0 .55rem;margin-right:var(--s1)}
.from{font-weight:600}
.conv{font-weight:400;color:var(--muted)}
.cur{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);margin:var(--s7) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.cur select{height:var(--tap);font-size:1rem;color:var(--muted)}
.cur .meta{flex-basis:100%;margin:0;font-size:.85rem}
.prods{margin:var(--s2) 0}
.prods a{display:inline-flex;align-items:center;max-width:100%;min-height:var(--tap);min-width:var(--tap)}
.places{columns:15rem 2;column-gap:var(--s6)}
.places li{break-inside:avoid}
figure{margin:var(--s4) 0;max-width:30rem}
figcaption{margin-top:-.25rem}
dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s4);margin:var(--s3) 0}
dt{color:var(--muted)}
dd{margin:0}
footer{background:var(--tint);padding-block:var(--s5) var(--s4)}
footer .brand{font-size:1.3rem}
footer .meta{margin:var(--s2) 0 var(--s5)}
footer .groups{display:grid;gap:var(--s4)}
footer h2{margin:0;font-size:.9rem;font-weight:600;color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.profile .top{display:grid;gap:var(--s5);margin-top:var(--s2)}
.profile figure{margin:0;max-width:none}
.profile .hero{margin-bottom:var(--s1)}
.profile h1{font-size:clamp(1.75rem,5vw,2.25rem);line-height:1.2;margin:0 0 var(--s2)}
.facts>.meta{margin:0}
.profile .from{font-size:1.1rem}
.actions{list-style:none;padding:0;margin:var(--s4) 0 var(--s2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s5)}
.actions a{display:inline-flex;align-items:center;min-height:var(--tap)}
.actions .main a{padding:.6rem 1.1rem;border-radius:.4rem;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.actions .main a:hover{text-decoration:underline}
.by-message{margin:var(--s2) 0}
.by-message p{margin:0}
details.safely summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
details.safely summary::-webkit-details-marker{display:none}
details.safely summary::before{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.safely[open] summary::before{transform:rotate(45deg)}
details.safely>p{border-left:3px solid var(--accent);padding-left:var(--s3)}
@media (prefers-reduced-motion:reduce){details.safely summary::before{transition:none}}
/* The shadow and clip let the band run edge to edge without overflowing the page. */
.profile .prov{margin-top:var(--section);padding-block:var(--s6);background:var(--tint);box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax)}
.profile .prov>*{max-width:40rem}
.profile .prov h2{margin:0 0 var(--s2);font-size:1rem;color:var(--muted)}
.profile .prov .stmt{font-size:1.3rem;line-height:1.4;margin:0 0 var(--s3)}
.profile .prov p:last-child{margin-bottom:0}
.profile .prods.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--s5) var(--s4)}
.profile .prods.grid :is(img,.nophoto){display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.4rem;background:var(--tint);margin-bottom:var(--s1)}
.profile .prods.grid li:only-child{max-width:16rem}
.profile .prods.grid a{font-weight:600}
.profile .prods.grid .price{display:block;color:var(--muted)}
.profile .prods.grid :is(.conv,.credit){display:block}
.profile .prods:not(.grid) li{display:flex;justify-content:space-between;gap:var(--s4);max-width:40rem;border-bottom:1px solid var(--line)}
.profile .prods:not(.grid) .price{align-self:center;text-align:right}
.suggest{max-width:40rem;margin-top:var(--s5);display:grid;gap:var(--s5)}
.suggest .f,.suggest fieldset{display:grid;gap:var(--s1)}
.suggest label,.suggest legend{font-weight:600}
.suggest .hint{margin:0;color:var(--muted);font-size:.9rem}
.suggest .opt{font-weight:400;color:var(--muted)}
.suggest textarea{font:inherit;color:var(--fg);border:1px solid var(--muted);border-radius:.4rem;padding:.6rem .75rem;background:var(--surface);min-height:6rem;resize:vertical}
.suggest fieldset{border:0;margin:0;padding:0}
.suggest legend{padding:0}
.suggest .opts{display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.suggest .opts label{font-weight:400;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap)}
.suggest .opts input{flex:none;width:1.2rem;height:1.2rem;min-height:0;margin:0;padding:0;accent-color:var(--accent)}
.suggest button{justify-self:start;padding:.7rem 1.4rem;font-weight:600}
.suggest .trap{position:absolute;left:-100vw;width:1px;height:1px;overflow:hidden}
.suggest .small,.sent .small{margin:0;color:var(--muted);font-size:.9rem}
main.short{min-height:0}
.sent{max-width:40rem;margin-top:var(--s4);padding:var(--s4) var(--s5);background:var(--tint);border-radius:.6rem}
.sent h2{margin:0 0 var(--s1)}
.sent>:last-child{margin-bottom:0}
.stockists{margin-top:var(--section);max-width:40rem}
.stockists h2{margin-top:0}
.stockists h3{font-size:1rem;margin:var(--s5) 0 var(--s1)}
.stockists .lead{margin:0 0 var(--s4)}
.stocklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.stocklist li{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.stocklist p{margin:0}
.stocklist .nm{font-weight:600;display:flex;align-items:center;min-height:var(--tap)}
.stocklist .meta a,.facts .ships a{display:inline;min-height:0;min-width:0}
.stockists>.alcohol-notice{margin:var(--s4) 0 0}
details.stk{margin-top:var(--section);max-width:40rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.stk summary{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);min-height:var(--tap);cursor:pointer;font-weight:600;list-style:none}
details.stk summary::-webkit-details-marker{display:none}
details.stk summary::before{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-right:var(--s1);transition:transform .15s}
details.stk[open] summary::before{transform:rotate(45deg)}
details.stk summary .meta{font-weight:400}
details.stk .stockists{margin-top:0;padding-bottom:var(--s4)}
details.stk .stockists>p:first-child{margin-top:0}
details.stk .stockists>.meta:last-child{margin:var(--s3) 0 0}
.stockist-facts{margin-bottom:var(--s5);max-width:40rem}
.stockist-facts .actions{margin-top:var(--s3)}
.group{margin-top:var(--section)}
.group h2{margin-top:0}
@media (prefers-reduced-motion:reduce){details.stk summary::before{transition:none}}
@media (min-width:48rem){:root{--section:var(--s7)}footer{padding-block:var(--s6) var(--s5)}footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto 1fr;column-gap:var(--s6)}footer .wrap>.meta{margin-bottom:0}footer .groups{grid-column:2;grid-row:1/span 2;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--s5)}footer .groups h2+ul{flex-direction:column}footer .groups>div:not(:has(h2)){grid-column:1/-1}footer h2{margin-bottom:var(--s1)}.profile .top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s6);align-items:start}.profile .top.solo{grid-template-columns:minmax(0,40rem)}}
@media (max-width:47.9375rem){.profile figure{margin-inline:calc(-1 * var(--s4))}.profile .hero{border-radius:0}.profile figcaption{padding-inline:var(--s4)}}
@media (max-width:30rem){.profile figure{margin-inline:calc(-1 * var(--s3))}.profile figcaption{padding-inline:var(--s3)}.profile .prods.grid{grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:var(--s4) var(--s3)}}
@media (max-width:47.9375rem){header.wrap{padding-top:var(--s2);row-gap:var(--s2)}header .search.compact{flex-basis:100%;max-width:none;order:1}.home{padding-top:6vh}.has-hero{padding-top:0}.band img{object-position:center}.home .search+.featured{margin-top:var(--section)}.lift+.featured{margin-top:var(--s4)}}
/* Portrait phones trim the hero from the bottom, so the top of the photo never runs into the header. The band follows the width, so the gap under the tools matches the gap above them on every phone. */
@media (max-width:30rem){.band{height:85vw}.band img{object-position:top}.wrap{padding-inline:var(--s3)}dl{grid-template-columns:1fr}dd{margin-bottom:var(--s2)}}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s}}