.wines-intro { padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: 2.2rem; }
.wines-intro h1 { font-size: clamp(2.7rem, 6vw, 4.8rem); text-transform: none; margin: 1.2rem 0; }
/* Latin letter-spacing on four Chinese glyphs pushes the ideographic full stop
   a whole character clear of the word: 酒 單 。 instead of 酒單。 */
:root[data-lang="zh"] .wines-intro h1,
:root[data-lang="cn"] .wines-intro h1 { letter-spacing: 0; }
.wines-intro .lede { max-width: 44rem; }
.wines-totals { display: flex; flex-wrap: wrap; gap: 1.1rem 2.5rem; margin-top: 2rem; color: var(--gold); font-size: .76rem; }
.wines-totals span { display: flex; align-items: baseline; gap: .5rem; }
.wines-totals b { font-family: var(--serif); font-size: 2.1rem; color: var(--cream); font-weight: 400; }
.wines-intro .btn-row { margin-top: 2.4rem; }

/* --- the three days, as a switch --- */
.day-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(201,149,74,.22); border: 1px solid rgba(201,149,74,.22); margin: 2.6rem 0 0; }
.day-tab { background: #2a0508; border: 0; padding: 1.5rem 1.2rem; text-align: left; color: var(--cream-dim); font: inherit; cursor: pointer; transition: background .35s ease, color .35s ease; }
.day-tab:hover { background: #350a0e; color: var(--cream); }
/* Selected, not shouting: solid gold stays exclusive to RESERVE. A filled day
   tile is 8x the CTA's area and sits right above it, which made the navigation
   control read as the page's main action. */
.day-tab[aria-selected="true"] { background: rgba(201,149,74,.14); color: var(--cream); box-shadow: inset 0 -3px 0 var(--gold); }
.day-tab[aria-selected="true"] .dt-n, .day-tab[aria-selected="true"] .dt-meta { color: var(--gold); opacity: 1; }
.day-tab .dt-n { display: block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.day-tab .dt-name { display: block; font-family: var(--serif); font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.25; margin: .5rem 0 .4rem; }
.day-tab .dt-meta { display: block; font-size: .68rem; letter-spacing: .06em; opacity: .8; }

/* The all-days control is a reset, not the page's call to action, so it is
   outlined like the day buttons rather than filled solid gold - a solid fill
   here out-shouts RESERVE, which is the only thing on the page worth shouting. */
.day-all { margin-top: 1px; }
.day-all button { width: 100%; background: #2a0508; border: 1px solid rgba(201,149,74,.22); border-top: 0; padding: .95rem; color: var(--cream-dim); font: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.day-all button:hover { background: #350a0e; color: var(--cream); }
.day-all button[aria-selected="true"] { background: rgba(201,149,74,.14); color: var(--gold); border-color: var(--gold); }

/* --- filters --- */
.wines-controls { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; align-items: flex-end; padding: 0 0 1.6rem; border-bottom: var(--hair); }
.wines-controls[hidden] { display: none; }
.wines-controls > div { flex: 1 1 12rem; }
.wines-controls .wc-search { flex: 2 1 20rem; }
.wines-controls label { display: block; font-size: .64rem; letter-spacing: .14em; color: var(--gold); margin-bottom: .6rem; text-transform: uppercase; }
.wines-controls input, .wines-controls select { width: 100%; padding: .8rem 1rem; border: var(--hair); background: #2a0508; color: var(--cream); font: inherit; font-size: .8rem; border-radius: 0; }
.wines-controls input::placeholder { color: var(--cream-faint); }
.wines-results { color: var(--cream-faint); font-size: .72rem; padding: 1rem 0 .4rem; min-height: 2.4rem; }
.wines-legend { color: var(--cream-faint); font-size: .68rem; padding: 0 0 1.4rem; }
.wines-legend .wine-days { margin-right: .55rem; }

/* --- the list, grouped by the house that makes the wine --- */
.house { border-bottom: var(--hair); padding: 2.2rem 0; }
.house[hidden] { display: none; }
.house-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; color: inherit; border: 0; padding: 0; text-align: left; cursor: pointer; }
.house-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; }
.house-name { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.3; }
.house-toggle i { color: var(--gold-lift); font-size: 1.5rem; font-style: normal; transition: transform .2s ease; }
.house-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.house-toggle[aria-expanded="true"] + .wine-list { margin-top: 1.3rem; }
.house-origin { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.house-owner { font-size: .7rem; color: var(--cream-dim); letter-spacing: .06em; }

/* A house with one or two wines does not get a three-column grid: the wine
   would sit in the left third with two empty thirds beside it for the height
   of the whole block. The column count is set per house, from how many wines
   it actually pours, so every block fills the line it occupies. */
.wine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.4rem; }
.wine-list[hidden] { display: none !important; }
.wine-list { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.house[data-n="1"] .wine-list { grid-template-columns: minmax(0, 1fr); }
/* A house pouring one wine got a full-width row with the chip parked a
   thousand pixels away at the right. Packed left, it reads as one line. */
.house[data-n="1"] .wine { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.house[data-n="1"] .wine-name { flex: 0 1 auto; }
.house[data-n="2"] .wine-list, .house[data-n="4"] .wine-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Name, day marker, vintage, style: four real columns, so the vintages line up
   and the right edge of the chips is straight whether or not a row has one. */
.wine { display: grid; grid-template-columns: 1fr auto 2.6rem 5.4rem; align-items: baseline; column-gap: .8rem; padding: .62rem 0; border-top: 1px solid rgba(251,243,231,.07); }
.wine[hidden] { display: none; }
.wine-name { font-size: .92rem; color: var(--cream-dim); line-height: 1.45; overflow-wrap: anywhere; }
.wine-region { display: block; margin-top: .18rem; color: var(--gold); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.wine-award {
  display: block; width: fit-content; margin-top: .38rem; padding: .18rem .48rem;
  border: 1px solid rgba(233,197,124,.48); color: var(--gold-lift);
  font-size: .6rem; line-height: 1.35; letter-spacing: .04em; text-decoration: none;
}
.wine-award:hover { background: rgba(201,149,74,.12); color: var(--cream); }
.wine-vint { grid-column: 3; justify-self: end; font-family: var(--serif); font-size: .95rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.wine-style { grid-column: 4; justify-self: start; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,149,74,.35); padding: .2rem .5rem; white-space: nowrap; }
.wines-empty { padding: 3rem 0; color: var(--cream-faint); border-bottom: var(--hair); }
.wines-note { color: var(--cream-faint); font-size: .72rem; max-width: 40rem; padding: 1.8rem 0 0; }
.wines-section .btn-row { margin-top: 2.2rem; }

/* A wine poured on more than one day says so, instead of being printed twice.
   Deliberately NOT a chip: it sits in the same meta row as the style chip, and
   an outlined box beside an outlined box read as two values of one thing. */
.wine-days { grid-column: 2; font-size: .6rem; letter-spacing: .08em; color: var(--cream-faint); font-style: italic; white-space: nowrap; }
.wine-days span { letter-spacing: .08em; font-style: normal; }
.wines-legend .wine-days { font-style: italic; }

/* On a phone a wine name gets the whole row. An earlier build left the list at
   two columns here; inside a 190px column the four-column row crushed the name
   to a single character and every wine rendered as a vertical ladder of
   letters, which also made the page 83,000 CSS px tall. One column, always. */
@media (max-width: 760px) {
  .day-tabs { grid-template-columns: 1fr; }
  .day-tab { padding: 1.1rem; }
  .wines-totals { gap: 1rem 2rem; }
  .wine-list,
  .house[data-n="1"] .wine-list,
  .house[data-n="2"] .wine-list,
  .house[data-n="4"] .wine-list { grid-template-columns: minmax(0, 1fr); }
  .wine { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: .6rem; }
  .wine-vint { grid-column: auto; }
  .wine-style { grid-column: auto; }
  .wine-days { grid-column: auto; }
  .wine-name { font-size: .84rem; }
  .wines-controls > div, .wines-controls .wc-search { flex: 1 1 100%; }
}
@media (max-width: 430px) {
  /* Narrower than this the name and its markers cannot share a line without
     hyphenating the name, so the name takes the first line and the markers
     pack left underneath it. A grid was tried here and indented the chip on
     every wine with no vintage, because the empty vintage cell still held
     its column. Flex packs them instead. */
  .wine { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .6rem; }
  .wine-name { flex: 1 0 100%; }
  .wine-vint, .wine-days, .wine-style { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .day-tab, .day-all button { transition: none; }
}