/* ===========================================================================
   Victoria International Wine Festival 2026, wine guide
   ---------------------------------------------------------------------------
   Design intent: editorial, typographic, quiet. Built to be read in three
   second glances by somebody standing up with a glass in one hand.

   Deliberate decisions, each one the opposite of what tested badly before:

   - Hairlines, not cards. Nothing is a rounded box floating on a tint. Rules
     and generous space do the separating, which is how a printed wine list
     works and it survives a small screen far better than nested boxes.
   - One accent only. The Festival coral marks what you can act on. If it is
     coral you can tap it. Nothing decorative is allowed to borrow that colour.
   - Ground is warm near black, never purple.
   - No counts. There is no CSS hook for a tally anywhere in this file, on
     purpose, so nobody can quietly add one later.
   - Tap targets are 44px minimum and the primary actions sit at the bottom of
     the screen, inside thumb reach, not at the top.
   =========================================================================== */

:root {
  /* ground and paper */
  --ink:        #17130F;
  --ink-2:      #241D18;
  --ink-3:      #3A302A;
  --paper:      #FBF9F6;
  --paper-2:    #F3EEE7;
  --paper-3:    #EAE2D8;
  --line:       #DFD5C9;
  --line-soft:  #EDE6DC;

  /* the Festival coral, taken from the logo artwork */
  --coral:      #F6998B;
  --coral-mid:  #E2705E;
  --coral-deep: #A83E29;   /* 6.0:1 on paper, safe for text and icons */

  /* muted text */
  --muted:      #6B6058;   /* 5.4:1 on paper */
  --muted-2:    #8B7F75;

  /* style keylines. Decorative only. Every one is also spelled out in words. */
  --s-red:      #8E2B36;
  --s-white:    #C8A227;
  --s-rose:     #E08A8A;
  --s-sparkle:  #7A8FA6;
  --s-sweet:    #9A6B2F;
  --s-sake:     #6E7C6B;

  --shell:      min(760px, 100%);
  --pad:        20px;
  --bar-h:      62px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Anything below the fixed action bar has to clear it. */
#app { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 8px); }

.shell { width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h1 { font-size: 2rem; line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; line-height: 1.2; }
p  { margin: 0 0 .85em; }
a  { color: inherit; }

.eyebrow {
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--coral { color: var(--coral-deep); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------- masthead */
.masthead {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 0 16px;
}
.masthead__in {
  display: flex; align-items: center; gap: 12px;
  width: var(--shell); margin: 0 auto; padding: 0 var(--pad);
}
.masthead__mark { flex: 1; min-width: 0; }
.masthead__k {
  font: 600 .62rem/1 var(--sans); letter-spacing: .2em;
  text-transform: uppercase; color: #B9ACA1; display: block; margin-bottom: 3px;
}
.masthead__t {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.05;
  letter-spacing: -.01em; display: block;
}
.masthead__t em { font-style: italic; color: var(--coral); }

/* Once the wordmark image loads it replaces the typographic version. The text
   stays in the DOM for screen readers and for a missing file. */
.masthead__logo { display: block; height: 46px; width: auto; }
.masthead__mark--logo .masthead__k,
.masthead__mark--logo .masthead__t { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.iconbtn {
  appearance: none; border: 0; background: transparent; color: inherit;
  min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  border-radius: 2px; padding: 0;
}
.iconbtn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* back link sits under the masthead, on paper */
.crumb {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; font: 500 .82rem/1 var(--sans); white-space: nowrap;
  color: var(--muted); text-decoration: none; cursor: pointer;
}
.crumb:hover { color: var(--ink); }
.crumb svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------------ intro */
.lede { padding: 26px 0 6px; }
.lede h1 { max-width: 15ch; }
.lede h1 em { font-style: italic; color: var(--coral-deep); }
.lede p { color: var(--muted); max-width: 44ch; margin-top: 10px; }

.rule { height: 1px; background: var(--line); border: 0; margin: 22px 0; }
/* On a country page the reader has already chosen. Get them to wine faster. */
.country-page .lede { padding: 4px 0 2px; }
.country-page .lede p { margin-top: 6px; font-size: .9rem; }
.country-page .rule { margin: 14px 0; }
.country-page h1 { font-size: 1.9rem; }
.rule--tight { margin: 14px 0; }

/* ------------------------------------------------ the featured region mark
   The Wines of South Africa palette, read out of the logo artwork rather than
   chosen to sit near it. It replaces the coral inside the featured region only,
   so the regional partner owns their own colour and the Festival coral still
   owns everything else. */
:root {
  --feat:      #FFCA26;   /* the logo's yellow */
  --feat-mid:  #FCAF17;
  --feat-deep: #F5821F;   /* the logo's orange. FILL ONLY, never text */
  --feat-ink:  #B4530A;   /* a darker orange that passes on cream, 4.65:1 */
  --feat-panel:#FFF5E4;   /* the warm ground the section sits on */
  --feat-edge: #F6DFB4;
  --feat-text: #5A4A2E;   /* 7.9:1 on the panel */
  --feat-dark: #23180B;   /* on the orange button, 6.7:1 */
}

/* The featured region, light.
   It was a dark slab, which shouted louder than the wines it was pointing at.
   It is now a warm panel in the regional partner's own colours, laid out as a
   row with the mark on the right, which is what makes it short: the copy and
   the logo share the height instead of stacking. */
.feature.feature--logo {
  background: var(--feat-panel);
  border-top: 3px solid var(--feat-deep);
  border-right: 1px solid var(--feat-edge);
  border-bottom: 1px solid var(--feat-edge);
  border-left: 1px solid var(--feat-edge);
  color: var(--feat-text);
  padding: 14px 16px 15px;
  display: flex; align-items: center; gap: 16px;
}
.feature.feature--logo .feature__copy { flex: 1; min-width: 0; display: block; }
.feature.feature--logo .feature__k { color: var(--feat-ink); display: block; margin-bottom: 7px; }
.feature.feature--logo p {
  color: var(--feat-text); margin: 0 0 11px; font-size: .86rem; max-width: 34ch;
}
.feature.feature--logo .feature__go {
  background: var(--feat-deep); color: var(--feat-dark);
  min-height: 42px; font-size: .82rem; padding: 0 16px;
}
.feature__logo {
  display: block; width: 92px; height: auto; flex: none; margin: 0;
}
@media (max-width: 380px) { .feature__logo { width: 76px; } }
.feature--logo .feature__k { color: var(--feat); }
.feature--logo .feature__go { background: var(--feat); color: #23180B; }

.featured-lede { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.featured-lede__t { flex: 1; min-width: 0; }
.featured-lede__p { flex-basis: 100%; }
.wosa { flex: none; display: inline-flex; align-items: center; }
/* Width has to be stated. Left to auto inside a flex row the image collapses. */
.wosa img { width: 58px; height: 62px; object-fit: contain; display: block; }
.eyebrow--feat { color: var(--feat-ink); }

/* Inside the featured country page the accent belongs to the region. The
   orange is a fill with dark text on it, never orange text on cream, which
   only reaches 2.4:1. */
.is-featured .chip[aria-pressed="true"] {
  background: var(--feat-deep); border-color: var(--feat-deep); color: var(--feat-dark);
}
.is-featured .country__go, .is-featured .buytag { color: var(--feat-ink); }
.is-featured .buytag { border-color: var(--feat-mid); }

/* --------------------------------------------------- featured region block */
.feature {
  display: block; text-decoration: none; color: var(--paper);
  background: var(--ink); position: relative; overflow: hidden;
  padding: 18px var(--pad) 20px; margin: 4px 0 8px;
  border-top: 3px solid var(--coral);
  cursor: pointer;
}
.feature__flag { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: 8px; }
.feature__k { color: var(--coral); }
.feature h2 {
  font-size: clamp(1.9rem, 9.5vw, 2.7rem); line-height: .95;
  letter-spacing: -.03em; margin: 6px 0 8px; text-transform: none;
}
.feature p { color: #CFC3B8; max-width: 40ch; font-size: .88rem; margin-bottom: 13px; }
.feature__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 .85rem/1 var(--sans); color: var(--ink); background: var(--coral);
  padding: 0 18px; letter-spacing: .01em;
}

/* ------------------------------------------------------- country listing */
/* Each country is a card you press, not a row in a list. A row reads as
   reference material; a card reads as a choice, which is what this screen is
   asking for. */
.countries { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.country {
  display: flex; align-items: center; gap: 14px;
  min-height: 66px; padding: 11px 14px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(23,19,15,.04), 0 4px 12px rgba(23,19,15,.045);
  text-decoration: none; color: inherit; cursor: pointer; width: 100%;
  text-align: left; font: inherit;
}
.country:active { background: var(--paper-2); transform: translateY(1px); }
.country__flag { font-size: 1.6rem; line-height: 1; width: 32px; flex: none; }
.country__n { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -.01em; flex: 1; }
.country__sub { display: block; font: 400 .74rem/1.3 var(--sans); color: var(--muted-2); margin-top: 2px; }
.country__go { color: var(--coral-deep); flex: none; }

/* ------------------------------------------------------------- wine rows */
/* Image led. A bottle shot is the fastest way for somebody holding a glass to
   confirm they are looking at the right wine, faster than reading a name. The
   picture is never load bearing though: roughly a quarter of the list has no
   listed bottle shot, so the well has a designed empty state rather than a
   grey box, and a card with no picture has to look deliberate. */
.wines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wine {
  position: relative; display: flex; gap: 13px; align-items: center;
  padding: 10px 12px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(23,19,15,.04), 0 4px 12px rgba(23,19,15,.045);
}

.shot {
  width: 66px; flex: none; align-self: center;
  position: relative; background: var(--paper-2);
  border: 0; border-radius: 6px;
  height: 90px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.shot img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block; object-fit: contain;
}
/* The empty state: the style keyline turned into a full height bar plus the
   producer's initials. Reads as a designed placeholder, not a failure. */
.shot--none { background: var(--paper-2); }
.shot__mono {
  font-family: var(--serif); font-size: 1.15rem; color: var(--muted-2);
  letter-spacing: -.02em;
}
.shot__key { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.wine[data-style="Red"] .shot__key                 { background: var(--s-red); }
.wine[data-style="White"] .shot__key               { background: var(--s-white); }
.wine[data-style="Rosé"] .shot__key                { background: var(--s-rose); }
.wine[data-style="Sparkling"] .shot__key           { background: var(--s-sparkle); }
.wine[data-style="Dessert & Fortified"] .shot__key { background: var(--s-sweet); }
.wine[data-style="Sake"] .shot__key                { background: var(--s-sake); }

.wine__body { flex: 1; min-width: 0; cursor: pointer; display: flex;
              flex-direction: column; gap: 3px; }
.wine__prod {
  font: 600 .68rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: block;
}
.wine__name {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.18;
  letter-spacing: -.005em; display: block; color: var(--ink);
}
.wine__meta {
  font: 400 .76rem/1.4 var(--sans); color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 3px 7px;
}
.wine__meta b { font-weight: 500; color: var(--ink-3); }
.wine__meta > span[aria-hidden] { color: var(--line); }

.wine__foot { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.price {
  font: 600 .92rem/1 var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price small { font-weight: 400; color: var(--muted-2); font-size: .72rem; }
.price--none { font-weight: 400; color: var(--muted-2); font-size: .8rem; }
.buytag {
  font: 600 .66rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--coral-deep); border: 1px solid var(--coral); padding: 4px 7px;
}
.myrate { font: 600 .72rem/1 var(--sans); color: var(--coral-deep); }

.wine__acts { display: flex; flex-direction: column; align-items: center;
              justify-content: flex-start; flex: none; }

/* the saved and rated states, each shown by shape AND text, never colour alone */
.act {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--muted); border-radius: 2px;
}
.act:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 1px; }
.act[aria-pressed="true"] { color: var(--coral-deep); }
.act svg { width: 21px; height: 21px; display: block; }

/* ------------------------------------------------------------ wine detail */
.detail { padding-top: 20px; }
.detail__top { display: flex; gap: 18px; align-items: flex-start; }
.detail__shot {
  width: 116px; flex: none; background: #fff; border: 1px solid var(--line-soft);
  height: 164px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.detail__shot img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.detail__shot .shot__key { width: 4px; }
.detail__head { flex: 1; min-width: 0; }
.detail__price {
  font: 600 1.5rem/1 var(--sans); font-variant-numeric: tabular-nums;
  margin: 14px 0 2px; display: block; letter-spacing: -.02em;
}
.detail__price small { display: block; font: 400 .74rem/1.4 var(--sans);
                       color: var(--muted-2); margin-top: 5px; }
@media (max-width: 400px) {
  .detail__shot { width: 92px; height: 132px; }
}
.detail__prod {
  font: 600 .72rem/1.2 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--coral-deep); text-decoration: none;
  display: inline-block; min-height: 32px;
}
.detail h1 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); margin: 6px 0 10px; }
.detail__line { font: 400 .92rem/1.5 var(--sans); color: var(--muted);
                display: flex; flex-wrap: wrap; gap: 4px 8px; }

.facts { border-top: 1px solid var(--line); margin: 20px 0 0; }
.fact {
  display: flex; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); font-size: .9rem;
}
.fact dt {
  flex: none; width: 116px; color: var(--muted);
  font: 500 .74rem/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.fact dd { margin: 0; flex: 1; }

.prose { font-size: .96rem; line-height: 1.62; color: var(--ink-2); }

/* the three attendee actions, the loudest thing on the page */
.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 8px;
}
.bigact {
  appearance: none; cursor: pointer; font: 600 .88rem/1 var(--sans);
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  gap: 9px; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); padding: 0 12px; text-align: center;
}
.bigact svg { width: 19px; height: 19px; }
.bigact--on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bigact--wide { grid-column: 1 / -1; }
.bigact:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }

/* Reads as a button, not a coloured strip. The lift is what says "press me",
   and it drops on touch so the press feels physical. */
.buy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; background: var(--coral); color: var(--ink);
  text-decoration: none; font: 600 .95rem/1.2 var(--sans);
  padding: 0 18px; margin: 16px 0 6px;
  border: 1px solid var(--coral-deep);
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--coral-deep), 0 6px 16px rgba(122, 34, 51, .22);
  transform: translateY(0);
  transition: transform .09s ease, box-shadow .09s ease, background .12s ease;
}
.buy:hover { background: var(--coral-mid, var(--coral)); }
.buy:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--coral-deep), 0 2px 7px rgba(122, 34, 51, .2);
}
.buy:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.buy span small { display: block; font: 400 .72rem/1.3 var(--sans); opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .buy { transition: none; }
  .buy:active { transform: none; }
}

