/* ==========================================================================
   FineVines — production design system
   "Pouring elegance with a sommelier's touch."

   The bordeaux / brass / parchment / cork / ink token scales and the
   display / body / ui type stack are ported from the approved proposal's
   design language (.superpowers/sdd/proposal-design.css, extracted from the
   client-approved proposal). Fonts are self-hosted from assets/fonts/
   (extracted by tools/extractfonts) — no external font CDN.
   ========================================================================== */

/* ---- Self-hosted webfonts -------------------------------------------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Archivo-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Archivo-600.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Archivo-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/CormorantGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/CormorantGaramond-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/CormorantGaramond-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/CormorantGaramond-600italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/EBGaramond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/EBGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/EBGaramond-400italic.woff2') format('woff2'); }

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Bordeaux */
  --bordeaux-950: #2a0a13;
  --bordeaux-900: #3d0e1c;
  --bordeaux-800: #531427;
  --bordeaux-700: #6b1630;
  --bordeaux-600: #862240;
  /* Brass */
  --brass-700: #8a6a2f;
  --brass-600: #a9853d;
  --brass-500: #c2a14e;
  --brass-300: #ddc489;
  --brass-100: #f1e6c9;
  /* Parchment */
  --parchment-50: #faf6ee;
  --parchment-100: #f4ece0;
  --parchment-200: #ece0cd;
  /* Cork */
  --cork-400: #c4ad88;
  --cork-600: #87714f;
  /* Ink */
  --ink-900: #1c1410;
  --ink-800: #2c211a;
  --ink-700: #43352a;
  --ink-500: #6e5d4e;
  --ink-300: #9c8c7c;
  /* Accents */
  --vineyard-700: #46582f;
  --olive-500: #a3a432;
  --olive-600: #909020;
  --magenta-500: #9c2a68;
  --olive-tag-bg: #e7ecd8;

  /* Semantic aliases */
  --wine: var(--bordeaux-700);
  --wine-dark: var(--bordeaux-900);
  --wine-deepest: var(--bordeaux-950);
  --cream: var(--parchment-50);
  --cream-alt: var(--parchment-100);
  --line: var(--parchment-200);
  --gold: var(--brass-500);
  --gold-dark: var(--brass-600);
  --gold-light: var(--brass-100);
  --ink: var(--ink-800);
  --ink-strong: var(--ink-900);
  --ink-soft: var(--ink-500);

  /* Semantic aliases for the portfolio filter rail. The rail was designed
     against the Fine Vines design-system tokens (docs/Portfolio filter sidebar
     at scale/), which name text and border ROLES rather than raw scale steps.
     Mapping them once here keeps that vocabulary without a second palette. */
  --cork-300: #d8c6a8;
  --cork-500: #a98f68;
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-300);
  --border-hairline: var(--parchment-200);
  --border-default: var(--cork-300);
  --border-strong: var(--cork-500);

  --serif-display: 'Cormorant Garamond', 'Hoefler Text', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --serif-text: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --measure: 64ch;
  --radius: 12px;
  --hero-band: radial-gradient(120% 150% at 82% -18%, var(--bordeaux-700) 0%, var(--bordeaux-800) 32%, var(--bordeaux-950) 84%);
}

/* ---- Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--wine); text-decoration-color: var(--brass-300); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
ul, ol { padding-left: 1.2em; }

h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 600; text-wrap: balance; line-height: 1.08; margin: 0 0 .5em; color: var(--ink-strong); }
h1 { font-size: clamp(40px, 6.2vw, 68px); letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.005em; color: var(--bordeaux-800); }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
p { margin: 0 0 18px; max-width: var(--measure); }
strong { color: var(--ink-strong); font-weight: 600; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12.5px;
  color: var(--gold-dark);
  margin: 0 0 14px;
}
.lede { font-family: var(--serif-text); font-size: 22px; color: var(--ink-700); max-width: 58ch; line-height: 1.5; }
.rule-gold { height: 1px; border: 0; background: linear-gradient(90deg, var(--gold), transparent); margin: 34px 0; }

/* ---- Layout ----------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 28px; }
main { display: block; }
section.wrap { padding-block: 56px 68px; }
section.wrap + section.wrap { border-top: 1px solid var(--line); padding-top: 60px; }

/* ---- Header / nav ----------------------------------------------------- */
.site-header {
  background: var(--parchment-50);
  border-bottom: 1px solid var(--parchment-200);
  box-shadow: 0 1px 0 rgba(194, 161, 78, .35);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.brand img { width: 172px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-700);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--wine); }
