/* Self-hosted fonts (SIL Open Font License, see assets/fonts/*-OFL.txt). No third-party font requests.
   Hanken Grotesk for the interface and body, light for the big headings; Newsreader for wine names, stories and the
   Burgundy Room. Both are variable fonts, one file each. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin-opsz-italic.woff2) format("woff2"); }
/* Boulder Wine Merchant, direction D (12 October 2026): a calm, light gallery with one dark burgundy room.
   Every text pairing is measured in docs/PALETTE.md and checked by QA (contrast). Ground #FBFAF4, ink #2B2622,
   muted #5A524A, lines #E4DFD3, panel #F1EEE6, image backdrop #EFECE5, burgundy #6E1423, the Burgundy Room #4A0E18
   with gold #D9B97A on dark, dark panels #2B2622. The older variable names stay, pointed at the new palette. */
:root {
  --ground: #FBFAF4; --ink: #2B2622; --muted: #5A524A; --line: #E4DFD3; --panel: #F1EEE6; --backdrop: #EFECE5;
  --accent: #6E1423; --band: #4A0E18; --gold: #D9B97A; --dark: #2B2622; --blush: #EADBD0; --dark-ink: #D8D0C4;
  --burgundy: var(--accent); --burgundy-dark: var(--band); --gold-light: var(--gold);
  --cream: var(--ground); --white: #FFFFFF;
  --gold-text: #7A5E22;   /* gold darkened for text on light grounds: 5.82:1 on the ground; plain gold is for dark grounds only */
  --gold-ui: #8A8074;     /* borders of inputs and controls on light grounds, 3.70:1 */
  --paper: var(--ground); --paper-2: var(--panel); --card: var(--ground);
  --ink-2: #3F3832; --ink-3: var(--muted);
  --rule: var(--line); --rule-2: var(--gold-ui);
  --accent-ink: var(--ground); --accent-soft: #F3E9E6;
  --accent-2: var(--gold-text); --accent-2-soft: var(--panel);
  --hero: var(--band); --hero-ink: var(--ground); --hero-ink-2: var(--gold);
  --logo: var(--accent); --logo-hero: var(--ground);
}
:root {
  --farm-organic: #3E7A47; --farm-biodynamic: #2F6699; --farm-natural: #A5811B; --farm-plain: #8A8A84;
  --measured: var(--accent); --inferred: var(--accent-2); --absent: var(--rule);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 0; --wrap: 1360px; --gutter: 40px;
  --shadow: none;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { 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.6; }
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .age-gate :focus-visible, .somm-panel header :focus-visible { outline-color: var(--gold); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 760px; }
.tabnum { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--accent); }
h1 { font-size: clamp(34px, 5vw, 56px); margin: 0 0 14px; font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 48px 0 12px; font-variation-settings: "opsz" 96; }
h3 { font-size: 21px; margin: 28px 0 8px; font-variation-settings: "opsz" 36; }
p { margin: 0 0 14px; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 10px; }
.dek { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }

/* ---------- proposal bar ---------- */
.proposal-bar { background: var(--ink); color: var(--paper); font-size: 13px; }
.proposal-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 7px; }
.proposal-bar strong { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.proposal-bar .pb-space { flex: 1; }
.proposal-bar button, .proposal-bar a { font: inherit; color: var(--paper); background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 20px; padding: 2px 10px; cursor: pointer; text-decoration: none; }
.proposal-bar button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* ---------- header ---------- */
.site-header { background: var(--accent); border-bottom: 1px solid var(--gold); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--accent-ink); }
.site-header a:hover { color: var(--accent-ink); }
.brand-logo { height: 46px; width: auto; color: var(--gold); flex: none; }
/* The logo is one cached file painted with currentColor (20 September 2026), not 54 KB of inline path
   data on every page. The ratio is the file's own viewBox, 59.22 by 75, so width:auto still works. */
.logo-mark { display: inline-block; aspect-ratio: 59.22 / 75; background-color: currentColor;
  -webkit-mask: url(../img/logo.svg) no-repeat center / contain; mask: url(../img/logo.svg) no-repeat center / contain; }
.brand .wordmark { font-family: var(--serif); font-size: 20px; line-height: 1.05; font-weight: 500; }
.brand .wordmark small { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-top: 4px; font-weight: 600; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav > .item { position: relative; }
.nav > .item > a { display: block; padding: 10px 12px; text-decoration: none; color: var(--accent-ink); font-weight: 600; font-size: 14.5px; border-radius: var(--radius); }
.nav > .item > a:hover, .nav > .item:focus-within > a { background: var(--burgundy-dark); }
.nav .menu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--burgundy-dark); border: 1px solid var(--gold); box-shadow: var(--shadow); padding: 8px; border-radius: var(--radius); }
.nav .item:hover .menu, .nav .item:focus-within .menu { display: block; }
.nav .menu a { display: block; padding: 7px 10px; text-decoration: none; color: var(--accent-ink); font-size: 14.5px; border-radius: var(--radius); }
.nav .menu a:hover { background: var(--accent); color: var(--accent-ink); }
.account-link { display: inline-flex; align-items: center; padding: 9px 10px; text-decoration: none; color: var(--accent-ink); font-weight: 600; font-size: 14.5px; white-space: nowrap; margin-left: 4px; border-radius: var(--radius); }
.account-link:hover { background: var(--burgundy-dark); }
.join-perks { margin: 8px 0 18px; padding-left: 20px; line-height: 1.7; }
.cart-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--gold); border-radius: 20px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--accent-ink); margin-left: 8px; white-space: nowrap; }
.cart-count { background: var(--gold); color: var(--accent); border-radius: 10px; font-size: 12px; padding: 0 7px; min-width: 20px; text-align: center; }
.menu-toggle { display: none; margin-left: auto; font: inherit; font-weight: 700; background: none; border: 1px solid var(--gold); border-radius: 20px; padding: 7px 14px; color: var(--accent-ink); }
@media (max-width: 980px) {
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--accent); flex-direction: column; align-items: stretch; padding: 10px 20px 20px; border-bottom: 1px solid var(--gold); max-height: 75vh; overflow-y: auto; }
  .nav.open { display: flex; }
  .nav .menu { display: block; position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px 12px; min-width: 0; }
  .cart-link { margin: 10px 0 0; justify-content: center; }
  .account-link { margin: 10px 0 0; justify-content: center; }
  .brand .wordmark small { display: none; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); padding: 12px 22px; border-radius: 26px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--burgundy-dark); border-color: var(--burgundy-dark); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--gold-ui); }
.btn.ghost:hover { background: var(--accent-2-soft); color: var(--accent); border-color: var(--gold-text); }
.btn.light { background: var(--hero-ink); color: var(--hero); border-color: var(--hero-ink); }
.btn.light:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--hero); }
.btn.light-ghost { background: transparent; color: var(--hero-ink); border-color: var(--hero-ink-2); }
.btn.light-ghost:hover { background: var(--accent); color: var(--hero-ink); border-color: var(--gold-light); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }

/* ---------- hero ---------- */
.hero { background: var(--hero); color: var(--hero-ink); }
.hero .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; padding-block: 72px 64px; align-items: center; }
.hero h1 { color: var(--hero-ink); font-size: clamp(40px, 6vw, 72px); }
.hero .dek { color: var(--hero-ink-2); }
.hero .eyebrow { color: var(--hero-ink-2); }
.hero-logo { justify-self: center; width: min(260px, 60vw); height: auto; color: var(--logo-hero); opacity: .95; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: 14.5px; color: var(--hero-ink-2); }
.hero-facts b { color: var(--hero-ink); font-weight: 600; }
.hero a { color: var(--hero-ink); }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 48px; } .hero-logo { width: 140px; justify-self: start; order: -1; } }

/* ---------- sections ---------- */
.section { padding-block: 64px; }
.section.alt { background: var(--paper-2); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.panel h3 { margin-top: 0; }
.stat { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); font-variation-settings: "opsz" 144; }
.link-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.link-tile { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--ink); }
.link-tile:hover { border-color: var(--accent); color: var(--ink); }
.link-tile b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 4px; }
.link-tile span { color: var(--ink-2); font-size: 14.5px; }
blockquote.pull { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; margin: 0; padding: 0; color: var(--ink); font-variation-settings: "opsz" 72; }
blockquote.pull footer { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 14px; }