/* star rating */
.stars { display: flex; gap: 2px; }
.star {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  min-width: 46px; min-height: 46px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--line);
}
.star[data-on="1"] { color: var(--coral-deep); }
.star svg { width: 27px; height: 27px; }
.star:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 0; }

.note {
  width: 100%; min-height: 96px; font: inherit; font-size: .95rem;
  padding: 12px; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); resize: vertical; border-radius: 0;
}
.note:focus { outline: 0; border-color: var(--ink); }

.seg { display: inline-flex; border: 1.5px solid var(--line); }
.seg button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: 500 .8rem/1 var(--sans); min-height: 44px; padding: 0 16px; color: var(--muted);
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ chips */
.chips {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

/* A DRAWN SCROLLBAR, BECAUSE THE REAL ONE IS INVISIBLE WHERE IT MATTERS MOST.
   iOS and Android hide scrollbars until you are already scrolling, which is
   exactly too late: the point is to tell somebody there is more to the right
   BEFORE they have thought to swipe. The fade alone was too subtle. So the
   track and thumb below are real elements, sized and moved from app.js, and
   they show on every device. */
.chiprail {
  height: 3px; border-radius: 2px; background: var(--line-soft);
  margin: -4px 0 12px; position: relative; overflow: hidden;
}
.chiprail__thumb {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--muted); border-radius: 2px; opacity: .55;
  transition: transform .06s linear;
}
@media (prefers-reduced-motion: reduce) { .chiprail__thumb { transition: none; } }
.is-featured .chiprail__thumb { background: var(--feat-ink); }

