/* Sandokán
   Night on the deck of our own ship: the live sea (sea/dist/deck.js) fills the window behind
   everything, under the moon. Over it float a few things, as if lit by a ship's lantern:
   a dark carved nameboard with dull gilt, lantern-lit parchment for the documents (recipes, the
   chart, the ficha), dark oiled wood for the other tabs and an iron-strapped chest. The Botellas
   tab (hero search, filters, the shelves, the loose bottles) is minimal frosted glass instead: thin
   light borders, glass shelves, cream ink, amber accents. The menu is a plain dark translucent bar:
   sticky at the top of the window on desktop, fixed at the foot on phones; the open section has a
   slim amber underline.
   Rules: no text ever sits on the bare sea. Text sits on an opaque surface, or on a frosted glass
   panel (.glass) whose tint is dark enough that its ink holds >= 7:1 even over a bright backdrop
   (the numbers are next to the glass tokens). Prices and store names use the text face at 700.
   Three ink families: dark sepia on parchment (.paper), bone on dark wood (.leather and the other
   night surfaces), cream on glass (.glass). Each is >= 7:1 against its own surface. */
:root {
  color-scheme: dark;
  /* type: Fell only for headings >= 28px; Caslon for everything read, digits included */
  --f-display: "IM Fell English", "Libre Caslon Text", Georgia, serif;
  --f-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --f-text: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --display: var(--f-display);   /* legacy names still used by extras.css and the SVG chart */
  --caps: var(--f-text);
  --body: var(--f-text);

  /* the night */
  --night: #0a0e16;
  --night-veil: rgba(4, 6, 10, 0.84);
  --shadow-night: 0 18px 44px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.45);
  --lantern: rgba(255, 206, 128, 0.5);

  /* sepia ink on lantern-lit parchment: every step is >= 7:1 on the lit centre of a sheet */
  --sepia: #1a1007;
  --sepia-2: #1f1309;
  --sepia-3: #23160a;
  --sepia-link: #2a0e02;
  --wax-ink: #4f0d05;
  --sea-ink: #1d3d52;

  /* bone ink on dark wood */
  --bone: #eadcbc;
  --bone-2: #cdbb94;
  --gold: #d0ab64;        /* dull gilt: labels and small caps on dark wood (8.4:1) */
  --gold-hi: #dcbd7c;     /* dull gilt for big headings */
  --gold-link: #e2c27f;

  /* the inks in use; .paper and the night surfaces re-declare them for their own family */
  --ink: var(--sepia);
  --ink-2: var(--sepia-2);
  --muted: var(--sepia-3);
  --link: var(--sepia-link);
  --focus: var(--gold-link);
  --field: rgba(255, 246, 222, 0.62);
  --field-line: rgba(70, 40, 12, 0.6);
  --placeholder: #4c3519;

  /* surfaces */
  --paper: #c9a66c;
  /* a warm wash that evens out the parchment texture under the text (sepia ink measured >= 7:1 on it) */
  --paper-wash: rgba(236, 210, 158, 0.66);
  --lamp: radial-gradient(ellipse 90% 80% at 50% 40%, rgba(255, 238, 196, 0.26), rgba(255, 238, 196, 0) 78%);
  --paper-edge: rgba(40, 20, 4, 0.75);
  --burn: rgba(36, 15, 3, 0.92);
  --oak: #1c140d;
  --oak-veil: rgba(10, 7, 4, 0.78);
  --wax: #6e1309;
  --wax-dark: #3d0904;
  --cream: #fbecc9;
  --iron: #24211f;

  /* aged metal plates (section titles, buttons): bone ink on every stop is >= 8:1 */
  --plate-ink: #efe0b8;
  --plate: linear-gradient(180deg, #4a3c29 0%, #382d1f 52%, #2b2218 100%);
  --plate-lit: linear-gradient(180deg, #55452f 0%, #403322 52%, #30261b 100%);
  --plate-rim: #120d08;
  --plate-edge: rgba(168, 136, 82, 0.5);
  --rivet: radial-gradient(circle, #a8916a 0 1.6px, #3b2f20 2.2px, transparent 3.2px);

  /* dull gilt title */
  --gilt: linear-gradient(180deg, #efdcab 0%, #d6b273 50%, #c4a062 100%);

  /* legacy names (other stylesheets may still use them) */
  --sky: var(--night);
  --shadow-sea: var(--shadow-night);
  --brass: var(--plate);
  --brass-lit: var(--plate-lit);
  --brass-ink: var(--plate-ink);
  --brass-rim: var(--plate-rim);
  --led: var(--gold);
  --led-hot: var(--cream);
  --led-glow: var(--lantern);
  --walnut: var(--oak);
  --walnut-dark: #0d0905;
  --ink-soft: var(--muted);
  --text: var(--ink);
  --text-dim: var(--muted);
  --bone-ink: var(--bone);

  /* textures */
  --tex-paper: url("img/tex/parchment.jpg");        /* the ficha and the chart */
  --tex-parch: url("img/tex/parchment-tile.jpg");   /* every other sheet, tiled */
  --tex-oak: url("img/tex/deck-oak.jpg");
  --tex-rack: url("img/tex/rack-wood.jpg");
  --tex-chest: url("img/tex/chest-wood.jpg");

  /* frosted glass (.glass): a dark tint over a blurred backdrop, a faint sheen, a hairline.
     Contrast, worst case: the blurred backdrop can reach sRGB 170 grey, the sheen is at its top (+5 % white).
       effective bg = (1 - a) * 170 + a * tint, a = 0.82, tint (12, 10, 18)  ->  rgb 51 50 56 under the sheen
       cream ink #fff3d6    11.6:1 on the panel,  9.4:1 on a chip (+7 % fill),  7.9:1 on an active chip (+13 %)
       ink-2    #f2e8d0     10.5:1 panel,  8.5:1 chip,  7.7:1 hovered chip (+10 %)
       muted    #f4e0a4      9.7:1 panel,  7.9:1 chip  (captions, summary line)
       link     #f8e3a8     10.0:1 panel,  8.1:1 chip
       placeholder #e4d8bc   9.0:1 panel,  7.3:1 chip (inputs)
     Without backdrop-filter the tint goes to 0.86 (flat rgb 34 32 39 at worst, higher contrast still).
     The tall shelves panel never blurs (frame time over the live sea) and always uses that 0.86 tint. */
  --glass-tint: rgba(12, 10, 18, 0.82);
  --glass-tint-flat: rgba(12, 10, 18, 0.86);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  --glass-line: rgba(255, 244, 220, 0.22);       /* hairline of panels, inputs, tags */
  --glass-line-hi: rgba(255, 244, 220, 0.38);    /* brighter hairline: title pills, arrows, hovered controls */
  --glass-chip: rgba(255, 248, 230, 0.07);       /* fill of chips, inputs, tags */
  --glass-chip-hover: rgba(255, 248, 230, 0.10);
  --glass-chip-on: rgba(255, 240, 210, 0.13);    /* the chip that is on */
  --glass-amber: var(--bar-accent);              /* amber accent: graphics, borders and fills, never small text */
  --glass-amber-line: rgba(255, 180, 84, 0.75);
  --glass-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.14), 0 14px 34px rgba(0, 0, 0, 0.3);
  --glass-menu: #17141f;                         /* the opened list of a select must be opaque */
  --glass-cream: #fff3d6;
  --glass-r-panel: 18px;
  --glass-r-ctl: 10px;
  --glass-r-tag: 8px;
  /* thin cream chevron of the selects and the details summaries */
  --glass-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eadcbc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");

  /* the menu bar: dark translucent tint of the darkest ink, one warm amber accent */
  --bar-bg: rgba(10, 14, 22, 0.84);      /* 0.84 keeps the text >= 8:1 even over a pure white pixel behind the blur */
  --bar-line: var(--glass-line);
  --bar-ink: #ddcfab;
  --bar-ink-hi: #fff4da;
  --bar-accent: var(--party-amber, #ffb454);

  /* layout (desktop first: the bar is sticky at the top, so nothing is covered at the bottom) */
  --rail-h: 58px;                        /* fallback; nav.js sets the measured height of the menu bar */
  --rail-gap: 0px;                       /* the phone bar sits flush with the window edge */
  --rail-top: var(--rail-h);             /* room the sticky bar takes at the top of the window */
  --rail-clear: 0px;                     /* room the menu covers at the bottom: none on desktop */
  --gap-sea: clamp(72px, 13vh, 140px);   /* open water between big things */
  --page: min(1180px, calc(100% - 64px));
}

/* The two ink families. Everything inside picks its colours from these tokens. */
.paper, .receipt, .page, .map-sheet, .old-map {
  --ink: var(--sepia);
  --ink-2: var(--sepia-2);
  --muted: var(--sepia-3);
  --link: var(--sepia-link);
  --focus: var(--wax-ink);
  --field: rgba(255, 246, 222, 0.62);
  --field-line: rgba(70, 40, 12, 0.6);
  --placeholder: #4c3519;
  color-scheme: light;
}
.leather, .satchel, .board, .floor, .nameboard, .ficha-close {
  --ink: var(--bone);
  --ink-2: var(--bone-2);
  --muted: var(--gold);
  --link: var(--gold-link);
  --focus: var(--gold-link);
  --field: rgba(6, 4, 2, 0.6);
  --field-line: rgba(201, 164, 92, 0.55);
  --placeholder: #b3a07c;
  color-scheme: dark;
}

/* Cream on frosted glass (see the contrast numbers with the glass tokens). */
.glass {
  --ink: var(--glass-cream);
  --ink-2: #f2e8d0;
  --muted: #f4e0a4;
  --link: #f8e3a8;
  --focus: var(--glass-amber);
  --field: var(--glass-chip);
  --field-line: var(--glass-line);
  --placeholder: #e4d8bc;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  background: var(--night);
  scroll-padding-top: calc(var(--rail-top) + 16px);
  scroll-padding-bottom: calc(var(--rail-clear) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 18px/1.55 var(--f-text);
  background: transparent;   /* the deck layer shows through; html carries the night colour */
  overflow-x: hidden;
}
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- The sea layer ---------- */
.deck-host {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* the poster paints at the first frame (preloaded); the night bands only sit under it while it decodes.
     The JS layer (.deck-root) is transparent, so only its canvas fades in over this. */
  background: url("sea/assets/deck-poster.jpg") 50% 100% / cover no-repeat,
    linear-gradient(180deg, #05070d 0%, #111a2b 40%, #24324a 49%, #0d1622 50%, #070c14 69%, #2a1c11 70%, #140d07 100%);
}
.deck-failed .deck-host { background: url("sea/assets/deck-poster.jpg") 50% 100% / cover no-repeat, var(--night); }
@media (max-width: 819px), (orientation: portrait) {
  .deck-host { background: url("sea/assets/deck-poster-m.webp") 50% 100% / cover no-repeat,
    linear-gradient(180deg, #05070d 0%, #111a2b 40%, #24324a 49%, #0d1622 50%, #070c14 59%, #2a1c11 60%, #140d07 100%); }
  .deck-failed .deck-host { background: url("sea/assets/deck-poster-m.webp") 50% 100% / cover no-repeat, var(--night); }
}

/* ---------- First screen: a small nameboard and the search, the rest is sea ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--rail-top));
  min-height: calc(100svh - var(--rail-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 22px);
  padding: clamp(34px, 6vh, 64px) 16px calc(var(--rail-clear) + 24px);
  text-align: center;
}
.stars { display: none; }
.nameboard {
  position: relative;
  padding: 0.16em 0.7em 0.2em;
  font-size: clamp(44px, 5.4vw, 80px);
  border-radius: 0.1em;
  background:
    var(--rivet) 0.32em 50% / 0.24em 0.24em no-repeat,
    var(--rivet) calc(100% - 0.32em) 50% / 0.24em 0.24em no-repeat,
    radial-gradient(ellipse 70% 90% at 50% 20%, rgba(255, 200, 120, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(8, 5, 3, 0.74), rgba(8, 5, 3, 0.88)),
    var(--tex-oak) center / 520px auto,
    var(--oak);
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 160, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 0 0 2px #0b0704,
    0 0 0 4px #6a5530,
    0 0 0 5px #0b0704,
    var(--shadow-night);
}
/* two ropes up to the yard: the board hangs from the rigging */
.nameboard::before,
.nameboard::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  width: 6px;
  height: 100vh;
  border-radius: 3px;
  background: repeating-linear-gradient(-58deg, #8a7553 0 3px, #4a3c28 3px 6px);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.4);
}
.nameboard::before { left: 16%; }
.nameboard::after { right: 16%; }
.hero h1 {
  margin: 0;
  font: 400 1em/1 var(--f-sc);
  letter-spacing: 0.04em;
  background-image: var(--gilt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d6b273;   /* fallback and the measured mid tone of the gilt */
  /* carved: a dark cut below, a hair of light above; no glow */
  filter: drop-shadow(0 2px 0 #0b0704) drop-shadow(0 -1px 0 rgba(255, 236, 190, 0.18));
}
.hero-search {
  width: min(560px, 100%);
  padding: 18px 20px 20px;
  text-align: left;
}
.lede { margin: 0 0 12px; font-size: 18px; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.search-row { display: flex; align-items: flex-end; gap: 10px; }
.search-row .field { flex: 1; }

/* ---------- Frosted glass panel: the big surfaces of the Botellas tab ----------
   Only these panels blur what is behind them (one pass each); chips, inputs, tags and arrows inside only
   carry a translucent fill, so nothing blurs twice. */
.glass {
  background: var(--glass-sheen), var(--glass-tint);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-r-panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}
/* no backdrop blur available: a flatter, more opaque tint, so the text never sits on the moving sea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-sheen), var(--glass-tint-flat); }
}

/* ---------- The menu: a plain translucent bar ----------
   Desktop (>= 820px): sticky at the top of the window, in the page flow, so panels start below it.
   Phones (< 820px): fixed at the foot of the window; --rail-clear keeps the end of every panel clear of it.
   Plain text tabs in the reading face; the open section has brighter text and a slim amber underline. */
.rail {
  --ink: var(--bone);
  --focus: var(--bar-accent);
  color-scheme: dark;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
/* no backdrop blur available: a solid bar, so the text never sits on the moving sea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail { background: var(--night); }
}
.signs button {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: 700 17px/1.15 var(--f-text);
  letter-spacing: 0.01em;
  color: var(--bar-ink);
  background: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
}
.signs button > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* the slim indicator of the open section; it only grows in and out, a subtle transition */
.signs button::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--bar-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.signs button:hover { color: var(--bar-ink-hi); }
.signs button[aria-selected="true"] { color: var(--bar-ink-hi); }
.signs button[aria-selected="true"]::after { transform: scaleX(1); }
.signs button:focus-visible { outline: 2px solid var(--bar-accent); outline-offset: -6px; border-radius: 8px; }
/* the chest counter: a small plain pill (dark ink on amber, 10:1) */
.bag-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  color: var(--sepia);
  background: var(--bar-accent);
}
.bag-count[hidden] { display: none; }
.bag-count.bump { animation: bump 0.4s ease; }
@keyframes bump { 40% { transform: scale(1.3); } }

/* Phones: a fixed bar at the foot. Its measured height (--rail-h) includes the device inset, so --rail-clear is exactly what it covers. */
@media (max-width: 819.98px) {
  :root {
    --rail-top: 0px;
    --rail-clear: calc(var(--rail-h) + var(--rail-gap));
  }
  .rail {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--rail-gap);
    justify-content: stretch;
    gap: 0;
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left));
    border-bottom: 0;
    border-top: 1px solid var(--bar-line);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28);
  }
  .signs button { flex: 1 1 0; min-width: 0; padding: 0 2px; letter-spacing: 0; }
  .signs button > span { gap: 5px; }
  .signs button::after { top: -1px; bottom: auto; left: 14%; right: 14%; border-radius: 0 0 3px 3px; }
  .bag-count { min-width: 22px; height: 22px; padding: 0 5px; }
}
/* narrow phones: the five tabs share the width, so the chest counter becomes a badge over the label's top corner
   (it takes no room, and the neighbouring labels never move when it grows to two or three digits) */
@media (max-width: 520px) {
  .bag-count { position: absolute; top: 2px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; }
}
@media (max-width: 400px) {
  .signs button { font-size: 16px; }
}

/* ---------- Page ---------- */
main { width: var(--page); margin: 0 auto; padding: 0 0 var(--gap-sea); }
.panel { display: flex; flex-direction: column; gap: 56px; }
#mostrador.panel { gap: 28px; }
.panel[hidden] { display: none; }
/* the foot of every panel (shelves, Jodas cards, chest) stops short of the phone menu bar, also when something scrolls it into view */
.panel > :last-child { scroll-margin-bottom: calc(var(--rail-clear) + 16px); }

/* Parchment: a document under a lantern. Lit in the middle, darker toward the edges. */
.paper {
  color: var(--ink);
  background:
    var(--lamp),
    linear-gradient(var(--paper-wash), var(--paper-wash)),
    var(--tex-parch) 0 0 / 900px auto,
    var(--paper);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--paper-edge), inset 0 0 26px 2px rgba(60, 28, 4, 0.55), var(--shadow-night);
}
/* Dark oiled wood: the controls and the notes about them. */
.leather {
  color: var(--ink);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 200, 120, 0.06), transparent 70%),
    linear-gradient(rgba(10, 7, 4, 0.8), rgba(10, 7, 4, 0.86)),
    var(--tex-oak) center / 520px auto,
    var(--oak);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.3), inset 0 1px 0 rgba(255, 220, 160, 0.05), 0 0 0 1px #050302, var(--shadow-night);
}
.hint { margin: 0 0 14px; font-size: 18px; color: var(--ink-2); max-width: 62ch; }

/* Verdict note: distributor vs supermarket */
.notice { max-width: 820px; width: 100%; margin: 0 auto; padding: 20px 26px; }
.notice:empty { display: none; }
.notice h2 { margin: 0 0 6px; font: 400 30px/1.1 var(--f-display); color: var(--gold-hi); }
.notice p { margin: 2px 0; font-size: 18px; max-width: 62ch; }
.notice .big { font-weight: 700; color: var(--gold-link); }
.notice.glass h2, .notice.glass .big { color: var(--link); }

/* Controls: one frosted panel. Small caps labels above translucent inputs with a hairline. */
.counter-note {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: end;
  padding: 18px 22px 12px;
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font: 700 17px/1.2 var(--f-text); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  font: 400 17px/1.2 var(--f-text);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 4px;
}
.field select option { color: var(--ink); background: var(--oak); }
.paper .field select option { background: #efe2c2; }
.field input::placeholder { color: var(--placeholder); opacity: 1; }
.glass .field > span { letter-spacing: 0.08em; }
.glass .field input, .glass .field select {
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--glass-r-ctl);
  transition: border-color 0.2s ease;
}
.glass .field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  text-overflow: ellipsis;
  cursor: pointer;
  background: var(--glass-chevron) right 12px center / 16px 16px no-repeat, var(--field);
}
.glass .field select option { color: var(--ink); background: var(--glass-menu); }
.glass .field input:hover, .glass .field select:hover { border-color: var(--glass-line-hi); }
.glass .field input:focus-visible, .glass .field select:focus-visible { border-color: var(--focus); }
/* the search: a magnifier at the end of the input */
.q-box { position: relative; display: block; }
.q-box input { padding-right: 46px; }
.q-box input[type="search"]::-webkit-search-cancel-button { margin-right: 4px; cursor: pointer; }
.q-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}