.site-nav a[aria-current="page"] { color: var(--wine); border-bottom-color: var(--gold); }
.site-nav .btn-cta {
  margin-left: 6px;
  border-bottom: 0;
  padding: 11px 20px;
  /* High contrast: solid bordeaux with cream text. The explicit color here
     also wins over `.site-nav a { color: var(--ink-700) }` (which is more
     specific than the plain `.btn-cta` rule), fixing the dark-on-dark CTA. */
  background: var(--wine);
  color: var(--parchment-50);
}
.site-nav .btn-cta:hover,
.site-nav .btn-cta:focus-visible { background: var(--bordeaux-800); color: #fff; }

/* Mobile nav toggle (hamburger) — hidden on wide screens, shown at md and
   below (see the 768px breakpoint). */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--parchment-200);
  border-radius: 8px;
  background: var(--parchment-50);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-700);
  border-radius: 2px;
  position: relative;
}
.nav-toggle-bars::before { position: absolute; top: -7px; }
.nav-toggle-bars::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---- Buttons ---------------------------------------------------------- */
.btn { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 13px 24px; border-radius: 30px; text-decoration: none; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.btn + .btn { margin-left: 10px; }
.btn-primary { background: var(--wine); color: #fff; box-shadow: 0 12px 26px -16px rgba(107, 22, 48, .8); }
.btn-primary:hover { background: var(--bordeaux-800); }
.btn-ghost { background: transparent; border: 1px solid var(--gold); color: var(--wine); }
.btn-ghost:hover { background: var(--gold-light); }
.btn-cta { background: var(--wine); color: #fff; border-radius: 4px; font-size: 11.5px; letter-spacing: .1em; box-shadow: 0 10px 22px -14px rgba(107, 22, 48, .85); }
.btn-cta:hover { background: var(--bordeaux-800); color: #fff; }

/* ---- Section hero band (portfolio / news / about / wine / contact) ---- */
.page-hero {
  background: var(--hero-band);
  color: var(--parchment-100);
  border-bottom: 1px solid var(--bordeaux-950);
}
.page-hero .wrap { padding-top: 62px; padding-bottom: 66px; }
.page-hero .eyebrow { color: var(--brass-300); }
.page-hero h1 { color: #fff; max-width: 20ch; margin-bottom: .28em; }
.page-hero .lede { color: var(--brass-100); max-width: 60ch; }
.page-hero .hero-actions { margin-top: 26px; }
.page-hero .btn-ghost { border-color: var(--brass-300); color: var(--brass-100); }
.page-hero .btn-ghost:hover { background: rgba(241, 230, 201, .12); color: #fff; }

/* ---- Home hero -------------------------------------------------------- */
.home-hero { background: var(--hero-band); color: var(--parchment-100); border-bottom: 1px solid var(--bordeaux-950); overflow: hidden; }
.home-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
  padding-top: 64px;
  padding-bottom: 70px;
}
.home-hero .eyebrow { color: var(--brass-300); }
.home-hero h1 { color: #fff; max-width: 16ch; }
.home-hero .lede { color: var(--brass-100); max-width: 56ch; margin-bottom: 30px; }
.home-hero .hero-actions { margin: 0; }
.home-hero .btn-ghost { border-color: var(--brass-300); color: var(--brass-100); }
.home-hero .btn-ghost:hover { background: rgba(241, 230, 201, .12); color: #fff; }
.home-hero-media {
  position: relative;
  min-height: 460px;
  max-height: 590px;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(221, 196, 137, .42);
  border-radius: 2px;
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .72);
}
.home-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 8px rgba(42, 10, 19, .16);
  pointer-events: none;
}
.home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
}

/* ---- Region row (home) ------------------------------------------------ */
.region-row { font-family: var(--serif-display); font-size: 24px; color: var(--bordeaux-800); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-top: 14px; }
.region-row a { text-decoration: none; color: var(--bordeaux-800); }
.region-row a:hover { color: var(--wine); text-decoration: underline; text-decoration-color: var(--gold); }
.region-row .sep { color: var(--brass-500); }

/* ---- Homepage portfolio / producer features -------------------------- */
.home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.home-section-heading h2 { margin-bottom: 0; }
.text-link {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wine);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gold);
}
.text-link:hover { color: var(--bordeaux-800); border-bottom-color: var(--wine); }
.wine-grid.view-cards.home-wine-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-wine-grid .wine-card .thumb { height: 310px; }
.home-wine-grid .wine-card h3 { font-size: 18px; }
.producer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.producer-card {
  position: relative;
  display: flex;
  min-height: 146px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: var(--bordeaux-950);
  border: 1px solid var(--bordeaux-800);
  color: var(--parchment-50);
  text-decoration: none;
  box-shadow: 0 20px 34px -28px rgba(42, 10, 19, .75);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.producer-card:hover {
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 24px 42px -26px rgba(42, 10, 19, .8);
}
.producer-name {
  display: block;
  padding-right: 28px;
  font-family: var(--serif-display);
  font-size: 24px;
  line-height: 1.05;
}
.producer-meta {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-300);
}
.producer-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--gold);
  font-size: 22px;
}

/* ---- Portfolio: facet sidebar + wine grid ----------------------------- */
.portfolio-layout { display: grid; grid-template-columns: 288px 1fr; gap: 44px; align-items: start; }
/* The rail sits directly on the parchment page — no card chrome. (The ≤1024px
   block below re-surfaces it as an off-canvas drawer.) */
.facets { position: sticky; top: 24px; }

/* Rail header: "Refine" + the live result count (portfolio.js keeps the count
   in sync with the filters). The ✕ exists only for the mobile drawer. */
