/* Floyd — the 2026 look, built on the site it replaces. Kept from before: the
   gold mark large on moving pictures, the oval with the gold rim (the lit shelves
   behind the bar) around the map, the sommelier and tonight's code, the code
   moving to the top once it is online, the menu with dotted leaders.
   New: a light page the colour of lime plaster, a deep bordeaux for frame and
   night, brass for detail, photographs standing on the lit shelf, and the evening
   flowing from day into night.

   Ibarra Real Nova for what you read first, Jost for the rest. The neon is the
   sign in the bar itself, traced from the promotional film. */

:root {
  --stone: #E6DED2;
  --stone-light: #EFE9E0;
  --stone-deep: #DCD3C5;
  --ink: #2B211C;
  --ink-soft: #665A50;
  /* Bordeaux: red wine, browner than a wine red so it does not turn pink. */
  --deep: #5E1D1A;
  --deep-night: #2D0E0D;
  --dusk: #A98068;           /* halfway from the page to the night, like a sunset */
  --shade: 45, 14, 13;       /* the deep colour, for see-through layers */
  --shade-deep: 22, 7, 6;
  --brass: #9A7432;
  --brass-light: #D2AC66;
  --gold: #F6C66E;
  --on-deep: #F3E9DE;
  --on-deep-soft: rgba(243, 233, 222, 0.78);
  --neon: #FFB13B;
  --neon-core: #FFD978;
  --line: rgba(43, 33, 28, 0.14);
  --line-strong: rgba(43, 33, 28, 0.3);
  --serif: 'Ibarra Real Nova', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --gutter: clamp(22px, 5vw, 80px);
  --max: 1240px;
  --nav-h: 66px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* The rim of the lit shelf: a fine gold line with light spilling over it. */
  --gold-rim: 0 0 0 1.5px var(--gold), 0 0 0 5px rgba(246, 198, 110, 0.14), 0 0 46px rgba(255, 190, 110, 0.28);
}

/* The other deep colours that were considered, kept to switch to with
   <html data-kleur="…">: cognac (amber in dark wood), mahonie (the wood of the bar),
   koper (the vaulted walls, the liveliest). */
[data-kleur="cognac"]  { --deep: #6B321E; --deep-night: #33170D; --dusk: #B98E62; --shade: 51, 23, 13; --shade-deep: 25, 11, 6; }
[data-kleur="mahonie"] { --deep: #5A2219; --deep-night: #2E110C; --dusk: #B08A6A; --shade: 46, 17, 12; --shade-deep: 23, 8, 6; }
[data-kleur="koper"]   { --deep: #7E3B20; --deep-night: #3A190D; --dusk: #C0915F; --shade: 58, 25, 13; --shade-deep: 29, 12, 6; }

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  background: var(--stone); color: var(--ink);
  font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

h1, h2, h3, .h1, .h2, .serif { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.h1 { font-size: clamp(38px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.012em; }
.h2 { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.1; letter-spacing: -0.01em; }
.h2 em { font-style: italic; }
.time { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 8.6vw, 128px); line-height: 0.9; letter-spacing: -0.02em; color: var(--brass); font-variant-numeric: lining-nums; }
.lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-soft); }
.text p { max-width: 34em; }
.text p + p { margin-top: 1em; }
.link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--brass); text-underline-offset: 5px; transition: text-decoration-color 0.3s var(--ease); }
.link:hover { text-decoration-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border: 1px solid transparent; border-radius: 3px;
  font: 500 15px/1.1 var(--sans); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-main { background: var(--deep); color: var(--on-deep); }
.btn-main:hover { background: var(--ink); }
.btn-line { border-color: var(--ink); color: var(--ink); background: none; }
.btn-line:hover { background: var(--ink); color: var(--stone-light); }
.btn-quiet { padding-inline: 10px; background: none; color: var(--ink); }
.btn-quiet svg { transition: transform 0.35s var(--ease); }
.btn-quiet:hover svg { transform: scale(1.15); }
.btn-quiet span { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--brass); text-underline-offset: 5px; }

/* ── Navigation: see-through on the film, bordeaux once you scroll ───── */
#nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
  height: var(--nav-h); padding-inline: var(--gutter); color: var(--on-deep);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