/* With a mouse there is a real scrollbar to be had, so allow one as well. */
@media (hover: hover) and (pointer: fine) {
  .chips { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .chips::-webkit-scrollbar { display: block; height: 8px; }
  .chips::-webkit-scrollbar-track { background: transparent; }
  .chips::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .chips::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  .chips--wrap { scrollbar-width: none; }
  .chips--wrap::-webkit-scrollbar { display: none; }
}
/* A hint that the row continues, so nobody thinks these are all the filters. */
.chipwrap { position: relative; }
.chipwrap::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 10px; width: 28px;
  background: linear-gradient(90deg, rgba(251,249,246,0), var(--paper));
  pointer-events: none;
}
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  appearance: none; cursor: pointer; white-space: nowrap; flex: none;
  font: 500 .82rem/1 var(--sans); min-height: 44px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); color: var(--ink-2); border: 1.5px solid var(--line);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }
.chip__dot { width: 8px; height: 8px; flex: none; }
.chip--filter { border-color: var(--ink); font-weight: 600; }
.chip--filter[data-n]::after {
  content: attr(data-n); background: var(--ink); color: var(--paper);
  font: 700 .66rem/16px var(--sans); min-width: 16px; height: 16px;
  text-align: center; padding: 0 4px;
}
.chip--filter[aria-pressed="true"]::after { background: var(--coral); color: var(--ink); }