.facets-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-hairline); }
.facets-title { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-strong); }
.facets-count { font-family: var(--serif-text); font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.facets-close { display: none; }

/* Search inputs share one look: a quiet magnifier, white field, square corners.
   Wraps both the portfolio-wide search box and each group's filter-within. */
.facet-search { position: relative; }
.facet-search::before { content: "\2315"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--cork-500); font-size: 15px; line-height: 1; pointer-events: none; }
.facets input[type=search] { width: 100%; height: 40px; font-family: var(--sans); font-size: 14px; padding: 0 12px 0 30px; border: 1px solid var(--border-default); border-radius: 2px; background: #fff; color: var(--text-body); }
.facets input[type=search]:focus { border-color: var(--gold); }
.facets input[type=search]:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; }
.facets > .facet-search { margin-top: 14px; }
/* ---- Portfolio filter rail --------------------------------------------
   Collapsible groups, each showing its twelve highest-count values with a
   filter box to reach the rest. The previous rail printed all 577 values flat
   and expanded. Value rows are re-rendered by portfolio.js on every query, so
   every selector here must work against freshly-created DOM — nothing may
   depend on load-time state. */

/* Selected-value summary. Hidden until portfolio.js puts a chip in it. */
.facet-chips { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.facet-chips[hidden] { display: none; }
.facet-chips-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.facet-chips-title { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
.facet-clear { all: unset; cursor: pointer; font-family: var(--serif-text); font-size: 13px; color: var(--text-muted); }
.facet-clear:hover { color: var(--wine); box-shadow: inset 0 -1px 0 var(--gold); }
.facet-clear:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.facet-chips-list { display: flex; flex-wrap: wrap; gap: 6px; }
.facet-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--wine); color: var(--parchment-50); border: none; border-radius: 2px; padding: 5px 8px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .02em; }
.facet-chip:hover { background: var(--bordeaux-800); }
.facet-chip:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.facet-chip-x { color: var(--brass-300); font-size: 11px; }

/* Group */
.facet-group { border-top: 1px solid var(--line); margin: 0; padding: 13px 0; }
.facet-group summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; padding: 2px 0; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-strong); }
.facet-group summary::-webkit-details-marker { display: none; }
.facet-group summary:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.facet-group.has-selection summary .facet-name { color: var(--wine); }
/* Catalog-wide value count; portfolio.js rewrites it to "still available". */
.facet-total { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Selection badge — how a COLLAPSED group announces that it is filtering. */
.facet-selected { margin-left: auto; font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--parchment-50); background: var(--gold-dark); border-radius: 2px; padding: 2px 5px; }
.facet-selected[hidden] { display: none; }
.facet-group summary::after { content: "\25be"; margin-left: auto; color: var(--gold-dark); font-size: 11px; transition: transform 120ms ease; }
/* With a badge present the caret sits beside it, not pushed to the far edge. */
.facet-selected:not([hidden]) + .facet-name ~ ::after { margin-left: 0; }
.facet-group summary:has(.facet-selected:not([hidden]))::after { margin-left: 0; }
.facet-group[open] summary::after { transform: rotate(180deg); }
.facet-body { padding-top: 11px; }

/* Filter-within-group — sizing/chrome comes from the shared
   `.facets input[type=search]` rule above. */
.facet-body .facet-search { margin-bottom: 9px; }
.facet-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 7px; }
.facet-match { font-family: var(--serif-text); font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.facet-sort { all: unset; cursor: pointer; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--wine); }
.facet-sort:hover { color: var(--bordeaux-800); box-shadow: inset 0 -1px 0 var(--gold); }
.facet-sort:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* Value rows */
.facet-values { display: flex; flex-direction: column; gap: 1px; }
/* Only an expanded or searched list scrolls; at rest twelve rows just sit there. */
.facet-values.is-scrolling { max-height: 296px; overflow-y: auto; padding-right: 4px; }
.facet-values.is-scrolling::-webkit-scrollbar { width: 8px; }
.facet-values.is-scrolling::-webkit-scrollbar-thumb { background: var(--cork-300); border-radius: 4px; }
.facet-values.is-scrolling::-webkit-scrollbar-track { background: transparent; }
.facet-row { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 8px; border-radius: 2px; font-family: var(--serif-text); font-size: 14px; line-height: 1.25; color: var(--text-body); }
.facet-row:hover { background: var(--parchment-100); }
.facet-row.is-checked { background: rgba(194, 161, 78, .14); box-shadow: inset 2px 0 0 var(--gold); color: var(--text-strong); font-weight: 600; }
.facet-row.is-checked:hover { background: rgba(194, 161, 78, .2); }
/* A selected value whose count fell to zero: dimmed, but fully interactive —
   it is the only way to undo that selection from within the rail. */
.facet-row.is-empty { opacity: .42; }
/* The real checkbox stays the focusable, clickable, screen-reader-announced
   control; .facet-box is only its painted stand-in. */
.facet-row input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.facet-box { width: 15px; height: 15px; flex: none; border-radius: 2px; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: var(--parchment-50); transition: all 120ms ease; }
.facet-row.is-checked .facet-box { border-color: var(--wine); background: var(--wine); }
.facet-row.is-checked .facet-box::after { content: "\2713"; }
.facet-row input[type=checkbox]:focus-visible ~ .facet-box { outline: 2px solid var(--wine); outline-offset: 2px; }
.facet-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.facet-row.is-checked .facet-count { color: var(--wine); }