#nav.scrolled { background: var(--deep); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
.nav-logo { display: block; flex: none; margin-right: auto; opacity: 0; transition: opacity 0.5s var(--ease); }
/* The small mark appears once the large one in the hero has scrolled away. */
#nav.scrolled .nav-logo { opacity: 1; }
.nav-logo img { width: 104px; height: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); list-style: none; }
.nav-links a { display: inline-block; padding-block: 10px; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) left calc(100% - 4px) / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.nav-links a:hover { background-size: 100% 1px; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-toggle { display: flex; align-items: center; }
.lang-btn { display: inline-grid; place-items: center; min-width: 32px; min-height: 44px; font-size: 13px; letter-spacing: 0.06em; color: var(--on-deep-soft); text-decoration: none; }
.lang-btn.active { color: var(--gold); }
.lang-sep { display: none; }
.hamburger { display: none; }
@media (max-width: 960px) {
  :root { --nav-h: 60px; }
  .nav-logo img { width: 92px; }
  .hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 44px; height: 44px; margin-right: -10px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  }
  .hamburger span { display: block; height: 1px; background: var(--on-deep); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
  .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px; background: var(--deep);
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .nav-links.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.45s var(--ease); }
  .nav-links a { display: block; padding: 14px 0; font-family: var(--serif); font-size: 26px; border-bottom: 1px solid rgba(243, 233, 222, 0.14); background: none; }
  .nav-actions .lang-toggle { display: none; }
}

/* ── Hero: the room on film, the gold mark in the middle ─────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: 100svh; padding: var(--nav-h) 24px 96px;
  background: var(--deep-night); color: var(--on-deep); text-align: center;
}
.hero-film { position: absolute; inset: 0; z-index: -2; }
.hero-film img, .hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film video, .hero-film .film-loop { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-film video.is-playing, .hero-film .film-loop.is-playing { opacity: 1; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade), 0.55) 0%, rgba(var(--shade), 0.2) 35%, rgba(var(--shade), 0.25) 65%, rgba(var(--shade), 0.75) 100%);
}
.hero-mark { position: relative; isolation: isolate; }
/* A pool of shadow behind the mark, so it reads on any frame of the film. */
.hero-mark::before {
  content: ""; position: absolute; z-index: -1; inset: -80px -130px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--shade-deep), 0.7) 0%, rgba(var(--shade-deep), 0.45) 42%, rgba(var(--shade-deep), 0) 74%);
}
.hero-logo { width: min(440px, calc(100vw - 64px)); height: auto; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: 0.2em; color: var(--gold); text-decoration: none; opacity: 0.8;
}
.scroll-hint::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); }
.film-pause {
  position: absolute; right: var(--gutter); bottom: 30px; z-index: 2;
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(var(--shade), 0.45); color: var(--on-deep); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.film-pause .i-play, .film-pause[aria-pressed="true"] .i-pause { display: none; }
.film-pause[aria-pressed="true"] .i-play { display: inline; }

/* The welcome under the film. */
.welcome { padding: clamp(72px, 9vw, 128px) 0 0; text-align: center; }
.welcome .h1 { max-width: 15em; margin-inline: auto; }
.welcome .lead { max-width: 30em; margin: 22px auto 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 34px; }
.now { margin-top: 18px; font-size: 14px; letter-spacing: 0.02em; color: var(--ink-soft); }
.now:empty { display: none; }
.now strong { font-weight: 500; color: var(--ink); }

/* ── The evening ─────────────────────────────────────────────────────── */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.chapter-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.chapter-head .h2 { max-width: 15em; padding-bottom: 0.2em; }

.open-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours caption { padding-bottom: 12px; text-align: left; font-family: var(--serif); font-size: 26px; }
.hours th, .hours td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 500; color: var(--ink); }
.hours tr.is-today th::after { content: "vandaag"; margin-left: 12px; font-size: 14px; font-weight: 400; font-style: italic; font-family: var(--serif); color: var(--brass); }
:lang(en) .hours tr.is-today th::after { content: "today"; }
:lang(fr) .hours tr.is-today th::after { content: "aujourd’hui"; }
.hours-note { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }

/* Photographs on the shelf: they stand on a brass line as the bottles do in the lit
   racks behind the bar, each in its own shape, and the strip runs off the page to the
   right, to swipe, drag or step through (assets/floyd.js). */
.section-lead-in { padding-bottom: clamp(24px, 4vw, 56px); }
.shelf {
  --h: clamp(300px, 30vw, 450px);
  --gap: clamp(20px, 2.4vw, 36px);
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); background: var(--stone);
}
.shelf-strip {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: auto auto; justify-content: start; column-gap: var(--gap);
  padding: 12px var(--edge) 8px; scroll-padding-inline: var(--edge); overflow-x: auto; overscroll-behavior-x: contain;
  list-style: none; scrollbar-width: none; cursor: grab;
}
.shelf-strip::-webkit-scrollbar { display: none; }
.shelf-strip.is-dragging { cursor: grabbing; }
.shelf-strip.is-dragging .shelf-photo { pointer-events: none; }
.shelf-strip > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; scroll-snap-align: start; }
.shelf-strip > li > * { grid-column: 1; }
.shelf-photo { grid-row: 1; align-self: end; display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--stone-deep); cursor: zoom-in; }
.shelf-photo img { width: auto; max-width: none; height: var(--h); user-select: none; -webkit-user-select: none; transition: transform 1s var(--ease); }
/* Landscape photographs stand lower, as the shorter bottles do; the first is the
   tallest on the shelf. */
.shelf-wide .shelf-photo img { height: calc(var(--h) * 0.76); }
.shelf-strip > li:first-child .shelf-photo img { height: var(--h); }
.shelf-photo:hover img { transform: scale(1.035); }
/* The shelf: a brass line under every photo, running on through the gap to the
   next. A dot marks an hour (.shelf-moment); most photos stand there without words. */