/* the shelf picker: one chip per category; the hidden select #cat holds the value */
.field-cat { grid-column: 1 / -1; }
/* Phones fold Zona, Mostrar, Ordenar, Mi ubicación and Más filtros under "Filtros" (filters.js); wide screens always show them */
.filter-set { display: contents; }
.filters-toggle { display: none; }
@media (max-width: 760px) {
  .filters-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--link);
    font: 700 17px/1.2 var(--f-text);
    cursor: pointer;
  }
  .filters-toggle::after { content: ""; width: 16px; height: 16px; background: var(--glass-chevron) center / contain no-repeat; transition: transform 0.2s ease; }
  .filters-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .filters-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--glass-r-ctl); }
  .counter-note:not(.filters-open) .filter-set { display: none; }
}
@media (prefers-reduced-motion: reduce) { .filters-toggle::after { transition: none; } }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px; padding: 6px; }   /* the padding keeps the focus ring inside any scrolling box */
.cat-chip {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font: 400 17px/1 var(--f-text);
  color: var(--ink);
  background: var(--glass-chip);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-r-ctl);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cat-chip:hover { background: var(--glass-chip-hover); border-color: var(--glass-line-hi); }
.cat-chip[aria-pressed="true"] { font-weight: 700; background: var(--glass-chip-on); border-color: var(--glass-amber-line); box-shadow: inset 0 0 0 1px rgba(255, 180, 84, 0.25); }
.cat-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the summary line: quiet caps */
.tally {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--glass-line);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.link-chalk {
  margin-left: 10px;
  padding: 0;
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.glass .link-chalk { min-height: 44px; margin-left: 0; padding: 0 2px; letter-spacing: inherit; text-transform: inherit; }
.link-chalk:disabled { opacity: 0.6; cursor: progress; }

/* buttons on glass: a hairline pill, no plate, no rivets */
.glass .btn {
  min-height: 48px;
  padding: 0 22px;
  color: var(--ink);
  text-shadow: none;
  background: var(--glass-chip);
  border: 1px solid var(--glass-line-hi);
  border-radius: var(--glass-r-ctl);
  box-shadow: none;
}
.glass .btn:hover { color: var(--glass-cream); background: var(--glass-chip-on); border-color: var(--glass-amber-line); box-shadow: none; }

/* ---------- Bottle racks: ONE frosted panel, a glass shelf under each row ---------- */
.shelves {
  --cab-pad: clamp(14px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 36px);
  padding: 26px var(--cab-pad) 22px;
}
.shelves:empty { display: none; }
/* the tallest panel: no blur (the sea is redrawn every frame, so a blur over this area costs frame time); a flatter tint instead */
.shelves.glass {
  background: var(--glass-sheen), var(--glass-tint-flat);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cabinet { position: relative; }
/* the title of a row: a small frosted pill, centred */
.cabinet-title {
  display: table;
  margin: 0 auto 18px;
  padding: 6px 28px 8px;
  font: 400 27px/1.1 var(--f-sc);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glass-cream);
  background: var(--glass-chip);
  border: 1px solid var(--glass-line-hi);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.12);
}
/* aged metal plate screwed across the top edge (Puertos) */
.zone-title {
  display: table;
  margin: -24px auto 20px;
  padding: 6px 32px 8px;
  font: 400 30px/1.1 var(--f-sc);
  letter-spacing: 0.06em;
  color: var(--plate-ink);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  background:
    var(--rivet) 9px 50% / 8px 8px no-repeat,
    var(--rivet) calc(100% - 9px) 50% / 8px 8px no-repeat,
    var(--plate);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px var(--plate-rim), 0 0 0 2px var(--plate-edge), 0 5px 12px rgba(0, 0, 0, 0.6);
}