/* Vintage reads as a year grid — every value is four characters wide, so one
   per line would waste the whole rail. */
.facet-values.is-grid { flex-direction: row; flex-wrap: wrap; gap: 5px; }
.facet-values.is-grid .facet-row { width: 66px; box-sizing: border-box; justify-content: center; gap: 6px; padding: 4px 7px; border: 1px solid var(--border-default); font-family: var(--sans); font-size: 12px; }
.facet-values.is-grid .facet-row.is-checked { background: var(--wine); border-color: var(--wine); color: var(--parchment-50); box-shadow: none; }
.facet-values.is-grid .facet-row.is-checked .facet-count { color: var(--brass-300); }
.facet-values.is-grid .facet-box { display: none; }
.facet-values.is-grid .facet-label { flex: none; }

/* Expander & empty state */
.facet-expander { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; margin-top: 9px; padding: 6px 8px; border-top: 1px solid var(--border-hairline); font-family: var(--serif-text); font-size: 13px; color: var(--wine); }
.facet-expander:hover { background: var(--parchment-100); }
.facet-expander:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.facet-expander[hidden] { display: none; }
.facet-empty { font-family: var(--serif-text); font-size: 13px; color: var(--text-muted); margin: 6px 2px 2px; }
.facet-empty[hidden] { display: none; }

/* Drawer footer. Desktop never shows it; the ≤1024px block reveals it. */
.facets-drawer-foot { display: none; }

/* Cards view (default): a responsive grid. `grid-auto-rows: 1fr` sizes every
   implicit row track equally, so cards in the same row share the tallest
   card's height; each <li> grid item stretches (align-items: stretch default)
   and the card fills it (height: 100%). A long producer/wine name therefore
   grows its row-mates rather than truncating — no ellipsis needed. */
.wine-grid { display: grid; gap: 26px; }
.wine-grid.view-cards { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
/* The <li> carries data-slug + [hidden]; it must keep the browser default
   `[hidden]{display:none}`, so NO display rule lives on the <li>. All card
   styling lives on the inner .wine-card <a>. */
.wine-grid > li { list-style: none; }
.wine-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 30px -24px rgba(61, 14, 28, .5);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.wine-card:hover { box-shadow: 0 26px 52px -26px rgba(61, 14, 28, .5); transform: translateY(-4px); border-color: var(--brass-300); }
.wine-card .thumb {
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  background:
    radial-gradient(130% 120% at 50% 0%, var(--parchment-50) 0%, var(--parchment-100) 62%, var(--parchment-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
}
/* multiply melts the stark white rectangle of real product-shot photos into
   the parchment gradient; the dark bottles (SVG or photo) are unaffected. */
.wine-card .thumb img { width: auto; max-width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 18px 24px rgba(42, 10, 19, .28)); }
/* Card body type (matches the design-system WineCard in docs/Portfolio filter
   sidebar at scale/): quiet sans eyebrow, the wine name in the TEXT serif —
   EB Garamond holds its legibility at card sizes where the display face
   (Cormorant) goes thin — vintage de-emphasized, meta + availability in small
   sans. Flex column so the availability line pins to the card's bottom edge
   and reads as one aligned row across the grid. */
.wine-card .body { padding: 16px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
/* brass-700, not gold-dark: at this size the lighter brass reads 3.4:1 on the
   white card — below AA for small text. */
.wine-card .producer { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700); margin: 0; }
.wine-card h3 { font-family: var(--serif-text); font-size: 17px; font-weight: 500; line-height: 1.3; margin: 0; color: var(--text-strong); }
.wine-card h3 .vintage { color: var(--text-muted); font-weight: 400; }
.wine-card .meta { font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em; color: var(--text-muted); line-height: 1.4; }
.wine-card .avail { margin-top: auto; padding-top: 4px; font-family: var(--sans); font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Portfolio toolbar: results count + (mobile Filters button) + Cards|List toggle.
   The count is the results header — display serif, sitting on a hairline. */
.portfolio-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border-hairline); margin-bottom: 20px; }
.portfolio-toolbar #portfolio-count {
  margin: 0;
  font-family: var(--serif-display);
  font-size: 26px;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.portfolio-toolbar-actions { display: inline-flex; align-items: center; gap: 12px; }

/* Off-canvas filter drawer chrome. On desktop the .facets sidebar is static
   and always visible, so the mobile Filters button, drawer header (title + ×),
   and backdrop are all hidden here; the ≤1024px block below turns them on. */
.filters-toggle { display: none; }
.facets-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(42, 10, 19, .5); }
.view-toggle { display: inline-flex; border: 1px solid var(--border-default); border-radius: 2px; overflow: hidden; background: #fff; }
/* 34px inside the wrapper's 1px borders = 36px overall — the same height as
   the sort <select> beside it, so the toolbar reads as one row of controls. */
.view-toggle-btn {
  height: 34px; display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-700); background: transparent; border: 0; padding: 0 16px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border-default); }