/* Producers strip on a featured region page.
   One scrolling row, never a wrapped block. Fourteen names wrapped is four
   rows of vertical space, which pushes the actual wines below the fold on a
   phone. That is precisely the friction this product exists to remove. */
.prodstrip {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
  margin: 2px 0 4px; padding-bottom: 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.prodstrip::-webkit-scrollbar { display: none; }
.prodstrip a {
  font: 500 .82rem/1 var(--sans); color: var(--ink-2); text-decoration: none;
  white-space: nowrap; flex: none; border: 1.5px solid var(--line);
  padding: 0 13px; min-height: 40px; display: inline-flex; align-items: center;
  cursor: pointer;
}
.prodstrip a:active { background: var(--paper-2); }

/* ----------------------------------------------------------------- search */
.searchbar { position: relative; margin: 6px 0 4px; }
.searchbar input {
  width: 100%; font: 400 1.02rem/1 var(--sans); min-height: 52px;
  padding: 0 44px 0 44px; border: 1.5px solid var(--ink); background: #fff;
  color: var(--ink); border-radius: 0; -webkit-appearance: none;
}
.searchbar input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--ink); }
.searchbar svg { position: absolute; left: 14px; top: 50%; margin-top: -9px;
                 width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.searchbar .clear { position: absolute; right: 2px; top: 2px; }

/* ------------------------------------------------------------- empty state */
.empty { padding: 40px 0; text-align: center; color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }

/* --------------------------------------------------------------- my wines */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tabs button {
  appearance: none; background: none; border: 0; cursor: pointer; flex: 1;
  font: 600 .86rem/1 var(--sans); min-height: 48px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--coral-mid); }