.shelf-strip > li::before, .shelf-moment::after {
  content: ""; grid-row: 2; grid-column: 1; align-self: start; margin-top: 14px;
  background: var(--brass); transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.shelf-strip > li::before { height: 1.5px; margin-right: calc(-1 * var(--gap)); }
.shelf-strip > li:last-child::before { margin-right: 0; }
.shelf-moment::after { justify-self: start; width: 8px; height: 8px; margin-top: 10.75px; border-radius: 50%; }
.shelf-caption {
  grid-row: 2; width: 0; min-width: 100%;
  padding: 34px 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  transition: color 0.5s var(--ease);
}
.shelf-caption time { display: block; margin-bottom: 2px; font-family: var(--serif); font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; font-variant-numeric: lining-nums; color: var(--brass); transition: color 0.5s var(--ease); }
/* The end of the strip: 22:00, standing on the shelf where a photo would. */
.shelf-end { width: clamp(220px, 22vw, 300px); }
.shelf-end .time { grid-row: 1; align-self: end; color: var(--brass); transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease); }
.shelf-end .shelf-caption { padding-top: 36px; }
.shelf-end .link { display: inline-block; margin-top: 6px; color: var(--ink); }
.shelf-steps { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.shelf-step {
  display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid var(--ink); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.5s var(--ease), opacity 0.3s var(--ease);
}
.shelf-step:hover:not(:disabled) { background: var(--ink); color: var(--stone-light); }
.shelf-step:disabled { opacity: 0.3; cursor: default; }
/* On the homepage the shelf is one evening, 18:00 to 22:00, and the band darkens as
   you slide along it: assets/floyd.js sets the colour, from the page through dusk into
   the night, and says how dark it is with .is-dusk and .is-dark. Only the start and
   the end have an hour.
   Dusk: brass would sink into the band, so time and words go dark. */
.evening.is-dusk .shelf-caption, .evening.is-dusk .shelf-caption time, .evening.is-dusk .shelf-end .time { color: var(--ink); }
.evening.is-dusk .shelf-strip > li::before, .evening.is-dusk .shelf-moment::after { background: var(--ink); }
/* Night has fallen: the shelf glows gold, as it does in the bar. */
.evening.is-dark .shelf-caption { color: var(--on-deep-soft); }
.evening.is-dark .shelf-caption time, .evening.is-dark .shelf-end .time { color: var(--gold); }
.evening.is-dark .shelf-end .time { text-shadow: 0 0 28px rgba(255, 177, 59, 0.45); }
.evening.is-dark .shelf-strip > li::before, .evening.is-dark .shelf-moment::after { background: var(--gold); box-shadow: 0 0 12px 1px rgba(255, 190, 110, 0.55); }
.evening.is-dark .shelf-end .link { color: var(--on-deep); text-decoration-color: var(--gold); }
.evening.is-dark .shelf-step { border-color: var(--on-deep); color: var(--on-deep); }
.evening.is-dark .shelf-step:hover:not(:disabled) { background: var(--on-deep); color: var(--deep-night); }
.evening.is-dark .shelf-photo { background: rgba(0, 0, 0, 0.25); }
/* With a finger the strip snaps to each photo, and the buttons are not needed. */
@media (hover: none) {
  .shelf-strip { scroll-snap-type: x mandatory; cursor: auto; }
  .shelf-steps { display: none; }
}


/* The menu, as a printed card: dotted leaders to the prices. */
.menu { background: var(--stone-light); }
.menu-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 44px; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.menu-tab {
  position: relative; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 17px/1 var(--sans); letter-spacing: 0.02em; color: var(--ink-soft); transition: color 0.3s var(--ease);
}
.menu-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.menu-tab.active { color: var(--ink); }
.menu-tab.active::after, .menu-tab:hover::after { transform: scaleX(1); }
.menu-panel { display: none; }
.menu-panel.active { display: block; columns: 2 360px; column-gap: clamp(48px, 7vw, 120px); animation: settle 0.6s var(--ease); }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }
.menu-category { break-inside: avoid-column; margin-bottom: 44px; }
.menu-cat-title { margin-bottom: 6px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--brass); }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.menu-item-left { flex: 0 1 auto; min-width: 0; }
.menu-item-name { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.menu-item-desc { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.menu-dots { flex: 1 1 24px; min-width: 24px; align-self: flex-start; height: 1em; margin-top: 0.5em; border-bottom: 1px dotted rgba(154, 116, 50, 0.6); }
.menu-price { flex: none; align-self: flex-start; padding-top: 2px; font-family: var(--serif); font-size: 21px; font-variant-numeric: lining-nums tabular-nums; color: var(--brass); }
.menu-loading { color: var(--ink-soft); font-style: italic; }
/* The dish of every Saturday, above the tapas: the menu row in a bordeaux frame, in
   the words of its poster. Only while the Tapas tab is open. */
.menu-special { max-width: 620px; margin-bottom: 40px; padding: 20px clamp(22px, 3vw, 32px) 6px; border-radius: 14px; background: var(--deep); color: var(--on-deep); }
.menu-special:has(+ .menu-panel:not(.active)) { display: none; }
.menu-special-when { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold); }
.menu-special .menu-item { padding-top: 2px; border-bottom: 0; }
.menu-special .menu-item-name, .menu-special .menu-price { font-size: clamp(28px, 2.6vw, 34px); }
.menu-special .menu-item-desc { color: var(--on-deep-soft); }
.menu-special .menu-dots { border-bottom-color: rgba(246, 198, 110, 0.55); }
.menu-special .menu-price { color: var(--gold); }
/* Wines: a glass and a bottle price, one above the other. */
.menu-price-wine { display: grid; justify-items: end; gap: 0; line-height: 1.3; }
.menu-price-wine small { margin-right: 4px; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.menu-item-note { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }

/* The wine list's filters (assets/floyd.js): the kinds as a row of ovals, like the
   lit shelves, then a word, a country, a top price and by the glass. The list under
   them keeps the two columns of the menu. */
.menu-panel.active[data-wines] { columns: auto; }
.wine-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.wine-kind, .wine-glass {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: none; cursor: pointer;
  font: 400 16px/1 var(--sans); color: var(--ink); white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.wine-kind span { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wine-kind:hover:not(:disabled), .wine-glass:hover { border-color: var(--ink); }
.wine-kind[aria-pressed="true"] { border-color: var(--deep); background: var(--deep); color: var(--on-deep); }
.wine-kind[aria-pressed="true"] span { color: var(--on-deep-soft); }
.wine-kind:disabled { opacity: 0.4; cursor: default; }
.wine-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wine-input {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: rgba(255, 255, 255, 0.5); color: var(--ink); font: 400 16px/1.2 var(--sans);
}
.wine-input:focus-within { border-color: var(--ink); outline: none; }
.wine-search { position: relative; flex: 1 1 260px; }
.wine-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.wine-search input { width: 100%; padding-left: 40px; }
.wine-search input::placeholder { color: var(--ink-soft); opacity: 0.85; }
.wine-country { flex: 0 1 200px; cursor: pointer; }
.wine-max { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); cursor: text; }
.wine-max input { width: 4.2em; min-height: 42px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.wine-max input::-webkit-inner-spin-button, .wine-max input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wine-dot { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; transition: background 0.3s var(--ease); }
.wine-glass[aria-pressed="true"] { border-color: var(--deep); background: rgba(94, 29, 26, 0.08); color: var(--deep); }
.wine-glass[aria-pressed="true"] .wine-dot { background: currentColor; }
.wine-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 26px 0 6px; font-size: 15px; color: var(--ink-soft); }
.wine-reset { padding: 6px 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; cursor: pointer; }
.wine-results { columns: 2 360px; column-gap: clamp(48px, 7vw, 120px); margin-top: 18px; }
.wine-empty { padding: 32px 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-soft); }

/* The oval with the gold rim, as on the shelves behind the bar. */
.oval { border-radius: 999px; box-shadow: var(--gold-rim); }
/* On the wine page: the digital sommelier in the bordeaux oval with the gold rim,
   above the list: its own mark (DigiSomm's light lockup, made for bordeaux), the
   words, one gold button. */
.somm-call {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px;
  margin-bottom: clamp(48px, 6vw, 72px); padding: clamp(30px, 3.4vw, 42px) clamp(32px, 5.5vw, 80px);
  background: var(--deep); color: var(--on-deep);
}
.somm-logo { flex: none; }
.somm-logo img { width: clamp(84px, 7.5vw, 108px); height: auto; }
.somm-text { flex: 1 1 300px; }
.somm-call .h2 { font-size: clamp(32px, 3.2vw, 44px); }
.somm-call p { max-width: 30em; margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--on-deep-soft); }
.btn-sun { min-height: 56px; padding: 0 34px; border-radius: 999px; background: var(--gold); color: var(--deep-night); font-size: 16px; }
.btn-sun:hover { background: var(--on-deep); }

/* Tables. */
.reserve { text-align: center; }
.reserve .h2 { max-width: 14em; margin-inline: auto; }
.reserve-note { max-width: 30em; margin: 22px auto 0; }
.reserve .actions { margin-top: 34px; }

/* ── The night: the page darkens as the evening does ─────────────────── */
.night {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(180px, 22vw, 300px) 0 clamp(80px, 10vw, 140px); color: var(--on-deep);
  background: linear-gradient(180deg, var(--stone) 0%, var(--dusk) 7%, var(--deep) 17%, var(--deep-night) 30%);
}
.night-film {
  position: absolute; z-index: -1; top: 22%; right: 0; bottom: 0; width: 58%;
  -webkit-mask-image: radial-gradient(75% 70% at 70% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(75% 70% at 70% 50%, #000 30%, transparent 75%);
}
.night-film img, .night-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity 1.4s var(--ease); }
.night-film video, .night-film .film-loop { opacity: 0; }
.night-film video.is-playing, .night-film .film-loop.is-playing { opacity: 0.5; }
/* Once the film runs, the still under it goes: both are see-through here, and the
   still would otherwise stay visible through the moving picture. */
.night-film.is-playing .film-still img { opacity: 0; }
.night-copy { max-width: 620px; }
.night .time { color: var(--on-deep); }
/* The sign itself, traced from the film: one even tube, in the mask of the sign.
   Unlit, the tube is just visible; lit, it glows gold with a red halo, as in the bar. */
.neon { position: relative; width: clamp(250px, 34vw, 460px); aspect-ratio: 683 / 635; margin: 30px 0 40px; transition: filter 0.2s; }
.neon-tube {
  position: absolute; inset: 0; background: rgba(255, 226, 150, 0.14); transition: background 0.2s;
  -webkit-mask: url('../uploads/neon-strike-a-pose.svg') center / contain no-repeat; mask: url('../uploads/neon-strike-a-pose.svg') center / contain no-repeat;
}
.neon.is-on {
  filter: drop-shadow(0 0 1px #fff3c4) drop-shadow(0 0 5px var(--neon)) drop-shadow(0 0 14px #ff6a1a) drop-shadow(0 0 34px rgba(208, 48, 15, 0.8));
  animation: flicker 1.4s linear 1;
}
.neon.is-on .neon-tube { background: var(--neon-core); }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.3; } }
.night .text { color: var(--on-deep-soft); }
.night .link { text-decoration-color: var(--brass-light); }

/* Tonight's code, in the gold oval. Right under the film from 22:00 on Friday and
   Saturday; otherwise at the end of the night, where it is explained. */
.code-band { padding: clamp(56px, 7vw, 96px) 0; background: var(--deep-night); color: var(--on-deep); text-align: center; }
.code-band .h2 { margin-bottom: 30px; }
.code-oval {
  display: grid; place-items: center; align-content: center; gap: 6px;
  width: min(100%, 520px); min-height: 150px; margin-inline: auto; padding: 26px 56px;
  background: rgba(246, 198, 110, 0.05);
}
.code-oval.is-live { background: rgba(246, 198, 110, 0.1); }
.code-label { font-size: 15px; letter-spacing: 0.04em; color: var(--on-deep-soft); }
.code-value { font-family: var(--serif); font-size: clamp(56px, 7vw, 88px); line-height: 1; letter-spacing: 0.14em; padding-left: 0.14em; font-variant-numeric: lining-nums tabular-nums; color: var(--gold); text-shadow: 0 0 24px rgba(255, 177, 59, 0.45); }
.code-message { max-width: 24em; font-size: 16px; line-height: 1.55; color: var(--on-deep-soft); }
.code-band .actions { margin-top: 26px; }

/* ── Parties, as on the old site: the dance floor behind, a glass box beside ── */
.party {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(110px, 12vw, 170px) 0 clamp(120px, 13vw, 180px); background: var(--deep-night); color: var(--on-deep);
}
.party-bg { position: absolute; inset: 0; z-index: -2; background: url('../uploads/web/dansvloer-1600.webp') center / cover no-repeat; }
@media (hover: hover) and (min-width: 961px) { .party-bg { background-attachment: fixed; } }
@media (max-width: 640px) { .party-bg { background-image: url('../uploads/web/dansvloer-800.webp'); } }
/* Out of the night above, into the footer below; the dance floor shows in between. */
.party::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--deep-night) 0%, rgba(var(--shade-deep), 0.72) 28%, rgba(var(--shade-deep), 0.35) 72%, var(--deep) 100%);
}
.party-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.party .h2 { margin-bottom: 24px; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); }
.party .lead { color: var(--on-deep); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.party-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn-gold { min-width: 150px; border-color: var(--gold); color: var(--gold); background: rgba(var(--shade-deep), 0.25); }
.btn-gold:hover { background: var(--gold); color: var(--deep-night); }
.party-more { margin-top: 22px; font-size: 15px; }
.party-box {
  padding: clamp(28px, 3vw, 40px); border: 1px solid rgba(246, 198, 110, 0.35); border-radius: 4px;
  background: rgba(var(--shade-deep), 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.party-box h3 { margin-bottom: 16px; font-size: 24px; color: var(--gold); }
.party-box ul { display: grid; gap: 12px; list-style: none; }
.party-box li { display: flex; gap: 14px; font-size: 16px; line-height: 1.6; color: var(--on-deep-soft); }
.party-box li::before { content: "—"; flex: none; color: var(--gold); }

/* ── The other pages: a bordeaux head over a photograph, then the stone page ── */
.page .nav-logo { opacity: 1; }
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(72px, 10vw, 140px)) 0 clamp(64px, 8vw, 110px);
  background: var(--deep); color: var(--on-deep); text-align: center;
}
.page-head-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade-deep), 0.72) 0%, rgba(var(--shade), 0.5) 45%, rgba(var(--shade), 0.88) 100%);
}
.page-head h1 { max-width: 14em; margin-inline: auto; font-size: clamp(44px, 6.4vw, 92px); line-height: 1.04; letter-spacing: -0.015em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); }
.page-head h1 em { font-style: italic; }
.page-head .lead { max-width: 32em; margin: 26px auto 0; color: var(--on-deep); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.page-head .lead strong { font-weight: 500; }

.section-title { margin-bottom: 30px; }
.actions-start { justify-content: flex-start; }
.centre { text-align: center; }
.centre .lead { max-width: 34em; margin-inline: auto; }
.centre .lead + .lead { margin-top: 1em; }
.centre .h2 + .lead { margin-top: 22px; }
.section-follow { padding-top: 0; }


/* What a party at Floyd comes with: four short facts, as with booking a table. */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(56px, 7vw, 88px); list-style: none; }
.features li { padding-top: 18px; border-top: 1px solid var(--brass); }
.features h3 { margin-bottom: 8px; font-size: 24px; line-height: 1.2; }
.features p { font-size: 16px; color: var(--ink-soft); }