.cabinet-count { font: 700 0.7em/1 var(--f-text); letter-spacing: 0.04em; white-space: pre; }

/* One row that scrolls sideways: arrows, mouse drag, touch swipe and trackpad all move it. */
.carousel {
  --bottle-h: 188px;   /* >= 122 x 1.4 + 10: the tallest sprite never gets clamped */
  --arrow: 46px;
  --fade: 40px;        /* edge fade; also the room the arrows take when a bottle is scrolled into view */
  position: relative;
  display: flow-root;
}
.shelf {
  display: flex;
  /* room for the hover lift, the glow and the shadows, which the scroller would otherwise clip */
  padding: 18px 0 20px;
  margin: -18px 0 -20px;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--fade);
  scrollbar-width: none;
  -webkit-user-select: none;
  user-select: none;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.shelf::-webkit-scrollbar { display: none; }
.carousel.can-prev .shelf { --fade-l: var(--fade); }
.carousel.can-next .shelf { --fade-r: var(--fade); }
.shelf.dragging { scroll-snap-type: none; cursor: grabbing; }
.shelf.dragging * { cursor: grabbing; }
.shelf.dragging .slot { pointer-events: none; }
.shelf img { -webkit-user-drag: none; }

/* round glass arrows over the shelf edges, level with the middle of the bottles */
.car-btn {
  position: absolute;
  z-index: 4;
  top: calc(var(--bottle-h) / 2);
  display: grid;
  place-items: center;
  width: var(--arrow);
  height: var(--arrow);
  padding: 0;
  transform: translateY(-50%);
  color: var(--glass-cream);
  background: rgba(16, 14, 22, 0.74);
  border: 1px solid var(--glass-line-hi);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.car-btn[hidden] { display: none; }
.car-btn:hover { background: rgba(16, 14, 22, 0.9); border-color: var(--glass-amber-line); }
.car-btn:active { transform: translateY(-50%) scale(0.95); }
.car-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.car-prev { left: calc(var(--cab-pad) * -1 + 6px); }
.car-next { right: calc(var(--cab-pad) * -1 + 6px); }

/* one category picked: the cabinet wraps as a grid and shows every bottle */
.cabinet.solo .shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: 0;
  row-gap: 26px;
  padding: 0;
  margin: 0;
  overflow: visible;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-user-select: auto;
  user-select: auto;
}
.slot {
  --slot-w: 150px;
  position: relative;
  flex: 0 0 var(--slot-w);
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: var(--bottle-h) 10px auto;
  justify-items: center;
  padding: 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
/* the filler after the last bottle: carries the plank to the right edge of a short row */
.slot.empty { flex: 1 0 0; min-width: 0; padding: 0; scroll-snap-align: none; }
.slot.empty { cursor: default; }
/* a faint pool of light behind the bottle; it only shows when you point at it (extras.css) */
.slot::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 14px;
  height: calc(var(--bottle-h) - 14px);
  background: radial-gradient(ellipse 55% 75% at 50% 100%, rgba(255, 196, 120, 0.3), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
/* the glass plank: a thin translucent bar with a bright top edge; the pieces of a row meet without a seam */
.slot::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--bottle-h);
  height: 10px;
  background: linear-gradient(180deg, rgba(255, 246, 226, 0.3), rgba(255, 246, 226, 0.08));
  border-top: 1px solid rgba(255, 250, 236, 0.8);
  box-shadow: inset 0 -1px 0 rgba(255, 244, 220, 0.16), 0 7px 9px -6px rgba(0, 0, 0, 0.5);
}
.bottle-wrap {
  position: relative;
  z-index: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  transition: transform 0.25s ease;
}
.bottle-wrap img, .bottle-wrap svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.7));
}
.bottle-wrap img { opacity: 0; transition: opacity 0.35s; }
.bottle-wrap img.ready { opacity: 1; }
.slot:hover .bottle-wrap, .slot:focus-visible .bottle-wrap { transform: translateY(-6px); }

