/* Variant E (founder's review of D, 2026-10-20). Reasons, one line each (R-31):
   - Palette: Route 1 "Evolved" from the brand directions page, nothing else:
     burgundy #82182e, cream #f0ece7, white, ink #1d1316, ink-muted #6b5a60,
     on-voice-muted #e6d6db, edge #e3ddd6, and alphas of these (one exception,
     --edge below, for the controls' 3:1).
   - Grounds: burgundy only where the sommelier speaks. The hero, D's shelf rail
     ("How it works.") and the conversation are one red run, as in D: the rail
     hangs on the same burgundy as the hero, and one cream hairline at content
     width is the only seam before the conversation. A's cream shelf where the
     visitor acts (the test); the closing line back on burgundy; the footer on
     the cream shelf, so the closing line is the last red thing and the page
     ends on cream.
   - One theme: <html data-theme="light"> switches off the dark blocks in the
     shared tokens and field, and color-scheme keeps form controls light, so
     cream stays cream and burgundy stays burgundy whatever the system says.
   - Type: Instrument Serif for the big lines (one per section) and the
     wordmark; Inter for all that is read or tapped (contract: serif for the
     big line only).
   - Identity motif: each ground opens with one big serif line at page width;
     the sommelier's own words on the shelf (the second test line, the result's
     second line) are set in the serif italic, in burgundy, the one accent there.
   - Grid: 12 columns from 860px. The hero's field and the conversation share
     columns 7 to 12, so the eye drops straight from one to the other; the test
     card takes 5 to 12 under its line; one column below 860px.
   - Two lifted things, both paper: the tasting card, the one thing on the page
     you pick up, and the shelf talkers hanging off the shelf edge; nothing else floats.
   - Corners: card and paper 4px, panels 16px, controls 12px, B's speech 18px,
     the user's tapped answers as pills (they are chips in the product). */