.view-toggle-btn:hover { color: var(--wine); }
.view-toggle-btn.is-active { background: var(--wine); color: var(--parchment-50); }
.view-toggle-btn:focus-visible { outline: 2px solid var(--wine); outline-offset: -2px; }

/* Sort control: a small uppercase label + a native <select> styled to match
   the brass/parchment toolbar chrome (view toggle, filters button). */
.portfolio-sort { display: inline-flex; align-items: center; gap: 8px; }
.portfolio-sort-label {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
}
.portfolio-sort select {
  height: 36px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-700); background: #fff; border: 1px solid var(--border-default); border-radius: 2px;
  padding: 0 30px 0 12px; cursor: pointer; -webkit-appearance: none; appearance: none;
  /* Brass chevron, inlined so the control needs no image request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a9853d' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color .15s ease, color .15s ease;
}
.portfolio-sort select:hover { color: var(--wine); border-color: var(--brass-300); }
.portfolio-sort select:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* Empty state: shown by portfolio.js only when a filter combination matches
   nothing (the server-rendered pages always have wines). */
.portfolio-empty {
  margin: 30px 0; font-family: var(--serif-text); font-size: 18px; color: var(--ink-700);
}
.portfolio-clear {
  margin-left: 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--wine); background: transparent; border: 1px solid var(--gold);
  border-radius: 8px; padding: 6px 14px; cursor: pointer; transition: background .15s ease;
}
.portfolio-clear:hover { background: var(--gold-light); }
.portfolio-clear:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* Pagination: crawlable prev/next controls under the grid, centered with a
   "Page N of M" status between them. Server-rendered as real <a> links (so
   no-JS visitors and crawlers can page through the whole catalog); portfolio.js
   rebuilds the same shape to page client-side. Disabled ends render as a muted
   non-interactive control rather than a dead link. */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 44px 0 8px; padding-top: 30px; border-top: 1px solid var(--line);
}
.pagination-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wine); text-decoration: none;
  background: #fff; border: 1px solid var(--gold); border-radius: 8px; padding: 10px 20px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pagination-btn:hover { background: var(--gold-light); text-decoration: none; }
.pagination-btn:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.pagination-btn.is-disabled {
  color: var(--ink-300); border-color: var(--line); background: var(--parchment-50);
  cursor: default; pointer-events: none;
}
.pagination-status {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center;
}

/* List view: dense, scannable "data table" rows instead of cards. The same
   <li data-slug> items and [hidden] filtering apply — only the layout changes.
   Rows are separated by dividers (no grid gap), each ~64–76px tall, with a
   small thumbnail, the producer/name as the main cell, and region · varietal
   pinned to the right. The whole .wine-card <a> stays the row-wide click target. */
.wine-grid.view-list { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; border-top: 1px solid var(--line); }
.wine-grid.view-list > li { border-bottom: 1px solid var(--line); }
.wine-grid.view-list .wine-card {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  height: auto;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wine-grid.view-list .wine-card:hover { background: #fff; box-shadow: none; transform: none; border-color: transparent; }
.wine-grid.view-list .wine-card .thumb {
  aspect-ratio: auto;
  width: 46px;
  flex: 0 0 46px;
  height: 56px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
}
.wine-grid.view-list .wine-card .thumb img { height: 100%; width: auto; max-width: 100%; filter: none; }
.wine-grid.view-list .wine-card .body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "producer meta" "name meta" "avail meta";
  align-items: center;
  column-gap: 24px;
  row-gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.wine-grid.view-list .wine-card .producer { grid-area: producer; margin: 0 0 1px; }
.wine-grid.view-list .wine-card h3 { grid-area: name; margin: 0; font-size: 17px; line-height: 1.2; }
.wine-grid.view-list .wine-card .meta { grid-area: meta; text-align: right; white-space: nowrap; }
.wine-grid.view-list .wine-card .avail { grid-area: avail; margin: 1px 0 0; padding: 0; }

/* ---- Wine detail: two-column ------------------------------------------ */
.wine-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: start; }
.wine-detail .photo {
  background: radial-gradient(130% 120% at 50% 0%, var(--parchment-50) 0%, var(--parchment-100) 64%, var(--parchment-200) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: 0 26px 60px -34px rgba(61, 14, 28, .5);
}
.wine-detail .photo img { width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(42, 10, 19, .3)); }
.wine-detail .producer { display: block; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; color: var(--gold-dark); margin-bottom: 10px; }
.wine-detail h1 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: .3em; }
.wine-detail .facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 28px;
  border-top: 1px solid var(--line);
}
.wine-detail .facts span { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.wine-detail .facts span:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 20px; }
.wine-detail .facts span:nth-child(even) { padding-left: 20px; }
.wine-detail .facts b { display: block; color: var(--ink-strong); font-family: var(--serif-text); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: 4px; }
.wine-detail .sommelier-notes { font-style: italic; }
.wine-detail .tasting { margin-top: 30px; }
.wine-detail .tasting h2, .wine-detail .pairings h2 {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em;
  font-size: 12.5px; color: var(--gold-dark); margin: 0 0 12px; }