/* Questions: the heading beside them, each answer behind its question. */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 16px clamp(32px, 6vw, 96px); align-items: start; }
.qa + .qa { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.qa > h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; }
.qa details { border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }
.qa summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0;
  font-family: var(--serif); font-size: 22px; line-height: 1.3; cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 300 28px/1 var(--sans); color: var(--brass); transition: transform 0.35s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--deep); }
.answer { max-width: 40em; padding-bottom: 24px; color: var(--ink-soft); }
.answer p + p, .answer ul + p, .answer p + ul { margin-top: 0.8em; }
.answer ul { padding-left: 1.2em; }
.answer a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.answer strong { font-weight: 500; color: var(--ink); }

/* A dark band to close a page with a call or a mail. */
.band { padding: clamp(80px, 10vw, 140px) 0; background: var(--deep-night); color: var(--on-deep); text-align: center; }
.band .lead { max-width: 30em; margin: 22px auto 0; color: var(--on-deep-soft); }
.band .party-actions { justify-content: center; }

/* ── Footer: the map in the gold oval, then the three columns ────────── */
footer { padding: clamp(72px, 9vw, 120px) 0 32px; background: var(--deep); color: var(--on-deep); }
#floyd-map { height: 400px; overflow: hidden; z-index: 1; filter: sepia(0.15) saturate(0.9); }
/* In the oval the corners are gone: the zoom buttons sit in the middle of the left
   curve, and the map's credits at the bottom centre, where the edge is straight. */
