/* ==========================================================================
   Wineries in Temecula. One stylesheet, no build step.

   Brand guidelines v1.1 (brand/pages/brand-book.html): white ground, charcoal ink, thin serif capitals,
   arch-framed imagery, Valley Olive for depth and Viognier Gold used like jewelry. Rules that hold it:
     - Headlines (h1, h2) are Fraunces Thin in capitals, tracked tight. Everything people read is
       Instrument Sans. At most one Ephesis script word per view (.script).
     - Emphasis inside a headline is a champagne underline (<em>), never italic.
     - Paid placement is shown by a gold "Featured" label and a hairline, never a second hue.
     - Unknown is not No. "Not listed" facts are set in --ink-3 italic, never red, never crossed out.
     - Motion is hover, focus and a single reveal on scroll, transform/opacity only, off under
       prefers-reduced-motion.
   ========================================================================== */

@font-face { font-family: "Fraunces Display"; src: url("/assets/fonts/fraunces-display-latin-var.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Ephesis"; src: url("/assets/fonts/ephesis-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/assets/fonts/instrument-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F2EC;          /* Bone */
  --shell: rgba(22, 20, 23, 0.03);
  --ink: #161417;                /* Charcoal */
  --ink-2: #4A4642;
  --ink-3: #6E6964;              /* Stone */
  --line: rgba(22, 20, 23, 0.1);
  --line-strong: rgba(22, 20, 23, 0.22);
  --accent: #161417;             /* buttons are charcoal */
  --accent-hover: #34302F;
  --accent-ink: #FFFFFF;
  --accent-soft: #F4ECDB;        /* champagne tint */
  --accent-text: #7A5B2A;        /* deep gold for links and small accents, 6.2:1 on white */
  --gold: #BF934C;               /* Viognier Gold: dots, rules, the grape. Never text on white. */
  --champagne: #E9DAB9;
  --olive: #5E6052;              /* Valley Olive */
  --olive-ink: #FFFFFF;
  --focus: #8C6A33;
  --shadow: 0 1px 2px rgba(22, 20, 23, 0.04), 0 14px 34px -16px rgba(22, 20, 23, 0.16);
  --shadow-lift: 0 2px 4px rgba(22, 20, 23, 0.05), 0 26px 50px -22px rgba(22, 20, 23, 0.24);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --r-shell: 24px;
  --r-card: 18px;
  --r-input: 12px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --font-display: "Fraunces Display", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Instrument", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Ephesis", "Snell Roundhand", "Segoe Script", cursive;
  --map-bg: #F6F2EC;
  --map-row: rgba(94, 96, 82, 0.34);
  --map-row-bg: rgba(167, 174, 156, 0.22);
  --map-water: #DCE3E1;
  --map-water-line: #AFBDBA;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141215; --surface: #1C1A1D; --surface-2: #252226; --shell: rgba(246, 242, 236, 0.04);
    --ink: #F6F2EC; --ink-2: #CFC8BE; --ink-3: #A39C93;
    --line: rgba(246, 242, 236, 0.1); --line-strong: rgba(246, 242, 236, 0.2);
    --accent: #E9DAB9; --accent-hover: #F3E7CC; --accent-ink: #161417; --accent-soft: rgba(191, 147, 76, 0.16);
    --accent-text: #D9B77A; --olive: #4D4F43; --focus: #D9B77A;
    --map-bg: #1F1C1F; --map-row: rgba(167, 174, 156, 0.32); --map-row-bg: rgba(167, 174, 156, 0.08); --map-water: #283033; --map-water-line: #3E4A4D;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.7);
    --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141215; --surface: #1C1A1D; --surface-2: #252226; --shell: rgba(246, 242, 236, 0.04);
  --ink: #F6F2EC; --ink-2: #CFC8BE; --ink-3: #A39C93;
  --line: rgba(246, 242, 236, 0.1); --line-strong: rgba(246, 242, 236, 0.2);
  --accent: #E9DAB9; --accent-hover: #F3E7CC; --accent-ink: #161417; --accent-soft: rgba(191, 147, 76, 0.16);
  --accent-text: #D9B77A; --olive: #4D4F43; --focus: #D9B77A;
  --map-bg: #1F1C1F; --map-row: rgba(167, 174, 156, 0.32); --map-row-bg: rgba(167, 174, 156, 0.08); --map-water: #283033; --map-water-line: #3E4A4D;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -18px rgba(0,0,0,.7);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05); color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.03rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.02; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3, h4 { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
h3 { font-size: 1.2rem; }
h1 em, h2 em { font-style: normal; background-image: linear-gradient(var(--champagne), var(--champagne)); background-repeat: no-repeat;
               background-size: 100% 0.09em; background-position: 0 94%; }
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.12em; line-height: 0.8; background: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 0.74rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.display-num { font-family: var(--font-display); font-weight: 200; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
p { margin: 0 0 1em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.muted { color: var(--ink-3); }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
.prose { max-width: 68ch; }
.prose h2 { margin: 2em 0 0.5em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.prose h3 { margin: 1.6em 0 0.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- header: full-width bar */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--surface); } }
.site-header__bar {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 24px; position: relative;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { height: 50px; width: auto; }
.brand:hover { color: var(--ink); }
@media (max-width: 420px) { .brand svg { height: 38px; } .site-header__bar { padding-block: 12px; } }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav__top { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; padding: 10px 12px; border-radius: 999px; transition: background 0.3s var(--ease), color 0.3s var(--ease); white-space: nowrap; }
.nav > a:hover, .nav > a[aria-current="page"], .nav__top:hover, .nav__top[aria-current="page"] { background: var(--surface-2); color: var(--ink); }

/* ---- Wineries mega-menu. One pill holds the link (goes to /wineries/) and a caret button (opens the panel for
   touch and keyboard). Fine pointers also open it on hover, with an intent delay in site.js. The panel hangs off
   the header bar, spans the page wrap, and lays out as one lead photo plus three guide cards and a footer row. */
.nav__mega { display: flex; align-items: center; border-radius: 999px; transition: background 0.3s var(--ease); }
.nav__mega .nav__top { padding-right: 4px; }
.nav__mega:hover, .nav__mega.is-open { background: var(--surface-2); }
.nav__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 7px; padding: 0 6px; border-radius: 999px;
  background: var(--gold); color: #161417; font: 600 0.68rem/1 var(--font-body); letter-spacing: 0; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.hdr-biz { margin-right: 6px; padding: 8px 10px; border-radius: 999px; font-size: 0.8rem; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color 0.3s var(--ease), background 0.3s var(--ease); }
.hdr-biz:hover, .hdr-biz[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.nav__mega:hover .nav__top, .nav__mega.is-open .nav__top { background: transparent; color: var(--ink); }
.nav__caret { display: grid; place-items: center; width: 30px; height: 36px; margin-right: 4px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.nav__caret .ico { width: 14px; height: 14px; transition: transform 0.5s var(--ease); }
.nav__mega.is-open .nav__caret .ico { transform: rotate(180deg); }
.nav__caret:hover { color: var(--ink); }

.mega {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 10px);
  padding: 12px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-lift), 0 60px 120px -60px rgba(22, 20, 23, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.985); transform-origin: 50% 0;
  transition: opacity 0.3s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.3s;
}
/* Bridges the gap between the pill and the panel so a slow diagonal mouse path does not close it. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; }
.nav__mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease), transform 0.6s var(--ease), visibility 0s; }
.mega__grid { display: grid; grid-template-columns: 1.22fr repeat(3, minmax(0, 1fr)); gap: 10px; }
.mega__lead, .mega__card, .mega__foot { opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--ease), transform 0.7s var(--ease), background 0.35s var(--ease); }
.nav__mega.is-open :is(.mega__lead, .mega__card, .mega__foot) { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 60ms), calc(var(--i, 0) * 45ms + 60ms), 0s; }

.mega__lead { position: relative; display: flex; align-items: flex-end; min-height: 336px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.mega__lead img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.nav__mega.is-open .mega__lead img { transform: scale(1); }
.nav__mega.is-open .mega__lead:hover img { transform: scale(1.04); }
.mega__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 20, 23, 0.08) 0%, rgba(22, 20, 23, 0.18) 22%, rgba(22, 20, 23, 0.66) 50%, rgba(22, 20, 23, 0.92) 100%); }
.mega__lead-body { text-shadow: 0 1px 14px rgba(22, 20, 23, 0.45); }
.mega__cta { text-shadow: none; }
.mega__lead-body { display: grid; gap: 10px; padding: 24px 24px 22px; }
.mega__kicker { display: inline-flex; align-items: center; gap: 9px; font: 500 0.68rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); }
.mega__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.mega__lead-title { font: 300 clamp(1.7rem, 2.3vw, 2.15rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.mega__lead-desc { font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); max-width: 32ch; }
.mega__cta { display: inline-flex; align-items: center; gap: 12px; justify-self: start; margin-top: 6px; padding: 5px 5px 5px 18px; border-radius: 999px; background: #fff; color: #161417;
  font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; transition: transform 0.4s var(--ease); }
.mega__cta-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(22, 20, 23, 0.08); transition: transform 0.45s var(--ease); }
.mega__cta-ico .ico { width: 14px; height: 14px; }
.mega__lead:hover .mega__cta-ico { transform: translateX(3px); }
.mega__lead:active .mega__cta { transform: scale(0.98); }

.mega__card { display: flex; flex-direction: column; gap: 0; padding: 8px 8px 18px; border-radius: 20px; color: var(--ink); text-decoration: none; }
.mega__card:hover, .mega__card:focus-visible, .mega__card[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.mega__media { display: block; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.mega__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.001); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); filter: saturate(0.92); }
.mega__card:hover .mega__media img { transform: scale(1.06); filter: saturate(1.05); }
.mega__meta { margin: 16px 10px 0; font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mega__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 10px 0; font: 200 1.42rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: -0.015em; }
.mega__arrow { width: 18px; height: 18px; flex: none; color: var(--ink-3); opacity: 0; transform: translateX(-8px); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease); }
.mega__card:hover .mega__arrow, .mega__card:focus-visible .mega__arrow { opacity: 1; transform: none; color: var(--ink); }
.mega__desc { margin: 8px 10px 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }

.mega__foot { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 2px; padding: 12px 8px 2px 12px; border-top: 1px solid var(--line); }
.mega__foot-label { font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.mega__picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mega__picks a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 0.82rem; font-weight: 500; text-decoration: none; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.mega__picks a:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }
.mega__picks .ico { width: 16px; height: 16px; }
.mega__events { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 0.84rem; font-weight: 500; text-decoration: none; }
.mega__events .ico { width: 15px; height: 15px; transition: transform 0.45s var(--ease); }
.mega__events:hover { color: var(--ink); }
.mega__events:hover .ico { transform: translateX(3px); }
.mega__pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.mega__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); animation: mega-pulse 2.4s var(--ease) infinite; }
@keyframes mega-pulse { 0% { transform: scale(0.5); opacity: 0.9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Dims the page under an open menu; clicking it closes the menu. Sits just under the sticky header. */
.mega-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(22, 20, 23, 0.22); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s; }
.mega-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega__lead, .mega__card, .mega__foot, .mega__lead img, .mega__media img { transition: opacity 0.2s linear, visibility 0s linear 0.2s !important; transform: none !important; }
  .nav__mega.is-open .mega, .nav__mega.is-open :is(.mega__lead, .mega__card, .mega__foot) { transition: opacity 0.2s linear, visibility 0s !important; }
  .mega__pulse::after { animation: none; }
}
.hdr-tools { display: flex; align-items: center; gap: 8px; flex: none; }

/* Round icon buttons: search and menu share one shape. */
.hsearch summary, .menu summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: transparent;
  border: 1px solid var(--line); transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hsearch summary:hover, .menu summary:hover, .hsearch[open] summary, .menu[open] summary { background: var(--surface-2); border-color: transparent; }
.hsearch summary::-webkit-details-marker, .menu summary::-webkit-details-marker { display: none; }
.hsearch summary .ico { width: 20px; height: 20px; grid-area: 1 / 1; transition: opacity 0.25s var(--ease), transform 0.4s var(--ease); }
.hsearch__close { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.hsearch[open] .hsearch__ico { opacity: 0; transform: scale(0.6); }
.hsearch[open] .hsearch__close { opacity: 1; transform: none; }
.hsearch__panel {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lift);
  animation: hsearch-in 0.45s var(--ease);
}
.hsearch__panel > .ico { width: 20px; height: 20px; color: var(--ink-3); }
.hsearch__panel input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 1.05rem/1.4 var(--font-body); color: var(--ink); padding: 8px 0; }
.hsearch__panel input::-webkit-search-cancel-button { -webkit-appearance: none; }
@keyframes hsearch-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hsearch__panel { animation: none; } }

.menu { display: none; position: relative; }
.burger { position: relative; width: 18px; height: 12px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.burger::before { top: 1px; }
.burger::after { top: 9px; }
.menu[open] .burger::before { top: 5px; transform: rotate(45deg); }
.menu[open] .burger::after { top: 5px; transform: rotate(-45deg); }
.menu__panel { position: absolute; right: 0; top: 56px; width: min(372px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); display: grid; animation: hsearch-in 0.45s var(--ease); }
.menu__label { margin: 8px 12px 6px; font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 9px; }
.menu__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.menu__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding: 7px 8px; border-radius: 16px; color: var(--ink); text-decoration: none; }
.menu__row img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.menu__row strong { display: block; font: 200 1.12rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.menu__row small { display: block; margin-top: 5px; font-size: 0.82rem; color: var(--ink-3); }
.menu__rule { height: 1px; background: var(--line); margin: 8px 10px; }
.menu__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.menu__row:hover, .menu__link:hover, .menu__row[aria-current="page"], .menu__link[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.menu__badge { padding: 5px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-2); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: none; font-weight: 500; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .menu__panel { animation: none; } }
@media (max-width: 1180px) { .mega__grid { grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr)); } .mega__picks li:nth-child(n+4) { display: none; } .mega__desc { font-size: 0.82rem; } .mega__title { font-size: 1.25rem; } }
@media (max-width: 1080px) { .nav, .hdr-biz { display: none; } .menu { display: block; } .hdr-tools { margin-left: auto; } .mega-scrim { display: none; } }