.wine-detail .tasting dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; }
.wine-detail .tasting dt { font-family: var(--sans); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); align-self: baseline; padding-top: 2px; }
.wine-detail .tasting dd { margin: 0; color: var(--ink); }
.wine-detail .pairings { margin-top: 28px; }
.wine-detail .pairings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wine-detail .pairings li { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-size: 13.5px; color: var(--ink-strong); background: var(--parchment-100); }

/* ---- Callout / sommelier aside ---------------------------------------- */
.callout { background: #fff; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 20px 24px; margin: 26px 0; box-shadow: 0 12px 30px -22px rgba(61, 14, 28, .45); }
.callout p { margin: 0; color: var(--ink-700); }
.callout.sommelier-notes::before { content: "Sommelier's note"; display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--bordeaux-700); font-style: normal; margin-bottom: 8px; }
.callout.sommelier-notes p { font-style: italic; font-size: 19px; color: var(--ink-700); }

/* ---- News list -------------------------------------------------------- */
.news-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.news-item { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.news-item:first-child { padding-top: 0; }
.news-item .date { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); padding-top: 6px; }
.news-item h3 { font-size: 25px; margin: 0 0 8px; }
.news-item h3 a { color: var(--ink-strong); text-decoration: none; }
.news-item h3 a:hover { color: var(--wine); }
.news-item .excerpt { color: var(--ink-700); margin-bottom: 0; }
.news-item .category { display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vineyard-700); background: var(--olive-tag-bg); border-radius: 20px; padding: 3px 10px; margin-top: 12px; }
.news-empty { color: var(--ink-700); font-style: italic; margin: 8px 0 0; }
.news-post-photo { width: 100%; border-radius: var(--radius); margin: 26px 0; box-shadow: 0 26px 56px -30px rgba(61, 14, 28, .4); }
.news-body { max-width: 68ch; }
.news-body p { font-size: 20px; }

/* ---- Team grid -------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 24px; text-align: center; box-shadow: 0 14px 34px -28px rgba(61, 14, 28, .5); }
.team-card img, .team-card svg, .team-monogram { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; display: block; }
.team-monogram {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, var(--bordeaux-700), var(--bordeaux-950));
  border: 1px solid var(--brass-500);
  color: var(--brass-100);
  font-family: var(--serif-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  box-shadow: 0 12px 24px -18px rgba(42, 10, 19, .8);
}
.team-card .name { font-family: var(--serif-display); font-size: 23px; font-weight: 600; color: var(--ink-strong); line-height: 1.1; }
.team-card .role { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-dark); margin: 6px 0 12px; }
.team-card p { font-family: var(--serif-text); font-style: italic; font-size: 16px; color: var(--ink-700); line-height: 1.45; margin: 0 0 14px; max-width: none; }
.team-card .email { font-family: var(--sans); font-size: 13px; color: var(--wine); border-top: 1px solid var(--line); padding-top: 12px; word-break: break-all; text-decoration: none; display: block; }
@media (min-width: 1025px) {
  .team-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ---- Contact ---------------------------------------------------------- */
.contact-address { font-style: normal; color: var(--ink-700); margin: 0 0 28px; }
.contact-links a { font-family: var(--sans); font-size: .82em; font-weight: 600; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--bordeaux-950);
  color: var(--parchment-100);
  border-top: 2px solid var(--gold);
  margin-top: 0;
  font-family: var(--serif-text);
}
.site-footer .wrap { padding-top: 60px; padding-bottom: 32px; }
.site-footer a { color: var(--parchment-100); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--brass-500); text-underline-offset: 3px; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

/* Brand column — the real colored FINEVINES logo. It's magenta+green on
   transparent, which would sit poorly on the dark bordeaux band, so it rides
   a parchment chip for guaranteed legibility. */
.footer-logo {
  display: inline-block;
  background: var(--parchment-50);
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 0 16px;
  line-height: 0;
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .6);
}
.footer-logo img { width: 168px; height: auto; }
.footer-tagline { font-family: var(--serif-display); font-style: italic; font-size: 20px; color: var(--brass-300); margin: 0 0 10px; max-width: 34ch; line-height: 1.4; }
.footer-descriptor { font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--brass-100); opacity: .82; margin: 0 0 20px; max-width: 34ch; line-height: 1.5; }
.footer-social { list-style: none; display: flex; gap: 14px; padding: 0; margin: 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(221, 196, 137, .35);
  color: var(--brass-300);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.footer-social a:hover { color: var(--bordeaux-950); background: var(--gold); border-color: var(--gold); text-decoration: none; }

/* Link / heading columns */
.footer-heading {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: var(--gold);
  margin: 4px 0 18px;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin: 0 0 11px; }
.footer-nav a { font-size: 16.5px; }
.footer-trade p { margin: 0 0 14px; max-width: none; }
.footer-trade-cta { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--brass-300) !important; }
.footer-trade-cta:hover { color: #fff !important; }
.footer-trade-note { font-size: 15px; color: var(--brass-100); opacity: .82; line-height: 1.5; }
.footer-address { font-style: normal; font-size: 15px; line-height: 1.85; color: var(--brass-100); opacity: .9; }

/* Bottom bar */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 28px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(221, 196, 137, .22);
}
.footer-bottom p { margin: 0; font-family: var(--sans); font-size: 12.5px; letter-spacing: .03em; color: var(--brass-300); opacity: .82; }
.footer-legal { text-align: right; }