/* the price tag: a small frosted card under the plank, straight, no string */
.tag {
  position: relative;
  z-index: 2;
  grid-row: 3;
  width: min(136px, 100%);
  margin-top: 12px;
  padding: 7px 8px 8px;
  color: var(--ink);
  background: var(--glass-chip);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-r-tag);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.1);
  line-height: 1.2;
}
.tag-name { display: block; font-size: 17px; font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
.tag-price { display: block; margin-top: 3px; font: 700 22px/1.1 var(--f-text); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.slot.in-bag .tag { border-color: var(--glass-amber); box-shadow: 0 0 0 1px rgba(255, 180, 84, 0.45); }

.empty-shelf { margin: 0; padding: 32px 24px; text-align: center; font-size: 18px; color: var(--ink); }

/* Loose bottles */
.crate { padding: 8px 22px; }
.crate summary, .more-filters > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.crate summary::-webkit-details-marker, .more-filters > summary::-webkit-details-marker { display: none; }
.crate summary { font-size: 18px; font-weight: 700; color: var(--link); }
.crate summary::after, .more-filters > summary::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 2px;
  background: var(--glass-chevron) center / 16px 16px no-repeat;
  transition: transform 0.2s ease;
}
.crate[open] > summary::after, .more-filters[open] > summary::after { transform: rotate(180deg); }
.crate summary small { font-size: 17px; font-weight: 400; color: var(--ink-2); }
.loose-list { columns: 3 280px; column-gap: 26px; margin-top: 6px; padding-bottom: 8px; font-size: 17px; color: var(--ink-2); }
.loose-list div { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--glass-line); }
.loose-list b { color: var(--ink); font-weight: 400; }

