/* ==========================================================================
   Thal Vineyards + Stag Hill — one stylesheet
   Values: design-system/tokens.css (source of truth) + design-approved/.
   JavaScript: enhance.js only (6KB budget, two jobs). Everything here
   works with scripts disabled. No external requests.
   ========================================================================== */

/* --- Fonts: self-hosted, SIL OFL, subsetted, no external requests -------- */
@font-face { font-family:"EB Garamond";  src:url("fonts/EBGaramond-Regular.woff2")   format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"EB Garamond";  src:url("fonts/EBGaramond-Italic.woff2")    format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"EB Garamond";  src:url("fonts/EBGaramond-Bold.woff2")      format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Alegreya Sans";src:url("fonts/AlegreyaSans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Alegreya Sans";src:url("fonts/AlegreyaSans-Italic.woff2")  format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Alegreya Sans";src:url("fonts/AlegreyaSans-Medium.woff2")  format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Alegreya Sans";src:url("fonts/AlegreyaSans-Bold.woff2")    format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* Colour. Four values. There is no fifth. */
  --cream: #FFFDEA;
  --ink:   #2A1A1F;
  --wine:  #9E2064;
  --gold:  #C3A130;
  --white: #FFFFFF;
  --bottle-field: #141014;

  /* Type */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  --t-hero:    clamp(2.75rem, 1.63rem + 5.6vw,  5.25rem);
  --t-h1:      clamp(2.625rem, 2.11rem + 2.6vw, 3.75rem);
  --t-h2:      clamp(2rem,     1.66rem + 1.7vw, 2.75rem);
  --t-h3:      clamp(1.5rem,   1.39rem + 0.6vw, 1.75rem);
  --t-lede:    clamp(1.375rem, 1.26rem + 0.6vw, 1.625rem);
  --t-body:    clamp(1.1875rem,1.15rem + 0.2vw, 1.3125rem);
  --t-ui:      clamp(1.125rem, 1.11rem + 0.1vw, 1.1875rem);
  --t-eyebrow: clamp(0.875rem, 0.86rem + 0.1vw, 0.9375rem);
  --t-fact:    clamp(1.75rem,  1.41rem + 1.7vw, 2.5rem);
  --t-price:   clamp(1.625rem, 1.5rem + 0.6vw,  2rem);

  --lh-tight: 1.1; --lh-head: 1.15; --lh-lede: 1.45; --lh-body: 1.6;
  --tr-tight: -0.01em; --tr-eyebrow: 0.14em;
  --min-text: 18px;

  /* Space, 8px base */
  --s-1: 8px;  --s-2: 12px;  --s-3: 20px;  --s-4: 32px;
  --s-5: 48px; --s-6: 64px;  --s-7: 96px;  --s-8: 128px; --s-9: 192px;
  --section-y: clamp(48px, 7vw, 112px);
  --band-y:    clamp(64px, 9vw, 144px);

  /* Containers, by content type */
  --w-prose: 40rem; --w-text: 52rem; --w-grid: 76rem;

  /* Controls */
  --target-min: 48px; --btn-h: 56px; --btn-h-phone: 64px;
  --radius: 0;
  --rule: 3px solid var(--gold);
  --hairline: 1px solid var(--gold);
  --focus: 4px solid var(--ink);
  --focus-offset: 3px;

  /* Header */
  --header-desktop: 88px; --header-desktop-condensed: 64px;
  --header-tablet: 80px;  --header-phone: 72px;

  /* Motion */
  --dur-control: 150ms; --dur-menu: 200ms; --dur-header: 250ms; --dur-reveal: 500ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Image ratios */
  --ratio-bottle: 3 / 4; --ratio-hero: 3 / 1; --ratio-hero-phone: 4 / 5;
  --ratio-band: 3 / 1;   --ratio-split: 4 / 3;

  --photo-scrim: linear-gradient(to top,
      rgba(42, 26, 31, 0.78) 0%,
      rgba(42, 26, 31, 0.55) 45%,
      rgba(42, 26, 31, 0.25) 100%);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-align: left;
}
img { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
address { font-style: normal; }
hr.gold { border: 0; border-top: 1px solid var(--gold); margin: 0 0 var(--s-3); }

/* Links: underlined inside text, wine on cream, same tab */
a { color: var(--wine); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--ink); text-decoration-thickness: 3px; }
.on-ink a, .on-field a { color: var(--cream); }
.on-ink a:hover, .on-field a:hover { color: var(--white); }