/* ---------------------------------------------------------------- buttons and chips */
.btn {
  --b-bg: var(--accent); --b-ink: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 6px 6px 22px;
  border-radius: 999px; border: 0; background: var(--b-bg); color: var(--b-ink);
  font: 500 0.8rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.btn:hover { background: var(--accent-hover); color: var(--b-ink); box-shadow: var(--shadow); }
.btn:active { transform: scale(0.98); }
.btn__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--b-ink) 14%, transparent); transition: transform 0.45s var(--ease); }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); }
.btn--plain { padding: 6px 22px; }
.btn--ghost { --b-bg: transparent; --b-ink: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost .btn__icon { background: var(--surface-2); }
.btn--sm { min-height: 40px; font-size: 0.74rem; padding: 4px 4px 4px 16px; }
.btn--sm .btn__icon { width: 32px; height: 32px; }
.btn--sm.btn--plain { padding: 4px 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 500 0.94rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip .ico { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.tag .ico { width: 14px; height: 14px; }
.tag--featured { background: var(--accent-soft); color: var(--accent-text); letter-spacing: 0.06em; }
.tag--featured::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------------------------------------------------------------- double-bezel shell */
.shell { padding: 6px; border-radius: var(--r-shell); background: var(--shell); box-shadow: inset 0 0 0 1px var(--line); }
.core { border-radius: calc(var(--r-shell) - 6px); background: var(--surface); box-shadow: var(--inner-hi), 0 1px 2px rgba(0, 0, 0, 0.03); }

/* ---------------------------------------------------------------- hero: thin capitals over a six-column hairline grid, arch photo */
.hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.hero::before { content: ""; position: absolute; inset: 0 var(--gutter); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto;
  background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%; border-right: 1px solid var(--line);
  opacity: 0.55; pointer-events: none; }
.hero > .wrap { position: relative; }
.hero__meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero__meta .eyebrow { margin: 0; }
.hero__meta .eyebrow--plain::before { display: none; }
.hero h1 { font-size: clamp(2.9rem, 8.6vw, 8.4rem); line-height: 0.9; letter-spacing: -0.035em; margin: clamp(18px, 2.6vw, 34px) 0 clamp(28px, 4vw, 52px); max-width: none; }
.hero h1 .script { display: inline-block; font-size: 1.04em; transform: translateY(0.06em); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.hero .lede { margin: 0; max-width: 40ch; }
.hero__chips { margin-top: 26px; }
.hero__cta { margin-top: 26px; }
.hero__media { position: relative; justify-self: end; width: min(100%, 400px); margin-top: clamp(-150px, -9.5vw, -50px); }
.hero__media::before { content: ""; position: absolute; inset: -14px -14px 0; border: 1.2px solid var(--ink); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.hero__media::after { content: ""; position: absolute; left: -14px; right: -14px; bottom: 0; height: 1.2px; background: var(--ink); }
.arch { border-radius: 999px 999px 0 0; overflow: hidden; background: var(--surface-2); }
.hero__media .arch { aspect-ratio: 4 / 5.3; }
.hero__media .arch img { width: 100%; height: 100%; object-fit: cover; }
.hero__wc { position: absolute; z-index: 2; width: 38%; left: -22%; bottom: -6%; transform: rotate(-8deg); pointer-events: none; }
.hero__seal { position: absolute; z-index: 2; right: -9%; top: 9%; width: 104px; padding: 4px; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
.hero__stat { position: absolute; z-index: 3; right: -4%; bottom: 22px; padding: 14px 18px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-lift); border: 1px solid var(--line); max-width: 210px; }
.hero__stat strong { display: block; font-family: var(--font-display); font-weight: 200; font-size: 2.2rem; letter-spacing: -0.04em; line-height: 1; }
.hero__stat span { color: var(--ink-2); font-size: 0.88rem; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { justify-self: center; width: min(84%, 400px); margin-top: 24px; }
  .hero__seal { width: 84px; right: -6%; }
  .hero__stat { right: -5%; bottom: 16px; }
  .hero__meta .eyebrow--plain { display: none; }
}

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.section__head { margin-bottom: clamp(24px, 3vw, 40px); max-width: 64ch; }
.section__head p { color: var(--ink-2); margin-top: 14px; max-width: 58ch; }
.band { background: var(--surface-2); }
.hill { display: block; line-height: 0; margin-block: -1px; position: relative; color: var(--surface-2); background: var(--bg); }
.hill svg { display: block; width: 100%; height: clamp(32px, 5vw, 80px); }
.hill path { fill: currentColor; }
.hill--out { color: var(--bg); background: var(--surface-2); }
.hill + .section { padding-top: clamp(32px, 4vw, 64px); }
/* A section's gold label can sit inside its H2 (so the heading carries the search phrase) and still look the same. */
h2 > .eyebrow { display: flex; width: fit-content; }

/* Bento of filter pages: varied tile sizes, exact cell count from data. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 168px; padding: 22px; border-radius: var(--r-card); text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.tile--lead { grid-column: span 3; grid-row: span 2; }
.tile--s2 { grid-column: span 2; }
.tile--s3 { grid-column: span 3; }
.tile--s6 { grid-column: span 6; min-height: 120px; }
.tile__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.tile__icon .ico { width: 22px; height: 22px; }
.tile h3 { font-size: 1.2rem; }
.tile p { margin: 6px 0 0; color: var(--ink-2); font-size: 0.95rem; }
.tile--hero { background: var(--olive); color: var(--olive-ink); border-color: transparent; }
.tile--hero h3, .tile--hero p { color: var(--olive-ink); }
.tile--hero p { opacity: 0.85; }
.tile--hero h3 { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.02; }
.tile--hero .tile__icon { background: rgba(255, 255, 255, 0.14); color: var(--olive-ink); }
.tile--hero:hover { color: var(--olive-ink); }
.tile--tint { background: var(--bg); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile__count { font-family: var(--font-display); font-weight: 200; font-size: 3.4rem; letter-spacing: -0.04em; line-height: 1; color: var(--champagne); }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--s2, .tile--s3, .tile--s6 { grid-column: span 1; } .tile--lead, .tile--odd-last { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile--lead, .tile--odd-last, .tile--s2, .tile--s3, .tile--s6 { grid-column: span 1; } }

/* Fee strip: three big figures, no cards. */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); }
.figure strong { display: block; font-family: var(--font-display); font-weight: 200; font-size: clamp(3rem, 6vw, 4.6rem); letter-spacing: -0.045em; line-height: 1; }
.figure span { display: block; margin-top: 10px; color: var(--ink-2); max-width: 26ch; }
.figure--link { display: block; color: var(--ink); text-decoration: none; padding-top: 18px; border-top: 1px solid var(--line-strong); transition: border-color 0.4s var(--ease); }
.figure--link:hover { color: var(--ink); border-top-color: var(--gold); }
.figure .figure__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.86rem; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; transition: text-decoration-color 0.3s var(--ease); }
.figure__go .ico { width: 14px; height: 14px; transition: transform 0.45s var(--ease); }
.figure--link:hover .figure__go { text-decoration-color: var(--gold); }
.figure--link:hover .figure__go .ico { transform: translateX(3px); }
@media (max-width: 700px) { .figures { grid-template-columns: 1fr; } }

/* Split callout (tours) */
.rides { align-items: start; }
.rides__tips { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.rides__tips a { color: var(--ink); text-decoration-color: var(--champagne); text-underline-offset: 3px; }
.rides__cards { display: grid; gap: 14px; }
.ride { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; gap: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s var(--ease); }
.ride:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; color: var(--ink); }
.ride__media { position: relative; min-height: 190px; background: var(--surface-2); overflow: hidden; }
.ride__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ride:hover .ride__media img { transform: scale(1.04); }
.ride__body { display: grid; align-content: center; gap: 6px; padding: 22px 24px; }
.ride__meta { font: 500 0.68rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.ride__title { font: 200 clamp(1.45rem, 2.2vw, 1.85rem)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; margin-top: 4px; }
.ride__desc { font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }
.ride__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.86rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.ride__go .ico { width: 14px; height: 14px; transition: transform 0.45s var(--ease); }
.ride:hover .ride__go { text-decoration-color: var(--gold); }
.ride:hover .ride__go .ico { transform: translateX(3px); }
@media (max-width: 520px) { .ride { grid-template-columns: 1fr; } .ride__media { min-height: 0; aspect-ratio: 16 / 9; } }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .ico { color: var(--accent-text); margin-top: 4px; }

/* ---------------------------------------------------------------- finder */
.page-head { padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 32px); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 14px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.9rem; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.6; }

.filters { position: sticky; top: 84px; z-index: 20; margin-bottom: 24px; }
.filters .core { padding: 14px; display: grid; gap: 12px; }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters__row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.filters__row--scroll::-webkit-scrollbar { display: none; }
/* Chips in a one-line scrolling row must keep their natural width. Left to shrink, they were squeezed narrower than
   their label, so the text ran into the right padding and touched the border. */
.filters__row--scroll > .chip { flex: none; }
/* The row runs into the panel's 14px padding on both sides, so the next chip peeks in at the edge and shows
   the row scrolls (otherwise a phone showed two whole chips and no hint of the rest). */
.filters__row--scroll { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; }
.search { flex: 1 1 260px; position: relative; }
.search input { width: 100%; height: 44px; padding: 0 16px 0 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 0.98rem; }
.search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.select { height: 44px; padding: 0 38px 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235B6A61' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; color: var(--ink); font: inherit; font-size: 0.95rem; -webkit-appearance: none; appearance: none; }
.result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--ink-2); }
.result-bar strong { color: var(--ink); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.filters-note { font-size: 0.9rem; color: var(--ink-3); margin: 0; }
@media (max-width: 700px) { .filters { position: static; } }

/* ---------------------------------------------------------------- winery cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.card--featured { border-color: color-mix(in srgb, var(--gold) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }
.card__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.card h3 { font-size: 1.22rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card h3 a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.card__area { font-size: 0.88rem; color: var(--ink-3); margin-top: 4px; }
.card__fee { text-align: right; flex: none; }
.card__fee strong { display: block; font-family: var(--font-display); font-weight: 200; font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1; }
.card__fee span { font-size: 0.8rem; color: var(--ink-3); }
.card__fee--unknown strong { font-family: var(--font-body); font-size: 0.92rem; font-weight: 400; font-style: italic; color: var(--ink-3); }
.card__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.card__today { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-2); }
.card__today .ico { width: 16px; height: 16px; color: var(--ink-3); }
.card__today--open .ico { color: var(--accent-text); }
.card__offer { font-size: 0.92rem; font-weight: 500; color: var(--accent-text); }
.card[hidden] { display: none; }

/* Featured winery: spans the full grid row, photo beside the details, logo on a white plate. */
.card__brandrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card__logo {
  flex: none; display: flex; align-items: center; justify-content: center;
  height: 112px; max-width: 220px; padding: 10px 14px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid var(--line); position: relative; z-index: 1; pointer-events: none;
}
.card__logo img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; }
.card__logo--plate { background: #161417; border-color: #161417; }
/* Regular cards on the home page: a fixed-size white tile above the name, so a row of cards lines up whatever
   the logo's shape. The image fills the tile with object-fit (no % max-limits: see .mapcard__logo). */
.card__mark { width: 152px; height: 60px; padding: 8px 12px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); position: relative; z-index: 1; pointer-events: none; }
.card__mark img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.card__mark--plate { background: #161417; box-shadow: none; }
.card__cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: none;
  font: 500 0.74rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.card__cta-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); transition: transform 0.45s var(--ease); }