:root {
  --brand: #82182e;
  --cream: #f0ece7;
  --on-voice: #f0ece7;        /* 8.43:1 on #82182e */
  --on-voice-soft: #e6d6db;   /* 7.08:1 on #82182e */
  /* B's bubble: white at a tenth over the burgundy (#8f2f43 as painted); cream on it 6.72:1. */
  --bubble: rgba(255, 255, 255, 0.1);
  --paper-muted: #6b5a60;     /* ink-muted: 6.45:1 on white, 5.48:1 on cream */
  /* Field and answer edges on the shelf: 4.14:1 on white, 3.52:1 on cream (non-text, 3:1).
     Not a Route 1 value: its edge #e3ddd6 is 1.1:1 on cream, too faint for a control. */
  --edge: #8a787e;
  --hair-voice: rgba(240, 236, 231, 0.35); /* cream at 35%: the one seam on the red run */
  --seam: clamp(44px, 5.5vw, 72px);        /* the space on each side of that hairline */
  --gutter: clamp(16px, 5vw, 56px);
  --maxw: 74rem;
  --ease-settle: cubic-bezier(0.2, 0.75, 0.2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--brand);
  color: var(--on-voice);
  font: 400 1rem/1.5 var(--font-sans);
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nobr { white-space: nowrap; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 60;
  padding: 12px 16px; border-radius: var(--radius-control);
  background: var(--cream); color: var(--brand); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---- header (D's lockup, on the burgundy) ---------------------------------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
}
.lockup {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--on-voice); text-decoration: none;
}
.lockup__mark { width: 22px; height: 27px; fill: currentColor; }
.lockup__word { font: 400 1.75rem/1 var(--font-serif); letter-spacing: 0.005em; transform: translateY(1px); }
.top .lang-toggle { --lang-fg: var(--on-voice); --lang-active: var(--on-voice); margin-right: -8px; }

/* ---- hero: one line at page width, then the lead and the field ------------------- */
/* The headline carries the width on its own: on a wide screen it is two balanced
   lines that run almost edge to edge (about 8.5em each), so the line is the
   composition; the lead and the field step in under it on the right, in the
   columns where the conversation continues. Phones get three or four lines. */
.hero {
  display: grid;
  row-gap: clamp(28px, 4.2vw, 60px);
  padding-top: clamp(28px, 6vw, 88px);
  padding-bottom: clamp(56px, 8vw, 112px); /* D's step from the field to the next line */
}
.hero__title {
  max-width: 9em;
  font: 400 clamp(2.75rem, 1.2rem + 7.9vw, 8.5rem)/0.95 var(--font-serif);
  letter-spacing: -0.018em;
  color: #fff; /* the loudest line in pure white: 9.91:1 */
  text-wrap: balance;
}
.hero__lead {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.hero__form { margin-top: clamp(20px, 2.4vw, 28px); scroll-margin-top: 24px; }
.hero grapes-waitlist { max-width: 32rem; --gw-text: var(--on-voice); }
.hero grapes-waitlist .gw-submit { flex: 1 1 auto; }
.hero grapes-waitlist .gw-consent { color: var(--on-voice-soft); }
@media (min-width: 860px) {
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero__title { grid-column: 1 / -1; }
  .hero__act { grid-column: 7 / 13; }
}

/* ---- D's shelf rail (from A), on the hero's burgundy -------------------------------- */
/* The process sits between the promise and the example, as in D: no band of its
   own, the hero's red runs on under it, so the heading follows the field the way
   a next paragraph would. Three white talkers clipped to an ink shelf edge; a
   short ink drop shadow lifts them off the wall. The section ends one seam above
   the hairline, less the rail's 20px of room for the shadow. */
.how { padding-bottom: calc(var(--seam) - 20px); }
.how__title {
  max-width: 17ch;
  font: 400 clamp(2rem, 1.35rem + 2.6vw, 3.25rem)/1.04 var(--font-serif);
  letter-spacing: -0.008em;
  text-wrap: balance;
  color: #fff; /* as the hero's line: 9.91:1 */
}
.rail {
  margin-top: clamp(28px, 4vw, 48px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  padding-bottom: 20px;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; }
.rail__track {
  position: relative;
  display: flex;
  gap: 16px;
  width: max-content;
  padding-inline: var(--gutter);
  padding-top: 10px;
}
.rail__track::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 10px;
  /* The shelf edge in ink, opaque so the talkers' tilted tops tuck behind it. */
  background: var(--color-ink);
  border-radius: 1px;
  z-index: 1;
}
.talker {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(78vw, 19rem);
  margin-top: -3px;
  padding: 20px 20px 22px;
  border-radius: 0 0 4px 4px;
  background: var(--color-surface-card);
  color: var(--color-ink);
  box-shadow: 0 10px 18px -12px rgba(29, 19, 22, 0.6); /* D's, from ink */
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 0;
}
/* The sommelier's own words on the shelf are burgundy (9.91:1 on white). */
.talker__line { font: 600 1.1875rem/1.25 var(--font-sans); color: var(--brand); letter-spacing: -0.005em; }
.talker__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.motion .rail:not(.is-hung) .talker { opacity: 0; transform: rotate(calc(var(--tilt, 0deg) + 3deg)); }
.rail.is-hung .talker { transition: opacity 300ms ease-out, transform 700ms var(--ease-settle); }
.rail.is-hung .talker:nth-child(2) { transition-delay: 90ms; }
.rail.is-hung .talker:nth-child(3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .rail.is-hung .talker { transition: none; } }
@media (min-width: 860px) {
  .rail { overflow: visible; scroll-snap-type: none; }
  .rail__track {
    width: 100%;
    max-width: calc(var(--maxw) + 2 * var(--gutter));
    margin-inline: auto;
    justify-content: space-between;
  }
  .rail__track::before { left: var(--gutter); right: var(--gutter); }
  .talker { width: auto; }
  .talker:nth-child(1) { flex-basis: 30%; margin-left: 2%; }
  .talker:nth-child(2) { flex-basis: 27%; }
  .talker:nth-child(3) { flex-basis: 25%; margin-right: 5%; }
}

/* ---- B's conversation, as in D ------------------------------------------------------ */
/* The seam: one cream hairline across the content width (not a second band),
   the same space above and below it; the chat column lines up under the hero's
   field. The body's burgundy carries the section to the edges. */
.chatsec {
  position: relative;
  padding-top: var(--seam);
  padding-bottom: clamp(72px, 9vw, 140px);
}
.chatsec::before {
  content: "";
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: var(--hair-voice);
}
.chatsec__intro { display: grid; gap: 12px; margin-bottom: 32px; }
.chatsec__title {
  font: 400 clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem)/1 var(--font-serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #fff;
}
.chatsec__sub { font-size: 1.0625rem; max-width: 26rem; }
.chatsec__note { font-size: 0.875rem; color: var(--on-voice-soft); }
.chat { display: grid; gap: 10px; max-width: 34rem; }
.say { display: flex; align-items: flex-end; gap: 8px; }
.say--u { justify-content: flex-end; }
.say--s + .say--u, .say--u + .say--s { margin-top: 6px; }
.say__av { flex: 0 0 auto; width: 22px; height: 27px; fill: var(--on-voice); margin-bottom: 6px; }
.say__b { max-width: 82%; padding: 12px 16px; font-size: 1.0625rem; line-height: 1.4; }
.say--s .say__b { background: var(--bubble); color: var(--on-voice); border-radius: 18px 18px 18px 6px; }
.say--u .say__b {
  background: var(--cream); color: var(--brand);
  font-weight: 600; border-radius: 999px; padding: 10px 18px;
}
.say--pick .say__b {
  max-width: 90%;
  display: grid; gap: 10px;
  padding: 16px 18px;
  background: var(--cream);
  color: var(--color-ink);
  font-size: 1.125rem;
}
.pick__meta { font-size: 0.875rem; color: var(--paper-muted); padding-top: 10px; border-top: 1px solid var(--color-border); }
.pick__meta strong { color: var(--brand); font-weight: 600; }
.motion .say {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease-out, transform 360ms cubic-bezier(.2,.7,.2,1);
}
.motion .say.is-in { opacity: 1; transform: none; }
@media (min-width: 860px) {
  .chatsec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .chatsec__intro { grid-column: 1 / 6; align-self: start; position: sticky; top: 32px; margin: 0; }
  .chat { grid-column: 7 / 13; padding-top: 8px; gap: 12px; }
}

/* ---- the test, on the cream shelf ------------------------------------------------ */
.test {
  background: var(--color-ground-shelf);
  color: var(--color-ink);
  padding-block: clamp(64px, 10vw, 136px) clamp(72px, 11vw, 152px);
}
.test :focus-visible { outline-color: var(--brand); }
.test__title {
  max-width: 11em;
  font: 400 clamp(2.75rem, 1.5rem + 5.3vw, 7rem)/0.98 var(--font-serif);
  letter-spacing: -0.015em;
}
.test__q { display: block; text-wrap: balance; }
/* The sommelier's aside, in its own voice: italic, burgundy (8.43:1 on cream). */
.test__bet {
  display: block;
  margin-top: 0.32em;
  font-size: 0.46em;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--brand);
  text-wrap: balance;
}
.test__grid {
  display: grid;
  gap: 28px;
  margin-top: clamp(28px, 4.5vw, 64px);
}
.test__sub { max-width: 30ch; color: var(--color-ink-muted); font-size: 1.0625rem; line-height: 1.5; }

/* The tasting card, with C's sticker tilt until the first answer (variant.js
   adds .is-held); hover or focus straightens it ahead of that, as a hand would. */
.card {
  position: relative;
  min-width: 0;
  max-width: 48rem;
  padding: clamp(20px, 4vw, 40px);
  padding-top: 16px;
  border-radius: 4px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  box-shadow:
    inset 0 0 0 6px var(--color-surface-card), inset 0 0 0 7px var(--color-border),
    0 22px 34px -26px rgba(29, 19, 22, 0.55);
  transform: rotate(-0.8deg);
  transition: transform 520ms var(--ease-settle);
}
.card.is-held, .card:hover, .card:focus-within { transform: none; }
@media (min-width: 860px) { .card:not(.is-held):not(:hover):not(:focus-within) { transform: rotate(-1.4deg); } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  font: 500 0.8125rem/1.2 var(--font-sans);
  color: var(--color-ink-muted);
}
.card__mark { width: 13px; height: 16px; fill: var(--brand); }
.card .qz {
  --qz-answer-bg: var(--color-surface-card);
  --qz-answer-border: var(--edge);
  max-width: none;
}
.card grapes-waitlist { --gw-border: var(--edge); }
.card grapes-waitlist .gw-consent { color: var(--color-ink-muted); }
.card .qz-question { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
@media (min-width: 860px) {
  .test__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .test__sub { grid-column: 1 / 5; position: sticky; top: 32px; padding-top: 20px; }
  .card { grid-column: 5 / 13; }
}

/* Massimo's answers: a title and a hint, no pictures. Two columns once the card
   has room, so the four answers read as one choice. */
.mq-answers { display: grid; gap: 10px; }
@media (min-width: 520px) { .mq-answers { grid-template-columns: 1fr 1fr; } }
.mq-answer {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
  min-height: 84px;
  padding: 14px 16px;
}
.mq-answer__title { font: 600 1.0625rem/1.3 var(--font-sans); }
.mq-answer__hint { font-size: 0.875rem; line-height: 1.35; color: var(--color-ink-muted); }
.mq-answer[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* The result, in words: the country as the headline, the runner-up in the
   sommelier's italic when it is close, then Massimo's why and what to try. */
.mq-kicker { margin: 4px 0 0; font: 500 0.875rem/1.3 var(--font-sans); color: var(--color-ink-muted); }
.mq-head {
  margin: 8px 0 20px;
  font: 400 clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem)/1 var(--font-serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.mq-head:focus { outline: none; } /* focused by script to announce the result */
.mq-second {
  display: block;
  margin-top: 0.3em;
  font-size: 0.5em;
  font-style: italic;
  line-height: 1.15;
  color: var(--brand);
}
.mq-why { margin: 0 0 24px; max-width: 38rem; font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.mq-try {
  display: grid; gap: 12px;
  margin: 0 0 24px; padding: 16px 0;
  border-block: 1px solid var(--color-border);
}
@media (min-width: 520px) { .mq-try { grid-template-columns: 1fr 1fr; } }
.mq-try dt { font-size: 0.8125rem; color: var(--color-ink-muted); }
.mq-try dd { margin: 2px 0 0; font-weight: 600; }
.mq-joined { margin: 12px 0 0; font-size: 0.875rem; color: var(--color-ink-muted); }

/* ---- the closing: B's line, on the burgundy -------------------------------------- */
/* A full section, not a box: the line runs at the page's big size from the
   page's left edge, the field answers on the right (below it on a phone). */
.closing { padding-block: clamp(72px, 10vw, 152px) clamp(80px, 11vw, 168px); }
.closing__grid { display: grid; row-gap: 28px; }
.closing__title {
  max-width: 13ch;
  font: 400 clamp(2.5rem, 1.25rem + 5vw, 6rem)/0.98 var(--font-serif);
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.closing__form { max-width: 30rem; }
.closing grapes-waitlist { --gw-text: var(--on-voice); }
.closing grapes-waitlist .gw-consent { color: var(--on-voice-soft); }
@media (min-width: 860px) {
  .closing__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .closing__title { grid-column: 1 / 8; grid-row: 1; max-width: 12ch; }
  .closing__form { grid-column: 8 / 13; grid-row: 1; }
}

/* ---- the footer, on the cream shelf ----------------------------------------------- */
/* C's wordmark idea at sign size, not page size: the mark stands with the word
   as a lockup, capped so the whole footer stays under one screen. The burgundy
   closing stops at the cream, and that change of ground is the page's end. The
   lockup carries the burgundy (8.43:1), the rest is ink and ink-muted (5.48:1). */
.foot {
  background: var(--cream);
  color: var(--color-ink);
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
}
.foot__sign {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px;
  padding-bottom: clamp(24px, 3.5vw, 44px);
}
.foot__lockup {
  display: inline-flex; align-items: baseline; gap: 0.14em;
  font: 400 clamp(4.25rem, 1.5rem + 11vw, 11rem)/0.8 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--brand);
}
.foot__mark { width: 0.56em; height: 0.68em; fill: currentColor; flex: 0 0 auto; }
.foot__made {
  display: flex; flex-direction: column;
  font: 600 clamp(1.125rem, 0.9rem + 1vw, 1.75rem)/1.2 var(--font-sans);
  letter-spacing: -0.015em;
}
.foot__made span + span { color: var(--paper-muted); }
.foot__small {
  display: grid;
  gap: 2px 32px;
  padding-top: 8px;
  border-top: 1px solid rgba(29, 19, 22, 0.18); /* ink at 18% */
  font-size: 0.875rem;
}
.foot__legal { padding: 12px 0 2px; }
.foot__age {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font-weight: 600;
}
.foot__links { display: flex; flex-wrap: wrap; column-gap: 24px; }
.foot__links a,
.foot__links button {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.foot__copy { color: var(--paper-muted); padding: 4px 0; }
.foot :focus-visible { outline-color: var(--brand); }
.foot .lang-toggle { --lang-fg: var(--color-ink); --lang-active: var(--brand); margin-left: -8px; }
.foot .lang-toggle__sep { opacity: 0.7; } /* shared 0.4 is 2.5:1 on cream; 0.7 is 6.24:1 */
@media (min-width: 860px) {
  .foot__small {
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
  }
  .foot__legal { padding: 0; }
  .foot__copy { justify-self: end; }
  .foot .lang-toggle { margin-left: 0; margin-right: -8px; }
}

/* Consent card: E is light only, so the shared white card, ink and burgundy
   buttons (9.91:1) hold in every system theme; its corners match the fields. */
.gc-consent { --consent-accent: var(--brand); --consent-radius: 12px; }
/* The p reset above beats the shared :where() margin; 20px matches the card's
   padding and stays wider than the 12px between the buttons. */
.gc-consent__body { margin: 0 0 20px; }