/* Visible focus, everywhere, matching the token */
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.on-ink :focus-visible, .on-field :focus-visible { outline-color: var(--cream); }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--wine); color: var(--white);
  padding: 12px 20px; font-size: var(--t-ui); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Visually hidden (for the aria-live region) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Type roles ------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
.t-hero { font-size: var(--t-hero); line-height: 1.05; letter-spacing: var(--tr-tight); }
h1, .t-h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h2, .t-h2 { font-size: var(--t-h2); line-height: var(--lh-head); }
h3, .t-h3 { font-size: var(--t-h3); line-height: 1.2; }
h1, h2, h3 { color: var(--wine); }
.on-ink h1, .on-ink h2, .on-ink h3,
.on-field h1, .on-field h2, .on-field h3 { color: var(--cream); }

.eyebrow {
  margin: 0 0 var(--s-2);
  font-size: var(--t-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow); font-weight: 500;
}
.on-ink .eyebrow, .on-field .eyebrow { color: var(--gold); }
.lede { font-size: var(--t-lede); line-height: var(--lh-lede); text-wrap: pretty; }
p { margin: 0 0 var(--s-3); max-width: var(--w-prose); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { max-width: var(--w-prose); margin: 0 0 var(--s-3); padding-left: 1.2em; }
li { margin-bottom: var(--s-1); }

/* --- Layout ---------------------------------------------------------------- */
.wrap { max-width: var(--w-grid); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
.section { padding: var(--section-y) 0; }
.section--tight { padding-top: 0; }
.band { padding: var(--band-y) 0; position: relative; overflow: hidden; }
.on-ink  { background: var(--ink);  color: var(--cream); }
.on-field{ background: var(--bottle-field); color: var(--cream); }

/* Low-opacity linocut watermarks on dark bands */
.wm { position: absolute; pointer-events: none; opacity: 0.1; }
.wm--br { right: -3%; bottom: -30%; width: min(440px, 42%); }
.wm--tl { left: -5%; top: -26%; width: min(420px, 40%); }

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--btn-h); padding: 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-body); font-size: var(--t-ui); font-weight: 500;
  line-height: 1.3; text-decoration: none; cursor: pointer;
  border: 3px solid var(--wine); background: var(--wine); color: var(--white);
  transition: background var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--big { min-height: var(--btn-h-phone); }
.btn--quiet { background: transparent; color: var(--wine); }
.btn--quiet:hover { background: var(--wine); color: var(--white); border-color: var(--wine); }

.on-ink .btn, .on-field .btn { border-color: var(--cream); background: var(--cream); color: var(--ink); }
.on-ink .btn:hover, .on-field .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.on-ink .btn--quiet, .on-field .btn--quiet { border-color: var(--gold); background: transparent; color: var(--cream); }
.on-ink .btn--quiet:hover, .on-field .btn--quiet:hover { background: var(--gold); color: var(--ink); }

/* Arrows: part of the label. Gold only where gold clears the surface
   (ink and near-black, 6.68:1). Never gold on wine (2.97:1) or cream (2.42:1). */
.arr { display: inline-block; transition: transform var(--dur-control) var(--ease); }
.on-ink .btn--quiet .arr, .on-field .btn--quiet .arr,
.on-ink .link .arr, .on-field .link .arr { color: var(--gold); }
.btn:hover .arr, .btn:focus-visible .arr,
.link:hover .arr, .link:focus-visible .arr { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.link { font-size: var(--t-ui); min-height: var(--target-min); display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 767px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* --- Header ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--cream); border-bottom: var(--hairline);
  font-family: var(--font-body);
}
.site-header .bar {
  max-width: var(--w-grid); margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  height: var(--header-phone);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 32px);
}
.brand { display: flex; align-items: center; gap: 12px; min-height: var(--target-min); text-decoration: none; }
.brand .brand-mark { height: 42px; width: auto; }
.brand .brand-word { width: 118px; height: auto; }

.site-nav { display: none; }
.header-cta { display: none; }

