/* Broken Compass. Evidence led wine shop.
   Palette: bone paper, ink, deep bottle green, amber accent for orange wine,
   a slate used only for hard data so evidence reads as evidence. */
:root{
  --paper:#f6f2ea;
  --paper-2:#efe9dd;
  --ink:#191714;
  --ink-soft:#514b40;
  --line:#d9d1c1;
  --green:#1f3d34;
  --green-2:#173029;
  --amber:#c2622d;
  --amber-soft:#e7d9c6;
  --slate:#2b3a44;
  --evidence:#33566a;
  --ok:#2f6b4f;
  --warn:#9a6b1e;
  --radius:3px;
  --wrap:1180px;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
/* every page needs one h1 for structure, including the ones whose design
   calls for the smaller display size */
h1.sub{font-size:clamp(1.5rem,3vw,2.1rem)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--ink-soft)}
.smallcaps{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.mono{font-family:var(--mono)}
sub{font-size:.68em;line-height:0}

/* ---- buttons ---- */
.btn{display:inline-block;border:1px solid var(--green);background:var(--green);
  color:#f6f2ea;padding:.7em 1.3em;border-radius:var(--radius);font-weight:600;
  cursor:pointer;font-size:.95rem;transition:background .15s,transform .05s;line-height:1}
.btn:hover{background:var(--green-2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.amber{background:var(--amber);border-color:var(--amber)}
.btn.amber:hover{filter:brightness(.94)}
.btn.wide{display:block;width:100%;text-align:center}
.btn.sm{padding:.5em .9em;font-size:.85rem}

/* ---- header ---- */
header.top{position:sticky;top:0;z-index:50;background:rgba(246,242,234,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);
  font-size:1.32rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand svg{flex:none}
nav.main{display:flex;gap:22px;margin-left:8px}
nav.main a{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--ink);border-color:var(--amber)}
.topspace{flex:1}
/* hamburger, hidden on desktop */
.navtoggle{display:none;flex:none;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;width:40px;height:40px;margin-left:-8px;
  background:none;border:0;cursor:pointer;padding:8px}
.navtoggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
body.navopen .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navopen .navtoggle span:nth-child(2){opacity:0}
body.navopen .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.basket-link{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem}
.basket-count{background:var(--green);color:#f6f2ea;border-radius:99px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;padding:0 6px}
.promo{background:var(--green);color:var(--amber-soft);text-align:center;
  font-size:.8rem;letter-spacing:.06em;padding:6px 12px}
.promo b{color:#fff}

/* ---- hero ---- */
.hero{padding:70px 0 54px;border-bottom:1px solid var(--line)}
.hero .lede{max-width:640px}
.hero .descriptor{font-family:var(--serif);font-style:italic;color:var(--amber);
  font-size:1.15rem;margin-bottom:14px}
.hero p.big{font-size:1.15rem;color:var(--ink-soft);max-width:560px}
.hero .cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---- credential chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:#fff;border-radius:99px;padding:3px 10px;font-size:.74rem;font-weight:600;
  color:var(--ink-soft)}
.chip.on{border-color:var(--green);color:var(--green);background:#fff}
.chip .dot{width:7px;height:7px;border-radius:99px;background:var(--amber)}
.chip.data{font-family:var(--mono);color:var(--evidence);border-color:#cdd8de;background:#eef3f5}
/* the SO2 chip is the number we exist to publish, so it is the loud one on the
   card, filled where the rest are outlined. Baseline aligned and gapless
   inside, or the flex gap strands the 2 away from the SO. */
.chip.so2{color:#fff;border-color:var(--evidence);background:var(--evidence);
  align-items:baseline;gap:6px;padding:3px 11px 4px}
.chip.so2 .so2-k{font-weight:700;font-size:.72rem;letter-spacing:.01em;opacity:.78}
.chip.so2 .so2-k sub{font-size:.7em;line-height:0;vertical-align:baseline;
  position:relative;top:.26em;margin-left:.5px}
.chip.so2 .so2-v{font-weight:700;font-size:.88rem;letter-spacing:-.01em}
.chip.so2 .so2-u{font-size:.64rem;font-weight:600;opacity:.72}

/* ---- product grid ---- */
.grid{display:grid;gap:22px}
.grid.p{grid-template-columns:repeat(auto-fill,minmax(214px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .1s}
.card:hover{box-shadow:0 8px 24px rgba(25,23,20,.09);transform:translateY(-2px)}
.card .shot{background:linear-gradient(180deg,#faf8f3,#efe9dd);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.card .shot .tier{position:absolute;top:9px;left:9px}
.card .body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .pname{font-family:var(--serif);font-size:1.02rem;line-height:1.18;font-weight:600}
.card .meta{font-size:.8rem;color:var(--ink-soft)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
/* the name is the stretched link, so the whole card still opens the wine, and
   the two buttons ride above it so Add never navigates */
.card{position:relative}
.card .cardlink{display:block}
.card .cardlink::after{content:"";position:absolute;inset:0;z-index:1}
.card .cardlink:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.card .cardbtns{position:relative;z-index:2;display:flex;align-items:center;gap:6px}
.card .cardbtns .btn{font:inherit;cursor:pointer}
.card .cardbtns .btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-soft)}
.card .cardbtns .btn.ghost:hover{border-color:var(--ink-soft);color:var(--ink)}
.price{font-family:var(--mono);font-weight:600;font-size:1.02rem}
.tierbadge{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:3px 7px;border-radius:2px}
.tierbadge.evidenced{background:var(--green);color:#f0efe6}
.tierbadge.flagged{background:var(--amber);color:#fff}
.tierbadge.possible{background:#e7e0d2;color:var(--ink-soft)}

/* ---- layout helpers ---- */
.section{padding:56px 0}
.section.tint{background:var(--paper-2);border-block:1px solid var(--line)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px}
/* sort sits opposite the heading, quiet, because the filters are the point */
.sortbar{display:flex;align-items:center;gap:9px;flex:none}
.sortbar label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.sortbar select{font:inherit;font-size:.86rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:7px 30px 7px 11px;
  cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
    linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sortbar select:hover{border-color:var(--ink-soft)}
.sortbar select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
@media(max-width:640px){
  .sec-head{flex-wrap:wrap;align-items:flex-start}
  .sortbar{width:100%}
  .sortbar select{flex:1}
}
.two{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
/* the same split with the rail on the right, for sections where the prose
   leads and the links are a follow on rather than a filter */
.two.rail-right{grid-template-columns:1fr 260px}
.basketgrid{grid-template-columns:1fr 320px;margin-top:20px}
.checkoutgrid{grid-template-columns:1fr 340px;margin-top:20px}
.stack{display:flex;flex-direction:column;gap:14px}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---- shop filters ---- */
.filters{position:sticky;top:82px;align-self:start}
.filters h4{font-family:var(--sans);margin:20px 0 8px}
.filters a{display:block;padding:4px 0;font-size:.9rem;color:var(--ink-soft)}
.filters a.on{color:var(--green);font-weight:700}
.filters a:hover{color:var(--ink)}
.clearall{font-size:.8rem;color:var(--amber);font-weight:600}

/* ---- product page ---- */
.pdp{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:44px;padding:40px 0}
.pdp .imgcol{position:sticky;top:88px;align-self:start}
.pdp .bigshot{background:linear-gradient(180deg,#faf8f3,#e9e2d4);border:1px solid var(--line);
  border-radius:var(--radius);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.pdp h1{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-top:4px}
.producer-line{font-size:.95rem;color:var(--ink-soft);letter-spacing:.02em}
.buybox{border:1px solid var(--line);background:#fff;border-radius:var(--radius);
  padding:18px;margin:22px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.buybox .price{font-size:1.5rem}
.instock{font-size:.82rem;color:var(--ok);font-weight:600}
.credstrip{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.credstrip .c{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:9px 12px;min-width:96px}
.credstrip .c .k{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.credstrip .c .v{font-family:var(--mono);font-weight:600;font-size:.95rem;margin-top:3px}
.credstrip .c.hi{border-color:var(--green);background:#f3f6f2}
.datatable{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:6px}
.datatable th,.datatable td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.datatable th{width:210px;color:var(--ink-soft);font-weight:600}
.datatable td.dv{font-family:var(--mono)}
.notdeclared{color:var(--ink-soft);font-style:italic;font-family:var(--sans)}
.evidence-note{font-size:.82rem;color:var(--warn);margin-top:2px}
details.datawrap{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:6px 16px;margin-top:14px}
details.datawrap summary{cursor:pointer;font-weight:600;padding:8px 0;font-family:var(--serif);font-size:1.1rem}
.sourceline{font-size:.8rem;color:var(--ink-soft);margin-top:14px}
.sourceline b{color:var(--evidence)}

/* ---- cases and club ---- */
.caselist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.casecard{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px}
.casecard .cn{font-family:var(--serif);font-size:1.35rem;font-weight:600}
.casecard .cp{font-family:var(--mono);font-weight:600;font-size:1.1rem}
.casecard .csz{font-size:.8rem;color:var(--ink-soft)}

/* ---- explainer ---- */
.prose{max-width:680px}
.prose p{margin:0 0 1.05em;font-size:1.06rem}
.prose h2{margin-top:1.6em}
.prose .standfirst{font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink-soft);font-style:italic}
/* real bottle photograph at thumbnail size, in flow rather than absolute */
.bottle-thumb{display:block;object-fit:contain;object-position:center;
  max-width:100%;height:auto}

/* Stripe Climate: the mark sitewide in the footer, the live badge on Footprint */
.climate-mark{display:inline-flex;align-items:center;gap:8px}
.climate-mark img{flex:none}
.climate-mark span{border-bottom:1px solid transparent}
.climate-mark:hover span{border-bottom-color:currentColor}
.climatebadge{margin:22px 0 6px}
.climatebadge iframe{max-width:100%;display:block}

/* payment page: the card form gets the room, the summary stays a sidebar */
.paylede{max-width:60ch;margin-bottom:24px}
.paygrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;
  align-items:start}
.paymain{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 30px}
.paybtn{margin-top:20px;font-size:1.02rem;padding:14px 18px}
.payblock{margin-bottom:24px}
.payblock h3{font-family:var(--serif);font-size:1.06rem;margin:0 0 12px}
.payblock #link-authentication-element{margin-bottom:14px}
.paynote{display:flex;align-items:center;gap:7px;margin:14px 0 0;
  font-size:.8rem;color:var(--ink-soft)}
.paynote .lock{font-size:.9rem}
.ordivider{display:flex;align-items:center;gap:14px;margin:24px 0 22px;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.ordivider::before,.ordivider::after{content:"";flex:1;height:1px;background:var(--line)}
.paysummary{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 20px;position:sticky;top:96px}
.paysummary h3{margin:0 0 12px;font-family:var(--serif);font-size:1.12rem}
.paysummary .row{display:flex;justify-content:space-between;gap:12px;
  font-size:.88rem;padding:5px 0}
.paysummary .row.total{border-top:1px solid var(--line);margin-top:8px;
  padding-top:10px;font-weight:700;font-size:1.02rem}
@media(max-width:900px){
  .paygrid{grid-template-columns:1fr;gap:22px}
  .paysummary{position:static;order:-1}
  .paymain{padding:22px 18px}
}

/* checkout delivery form */
.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.fieldgrid label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;
  color:var(--ink-soft)}
.fieldgrid label.wide{grid-column:1 / -1}
.fieldgrid input,.fieldgrid textarea{font:inherit;font-size:.95rem;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;width:100%}
.fieldgrid input:focus,.fieldgrid textarea:focus{outline:none;border-color:var(--amber)}
.fieldgrid textarea{resize:vertical}
.agecheck{display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  font-size:.84rem;color:var(--ink-soft);line-height:1.4}
.agecheck input{margin-top:2px;flex:none}
@media(max-width:560px){.fieldgrid{grid-template-columns:1fr}}

/* warehouse pick lists, office side only */
.picknav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.picknav a{border:1px solid var(--line);border-radius:99px;padding:5px 12px;
  font-size:.78rem;color:var(--ink-soft);background:#fff}
.picknav a.on{border-color:var(--evidence);background:var(--evidence);color:#fff}
.pickcase{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:20px 22px;margin-bottom:20px}
.pickhead{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;
  justify-content:space-between;margin-bottom:14px}
.pickhead h3{margin:0;font-family:var(--serif);font-size:1.25rem}
.pickfig{display:flex;flex-wrap:wrap;gap:16px;font-size:.82rem;font-family:var(--mono)}
.pickfig .ok{color:var(--ok)}
.pickfig .warn{color:#9a2b1e;font-weight:700}
.pickcase .tablewrap{overflow-x:auto;border:1px solid var(--line-soft,#e8e1d3);
  border-radius:var(--radius)}
.pickcase table{border-collapse:collapse;width:100%;min-width:680px;font-size:.86rem}
.pickcase thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:9px 13px;
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.pickcase tbody td{padding:9px 13px;border-bottom:1px solid #efeade;vertical-align:top}
.pickcase tbody tr:last-child td{border-bottom:0}
.pickcase td.field{font-family:var(--mono);font-size:.8rem;white-space:nowrap}
.pickcase td.src{color:var(--ink-soft);font-size:.8rem}
.picknote{margin:12px 0 0;font-size:.85rem}

/* a certifying body's own mark, sat beside the claim it backs */
/* the Carbon Literacy lockup is a wide landscape mark, not a square badge, so
   it sits above the paragraph at a readable width rather than beside it */
.cred-block{display:block}
.cred-block .cred-badge{display:block;width:min(300px,72%);height:auto;
  margin:0 0 18px}
.cred-block p{margin-bottom:0}
@media(max-width:560px){.cred-block .cred-badge{width:min(240px,86%)}}

/* the things we do ourselves, marked off from the things we ask suppliers for */
.ticks{list-style:none;padding:0;margin:0 0 1.05em;display:grid;gap:2px}
.ticks li{position:relative;padding:13px 0 13px 34px;font-size:1.02rem;
  color:var(--ink-soft);border-bottom:1px solid var(--line)}
.ticks li:last-child{border-bottom:0}
.ticks li strong{color:var(--ink);font-weight:600}
.ticks li::before{content:"";position:absolute;left:4px;top:19px;width:13px;height:7px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg)}
.explist{display:grid;gap:14px}
.exprow{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.exprow .n{font-family:var(--serif);font-size:1.7rem;color:var(--amber);min-width:38px}

/* ---- basket ---- */
/* bottles lie on their side in the basket, the way they would in the case */
.bline{display:grid;grid-template-columns:124px 1fr auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
/* a rotated element keeps its upright layout box, so the bottle is pinned to
   the centre of a landscape box and spun about that point. Without this it
   reserves 109px of row height and lies across the row below. */
.bline .shot{position:relative;width:116px;height:46px}
/* sized by height, because once rotated the height is what reads as width.
   Leaving it on height:auto let a tall source render 169px and run under the
   wine name. */
.bline .bottle-thumb,.bline .shot svg{position:absolute;top:50%;left:50%;
  height:104px;width:auto;max-width:none;
  transform:translate(-50%,-50%) rotate(90deg);
  filter:drop-shadow(0 5px 6px rgba(25,23,20,.18));
  transition:transform .25s ease}
/* translateX after the rotate moves along the bottle's own axis, which now
   points down the screen, so a negative value is the lift */
.bline:hover .bottle-thumb,.bline:hover .shot svg{
  transform:translate(-50%,-50%) rotate(90deg) translateX(-4px)}
@media(prefers-reduced-motion:reduce){
  .bline .bottle-thumb,.bline .shot svg{transition:none}
  .bline:hover .bottle-thumb,.bline:hover .shot svg{
    transform:translate(-50%,-50%) rotate(90deg)}
}
.qtybox{display:flex;align-items:center;gap:6px}
.qtybox input{width:52px;padding:5px;border:1px solid var(--line);border-radius:2px;font-family:var(--mono);text-align:center}
.summary{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:20px}
.summary .row{display:flex;justify-content:space-between;padding:6px 0}
.summary .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:700;font-size:1.15rem}

/* ---- notices ---- */
.notice{border:1px solid var(--amber);background:#fbf3ea;border-radius:var(--radius);padding:14px 16px;font-size:.9rem;color:#6a4415}
.notice b{color:var(--amber)}

/* ---- footer ---- */
footer.site{background:var(--green);color:#d7ccbb;padding:52px 0 30px;margin-top:60px}
footer.site a{color:#efe4d3}
footer.site a:hover{color:#fff}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer.site h5{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#a7b3a5;margin:0 0 12px}
footer.site .fnav a{display:block;padding:3px 0;font-size:.92rem}
footer.site .fine{border-top:1px solid #315046;margin-top:34px;padding-top:18px;
  font-size:.78rem;color:#9fae9d;display:flex;justify-content:space-between;
  align-items:flex-start;gap:24px 40px;flex-wrap:wrap}
footer.site .fine-legal{display:flex;flex-direction:column;gap:5px;max-width:52ch}
/* the credentials column hangs off the right edge so it reads as a group
   rather than floating loose in the middle of the fine print */
footer.site .fine-creds{display:flex;flex-direction:column;gap:9px;
  align-items:flex-end;text-align:right;flex:none}
footer.site .fine-creds .climate-mark{flex-direction:row-reverse}
/* light plaque so the black on white lockup reads on the dark footer without
   being altered. Padding matches the mark's own white margin so it looks like
   one piece rather than a logo dropped on a box. */
/* 150px is the point where the words inside the lockup stay readable. Smaller
   than that and it is just a white box, which is worse than not showing it. */
.cl-plaque{display:inline-block;background:#fff;border-radius:3px;
  padding:8px 10px;line-height:0;transition:transform .18s ease,box-shadow .18s ease}
.cl-plaque img{display:block;width:150px;height:auto}
.cl-plaque:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.28)}
.cl-plaque:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cl-plaque{transition:none}
  .cl-plaque:hover{transform:none}}
@media(max-width:760px){
  footer.site .fine{flex-direction:column;gap:18px}
  footer.site .fine-legal{max-width:none}
}
footer.site .paper{font-family:var(--serif);font-style:italic;color:#e9d9c3}

/* filters collapse into a details/summary on small screens */
.filters .filters-toggle{display:none}

@media(max-width:860px){
  .navtoggle{display:flex}
  nav.main{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;
    gap:0;margin:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px 24px 14px;box-shadow:0 12px 24px rgba(25,23,20,.08);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .25s,opacity .2s}
  body.navopen nav.main{max-height:340px;opacity:1;pointer-events:auto}
  nav.main a{font-size:1rem;letter-spacing:.06em;padding:12px 0;border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:0}

  .pdp{grid-template-columns:1fr;gap:24px;padding:24px 0}
  .pdp .imgcol{position:static;max-width:280px;margin:0 auto}
  .pdp .bigshot{aspect-ratio:1/1}
  .two,.two.rail-right,.basketgrid,.checkoutgrid{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}

  /* filters become compact wrapping pills above the grid, not a tall list */
  .filters{position:static;display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
    margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .filters h4{width:100%;margin:12px 0 2px;font-size:.7rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-soft)}
  .filters a{display:inline-block;padding:6px 12px;border:1px solid var(--line);
    border-radius:99px;font-size:.82rem;background:#fff}
  .filters a.on{border-color:var(--green);color:var(--green);font-weight:600}
  .filters .clearall{width:100%;border:0;padding:0;background:none}

  /* two products across on a phone */
  .grid.p{grid-template-columns:1fr 1fr;gap:12px}
  .card .body{padding:10px 11px 12px;gap:5px}
  .card .pname{font-size:.9rem}
  .card .meta{font-size:.72rem}

  /* stack basket and checkout summaries */
  .bline{grid-template-columns:96px 1fr auto;row-gap:6px}
  .bline .price{grid-column:2/4;text-align:right}

  .buybox{gap:10px}
  .buybox form{margin-left:0 !important;width:100%}
  .buybox .btn{width:100%}
  .datatable th{width:130px}
  .section{padding:38px 0}
  .hero{padding:44px 0 34px}
}

@media(max-width:520px){
  .promo{font-size:.72rem;padding:6px 10px}
  .wrap{padding:0 16px}
  footer.site .cols{grid-template-columns:1fr}
}

/* The numbers page. A bar chart drawn in CSS rather than shipped as a library:
   it is seven rows, and a chart that needs JavaScript is a chart an answer
   engine cannot read. */
.distro{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.drow{display:grid;grid-template-columns:150px 1fr 46px;align-items:center;gap:14px}
.drow .dlabel{font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft,#6a6357)}
.drow .dbar{background:#e6ded0;border-radius:2px;height:16px;overflow:hidden}
.drow .dbar i{display:block;height:100%;background:var(--amber);border-radius:2px}
.drow .dnum{font-size:.82rem;text-align:right}
.datatable.wide th:not(:first-child),.datatable.wide td{text-align:right}
.datatable.wide{width:100%}

/* The holding state on checkout, shown while card payment is off. It has to
   read as a decision we made rather than as something broken, so it is set as
   a proper block of prose and not as an error notice. */
.holding{border:1px solid var(--rule,#e2d9c9);border-radius:4px;padding:30px 32px;background:#fff}
.holding h3{font-size:1.5rem;margin:0 0 .5em}
.holding p{max-width:52ch;margin:0 0 1em}
.holding .noted{color:var(--bottle,#1f3d34);font-weight:600}
.notifyform{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.notifyform input{flex:1;min-width:220px;padding:11px 13px;border:1px solid #cfc5b4;
  border-radius:3px;font:inherit;background:#fdfbf7}
.notifyform input:focus{outline:2px solid var(--amber);outline-offset:1px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}