/* ---- Responsive --------------------------------------------------------
   Standard, desktop-first breakpoint progression (Tailwind scale):
     lg 1024px · md 768px · sm 640px
   Base rules above target ≥1024px (up to the 1200px .wrap cap); each
   max-width block below steps the layout down. Applied consistently sitewide.
   ------------------------------------------------------------------------ */

/* lg — tablets / small laptops: two-up grids, stacked portfolio + wine detail */
@media (max-width: 1024px) {
  .wine-grid.view-cards { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .wine-detail { grid-template-columns: 1fr; gap: 36px; }
  .portfolio-layout { grid-template-columns: 1fr; }
  /* Two-up cards at tablet width would otherwise render 400px+ bottle thumbs
     (3:4 of a ~320px column) — cap them at desktop scale. */
  .portfolio-layout .wine-grid.view-cards .wine-card .thumb { aspect-ratio: auto; height: 300px; }

  /* Footer: brand full-width on top, then Explore/Trade/Contact in an even
     three-column grid — tight and balanced, no orphaned/half-empty column. */
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
  .footer-brand { grid-column: 1 / -1; }

  /* ---- Off-canvas filter drawer ------------------------------------------
     The facet sidebar becomes a left slide-out drawer; the toolbar's Filters
     button opens it. Selecting facets still filters live (portfolio.js is
     untouched); results stay visible behind the semi-transparent backdrop. */
  .filters-toggle {
    height: 36px; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-700); background: #fff; border: 1px solid var(--border-default); border-radius: 2px;
    padding: 0 15px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
  }
  .filters-toggle:hover { color: var(--wine); border-color: var(--brass-300); }
  .filters-toggle:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
  .filters-toggle svg { flex: 0 0 auto; }

  /* The drawer slides in from the RIGHT on the parchment surface (matching
     docs/Portfolio filter sidebar at scale/): border-left, quiet ✕, and the
     rail header's live count gives way to the sticky "Show N wines" CTA. */
  .facets {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 60;
    width: min(332px, 86vw);
    height: 100%;
    margin: 0;
    padding: 18px 16px;
    background: var(--cream);
    border-left: 1px solid var(--border-default);
    /* Flex column so the "Show N wines" foot can push to the drawer's bottom
       edge (margin-top: auto) when the collapsed groups don't fill the panel —
       position: sticky alone leaves it floating mid-panel over empty cream. */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    /* visibility delays until the slide-out completes; while closed it takes
       the drawer's ~100 focusable controls out of the tab order (an off-screen
       transform alone leaves them tabbable — a keyboard trap). */
    visibility: hidden;
    transition: transform .28s ease, visibility 0s .28s;
    box-shadow: 0 0 44px -6px rgba(42, 10, 19, .55);
  }
  .facets.is-open { transform: translateX(0); visibility: visible; transition: transform .28s ease; }

  /* In the drawer the ✕ replaces the header count. */
  .facets-count { display: none; }
  .facets-close {
    all: unset;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 19px; line-height: 1;
    color: var(--text-muted);
    /* 44px hit area; negative margins keep the ✕ visually where it was. */
    width: 44px; height: 44px;
    margin: -12px -14px -12px 0;
  }
  .facets-close:hover { color: var(--wine); }
  .facets-close:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

  /* Finger-sized rows inside the drawer. The desktop rail keeps its dense
     pointer-sized spacing; here every primary target reaches ~44px. */
  .facet-group { padding: 6px 0; }
  .facet-group summary { padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  .facet-row { padding: 11px 8px; }
  .facet-values { gap: 2px; }
  .facet-values.is-grid .facet-row { padding: 10px 7px; }
  .facet-sort { padding: 10px 0; }
  .facet-expander { padding: 12px 8px; }
  /* Keep the last group's tail clear of the sticky footer. */
  .facets .facet-group:last-of-type { margin-bottom: 10px; }

  /* Sticky "Show N wines" footer. Filtering is already live as you tap, so
     this commits nothing — it exists so you can see the size of what you have
     built before dismissing the panel, which is the whole legibility problem
     with filtering on a phone. It sticks to the bottom of the scrolling drawer
     rather than sitting at the end of a long list of groups. */
  /* Scroll container + flex: children must never shrink, or the groups would
     compress instead of overflowing into scroll. */
  .facets > * { flex-shrink: 0; }
  .facets-drawer-foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin: auto -16px -18px;
    padding: 12px 16px;
    background: var(--cream);
    border-top: 1px solid var(--border-hairline);
  }
  .facets-apply {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--parchment-50); background: var(--wine);
    border: none; border-radius: 2px; cursor: pointer;
  }
  .facets-apply:hover { background: var(--bordeaux-800); }
  .facets-apply:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

  /* Body scroll lock while the drawer is open. */
  body.drawer-open { overflow: hidden; }
}

