/* /wine-list — 138 bottles, by grape.

   THE ROW IS A GRID AND NOT A FLEX ROW, and that is a bug fix carried over rather than a
   preference. The beer and wine rows on /menu were built with the description as a flex
   SIBLING of the price, so the price sat wherever the description finished — 416px of
   spread between the first and last Add button on the beer list, measured on staging on
   8/28. Renato: "the misaligned add buttons for beer is terrible". Name and price are on
   row 1 in a two-column grid, the meta line spans both underneath, and the prices form a
   column no matter how long the names get.

   ONE COLUMN, HELD TO A MEASURE. Two CSS columns were tried first and rejected: with
   break-inside:avoid a 31-bottle section cannot be split, so the balancer either leaves a
   deep hole beside it or splits it anyway, and the jump links then land mid-page in a
   column the reader is not reading down. One column also matches how the book itself sets
   the list. What a wide screen must NOT do is stretch a row to 1400px, which would put the
   price an inch from the right edge and the name an inch from the left with nothing
   between them; the list is capped instead. */

/* COMPRESSED, 2026-08-28: "reduce spacings vertically in this page". This is a list of
   138 things, not an essay — it is scanned, and every band of air between the reader and
   the next wine is a cost. Measured before and after; the numbers are in the commit. The
   dark blurb panel keeps its OWN padding untouched, because that is the shared .pagelede
   treatment the client approved two days ago on six pages and it is not this page's to
   re-cut. Only the space AROUND it comes down. */
.wl__h { margin: 0 0 clamp(8px, 1.1vw, 12px); }
.wl__lede { margin-bottom: clamp(16px, 2vw, 24px); }
/* The page's own section padding, tighter than the site default (40/77px). */
.section:has(.wl__list) { padding: clamp(20px, 2.6vw, 34px) 0 clamp(28px, 4vw, 52px); }

/* THE JUMP RAIL, STICKY (Renato, 2026-08-28: "make the filtering bubbles bar sticky").

   ONE LINE THAT SCROLLS SIDEWAYS, not a wrapping block, and that is what makes sticky
   affordable rather than oppressive. Wrapped, the nine chips measured 112px tall on a
   1280px screen and 420px on a 390px phone — nine chips stacked nearly one per line. Pinned
   under an 84px nav that would have left a phone about 250px of actual wine. As a single
   rail it is ~46px at every width, so the cost of keeping it on screen is fixed and small.
   It is also the pattern this site already uses for the day-part tabs on /menu, which
   scroll rather than wrap for exactly this reason.

   THE OFFSETS ARE THE NAV'S REAL HEIGHTS. .nav__in is a fixed 84px, and 92px from 980px up.
   Anything smaller tucks the rail under the nav's bottom border; menu.css carries the same
   two numbers and the same warning. */
.wl__jumpwrap {
  position: sticky;
  top: 84px;
  z-index: 30;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  /* Opaque, and the page's own ground rather than transparent: the list scrolls UNDER this,
     and --bg is what it would otherwise show through against. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 980px) { .wl__jumpwrap { top: 92px; } }

/* The fade. Nine chips are wider than any phone and wider than a 1280px desktop, so the
   rail ALWAYS overflows here and the last chip is always cut — a fade says that is a scroll
   rather than a clipping bug. It is harmless if the sections are ever cut down to a set that
   fits: it is a gradient ending in --bg drawn over --bg, so with nothing under it there is
   nothing to see. pointer-events:none so it never eats a click on the chip beneath it. */
.wl__jumpwrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(to left, var(--bg) 30%, transparent);
}

.wl__jump {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 9px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wl__jump::-webkit-scrollbar { display: none; }
.wl__jumplnk { flex: 0 0 auto; }
.wl__jumplnk {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bg-soft);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wl__jumplnk:hover,
.wl__jumplnk:focus-visible { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--cream); }
.wl__jumpn { font-size: 0.74rem; opacity: 0.6; }

/* scroll-margin clears the nav AND the sticky rail, so a jumped-to heading lands below
   both instead of behind them. 84 + 46 + a little air; the 980px step matches the nav. */
.wl__sec {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  break-inside: avoid;
  scroll-margin-top: 142px;
}
@media (min-width: 980px) { .wl__sec { scroll-margin-top: 150px; } }
.wl__sech {
  margin: 0 0 clamp(7px, 0.9vw, 10px);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.wl__list { list-style: none; margin: 0; padding: 0; }

.wl__row {
  display: grid;
  /* minmax(0, 1fr) and not 1fr: a grid track's default min-width is auto, so one very long
     unbroken wine name would otherwise widen the column and push the price off the row —
     which is the same class of fault as the flex one above, arriving by a different door. */
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.wl__row:last-child { border-bottom: 0; }

.wl__name {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink);
  /* Their names are set in caps in the book and stay in caps here, but caps do not offer
     many break opportunities — so an over-long one is allowed to break inside a word
     rather than overflow the column. */
  overflow-wrap: break-word;
}
.wl__price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--ink);
  white-space: nowrap;
}
.wl__meta {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 1px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
  /* The book prints these lowercase and so does this. */
  text-transform: lowercase;
}

.wl__foot {
  margin-top: clamp(6px, 1vw, 12px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--line);
}
.wl__footnote {
  margin: 0 0 8px;
  max-width: 62ch;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.wl__footnote a { border-bottom: 1px solid var(--line); }
.wl__footnote:last-child { margin-bottom: 0; }

/* The cap. 46rem is about 60 characters of the name column plus the price, which is the
   width the rows were designed at and roughly what the printed page gives them. */
.wl__body { max-width: 46rem; }

@media (min-width: 900px) {
  .wl__name { font-size: 1rem; }
}