#floyd-map .leaflet-top.leaflet-left { top: 50%; left: clamp(16px, 4%, 48px); transform: translateY(-50%); }
#floyd-map .leaflet-bottom.leaflet-right { right: 50%; bottom: 6px; transform: translateX(50%); }
#floyd-map .leaflet-control-attribution { border-radius: 999px; padding: 0 10px; white-space: nowrap; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(56px, 7vw, 88px); }
.footer-logo { width: min(100%, 220px); height: auto; }
.footer-top h2 { margin-bottom: 10px; font-size: 22px; color: var(--gold); }
.footer-top address, .footer-top p { font-style: normal; font-size: 16px; line-height: 1.85; color: var(--on-deep-soft); }
.footer-top a { text-decoration: none; transition: color 0.3s var(--ease); }
.footer-top a:hover { color: var(--on-deep); }
.footer-hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 22px; font-size: 16px; line-height: 1.85; color: var(--on-deep-soft); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(243, 233, 222, 0.14); font-size: 14px; color: var(--on-deep-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-link { padding: 4px 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.map-pin--floyd { background: var(--deep); border: 3px solid var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(246, 198, 110, 0.8); }
.map-pin--parking { background: #fff; border: 2px solid var(--deep); border-radius: 50%; color: var(--deep); font: 600 15px/28px var(--sans); text-align: center; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--stone-light) !important; color: var(--ink) !important; }
.leaflet-popup-content { font-family: var(--sans); }

/* ── Overlays: the film, photographs, the promo, booking, cookies ────── */
.film { width: min(100% - 32px, 1100px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 14px; background: #000; overflow: visible; }
.film[open] { animation: rise 0.5s var(--ease); }
.film::backdrop { background: rgba(var(--shade), 0.9); backdrop-filter: blur(4px); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.film video { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.film-close, .promo-popup-close, .lightbox-close {
  position: absolute; right: 0; bottom: calc(100% + 12px); min-height: 44px; padding: 0 20px; border: 0; border-radius: 3px;
  background: var(--stone-light); color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: 0.03em; cursor: pointer;
}
.lightbox {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(var(--shade), 0.92); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 86vh; object-fit: contain; border-radius: 14px; }
.lightbox-close { top: 16px; right: 16px; bottom: auto; }
.promo-popup {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(var(--shade), 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.promo-popup.open { opacity: 1; visibility: visible; pointer-events: auto; }
.promo-popup-close { top: 16px; right: 16px; bottom: auto; }
.promo-popup img { width: auto; max-width: min(84vw, 420px); max-height: 80vh; object-fit: contain; cursor: pointer; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); transform: translateY(12px); transition: transform 0.6s var(--ease); }
.promo-popup.open img { transform: none; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 999999; display: flex; justify-content: center; align-items: center; padding: 16px;
  background: rgba(var(--shade), 0.85); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-modal { position: relative; width: 100%; max-width: 330px; padding-top: 56px; }
#lightboxClose { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--stone-light); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
/* The Tavolinat form is its own 330px card, rounded 15px; this only adds the shadow. */
.mytable_container { width: 100%; overflow: hidden; border-radius: 15px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.mytable_container iframe { display: block; width: 100%; border: 0; }
.consent {
  position: fixed; z-index: 1000001; left: 16px; right: 16px; bottom: 16px; max-width: 520px; margin: 0 auto; padding: 22px 24px;
  border-radius: 18px; background: var(--stone-light); color: var(--ink); box-shadow: 0 24px 60px -16px rgba(var(--shade), 0.4);
}
.consent-text { font-size: 16px; line-height: 1.55; }
.consent-actions { display: flex; gap: 10px; margin-top: 16px; }
.consent-button { flex: 1 1 0; min-height: 46px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 3px; background: none; font: 500 15px/1 var(--sans); color: var(--ink); cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.consent-button:hover { background: var(--ink); color: var(--stone-light); }

/* Photographs and film ease in and drift a little while you scroll; done by
   the browser itself, and only where it can. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .slow-zoom img, .slow-zoom video { animation: slow-zoom linear both; animation-timeline: view(); }
    @keyframes slow-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
    .hero .hero-film img, .hero .hero-film video { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-drift { to { transform: translateY(14vh) scale(1.06); } }
    .page-head-photo { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}

/* ── Smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .chapter-head, .open-grid, .party-grid, .qa { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .night-film { top: auto; height: 46%; width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .night { padding-bottom: clamp(320px, 70vw, 460px); }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-mark::before { inset: -56px -40px; }
  .evening { --h: 300px; }
  .shelf-strip > li.shelf-wide:first-child .shelf-photo img { height: calc(var(--h) * 0.76); }
  .shelf-caption { font-size: 14px; }
  /* On a phone the oval would be all curve: a softer round, the button the full width. */
  .somm-call.oval { padding: 30px 24px 24px; border-radius: 32px; }
  .somm-call .btn { width: 100%; }
  .somm-logo img { width: 168px; }
  .code-oval { padding: 22px 32px; min-height: 130px; }
  .neon { width: min(100%, 330px); }
  .menu-panel.active { columns: 1; }
  /* On a phone the kinds scroll sideways in one row; the word gets a line of its own,
     and by the glass goes under the country and the price. */
  .wine-kinds { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .wine-kinds::-webkit-scrollbar { display: none; }
  .wine-search { flex-basis: 100%; }
  .wine-country { flex: 1 1 140px; min-width: 0; }
  .wine-results { columns: 1; }
  /* On a phone the oval would be all curve: a softer round, as the old site did. */
  #floyd-map { height: 260px; }
  #floyd-map.oval { border-radius: 56px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .features li { padding: 18px 0; }
  .qa summary { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}