/* Phone menu: <details open> ships in the markup. Without JavaScript the
   panel renders in normal flow below the header, so every link is simply
   visible. enhance.js closes it on load and turns it into the overlay. */
.menu { margin-left: auto; }
.menu > summary {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  padding: 0 20px; border: 3px solid var(--wine); background: transparent;
  color: var(--wine); font-size: 18px; font-weight: 500; cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
/* Without JavaScript the open panel sits in normal flow inside the header,
   pushing the page down: every link visible, nothing covered. With
   JavaScript it becomes the full-screen overlay from the approved design. */
.menu-panel {
  background: var(--cream); border-top: var(--hairline); border-bottom: var(--rule);
  padding: 24px clamp(16px, 4vw, 32px) 32px; margin-top: 12px;
  display: grid; gap: 16px; align-content: start;
}
html.js .menu-panel {
  position: fixed; left: 0; right: 0; top: var(--header-phone); bottom: 0;
  overflow-y: auto; z-index: 29; border-bottom: 0; margin-top: 0;
}
@media (max-width: 767px) {
  html:not(.js) .site-header .bar { height: auto; min-height: var(--header-phone); flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  html:not(.js) .menu[open] { flex-basis: 100%; margin-left: 0; }
}
.menu-panel a.menu-link {
  font-family: var(--font-display); font-size: 26px; color: var(--wine);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  display: flex; align-items: center; min-height: var(--target-min);
}
.menu-panel a.menu-link[aria-current="page"] { font-weight: 700; text-decoration-thickness: 5px; }
.menu-panel hr { border: 0; border-top: var(--hairline); margin: 8px 0; width: 100%; }
.menu-panel .menu-tel {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  color: var(--wine); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--target-min);
}
.menu-close {
  min-height: var(--btn-h); padding: 0 24px; border: 3px solid var(--wine);
  background: transparent; color: var(--wine);
  font-family: var(--font-body); font-size: var(--t-ui); font-weight: 500; cursor: pointer;
}

@media (min-width: 768px) {
  .site-header .bar { height: var(--header-tablet); }
  .brand .brand-mark { display: none; }
  .brand .brand-word { width: 130px; }
  .menu { display: none; }
  .site-nav { display: flex; gap: clamp(12px, 2.4vw, 32px); flex: 1; justify-content: flex-end; }
  .site-nav a {
    font-size: var(--t-ui); color: var(--wine); text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: 6px; font-weight: 400;
    display: flex; align-items: center; min-height: var(--target-min); white-space: nowrap;
  }
  .site-nav a[aria-current="page"] { text-decoration-thickness: 5px; font-weight: 700; }
}
@media (min-width: 1024px) {
  .site-header .bar { height: clamp(80px, 7vw, 88px); }
  .brand .brand-word { width: clamp(140px, 14vw, 168px); }
  .header-cta { display: inline-flex; }
  /* Condense on scroll: pure CSS scroll-driven animation. Where it is
     unsupported the header simply stays full height, which is the
     specified no-JS behaviour. */
  @supports (animation-timeline: scroll()) {
    .site-header .bar {
      animation: header-condense linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }
  }
}
@keyframes header-condense { to { height: var(--header-desktop-condensed); } }

/* --- Hero ------------------------------------------------------------------- */
.hero { padding: clamp(24px, 6vw, 88px) 0 0; }
.hero .t-hero { color: var(--wine); margin: 0 0 var(--s-3); max-width: 22ch; }
.hero .lede { max-width: 34rem; margin: 0 0 var(--s-4); }
.hero .btn-row { padding-bottom: clamp(32px, 5vw, 56px); }
@media (max-width: 479px) {
  /* the 320×568 gate: the promise and the primary action share the first screen */
  .hero .eyebrow { margin-bottom: 8px; }
  .hero .t-hero { margin-bottom: 14px; }
  .hero .lede { margin-bottom: 18px; }
}
.hero-art img { width: 100%; max-width: none; height: clamp(180px, 28vw, 420px); object-fit: cover; object-position: center bottom; }

/* --- Split (50/50, sides alternate) ------------------------------------------ */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split-media img { width: 100%; aspect-ratio: var(--ratio-split); object-fit: cover; }
@media (min-width: 768px) {
  .split--flip .split-media { order: 2; }
  .split--flip .split-copy { order: 1; }
}

/* --- Cards -------------------------------------------------------------------- */
.cards { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: var(--hairline); background: var(--cream);
  display: flex; flex-direction: column; position: relative;
  transition: transform var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease), box-shadow var(--dur-control) var(--ease);
}
.card:hover, .card:focus-within { transform: translateY(-2px); border-color: var(--wine); box-shadow: 0 2px 0 0 var(--gold); }
.card-media { background: var(--bottle-field); position: relative; overflow: hidden; }
.card-media img { width: 100%; aspect-ratio: var(--ratio-bottle); object-fit: cover; }
.card--stag .card-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("images/mark-stag-hill-linocut-neg.png") center / contain no-repeat;
  opacity: 0.13;
}
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; position: relative; overflow: hidden; }
.card--stag .card-body::after {
  content: ""; position: absolute; right: -18%; bottom: -12%; width: 70%; aspect-ratio: 512 / 691;
  background: url("images/mark-stag-hill-linocut.png") center / contain no-repeat;
  opacity: 0.07; pointer-events: none;
}
.chip {
  align-self: flex-start; position: relative; z-index: 1;
  font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow);
  font-weight: 500; padding: 6px 12px; border: 1px solid var(--gold); color: var(--ink);
}
.chip--stag { border-color: var(--ink); background: var(--ink); color: var(--gold); }
.card h3 { margin: 8px 0 0; position: relative; z-index: 1; }
.card h3 a { color: var(--wine); text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.card .vintage { font-size: var(--t-ui); color: var(--ink); opacity: 0.75; position: relative; z-index: 1; }
.card .note { margin: 8px 0 12px; font-size: var(--t-ui); line-height: 1.4; flex: 1; position: relative; z-index: 1; max-width: none; }
.price-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 12px; border-top: var(--hairline); position: relative; z-index: 1;
}
.price { font-family: var(--font-display); font-weight: 700; font-size: var(--t-price); line-height: 1; color: var(--ink); }
.stock { font-size: var(--t-ui); font-weight: 500; letter-spacing: 0.02em; }
.stock--out { background: var(--ink); color: var(--cream); padding: 4px 10px; }
/* One place per fact. Availability is stated on the Our Wines card and on
   the wine's own page; cross-sell and featured cards point at the store so
   a sell-out is a two-place edit rather than a five-place one. */