.mynote {
  background: var(--paper-2); border-left: 3px solid var(--coral);
  padding: 10px 12px; margin-top: 8px; font-size: .88rem; line-height: 1.5;
  white-space: pre-wrap;
}
.mynote__k { font: 600 .66rem/1 var(--sans); letter-spacing: .1em;
             text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }

/* ------------------------------------------------------------- bottom bar */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(23, 19, 15, .97);
  backdrop-filter: saturate(1.4) blur(8px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid #2E2620;
}
.bar__in { display: flex; width: var(--shell); margin: 0 auto; }
.bar a {
  flex: 1; min-height: var(--bar-h); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: #A2958A; cursor: pointer;
  font: 500 .66rem/1 var(--sans); letter-spacing: .03em;
}
.bar a svg { width: 21px; height: 21px; }
.bar a[aria-current="page"] { color: var(--paper); }
.bar a[aria-current="page"] svg { color: var(--coral); }
.bar__pip {
  position: absolute; transform: translate(13px, -13px);
  min-width: 16px; height: 16px; padding: 0 4px; background: var(--coral);
  color: var(--ink); font: 700 .6rem/16px var(--sans); text-align: center;
}

/* ---------------------------------------------------------------- sponsor */
/* A slot with no live campaign renders nothing at all. There is no minimum
   height, no placeholder and no border, so an empty slot cannot leave a gap. */