/* ---------- wine cards ---------- */
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 20px; }
.wine-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.wine-card:hover .shot { border-color: var(--accent); }
.shot { position: relative; aspect-ratio: 3 / 4; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; margin-bottom: 12px; }
.shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 14px; background: #fff; }
.ph-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 16px; background: var(--paper-2); text-align: left; }
.ph-card .ph-type { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.ph-card .ph-name { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--ink); }
.ph-card .ph-meta { font-size: 13px; color: var(--ink-2); }
.ph-card .bar { height: 5px; width: 44px; border-radius: 3px; }
.type-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.t-red { background: #6E1F2B; } .t-white { background: #D8C77A; } .t-rose { background: #E29AA0; } .t-sparkling { background: #C9B97C; } .t-skin { background: #D99A4E; }
.wine-card .w-producer { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.wine-card .w-name { font-family: var(--serif); font-size: 18px; line-height: 1.2; margin: 2px 0 6px; }
.wine-card .w-meta { font-size: 13px; color: var(--ink-3); }
.wine-card .w-price { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.farm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.farm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.farm-organic { background: var(--farm-organic); } .farm-biodynamic { background: var(--farm-biodynamic); } .farm-natural { background: var(--farm-natural); } .farm-organic-practices { background: transparent; border: 2px solid var(--farm-organic); }
.review-tag { position: absolute; bottom: 8px; right: 8px; background: rgba(20,20,20,.78); color: #fff; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; }

/* ---------- shop ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 36px; padding-block: 30px 70px; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; } }
.filters { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; }
@media (max-width: 900px) { .filters { position: static; max-height: none; display: none; } .filters.open { display: block; } }
.filter-toggle { display: none; }
@media (max-width: 900px) { .filter-toggle { display: inline-flex; } }
.fgroup { border-top: 1px solid var(--rule); padding: 12px 0; }
.fgroup summary { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.fgroup summary::-webkit-details-marker { display: none; }
.fopts { margin-top: 8px; max-height: 240px; overflow-y: auto; }
.fopt { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 3px 0; cursor: pointer; color: var(--ink-2); }
.fopt input { accent-color: var(--accent); }
.fopt .n { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.shop-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.search { flex: 1; min-width: 220px; font: inherit; padding: 11px 16px; border: 1px solid var(--rule-2); border-radius: 26px; background: var(--card); color: var(--ink); }
select.sort { font: inherit; padding: 10px 14px; border: 1px solid var(--rule-2); border-radius: 26px; background: var(--card); color: var(--ink); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.active-filters button { font: inherit; font-size: 13px; border: 1px solid var(--rule-2); background: var(--card); border-radius: 16px; padding: 3px 10px; cursor: pointer; color: var(--ink-2); }
.result-count { font-size: 14px; color: var(--ink-3); }

/* ---------- wine page ---------- */
.crumbs { font-size: 13.5px; color: var(--ink-3); padding-block: 18px 0; }
.crumbs a { color: var(--ink-3); }
.wine-top { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 48px; padding-block: 24px 40px; }
@media (max-width: 820px) { .wine-top { grid-template-columns: 1fr; gap: 24px; } }
.wine-top .shot { aspect-ratio: 4 / 5; margin: 0; }
.wine-top .ph-card .ph-name { font-size: 30px; }
.price-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.big-price { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 8px; }
.qty { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 26px; overflow: hidden; background: var(--card); }
.qty button { font: inherit; width: 40px; border: 0; background: transparent; cursor: pointer; color: var(--ink); font-size: 18px; }
.qty input { width: 44px; text-align: center; border: 0; font: inherit; background: transparent; color: var(--ink); }
.pickup-note { font-size: 14px; color: var(--ink-2); }   /* plain text since 6 October 2026: as a flex row it set the call link in a column of its own */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }
.fact { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.fact dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.fact dd { margin: 0; }
.not-pub { color: var(--ink-3); font-style: italic; }
.scales { display: grid; gap: 18px; }
.scale-row { display: grid; grid-template-columns: 70px 1fr 70px; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.scale-row .r { text-align: right; }
.track { height: 16px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; position: relative; overflow: hidden; }
.track .fill { position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: 6px; }
.track .nm { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.scale-note { font-size: 13px; color: var(--ink-3); margin: -10px 0 0 82px; }
@media (max-width: 520px) { .scale-note { margin-left: 0; } .scale-row { grid-template-columns: 56px 1fr 56px; } }
.src { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; margin-left: 6px; vertical-align: 1px; }
.src.m { background: var(--accent-soft); color: var(--accent); }
.src.i { background: var(--accent-2-soft); color: var(--accent-2); }
.src.a { border: 1px solid var(--rule-2); color: var(--ink-3); }
.callout { background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; font-size: 15px; color: var(--ink-2); }
.related { display: flex; flex-wrap: wrap; gap: 8px; }
.related a { font-size: 14px; border: 1px solid var(--rule-2); border-radius: 16px; padding: 4px 12px; text-decoration: none; color: var(--ink-2); background: var(--card); }
.related a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- review notes (proposal only) ---------- */
.review { display: none; }
html.show-review .review { display: block; }
html.show-review span.review { display: inline; }
.review-box { background: #FFF6D6; color: #3B3218; border: 1px dashed #C9A93E; border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; margin: 14px 0; }
.review-box b { color: #3B3218; }
.review-box code { font-size: 12.5px; }
blockquote.confirm { display: none; background: #FFF6D6; color: #3B3218; border: 1px dashed #C9A93E; border-radius: var(--radius); padding: 10px 14px; margin: 16px 0; font-size: 14.5px; }
html.show-review blockquote.confirm { display: block; }
blockquote.confirm p { margin: 0; }
blockquote.confirm a { color: #3B3218; }

/* ---------- prose ---------- */
.prose { max-width: 740px; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 44px; }
.prose h2 + h2 { margin-top: 0; font-size: clamp(22px, 2.5vw, 28px); color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.table-scroll { overflow-x: auto; }
.prose blockquote:not(.confirm) { border-left: 3px solid var(--accent-2); margin: 20px 0; padding: 4px 0 4px 18px; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.page-head { padding-block: 48px 8px; }
.page-layout { display: grid; grid-template-columns: 1fr 280px; gap: 56px; padding-block: 10px 70px; }
@media (max-width: 960px) { .page-layout { grid-template-columns: 1fr; } }
.side-nav { position: sticky; top: 96px; align-self: start; font-size: 14.5px; }
.side-nav h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.side-nav a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.side-nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.enquiry { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; margin: 22px 0; }
.enquiry label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 10px 0 4px; }
.enquiry input, .enquiry textarea, .form input, .form select, .form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); }

/* ---------- encyclopedia ---------- */
.ency-groups { columns: 3 240px; column-gap: 32px; }
.ency-group { break-inside: avoid; margin-bottom: 24px; }
.ency-group h3 { font-size: 13px; font-family: var(--sans); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 8px; }
.ency-group a { display: block; padding: 3px 0; text-decoration: none; color: var(--ink); }
.ency-group a:hover { color: var(--accent); }
.shelf-list { display: grid; gap: 8px; }
.shelf-list a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 15px; }
.shelf-list a span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

/* ---------- cart & checkout ---------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table td, .cart-table th { padding: 14px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.cart-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cart-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.summary .line { display: flex; justify-content: space-between; padding: 6px 0; font-variant-numeric: tabular-nums; }
.summary .total { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 18px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; padding-block: 20px 70px; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.form fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px 22px; margin: 0 0 20px; background: var(--card); }
.form legend { font-family: var(--serif); font-size: 21px; padding: 0 6px; }
.form label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 12px 0 5px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slots label { margin: 0; font-weight: 600; font-size: 14px; border: 1px solid var(--rule-2); border-radius: 18px; padding: 6px 12px; cursor: pointer; color: var(--ink); background: var(--paper); }
.slots input { position: absolute; opacity: 0; pointer-events: none; }
.slots input:checked + span { color: var(--accent); }
.slots label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.demo-pay { position: relative; }
.demo-pay .demo-stamp { display: inline-block; background: var(--accent-2-soft); color: var(--accent-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; padding: 3px 8px; margin-bottom: 6px; }
.id-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; color: var(--ink); }

/* ---------- age gate ---------- */
.age-gate { position: fixed; inset: 0; z-index: 1000; background: var(--hero); color: var(--hero-ink); display: grid; place-items: center; padding: 24px; }
.age-gate[hidden] { display: none; }
.age-gate .box { max-width: 460px; text-align: center; }
.gate-logo { width: 110px; height: auto; color: var(--logo-hero); margin-bottom: 18px; }
.age-gate h2 { color: var(--hero-ink); font-size: 40px; margin: 0 0 10px; }
.age-gate p { color: var(--hero-ink-2); }
.age-gate .cta-row { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--accent); color: var(--accent-ink); padding-block: 56px 28px; margin-top: 0; font-size: 14.5px; }
.site-footer a { color: var(--accent-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.foot-brand .wordmark { font-family: var(--serif); font-size: 24px; color: var(--accent-ink); margin-bottom: 8px; }
.foot-legal { border-top: 1px solid var(--gold); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--gold-light); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 10px; top: 10px; background: var(--card); padding: 8px 12px; z-index: 2000; }
.page-layout > *, .checkout-layout > *, .shop-layout > *, .grid-2 > *, .grid-3 > *, .wine-top > * { min-width: 0; }
.slots label { max-width: 100%; position: relative; }
.slots input { left: 0; top: 0; width: 1px; height: 1px; }

/* ---------- photos (open-licence placeholders) ---------- */
.banner { position: relative; margin: 20px 0 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 6; background: var(--paper-2); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner .review-tag, .hero-tag { position: absolute; left: 12px; bottom: 12px; }
/* The hero's photo tag is a review note like any other, but its own rule set display and so outlived the
   "hide the review notes" rule that comes before it (found 21 September 2026). It now appears only when the
   notes are on, like the rest of them. */
.hero-tag { position: static; margin-bottom: 14px; }
html.show-review .hero-tag { display: inline-block; }
.hero.has-photo { background-size: cover; background-position: center; }   /* the image itself is set inline on the section so the URL resolves against the page */
.hero.has-photo .hero-logo { filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
.tiles-photo { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile-photo { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto auto auto; }
.tile-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.tile-photo b { padding: 14px 18px 2px; }
.tile-photo span { padding: 0 18px 16px; display: block; color: var(--ink-2); }
.ww-grid { grid-template-columns: repeat(4, 1fr); gap: 18px 14px; }
@media (max-width: 820px) { .ww-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .banner { aspect-ratio: 16 / 9; } }

/* ---------- Ask Chaz (AI sommelier) ---------- */
/* The launcher floats over whatever is under it, so the footer keeps a clear band at the bottom right
   (seen on the demo path, 21 September 2026: it covered the shop hours). */
.site-footer .foot-legal { padding-bottom: 96px; }
@media (min-width: 861px) { .site-footer .foot-grid > div:last-child { padding-bottom: 34px; } }
/* The launcher (Max, 11 October 2026): a 64 px bubble in the site gold. Burgundy dark on gold is 6.55:1. The dark rim
   sets it off a cream page and the cream halo sets it off the burgundy header, hero and footer; the shadow lifts it. */
.somm-launch { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 64px; height: 64px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--gold); color: var(--burgundy-dark); border: 2px solid var(--burgundy-dark); border-radius: 50%; box-shadow: 0 0 0 3px var(--cream), 0 10px 28px rgba(0,0,0,.38); font: 700 11px/1.1 var(--sans); cursor: pointer; }
.somm-launch .somm-ico { display: block; }
.somm-launch .somm-word { white-space: nowrap; }
.somm-launch .somm-dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: #2E8B57; border: 2px solid var(--cream); }
.somm-launch:focus-visible { outline: 3px solid var(--burgundy-dark); outline-offset: 5px; }
/* Out of the way: never over the age gate, and not over the phone menu, which holds the cart link. */
.age-gate:not([hidden]) ~ .somm, .nav-open .somm { display: none; }
/* Chaz says hello (Max, 11 October 2026): a small bubble just above the launcher, once a visit (somm.js). */
.somm-hello { position: fixed; right: 18px; bottom: 96px; z-index: 61; width: min(280px, calc(100vw - 36px)); background: var(--card); color: var(--ink); border: 1px solid var(--gold-ui); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.24); animation: somm-hello-in .25s ease-out; }
.somm-hello::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 12px; height: 12px; background: var(--card); border-right: 1px solid var(--gold-ui); border-bottom: 1px solid var(--gold-ui); transform: rotate(45deg); }
.somm-hello-open { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 40px 12px 14px; font: 15px/1.45 var(--sans); color: var(--ink); cursor: pointer; border-radius: 14px; }
.somm-hello-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; border-radius: 50%; }
.somm-hello-x:hover { color: var(--ink); background: var(--accent-2-soft); }
@keyframes somm-hello-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .somm-hello { animation: none; } }
.somm-panel[hidden] { display: none; }
.somm-panel { position: fixed; right: 18px; bottom: 96px; z-index: 60; width: min(420px, calc(100vw - 32px)); max-height: min(72vh, 680px); display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.somm-panel header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--hero); color: var(--hero-ink); }
.somm-panel header b { display: block; font-family: var(--serif); font-size: 19px; }
.somm-panel header span { font-size: 12.5px; color: var(--hero-ink-2); }
.somm-close { background: transparent; border: 0; color: var(--hero-ink); font-size: 24px; line-height: 1; cursor: pointer; }
/* Start a new chat (Max, 8 October 2026): in the header under the line about the shelf, and under the 15-message reply */
.somm-new { display: block; width: max-content; margin-top: 8px; padding: 3px 10px; background: transparent; border: 1px solid var(--hero-ink-2); border-radius: 999px; color: var(--hero-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.somm-new:hover { border-color: var(--gold-light); color: var(--gold-light); }
.somm-new-inline { padding: 6px 14px; background: var(--hero); border: 0; border-radius: 999px; color: var(--hero-ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.somm-new-inline:hover { background: var(--burgundy, var(--hero)); color: var(--gold-light); }
.somm-head-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.somm-size { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 0; border-radius: 8px; color: var(--hero-ink); cursor: pointer; }
.somm-size:hover { color: var(--gold-light); }
.somm-size .ico-shrink, .somm.is-large .somm-size .ico-grow { display: none; }
.somm.is-large .somm-size .ico-shrink { display: block; }
.somm-close { width: 36px; height: 36px; }
/* the bigger chat (Max, 7 October 2026): about 70% of the width and 85% of the height on a desktop, the whole screen on a phone */
.somm.is-large .somm-panel { width: min(70vw, 1100px); height: 85vh; max-height: none; right: 50%; bottom: 7.5vh; transform: translateX(50%); }
.somm.is-large .somm-msg { font-size: 15.5px; max-width: 80%; }
.somm.is-large .somm-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.somm-card { position: relative; }
.somm-card-link { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.somm-add { margin-top: 8px; width: 100%; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 8px 12px; font: 600 13.5px var(--sans); cursor: pointer; }
.somm-note { margin: 10px 12px 0; font-size: 12.5px; color: var(--ink-3); }
.somm-link a { display: inline-block; padding: 7px 16px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font: 600 13.5px var(--sans); text-decoration: none; }
.somm-link a:hover { filter: brightness(1.08); }
.somm-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.somm-msg { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.somm-msg p { margin: 0 0 8px; } .somm-msg p:last-child { margin: 0; }
/* numbered questions and wines (Max, 9 October 2026): one per line with a little space between */
.somm-msg ol { margin: 0 0 8px; padding-left: 1.5em; } .somm-msg ol:last-child { margin-bottom: 0; }
.somm-msg li { margin: 0 0 6px; padding-left: 2px; } .somm-msg li:last-child { margin-bottom: 0; }
.somm-msg.user { align-self: flex-end; background: var(--accent-soft); }
.somm-msg.bot { align-self: flex-start; background: var(--paper-2); }
.somm-typing { color: var(--ink-3); font-style: italic; }
.somm-err { color: #8a2a2a; }
.somm-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
.somm-card { display: block; color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; background: var(--card); }
.somm-card:hover { border-color: var(--accent); }
.somm-card img, .somm-noimg { width: 56px; height: 72px; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
/* Not sold online (Max, 9 October 2026): what an item without a Shopify product says instead of an add-to-cart button */
.buy-in-store { font-weight: 600; margin: 14px 0 0; }
.wine-card .buy-in-store { display: block; margin-top: 8px; line-height: 1.35; }
/* The bag offer (Max, 8 October 2026): plain text in the site's own style */
.bag-offer { font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin: 10px 0 14px; }
.cart-held { color: var(--gold-text, #8a6d3b); font-weight: 600; }
.cart-table tr.is-held td { background: rgba(138, 109, 59, .06); }
.somm-noimg { display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; box-sizing: border-box;
  font-size: 8px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text, #8a6d3b); }   /* only the shop's own photos are shown (9 October 2026) */
.somm-card small { display: block; font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.somm-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: 15.5px; line-height: 1.2; }
.somm-card em { font-style: normal; font-weight: 700; font-size: 13.5px; }
.somm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.somm-chips[hidden] { display: none; }   /* found 8 October 2026: display:flex kept the chips on screen after the first message */
.somm-chips button { background: transparent; border: 1px solid var(--rule-2); color: var(--ink-2); border-radius: 999px; padding: 6px 10px; font: 12.5px var(--sans); cursor: pointer; }
.somm-chips button:hover { border-color: var(--accent); color: var(--ink); }
.somm-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rule); }
.somm-form input { flex: 1; border: 1px solid var(--rule-2); border-radius: 999px; padding: 10px 14px; font: 14.5px var(--sans); background: var(--paper); color: var(--ink); }
.somm-form button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 10px 16px; font: 600 14px var(--sans); cursor: pointer; }
.somm-foot { margin: 0; padding: 0 12px 10px; font-size: 11.5px; color: var(--ink-3); }
/* the chat log notice (Max, 14 October 2026): right under the message box, on a phone too, where it takes the safe area */
.somm-privacy { padding-bottom: 4px; }
@media (max-width: 767px) { .somm-panel .somm-form { padding-bottom: 6px; }
  .somm-panel .somm-privacy { order: 3; padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--ground); } }
@media (max-width: 480px) { .somm-panel { right: 8px; left: 8px; width: auto; bottom: 88px; max-height: 74vh; } .somm-launch { right: 12px; bottom: 12px; } .somm-hello { right: 12px; bottom: 88px; } }
/* On a phone the cart's summary and its checkout button end the page above the footer: room so the bubble never sits on them. */
@media (max-width: 900px) { .checkout-layout { padding-bottom: 104px; } }
@media (max-width: 700px) { .somm.is-large .somm-panel { inset: 0; width: auto; height: auto; max-height: none; transform: none; border-radius: 0; z-index: 70; } .somm.is-large .somm-msg { max-width: 92%; } }
/* Scrolling and zoom in the chat (Max, 11 October 2026; somm.js). The list scrolls on its own and never hands the scroll
   to the page; the page is locked while the bigger chat is open; the input is 16px, so a phone does not zoom in on it and
   stay zoomed; pinch zoom is never blocked. In a short window (a phone on its side, or 200% browser zoom) the whole panel
   scrolls, with the header and the input kept in reach, so nothing is cut off. */
.somm-panel, .somm-log { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.somm-log { min-height: 0; }
.somm-form input { font-size: 16px; }
html.somm-locked, html.somm-locked body { overflow: hidden; }
@media (max-height: 560px) {
  .somm-panel, .somm.is-large .somm-panel { overflow-y: auto; }
  .somm-log { flex: none; overflow: visible; }
  .somm-panel header { position: sticky; top: 0; z-index: 1; }
  .somm-form { position: sticky; bottom: 0; z-index: 1; background: var(--card); }
}

/* ---------- critic reviews ---------- */
.critic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.critic-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.critic-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.critic-pub { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.critic-score { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.critic-meta { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
.critic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.critic-chip { display: inline-block; font-size: 12.5px; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 4px 10px; }
.critic-chip b { font-weight: 700; color: var(--ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; }
.critic-note { margin: 10px 0 4px; padding-left: 12px; border-left: 3px solid var(--accent-2); font-size: 14.5px; }
.critic-link { margin: 8px 0 0; font-size: 14px; }

/* ---------- club, gifting, special order, notify me (14 September 2026) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.facts-1 { grid-template-columns: 1fr; }
.field-blank { display: inline-block; width: min(200px, 60%); height: 1.1em; border-bottom: 1px dashed var(--rule-2); vertical-align: middle; }
html.show-review span.review-inline { display: inline-block; margin: 4px 0 0 10px; background: #FFF6D6; color: #3B3218; border: 1px dashed #C9A93E; border-radius: 2px; font-size: 12px; line-height: 1.5; padding: 1px 6px; }
.promo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--accent-2); border-radius: var(--radius); padding: 22px 24px; margin: 8px 0 48px; }
.promo h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); }
.promo p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.promo .cta-row { margin: 0; }
.promo-section { padding-block: 40px 0; }
.promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.promo-pair .promo { margin-bottom: 0; }
@media (max-width: 860px) { .promo-pair { grid-template-columns: 1fr; } }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 18px 0; }
.tier h3 { margin: 0 0 6px; }
.tier .fact { grid-template-columns: 1fr; gap: 2px; }
.notify-form .choice, .live-form .choice { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 14px 12px; margin: 14px 0 6px; background: transparent; }
.notify-form .choice legend, .live-form .choice legend { font: 700 13px var(--sans); color: var(--ink-2); padding: 0 4px; }
.notify-form .choice label, .live-form .choice label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; color: var(--ink); margin: 8px 0 0; }
.notify-form .choice input, .notify-form input[type="checkbox"], .live-form .choice input, .live-form input[type="checkbox"] { width: auto; margin-top: 5px; flex: none; }
.notify-form .row2, .live-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .notify-form .row2, .live-form .row2 { grid-template-columns: 1fr; } }
.form-done h3, .notify-done h2 { margin-top: 0; }
.live-form .botcheck { display: none !important; }
.live-form button[disabled] { opacity: .6; cursor: progress; }
/* wine autocomplete on the special order form (6 October 2026): the list sits in the page flow under the box, so on a
   phone it pushes the fields down rather than hiding under the keyboard; each option is a 48px thumb target */
.live-form .choice input:not([type=radio]):not([type=checkbox]) { width: 100%; margin-top: 0; }   /* the radio rule above made them shrink to fit */
.live-form .ac input { scroll-margin-top: 96px; }
.live-form .ac-list { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.live-form .ac-list li { display: flex; margin: 0; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 12px; cursor: pointer; border-top: 1px solid var(--rule); }
.ac-list li:first-child { border-top: 0; }
.ac-list li:hover, .ac-list li.is-active { background: var(--card); }
.ac-list li.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.ac-main { font-weight: 700; color: var(--ink); line-height: 1.3; }
.ac-sub { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.ac-hint { margin: 6px 0 0; }
.terms-box { background: var(--card); border: 1px solid var(--accent); border-left-width: 4px; border-radius: var(--radius); padding: 16px 20px; margin: 14px 0 8px; }
.terms-box ul { margin: 0; padding-left: 20px; }
.terms-box li { margin: 4px 0; }
.demo-stamp { display: inline-block; background: var(--accent-2-soft); color: var(--accent-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; padding: 3px 8px; margin-bottom: 6px; }
.soldout { margin: 18px 0 8px; }
.soldout p { margin: 4px 0 10px; }
.card-wrap { display: flex; flex-direction: column; gap: 10px; }
.notify-btn { padding: 8px 14px; font-size: 14px; }
.wine-card .w-stock { font-size: 13px; font-weight: 700; color: var(--accent-2); }
.notify-pop { position: fixed; inset: 0; z-index: 900; background: rgba(20, 20, 20, .45); display: grid; place-items: center; padding: 16px; }
.notify-pop[hidden] { display: none; }
.notify-box { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--card); color: var(--ink); border-radius: 10px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.notify-box h2 { margin: 0 0 6px; font-size: 26px; }
.notify-form label.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); margin-top: 14px; }
.stock-ask { font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 18px; margin: 8px 0 18px; }

/* Hover states, 17 September 2026: these controls had a pointer cursor but no visible change on hover.
   Measured pairings are in docs/PALETTE.md (cream on burgundy dark 14.78:1, gold light on burgundy dark 8.61:1, ink on accent-2-soft 14.06:1). */
.proposal-bar button:hover, .proposal-bar a:hover { border-color: rgba(255,255,255,.75); }
.proposal-bar button[aria-pressed="true"]:hover { background: var(--white); }
.cart-link:hover, .menu-toggle:hover { background: var(--burgundy-dark); border-color: var(--gold-light); color: var(--accent-ink); }
.active-filters button:hover { border-color: var(--accent); color: var(--ink); }
.qty button:hover { background: var(--accent-2-soft); }
.qty button:disabled { opacity: .35; cursor: default; background: transparent; }   /* the cart's + at last night's count */
.slots label:hover { border-color: var(--accent); }
.fgroup summary:hover, .fopt:hover { color: var(--ink); }
.somm-form button:hover { background: var(--burgundy-dark); }
.somm-launch:hover { background: var(--gold-light); }
.somm-close:hover { color: var(--gold-light); }

/* Calendar (Max, 20 September 2026): a real month grid, generated per month for a rolling window.
   Seven columns from 700 px up. Below that the grid collapses to a stacked day list, because a seven-column
   grid at 400 px is unreadable: the empty days drop out and every listed day names its weekday in full. */
.cal-page { max-width: none; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.cal-now { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.cal-step { display: inline-block; border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 7px 13px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--card); }
.cal-step:hover { background: var(--accent-2-soft); color: var(--ink); }
.cal-step.is-off { color: var(--ink-3); border-color: var(--rule); background: transparent; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--card); border: 1px solid var(--rule-2); }
.cal-grid th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; padding: 9px 6px; border-bottom: 1px solid var(--rule-2); background: var(--paper-2); }
.cal-grid th abbr { text-decoration: none; border: 0; }
.cal-day { vertical-align: top; border: 1px solid var(--rule); padding: 6px; height: 108px; }
.cal-day.is-out { background: var(--paper); }
.cal-day.is-out .cal-num { color: var(--ink-3); opacity: .55; }
.cal-day.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-num { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.cal-dayname { display: none; }
.cal-todaytag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cal-ev { display: block; text-decoration: none; border-radius: 2px; padding: 5px 6px; margin-bottom: 4px; font-size: 12.5px; line-height: 1.35; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
.cal-ev:hover { background: var(--accent); color: var(--accent-ink); }
.cal-ev:hover .cal-time { color: var(--accent-ink); }
.cal-ev b { display: block; font-weight: 700; }
.cal-ev .cal-time { display: block; color: var(--ink-2); font-size: 11.5px; }
.cal-ev.is-tbd { border-left-color: var(--rule-2); background: var(--paper-2); }
.cal-ev.cal-festival { border-left-color: var(--accent-2); background: var(--accent-2-soft); }
.cal-jump { font-size: 14px; color: var(--ink-2); margin-top: 12px; }
.cal-narrow-note { display: none; font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.fest-list li { margin: 6px 0; }
@media (max-width: 699px) {
  .cal-grid, .cal-grid tbody, .cal-grid tr { display: block; width: auto; height: auto; }
  .cal-grid { border: 0; background: transparent; }
  .cal-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cal-grid tr { margin: 0; }
  .cal-grid td.cal-day { display: none; width: auto; height: auto; }
  .cal-grid td.cal-day.has-entry { display: block; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--card); padding: 12px 14px; margin-bottom: 10px; }
  .cal-grid td.cal-day.is-out { display: none; }
  .cal-narrow-note { display: block; }
  .cal-num { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
  .cal-dayname { display: inline; }
  .cal-ev { font-size: 15px; padding: 9px 11px; }
  .cal-ev .cal-time { font-size: 13.5px; }
  .cal-nav { justify-content: flex-start; }
  .cal-now { width: 100%; order: -1; font-size: 21px; }
}

/* Team and media (Max, 20 September 2026). The photograph frame is a fixed square whether a photograph exists or
   not, so dropping a real one in later moves nothing. The grey square is the placeholder, and it carries its own
   alt text through role="img" and aria-label. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; margin: 8px 0 34px; }
.team-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; }
.team-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; background: var(--paper-2); }
.team-photo.is-placeholder { display: grid; place-items: center; background: #DAD7D1; border: 1px dashed var(--ink-3); color: var(--ink-3); font-size: 13px; letter-spacing: .04em; text-align: center; padding: 10px; }
.team-card h2 { font-size: 19px; margin: 14px 0 2px; }
.team-role { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); }
.team-bio { margin: 0; color: var(--ink-2); font-size: 15px; }
.team-card .team-bio { color: var(--ink-3); font-style: italic; }
.team-more { margin: 10px 0 0; font-size: 14px; }
.media-list { list-style: none; margin: 8px 0 26px; padding: 0; }
.media-item { display: grid; grid-template-columns: minmax(130px, 1fr) 3fr minmax(110px, auto); gap: 4px 18px; align-items: baseline;
              background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.media-outlet { font-weight: 700; }
.media-headline { font-family: var(--serif); font-size: 17px; }
.media-date { color: var(--ink-2); font-size: 14px; }
.media-link { grid-column: 1 / -1; font-size: 14px; }
.media-item.is-placeholder { border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); font-style: italic; background: transparent; }
.media-item.is-placeholder .media-outlet { font-weight: 600; }
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .media-item { grid-template-columns: 1fr; }
  .media-headline { font-size: 16px; }
}

/* For Brett: the TO CONFIRM notes lifted out of the page bodies (Max, 21 September 2026). They are review
   apparatus, so they keep the review styling, but on this page they are the point and are always shown. */
.confirm-group { margin: 0 0 22px; }
.confirm-group h3 { margin: 18px 0 8px; font-size: 18px; }
.confirm-note { background: #FFF6D6; color: #3B3218; border: 1px dashed #C9A93E; border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; font-size: 14px; }
.confirm-note blockquote { margin: 0; border: 0; padding: 0; background: none; }
.confirm-note p { margin: 0 0 6px; }
.confirm-note p:last-child { margin-bottom: 0; }

/* ---------- the full shelf, sales order and staff picks (Max, 23 September 2026) ---------- */
/* The gold best-seller badge. Gold on cream is 2.26:1, so the badge is gold-on-ink rather than gold text. */
.badge-best { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--gold); color: var(--burgundy-dark);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.wine-card, .shelf-card { position: relative; }
/* A tier 2 item has no page of its own, so its card is a block, not a link, and carries its own add button. */
.shelf-card .ph-card { background: linear-gradient(160deg, var(--paper-2), var(--accent-2-soft)); }
.shelf-card .w-note { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.wine-card .add-btn { margin-top: 10px; align-self: flex-start; padding: 7px 14px; font-size: 14px; }
.dept-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.dept-bar button { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--rule-2); background: var(--card);
  color: var(--ink-2); border-radius: 20px; padding: 7px 15px; cursor: pointer; }
.dept-bar button:hover { border-color: var(--accent); color: var(--accent); }
.dept-bar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dept-bar .n { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 6px; font-weight: 400; }
/* The line that leads the homepage: the shop's one claim nobody else on the street can make. */
.somm-lead { background: var(--accent-2-soft); border-block: 1px solid var(--rule); }
.somm-lead h2 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 38px); line-height: 1.22; max-width: 24ch; margin: 6px 0 18px; }
.somm-lead .cta-row { margin-top: 4px; }
.pick h3 { font-family: var(--serif); font-size: 20px; margin: 4px 0 8px; }
.pick p { margin: 0 0 8px; }
/* A club tier's price is a headline, not a hero: at the hero size "$65 a month" wrapped after the "a". */
.tier .big-price { display: block; font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 2px 0 8px; }
.gift-ideas { display: grid; gap: 18px; margin: 8px 0 4px; }
.gift-band h3.band { margin: 0 0 8px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.gift-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.gift-idea { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.gift-idea:hover { border-color: var(--accent); }
.gift-idea .w-name { font-family: var(--serif); font-size: 17px; line-height: 1.2; }
.gift-idea .w-note { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.gift-idea .w-price { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ---------- Label cards in the house style, and greyed sold-out wines (Max, 27 September 2026) ---------- */
/* Every wine without a licensed photograph gets a designed label card in the look of the 26 September Meta ads:
   burgundy ground, double gold frame, the shop's name in spaced capitals, the wine centred in the serif.
   A missing photograph reads as a deliberate design, not an empty box. */
.ph-card { background: var(--burgundy); color: var(--cream); align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 28px 20px; }
.ph-card::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--gold); pointer-events: none; }
.ph-card::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(196, 155, 61, .45); pointer-events: none; }
.ph-card .ph-house { position: absolute; top: 24px; left: 0; right: 0; font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-light); }
.ph-card .ph-type { color: var(--gold-light); justify-content: center; font-size: 10.5px; letter-spacing: .16em; }
.ph-card .ph-name { color: var(--cream); font-size: 21px; line-height: 1.18; }
.ph-card .ph-name::before { content: ""; display: block; width: 40px; height: 1.5px; background: var(--gold); margin: 0 auto 12px; }
.ph-card .ph-meta { color: #E7D9BF; font-size: 12.5px; }
.wine-top .ph-card .ph-house { top: 34px; font-size: 11px; }
.wine-top .ph-card::before { inset: 14px; } .wine-top .ph-card::after { inset: 21px; }
/* Tier 2 shelf items: the cream version of the same card. */
.shelf-card .ph-card { background: var(--cream); color: var(--burgundy-dark); }
.shelf-card .ph-card::before { border-color: var(--gold-ui); }
.shelf-card .ph-card .ph-house, .shelf-card .ph-card .ph-type { color: var(--gold-text); }
.shelf-card .ph-card .ph-name { color: var(--burgundy-dark); }
.shelf-card .ph-card .ph-meta { color: var(--ink-2); }
/* Sold out (Max, 24 September 2026): the wine stays on the site, greyed, with a notify button. Brett and Max
   decide weekly whether it is coming back; wines that are not come off the site. */
.wine-card.is-out .shot { filter: grayscale(1); opacity: .55; }
.wine-card.is-out .w-producer, .wine-card.is-out .w-name, .wine-card.is-out .w-meta, .wine-card.is-out .w-price { color: var(--ink-3); }
.wine-top.is-out .shot { filter: grayscale(1); opacity: .6; }
.badge-out { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--ink-2); color: var(--cream);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
/* In the shop grid the badges sit top left, so the house line moves to the foot of the card and tightens. */
.wine-card .ph-card .ph-house { top: auto; bottom: 22px; font-size: 8.5px; letter-spacing: .22em; }

.pick .pick-note { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink); }

.notify-err { color: #9b2c2c; margin: .5rem 0 0; font-size: .95rem; }

.monthly-feature .monthly-pick > .eyebrow { margin-bottom: .4rem; }
.monthly-feature .pick-note { margin-top: .6rem; font-style: italic; }

.follow-row { margin: 14px 0 6px; }
.follow-row .small { margin: 6px 0 0; }
.wanted-box { margin: 32px 0 12px; }
.wanted-box h2 { margin-top: 0; }
.wanted-ok { color: var(--ink); font-weight: 600; }

/* ---------- placeholder bottle outlines (Max, 3 October 2026): no photo yet, so the right kind of bottle, tinted by wine colour ---------- */
.ph-bottle { display: block; width: 22%; aspect-ratio: 40 / 120; flex: none; -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; background: var(--tint, #c9b48a); filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }
.wine-top .ph-bottle { width: 16%; }
.ph-card .ph-soon { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light, #d9c08a); opacity: .85; }
.shelf-card .ph-card .ph-soon { color: var(--gold-text, #8a6d3b); }
.wine-card .ph-card .ph-house { display: none; }
.sh-still { --sh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2040%20120%27%3E%3Cpath%20d%3D%27M16%202h8v34c0%206%208%208%208%2018v60a4%204%200%200%201-4%204H12a4%204%200%200%201-4-4V54c0-10%208-12%208-18z%27/%3E%3C/svg%3E"); }
.sh-sparkling { --sh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2040%20120%27%3E%3Cpath%20d%3D%27M16%202h8v26c0%2012%2010%2018%2010%2032v56a4%204%200%200%201-4%204H10a4%204%200%200%201-4-4V60c0-14%2010-20%2010-32z%27/%3E%3C/svg%3E"); }
.sh-sake { --sh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2040%20120%27%3E%3Cpath%20d%3D%27M16%204h8v30c0%206%206%208%206%2016v66a4%204%200%200%201-4%204H14a4%204%200%200%201-4-4V50c0-8%206-10%206-16z%27/%3E%3C/svg%3E"); }
.sh-can { --sh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2040%20120%27%3E%3Cpath%20d%3D%27M11%2040h18v3l2%204v62l-2%204v3H11v-3l-2-4V47l2-4z%27/%3E%3C/svg%3E"); }
.sh-spirit { --sh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2040%20120%27%3E%3Cpath%20d%3D%27M15%2010h10v22h6a3%203%200%200%201%203%203v81a4%204%200%200%201-4%204H10a4%204%200%200%201-4-4V35a3%203%200%200%201%203-3h6z%27/%3E%3C/svg%3E"); }
.c-red { --tint: #b5485c; }
.c-white { --tint: #efe2b0; }
.c-rose { --tint: #f0b0a4; }
.c-sparkling { --tint: #e9d68e; }
.c-skin { --tint: #e2a15e; }
.c-wine { --tint: #cdb98d; }
.c-beer { --tint: #e3b04b; }
.c-sake { --tint: #dfeaee; }
.c-spirit { --tint: #cf9152; }
.shelf-card .c-wine { --tint: #8c6f45; } .shelf-card .c-beer { --tint: #c48d22; } .shelf-card .c-sake { --tint: #7f9ea8; } .shelf-card .c-spirit { --tint: #8a5a2b; }
.shot img[src*='img/own/'] { background: #F7F3EC; padding: 10px; }
/* fit the outline, name and "photo coming soon" inside the card frame */
.wine-card .ph-card { gap: 6px; padding: 26px 18px; }
.wine-card .ph-card .ph-bottle { width: 11%; }
.wine-card .ph-card .ph-name { font-size: 17px; }
.wine-card .ph-card .ph-name::before { margin-bottom: 8px; }
.wine-card .ph-card .ph-soon { font-size: 9.5px; }
/* ---------- "+ Add filter" under the search bar (Max, 5 October 2026) ---------- */
.add-filter { position: relative; margin: -6px 0 14px; }
.addf-menu { margin-top: 10px; background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 14px; max-width: 520px; }
.addf-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.addf-choices button { font: inherit; font-size: 14px; border: 1px solid var(--rule-2); background: transparent; border-radius: 16px; padding: 5px 12px; cursor: pointer; color: var(--ink-2); }
.addf-choices button[aria-pressed="true"] { background: var(--burgundy, #5c1020); border-color: var(--burgundy, #5c1020); color: #fff; }
.addf-panel .fopts { max-height: 280px; overflow-y: auto; padding-right: 6px; }
.addf-done { margin-top: 12px; }
/* clickable shelf cards and photo zoom */
.shelf-link { color: inherit; text-decoration: none; display: block; }
.shelf-link:hover .w-name { text-decoration: underline; }
.wine-top .shot img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 12, 14, .88); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: min(92vw, 900px); max-height: 90vh; object-fit: contain; background: #F7F3EC; border-radius: 8px; padding: 16px; }
.lightbox-close { position: absolute; top: 14px; right: 18px; font-size: 34px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
.zoom-hint { margin-top: 8px; }
.item-facts dt, .facts dt { font-weight: 600; }
/* phones: departments scroll sideways in one row instead of filling the screen (5 October 2026) */
@media (max-width: 600px) {
  .dept-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .dept-bar::-webkit-scrollbar { display: none; }
  .dept-bar button { flex: none; }
  .addf-menu { max-width: none; }
}
/* phones: two products per row instead of one huge card */
@media (max-width: 600px) {
  .wine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px; }
  .wine-card .ph-card { padding: 16px 10px; }
  .wine-card .ph-card .ph-name { font-size: 14px; }
  .wine-card .ph-card .ph-meta { font-size: 11px; }
  .wine-card .ph-card .ph-soon { font-size: 8px; letter-spacing: .08em; }
  .wine-card .w-name { font-size: 16px; }
  .wine-card .add-btn { width: 100%; justify-content: center; }
}
/* ---------- club band on the homepage and the one-per-visit pop-up (Max, 5 October 2026) ---------- */
.club-band { background: var(--burgundy, #5c1020); color: var(--cream, #f4ece0); }
.club-band .eyebrow { color: var(--gold-light, #d9c08a); }
.club-band h2 { color: var(--cream, #f4ece0); margin-top: 4px; }
.club-band-inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: center; }
.club-band .btn.ghost { color: var(--cream, #f4ece0); border-color: var(--gold-light, #d9c08a); }
@media (max-width: 760px) { .club-band-inner { grid-template-columns: 1fr; } }
.promo-pop { position: fixed; inset: 0; z-index: 900; background: rgba(20, 12, 14, .55); display: grid; place-items: center; padding: 18px; }
.promo-box { position: relative; background: var(--paper, #f7f3ec); max-width: 460px; width: 100%; border-radius: 12px; padding: 30px 26px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); border-top: 4px solid var(--gold, #c49b3d); }
.promo-box h2 { margin: 4px 0 10px; }
.promo-x { position: absolute; top: 8px; right: 12px; font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--ink-2); }
.promo-later { margin-top: 12px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.club-band .btn:not(.ghost) { background: var(--gold, #c49b3d); border-color: var(--gold, #c49b3d); color: var(--burgundy-dark, #3d0a14); }
.club-band .btn:not(.ghost):hover { background: var(--gold-light, #d9c08a); }

/* ---------- Wines of the Month (Max, 5 October 2026): a compact band right under the header, above the hero, so it
   is the first thing on a phone and above the fold on a desktop. Same card language as the shop: the bottle outline
   on the burgundy card, serif name, muted meta, bold price. ---------- */
.section.wotm { padding-block: 22px 24px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.wotm-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.wotm-head { flex: 0 1 250px; }
.wotm-head .eyebrow { margin: 0 0 4px; }
.wotm-head h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.wotm-head .small { margin: 6px 0 0; }
.wotm-grid { flex: 1 1 520px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wotm-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.wotm-card:hover { border-color: var(--accent); }
.wotm-card .shot { margin: 0; }
.wotm-card .ph-card { padding: 12px 8px; }
.wotm-card .ph-card::before { inset: 6px; }
.wotm-card .ph-card::after { inset: 10px; }
.wotm-card .ph-bottle { width: 24%; }
.wotm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wotm-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.wotm-card .w-producer { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.wotm-card .w-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.wotm-card .w-meta { font-size: 13px; color: var(--ink-3); }
.wotm-line { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.35; color: var(--ink); margin-top: 4px; }
.wotm-card .w-price { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.wotm-card .w-stock { font-size: 13px; color: var(--ink-3); }
.wotm-more { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.wotm-card.is-out .shot { filter: grayscale(1); opacity: .55; }
/* an empty slot (Max, 6 October 2026): same card, no link, so no hover change */
.wotm-soon { cursor: default; }
.wotm-soon:hover { border-color: var(--rule); }
.wotm-soon-head { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.2; color: var(--ink); }
.wotm-soon-line { font-weight: 700; color: var(--accent); margin-top: 2px; }
.wotm-soon-note { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 620px) { .wotm-soon-head { font-size: 18px; } }
@media (max-width: 860px) { .wotm-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; } }   /* stacked cards keep one height */
@media (max-width: 620px) { .section.wotm { padding-block: 14px 16px; } .wotm-inner { gap: 10px; } .wotm-head { flex-basis: 100%; } .wotm-head .small { margin-top: 2px; } .wotm-card { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 10px; } .wotm-card .w-name { font-size: 18px; } }

/* ---------- Shorter homepage (Max, 6 October 2026): search and shop entry, then the Visit strip ---------- */
.section.shop-entry { padding-block: 26px 28px; }
.shop-entry-inner { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 24px; }
.shop-search { flex: 1 1 420px; margin: 0; }
.shop-search .eyebrow { display: block; margin: 0 0 8px; }
.shop-search-row { display: flex; gap: 10px; }
.shop-search-row .search { flex: 1 1 auto; min-width: 0; min-height: 48px; }
.shop-search-row .btn { flex: none; min-height: 48px; }
.shop-entry .shop-all { min-height: 48px; display: inline-flex; align-items: center; }
.section.visit-strip { background: var(--paper-2); border-top: 1px solid var(--rule); }
.visit-strip-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px 40px; align-items: center; }
.visit-strip-inner > :only-child { grid-column: 1 / -1; }
.visit-strip-text h2 { margin: 0 0 10px; }
.visit-strip-text p { margin: 0 0 6px; line-height: 1.6; }
@media (max-width: 860px) { .visit-strip-inner { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .shop-entry .shop-all { width: 100%; justify-content: center; } }

/* ---------- Club page join block (Max, 6 October 2026): full width, one large button to the club's sign-up page ---------- */
.join-block { margin: 8px 0 64px; padding: 40px clamp(20px, 5vw, 56px); background: var(--burgundy, #5c1020); color: var(--cream, #f4ece0); border-radius: var(--radius); }
.join-block h2 { color: var(--cream, #f4ece0); margin: 0 0 12px; }
.join-block p { margin: 0 0 8px; max-width: 62ch; font-size: 17px; line-height: 1.55; }
.join-block .join-btn { margin-top: 18px; min-height: 56px; padding: 0 44px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold, #c49b3d); border-color: var(--gold, #c49b3d); color: var(--burgundy-dark, #3d0a14); }
.join-block .join-btn:hover { background: var(--gold-light, #d9c08a); }
@media (max-width: 620px) { .join-block .join-btn { width: 100%; padding: 0 20px; } }

/* ---------- Map (Max, 6 October 2026): Visit page and the homepage Visit strip ---------- */
.visit-map { margin: 18px 0 28px; }
.map-frame { display: block; width: 100%; height: 380px; border: 0; border-radius: 14px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); }
.visit-map-small { margin: 0; }
.visit-map-small .map-frame { height: 300px; }
.storefront { margin: 0 0 16px; }
.storefront img { display: block; width: 100%; height: auto; border-radius: 14px; }
.map-address { margin: 12px 0 6px; font-size: 15px; color: var(--ink-2); }
.map-buttons .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 620px) {
  .map-frame, .visit-map-small .map-frame { height: 320px; }
  .map-buttons { flex-direction: column; align-items: stretch; }
  .map-buttons .btn { width: 100%; }
}

/* ---------- private sales report (reports/sales.html, 7 October 2026) ---------- */
.sales-check { border: 1px solid var(--rule); border-left-width: 5px; border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; background: var(--card); }
.sales-check.is-pass { border-left-color: #2f7d4f; }
.sales-check.is-fail { border-left-color: #9b2c2c; background: #fbeeee; }
.sales-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sales-cards dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.sales-cards dt { color: var(--ink-3); font-size: 14px; }
.sales-cards dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.heat-toggle { display: flex; gap: 8px; margin: 8px 0 12px; }
.heat { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.heat th { font-weight: 700; color: var(--ink-2); padding: 4px 6px; text-align: center; }
.heat tbody th { text-align: left; }
.heat td { min-width: 52px; padding: 8px 6px; text-align: center; border-radius: 6px; background: color-mix(in srgb, var(--accent) calc(var(--a, 0) * 100%), var(--card)); }
.heat.mode-t td { --a: var(--ta); } .heat.mode-r td { --a: var(--ra); }
.heat.mode-t .v-r, .heat.mode-r .v-t { display: none; }
.heat.mode-t td.dt, .heat.mode-r td.dr { color: #fff; }
.sales-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sales-table th, .sales-table td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.sales-table .num { text-align: right; }
.sales-narrow { max-width: 420px; }
.sales-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.sales-all { margin: 12px 0; }
@media (max-width: 520px) { .sales-tops { grid-template-columns: 1fr; } }
/* Turnstile (managed, interaction-only): an empty box until Cloudflare needs the visitor to click, then the checkbox
   just above the message field, full width of the panel in both sizes and on a phone */
.somm-ts { padding: 0 12px; }
.somm-ts:empty { display: none; }
.somm-ts iframe { max-width: 100%; }

/* ------------------------------------------------------------------ Hazel's-style improvements (Max, 10 October 2026)
   Every card ends the same way: price and size on one line, then Add to cart and Add a case, pinned to the bottom
   so a row of cards lines up whatever the name length. */
.wine-card .w-producer { min-height: 1.25em; }
.wine-card .w-buy { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.wine-card .w-pricerow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wine-card .w-pricerow .w-price { margin-top: 0; }
.wine-card .w-size { font-size: 13px; color: var(--ink-3); }
.wine-card .w-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wine-card .w-btns .add-btn { margin-top: 0; }
.wine-card .case-btn { border-style: dashed; }
.buy .case-btn { margin-left: 8px; }
.case-note { margin: 6px 0 0; }
@media (max-width: 620px) { .wine-card .w-btns .add-btn { width: 100%; justify-content: center; } .buy .case-btn { margin: 8px 0 0; } }

/* Browse by type, then country, then region */
.browse { margin: 4px 0 14px; }
.browse-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 15px; }
.browse-path button { background: none; border: 0; padding: 2px 4px; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.browse-path button:last-child { color: var(--ink); text-decoration: none; cursor: default; }
.browse-path .sep { color: var(--ink-3); }
.browse-next { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.browse-next button { border: 1px solid var(--rule); background: var(--card); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.browse-next button:hover { border-color: var(--accent); }
.browse-next .n { margin-left: 6px; color: var(--ink-3); font-size: 12px; }

/* Homepage rows: one line of cards that scrolls sideways, like Hazel's rails */
.wine-rail, .pick-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 220px); gap: 20px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.wine-rail > *, .pick-rail > * { scroll-snap-align: start; }
.pick-rail { grid-auto-columns: minmax(240px, 300px); }
.pick-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 16px; }
.pick-card h3 { font-family: var(--serif); font-size: 19px; line-height: 1.25; margin: 4px 0 8px; }
@media (max-width: 620px) { .wine-rail { grid-auto-columns: 62%; gap: 12px; } .pick-rail { grid-auto-columns: 80%; } }
/* Card text stacks (producer, then name, then place), and the buying block keeps the same height on every card, with
   or without the case button, so the prices in a row line up. */
.wine-card .shelf-link { display: flex; flex-direction: column; }
.wine-card .w-buy { min-height: 126px; justify-content: flex-start; }

/* Shop page numbers (Max, 11 October 2026): 24 to a page; a page change brings the list back to its top under the header */
.result-count { scroll-margin-top: 110px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 28px 0 8px; }
.pager[hidden] { display: none; }
.pager a, .pager span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; }
.pager a { border: 1px solid var(--gold-ui); color: var(--accent); background: var(--card); }
.pager a:hover { background: var(--accent-2-soft); color: var(--accent); border-color: var(--gold-text); }
.pager a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pager .is-off { color: var(--ink-3); border: 1px solid var(--rule); }
.pager .pg-gap { min-width: 20px; padding: 0; color: var(--ink-3); }
@media (max-width: 480px) { .pager { gap: 4px; } .pager a, .pager span { min-width: 40px; padding: 0 9px; font-size: 14px; } }

/* Visit: "Would you rather write?" in its own box (Max, 11 October 2026) */
.write-box { margin: 40px 0 8px; padding: 28px 28px 24px; background: var(--accent-2-soft); border: 1px solid var(--gold-ui); border-radius: 10px; }
.write-box h2 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 10px; }
.write-box p { font-size: 17px; max-width: 60ch; }
.write-box .btn { margin-top: 6px; font-size: 16px; padding: 12px 22px; }
@media (max-width: 480px) { .write-box { padding: 22px 18px 18px; } }

/* Events (Max, 11 October 2026): what is coming up first, as short cards; then three short features with the page photos */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 14px 0 22px; }
.ev-card { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); }
.ev-date { margin: 0; display: flex; flex-direction: column; align-items: center; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 6px 0 8px; line-height: 1.1; }
.ev-dow, .ev-mon { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); }
.ev-day { font-family: var(--serif); font-size: 28px; font-weight: 600; margin: 2px 0; }
.ev-festival .ev-date { background: var(--hero); }
.ev-body h3 { font-size: 17px; line-height: 1.3; margin: 0 0 4px; }
.ev-body p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }
.ev-body .btn { padding: 7px 14px; font-size: 14px; }
.ev-months { border-top: 1px solid var(--rule); padding-top: 14px; }
.ev-months .eyebrow { margin: 0 0 6px; }
.ev-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 26px; align-items: start; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--rule); }
.ev-feature .ev-photo { margin: 0; }
.ev-feature .ev-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.ev-feature h2 { margin-top: 0; }
.ev-recent { list-style: none; padding: 0; margin: 0 0 14px; }
.ev-recent li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ask-box { margin: 16px 0 0; border: 1px solid var(--gold-ui); border-radius: 10px; background: var(--card); }
.ask-box > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--accent); }
.ask-box > summary:hover { color: var(--ink); }
.ask-box[open] > summary { border-bottom: 1px solid var(--rule); }
.ask-box > form { padding: 4px 16px 16px; margin: 0; border: 0; box-shadow: none; }
@media (max-width: 760px) { .ev-feature { grid-template-columns: 1fr; gap: 14px; } .ev-feature .ev-photo img { aspect-ratio: 16 / 9; } }
.ev-body .ev-also { font-size: 13.5px; color: var(--ink-3); margin-top: -6px; }

/* Winemaking and tasting note (Max, 11 October 2026) */
.winemaking{margin-top:8px}
.winemaking .wm-note{font-size:1.05em;line-height:1.55}
/* Sold-out wine in a search (Max, 11 October 2026): greyed card, the line and the Follow button under it */
.card-wrap .out-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
/* Chaz on the team page (Max, 11 October 2026): a real bio reads as text, not as a placeholder */
.team-card .team-bio.is-real { color: var(--ink-2); font-style: normal; }
img.team-photo { height: auto; }   /* the width and height attributes keep the space; the square comes from aspect-ratio */
.card-wrap .wine-card.is-out .w-buy { min-height: 0; }   /* no buttons on a sold-out card, so no empty band before the line */

/* ================================================================== Direction D (12 October 2026)
   A calm, light gallery: lots of white space, big imagery, thin rules instead of boxes, square corners, no shadows except
   Chaz. Hanken Grotesk (light for the big headings) and Newsreader for wine names and stories. Motion is a gentle rise
   on first view and a slow settle on hero images, and all of it is off under prefers-reduced-motion. */
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; font-weight: 400; }
a { color: var(--ink); text-decoration-color: currentColor; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); }
.hero :focus-visible, .age-gate :focus-visible, .burgundy-band :focus-visible, .dark-panel :focus-visible, .somm-panel header :focus-visible, .topbar :focus-visible { outline-color: var(--gold); }
.wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
@media (max-width: 720px) { :root { --gutter: 16px; } }
h1, h2, h3 { font-family: var(--sans); font-weight: 300; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; font-variation-settings: normal; }
h1 { font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -.015em; line-height: 1.06; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 21px; font-weight: 400; }
.serif, .w-name, .ph-name { font-family: var(--serif); font-weight: 400; }
.eyebrow { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: none; color: var(--accent); }
.dek { color: var(--muted); font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; }
.muted { color: var(--muted); }
.link { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { color: var(--accent); }

/* top bar and header */
.topbar { background: var(--dark); color: #EDE8DC; font-size: 13px; letter-spacing: .04em; text-align: center; padding: 10px 16px; line-height: 1.4; }
.site-header { background: var(--ground); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 18px 30px; min-height: 76px; padding-block: 14px; }
.brand { color: var(--ink); gap: 12px; flex: none; }
.site-header a:hover { color: var(--accent); }
.brand-logo { height: 36px; color: var(--accent); }
.brand .wordmark { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: .02em; line-height: 1.2; }
/* 26 px between items (was 30): Max's eight menu items fit on one line at 1280 px (14 October 2026, Journal and Menu) */
.nav { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 auto; align-items: center; font-size: 15px; }
.nav a { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
/* One line on every desktop width (Max, 16 October 2026: "Visit" dropped to a second line beside "Cart (13)"). With nine
   items (Burgundy joined the menu) the row no longer fit at 1280 px, and at wider widths it fit only to a fraction of a
   pixel, so the nav never wraps above the Menu button and the gaps close up below 1440 px and again below 1280 px.
   Checked from 1181 to 1512 px with a three-digit cart: one line, nothing past the right edge. .site-header .utils, not
   .utils, because the plain .utils rule further down set the gap back to 24 px. */
@media (min-width: 1181px) { .nav { flex-wrap: nowrap; } .nav a, .nav-parent { white-space: nowrap; } }
@media (min-width: 1181px) and (max-width: 1440px) { .nav { column-gap: 18px; } .site-header .utils { gap: 16px; } .site-header .wrap { column-gap: 20px; } }
@media (min-width: 1181px) and (max-width: 1279px) { .nav { column-gap: 12px; } .site-header .utils { gap: 12px; } .site-header .wrap { column-gap: 14px; } }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); border-bottom-color: currentColor; }
.nav .nav-search, .nav .nav-account { display: none; }
.utils { display: flex; align-items: center; gap: 24px; font-size: 15px; flex: none; }
.utils a, .util-chaz { color: var(--ink); text-decoration: none; }
.util-chaz { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.util-chaz:hover { color: var(--accent); }
.cart-link { display: inline; padding: 0; border: 0; border-radius: 0; font-weight: 400; font-size: 15px; color: var(--ink); margin: 0; white-space: nowrap; }
.cart-count { background: none; color: inherit; border-radius: 0; font-size: inherit; padding: 0; min-width: 0; }
.account-link { padding: 0; margin: 0; font-weight: 400; font-size: 15px; color: var(--ink); }
.account-link:hover, .cart-link:hover { background: none; color: var(--accent); }
.menu-toggle { display: none; font: inherit; font-size: 15px; font-weight: 500; background: none; border: 1px solid var(--ink); border-radius: 0; padding: 7px 14px; color: var(--ink); cursor: pointer; margin: 0; }
.menu-toggle:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
@media (max-width: 1180px) {
  .site-header .wrap { flex-wrap: wrap; }
  .menu-toggle { display: inline-block; }
  .util-search, .util-chaz, .utils .account-link { display: none; }
  .utils { margin-left: auto; gap: 16px; }
  .nav { display: none; order: 3; flex-basis: 100%; position: static; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px 0 10px; background: none; border: 0; max-height: none; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav .nav-search, .nav .nav-account { display: block; }
}
@media (max-width: 520px) {
  .site-header .wrap { gap: 10px 12px; min-height: 64px; padding-block: 10px; }
  .brand { gap: 8px; min-width: 0; } .brand .wordmark { font-size: 15px; white-space: nowrap; } .brand-logo { height: 28px; }
  .utils { gap: 12px; font-size: 14px; } .cart-link { font-size: 14px; } .menu-toggle { padding: 6px 10px; font-size: 14px; }
}

/* buttons: square, ink or outlined, no shadow */
.btn { font-weight: 500; font-size: 15px; background: var(--ink); color: var(--ground); border: 1px solid var(--ink); padding: 15px 30px; border-radius: 0; line-height: 1.2; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn.light { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.btn.light:hover { background: var(--gold); border-color: var(--gold); color: var(--band); }
.btn.light-ghost { background: transparent; color: var(--ground); border-color: rgba(217, 185, 122, .7); }
.btn.light-ghost:hover { background: var(--ground); color: var(--band); border-color: var(--ground); }
.cta-row { gap: 14px; }

/* sections */
.section { padding-block: 96px; }
.section.alt { background: var(--panel); }
@media (max-width: 720px) { .section { padding-block: 64px; } }

/* footer */
.site-footer { background: var(--ground); color: var(--muted); border-top: 1px solid var(--line); padding-block: 72px 28px; font-size: 15px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.foot-grid { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 36px; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-name { display: block; font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.foot-brand p { margin: 0 0 10px; }
.foot-h { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 10px; }
.site-footer li { margin-bottom: 6px; }
.foot-legal { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 20px; color: var(--muted); font-size: 13px; }

/* motion: a gentle rise on first view, a slow settle on hero images, a slight zoom on product images */
@keyframes d-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes d-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.rise { animation: d-rise 1.1s var(--ease) both; }
.rise-2 { animation: d-rise 1.1s .18s var(--ease) both; }
.rise-3 { animation: d-rise 1.1s .36s var(--ease) both; }
.settle { animation: d-settle 2.4s var(--ease) both; }
html.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js [data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise, .rise-2, .rise-3, .settle { animation: none; }
  html.js [data-rise] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* the Burgundy Room: the dark band (homepage and its own page), gold on dark, village chips */
.burgundy-band { background: var(--band); color: var(--ground); }
.burgundy-band .wrap { padding-block: 104px 96px; }
.room-head .wrap { padding-block: 88px 72px; }
.band-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 48px; align-items: end; }
.band-title { display: flex; flex-direction: column; gap: 14px; }
.eyebrow.on-dark, .dark-panel .eyebrow { color: var(--gold); margin: 0; }
.band-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 60px); line-height: 1.04; color: var(--ground); letter-spacing: -.005em; }
.band-text { display: flex; flex-direction: column; gap: 18px; }
.band-text p { margin: 0; font-size: 18px; color: var(--blush); }
.burgundy-band a { color: var(--ground); }
.burgundy-band a:hover { color: var(--gold); }
.village-chips { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.village-chips a, .village-chips .chip { font: inherit; font-size: 14px; color: var(--ground); background: transparent; border: 1px solid rgba(217, 185, 122, .6); padding: 8px 14px; text-decoration: none; cursor: pointer; line-height: 1.3; }
.village-chips a:hover, .village-chips .chip:hover { border-color: var(--gold); color: var(--gold); }
.village-chips .chip .n { color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 4px; }
.village-chips .chip[aria-pressed="true"], .village-chips .enter { background: var(--ground); color: var(--band); border-color: var(--ground); }
.village-chips .chip[aria-pressed="true"] .n { color: var(--accent); }
.village-chips .enter:hover { background: var(--gold); border-color: var(--gold); color: var(--band); }
.band-more { font-size: 15px; }
.room-body { padding-block: 48px 96px; }
.room-count { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.room-sec { padding-top: 40px; }
.room-sec[hidden], .room-item[hidden] { display: none; }
.room-h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); margin: 0 0 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.room-note { margin-top: 48px; }
.room-head .band-intro { align-items: start; }

/* ---------- direction D: product cards, the shop and every listing ---------- */
.wine-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 56px 28px; }
.wine-card { color: var(--ink); }
.wine-card .shot { aspect-ratio: 4 / 5; background: var(--backdrop); border: 0; border-radius: 0; margin-bottom: 16px; }
.wine-card:hover .shot { border-color: transparent; }
.shot img { background: var(--backdrop); padding: 22px; transition: transform .9s var(--ease); }
.shot img[src*='img/own/'] { background: var(--backdrop); padding: 22px; }
.wine-card:hover .shot img, .wine-card .shelf-link:focus-visible .shot img { transform: scale(1.04); }
.wine-card .shelf-link { color: var(--ink); }
.wine-card .shelf-link:hover { color: var(--ink); }
.wine-card .shelf-link:hover .w-name { text-decoration: none; color: var(--accent); }
.wine-card .w-producer { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.wine-card .w-name { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; margin: 2px 0 6px; color: inherit; }
.wine-card .w-meta { font-size: 14px; color: var(--muted); }
.wine-card .w-price { font-weight: 500; font-size: 16px; }
.wine-card .w-size { font-size: 14px; color: var(--muted); }
.wine-card .w-stock, .wine-card .w-note, .shelf-card .w-note { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.wine-card .add-btn, .notify-btn { padding: 10px 16px; font-size: 14px; }
.wine-card .case-btn { border-style: solid; border-color: var(--gold-ui); }
.badge-best, .badge-out { top: 12px; left: 12px; border-radius: 0; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: none; padding: 4px 9px; }
.badge-best { background: var(--ground); color: var(--accent); border: 1px solid var(--accent); }
.badge-out { background: var(--ink); color: var(--ground); }
.farm-chip { font-weight: 500; color: var(--muted); }
/* the designed label card, for a bottle with no photograph yet: square, in the new burgundy and gold */
.ph-card::before { inset: 10px; border-color: var(--gold); }
.ph-card::after { inset: 15px; border-color: rgba(217, 185, 122, .45); }
.ph-card .ph-name { font-family: var(--serif); font-weight: 400; }
.shelf-card .ph-card { background: var(--backdrop); color: var(--ink); }
.shelf-card .ph-card::before { border-color: var(--gold-ui); }
.shelf-card .ph-card::after { border-color: var(--line); }
.shelf-card .ph-card .ph-name { color: var(--ink); }
.shelf-card .ph-card .ph-house, .shelf-card .ph-card .ph-type, .shelf-card .ph-card .ph-soon { color: var(--gold-text); }
.wine-rail, .pick-rail { grid-auto-columns: minmax(230px, 270px); gap: 28px; padding-bottom: 14px; scrollbar-width: thin; }
.pick-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 18px 0 0; }
.pick-card h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.pick-card .pick-shot { aspect-ratio: 1 / 1; margin-bottom: 14px; }
.gc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 8px 0 24px; }
.gc-figure { margin: 0; max-width: 440px; }
.gc-img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 378; }
.gc-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 10px 0 22px; }
.gc-amount { border: 1px solid var(--line); padding: 14px; display: grid; gap: 10px; align-content: start; }
.gc-value { font-family: var(--serif); font-size: 28px; line-height: 1; }
.gc-amount .btn { width: 100%; white-space: nowrap; padding-inline: 10px; }
.gc-amount .buy-in-store { margin: 0; font-size: 14px; }
.gc-facts { margin: 0; padding-left: 18px; }
.gc-facts li { margin: 6px 0; }
.gc-teaser { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; margin: 20px 0 28px; padding: 16px; border: 1px solid var(--line); }
.gc-teaser h3 { margin: 0 0 6px; }
.gc-teaser p { margin: 0 0 10px; }
@media (max-width: 600px) { .gc-teaser { grid-template-columns: 1fr; } .gc-teaser .gc-img { max-width: 320px; } }
@media (max-width: 600px) {
  .wine-grid { gap: 36px 14px; }
  .wine-card .w-name { font-size: 17px; }
  .shot img, .shot img[src*='img/own/'] { padding: 12px; }
}
@media (max-width: 620px) { .wine-rail { grid-auto-columns: 64%; gap: 16px; } }

/* the shop: filters, departments, search, sort and page numbers, square and ruled */
.page-head { padding-block: 64px 16px; }
.page-head h1 { margin-bottom: 14px; }
.shop-layout { grid-template-columns: 240px 1fr; gap: 48px; padding-block: 24px 96px; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; } }
.filters { top: 96px; }
.fgroup { border-top: 1px solid var(--line); padding: 16px 0; }
.fgroup summary { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--ink); }
.fopt { font-size: 15px; color: var(--ink-2); }
.fopt .n { color: var(--muted); }
.search, select.sort { border-radius: 0; border: 1px solid var(--gold-ui); background: var(--ground); padding: 13px 16px; }
.search:focus, select.sort:focus { border-color: var(--ink); }
.dept-bar { gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.dept-bar button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 12px 16px 10px; font-weight: 400; font-size: 15px; color: var(--muted); margin-bottom: -1px; }
.dept-bar button:hover { color: var(--ink); border-bottom-color: var(--line); background: none; }
.dept-bar button[aria-pressed="true"] { background: none; color: var(--ink); border-bottom-color: var(--accent); }
.dept-bar .n { color: var(--muted); opacity: 1; }
.active-filters button, .addf-choices button, .browse-next button, .related a { border-radius: 0; border-color: var(--line); background: transparent; }
.active-filters button:hover, .addf-choices button:hover, .browse-next button:hover, .related a:hover { border-color: var(--ink); color: var(--ink); }
.addf-choices button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.addf-menu { border-radius: 0; border-color: var(--line); background: var(--ground); }
.browse-path button { color: var(--accent); font-weight: 500; }
.result-count { font-size: 14px; color: var(--muted); }
.bag-offer { font-weight: 400; color: var(--muted); }
.pager a, .pager span { border-radius: 0; font-weight: 400; }
.pager a { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.pager a:hover { background: var(--panel); color: var(--ink); border-color: var(--ink); }
.pager a[aria-current="page"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pager .is-off { border-color: var(--line); color: var(--muted); }
.panel, .wanted-box, .enquiry, .summary, .addf-menu, .terms-box { border-radius: 0; box-shadow: none; }
.panel, .wanted-box { background: var(--panel); border: 0; padding: 36px; }
.stock-ask { border-top: 1px solid var(--line); color: var(--muted); }
.shelf-list a { border-bottom-color: var(--line); }

/* ---------- direction D: the homepage ---------- */
.light-h { font-family: var(--sans); font-weight: 300; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.01em; line-height: 1.1; margin: 0; color: inherit; }
.home-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); min-height: min(720px, 86vh); }
.hero-shot { background: #E9E6DE; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px; min-height: 420px; }
.hero-img-link { display: block; width: 100%; max-width: 520px; }
.hero-shot img { display: block; width: 100%; height: min(640px, 70vh); object-fit: contain; }
.hero-text { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 72px 64px; }
.hero-text .eyebrow { margin: 0; }
.hero-h { margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.015em; max-width: 560px; color: var(--ink); }
.hero-dek { margin: 0; max-width: 480px; font-size: 18px; color: var(--muted); }
.hero-text .cta-row { margin: 0; }
@media (max-width: 720px) { .hero-shot { padding: 20px; min-height: 0; } .hero-shot img { height: 27vh; } .hero-text { padding: 28px var(--gutter) 48px; gap: 16px; } .hero-cred { margin: 0; } }
.band-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 24px; overflow-x: auto; padding-bottom: 12px; margin-top: 48px; scrollbar-width: thin; scrollbar-color: rgba(217, 185, 122, .5) transparent; }
.band-card { display: flex; flex-direction: column; gap: 12px; color: var(--ground); text-decoration: none; }
.band-shot { display: block; background: var(--backdrop); overflow: hidden; }
.band-shot img { display: block; width: 100%; height: 400px; object-fit: contain; padding: 24px; transition: transform .9s var(--ease); }
.band-card:hover .band-shot img, .band-card:focus-visible .band-shot img { transform: scale(1.04); }
.band-name { font-family: var(--serif); font-size: 22px; line-height: 1.25; }
.band-price { font-size: 15px; color: var(--blush); }
.band-card:hover .band-name { color: var(--gold); }
@media (max-width: 620px) { .band-rail { grid-auto-columns: 72%; } .band-shot img { height: 320px; } }
.home-story { padding-block: 96px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px 72px; border-top: 1px solid var(--line); padding-top: 72px; }
.story-h { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; margin: 0; }
.story-body { font-size: 18px; color: var(--ink-2); max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.home-browse { background: var(--panel); }
.home-browse .wrap { padding-block: 96px; }
.home-browse .light-h { margin-bottom: 36px; }
.browse-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #DCD6C8; border: 1px solid #DCD6C8; }
.browse-tile { background: var(--panel); padding: 34px 28px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: background .4s var(--ease); }
.browse-tile:hover { background: var(--ground); color: var(--ink); }
.bt-name { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.bt-sub { font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .browse-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .browse-tile { padding: 26px 20px; } .bt-name { font-size: 23px; } }
.browse-tile.is-accent { background: var(--accent); color: var(--ground); }
.browse-tile.is-accent .bt-sub { color: var(--blush); }
.browse-tile.is-accent:hover { background: var(--band); color: var(--ground); }
.home-tuesday { padding-block: 104px; }
.tuesday-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px 72px; }
.tuesday-head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.tuesday-head p { margin: 0; font-size: 18px; max-width: 460px; }
.tuesday-list { display: flex; flex-direction: column; }
.tuesday-row { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tuesday-row:last-child { border-bottom: 1px solid var(--line); }
.tuesday-row:hover .tr-name { color: var(--accent); }
.tr-name { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.3; }
.tr-sub { font-size: 14px; color: var(--muted); }
.tr-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-club { display: grid; }
.dark-panel { background: var(--dark); color: var(--ground); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 96px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.dark-panel .light-h { font-size: clamp(34px, 4vw, 48px); line-height: 1.08; color: var(--ground); max-width: 720px; }
.dark-panel p:not(.eyebrow) { margin: 0; font-size: 18px; color: var(--dark-ink); max-width: 560px; }
.dark-panel .cta-row { margin: 6px 0 0; }
.home-row .section-head { margin-bottom: 32px; }
.reserve-line { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: end; justify-content: space-between; padding-block: 72px 96px; border-top: 1px solid var(--line); }
.reserve-line > div:first-child { max-width: 640px; }
.reserve-line .light-h { margin: 8px 0 14px; }

/* ---------- direction D: wine and item pages ---------- */
.crumbs { font-size: 14px; color: var(--muted); padding-block: 28px 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.wine-top { grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr); gap: 64px; padding-block: 28px 72px; align-items: start; }
@media (min-width: 821px) { .wine-top > div:first-child { position: sticky; top: 104px; } }
@media (max-width: 820px) { .wine-top { grid-template-columns: 1fr; gap: 28px; } }
.wine-top .shot { aspect-ratio: 4 / 5; background: var(--backdrop); border: 0; border-radius: 0; overflow: hidden; }
.wine-top .shot img { background: var(--backdrop); padding: 36px; animation: d-settle 2.4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .wine-top .shot img { animation: none; } }
.wine-top .eyebrow { margin-bottom: 14px; }
.wine-name { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.005em; margin: 0 0 8px; }
.wine-producer { margin: 0 0 6px; font-size: 18px; }
.price-row { margin: 22px 0 14px; gap: 14px; }
.big-price { font-size: 28px; font-weight: 400; }
.qty { border-radius: 0; border-color: var(--gold-ui); }
.buy .btn { padding: 14px 28px; }
.follow-row { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; }
.pickup-note { color: var(--muted); margin-top: 18px; }
.about-h, .winemaking h2, .wine-top h2 { font-family: var(--sans); font-weight: 300; font-size: 26px; margin: 44px 0 12px; }
.zoom-hint { margin-top: 10px; }
/* the tasting card (look A, Max's pick, 12 October 2026): a ruled list, labels quiet, values in the serif */
.tasting-card { margin: 44px 0 8px; }
.tc-h { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0 0 16px; }
.tc-sub { font-family: var(--sans); font-weight: 500; font-size: 15px; margin: 26px 0 4px; }
.tc-facts { grid-template-columns: 1fr; gap: 0; margin: 8px 0 0; }
.tc-facts .fact { grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tc-facts .fact:first-child { border-top: 1px solid var(--line); }
.tc-facts dt { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted); padding-top: 3px; }
.tc-facts dd { font-family: var(--serif); font-size: 18px; line-height: 1.45; }
.tc-facts dd .small, .tc-facts dd .farm-chip { font-family: var(--sans); }
.tc-note { margin-top: 26px; }
.tc-note-h { font-family: var(--sans); font-weight: 500; font-size: 15px; margin: 0 0 6px; }
.tc-note .wm-note { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.5; margin: 0 0 6px; }
.not-pub { color: var(--muted); font-style: italic; }
@media (max-width: 520px) { .tc-facts .fact, .winemaking .fact { grid-template-columns: 1fr; gap: 2px; } }
.winemaking .facts { grid-template-columns: 1fr; }
.winemaking .fact { grid-template-columns: 140px 1fr; border-bottom-color: var(--line); }
.critic-card, .vintage-box { border-radius: 0; box-shadow: none; }
.critic-card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
.critic-score { font-weight: 400; }
.scale-row .track, .track { border-radius: 0; }
.track .fill { border-radius: 0; }

/* ---------- direction D: every other page (club, events, services, visit, about, team, journal, cart, forms, 404, age gate) ---------- */
.banner { margin-top: 24px; }
.banner img { animation: d-settle 2.4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .banner img { animation: none; } }
.side-nav h4 { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ink); }
.side-nav a { border-bottom-color: var(--line); padding: 8px 0; }
.side-nav a[aria-current="page"] { font-weight: 500; }
.prose h2 { font-weight: 300; }
.prose blockquote:not(.confirm) { border-left: 1px solid var(--accent); font-family: var(--serif); }
.prose th, .cart-table th, .fact dt, .ency-group h3, .team-role, .gift-band h3.band { text-transform: none; letter-spacing: .04em; font-weight: 500; }
.ency-group h3 { font-size: 14px; color: var(--accent); }
.callout { border-radius: 0; border: 0; border-left: 1px solid var(--accent); background: var(--panel); }
/* boxes become thin rules or a panel; square corners and no shadows anywhere but Chaz */
.ev-card, .ask-box, .write-box, .notify-box, .promo-box, .team-card, .media-item, .link-tile, .tile-photo, .gift-idea, .critic-card,
.enquiry, .form fieldset, .summary, .terms-box, .id-banner, .promo, .join-block, .cal-grid, .cal-step, .cal-ev, .slots label, .ac-list, .tier,
.sales-check, .confirm-note, .review-box, blockquote.confirm, .addf-menu, .map-frame, .storefront img, .ev-feature .ev-photo img, .lightbox img,
.team-photo, .banner, .ev-date, .badge-best, .badge-out, .src, .demo-stamp { border-radius: 0 !important; box-shadow: none !important; }
.ev-card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
.ev-date { background: var(--accent); }
.ev-festival .ev-date { background: var(--band); }
.ev-day { font-family: var(--serif); font-weight: 400; }
.ev-body h3 { font-weight: 400; }
.ev-feature { border-top-color: var(--line); }
.ask-box { border-color: var(--line); background: transparent; }
.ask-box > summary { color: var(--accent); font-weight: 500; }
.write-box { background: var(--panel); border: 0; padding: 40px; }
.write-box h2 { font-weight: 300; }
.team-card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
.team-card h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.team-role { color: var(--gold-text); font-size: 13px; }
.media-item { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 16px 0; }
.link-tile { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 18px 0; }
.link-tile b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.link-tile:hover { border-color: var(--accent); }
.tile-photo b { padding-inline: 0; } .tile-photo span { padding-inline: 0; }
.tile-photo { border: 0; }
.tile-photo img { transition: transform .9s var(--ease); }
.tile-photo:hover img { transform: scale(1.03); }
.tile-photo { overflow: hidden; }
.gift-idea { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 12px 0; }
.promo { background: var(--panel); border: 0; padding: 32px 36px; }
.promo h2 { font-weight: 300; }
.join-block { background: var(--band); }
.join-block .join-btn { background: var(--ground); border-color: var(--ground); color: var(--band); }
.join-block .join-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--band); }
.tier .big-price { font-family: var(--serif); font-weight: 400; }
/* forms */
.enquiry, .form fieldset { background: transparent; border: 1px solid var(--line); }
.form legend { font-family: var(--serif); font-weight: 400; }
.enquiry label, .form label { font-weight: 500; color: var(--ink-2); }
.enquiry input, .enquiry textarea, .form input, .form select, .form textarea, .live-form input, .live-form textarea, .live-form select, .notify-form input {
  border-radius: 0; border: 1px solid var(--gold-ui); background: var(--ground); color: var(--ink); padding: 12px 14px; }
.enquiry input:focus, .enquiry textarea:focus, .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 1px; }
/* the cart */
.cart-table td, .cart-table th { border-bottom-color: var(--line); }
.summary { background: var(--panel); border: 0; padding: 28px; }
.summary .total { border-top-color: var(--line); font-weight: 500; }
/* calendar */
.cal-grid { border-color: var(--line); background: var(--ground); }
.cal-grid th { background: var(--panel); border-bottom-color: var(--line); }
.cal-day { border-color: var(--line); }
.cal-now { font-family: var(--serif); font-weight: 400; }
.cal-ev { border-left: 2px solid var(--accent); background: var(--panel); }
.cal-ev:hover { background: var(--accent); color: var(--ground); }
/* the age gate: the Burgundy Room's colour, a quiet serif question */
.age-gate { background: var(--band); color: var(--ground); }
.age-gate .eyebrow { color: var(--gold); text-transform: none; }
.age-gate h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 52px); color: var(--ground); }
.age-gate p { color: var(--blush); }
.gate-logo { color: var(--ground); }
/* pop-ups: the follow box, the club pop-up, the photo zoom */
.notify-pop, .promo-pop { background: rgba(43, 38, 34, .55); }
.notify-box, .promo-box { background: var(--ground); border-top: 0; }
.promo-box h2, .notify-box h2 { font-weight: 300; }
.lightbox { background: rgba(43, 38, 34, .9); }
.lightbox img { background: var(--backdrop); }
/* 404 and the "no longer in stock" pages use the page head and prose above */

/* ---------- direction D: Chaz. The one element with a shadow. A 64 px burgundy bubble with a cream icon, fixed bottom
   right on every page, inside the phone's safe area; a thin cream ring and a soft shadow keep it clear on the light
   ground and on the dark Burgundy band alike. The panel follows the system: square, ruled, ink header. ---------- */
.somm-launch { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 64px; height: 64px; background: var(--accent); color: var(--ground); border: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ground), 0 10px 30px rgba(43, 38, 34, .32), 0 2px 6px rgba(43, 38, 34, .18);
  font: 500 10.5px/1.1 var(--sans); letter-spacing: .02em; transition: transform .4s var(--ease), background .3s; }
.somm-launch:hover { background: var(--band); transform: translateY(-2px); }
.somm-launch:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.somm-launch .somm-dot { top: 4px; right: 4px; border-color: var(--ground); }
.somm-hello { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 1px solid var(--line); background: var(--ground);
  box-shadow: 0 14px 40px rgba(43, 38, 34, .22); }
.somm-hello::after { background: var(--ground); border-color: var(--line); }
.somm-hello-open { border-radius: 0; font-family: var(--sans); }
.somm-hello-x { border-radius: 0; }
.somm-hello-x:hover { background: var(--panel); }
.somm-panel { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 1px solid var(--line); background: var(--ground);
  box-shadow: 0 24px 64px rgba(43, 38, 34, .28); }
.somm-panel header { background: var(--dark); color: var(--ground); padding: 16px 18px; }
.somm-panel header b { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.somm-panel header span { color: var(--dark-ink); }
.somm-new, .somm-new-inline, .somm-size, .somm-close { border-radius: 0; }
.somm-new { border-color: rgba(217, 185, 122, .6); color: var(--ground); }
.somm-new:hover, .somm-size:hover, .somm-close:hover { color: var(--gold); border-color: var(--gold); }
.somm-new-inline { background: var(--ink); color: var(--ground); }
.somm-new-inline:hover { background: var(--accent); color: var(--ground); }
.somm-msg { border-radius: 0; }
.somm-msg.user { background: var(--accent-soft); }
.somm-msg.bot { background: var(--panel); }
.somm-card { border-radius: 0; border-color: var(--line); background: var(--ground); }
.somm-card:hover { border-color: var(--ink); }
.somm-card img, .somm-noimg { border-radius: 0; background: var(--backdrop); }
.somm-card b { font-family: var(--serif); font-weight: 400; font-size: 16px; }
.somm-add, .somm-link a { border-radius: 0; background: var(--ink); color: var(--ground); font-weight: 500; }
.somm-add:hover, .somm-link a:hover { background: var(--accent); filter: none; }
.somm-chips button { border-radius: 0; border-color: var(--line); color: var(--ink-2); }
.somm-chips button:hover { border-color: var(--ink); }
.somm-form { border-top-color: var(--line); }
.somm-form input { border-radius: 0; border-color: var(--gold-ui); background: var(--ground); }
.somm-form button { border-radius: 0; background: var(--ink); color: var(--ground); font-weight: 500; }
.somm-form button:hover { background: var(--accent); }
@media (max-width: 480px) {
  .somm-launch { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .somm-hello { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .somm-panel { right: 8px; left: 8px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .somm-launch { transition: none; } .somm-launch:hover { transform: none; } }

/* Chaz on a phone (under 768 px; 12 October 2026): a full-height sheet sized to what is visible (somm.js sets --vvh and
   --vvt from the visual viewport, so the input sits just above the keyboard; 100dvh where that is not known), inside the
   safe areas, with the input pinned to the bottom. While it is open the bubble and its hello are hidden and the page
   behind is locked (somm-locked). A desktop keeps the floating panel above. */
@media (max-width: 767px) {
  .somm-panel, .somm.is-large .somm-panel { position: fixed; top: var(--vvt, 0px); right: 0; bottom: auto; left: 0; width: auto;
    height: var(--vvh, 100dvh); max-height: none; transform: none; border: 0; box-shadow: none; z-index: 70;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .somm-form { order: 2; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ground); }
  .somm-foot { order: 1; padding-top: 8px; }
  .somm.is-open .somm-launch, .somm.is-open .somm-hello { display: none; }
  .somm-size { display: none; }
}
/* Room under the bubble on phones (12 October 2026): the page ends with the bubble's height plus 16 px of space, so the
   last line of any section can scroll clear of it. The bubble stays 64 px. */
@media (max-width: 767px) { body { padding-bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0px)); } }

/* Staff pick on a wine's own page (Max, 12 October 2026): the staff member's words, set apart from the bottle facts */
.staff-note { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 22px 0; }
.staff-note blockquote { font-family: var(--serif); font-size: 19px; line-height: 1.4; margin: 6px 0 8px; }

/* Kits (Max, 13 October 2026) */
.kit-list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kit-items { list-style: none; padding: 0; margin: 10px 0; }
.kit-items li { display: flex; gap: 8px; justify-content: space-between; border-top: 1px solid var(--line); padding: 8px 0; }
.kit-total { font-weight: 500; }

/* Cocktails (Max, 13 October 2026) */
.cocktail-list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cocktail h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 8px; }
.cocktail-ings { list-style: none; padding: 0; margin: 8px 0 12px; }
.cocktail-ings li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; border-top: 1px solid var(--line); padding: 8px 0; }
.cocktail-ings li > span:first-child { min-width: 9em; }
.cocktail-ings .kit-price { margin-left: auto; }

/* The Journal's lead card: the Vintage Map (13 October 2026) */
.lead-tiles { margin: 4px 0 8px; grid-template-columns: minmax(0, 520px); }

/* The Journal submenu: Journal, Events, Vintage Map (13 October 2026). On a wide screen it opens on hover or keyboard
   focus (or a first tap on a touch screen, site.js); in the phone menu its links are listed under Journal. Square, no shadow. */
.nav-group { position: relative; display: inline-block; }
.nav-sub { display: none; position: absolute; top: 100%; left: -16px; z-index: 60; min-width: 180px; background: var(--ground); border: 1px solid var(--line); padding: 6px 0; }
.nav-sub a { display: block; padding: 8px 16px; white-space: nowrap; border-bottom: 0; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub, .nav-group.open .nav-sub { display: block; }
.cal-plain { cursor: default; }
.ev-earlier { margin: 10px 0 0; font-size: 15px; }
@media (max-width: 1180px) {
  .nav-group { display: block; }
  .nav-group > .nav-parent { display: block; }
  .nav-sub { display: block; position: static; min-width: 0; border: 0; padding: 0; background: none; }
  .nav-sub a { padding: 11px 0 11px 18px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav-sub a:first-child { display: none; }
}

/* Brett's credential mark (13 October 2026): a seal of the shop's own design, text and simple shapes only, in the
   palette's burgundy and gold; the words beside it in ink and dark gold on the light ground. */
.cred { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.cred:hover .cred-name, .cred:focus-visible .cred-name { color: var(--accent); }
.cred-seal { flex: none; display: block; width: 92px; height: 92px; }
.cred-disc { fill: var(--accent); }
.cred-ring { fill: none; stroke: var(--gold); }
.cred-gold { fill: var(--gold); }
.cred-arc { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 2.6px; }
.cred-mid { font-family: var(--serif); font-size: 19.5px; font-weight: 500; }
.cred-nb { white-space: nowrap; }
.cred-text { display: flex; flex-direction: column; line-height: 1.3; }
.cred-name { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.cred-title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-top: 2px; }
.cred-src { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.cred-lg .cred-seal { width: 128px; height: 128px; }
.cred-lg .cred-name { font-size: 24px; }
.cred-sm { gap: 10px; margin: 6px 0 14px; }
.cred-sm .cred-seal { width: 56px; height: 56px; }
.cred-sm .cred-name { font-size: 16px; }
.cred-sm .cred-title { font-size: 11.5px; }
.site-footer .cred, .site-footer .cred:hover { text-decoration: none; }
.site-footer .cred .cred-name { color: var(--ink); }
.hero-cred { margin: 6px 0 18px; }
.about-cred { margin: 0 0 18px; }
/* The band about Brett, under the hero: four facts, two links, the newest press */
.home-brett { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); padding-block: 44px; }
.brett-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.brett-about h2 { margin-top: 4px; }
.brett-facts { list-style: none; padding: 0; margin: 6px 0 20px; }
.brett-facts li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); }
.brett-facts li:first-child { border-top: 1px solid var(--line); }
.news-h { margin: 6px 0 10px; color: var(--ink); }
.news-list { list-style: none; padding: 0; margin: 0 0 14px; }
.news-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.news-meta { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.news-list a { font-family: var(--serif); font-size: 18px; color: var(--ink); text-decoration: none; }
.news-list a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 860px) {
  .brett-grid { grid-template-columns: 1fr; }
  .home-brett { padding-block: 32px; }
}
@media (max-width: 520px) {
  .cred-seal { width: 76px; height: 76px; }
  .cred-lg .cred-seal { width: 96px; height: 96px; }
  .cred-lg .cred-name { font-size: 20px; }
  .cred-src { font-size: 13px; }
  .hero-cred .cred-text { padding-right: 70px; }   /* clear of Chaz's button, which floats bottom right */
  .hero-cred .cred-src { display: none; }          /* the link and its label still say where it goes */
}

/* ================================================================== Sections (Max, 14 October 2026)
   "When a visitor scrolls into a new homepage section, it must be obvious": every section starts on a thin rule, the
   sections alternate the light ground and the panel tone, and the section headings are a size larger, with a short
   rule before the small label. The same on the Journal (bands), Services and About (their merged sections). Square,
   no shadows, as the rest of direction D. */
.home-sec { background: var(--ground); border-top: 1px solid var(--line); }
.home-sec.tone { background: var(--panel); }
.burgundy-band + .home-sec, .home-club + .home-sec { border-top: 0; }
.home-sec .light-h, .home-sec .story-h { font-size: clamp(32px, 4.2vw, 50px); }
.home-sec .eyebrow, .page-band .j-kicker { display: flex; align-items: center; gap: 12px; }
.home-sec .eyebrow::before { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; }
.home-sec .reserve-line { border-top: 0; }
.home-sec .section-head { margin-bottom: 36px; }

/* Staff picks read like shelf talkers (Max, 14 October 2026): the bottle large, then the wine, the note in quotes and
   who picked it, on a card with the shop's burgundy along the top. */
.staff-picks .pick-rail { grid-auto-columns: minmax(230px, 1fr); gap: 24px; padding-bottom: 16px; }
.staff-picks .pick-card { display: flex; flex-direction: column; background: var(--ground); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: 0; }
.staff-picks .pick-card .pick-shot { aspect-ratio: 4 / 5; margin: 0; border: 0; border-bottom: 1px solid var(--line); background: #fff; }
.staff-picks .pick-card .pick-shot img { padding: 18px; }
.pick-talker { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 22px 22px; }
.pick-talker h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; }
.pick-talker h3 a { text-decoration: none; }
.pick-note { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18.5px; line-height: 1.5; color: var(--ink); }
.pick-note p { margin: 0; }
.pick-by { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.pick-date { margin: -6px 0 0; }
@media (max-width: 620px) { .staff-picks .pick-rail { grid-auto-columns: 86%; gap: 16px; } .pick-note { font-size: 17.5px; } }

/* Featured (Max, 14 October 2026): three reds, three whites, three sparkling, our deepest stock under $30. A column
   each on a wide screen, one under the other on a phone; each card is a short row, bottle on the left. */
.feat-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.feat-h { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 22px; font-weight: 400; }
.feat-cards { display: grid; gap: 22px; }
.feat-cards .wine-card { display: block; position: relative; min-height: 146px; padding-left: 120px; }
.feat-cards .wine-card .shelf-link { display: block; }
.feat-cards .wine-card .shot { position: absolute; left: 0; top: 0; width: 104px; margin: 0; aspect-ratio: 3 / 4; }
.feat-cards .wine-card .shot img { padding: 8px; }
.feat-cards .wine-card .w-name { display: block; font-size: 17px; }
.feat-cards .wine-card .w-meta, .feat-cards .wine-card .w-producer { display: block; }
.feat-cards .w-note { display: none; }
.feat-cards .w-buy { margin-top: 6px; }
.feat-cards .badge-best { display: none; }   /* the badge sits on the photo, which is small here; Top sellers shows it */
@media (max-width: 900px) { .feat-cols { grid-template-columns: 1fr; } }

/* The Journal page (Max, 14 October 2026): plain sections, each a band with its heading and a short intro, then cards */
.jump { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 40px; }
.jump a { font-size: 14.5px; text-decoration: none; border: 1px solid var(--line); padding: 6px 12px; color: var(--ink); background: var(--ground); }
.jump a:hover { border-color: var(--accent); color: var(--accent); }
/* the Journal's filter buttons and its one Encyclopedia line (Max, 14 October 2026, Journal and Menu) */
.j-filter { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
.j-filter a { font-size: 14.5px; text-decoration: none; border: 1px solid var(--line); padding: 6px 12px; color: var(--ink); background: var(--ground); }
.j-filter a:hover, .j-filter a[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.j-more { margin: 0 0 40px; color: var(--ink-2); }
section.page-band[hidden] { display: none; }
.page-band { border-top: 1px solid var(--line); background: var(--ground); padding-block: clamp(48px, 6vw, 80px); scroll-margin-top: 80px; }
.page-band.tone { background: var(--panel); }
.band-head { max-width: 720px; margin-bottom: 28px; }
.band-head h2 { margin: 0 0 10px; font-size: clamp(32px, 4.2vw, 48px); }
.band-intro { margin: 0; color: var(--muted); font-size: 17px; }
.j-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.j-cards.wide { grid-template-columns: minmax(0, 560px); }
.j-cards.compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.j-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--ground); border: 1px solid var(--line); scroll-margin-top: 90px; }
.page-band:not(.tone) .j-card { background: #fff; }
.j-card:hover { border-color: var(--accent); color: var(--ink); }
.j-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.j-text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.j-kicker { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; color: var(--accent); }
.j-card b { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.25; }
.j-line { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.j-cards.wide .j-card { border-left: 4px solid var(--accent); }
.j-cards.wide .j-card b { font-family: var(--sans); font-weight: 500; font-size: 18px; }

/* Services and About: each merged section starts on a rule, with a larger heading; every other one on the panel tone */
.prose > .merged-section { padding-block: 8px 36px; }
.prose > .merged-section + .merged-section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 40px; }
.prose > .merged-section > h2:first-child { margin-top: 0; font-size: clamp(30px, 3.8vw, 42px); }
.prose > .merged-section:nth-of-type(even) { background: var(--panel); margin-inline: -28px; padding-inline: 28px; border-top-color: transparent; }
@media (max-width: 720px) { .prose > .merged-section:nth-of-type(even) { margin-inline: -16px; padding-inline: 16px; } }

/* the top bar is the pickup policy's link (Max, 14 October 2026: nothing important only in the footer) */
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }

/* awards list (14 October 2026) */
.award-list{list-style:none;padding:0;margin:.5rem 0 0}
.award-list li{padding:.35rem 0;border-bottom:1px solid var(--line, #e4ddd2)}
.award-list li:last-child{border-bottom:0}

/* phone fixes from the click test (15 October 2026): cart Total column fits, Ask Chaz never hides the last line */
@media (max-width: 640px) {
  .cart-table th:nth-child(3), .cart-table td:nth-child(3) { display: none; }
  .cart-table td, .cart-table th { padding: 10px 4px; }
  .somm-launch { width: 54px; height: 54px; right: 12px; bottom: 12px; font-size: 10px; }
  body { padding-bottom: 76px; }
}

/* gift card, your own amount (15 October 2026) */
.gc-custom .gcx-input { width: 100%; padding: 10px; font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.gc-custom .gcx-msg { margin: 0; }

/* Gift card "Your amount" tile (15 October 2026): two columns wide, so the heading fits on one line and the box shows its whole hint; box and button side by side. */
.gc-custom { grid-column: span 2; grid-template-columns: 1fr auto; align-items: center; }
.gc-custom .gc-value, .gc-custom .gcx-msg { grid-column: 1 / -1; }
.gc-custom .btn { width: auto; }


/* ---------- Look fixes (Max, 16 October 2026, 2:28 AM: "fix all of these") ---------- */
/* 2: a wider page on a big screen, and four bottles to a row in the shop */
:root { --wrap: 1560px; }
@media (min-width: 1100px) { .shop-layout .wine-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 900px) and (max-width: 1099px) { .shop-layout .wine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 3: one heading font everywhere: the serif of the wordmark and the wine names */
h1, h2, h3, .light-h, .band-h, .room-h, .story-h, .wine-name, .tc-h { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
/* 4: sections settle in quickly and lightly instead of fading up from blank */
html.js [data-rise] { opacity: .001; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }


/* ---------- Homepage hero and badge (Max, 16 October 2026, 3:26 AM) ---------- */
.hero-placeholder { width: 100%; max-width: 520px; aspect-ratio: 4 / 5; background: #CFCBC3; color: #4A443D; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-family: var(--sans); font-size: 18px; letter-spacing: .02em; }
.cred-seal.cred-badge { width: auto; height: 92px; object-fit: contain; }
.cred-lg .cred-seal.cred-badge { width: auto; height: 128px; }
.cred-sm .cred-seal.cred-badge { width: auto; height: 56px; }
@media (max-width: 720px) { .cred-seal.cred-badge { height: 76px; } .cred-lg .cred-seal.cred-badge { height: 96px; } }

/* ---------- The Burgundy tab (Max, 16 October 2026): its own look, burgundy and gold ---------- */
.bg-hero { background: radial-gradient(120% 140% at 85% 0%, #7A1A2C 0%, var(--band) 55%, #2A060D 100%); border-bottom: 3px solid var(--gold); }
.bg-hero .band-h { font-size: clamp(56px, 8vw, 104px); letter-spacing: -.01em; }
.bg-lede { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.45; max-width: 34ch; margin: 18px 0 0; }
.bg-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bg-jump a { color: var(--ground); border: 1px solid var(--gold); padding: 9px 14px; text-decoration: none; font-size: 14px; letter-spacing: .02em; }
.bg-jump a:hover { background: var(--gold); color: var(--band); }

.bg-guide { background: var(--ground); padding-block: 88px 72px; }
.bg-guide-head { max-width: 760px; margin-bottom: 40px; }
.bg-guide-head h2 { margin: 6px 0 10px; }
.bg-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.bg-step { position: relative; background: #FFFDF7; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 34px 30px 26px 30px; }
.bg-step-wide { grid-column: 1 / -1; }
.bg-step h3 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 30px); color: var(--accent); }
.bg-num { position: absolute; top: -20px; right: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--band); color: var(--gold); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; }
.bg-areas { margin: 10px 0 0; padding-left: 18px; }
.bg-areas li { margin: 0 0 8px; }
.bg-src { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.bg-src a { color: var(--gold-text); }
.bg-pyramid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; justify-items: center; }
.bg-pyramid li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 14px 20px; color: var(--ground); }
.bg-pyramid b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--gold); }
.bg-pyramid span { font-size: 15px; line-height: 1.45; }
.lv-gc { width: 64%; background: #2A060D; }
.lv-pc { width: 76%; background: var(--band); }
.lv-vi { width: 88%; background: var(--accent); }
.lv-re { width: 100%; background: #8E3341; }
.bg-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.bg-label { background: #FBF5E6; border: 1px solid #CDBB8C; outline: 1px solid #CDBB8C; outline-offset: -6px; padding: 22px 12px; text-align: center; display: flex; flex-direction: column; gap: 8px; min-height: 170px; justify-content: center; }
.bg-label-lv { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.bg-label-name { font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--ink); }
.bg-label-note { font-size: 12.5px; color: var(--muted); font-style: italic; }
.bg-label-gc { background: var(--band); border-color: var(--gold); outline-color: var(--gold); }
.bg-label-gc .bg-label-name { color: var(--gold); font-size: 26px; }
.bg-label-gc .bg-label-lv, .bg-label-gc .bg-label-note { color: var(--ground); }
.bg-tips { margin-top: 32px; background: var(--panel); border-left: 3px solid var(--gold); padding: 26px 30px; }
.bg-tips h3 { margin: 0 0 10px; color: var(--accent); }

.bg-festival { background: linear-gradient(160deg, var(--band) 0%, #2A060D 100%); color: var(--ground); padding-block: 88px; border-block: 3px solid var(--gold); }
.bg-festival h2 { color: var(--ground); margin: 6px 0 16px; font-size: clamp(34px, 4.2vw, 52px); }
.bg-festival a:not(.btn) { color: var(--gold); }
.bg-fest-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.bg-fest-list ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(217,185,122,.4); }
.bg-fest-list li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(217,185,122,.4); }
.bg-fest-list b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--gold); }
.bg-fest-list span { font-size: 14.5px; color: var(--dark-ink); }

.bg-wines { padding-block: 80px 40px; }
.bg-wines-head { max-width: 900px; margin-bottom: 18px; }
.bg-wines-head h2 { margin: 6px 0 8px; }
.bg-chips .chip { color: var(--ink); border-color: var(--gold-ui); }
.bg-chips .chip[aria-pressed="true"] { background: var(--accent); color: var(--ground); border-color: var(--accent); }

@media (max-width: 860px) {
  .bg-steps, .bg-fest-grid { grid-template-columns: 1fr; }
  .bg-labels { grid-template-columns: 1fr; }
  .bg-pyramid li { grid-template-columns: 1fr; gap: 4px; width: 100% !important; }
  .bg-guide, .bg-festival { padding-block: 56px; }
}

/* Chaz's picture is the chat button, bigger, with his hello beside it (Max, 16 October 2026) */
.somm-launch { width: 84px; height: 84px; padding: 0; overflow: visible; background: #fff; }
.somm-launch .somm-face { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.somm-launch .somm-dot { top: 4px; right: 4px; width: 14px; height: 14px; z-index: 1; }
.somm-launch:hover { background: #fff; transform: translateY(-2px); }
.somm-hello { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
.somm-hello::after { right: 34px; }
@media (min-width: 768px) { .somm-panel { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 480px) { .somm-launch { width: 72px; height: 72px; } .somm-hello { bottom: 96px; } }

/* Instagram and Facebook glyphs in the footer (Max, 16 October 2026): one solid colour, 29 px, half-size clear space */
.social-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.social-link { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; }
.social-link .social-ico { flex: none; width: 29px; height: 29px; }
.social-link:hover span { text-decoration: underline; }