.stock--check { font-weight: 400; opacity: 0.8; }
.price-row { flex-wrap: wrap; }
.card-cta { margin-top: 16px; position: relative; z-index: 1; }
.card--soldout .card-media img { opacity: 0.55; }

/* Compact phone card: same content, horizontal, whole card tappable,
   so thirteen wines do not run five thousand pixels. */
@media (max-width: 599px) {
  .cards { gap: 16px; }
  .card { display: grid; grid-template-columns: 116px 1fr; }
  .card-media img { aspect-ratio: 3 / 4; height: 100%; }
  .card-body { padding: 10px 12px; grid-column: 2; gap: 5px; }
  .card .note { margin: 4px 0 6px; }
  .card .note .confirm--chip { margin: 0; }
  /* the title link stretches over the whole card; the button retires */
  .card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .card-cta { display: none; }
  .price-row { padding-top: 8px; }
  .card--stag .card-body::after { display: none; }
}

/* --- Filters --------------------------------------------------------------------- */
.filters {
  border: var(--hairline); padding: clamp(16px, 3vw, 24px);
  margin: 0 0 clamp(32px, 5vw, 48px);
  display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center;
}
.filters legend { padding: 0 8px; font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); font-weight: 500; }
.filter-group { display: flex; flex-wrap: wrap; gap: 12px; }
.filter {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: var(--btn-h); padding: 0 20px;
  font-size: var(--t-ui); font-weight: 500;
  border: 3px solid var(--wine); color: var(--wine); cursor: pointer;
}
.filter input { width: 20px; height: 20px; accent-color: var(--wine); }
.filter:has(input:checked) { background: var(--wine); color: var(--white); }
.filter:has(input:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
.count { margin: 0 0 0 auto; font-size: var(--t-ui); max-width: none; }
.count span { display: none; }
#wine-catalog:has(#f-all:checked)  .count .c-all,
#wine-catalog:has(#f-thal:checked) .count .c-thal,
#wine-catalog:has(#f-stag:checked) .count .c-stag { display: inline; }
#wine-catalog:has(#f-thal:checked) .card--stag { display: none; }
#wine-catalog:has(#f-stag:checked) .card--thal { display: none; }
@media (max-width: 599px) { .count { margin-left: 0; flex-basis: 100%; } }

/* --- Bottle field --------------------------------------------------------------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: clamp(24px, 4vw, 48px); align-items: end; }
.shelf-item { text-align: center; }
.shelf-item img { width: min(100%, 320px); height: auto; margin: 0 auto; }
@media (max-width: 599px) { .shelf-item img { width: min(100%, 232px); } .shelf { gap: 20px; } }
.shelf-item .shelf-name { margin: 20px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; color: var(--cream); }
.shelf-item .shelf-meta { margin: 0; font-size: var(--t-ui); color: var(--gold); }

/* --- Fact panel -------------------------------------------------------------------- */
.panel { border: var(--rule); padding: clamp(24px, 4vw, 32px); }
.panel .eyebrow { margin-bottom: var(--s-3); }
.hours { width: 100%; max-width: 26rem; }
.hours th { text-align: left; font-weight: 400; padding: 8px 0; }
.hours td { text-align: right; padding: 8px 0; font-variant-numeric: tabular-nums; }
.hours .quiet th, .hours .quiet td { opacity: 0.75; }
.tel-big {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-fact);
  line-height: var(--lh-tight); color: var(--wine); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--target-min);
}
.on-ink .tel-big { color: var(--cream); }
.email-big {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-fact);
  line-height: var(--lh-tight); word-break: break-word;
  display: inline-flex; align-items: center; min-height: var(--target-min);
}
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }

/* Fact tiles (Our Story) */
.tiles { border: var(--rule); padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(24px, 4vw, 40px); }
.tiles .tile p { margin: 0; }
.tiles .tile .big { font-family: var(--font-display); font-weight: 700; font-size: var(--t-fact); line-height: var(--lh-tight); }

/* --- Editorial mosaic ----------------------------------------------------------------- */
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: clamp(130px, 17vw, 210px); gap: 12px; }
.mosaic figure { margin: 0; overflow: hidden; position: relative; }
.mosaic picture { display: contents; }
.mosaic figure img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255, 253, 234, 0.94); color: var(--ink);
  font-size: var(--t-ui); line-height: 1.35; padding: 6px 12px;
}
@media (max-width: 599px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mosaic .tall, .mosaic .wide { grid-row: auto; grid-column: auto; }
  .mosaic figure img { aspect-ratio: 3 / 2; }
}

/* Gold rule with the stag mark (decorative section divider) */
.stag-rule { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(32px, 5vw, 48px); }
.stag-rule::before, .stag-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
.stag-rule .stag-mark {
  width: 52px; height: 56px; background: var(--gold);
  -webkit-mask: url("images/mark-stag-hill-linocut.png") center / contain no-repeat;
  mask: url("images/mark-stag-hill-linocut.png") center / contain no-repeat;
}

/* --- Handoff band: one component, identical everywhere -------------------------------- */
.handoff { padding: 0; }
.handoff .handoff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.handoff .handoff-photo { position: relative; min-height: clamp(260px, 34vw, 440px); }
.handoff .handoff-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.handoff .handoff-copy { padding: clamp(48px, 9vw, 144px) clamp(20px, 5vw, 64px); position: relative; overflow: hidden; }
.handoff .handoff-inner { position: relative; max-width: 34rem; }
.handoff .lv-chip { display: inline-block; background: var(--cream); padding: 16px 20px; margin: 0 0 var(--s-3); }
.handoff .lv-chip img { width: 150px; }
.handoff .fine { font-size: var(--t-ui); }