.card__cta-ico .ico { width: 15px; height: 15px; }
.card--featured:hover .card__cta-ico { transform: translateX(3px); }
.card--featured { grid-column: 1 / -1; background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.card--featured h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.card--featured .card__fee:not(.card__fee--unknown) strong { font-size: clamp(1.9rem, 3vw, 2.5rem); }
@media (min-width: 760px) {
  .card--featured:has(> .card__media) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .card--featured .card__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .card--featured .card__body { padding: clamp(24px, 3vw, 36px); gap: 16px; }
}
@media (max-width: 520px) {
  .card__logo { height: 76px; max-width: 160px; }
  .card__cta { display: none; }
}
.empty { padding: 48px 24px; text-align: center; border-radius: var(--r-card); border: 1px dashed var(--line-strong); color: var(--ink-2); }
.empty h3 { margin-bottom: 8px; }

/* ---------------------------------------------------------------- winery page */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.detail > * { min-width: 0; }
@media (max-width: 560px) { .chip { white-space: normal; max-width: 100%; min-height: 40px; height: auto; padding-block: 9px; line-height: 1.25; } }
.detail__head h1 { max-width: 18ch; }
.detail__headrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; align-items: center; }
.detail__headrow.has-logo { grid-template-columns: minmax(0, 1fr) auto; }
.logo-tile { width: clamp(168px, 16vw, 216px); height: clamp(100px, 9.5vw, 128px); display: flex; align-items: center; justify-content: center; padding: 16px 22px;
  border-radius: var(--r-card); background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--shadow); }