/* ---------- Ficha (the burnt map lives in extras.css) ---------- */
.ficha {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: auto;
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9);
}
.ficha::backdrop { background: var(--night-veil); backdrop-filter: blur(2px); }
.ficha-close { position: sticky; top: 0; z-index: 6; display: flex; justify-content: flex-end; height: 0; }
.ficha-close button {
  margin: 12px 12px 0 0;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 19px;
  color: var(--plate-ink);
  background: radial-gradient(circle at 40% 35%, #4a3c29, #1d160e 75%);
  box-shadow: 0 0 0 2px var(--plate-rim), 0 0 0 3px var(--plate-edge), 0 4px 10px rgba(0, 0, 0, 0.6);
}
.ficha-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; padding: 44px 48px 34px; }
.ficha-bottle {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 340px;
  border-radius: 4px;
  padding: 16px 12px 12px;
}
.ficha-bottle img, .ficha-bottle svg { max-height: 100%; max-width: 100%; object-fit: contain; }
.ficha h2 { margin: 2px 0 6px; font: 400 40px/1.05 var(--f-display); color: var(--ink); text-wrap: balance; }
.ficha .kicker { margin: 0; font: 700 17px/1.3 var(--f-text); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.ficha .summary { margin: 4px 0 14px; font-size: 18px; max-width: 60ch; }
.ficha .store-sub { display: block; font-size: 17px; font-weight: 400; color: var(--muted); }
/* gilt-leaf mark: dark ink on dull gold, 7.5:1 */
.mark { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 3px; font: 700 16px/1.3 var(--f-text); color: var(--sepia); background: #c8a058; box-shadow: 0 0 0 1px rgba(40, 20, 4, 0.6); vertical-align: 2px; }
.mark.best { background: #c8a058; }
.trend { font-size: 16px; vertical-align: 2px; }
.trend.up { color: #6e1309; }
.trend.down { color: #22380a; }
.verdict { margin: 14px 0 0; padding: 10px 14px; border-radius: 3px; font-size: 17px; background: rgba(42, 28, 17, 0.05); max-width: 62ch; }
.verdict.super { background: rgba(29, 61, 82, 0.1); }
.ficha-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px -8px 0;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(204, 174, 122, 0.98) 0 62%, rgba(204, 174, 122, 0));
  box-shadow: inset 0 -10px 14px -8px rgba(52, 22, 3, 0.45);
}

/* Buttons: small plates of aged metal; "on" is a red wax seal */
.btn {
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font: 700 17px/1.1 var(--f-text);
  letter-spacing: 0.02em;
  color: var(--plate-ink);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  background:
    var(--rivet) 7px 50% / 7px 7px no-repeat,
    var(--rivet) calc(100% - 7px) 50% / 7px 7px no-repeat,
    var(--plate);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px var(--plate-rim), 0 0 0 2px var(--plate-edge), 0 4px 10px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.btn:hover {
  color: #fff3d6;
  background:
    var(--rivet) 7px 50% / 7px 7px no-repeat,
    var(--rivet) calc(100% - 7px) 50% / 7px 7px no-repeat,
    var(--plate-lit);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px var(--plate-rim), 0 0 0 2px rgba(214, 178, 110, 0.75), 0 0 14px rgba(255, 200, 120, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45);
}
.btn.on {
  color: var(--cream);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  border-radius: 22px 18px 20px 24px / 20px 24px 18px 22px;
  background: radial-gradient(ellipse 80% 120% at 35% 25%, #8e2414 0, var(--wax) 50%, var(--wax-dark) 100%);
  box-shadow: inset 0 0 0 3px rgba(40, 4, 2, 0.35), inset 0 2px 3px rgba(255, 170, 140, 0.18), 0 0 0 1.5px #2a0703, 0 4px 10px rgba(0, 0, 0, 0.45);
}
.link-btn { min-height: 32px; font: inherit; background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Zone stamps: inked like a harbour stamp, not a coloured pill (the colours stay on the chart) */
.zone {
  display: inline-block;
  padding: 0 7px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font: 700 16px/1.35 var(--f-text);
  letter-spacing: 0.04em;
  color: var(--wax-ink);
  background: rgba(255, 240, 210, 0.22);
  vertical-align: 1px;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}
.rate { font-size: 17px; font-weight: 700; white-space: nowrap; color: inherit; }

/* ---------- Cofre: an iron-strapped chest ---------- */
.satchel {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 34px clamp(16px, 3vw, 34px) 30px;
  border-radius: 14px 14px 6px 6px;
  color: var(--bone);
  background:
    linear-gradient(90deg, transparent 9%, var(--iron) 9% calc(9% + 16px), transparent 0),
    linear-gradient(270deg, transparent 9%, var(--iron) 9% calc(9% + 16px), transparent 0),
    linear-gradient(rgba(8, 5, 3, 0.8), rgba(8, 5, 3, 0.8)),
    var(--tex-chest) center / 560px auto,
    #2a1b10;
  box-shadow: inset 0 0 0 3px #0b0704, inset 0 0 0 8px #3a3632, inset 0 0 0 10px #0b0704, var(--shadow-night);
}
.satchel h2, .map-sheet h2, .book-head h2 { margin: 0 0 6px; font: 400 44px/1.05 var(--f-display); }
.satchel h2 { color: var(--gold-hi); }
.satchel .hint { color: var(--bone); margin: 0 0 20px; }
.receipt { margin-bottom: 18px; padding: 18px 20px; }
.receipt h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 700 22px/1.2 var(--f-text); color: var(--ink); }
.receipt .where { margin: 2px 0 8px; font-size: 17px; color: var(--muted); }
.receipt table { width: 100%; border-collapse: collapse; font-size: 17px; }
.receipt td { padding: 7px 4px; border-bottom: 1px solid rgba(42, 28, 17, 0.2); vertical-align: top; }
.receipt td.num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.receipt td.num:nth-child(2) { font-weight: 700; font-size: 19px; }
.receipt small { font-size: 17px; color: var(--muted); }
.receipt .sub { margin: 10px 0 0; text-align: right; font: 700 22px/1.2 var(--f-text); font-variant-numeric: lining-nums tabular-nums; }
.tally-box { padding: 18px 22px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.35); color: var(--bone); }
.tally-box p { margin: 4px 0; font-size: 18px; max-width: 62ch; }
.tally-box .big { font: 700 52px/1 var(--f-text); color: var(--gold-hi); font-variant-numeric: lining-nums tabular-nums; }
.empty-note { padding: 26px; text-align: center; font-size: 18px; color: var(--bone); }

/* ---------- Tragos ---------- */
.book { display: flex; flex-direction: column; gap: 40px; max-width: 1100px; width: 100%; margin: 0 auto; }
.book-head { width: min(760px, 100%); margin: 0 auto; padding: 24px 26px 18px; text-align: center; }
.book-head h2 { color: var(--ink); }
.book-head .hint { margin: 0 auto 16px; max-width: 56ch; }
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.page { position: relative; padding: 26px 24px 20px; }
.page h3 { margin: 0; padding-right: 76px; font: 400 30px/1.05 var(--f-display); color: var(--ink); }
.page .who { margin: 4px 0 14px; font-size: 17px; font-style: italic; color: var(--ink-2); }
.page ul { list-style: none; margin: 0 0 10px; padding: 0; }
.page li { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; font-size: 17px; }
.page li .dots { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(42, 28, 17, 0.55); transform: translateY(-4px); }
.page li .amt { white-space: nowrap; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.page li .src { display: block; font-size: 17px; font-style: italic; color: var(--muted); }
.page li.home { font-style: italic; color: var(--ink-2); }
.page .how { margin: 8px 0 12px; font-size: 17px; }
.page .cost { margin: 0; padding-top: 10px; border-top: 1px solid rgba(42, 28, 17, 0.35); font: 700 17px/1.2 var(--f-text); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.page .cost b { font: 700 28px/1 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.ribbon {
  position: absolute;
  top: -6px;
  right: 18px;
  width: 78px;
  padding: 14px 6px 14px;
  font: 700 16px/1.15 var(--f-text);
  text-align: center;
  color: var(--cream);
  background: var(--wax);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}

/* ---------- Puertos ---------- */
.map-sheet { position: relative; padding: 26px 26px 20px; }
.map-sheet h2 { color: var(--ink); }
.map-sheet .hint { margin: 0 0 12px; }
/* The chart, its legend and the flags are styled in extras.css (.chart section). */

.zones { display: flex; flex-direction: column; gap: var(--gap-sea); margin-top: calc(var(--gap-sea) - 56px); }
.zone-title { margin: 0 auto 22px; padding: 6px 30px 8px; letter-spacing: 0.05em; }
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
/* a small dark board per shop */
.board {
  padding: 16px 20px 14px;
  border-radius: 5px;
  color: var(--ink);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 200, 120, 0.06), transparent 70%),
    linear-gradient(rgba(10, 7, 4, 0.82), rgba(10, 7, 4, 0.88)),
    var(--tex-oak) center / 520px auto,
    var(--oak);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.28), 0 0 0 1px #050302, var(--shadow-night);
}
.board h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 20px/1.2 var(--f-text); color: var(--ink); }
.board p { margin: 3px 0; font-size: 17px; color: var(--ink-2); }
.board .rating a { font-weight: 700; }
.board .quote { font-size: 17px; color: var(--ink-2); }
.board .no-rating { color: var(--ink-2); font-style: italic; }
.board a { color: var(--link); }

/* Footer: a dark plank (above the phone menu bar) */
.floor {
  width: var(--page);
  margin: 0 auto calc(var(--rail-clear) + 24px);
  padding: 20px 26px;
  border-radius: 6px;
  text-align: center;
  font-size: 17px;
  color: var(--bone-2);
  background:
    linear-gradient(var(--oak-veil), var(--oak-veil)),
    var(--tex-oak) center / 520px auto,
    var(--oak);
  box-shadow: 0 0 0 1px #050302, inset 0 0 0 1px rgba(201, 164, 92, 0.22), var(--shadow-night);
}
.floor p { margin: 4px auto; max-width: 70ch; }
.floor a { color: var(--gold-link); }
.error-box { padding: 12px 16px; border-radius: 4px; color: var(--cream); background: var(--wax); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  :root { --page: calc(100% - 32px); --gap-sea: clamp(56px, 10vh, 96px); }
  body { font-size: 17px; }
  .field > span { font-size: 16px; }
  .hero { padding-top: clamp(26px, 4svh, 40px); gap: 12px; }
  .nameboard { font-size: clamp(38px, 11vw, 48px); }
  .hero-search { padding: 14px 14px 16px; }
  .lede { font-size: 17px; }
  .search-row { flex-direction: column; align-items: stretch; }
  .counter-note { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 14px 10px; }
  /* one swipeable row of chips instead of several wrapped ones */
  .cat-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chip { scroll-snap-align: start; font-size: 16px; padding: 0 16px; }
  .tally { font-size: 16px; }
  .shelves { --cab-pad: 12px; padding: 22px var(--cab-pad) 16px; gap: 28px; }
  .cabinet-title { font-size: 24px; padding: 5px 20px 7px; }
  .zone-title { font-size: 28px; padding: 6px 24px 8px; }
  .crate { padding: 6px 14px; }
  .carousel { --bottle-h: 160px; --arrow: 44px; --fade: 44px; }
  .slot { --slot-w: 118px; }
  .cabinet.solo .shelf { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .tag-price { font-size: 21px; }
  .ficha-grid { grid-template-columns: 1fr; padding: 34px 26px 26px; }
  .ficha-bottle { height: 230px; }
  .ficha h2 { font-size: 32px; }
  .satchel { padding: 26px 14px 22px; }
  .satchel h2, .map-sheet h2, .book-head h2 { font-size: 36px; }
  .tally-box .big { font-size: 44px; }
  .pages, .boards { grid-template-columns: 1fr; }
  .page h3 { font-size: 28px; }
  .notice h2 { font-size: 28px; }
  .floor { padding: 16px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bottle-wrap, .bottle-wrap img, .signs button, .signs button::after, .btn, .cat-chip, .car-btn, .glass .field input, .glass .field select, .crate summary::after, .more-filters > summary::after { transition: none; }
  .bag-count.bump { animation: none; }
}