.sponsor { display: block; text-decoration: none; color: inherit; margin: 18px 0; }
.sponsor:empty { display: none; }
.sponsor__k {
  font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); display: block; margin-bottom: 7px;
}
.sponsor img { display: block; width: 100%; height: auto; }
.sponsor--in { border-top: 1px solid var(--line-soft);
               border-bottom: 1px solid var(--line-soft); padding: 14px 0; }

/* ---------------------------------------------------------------- tickets
   The Festival's own door, so it is the Festival's own ink rather than the
   coral used for the retailer's Buy button. Two buttons that send people to
   two different companies should not look like the same button. */
.tickets {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; background: var(--ink); color: var(--paper);
  text-decoration: none; font: 600 .95rem/1.2 var(--sans);
  padding: 0 18px; border-radius: 8px;
  box-shadow: 0 2px 0 #000, 0 6px 16px rgba(23, 19, 15, .2);
  transition: transform .09s ease, box-shadow .09s ease;
}
.tickets span small {
  display: block; font: 400 .72rem/1.3 var(--sans); color: #C9BDB2; margin-top: 2px;
}
.tickets svg { color: var(--coral); flex: none; }
.tickets:active { transform: translateY(2px); box-shadow: 0 0 0 #000, 0 2px 7px rgba(23,19,15,.2); }
.tickets:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 2px; }
.tickets--home { margin: 18px 0 2px; }
.tickets--my-wines { margin: 18px 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .tickets { transition: none; }
  .tickets:active { transform: none; }
}

/* ------------------------------------------------------- the sticky footer
   Sits directly on top of the navigation bar and stays there on every screen.
   The most valuable slot in the guide and the easiest one to make people
   resent, so it is deliberately short, it can be dismissed, and dismissing it
   is remembered for the rest of that visit.

   #app's bottom padding is raised from app.js while it is showing, otherwise
   this covers the last wine in every list. */
.sponsorbar {
  position: fixed; left: 0; right: 0; z-index: 41;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(23, 19, 15, .10);
  display: flex; align-items: center;
}
.sponsorbar > .sponsor {
  flex: 1; margin: 0; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; max-width: var(--shell); margin: 0 auto;
}
.sponsorbar .sponsor__k { margin: 0 0 2px; }
.sponsorbar .sponsor img { max-height: 40px; width: auto; max-width: 100%; }
.sponsorbar .wine__name { font: 600 .86rem/1.2 var(--sans); }
.sponsorbar__x {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: none; width: 40px; height: 40px; margin-right: 4px;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.sponsorbar__x:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: -2px; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px);
  transform: translate(-50%, 12px); z-index: 60;
  background: var(--ink); color: var(--paper); padding: 11px 18px;
  font: 500 .85rem/1.3 var(--sans); max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.toast[data-on="1"] { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ sheet */
.sheet { position: fixed; inset: 0; z-index: 70; display: none; }
.sheet[data-on="1"] { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(23,19,15,.45); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper);
  max-height: 86vh; overflow: auto; padding: 6px var(--pad) calc(20px + env(safe-area-inset-bottom, 0px));
  animation: rise .22s var(--ease);
}
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
.sheet__grab { width: 38px; height: 4px; background: var(--line);
               margin: 8px auto 14px; border-radius: 2px; }
.sheet h2 { margin-bottom: 12px; }
.sheet__foot { display: flex; gap: 8px; margin-top: 18px; }
.sheet__foot .bigact { flex: 1; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Wider screens keep the same single column. This is a phone product that
   happens to open on a laptop, not a responsive grid that collapses. */
@media (min-width: 700px) {
  h1 { font-size: 2.5rem; }
  .lede { padding-top: 38px; }
  .actions { grid-template-columns: 1fr 1fr 1fr; }
  .bigact--wide { grid-column: auto; }
}