.logo-tile--light { background: #161417; border-color: transparent; }
.logo-tile img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; }
@media (max-width: 700px) {
  .detail__headrow.has-logo { grid-template-columns: minmax(0, 1fr); }
  .detail__headrow .logo-tile { order: -1; width: 150px; height: 92px; padding: 12px 16px; }
}
.detail__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; color: var(--ink-2); }
.detail__meta span { display: inline-flex; align-items: center; gap: 6px; }
.detail__summary { font-size: 1.15rem; color: var(--ink-2); margin-top: 22px; max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }
.fact { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.fact__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.fact__icon .ico { width: 20px; height: 20px; }
.fact--yes .fact__icon { background: var(--accent-soft); color: var(--accent-text); }
.fact__label { font-size: 0.85rem; color: var(--ink-3); font-weight: 500; }
.fact__value { font-weight: 600; margin-top: 2px; }
.fact--unknown .fact__value { font-weight: 400; font-style: italic; color: var(--ink-3); }
.fact__note { font-size: 0.9rem; color: var(--ink-2); margin-top: 6px; }
.fact--wide { grid-column: 1 / -1; }
.side { position: sticky; top: 96px; display: grid; gap: 16px; }
@media (max-width: 960px) { .side { position: static; } }
.side .core { padding: 22px; }
.side h2 { font: 500 0.74rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hours td { padding: 7px 0; }
.hours td:last-child { text-align: right; color: var(--ink-2); }
.hours tr.is-today td { font-weight: 600; color: var(--ink); }
.hours tr + tr td { border-top: 1px solid var(--line); }
.side__actions { display: grid; gap: 10px; margin-top: 18px; }
.side__actions .btn { justify-content: space-between; }
.address { color: var(--ink-2); font-style: normal; }
.provenance { font-size: 0.9rem; color: var(--ink-3); }
.provenance a { color: var(--ink-3); }
.owner-box { padding: 22px; border-radius: var(--r-card); background: var(--accent-soft); }
.owner-box h2 { color: var(--ink); }
.owner-box p { color: var(--ink-2); font-size: 0.95rem; }
.meter { display: flex; gap: 4px; margin: 10px 0 14px; }
.meter i { flex: 1; height: 6px; border-radius: 6px; background: var(--line-strong); }
.meter i.on { background: var(--gold); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
.gallery img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.nearby { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.nearby a { display: block; padding: 16px 18px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color 0.3s, transform 0.4s var(--ease); }
.nearby a:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.nearby strong { display: block; font-weight: 500; font-size: 1.02rem; letter-spacing: -0.01em; }
.nearby span { font-size: 0.88rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- winery page (views/winery.php) */
.vpage { --label-overlap: clamp(110px, 12vw, 170px); }
.vhero { position: relative; margin-top: -78px; height: clamp(440px, 74vh, 760px); overflow: hidden; background: var(--surface-2); isolation: isolate; }
.vhero--plain { height: clamp(300px, 40vh, 400px); }
.vhero__media, .vhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vhero__media img { object-fit: cover; transform: scale(1.02); animation: vhero-in 1.8s var(--ease) both; }
@keyframes vhero-in { from { transform: scale(1.07); } to { transform: scale(1.02); } }
.vhero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(22, 20, 23, 0.42) 0%, rgba(22, 20, 23, 0) 26%),
  linear-gradient(0deg, rgba(22, 20, 23, 0.18) 0%, rgba(22, 20, 23, 0) 40%); }
.vhero__ridges { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; transform: translateY(calc(-0.55 * var(--label-overlap))); }
.vhero__ridges path { fill: none; stroke: var(--ink); stroke-opacity: 0.16; stroke-width: 1.4; }
.vhero__ridges path:nth-child(2) { stroke-opacity: 0.26; }
.vhero__top { position: relative; z-index: 2; padding-top: 104px; }
.vhero--photo .crumbs, .vhero--photo .crumbs a { color: rgba(255, 255, 255, 0.88); }
.vhero--photo .crumbs a:hover { color: #FFFFFF; }
.vhero__credit { position: absolute; z-index: 2; right: var(--gutter); bottom: calc(var(--label-overlap) + 34px); margin: 0;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.vhero__credit a { color: inherit; text-decoration: none; }
.vhero__credit a:hover { text-decoration: underline; }
.vhero__ridge { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; line-height: 0; color: var(--bg); }
.vhero__ridge svg { display: block; width: 100%; height: clamp(40px, 6vw, 92px); }
.vhero__ridge path { fill: currentColor; }

.vlabel { position: relative; z-index: 3; margin-top: calc(-1 * var(--label-overlap)); display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(26px, 3.6vw, 48px); border-radius: var(--r-shell); background: var(--surface);
  box-shadow: 0 1px 0 var(--line), 0 30px 70px -40px rgba(22, 20, 23, 0.45); border: 1px solid var(--line); }
.vlabel__logo { display: flex; align-items: center; justify-content: flex-start; height: clamp(64px, 6.4vw, 88px); max-width: 300px; margin-bottom: 22px; }
.vlabel__logo img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; }
.vlabel__logo--plate { background: #161417; padding: 12px 18px; border-radius: 14px; }
.vlabel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.vlabel__meta .eyebrow { margin: 0; }
.vlabel h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 0.96; max-width: 14ch; }
.vlabel__cta { margin-top: clamp(22px, 2.6vw, 32px); }
.glance { display: grid; grid-template-columns: 1fr 1fr; margin: 0; align-self: center; }
.glance__cell:nth-last-child(-n+2) { border-bottom: 0; }
.glance__cell:nth-child(-n+2) { padding-top: 6px; }
.glance__cell { padding: 20px 6px 20px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.glance__cell:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line); }
.glance__cell:nth-child(even) { padding-left: 20px; }
.glance dt { font: 500 0.7rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.glance dd { margin: 8px 0 0; font-weight: 500; font-size: 1.02rem; line-height: 1.3; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.glance__big { font-family: var(--font-display); font-weight: 200 !important; font-size: clamp(2.2rem, 3.4vw, 2.9rem) !important; letter-spacing: -0.04em; line-height: 1 !important; }
.glance__cell--unknown dd { font-weight: 400; font-style: italic; color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); flex: none; }

.vbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 80px); align-items: start; padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); }
.vbody > * { min-width: 0; }
.vintro__lead { font-size: clamp(1.18rem, 1.7vw, 1.38rem); line-height: 1.6; color: var(--ink); max-width: 34em; margin: 0; letter-spacing: -0.005em; }
.vintro__lead::first-letter { font-family: var(--font-display); font-weight: 200; float: left; font-size: 4.4em; line-height: 0.82; margin: 0.06em 0.1em 0 0; color: var(--ink); }
.vnotes { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.vnotes li { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.vnotes li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.vfacts, .where, .vevents { margin-top: clamp(52px, 6vw, 84px); }
.vfacts h2, .where h2, .vevents h2 { margin-bottom: 26px; }
/* Winery page: the next few events from the collector, linking out like /events/. */
.vevents__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vevent { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vevent__date { display: grid; justify-items: center; padding: 8px 0 7px; border-radius: 14px; background: var(--surface-2); line-height: 1; }
.vevent__date span { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.vevent__date strong { font-size: 1.45rem; font-weight: 500; margin-top: 5px; font-variant-numeric: tabular-nums; }
.vevent__title { font-size: 1.05rem; line-height: 1.3; }
.vevent__meta { margin: 5px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.88rem; color: var(--ink-3); }
.vevents__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.vevents__all:hover { text-decoration-color: var(--gold); }
.vevents__all .ico { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.vevents__all:hover .ico { transform: translateX(3px); }
@media (max-width: 560px) { .vevent { grid-template-columns: 52px minmax(0, 1fr); } .vevent .ev__go { grid-column: 2; justify-self: start; margin-top: 6px; } }
.spec { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--ink); }
.spec__row { display: grid; grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.spec__row:nth-child(even) { padding-left: 28px; }
.spec__row:nth-child(odd):not(.spec__row--wide) { padding-right: 28px; border-right: 1px solid var(--line); }
.spec__row--wide { grid-column: 1 / -1; padding-right: 0; }
.spec__row--wide ~ .spec__row:nth-child(even) { padding-left: 0; padding-right: 28px; border-right: 1px solid var(--line); }
.spec__row--wide ~ .spec__row:nth-child(odd) { padding-left: 28px; padding-right: 0; border-right: 0; }
.spec dt { display: flex; align-items: center; gap: 10px; font: 500 0.7rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.spec__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--ink-2); }
.spec__icon .ico { width: 20px; height: 20px; }
.spec__row--yes .spec__icon { color: var(--accent-text); }
.spec dd { margin: 0 0 0 36px; display: grid; gap: 6px; }
.spec__value { font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.spec__row--wide .spec__value { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; }
.spec__row--unknown .spec__value { font-weight: 400; font-style: italic; color: var(--ink-3); }
.spec__row--wide.spec__row--unknown .spec__value { font-family: var(--font-body); font-size: 1.05rem; letter-spacing: 0; }
.spec__note { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.vmain .provenance { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.86rem; overflow-wrap: anywhere; }

.vside { position: sticky; top: 96px; display: grid; gap: 16px; }
.vcard { padding: 26px; border-radius: var(--r-shell); background: var(--surface-2); }
.vcard__h { font: 500 0.7rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.vcard__rule { height: 1px; background: var(--line-strong); margin: 22px 0; }
.vcard .hours td { padding: 8px 0; }
.vcard .hours tr + tr td { border-top-color: var(--line); }
.hours__today { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; vertical-align: 2px; }
.vcard .address { font-size: 0.97rem; }
.vcard__phone { margin: 6px 0 0; }
.vcard .side__actions .btn { justify-content: space-between; }
.vcard .btn--ghost:hover { background: var(--bg); }
.vside .owner-box { padding: 26px; border-radius: var(--r-shell); }
.vside .owner-box h2 { font: 500 0.7rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin: 0; }

.vmore { padding: clamp(32px, 4vw, 56px) 0 clamp(64px, 8vw, 104px); }
.vmore h2 { margin-bottom: 26px; }
.vnear { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vnear__card { display: grid; gap: 4px; padding: 18px 18px 20px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.vnear__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--ink); }
.vnear__logo { display: flex; align-items: center; height: 64px; margin-bottom: 12px; }
.vnear__logo img { max-height: 100%; max-width: 70%; width: auto; height: auto; }
.vnear__logo--plate { background: #161417; border-radius: 10px; padding: 8px 12px; width: fit-content; max-width: 100%; }
.vnear__logo--plate img { max-width: 100%; }
.vnear__initial { width: 56px; height: 64px; display: grid; place-items: center; padding-top: 8px; border: 1.2px solid var(--ink); border-radius: 999px 999px 0 0;
  font-family: var(--font-display); font-weight: 200; font-size: 1.8rem; }
.vnear__card strong { font-weight: 500; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.25; }
.vnear__card > span:last-child { font-size: 0.86rem; color: var(--ink-3); }
.vmore__h { margin: 44px 0 14px; font: 500 0.72rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
main:has(.vmore:last-child) + .site-footer, main:has(.vpage > .vmore:last-child) + .site-footer { margin-top: 0; }
.vpage + * { margin-top: 0; }

/* Featured: offer ribbon, photo mosaic, lightbox */
.voffer { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin-top: 4px;
  padding: 16px 20px; border-radius: 16px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.voffer__tag { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-text); }
.voffer__tag .ico { width: 15px; height: 15px; color: var(--gold); }
.voffer__text { margin: 0; flex: 1 1 320px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.voffer__link { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 500 0.74rem/1 var(--font-body); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; }
.voffer__link .ico { width: 13px; height: 13px; transition: transform 0.45s var(--ease); }
.voffer__link:hover .ico { transform: translate(2px, -2px); }
.vgallery { margin-top: clamp(52px, 6vw, 84px); }
.vgallery__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.vgallery__head h2 { margin: 0; }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 12.5vw, 172px); grid-auto-flow: dense; gap: 10px; }
.mosaic__item { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.mosaic__item:hover img { transform: scale(1.05); }
.mosaic__item:first-child { border-radius: 999px 999px 14px 14px; }
.mosaic--8 .mosaic__item:nth-child(1), .mosaic--7 .mosaic__item:nth-child(1), .mosaic--6 .mosaic__item:nth-child(1), .mosaic--5 .mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic--8 .mosaic__item:nth-child(3) { grid-row: span 2; }
.mosaic--8 .mosaic__item:nth-child(4) { grid-row: span 2; }
.mosaic--8 .mosaic__item:nth-child(5) { grid-column: span 2; }
.mosaic--8 .mosaic__item:nth-child(6) { grid-row: span 2; }
.mosaic--8 .mosaic__item:nth-child(8) { grid-column: span 2; }
.vgallery__credit { margin: 12px 0 0; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-3); }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 12, 15, 0.94); color: #F6F2EC; }
.lightbox::backdrop { background: rgba(14, 12, 15, 0.6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 14px; max-width: min(92vw, 1600px); }
.lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lightbox__fig figcaption { font-size: 0.9rem; color: rgba(246, 242, 236, 0.75); text-align: center; padding: 0 16px; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(246, 242, 236, 0.25); background: rgba(246, 242, 236, 0.08);
  color: #F6F2EC; display: grid; place-items: center; cursor: pointer; transition: background 0.3s var(--ease); }
.lightbox__btn:hover { background: rgba(246, 242, 236, 0.18); }
.lightbox__btn .ico { width: 20px; height: 20px; }
.lightbox__close { top: max(18px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); }
.lightbox__prev { left: max(18px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lightbox__prev .ico { transform: rotate(180deg); }
.lightbox__next { right: max(18px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: max(18px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.2em; color: rgba(246, 242, 236, 0.7); }
html.lightbox-open { overflow: hidden; }

@media (max-width: 1080px) {
  .vbody { grid-template-columns: minmax(0, 1fr); }
  .vside { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .vnear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .vlabel { grid-template-columns: minmax(0, 1fr); }
  .vhero__credit { font-size: 0.62rem; }
}
@media (max-width: 620px) {
  .vpage { --label-overlap: 72px; }
  .vhero { height: clamp(320px, 62vh, 460px); }
  .vhero--plain { height: 240px; }
  .vlabel { padding: 22px 20px 24px; border-radius: 20px; }
  .vlabel__logo { height: 56px; margin-bottom: 16px; }
  .vlabel__cta { gap: 8px; }
  .vlabel__cta .btn { flex: 1 1 40%; justify-content: space-between; min-height: 44px; padding-left: 16px; font-size: 0.72rem; }
  .vlabel__cta .btn .btn__icon { width: 32px; height: 32px; }
  .glance__big { font-size: 2rem !important; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec__row, .spec__row:nth-child(n), .spec__row--wide ~ .spec__row:nth-child(n) { padding-left: 0; padding-right: 0; border-right: 0; }
  .vnear { grid-template-columns: minmax(0, 1fr); }
  .vintro__lead::first-letter { font-size: 3.6em; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 8px; }
  .mosaic .mosaic__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .mosaic .mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic--8 .mosaic__item:nth-child(8) { grid-column: span 2; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: none; }
  .voffer { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .vhero__media img { animation: none; } }

/* ---------------------------------------------------------------- locator map (data/map/build_maps.py) */
.where__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.map-card { position: relative; display: block; margin-top: 16px; border-radius: var(--r-shell); overflow: hidden;
  border: 1px solid var(--line); background: var(--map-bg); aspect-ratio: 12 / 7; text-decoration: none; }
.map-card svg { display: block; width: 100%; height: 100%; }
.map-card__cta { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow); font: 500 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase; transition: transform 0.4s var(--ease); }
.map-card:hover .map-card__cta { transform: translateY(-2px); }
.map-card__cta .ico { width: 15px; height: 15px; }
.where__addr { margin-top: 12px; color: var(--ink-2); font-style: normal; font-size: 0.95rem; }
.locmap .m-bg { fill: var(--map-bg); }
.locmap .m-row-bg { fill: var(--map-row-bg); }
.locmap .m-row { stroke: var(--map-row); stroke-width: 1.6; }
.locmap .m-water { fill: var(--map-water); }
.locmap .m-stream { fill: none; stroke: var(--map-water-line); stroke-width: 1; }
.locmap .m-minor, .locmap .m-link, .locmap .m-major, .locmap .m-motorway { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.locmap .m-minor { stroke-opacity: 0.16; stroke-width: 1; }
.locmap .m-link { stroke-opacity: 0.3; stroke-width: 1.2; }
.locmap .m-major { stroke-opacity: 0.52; stroke-width: 1.8; }
.locmap .m-motorway { stroke-opacity: 0.68; stroke-width: 3; }
.locmap .m-road-label { font: 500 10px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-2);
  paint-order: stroke; stroke: var(--map-bg); stroke-width: 3px; stroke-linejoin: round; }
.locmap .m-other { fill: var(--ink); fill-opacity: 0.5; stroke: var(--map-bg); stroke-width: 1.5; }
.locmap .m-pin-shadow { fill: rgba(22, 20, 23, 0.22); }
.locmap .m-pin-drop { fill: var(--gold); stroke: #161417; stroke-opacity: 0.35; stroke-width: 1; }
.locmap .m-pin-eye { fill: #FFFFFF; }
.locmap .m-label rect { fill: var(--ink); }
.locmap .m-label text { fill: var(--bg); font: 500 12.5px var(--font-body); letter-spacing: -0.005em; }
.locmap .m-scale path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.locmap .m-scale text, .locmap .m-north text { font: 500 9px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-2); }
.locmap .m-north path { fill: var(--ink); }
.locmap .m-attrib { font: 400 9px var(--font-body); fill: var(--ink-3); }
/* Wine trail maps: same base and classes, plus the trail roads and numbered stops (app/trails.php). */
.locmap .m-trail { fill: none; stroke: var(--ink); stroke-opacity: 0.38; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 6; }
.locmap .m-trail.is-on { stroke: var(--gold); stroke-opacity: 1; stroke-width: 4.5; stroke-dasharray: none; }
.locmap .m-stop-dot { fill: var(--ink); stroke: var(--map-bg); stroke-width: 1.8; }
.locmap .m-stop-dot.is-featured { fill: var(--gold); }
.locmap .m-stop circle, .locmap .m-stop rect { fill: var(--ink); stroke: var(--map-bg); stroke-width: 2;
  transition: transform 0.3s var(--ease); transform-box: fill-box; transform-origin: center; }
.locmap .m-stop text { fill: var(--bg); font: 600 10.5px var(--font-body); pointer-events: none; }
.locmap .m-stop.is-featured circle, .locmap .m-stop.is-featured rect { fill: var(--gold); }
.locmap .m-stop.is-featured text { fill: #161417; }
.locmap .m-stop:hover circle, .locmap .m-stop:focus-visible circle, .locmap .m-stop.is-hot circle { transform: scale(1.25); }
.locmap .m-stop:hover rect, .locmap .m-stop:focus-visible rect, .locmap .m-stop.is-hot rect { transform: scale(1.12); }
.locmap .m-label--link:hover rect { fill: var(--gold); }
.locmap .m-label--link:hover text { fill: #161417; }
@media (max-width: 560px) { .map-card { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------- tables (fees, operators) */
.sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; }
.sortbar__label { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.sortbar__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--sm { min-height: 36px; padding: 0 14px; font-size: 0.88rem; }
.sortbar__opts .chip { flex: none; white-space: nowrap; }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip[aria-current="true"]:hover { color: var(--surface); }
@media (max-width: 640px) {
  .sortbar__opts { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .sortbar__opts::-webkit-scrollbar { display: none; }
}
.table-wrap { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.97rem; min-width: 640px; }
.table th { text-align: left; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding: 14px 18px; background: var(--surface-2); }
.table td { padding: 14px 18px; vertical-align: top; }
.table tbody tr + tr td { border-top: 1px solid var(--line); }
.table td a { font-weight: 600; text-decoration: none; color: var(--ink); }
.table td a:hover { color: var(--accent-text); text-decoration: underline; }
.table .fee { font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; letter-spacing: -0.02em; white-space: nowrap; }
.table small { display: block; color: var(--ink-3); font-size: 0.85rem; margin-top: 2px; }
.ops { display: grid; gap: 14px; }
.op { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; padding: 22px 24px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); align-items: center; }
.op--featured { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 5%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); padding: 26px 28px; }
.op--logo { grid-template-columns: 200px minmax(0, 1fr) auto; }
.op__logo { width: 100%; max-width: none; height: 96px; }
@media (max-width: 640px) { .op--logo { grid-template-columns: minmax(0, 1fr); } .op__logo { justify-self: start; width: 170px; height: 72px; } }
.op h3 a { color: var(--ink); text-decoration: none; }
.op h3 a:hover { color: var(--accent-text); }
.op__price { text-align: right; }
.op__price strong { display: block; font-family: var(--font-display); font-weight: 200; font-size: 2.1rem; letter-spacing: -0.04em; line-height: 1.05; }
.op__price span { font-size: 0.85rem; color: var(--ink-3); }
.op__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 640px) { .op { grid-template-columns: minmax(0, 1fr); } .op__price { text-align: left; } }
.op__facts .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 18px; max-width: 640px; }
.form--wide { max-width: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field label, .field .label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.field .hint { font-size: 0.88rem; color: var(--ink-3); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"],
.field input[type="password"], .field input[type="search"], .field input[type="number"], .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r-input); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field .error, .form-error { color: #A12A1E; font-size: 0.9rem; font-weight: 500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field .error, :root:not([data-theme="light"]) .form-error { color: #F19A8E; } }
.form-error { padding: 12px 16px; border-radius: var(--r-input); background: color-mix(in srgb, #A12A1E 10%, transparent); }
.notice { padding: 14px 18px; border-radius: var(--r-input); background: var(--accent-soft); color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.panel { padding: clamp(20px, 3vw, 32px); }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; }
.plan { padding: 26px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.plan--lead { background: var(--olive); color: var(--olive-ink); border-color: transparent; }
.plan--lead h3, .plan--lead .plan__price, .plan--lead li { color: var(--olive-ink); }
.plan--lead .checklist .ico { color: var(--champagne); }
.plan--lead .btn { --b-bg: #F6F2EC; --b-ink: #161417; }
.plan--lead .btn:hover { background: #FFFFFF; color: #161417; }
.plan__price { font-family: var(--font-display); font-weight: 200; font-size: 3rem; letter-spacing: -0.04em; line-height: 1; }
.plan__price small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; opacity: 0.8; }
.plan .checklist { font-size: 0.97rem; }
.plan .btn { margin-top: auto; justify-content: space-between; }

/* ---------------------------------------------------------------- footer: charcoal band, bone ink */
/* Footer: a hill-line ridge opens it, a closing headline with two actions, then four columns and the legal row. */
.site-footer { position: relative; margin-top: clamp(80px, 10vw, 150px); padding: 0 0 36px; background: #161417; color: #F6F2EC; }
/* "Plan your visit": a photo band lighter than the footer. Fallback fill is the same mid-charcoal the wash lands on. */
.footer-band { position: relative; isolation: isolate; overflow: hidden; background: #3A3734;
  padding: clamp(72px, 9vw, 128px) 0 calc(clamp(28px, 4.4vw, 64px) + clamp(56px, 6vw, 88px)); }
.footer-band__media, .footer-band__media img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.footer-band__media img { object-fit: cover; object-position: 50% 62%; filter: saturate(0.72); }
.footer-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(22, 20, 23, 0.74) 0%, rgba(22, 20, 23, 0.56) 48%, rgba(22, 20, 23, 0.46) 100%),
              linear-gradient(180deg, rgba(22, 20, 23, 0.18) 0%, rgba(22, 20, 23, 0) 40%); }
.footer-ridge { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
.footer-ridge svg { display: block; width: 100%; height: clamp(28px, 4.4vw, 64px); }
.footer-ridge path { fill: #161417; }
.site-footer a { color: rgba(246, 242, 236, 0.8); text-decoration: none; transition: color 0.3s var(--ease); }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

.footer-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.footer-band + .wrap { padding-top: clamp(40px, 5vw, 64px); }
.footer-cta__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 242, 236, 0.82); }
.footer-cta__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.footer-cta__title { margin: 0; font: 200 clamp(2.4rem, 5.4vw, 4.6rem)/0.98 var(--font-display); text-transform: uppercase; letter-spacing: -0.035em; color: #F6F2EC; }
.footer-cta__title .script { color: var(--champagne); font-size: 1.08em; margin-left: 0.04em; }
.footer-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-footer .btn--light { color: #161417; }
.site-footer .btn--light:hover { text-decoration: none; color: #161417; }
.footer-cta__ghost { --b-bg: transparent; --b-ink: #F6F2EC; background: rgba(22, 20, 23, 0.28); box-shadow: inset 0 0 0 1px rgba(246, 242, 236, 0.5); }
.site-footer .footer-cta__ghost { color: #F6F2EC; }
.site-footer .footer-cta__ghost:hover { background: rgba(22, 20, 23, 0.5); box-shadow: inset 0 0 0 1px #F6F2EC; color: #FFFFFF; text-decoration: none; }

/* Top tier: brand, then three short link columns. Bottom tier: the full-width index of filter pages. */
.footer-grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); }
.footer-brand { display: block; color: #F6F2EC; max-width: 280px; }
.footer-brand svg { display: block; width: 100%; height: auto; }
.footer-about { margin-top: 22px; }
.footer-social { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 10px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(246, 242, 236, 0.22); color: rgba(246, 242, 236, 0.85);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-social a:hover { background: #F6F2EC; border-color: #F6F2EC; color: #161417; text-decoration: none; }
.footer-social .ico { width: 20px; height: 20px; }
.footer-grid h2, .footer-index h2 { font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 242, 236, 0.5); margin: 4px 0 20px; }
/* Links carry their own 5px of vertical padding (a ~30px tap target) instead of list gap. */
.footer-grid ul { list-style: none; padding: 0; margin: -5px 0 0; display: grid; gap: 1px; }
.footer-grid li a { display: inline-block; padding-block: 5px; font-size: 0.95rem; }
.footer-grid p { color: rgba(246, 242, 236, 0.68); font-size: 0.93rem; line-height: 1.6; max-width: 36ch; }
.footer-index { margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid rgba(246, 242, 236, 0.12); }
.footer-index ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.footer-index li { border-bottom: 1px solid rgba(246, 242, 236, 0.07); }
.footer-index a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 0.95rem; }
.site-footer .footer-index a:hover { text-decoration: none; color: #FFFFFF; }
.site-footer .footer-index a:hover span:first-child { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.footer-index__n { flex: none; font-size: 0.8rem; color: rgba(246, 242, 236, 0.42); }
.footer-legal { margin-top: clamp(44px, 5vw, 64px); padding-top: 24px; border-top: 1px solid rgba(246, 242, 236, 0.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 0.84rem; color: rgba(246, 242, 236, 0.55); }
.footer-legal__links { display: inline-flex; align-items: center; gap: 22px; }
.footer-legal__links a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-legal a { color: rgba(246, 242, 236, 0.72); }
.footer-top { display: inline-flex; align-items: center; gap: 8px; }
.footer-top__ico { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform 0.45s var(--ease); }
.footer-top:hover .footer-top__ico { transform: rotate(-90deg) translateX(2px); }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-col--brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 8px 48px; align-items: start; } .footer-col--brand .footer-about { margin-top: 0; } .footer-col--brand .footer-social { grid-column: 2; margin-top: 4px; } .footer-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-col--brand { display: block; } .footer-col--brand .footer-about { margin-top: 22px; } .footer-cta { align-items: flex-start; } .footer-index ul { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .footer-grid > .footer-col:last-child { grid-column: 1 / -1; } .footer-cta__actions { width: 100%; } .footer-cta__actions .btn { flex: 1 1 auto; justify-content: space-between; } .footer-cta__ghost { justify-content: center !important; } }

/* ---------------------------------------------------------------- portal / admin */
.app { padding: 32px 0 64px; }
.app__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.app__nav a, .app__nav button { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font: 500 0.95rem var(--font-body); background: none; border: 0; cursor: pointer; }
.app__nav a[aria-current="page"], .app__nav a:hover, .app__nav button:hover { background: var(--surface-2); color: var(--ink); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { padding: 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.stat strong { display: block; font-family: var(--font-display); font-weight: 200; font-size: 2.2rem; letter-spacing: -0.04em; }
.stat span { color: var(--ink-3); font-size: 0.9rem; }
.diff { width: 100%; border-collapse: collapse; }
.diff th, .diff td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------------------------------------------------------------- reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- admin and portal compatibility
   The admin and owner portal templates came from the Temecula Medical Center engine. These map its
   class names onto this design system so the internal screens match without a rewrite. */
.small { font-size: 0.9rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; }
.card.panel, .panel.card, section.card { padding: clamp(20px, 3vw, 28px); margin-bottom: 16px; }
.card h2, .panel h2 { font-size: 1.35rem; margin-bottom: 14px; }
.shell__inner { border-radius: calc(var(--r-shell) - 6px); background: var(--surface); padding: 24px; box-shadow: var(--inner-hi); }
.hub-head { padding: 28px 0 20px; }
.hub-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.hub-head__meta, .hub-head__intro { color: var(--ink-2); margin-top: 8px; }
.field__help { font-size: 0.88rem; color: var(--ink-3); margin: 0; }
.field__error { color: #A12A1E; font-size: 0.9rem; font-weight: 500; margin: 0; }
.btn--primary { --b-bg: var(--accent); --b-ink: var(--accent-ink); padding: 6px 22px; }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { min-height: 52px; }
.notice--ok { background: var(--accent-soft); }
.notice--error { background: color-mix(in srgb, #A12A1E 12%, transparent); }
.notice p { margin: 0; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.badge--preferred, .badge--premium { background: var(--accent-soft); color: var(--accent-text); }
.badge--warn { background: color-mix(in srgb, #A12A1E 12%, transparent); color: #A12A1E; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.aside { display: grid; gap: 16px; position: sticky; top: 96px; }
.stack { display: grid; gap: var(--gap, 1rem); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.results { display: grid; gap: 12px; }
.entry { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.entry__body { display: flex; gap: 14px; min-width: 0; }
.entry__side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.entry__tags, .entry__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; color: var(--ink-3); font-size: 0.9rem; }
.breadcrumb { display: flex; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; font-size: 0.9rem; color: var(--ink-3); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.stat__value { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 200; letter-spacing: -0.04em; }
.stat__label { color: var(--ink-3); font-size: 0.9rem; }
.admin-auth { max-width: 440px; margin: 48px auto; }
.admin-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.admin-bar__tag { font-weight: 600; }
.admin-bar__who { color: var(--ink-3); font-size: 0.9rem; }
.admin-table__sub { display: block; color: var(--ink-3); font-size: 0.85rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; font: inherit; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.filter { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-2); }
.filter--on { background: var(--accent); color: var(--accent-ink); }
.ico--line { stroke-width: 2.4; }
.panel--locked { opacity: 0.6; }
.photo-current img { border-radius: 12px; max-width: 220px; }
.claim-strip, .billing-section { margin: 16px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
table.admin, .admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* Finder selects share each row evenly instead of stacking at their natural widths. */
.filters__row > label:not(.search) { flex: 1 1 150px; }
.filters__row .select { width: 100%; }

/* ---------------------------------------------------------------- search page */
.search-head h1 { max-width: 24ch; overflow-wrap: anywhere; }
.search-big {
  margin-top: 24px; max-width: 760px; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.search-big:focus-within { border-color: var(--ink-3); box-shadow: var(--shadow-lift); }
.search-big > .ico { width: 22px; height: 22px; color: var(--ink-3); }
.search-big input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 1.1rem/1.4 var(--font-body); color: var(--ink); padding: 10px 0; }
.search-big input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-count { margin: 16px 0 0; }
.search-sec, .search-empty { margin-top: clamp(28px, 4vw, 48px); }
.search-sec__title { font: 500 0.78rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.search-sec__title .muted { letter-spacing: 0.05em; }
.search-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.search-guides a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.search-guides a:hover { border-color: var(--ink-3); color: var(--ink); }
.search-guides a:active { transform: scale(0.99); }
.search-guides span { display: grid; gap: 3px; }
.search-guides strong { font-weight: 500; }
.search-guides small { color: var(--ink-3); font-size: 0.86rem; }
.search-guides .ico { width: 20px; height: 20px; color: var(--ink-3); flex: none; }

/* ---------------------------------------------------------------- wine trails */
.thero { position: relative; margin-top: -79px; min-height: clamp(460px, 68vh, 700px); display: flex; align-items: flex-end; overflow: hidden; background: #2b2a26; isolation: isolate; color: #FFFFFF; }
.thero__media, .thero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.thero__media img { object-fit: cover; }
.thero__media img { animation: vhero-in 1.8s var(--ease) both; }
.thero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(22, 20, 23, 0.45) 0%, rgba(22, 20, 23, 0) 24%),
  linear-gradient(90deg, rgba(22, 20, 23, 0.58) 0%, rgba(22, 20, 23, 0.28) 45%, rgba(22, 20, 23, 0) 72%),
  linear-gradient(0deg, rgba(22, 20, 23, 0.72) 0%, rgba(22, 20, 23, 0.30) 42%, rgba(22, 20, 23, 0) 70%); }
@media (max-width: 760px) { .thero__shade { background:
  linear-gradient(180deg, rgba(22, 20, 23, 0.45) 0%, rgba(22, 20, 23, 0) 24%),
  linear-gradient(0deg, rgba(22, 20, 23, 0.80) 0%, rgba(22, 20, 23, 0.45) 55%, rgba(22, 20, 23, 0.15) 100%); } }
.thero__inner { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: clamp(72px, 9vw, 120px); }
.thero .crumbs, .thero .crumbs a { color: rgba(255, 255, 255, 0.86); }
.thero .crumbs a:hover { color: #FFFFFF; }
.thero__kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 0.76rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin: 18px 0 14px; }
.thero__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.thero h1 { color: #FFFFFF; font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 16ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.thero h1 .script { font-size: 1.15em; }
.thero__lede { margin: 18px 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, 0.92); }
@media (prefers-reduced-motion: reduce) { .thero__media img { animation: none; } }

.trail-sec__title { font: 500 0.78rem/1.4 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 20px; }
.trail-sec__title .muted { letter-spacing: 0.06em; text-transform: none; font-size: 0.92rem; margin-left: 6px; }

.trail-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 5vw, 56px); }
.trail-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0; }
.trail-stats dt { font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.trail-stats dd { margin: 8px 0 0; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; }
.trail-stats dd small { font-size: 0.4em; letter-spacing: 0.02em; color: var(--ink-3); }
@media (max-width: 820px) { .trail-intro { grid-template-columns: 1fr; } }

.trail-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-bottom: clamp(40px, 6vw, 72px); }
.trail-map { position: sticky; top: 100px; }
.trail-map__card { margin-top: 0; }
.trail-map .trail-map__card { aspect-ratio: 6 / 5; }
.trails-overview .trail-map__card { aspect-ratio: 12 / 7; }   /* never crop the overview: its pills sit near the edges */
.trail-map__note { margin: 10px 4px 0; font-size: 0.82rem; color: var(--ink-3); }
@media (max-width: 960px) { .trail-layout { grid-template-columns: 1fr; } .trail-map { position: static; order: -1; } }

/* Stops: a numbered timeline. */
.stops { list-style: none; margin: 0 0 18px; padding: 0; position: relative; }
.stop { position: relative; padding-left: 58px; }
.stop + .stop { margin-top: 14px; }
.stop::before { content: ""; position: absolute; left: 19px; top: 0; bottom: -14px; width: 2px; background: var(--line-strong); }
.stop:first-child::before { top: 22px; }
.stop:last-child::before { bottom: auto; height: 22px; }
.stop:only-child::before { display: none; }
.stop__num { position: absolute; left: 0; top: 2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); font: 600 0.95rem/1 var(--font-body); box-shadow: 0 0 0 5px var(--bg); }
.stop--featured .stop__num { background: var(--gold); color: #161417; }
.stop__gap { display: block; margin: -2px 0 8px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stop__card { position: relative; padding: 18px 20px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.stop__card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.stop--featured .stop__card { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.stop__head { display: flex; gap: 16px; align-items: flex-start; }
.stop__head > div:first-child { flex: 1; min-width: 0; }
.stop h3 { font-size: 1.15rem; }
.stop h3 a { color: var(--ink); text-decoration: none; }
.stop h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stop h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.stop .tag--featured { margin-bottom: 8px; }
.stop__street { margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-3); }
.stop__logo { height: 64px; max-width: 120px; padding: 6px 10px; border-radius: 12px; }
.stop__fee { text-align: right; flex: none; }
.stop__fee strong { display: block; font-family: var(--font-display); font-weight: 200; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; }
.stop__fee span { font-size: 0.78rem; color: var(--ink-3); }
.stop__fee em { font-size: 0.86rem; color: var(--ink-3); }
.stop .card__offer { margin: 10px 0 0; }
.stop__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.stop__today { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink-2); margin-right: 6px; }
.stop__today .ico { width: 15px; height: 15px; color: var(--ink-3); }
.stop__today.is-open .ico { color: var(--accent-text); }
@media (max-width: 520px) { .stop { padding-left: 48px; } .stop__num { width: 34px; height: 34px; } .stop::before { left: 16px; } .stop__logo { display: none; } }

.trail-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.trail-tips h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.trail-tips p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.trail-tips__ico { width: 30px; height: 30px; color: var(--ink); }
@media (max-width: 980px) { .trail-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trail-tips { grid-template-columns: 1fr; } }

/* Trail cards */
.trail-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.trail-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
@media (max-width: 900px) { .trail-cards { grid-template-columns: 1fr; } .trail-cards--two { grid-template-columns: 1fr; } }
.tcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s; }
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.tcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.tcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tcard:hover .tcard__media img { transform: scale(1.04); }
.tcard__body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tcard__kicker { margin: 0; font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.tcard h3 { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.02; }
.tcard h3 a { color: var(--ink); text-decoration: none; }
.tcard h3 a::after { content: ""; position: absolute; inset: 0; }
.tcard__facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 0.92rem; }
.tcard__facts strong { font-weight: 600; color: var(--ink); }
.tcard__cta { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 10px; font: 500 0.74rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.tcard:hover .card__cta-ico { transform: translateX(3px); }

.trails-overview { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.trails-overview__text p { color: var(--ink-2); }
.trails-overview__text h2 { margin-bottom: 18px; }
.trails-legend { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.trails-legend a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-weight: 500; }
.trails-legend a:hover span:first-child { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
@media (max-width: 900px) { .trails-overview { grid-template-columns: 1fr; } }

.trail-off { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trail-off__item { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 20px 22px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.3s var(--ease); }
.trail-off__item:hover { border-color: var(--ink-3); color: var(--ink); }
.trail-off__item strong { font-weight: 600; }
.trail-off__item span { grid-column: 1; color: var(--ink-2); font-size: 0.92rem; }
.trail-off__item .ico { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; color: var(--ink-3); }
@media (max-width: 900px) { .trail-off { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- home: wine trails band (dark, aerial loop) */
.btn--light { --b-bg: #FFFFFF; --b-ink: #161417; }
.btn--light:hover { background: #F6F2EC; color: #161417; }
.btn--light .btn__icon { background: #161417; color: #FFFFFF; }
.htrails { position: relative; isolation: isolate; overflow: hidden; background: #1d1c1a; color: #F6F2EC; padding: clamp(110px, 12vw, 170px) 0; }
.htrails__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.htrails__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(22, 20, 23, 0.86) 0%, rgba(22, 20, 23, 0.62) 48%, rgba(22, 20, 23, 0.40) 100%); }
.htrails__ridge { position: absolute; z-index: 1; left: 0; right: 0; line-height: 0; color: var(--bg); }
.htrails__ridge svg { display: block; width: 100%; height: clamp(40px, 6vw, 92px); }
.htrails__ridge path { fill: currentColor; }
.htrails__ridge--top { top: -2px; }
.htrails--after-band .htrails__ridge--top { color: var(--surface-2); }
.htrails__ridge--bottom { bottom: -1px; }
.htrails--before-band .htrails__ridge--bottom { color: var(--surface-2); }
.htrails__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.htrails .eyebrow { color: rgba(246, 242, 236, 0.75); }
.htrails h2 { color: #FFFFFF; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.htrails h2 .script { font-size: 1.2em; }
.htrails__text p { margin: 18px 0 30px; color: rgba(246, 242, 236, 0.86); font-size: 1.08rem; max-width: 44ch; }
.htrails__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(246, 242, 236, 0.22); }
.htrails__list li { border-bottom: 1px solid rgba(246, 242, 236, 0.22); }
.htrails__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 4px; color: #FFFFFF; text-decoration: none; }
.htrails__num { font-family: var(--font-display); font-weight: 200; font-size: 1.1rem; letter-spacing: 0.06em; color: var(--gold); }
.htrails__name { display: grid; gap: 4px; }
.htrails__name small { font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246, 242, 236, 0.62); }
.htrails__name strong { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; font-size: clamp(1.45rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05; }
.htrails__facts { font-size: 0.9rem; color: rgba(246, 242, 236, 0.78); }
.htrails__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(246, 242, 236, 0.35); transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.45s var(--ease), border-color 0.35s var(--ease); }
.htrails__go .ico { width: 18px; height: 18px; }
.htrails__list a:hover .htrails__go, .htrails__list a:focus-visible .htrails__go { background: #FFFFFF; color: #161417; border-color: #FFFFFF; transform: translateX(4px); }
.htrails__list a:hover strong { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 900px) {
  .htrails__inner { grid-template-columns: 1fr; }
  .htrails__shade { background: linear-gradient(180deg, rgba(22, 20, 23, 0.82) 0%, rgba(22, 20, 23, 0.70) 100%); }
}
@media (max-width: 520px) { .htrails__list a { gap: 14px; } .htrails__go { width: 38px; height: 38px; } }

/* ---------------------------------------------------------------- endless flyover
   A seamless straight-down vineyard tile (generated with Higgsfield, folded so its bottom runs into its
   top) slides down one tile height per cycle: an endless drone flyover with no seam and no video file.
   The tile covers like object-fit: cover (at least the box width, or 16:9 of its height), and the speed
   runs at half the real drone's speed: 2.5% of the tile width per second. */
.flyover { overflow: hidden; container-type: size; background: #2b2a26; }
.flyover::before {
  --fly-ratio: 1.140625;                                   /* tile height / width (1825 / 1600) */
  --fly-w: max(100cqw, 177.78cqh);
  --fly-h: calc(var(--fly-w) * var(--fly-ratio));
  content: ""; position: absolute; top: 0; left: 50%;
  width: var(--fly-w); height: calc(100cqh + var(--fly-h));
  background: #B39061 url("/assets/img/trails/flyover-tile.webp") center top / 100% auto repeat-y;   /* base = tile edge average, hides any rounding gap */
  transform: translate3d(-50%, calc(-1 * var(--fly-h)), 0);
  animation: flyover 45.6s linear infinite;
  will-change: transform;
}
@keyframes flyover { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .flyover::before { animation: none; } }

/* ---------------------------------------------------------------- tour and balloon pages (winery template) */
.vcard__price { margin: 6px 0 14px; display: grid; gap: 4px; }
.vcard__price strong { font-size: clamp(2.4rem, 3.6vw, 3rem); line-height: 1; }
.vcard__price span { font-size: 0.85rem; color: var(--ink-3); }
.vcard__note { margin: 16px 0 0; font-size: 0.88rem; color: var(--ink-3); }
.trail-stats dd.thero-stat-text { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* ---------------------------------------------------------------- home hero: First light
   A pinned, scroll-scrubbed flight: a balloon lifts off at dawn, climbs into the sunrise and looks straight
   down; the photo then dissolves into the real map of the valley, the trails draw and every winery drops
   in as a pin. Without JS, or with reduced motion, it is a still hero (poster + headline + buttons).
   site.js adds .fl--live (the head script adds .fl-anim to html even earlier, so the layout never jumps) and drives the CSS variables below. */
.fl { position: relative; margin-top: -79px; }
.fl__track { position: relative; height: 100svh; min-height: 560px; }
:is(.fl--live, .fl-anim .fl) .fl__track { height: calc(100svh + 340vh); }
.fl__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: #1d1c1a; color: #FFFFFF; }
.fl__poster, .fl__poster img, .fl__video, .fl__map, .fl__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl__poster img, .fl__video { object-fit: cover; object-position: 60% 50%; }
.fl__video { opacity: 0; transition: opacity 0.6s var(--ease); }
.fl.is-video .fl__video { opacity: 1; }
.fl__map { opacity: 0; background: var(--map-bg); pointer-events: none; }
/* The map is drawn 16:9; it is sized to the stage height and slid so wine country (centre --cx of the
   drawing) lands at --focus of the screen: right of the headline on desktop, centred on phones. */
.fl__map { --focus: 0.68; --mh: 1; container-type: size; }
/* The box keeps the drawing's exact 16:9 shape (overflowing the stage when needed) so the HTML callouts,
   placed by percentage, land on the same spots as the SVG under them. */
.fl__mapbox { --mw: max(100cqw, calc(var(--mh) * 100cqh * 1.7778)); position: absolute;
  width: var(--mw); height: calc(var(--mw) / 1.7778);
  left: calc(var(--focus) * 100cqw - var(--cx, 0.5) * var(--mw));
  top: calc((var(--mh) * 100cqh - var(--mw) / 1.7778) / 2); }
.fl__mapbox svg { display: block; width: 100%; height: 100%; max-width: none; }
.fl__pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; white-space: nowrap;
  font: 500 0.78rem/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
  opacity: var(--labels, 1); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.fl__pill:hover, .fl__pill:focus-visible { background: var(--gold); color: #161417; }
.fl__pill--below { transform: translate(-50%, 18px); }
.fl__pill--above { transform: translate(-50%, calc(-100% - 18px)); }
.fl__pill--left { transform: translate(calc(-100% - 18px), -50%); }
.fl__pill--right { transform: translate(18px, -50%); }
.fl__map::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 34%, transparent 62%); }
.fl__shade { pointer-events: none; background:
  linear-gradient(180deg, rgba(22, 20, 23, 0.42) 0%, rgba(22, 20, 23, 0) 22%),
  linear-gradient(90deg, rgba(22, 20, 23, 0.62) 0%, rgba(22, 20, 23, 0.25) 46%, rgba(22, 20, 23, 0) 70%),
  linear-gradient(0deg, rgba(22, 20, 23, 0.55) 0%, rgba(22, 20, 23, 0) 45%); }
.fl__beats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fl__beat { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(84px, 13vh, 150px); max-width: 820px; }
.fl__beat--2, .fl__beat--3 { display: none; }
:is(.fl--live, .fl-anim .fl) .fl__beat--2, :is(.fl--live, .fl-anim .fl) .fl__beat--3 { display: block; }
:is(.fl--live, .fl-anim .fl) .fl__beat { --k: 0; opacity: var(--k); transform: translate3d(0, calc((1 - var(--k)) * 26px), 0); will-change: opacity, transform; }
:is(.fl--live, .fl-anim .fl) .fl__beat--1 { --k: 1; }
/* The text blocks never catch the pointer themselves (their boxes overlap the map); only their controls do. */
.fl__beat.is-on :is(a, form, button, input), .fl:not(.fl--live) .fl__beat--1 :is(a, form, button, input) { pointer-events: auto; }
.fl__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 0.78rem/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); }
.fl__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.fl__kicker--ink { color: var(--ink-2); }
/* The kicker sits inside the H1 (it carries the search phrase) but keeps its own small type, on its own line. */
.fl h1 .fl__kicker { display: flex; width: max-content; max-width: 100%; text-shadow: none; line-height: 1.2; }
@media (max-width: 480px) { .fl__kicker-more { display: none; } }
.fl h1, .fl__big { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.94;
  font-size: clamp(2.7rem, 7.2vw, 6.4rem); color: #FFFFFF; margin: 0; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.22); max-width: 13ch; }
.fl h1 .script, .fl__big .script { font-size: 1.12em; margin: 0 0.12em 0 0.05em; }
.fl__beat--3 { max-width: 600px; }
.fl__beat--3 .fl__big { color: var(--ink); text-shadow: none; font-size: clamp(2.4rem, 5vw, 4.5rem); max-width: none; }
.fl__big .fl__script-line { display: inline-block; margin: 0.06em 0 0; line-height: 1.05; }
.fl__lede { margin: 20px 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.fl__cta { margin-top: 28px; }
.fl__ghost { --b-bg: transparent; --b-ink: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.fl__ghost:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.fl__search { margin-top: 26px; max-width: 620px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.fl__search > .ico { width: 21px; height: 21px; color: var(--ink-3); }
.fl__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 1.05rem/1.4 var(--font-body); color: var(--ink); padding: 9px 0; }
.fl__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fl__beat--3 .fl__cta { margin-top: 18px; }
.fl__cue { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(84px, 13vh, 150px); display: none; flex-direction: column; align-items: center; gap: 10px;
  font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
:is(.fl--live, .fl-anim .fl) .fl__cue { display: flex; }
.fl__cue i { width: 22px; height: 36px; border: 1.5px solid currentColor; border-radius: 12px; position: relative; }
.fl__cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: fl-cue 1.8s var(--ease) infinite; }
@keyframes fl-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.fl__progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; display: none; background: rgba(255, 255, 255, 0.18); }
:is(.fl--live, .fl-anim .fl) .fl__progress { display: block; }
/* The hero ends in the brand's hill curve, filled with the band colour of the next section, so the two meet
   along one wave (instead of a flat edge followed by a separate wave). */
.fl__ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; color: var(--surface-2); pointer-events: none; }
.fl__ridge svg { display: block; width: 100%; height: clamp(40px, 6vw, 92px); }
.fl__ridge path { fill: currentColor; }
.fl-next { padding-top: clamp(32px, 4vw, 64px); }
.fl__progress i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* Map layer: pins scale in west to east from one variable (--pins 0..1); labels fade on --labels. */
.fl__map .m-heropin circle { fill: var(--ink); stroke: var(--map-bg); stroke-width: 2.6; transform-box: fill-box; transform-origin: center;
  transform: scale(clamp(0, calc((var(--pins, 1) - var(--i) * 0.8) * 5), 1)); }
.fl__map .m-heropin.is-featured circle { fill: var(--gold); }
.fl__map .m-heropin:hover circle { fill: var(--gold); }
@media (max-width: 700px) {
  .fl__map { --focus: 0.5; --mh: 0.62; }
  .fl__pill--above { transform: translate(-14px, calc(-100% - 14px)); }   /* centred, it runs off the left edge */
  .fl__poster img, .fl__video { object-position: 50% 50%; }
  .fl__map::after { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 46%, transparent 72%); }
  .fl__beat { bottom: 64px; }
  .fl__cue { display: none !important; }
  .fl__search { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fl__cue i::after { animation: none; } }

/* Map hover card (site.js initMapCards), shared by the home hero map and the wine trail maps. */
.trail-map__wrap { position: relative; }
.mapcard { --shift: 0px; position: absolute; z-index: 6; width: 216px; padding: 0; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  transform: translate(calc(-50% + var(--shift)), calc(-100% - 16px)); opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.35s var(--ease); }
.mapcard[hidden] { display: none; }
.mapcard.is-on { opacity: 1; }
.mapcard::after { content: ""; position: absolute; left: calc(50% - var(--shift)); bottom: -7px; width: 13px; height: 13px; margin-left: -6.5px;
  background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.mapcard--below { transform: translate(calc(-50% + var(--shift)), 16px); }
.mapcard--below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.mapcard__link { display: grid; justify-items: center; gap: 8px; padding: 14px 16px 12px; color: var(--ink); text-decoration: none; border-radius: inherit; }
.mapcard__logo { width: 100%; height: 68px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 10px; background: #FFFFFF; }
/* Sized to the box, not by % max-limits: a flex item's % max-width is ignored when a big logo finishes loading
   after the card is drawn (it showed at full size until a hover forced a re-layout). contain keeps the shape. */
.mapcard__logo img { display: block; width: 100%; height: 100%; min-width: 0; max-width: none; object-fit: contain; }
.mapcard__logo.is-plate { background: #161417; }
.mapcard__name { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.32rem; line-height: 1.05; text-align: center; }
.mapcard__link.has-logo .mapcard__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mapcard__go { display: inline-flex; align-items: center; gap: 6px; font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.mapcard .ico { width: 13px; height: 13px; flex: none; transition: transform 0.35s var(--ease); }
.mapcard__link:hover { color: var(--ink); }
.mapcard__link:hover .mapcard__go { color: var(--ink); }
.mapcard__link:hover .ico, .mapcard__row:hover .ico { transform: translateX(3px); }
.mapcard--list { width: 250px; padding: 8px; }
.mapcard__head { display: block; padding: 6px 8px 8px; font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.mapcard__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.mapcard__row:hover { background: var(--surface-2); color: var(--ink); }
.mapcard__row .ico { color: var(--ink-3); }
.mapcard__n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 600 0.72rem/1 var(--font-body); }
.fl__map .m-heropin.is-hot circle, .locmap .m-dotpin.is-hot circle, .locmap .m-otherpin.is-hot circle { fill: var(--gold); fill-opacity: 1; }
.locmap .m-otherpin circle, .locmap .m-dotpin circle { transition: fill 0.2s var(--ease); }

/* Home "Start here": the link to the full list sits under the last card, right-aligned. */
.spot-more { display: flex; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 700px) { .spot-more { justify-content: stretch; } .spot-more .btn { width: 100%; justify-content: space-between; } }

/* ---------------------------------------------------------------- events calendar */
.evbar { position: sticky; top: 79px; z-index: 5; display: grid; gap: 10px; padding: 14px 0 12px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.evbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.evbar__views { display: flex; gap: 6px; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--line); }
.evbar__area select { min-height: 36px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 0.88rem/1 var(--font-body); }
.evbar__types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.evbar__types::-webkit-scrollbar { display: none; }
.evbar__types .chip { flex: none; }
.evbar__n { color: var(--ink-3); font-weight: 400; margin-left: 2px; }
.chip[aria-pressed="true"] .evbar__n { color: inherit; opacity: 0.75; }
.evcount { margin: 14px 0 6px; color: var(--ink-3); font-size: 0.92rem; }
.evcount strong { color: var(--ink); }

.evday { padding-top: 26px; scroll-margin-top: 190px; }
.evday[hidden] { display: none; }
.evday__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.evday__h > span:first-child { color: var(--ink-3); }
.evday__h .tag { font-family: var(--font-body); text-transform: none; letter-spacing: 0.04em; align-self: center; }
.evday__list { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 6px 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ev[hidden] { display: none; }
.ev__time { font-weight: 500; color: var(--ink-2); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.ev__title { font-size: 1.12rem; line-height: 1.3; }
.ev__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 0.9rem; color: var(--ink-3); }
.ev__winery { display: inline-block; padding-block: 4px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 3px; }
.ev__winery:hover { text-decoration-color: var(--gold); color: var(--ink); }
.ev__type { display: inline-flex; align-items: center; gap: 7px; }
.ev__price { font-weight: 500; color: var(--ink-2); }
.ev__go { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink);
  font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.ev__go::after { content: "\2197"; font-size: 0.95rem; letter-spacing: 0; }
.ev__go:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (max-width: 760px) {
  .ev { grid-template-columns: minmax(0, 1fr) auto; }
  .ev__time { grid-column: 1 / -1; font-size: 0.86rem; }
  /* Four rows of filters would cover a quarter of a phone screen, so the bar scrolls away here. */
  .evbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .evbar__views { border-right: 0; padding-right: 0; margin-right: 0; }
  .evday { scroll-margin-top: 84px; }
}
/* Type colours: small dots only, from the brand palette. */
.evcal__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-strong); }
.evcal__dot--music { background: var(--gold); }
.evcal__dot--food { background: #5E6052; }
.evcal__dot--deals { background: #D9C190; }
.evcal__dot--class { background: #6E6964; }
.evcal__dot--games { background: var(--ink); }
.evcal__dot--holiday { background: #8B2E3C; }

.evmonths[hidden], .evcal[hidden] { display: none; }
.evcal { padding-top: 22px; }
.evcal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.evcal__head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.evcal__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.evcal__nav .ico { width: 18px; height: 18px; transform: rotate(180deg); }
.evcal__nav--next .ico { transform: none; }
.evcal__nav:disabled { opacity: 0.35; cursor: default; }
.evcal__nav:not(:disabled):hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.evcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.evcal__dow { padding: 10px 8px; font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evcal__cell { min-height: 118px; padding: 8px 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evcal__cell.is-blank { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.evcal__cell.is-past { opacity: 0.45; }
.evcal__num { font-weight: 600; font-size: 0.86rem; color: var(--ink-2); margin: 0 2px 2px; }
.evcal__cell.is-today .evcal__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); }
.evcal__ev { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 6px; font-size: 0.76rem; line-height: 1.25; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evcal__ev:hover { background: var(--surface-2); color: var(--ink); }
.evcal__ev[hidden], .evcal__more[hidden] { display: none; }
.evcal__more { margin-top: auto; padding: 2px 5px; font: 600 0.72rem/1.2 var(--font-body); color: var(--ink-2); text-decoration: none; }
.evcal__more:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) {
  .evcal__cell { min-height: 64px; padding: 6px 3px; }
  .evcal__ev { font-size: 0; padding: 0; gap: 0; display: inline-flex; }
  .evcal__ev .evcal__dot { width: 7px; height: 7px; margin: 1px; }
  .evcal__cell { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .evcal__num { width: 100%; }
  .evcal__more { display: none !important; }
}

/* ---------------------------------------------------------------- home: this week's events */
.hevents__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.hevents__intro { position: sticky; top: 120px; }
.hevents__lede { color: var(--ink-2); margin: 18px 0 0; max-width: 44ch; }
.hevents__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px clamp(22px, 3vw, 40px); margin: 30px 0 34px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.hevents__stats dt { font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.hevents__stats dd { margin: 10px 0 0; font: 200 clamp(2.2rem, 3.6vw, 3rem)/1 var(--font-display); letter-spacing: -0.04em; }

.hevents__board { padding: clamp(10px, 1.4vw, 14px); border-radius: 30px; background: var(--surface-2); box-shadow: var(--inner-hi); }
.hevents__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hevents__day { display: grid; justify-items: start; gap: 6px; padding: 14px 14px 13px; border: 0; border-radius: 20px; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.4s var(--ease); }
.hevents__day:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.hevents__day:active { transform: scale(0.98); }
.hevents__day[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.hevents__dow { font: 500 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.hevents__date { font: 200 2.3rem/0.9 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hevents__n { font-size: 0.78rem; opacity: 0.7; white-space: nowrap; }
.hevents__panel { margin-top: 10px; padding: 6px 20px 18px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); animation: hev-in 0.5s var(--ease); }
.hevents__panel[hidden] { display: none; }
/* On the bone band the board turns white and the day list sits on the page ground, so the layers still read. */
.band .hevents__board { background: var(--surface); box-shadow: var(--shadow); }
.band .hevents__day:hover { background: var(--surface-2); }
.band .hevents__panel { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.hev__title { margin: 0; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
@keyframes hev-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hevents__list { list-style: none; margin: 0; padding: 0; }
.hev { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hev__time { font-size: 0.86rem; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hev__title { font-size: 1.02rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hev__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.86rem; color: var(--ink-3); }
.hevents__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--ink); font-weight: 500; font-size: 0.92rem; text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.hevents__all:hover { color: var(--ink); text-decoration-color: var(--gold); }
.hevents__all .ico { width: 15px; height: 15px; transition: transform 0.45s var(--ease); }
.hevents__all:hover .ico { transform: translateX(3px); }
@media (max-width: 980px) {
  .hevents__grid { grid-template-columns: minmax(0, 1fr); }
  .hevents__intro { position: static; }
}
@media (max-width: 640px) {
  .hevents__days { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0 -2px; }
  .hevents__days::-webkit-scrollbar { display: none; }
  .hevents__day { flex: 0 0 31%; scroll-snap-align: start; }
  .hevents__panel { padding: 4px 16px 16px; }
  .hev { grid-template-columns: minmax(0, 1fr) auto; }
  .hev__time { grid-column: 1 / -1; font-size: 0.8rem; }
  .hev { gap: 4px 12px; }
  .hev .ev__go { padding: 7px 11px; font-size: 0.66rem; letter-spacing: 0.12em; }
  .hevents__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .hevents__panel { animation: none; } }

/* ---------------------------------------------------------------- home: plan by the feeling (mood index) */
.moods__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 84px); align-items: start; }
.moods__lede { color: var(--ink-2); margin: 16px 0 0; max-width: 44ch; }
.moods__list { list-style: none; margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0; counter-reset: none; border-top: 1px solid var(--line-strong); }
.mood { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 22px; align-items: center; gap: 14px; padding: 15px 4px 15px 0;
  border-bottom: 1px solid var(--line); color: var(--ink-3); text-decoration: none; transition: color 0.35s var(--ease), padding 0.5s var(--ease); }
.mood__n { font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--ink-3); transition: color 0.35s var(--ease); }
.mood__label { font: 200 clamp(1.5rem, 2.35vw, 2.15rem)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: -0.025em; transition: transform 0.55s var(--ease); }
.mood__count { font-size: 0.82rem; color: var(--ink-3); white-space: nowrap; }
.mood__count strong { font-weight: 500; color: var(--ink-2); }
.mood__arrow { width: 18px; height: 18px; color: var(--ink); opacity: 0; transform: translateX(-10px); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.mood::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--ease); }
.mood:hover, .mood:focus-visible, .mood.is-active { color: var(--ink); }
.mood.is-active .mood__n { color: var(--accent-text); }
.mood.is-active .mood__label { transform: translateX(6px); }
.mood.is-active .mood__arrow, .mood:hover .mood__arrow { opacity: 1; transform: none; }
.mood.is-active::before { transform: scaleX(1); }

/* The stage: every panel sits in the same grid cell and cross-fades, so the column never changes height. */
.moods__stage { display: grid; position: sticky; top: 112px; }
.moodp { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s; }
.moodp.is-active { opacity: 1; visibility: visible; transition: opacity 0.55s var(--ease), visibility 0s; }
.moodp__shell { padding: 8px; border-radius: 32px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--line); }
.moodp__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; isolation: isolate; color: #fff; background: var(--olive); }
.moodp__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.moodp.is-active .moodp__media img { transform: scale(1); }
.moodp__media:hover img { transform: scale(1.03); }
.moodp__noimg { position: absolute; inset: 0; display: grid; place-items: center; z-index: -2; color: rgba(255, 255, 255, 0.5); }
.moodp__noimg .ico { width: 96px; height: 96px; }
.moodp__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 20, 23, 0.28) 0%, rgba(22, 20, 23, 0) 26%, rgba(22, 20, 23, 0) 48%, rgba(22, 20, 23, 0.72) 100%); }
.moodp__badge { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: rgba(22, 20, 23, 0.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.8rem; color: rgba(255, 255, 255, 0.92); }
.moodp__badge strong { font: 300 1.15rem/1 var(--font-display); color: #fff; }
.moodp__title { position: absolute; left: 26px; bottom: 22px; right: 26px; font: 200 clamp(2.2rem, 4.2vw, 3.6rem)/0.95 var(--font-display); text-transform: uppercase; letter-spacing: -0.035em;
  text-shadow: 0 2px 24px rgba(22, 20, 23, 0.35); transform: translateY(10px); opacity: 0; transition: transform 0.8s var(--ease) 0.08s, opacity 0.6s var(--ease) 0.08s; }
.moodp.is-active .moodp__title { transform: none; opacity: 1; }
.moodp__credit { margin: 10px 12px 0; font-size: 0.78rem; color: var(--ink-3); }
.moodp__credit a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 3px; }
.moodp__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; margin-top: 8px; padding: 20px 22px 20px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.moodp__line { grid-column: 1 / -1; margin: 0; font-size: 1.02rem; color: var(--ink); max-width: 52ch; }
.moodp__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.moodp__logo { display: block; box-sizing: border-box; flex: none; width: 76px; height: 44px; padding: 6px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.moodp__logo:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); }
.moodp__logo.is-plate { background: #161417; }
/* Block, not grid: inside a grid cell height:100% had no definite height to resolve against, so tall logos
   spilled out of the tile's bottom. */
.moodp__logo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.moodp__more { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; background: var(--surface-2); font-size: 0.82rem; font-weight: 500; color: var(--ink-2); }
.moodp__cta { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 980px) {
  .moods__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .moods__stage { display: none; }
  .mood { grid-template-columns: 30px minmax(0, 1fr) auto 18px; color: var(--ink); padding-block: 16px; }
  .mood.is-active .mood__label { transform: none; }
  .mood.is-active::before { transform: scaleX(0); }
  .mood .mood__arrow { opacity: 1; transform: none; color: var(--ink-3); }
  .mood.is-active .mood__n { color: var(--ink-3); }
}
@media (prefers-reduced-motion: reduce) {
  .mood, .mood__label, .mood::before, .moodp, .moodp__media img, .moodp__title { transition: none !important; }
}

/* The finder's result count is the H2 above the cards (H1 > H2 > card H3); it keeps the old inline look. */
.result-bar__h { margin: 0; font: inherit; text-transform: none; letter-spacing: normal; color: inherit; }