/* --- Wine detail ------------------------------------------------------------------------ */
.detail-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 767px) {
  /* Phone: the facts and the buy action come first, the full bottle after.
     The H1 and the primary action clear the fold; the packshot is still on
     the page at full size below. */
  .detail-media { order: 2; max-width: 320px; }
  .detail-copy { order: 1; }
}
.detail-media { background: var(--bottle-field); position: relative; overflow: hidden; }
.detail-media img { width: 100%; aspect-ratio: var(--ratio-bottle); object-fit: cover; }
.detail-media.is-stag::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("images/mark-stag-hill-linocut-neg.png") center / contain no-repeat;
  opacity: 0.13;
}
.detail-copy .lede { margin: 0 0 var(--s-3); }
.detail-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px; margin: 0 0 var(--s-3); }
.detail-price-row .price { font-size: var(--t-fact); }
.spec { width: 100%; max-width: 34rem; }
.spec th { text-align: left; font-weight: 400; padding: 8px 0; border-bottom: var(--hairline); }
.spec td { text-align: right; padding: 8px 0; border-bottom: var(--hairline); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.back-link { margin: 0 0 clamp(20px, 3vw, 32px); }

/* --- Open-fact markers: visible on purpose, removed before launch ---------------------- */
.confirm {
  display: block; border-left: 8px solid var(--wine);
  border-top: var(--hairline); border-right: var(--hairline); border-bottom: var(--hairline);
  padding: 10px 14px; margin: 0 0 var(--s-3);
  font-size: 18px; line-height: 1.5; max-width: var(--w-prose);
  background: var(--cream); color: var(--ink);
}
.confirm b { text-transform: uppercase; letter-spacing: 0.06em; }
.on-ink .confirm, .on-field .confirm { background: transparent; color: var(--cream); border-left-color: var(--gold); }
/* Compact variant for wine cards: scaffolding, one line */
.confirm--chip {
  border-left-width: 6px; padding: 6px 10px;
  font-size: var(--t-eyebrow); font-style: italic; letter-spacing: 0.01em;
}

/* --- Footer -------------------------------------------------------------------------------- */
.site-footer { padding: clamp(48px, 7vw, 96px) 0; }
.site-footer .top-rule { border: 0; border-top: var(--rule); margin: 0 0 var(--s-4); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; align-items: start; }
.site-footer .brand-word { width: 200px; margin: 0 0 var(--s-2); }
.footer-nav { display: grid; gap: 8px; }
.footer-nav a { font-size: var(--t-ui); min-height: var(--target-min); display: inline-flex; align-items: center; }
.site-footer p { font-size: var(--t-ui); }
.site-footer .tel-big { font-size: var(--t-fact); }

/* --- Phone rhythm: roughly 60% of the desktop vertical spend --------------------------------- */
@media (max-width: 599px) {
  p { margin-bottom: 14px; }
  .confirm { margin-bottom: 14px; padding: 8px 12px; }
  .handoff .handoff-copy { padding: 40px clamp(20px, 5vw, 64px) 44px; }
  .handoff .lv-chip { padding: 10px 14px; margin-bottom: 14px; }
  .handoff .lv-chip img { width: 120px; }
  .panel { padding: 20px; }
  .btn-row { gap: 12px; }
  .filters { padding: 14px; gap: 12px; }
  .site-footer { padding: 40px 0; }
  .footer-grid { gap: 20px; }
}

/* --- Scroll reveal: CSS only, degrades to visible, never starts hidden ------------------- */
@keyframes thal-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[data-reveal] { animation: thal-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }

/* --- Reduced motion: everything off ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- Print: Visit & Contact must come off a home printer with hours, address and phone ----- */
@media print {
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
  html { font-size: 12pt; }
  body { background: #FFFFFF; color: #000000; font-size: 1rem; line-height: 1.45; }
  .site-header, .skip-link, .hero-art, .btn, .btn-row, .menu,
  .mosaic, .handoff-photo, .wm, .stag-rule, .card-media, .site-footer nav,
  [data-print-hide] { display: none !important; }
  .on-ink, .on-field { background: #FFFFFF !important; color: #000000 !important; }
  h1, h2, h3, .price { color: #000000 !important; page-break-after: avoid; }
  a { color: #000000; text-decoration: none; }
  a[href^="tel:"] { color: #000000; }
  .tel-big, .email-big { color: #000000 !important; }
  .section, .band { padding: 0.6rem 0; }
  .panel, [data-print-keep] { border: 1pt solid #000000; padding: 0.5rem; break-inside: avoid; }
  .confirm { border: 1pt dashed #000000; break-inside: avoid; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 1rem; }
  .print-only { display: block !important; }
}
.print-only { display: none; }