/* md — collapse the header nav into a hamburger menu */
@media (max-width: 1024px) {
  .site-header .wrap { flex-wrap: wrap; gap: 14px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--parchment-200);
    font-size: 13px;
  }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--parchment-200); color: var(--wine); }
  .site-nav .btn-cta { margin: 14px 0 4px; text-align: center; padding: 13px 20px; border-radius: 4px; }
  .wine-grid.view-cards.home-wine-grid,
  .producer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* sm — single-column phones */
@media (max-width: 768px) {
  .home-hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .home-hero-media { min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  body { font-size: 17px; }

  /* Tighter vertical rhythm: desktop section/hero padding eats half a phone
     viewport before any wine is visible. */
  section.wrap { padding-block: 34px 46px; }
  section.wrap + section.wrap { padding-top: 38px; }
  .page-hero .wrap { padding-top: 28px; padding-bottom: 32px; }
  .lede { font-size: 18px; }
  .home-section-heading { display: block; }
  .home-section-heading .text-link { display: inline-block; margin-top: 16px; }
  .home-wine-grid .wine-card .thumb { height: 240px; }
  .producer-grid { grid-template-columns: 1fr; }
  .producer-card { min-height: 122px; }

  /* Cards: two-up and compact. A single full-width card put a ~440px-tall
     bottle on screen — one wine per viewport. Two tighter columns keep the
     card treatment while showing 4–6 wines per screen. */
  .wine-grid { gap: 14px 12px; }
  .wine-grid.view-cards { grid-template-columns: repeat(2, 1fr); }
  /* Fixed thumb height instead of 3:4 — the ratio made image:text 69:31 and
     pushed every wine name below the fold. (Selector mirrors the ≤1024 tablet
     cap so this later rule wins at phone width.) */
  .wine-card .thumb { padding: 14px 14px 10px; }
  .portfolio-layout .wine-grid.view-cards .wine-card .thumb { aspect-ratio: auto; height: 190px; }
  .wine-card .thumb img { filter: drop-shadow(0 10px 14px rgba(42, 10, 19, .24)); }
  .wine-card .body { padding: 11px 12px 14px; }
  .wine-card .producer { font-size: 9.5px; letter-spacing: .11em; }
  .wine-card h3 { font-size: 15px; line-height: 1.25; }
  .wine-card .meta { font-size: 11px; }
  .wine-card .avail { font-size: 10.5px; }

  /* Toolbar: count on its own line, then a full-width control grid —
     Filters and the Cards|List toggle share a row, Sort spans beneath.
     The inline space-between row left dead space and undersized tap
     targets once it wrapped on a phone. */
  .portfolio-toolbar { row-gap: 12px; }
  .portfolio-toolbar #portfolio-count { flex: 1 1 100%; }
  .portfolio-toolbar-actions {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* One shared height and corner radius across the cluster — three controls
     at 36/39/40px with mixed 8px/2px radii read as clutter, not chrome. */
  .filters-toggle { grid-column: 1; grid-row: 1; justify-content: center; padding-block: 0; }
  .view-toggle { grid-column: 2; grid-row: 1; display: flex; }
  /* height:100% overrides the desktop buttons' fixed 34px — inside the 44px
     mobile cluster the active fill must reach the toggle's full height. */
  .view-toggle-btn { flex: 1 1 0; padding: 0 8px; height: 100%; }
  .portfolio-sort { grid-column: 1 / -1; grid-row: 2; }
  .portfolio-sort select { flex: 1 1 auto; width: 100%; padding-block: 0; }
  .filters-toggle, .view-toggle, .portfolio-sort select { height: 44px; border-radius: 2px; }

  .pagination { margin-top: 34px; padding-top: 24px; gap: 12px; }
  .pagination-btn { padding-block: 12px; }

  .team-grid { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 1fr; gap: 8px; }
  .wine-detail .facts { grid-template-columns: 1fr; }
  .wine-detail .facts span:nth-child(odd) { border-right: 0; padding-right: 4px; }
  .wine-detail .facts span:nth-child(even) { padding-left: 4px; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal { text-align: left; }

  /* List rows: stack producer/name over the meta on phones, but stay tight —
     the meta drops under the name (left-aligned) instead of pinning right. */
  .wine-grid.view-list .wine-card .body {
    grid-template-columns: 1fr;
    grid-template-areas: "producer" "name" "meta";
    row-gap: 2px;
  }
  .wine-grid.view-list .wine-card .meta { text-align: left; white-space: normal; }
}

/* Top of the phone band (520–640px): two compact columns balloon here —
   three keep the thumbs at true phone scale. */
@media (min-width: 520px) and (max-width: 640px) {
  .wine-grid.view-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Responsive hardening: prevent horizontal overflow on mobile -------- */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; }
/* flex/grid children default to min-width:auto and refuse to shrink below
   their content, which forces document-level horizontal overflow on phones.
   Reset it on the layout containers' children so everything reflows. */
.site-header .wrap > *,
.home-hero .wrap > *,
.page-hero .wrap > *,
.portfolio-layout > *,
.footer-cols > *,
.wine-card,
.wine-card > * { min-width: 0; }
/* hero action buttons wrap instead of overflowing */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn + .btn { margin-left: 0; }
/* long words in display headings/eyebrows break rather than push width */
h1, h2, .eyebrow, .lede { overflow-wrap: break-word; }