:root {
  --ink: #1c232b;
  --cellar: #0f1114;
  --paper: #f3ece1;
  --paper-2: #e7dccb;
  --vine: #3f5a2e;
  --muted: #5b6067;
  --raspberry: #a8155b;
  --silver: #c9ced4;
  --wine: #c98b6b;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: 18px;
  --header-h: 56px;
  --hero-row-h: 380px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-space: 64px;
  --type-0: 10px;
  --type-1: 11.25px;
  --type-2: 12.66px;
  --type-3: 14.24px;
  --type-4: 16px;
  --type-5: 18px;
  --type-6: 20.25px;
  --type-7: 22.78px;
  --type-8: 25.63px;
  --type-9: 28.83px;
  --type-10: 32.44px;
  --type-11: 36.49px;
  --type-12: 41.05px;
  --type-13: 46.18px;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", serif;
  font-size: var(--type-5);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
h1, h2, h3, .small-caps, .year {
  margin-top: 0;
  font-family: "Lexend Exa", sans-serif;
  text-transform: uppercase;
  text-wrap: balance;
}
p { margin-top: 0; text-wrap: pretty; }
h2 {
  margin-bottom: var(--space-4);
  font-size: var(--type-9);
  font-weight: 250;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.small-caps {
  font-size: var(--type-0);
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.4;
}
.content-shell {
  width: calc(100% - (var(--gutter) * 2));
  max-width: 1300px;
  margin-inline: auto;
}
.section-pad { padding-block: var(--section-space); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  isolation: isolate;
  color: var(--ink);
}
.site-header[data-tone="dark"] { color: var(--paper); }
.site-header-glass { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.header-glass-light, .header-glass-dark { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms var(--ease-out); }
.header-glass-light {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.header-glass-dark {
  background: color-mix(in srgb, var(--cellar) 55%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.site-header[data-scrolled="true"][data-tone="light"] .header-glass-light,
.site-header[data-scrolled="true"][data-tone="dark"] .header-glass-dark { opacity: 1; }
.header-edge {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 12px;
  background: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent), transparent);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.site-header[data-tone="dark"] .header-edge { background: linear-gradient(color-mix(in srgb, var(--cellar) 40%, transparent), transparent); }
.site-header[data-scrolled="true"] .header-edge { opacity: 1; }
.site-header-bar {
  position: relative;
  z-index: 1;
  display: flex;
  width: calc(100% - (var(--gutter) * 2));
  max-width: 1380px;
  height: var(--header-h);
  margin-inline: auto;
  align-items: center;
  gap: 8px;
}
.logo-link {
  position: relative;
  display: block;
  width: 108px;
  min-width: 108px;
  height: 44px;
}
.logo-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 960 / 310;
  object-fit: contain;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.site-header[data-tone="light"] .logo-dark,
.site-header[data-tone="dark"] .logo-light { opacity: 1; }
.desktop-nav {
  display: none;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  margin-left: auto;
}
.desktop-nav a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: inherit;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1.25;
  opacity: .74;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.desktop-nav a:hover, .desktop-nav a:focus-visible,
.desktop-nav a[aria-current="page"] { opacity: 1; }
.desktop-nav a[aria-current="page"]::after {
  position: absolute;
  right: 50%;
  bottom: 5px;
  width: 16px;
  height: 1px;
  background: var(--raspberry);
  content: "";
  transform: translateX(50%);
}
.booking-opener {
  display: inline-flex;
  min-width: 208px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 2px;
  background: var(--raspberry);
  color: #fff;
  cursor: pointer;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.header-booking {
  width: max-content;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  margin-left: 0;
  padding: 2px 0;
  background: transparent;
  font-size: var(--type-1);
}
.header-booking .label-full, .header-booking .label-short {
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  border-radius: 2px;
  background: var(--raspberry);
  color: #fff;
}
.header-booking .label-short { display: none; }
.booking-opener[aria-hidden="true"] { pointer-events: none; }
.menu-toggle {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; }

.hero {
  --scrim-start: 38%;
  --scrim-mid: 66%;
  --scrim-end: 100%;
  --hero-photo-x: 50%;
  --hero-photo-y: 48%;
  --bottle-h: clamp(440px, 74svh, 700px);
  --bottle-inset: calc(var(--bottle-h) * 0.4 * 0.22);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  overflow: clip;
  background-color: var(--cellar);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cellar) 34%, transparent) 0%,
      color-mix(in srgb, var(--cellar) 48%, transparent) 48%,
      color-mix(in srgb, var(--cellar) 91%, transparent) 100%),
    url("../img/contact-header.jpg");
  background-position: center, var(--hero-photo-x) var(--hero-photo-y);
  background-size: cover;
  color: var(--paper);
  /* The whole hero turns the dial (home.js hands it to bottle.js): sideways is the dial's, up and down stays
     the page's scroll. Text is not selectable here, or a mouse drag would mark it instead. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.hero.is-dragging, .hero.is-dragging * { cursor: grabbing; }
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 37%, transparent 0%, color-mix(in srgb, var(--cellar) 18%, transparent) 32%, color-mix(in srgb, var(--cellar) 68%, transparent) 62%, var(--cellar) 92%);
  content: "";
  pointer-events: none;
}
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent var(--scrim-start), color-mix(in srgb, var(--cellar) 70%, transparent) var(--scrim-mid), color-mix(in srgb, var(--cellar) 70%, transparent) var(--scrim-end));
  content: "";
  pointer-events: none;
}
.hero-content {
  display: grid;
  flex: 1 1 auto;
  width: calc(100% - (var(--gutter) * 2));
  max-width: 1380px;
  margin-inline: auto;
  padding-top: var(--header-h);
  place-items: center;
}
.hero-main {
  display: grid;
  width: 100%;
  max-width: 1380px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 44px;
  column-gap: clamp(20px, 2.4vw, 40px);
  margin-inline: auto;
}
.bottle-column {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  justify-items: end;
  align-content: center;
}
#bottle {
  position: relative;
  isolation: isolate;
  width: auto;
  height: var(--bottle-h);
  aspect-ratio: 2 / 5;
  margin-right: calc(var(--bottle-inset) * -1);
  touch-action: pan-y;
}
.bottle-aura { position: absolute; z-index: -1; inset: 8% -16%; background: radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--wine) 17%, transparent), transparent 68%); pointer-events: none; }
#bottle canvas, #bottle-poster { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
#bottle canvas { z-index: 1; }
#bottle-poster { z-index: 2; aspect-ratio: 2 / 5; object-fit: contain; pointer-events: none; }
#bottle-poster[hidden] { display: none; }
.hero-copy {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  grid-template-areas: "vintage" "name" "grape" "award" "button" "details";
  grid-template-rows: min-content min-content min-content min-content min-content min-content;
  align-content: center;
  align-self: center;
}
.hero-facts-stage, .hero-facts-layer { display: contents; }
.hero-facts-layer[hidden] { display: none; }
.hero-vintage-row { display: flex; grid-area: vintage; align-items: baseline; gap: 16px; font-size: clamp(88px, 8vw, 128px); line-height: .9; }
.hero-vintage {
  margin: 0;
  color: var(--wine);
  font-family: "Lexend Exa", sans-serif;
  font-size: 1em;
  font-weight: 200;
  letter-spacing: -.045em;
  line-height: .9;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  will-change: opacity, transform;
}
.hero-medal { display: block; width: auto; height: .74em; flex: 0 0 auto; object-fit: contain; will-change: opacity, transform; }
.hero-medal[hidden] { display: none; }
.hero-name-layer {
  grid-area: name;
  min-width: 0;
  margin: 0 0 var(--space-2);
  color: var(--paper);
  font-family: "Lexend Exa", sans-serif;
  font-size: clamp(38px, 3.6vw, 56px);
  font-weight: 250;
  letter-spacing: -.035em;
  line-height: 1.02;
  white-space: nowrap;
  text-transform: uppercase;
  will-change: opacity, transform;
}
.hero-grape {
  grid-area: grape;
  min-width: 0;
  margin: 0;
  color: var(--paper);
  font-size: var(--type-6);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  will-change: opacity, transform;
}
.hero-award {
  grid-area: award;
  min-height: 1.3em;
  margin: var(--space-3) 0 0;
  color: var(--paper);
  font-size: var(--type-5);
  line-height: 1.25;
  white-space: nowrap;
  will-change: opacity, transform;
}
.award-medal {
  color: var(--silver);
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-2);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.award-event { color: var(--paper); font-family: "Newsreader", serif; font-size: var(--type-5); font-weight: 400; line-height: 1.25; }
.hero-actions { display: contents; }
.hero-order {
  display: inline-flex;
  min-width: 280px;
  min-height: 52px;
  grid-area: button;
  justify-self: start;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--wine) 82%, #fff);
  color: var(--cellar);
  cursor: pointer;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1.2;
  text-align: center;
}
.hero-details {
  display: inline-flex;
  min-height: 44px;
  grid-area: details;
  justify-self: start;
  align-items: center;
  color: var(--paper);
  font-size: var(--type-3);
  line-height: 1.3;
  text-decoration-thickness: 1px;
}
/* The dots belong to the bottle: as wide as its box and shifted with it, so they sit under the glass. */
.wine-dial { display: flex; width: calc(var(--bottle-h) * .4); grid-column: 1; grid-row: 2; justify-content: center; justify-self: end; gap: 0; margin: 0 calc(var(--bottle-inset) * -1) 0 0; padding: 0; list-style: none; }
.wine-dial { position: relative; align-items: center; }
.wine-dial button { display: grid; width: 40px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out); }
/* The dial is turned by swiping the hero, which is not obvious: until the visitor has turned it once, a small
   hint says so and the bottle sways. The dots stay clickable, but nothing invites a click. */
.dial-hint {
  position: absolute; left: 50%; top: calc(100% + 6px); z-index: 3; display: none; align-items: center; gap: 10px;
  color: var(--paper); font-family: "Lexend Exa", sans-serif; font-size: 12px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--cellar) 90%, transparent);
  translate: -50% 0; opacity: 0; animation: dial-hint-in 450ms var(--ease-out) 150ms forwards; transition: opacity 320ms var(--ease-out), visibility 0s;
}
.hero.is-live .dial-hint { display: flex; }
.hero.is-learned .dial-hint { animation: none; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s 320ms; }.dial-hint-glyph { position: relative; flex: 0 0 auto; width: 30px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 30%, transparent); }
.dial-hint-glyph::after { position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); content: ""; animation: dial-hint-drag 3.2s var(--ease-in-out) 700ms 3; }
.dial-hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .dial-hint-touch { display: none; } .dial-hint-mouse { display: inline; } }
@keyframes dial-hint-drag { 0%, 20% { translate: 0 0; } 55%, 65% { translate: 12px 0; } 100% { translate: 0 0; } }
@keyframes dial-hint-in { to { opacity: 1; } }
.wine-dot { display: block; width: 9px; height: 9px; border: 1px solid var(--paper); border-radius: 50%; background: transparent; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.wine-dial button[aria-pressed="true"] .wine-dot { border-color: var(--wine); background: var(--wine); transform: scale(1.18); }
.tasting-section { background: var(--paper); }
.tasting-layout { display: grid; gap: var(--space-8); }
.tasting-copy { max-width: 68ch; }
.tasting-copy p { max-width: 68ch; margin-bottom: var(--space-4); }
.tasting-copy p:last-child { margin-bottom: 0; }
.tasting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); }
.tasting-more span { margin-left: .45em; }
.tasting-more {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: var(--type-5);
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.tasting-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-inline: calc(var(--gutter) * -1);
}
.photo-frame {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-cellar { aspect-ratio: 16 / 10; }
.photo-cellar img { object-position: 50% 48%; }
/* The second photo belongs to the side-by-side layout; on a phone one photo is enough. */
.photo-corridor { display: none; aspect-ratio: 3 / 2; }
.photo-corridor img { object-position: 50% 58%; }

.page-links-section { background: var(--paper-2); }
.page-links {
  display: grid;
  gap: 0;
}
.page-link {
  display: grid;
  min-height: 90px;
  grid-template-columns: 72px minmax(0, 1fr) 36px;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  text-decoration: none;
}
.page-link:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); }
.page-link img { width: 72px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.page-link-name {
  margin: 0;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-7);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.page-link-arrow { justify-self: end; font-size: var(--type-7); line-height: 1; }
.page-link:hover .page-link-name { text-decoration: underline; text-underline-offset: .2em; }

.wine-page { background: var(--paper-2); }
.wine-page-list { display: grid; gap: var(--space-8); }
.wine-page-entry {
  --wine: #c98b6b;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--wine);
}
/* The winery's own photo of the bottle, on a lighter paper tile. The photos have a white ground and the same 4:5
   frame as the tile; multiplied onto the tile, the white takes the paper tone and no box shows. */
.wine-page-figure {
  position: relative;
  width: min(100%, 420px);
  max-height: 420px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
}
.wine-page-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.wine-page-copy { min-width: 0; max-width: 68ch; }
.wine-page-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.wine-page-headline h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--type-9);
  font-weight: 250;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.wine-page-vintage {
  color: var(--wine);
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-6);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.wine-page-grape, .wine-page-origin {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font-size: var(--type-3);
  line-height: 1.35;
}
.wine-page .award-block { margin-block: var(--space-4); }
.wine-award-block { display: flex; align-items: center; gap: var(--space-3); }
.wine-award-logo { display: block; width: auto; height: 72px; flex: 0 0 auto; object-fit: contain; }
.award-copy { display: grid; gap: 2px; justify-items: start; }
.wine-page .award-medal { color: color-mix(in srgb, var(--silver) 55%, var(--ink)); }
.wine-page .award-event { color: var(--ink); }
.wine-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.wine-specs div { min-width: 0; }
.wine-specs dt {
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-0);
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.wine-specs dd {
  margin: 2px 0 0;
  font-size: var(--type-3);
  line-height: 1.25;
  font-variant-numeric: lining-nums tabular-nums;
}
.wine-description p { margin-bottom: var(--space-3); }
.wine-description p:last-child { margin-bottom: 0; }
.wine-description .wine-note { font-style: italic; }
/* Ordering a wine is a button in that wine's colour, here as in the hero. Raspberry stays for booking. */
.wine-order-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-radius: 2px;
  background: color-mix(in srgb, var(--wine) 82%, #fff);
  color: var(--cellar);
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
@media (max-width: 759px) {
  .wine-order-link { display: flex; width: 100%; padding-inline: var(--space-4); }
}

.story-section { background: var(--paper); }
.story-lede { max-width: 24ch; margin: 0 0 var(--space-6); font-family: "Newsreader", serif; font-size: 26px; font-weight: 400; line-height: 1.2; }
.story-layout { display: grid; gap: var(--space-8); align-items: start; }
.timeline {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--paper-2);
}
.year {
  display: block;
  width: fit-content;
  color: var(--vine);
  font-size: var(--type-13);
  font-weight: 220;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-text-stroke: .45px var(--ink);
}
.timeline p { max-width: 68ch; margin: 0; }
.story-photo { aspect-ratio: 2 / 3; max-width: 520px; }
/* Upright cut of the drone shot: the terrace and the roof edge. */
.story-photo img { object-position: 50% 50%; }
.page-link[href*="ultetvenyunk"] img { object-position: 68% 50%; }

.compact-footer { padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); }
.footer-grid { display: grid; width: 100%; max-width: 1380px; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-inline: auto; }
.footer-brand p { margin: 2px 0 0; font-family: "Newsreader", serif; font-size: var(--type-4); line-height: 1.4; }
.footer-logo { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; }
.footer-logo img { width: 120px; height: auto; aspect-ratio: 960 / 310; object-fit: contain; }
.footer-group { min-width: 0; }
.footer-label { margin: 0 0 2px; color: var(--paper); font-family: "Lexend Exa", sans-serif; font-size: var(--type-0); font-weight: 650; letter-spacing: .12em; line-height: 1.35; opacity: .62; text-transform: uppercase; }
.footer-address { display: flex; min-width: 0; align-items: center; gap: 4px; font-size: var(--type-4); font-style: normal; line-height: 1.4; }
.footer-address span { min-width: 0; }
.compact-footer a { color: var(--paper); text-decoration: none; }
.compact-footer a:hover, .compact-footer a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.footer-map { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; }
.footer-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.footer-person { display: grid; min-width: 0; gap: 0; font-size: var(--type-4); line-height: 1.4; }
.footer-person a, .footer-email { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; font-variant-numeric: lining-nums tabular-nums; }
.footer-email { margin-top: 0; }
.footer-social-links { display: flex; align-items: center; gap: 16px; }
.footer-social-links a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-map { text-decoration: underline !important; }
/* Maker credit: set like the hero's order button (Lexend Exa 650) but in the footer's own paper colour, dimmed like the small labels above the columns so it blends in. Inside the brand column. Wide laptop (1100 px and up): bottom-left corner of the footer. Narrower: beside the logo, so the footer gets no taller. */
.footer-brand .footer-credit { margin: 0; color: var(--paper); font-family: "Lexend Exa", sans-serif; font-style: normal; font-size: 12px; font-weight: 650; letter-spacing: .045em; line-height: 1.4; opacity: .62; -webkit-hyphens: none; hyphens: none; }
@media (min-width: 1100px) { .footer-brand { display: flex; flex-direction: column; align-items: flex-start; } .footer-brand .footer-credit { margin-top: auto; } }
@media (max-width: 1099px) {
  .footer-brand { display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: end; column-gap: 16px; }
  .footer-logo { grid-column: 1; grid-row: 1; }
  .footer-brand .footer-credit { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 9px; }
  .footer-brand > p:not(.footer-credit) { grid-column: 1 / -1; grid-row: 2; }
}
/* Phone: the credit is the last line of the page. The brand block dissolves into the footer grid so the credit can follow
   `Kövess minket`; the tagline is pulled up under the logo again (the grid's 14 px gap would otherwise open between them). */
@media (max-width: 759px) {
  .footer-brand { display: contents; }
  .footer-logo, .footer-brand > p:not(.footer-credit) { grid-column: auto; grid-row: auto; }
  .footer-brand > p:not(.footer-credit) { margin-top: -12px; }
  .footer-brand .footer-credit { grid-column: auto; grid-row: auto; order: 1; align-self: start; margin-top: 10px; padding-bottom: 0; }
}
/* `Weboldalt készítette: Kappel András` is longer than the old credit: on the narrowest phones it stays one line, so the footer keeps its height. */
@media (max-width: 345px) { .footer-brand .footer-credit { font-size: 11px; letter-spacing: .015em; } }
.page-title-shell {
  width: calc(100% - (var(--gutter) * 2));
  max-width: 1300px;
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-6);
}
.page-title { margin: 0; color: var(--ink); font-size: var(--type-13); font-weight: 200; letter-spacing: -.035em; line-height: 1.05; }
.page-title-rule { display: block; width: 64px; height: 1px; margin-top: var(--space-4); background: var(--vine); }
/* /boraink: the order of the wines. Title and rule stay on the left; the control sits on the opposite side, and drops
   under the title (still right-aligned) when the row is too narrow. */
.page-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.page-title-main { min-width: 0; }
.wine-sort { display: grid; width: min(100%, 250px); margin-left: auto; gap: 6px; }
.wine-sort[hidden] { display: none; }
@media (max-width: 520px) { .wine-sort { width: 100%; } }
.wine-sort-label { color: var(--muted); font-family: "Lexend Exa", sans-serif; font-size: var(--type-1); font-weight: 600; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.wine-sort-field { position: relative; display: block; }
.wine-sort-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}
.wine-sort select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 40px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--paper));
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: "Newsreader", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  transition: border-color .2s var(--ease-out);
}
.wine-sort select:hover { border-color: var(--ink); }
.wine-sort select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wine-sort-status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wine-page-list { transition: opacity .14s var(--ease-out); }
.wine-page-list.is-sorting { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wine-page-list { transition: none; } }

dialog {
  width: min(100%, 720px);
  max-width: 720px;
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
dialog::backdrop { background: color-mix(in srgb, #000 66%, transparent); }
/* The dimming follows the sheet: site.js writes how far it is open (0 to 1) while it moves or is dragged. */
dialog#booking-sheet::backdrop { opacity: var(--sheet-open, 1); }
/* Both panels lie on the part of the page that is on screen, in page coordinates. site.js measures that area
   (the visual viewport) and keeps the two properties current while a panel is open. Not position: fixed with
   100% height: iOS Safari does not reliably make such a box as tall as the screen. */
/* On a laptop the panel is a window in the middle of the screen, with room all round. (On phones and tablets it
   is the page itself: see .is-page at the end of this file.) */
dialog#booking-sheet {
  position: absolute;
  inset: var(--overlay-top, 0px) auto auto 0;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: var(--overlay-height, 100dvh);
  max-width: none;
  max-height: none;
  place-items: center;
  margin: 0;
  padding: var(--sheet-gap);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  --sheet-gap: 24px;
}
dialog#booking-sheet:not([open]) { display: none; }
.sheet-panel {
  position: relative;
  display: flex;
  width: min(100%, 720px);
  max-height: calc(var(--overlay-height, 100dvh) - 2 * var(--sheet-gap, 24px));
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  will-change: transform;
}
.sheet-head {
  display: flex;
  min-height: 78px;
  flex: 0 0 auto;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter) var(--space-3);
  border-bottom: 1px solid var(--paper-2);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sheet-head:active { cursor: grabbing; }
.sheet-head h2 {
  margin: 3px 0 0;
  font-size: var(--type-7);
  font-weight: 250;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.sheet-close {
  display: inline-flex;
  flex: 0 0 auto;   /* never squeezed by a long title: its label must stay inside its border */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font-family: "Newsreader", serif;
  font-size: var(--type-2);
  font-weight: 450;
  line-height: 1.2;
  white-space: nowrap;
}
.sheet-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--gutter) var(--space-4);
}
.sheet-form { display: grid; gap: var(--space-4); padding-top: var(--space-4); }
.sheet-fields { display: grid; gap: var(--space-3); }
.sheet-fields[hidden] { display: none; }
.field-grid { display: grid; gap: var(--space-3); }
.field {
  display: grid;
  gap: var(--space-1);
  color: var(--ink);
  font-size: var(--type-4);
  font-weight: 400;
  line-height: 1.35;
}
.field > span, .field-label {
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
}
input, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}
textarea { min-height: 90px; resize: vertical; }
input[type="checkbox"] {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  accent-color: var(--ink);
  appearance: auto;
}
input[type="date"], input[type="time"], input[type="tel"] { font-variant-numeric: lining-nums tabular-nums; }
.stepper {
  display: inline-grid;
  min-height: 48px;
  grid-template-columns: 48px minmax(54px, 72px) 48px;
  align-items: center;
  justify-items: stretch;
}
.stepper button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: var(--paper);
  cursor: pointer;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-6);
  font-weight: 500;
  line-height: 1;
  transition: transform 100ms var(--ease-out);
}
.stepper input {
  min-width: 0;
  padding-inline: var(--space-1);
  border-inline: 0;
  text-align: center;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-4);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}
.guest-name-row { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); align-items: end; gap: var(--space-3); }
/* The tasting package: three tappable rows, name over price. The radio itself is invisible and covers its row, so
   the whole row takes the tap and the keyboard. Required: the e-mail button stays off until one is chosen. */
.package-field { display: grid; min-width: 0; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.package-field legend { margin-bottom: var(--space-1); padding: 0; }
.package-options { display: grid; gap: var(--space-2); }
.package-option {
  position: relative;
  display: grid;
  min-height: 56px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: var(--paper);
  cursor: pointer;
}
.package-option input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.package-mark { width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 50%; }
.package-text { display: grid; min-width: 0; gap: 1px; }
.package-name { font-size: var(--type-5); font-weight: 500; line-height: 1.25; }
.package-line { color: var(--muted); font-size: var(--type-4); line-height: 1.25; font-variant-numeric: lining-nums; }
.package-option:has(input:checked) { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.package-option:has(input:checked) .package-mark { background: radial-gradient(circle, var(--ink) 0 42%, transparent 46%); }
.package-option:has(input:focus-visible) { outline: 3px solid currentColor; outline-offset: 3px; }
.package-hint { margin: 0; font-size: var(--type-4); font-weight: 600; line-height: 1.3; }
.package-hint[hidden] { display: none; }
/* Under the date and time: when tastings are held and how a booking is confirmed. */
.visit-note { margin: 0; color: var(--muted); font-size: var(--type-4); line-height: 1.4; }
.guest-name-row > .field:first-child { min-width: 96px; }
.guest-name-row .stepper { grid-template-columns: 44px minmax(44px, 56px) 44px; }
.date-time-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: end; }
.date-time-grid input { min-width: 0; padding-inline: var(--space-2); }
/* The date and the time field show their hint and value in Hungarian form (site.js, showDate and showTime).
   The native field lies invisible on top and takes the tap. */
/* Neither the label nor the wrapper may take the native field's own width as their minimum, or the date box
   grows over the time box on a narrow phone. */
.date-time-grid .field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.local-field { position: relative; display: block; min-width: 0; }
.local-shown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 10px var(--space-2);
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.local-shown.is-empty { color: var(--muted); }
.local-field input { position: relative; opacity: 0; cursor: pointer; }
.local-field:has(input:focus-visible) .local-shown { outline: 3px solid currentColor; outline-offset: 3px; }
.order-intro { margin: 0; font-size: var(--type-4); line-height: 1.45; }
.shipping-copy { margin: 0; color: var(--muted); font-size: var(--type-3); line-height: 1.45; }
.order-minimum { margin: 0; color: var(--muted); font-size: var(--type-4); line-height: 1.45; }
/* The live line under the rows. Two lines are reserved so the fields below it do not jump when its text changes length.
   Short of the minimum it is ink and bold (like the tasting package hint); in advice and ok it is quiet. */
.order-total { min-height: calc(var(--type-4) * 1.4 * 2); margin: 0; color: var(--muted); font-size: var(--type-4); line-height: 1.4; font-variant-numeric: lining-nums; }
.order-total[data-state="short"] { color: var(--ink); font-weight: 600; }
.order-rows { display: grid; gap: 0; }
.order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--paper-2);
}
.order-name {
  display: block;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-2);
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.35;
  text-transform: uppercase;
}
.order-meta {
  display: block;
  color: var(--muted);
  font-size: var(--type-2);
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
}
.age-check { display: flex; min-height: 48px; align-items: center; gap: var(--space-2); }
.age-check label {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: var(--type-4);
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
}
.preview-block { display: grid; gap: var(--space-2); }
.preview-block h3 { margin: 0; font-size: var(--type-1); font-weight: 650; letter-spacing: .08em; line-height: 1.35; }
.message-preview {
  min-height: 150px;
  max-height: 240px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border-left: 2px solid var(--vine);
  background: var(--paper-2);
  font-family: "Newsreader", serif;
  font-size: var(--type-4);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums tabular-nums;
}
.sheet-footer {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  gap: 0;
  padding: var(--space-2) var(--gutter) var(--space-3);
  border-top: 1px solid var(--paper-2);
  background: var(--paper);
}
.email-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 2px;
  background: var(--raspberry);
  color: #fff;
  cursor: pointer;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.email-action[aria-disabled="true"] { opacity: .58; }
.call-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: var(--type-4);
  line-height: 1.35;
}
.privacy-note { margin: 0; color: var(--muted); font-size: var(--type-3); line-height: 1.45; text-align: center; }

dialog#site-menu {
  position: absolute;
  inset: var(--overlay-top, 0px) auto auto 0;
  width: 100%;
  height: var(--overlay-height, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  transition: opacity 140ms ease-out;
}
dialog#site-menu[open] { opacity: 1; }
dialog#site-menu.is-closing { opacity: 0; }
.site-menu-inner {
  display: flex;
  width: min(640px, calc(100% - var(--gutter) - var(--gutter)));
  min-height: 100%;
  flex-direction: column;
  margin-inline: auto;
  padding-block: var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
}
.site-menu-head { display: flex; min-height: 44px; justify-content: flex-end; }
.site-menu-close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-1);
  font-weight: 600;
  letter-spacing: .04em;
}
.site-menu-nav { display: grid; margin-block: var(--space-4) auto; }
.site-menu-nav a {
  display: flex;
  min-height: 56px;
  align-items: center;
  border-bottom: 1px solid var(--paper-2);
  font-family: "Lexend Exa", sans-serif;
  font-size: var(--type-8);
  font-weight: 300;
  line-height: 1.2;
  text-decoration: none;
}
.site-menu-nav a:first-child { border-top: 1px solid var(--paper-2); }
.site-menu-booking { width: 100%; }
.site-menu-actions { display: grid; gap: var(--space-2); }
.site-menu-phone {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  color: var(--ink);
}

html.sheet-locked, html.sheet-locked body { overscroll-behavior: none; }

@media (min-width: 760px) {
  :root { --header-h: 64px; --gutter: 34px; --section-space: 96px; }
  .logo-link { width: 132px; min-width: 132px; }
  .header-booking .label-full, .header-booking .label-short { padding-inline: 16px; }
  .hero-content { min-height: 0; }
  .hero-main { column-gap: clamp(20px, 2.4vw, 40px); }
  .tasting-layout { grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
  .tasting-photos { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-4); margin-inline: 0; }
  .photo-cellar { aspect-ratio: 4 / 5; }
  .photo-corridor { display: block; aspect-ratio: 4 / 5; margin-bottom: 15%; }
  .page-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .page-link { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); border: 0; padding: 0; }
  .page-link:last-child { border: 0; }
  .page-link img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .page-link-name { font-size: var(--type-6); }
  .page-link-arrow { display: none; }
  .wine-page-entry { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); padding-block: var(--space-8); }
  .wine-page-figure { width: 100%; max-height: none; margin: 0; }
  .wine-page-headline h2 { font-size: var(--type-13); }
  .wine-page-vintage { font-size: var(--type-8); }
  .story-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(36px, 6vw, 96px); }
  .story-photo { position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100svh - var(--header-h) - 56px); aspect-ratio: 768 / 1890; }
  .timeline li { grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr); gap: var(--space-6); }
  .year { font-size: 64px; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  dialog { width: min(calc(100% - 48px), 720px); }
  .sheet-head h2 { font-size: var(--type-10); }
  .sheet-head, .sheet-body, .sheet-footer { padding-inline: var(--space-8); }
  .date-time-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-title-shell + section { padding-top: var(--space-8); }
  .story-lede { max-width: 28ch; font-size: 34px; }
}
/* Wide enough for the long picture: its frame is as tall as the whole timeline column. */
@media (min-width: 1100px) {
  .story-photo { position: relative; top: auto; align-self: stretch; aspect-ratio: auto; max-height: none; }
  .story-photo img { position: absolute; inset: 0; }
}
@media (min-width: 900px) {
  .compact-footer { padding-block: 40px; }
  .footer-grid { grid-template-columns: 1.2fr 1.3fr 1.4fr .8fr; gap: 40px; }
  .footer-logo img { width: 132px; }
  .footer-phones { gap: 8px; }
  .footer-social-links { display: grid; gap: 0; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .hero { --scrim-start: 30%; --scrim-mid: 63%; --hero-photo-y: 48%; --bottle-h: clamp(400px, 62svh, 540px); }
  .hero-main { column-gap: clamp(20px, 2.4vw, 32px); }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
}
@media (min-width: 1100px) {
  .desktop-nav { display: flex; }
  .menu-toggle { display: none; }
  .header-booking { margin-left: 20px; }
}
@media (max-width: 759px) {
  /* The bottle takes everything the screen has left after the header, the dots, the button and the link,
     so the button and the link end exactly at the bottom of the first screen. */
  :root { --header-h: 56px; --gutter: 18px; --section-space: 64px; --hero-row-h: clamp(340px, calc(100svh - 238px), 580px); }
  .header-booking { font-size: 10.5px; }
  .header-booking .label-full, .header-booking .label-short { padding-inline: 12px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  /* The same lit arch as on a laptop: the photo is shown whole (190% of the width, so the arch stands inside the
     screen behind the bottle and the facts) and melts into the cellar colour under it, instead of a zoomed-in
     fragment of it. The second gradient is that melt. */
  .hero {
    --scrim-start: 34%; --scrim-mid: 58%;
    min-height: 0;
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cellar) 34%, transparent) 0%,
        color-mix(in srgb, var(--cellar) 48%, transparent) 48%,
        color-mix(in srgb, var(--cellar) 91%, transparent) 100%),
      linear-gradient(180deg, transparent 0%, transparent 34%, var(--cellar) 62%),
      url("../img/contact-header.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, 190% auto;
    background-position: center, center, 54% 24px;
  }
  .hero-content { display: block; flex: 1 1 auto; margin: 0 auto; padding-bottom: var(--space-4); }
  .hero-main {
    width: 100%;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-rows: var(--hero-row-h) 44px 26px 52px 44px;
    grid-template-areas: "bottle facts" "dots dots" "hint hint" "button button" "details details";
    column-gap: 12px;
    row-gap: 0;
    margin: 0;
  }
  /* The bottle's box is the same 2:5 frame as on a laptop, so the still and the 3D bottle match. The frame keeps
     clear room above the cap for the cork to rise into. On a phone the booking sheet covers the whole screen while
     the cork is out, so that room is not needed on screen: the box is a fifth taller than its row and the surplus
     lies under the header and beside the screen. The glass itself fills 95% of the row. */
  .bottle-column { grid-area: bottle; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: end; }
  #bottle { width: auto; height: calc(var(--hero-row-h) * 1.2); grid-column: auto; grid-row: auto; aspect-ratio: 2 / 5; margin: 0 0 calc(var(--hero-row-h) * -.055); }
  /* The text block is one element in the markup but two places on a phone: the facts beside the
     bottle, the button and link under the dots. So it lies over the whole hero grid with the same
     two columns, and its two flexible rows park the facts on the bottle's lower half. It lets
     touches through to the bottle and the dots beneath it. */
  .hero-copy {
    display: grid;
    width: 100%;
    max-width: none;
    grid-area: 1 / 1 / -1 / -1;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-areas: ". ." ". vintage" ". name" ". grape" ". award" ". ." ". ." ". ." "button button" "details details";
    grid-template-rows: 1.55fr min-content min-content min-content minmax(2.4em, auto) .45fr 44px 26px 52px 44px;
    column-gap: 12px;
    align-content: stretch;
    align-self: stretch;
    pointer-events: none;
  }
  .hero-order, .hero-details { pointer-events: auto; }
  /* The row is as tall as the medal whether a wine has one or not, so the facts never shift between wines. */
  .hero-vintage-row { --medal-h: clamp(52px, 15vw, 64px); align-items: center; gap: 6px; min-height: var(--medal-h); font-size: clamp(46px, 14.4vw, 62px); }
  .hero-medal { height: var(--medal-h); }
  .hero-name-layer { margin: 0 0 4px; font-size: clamp(17px, 5.6vw, 25px); line-height: 1.08; white-space: normal; }
  .hero-grape { font-size: var(--type-4); line-height: 1.2; white-space: normal; }
  /* Sized by the screen so "Ezüstérem" and the competition always take two lines; the row keeps that height for wines without an award. */
  .hero-award { --award-size: clamp(13px, 4vw, 16px); min-height: calc(2 * var(--award-size) * 1.2); margin-top: var(--space-2); font-size: var(--award-size); line-height: 1.2; white-space: normal; }
  .award-medal { font-size: clamp(10px, 3vw, 12.66px); line-height: 1.2; }
  .award-event { font-size: var(--award-size); line-height: 1.2; }
  /* The bottle's box reaches a little into the dots' row; the dots stay on top of it so they take the tap. */
  /* The hint is a line of its own under the dots, in a row that is reserved for it, so it never covers the facts or the bottle. */
  .dial-hint { top: calc(100% - 2px); gap: 9px; font-size: 12px; letter-spacing: .05em; }
  .wine-dial { position: relative; z-index: 2; width: 100%; grid-column: 1 / -1; grid-row: 2; justify-content: center; justify-self: stretch; margin: 0; }
  .wine-dial button { width: 44px; height: 44px; }
  .hero-order { width: 100%; min-width: 0; min-height: 52px; margin-top: 0; justify-self: stretch; font-size: var(--type-2); }
  .hero-details { justify-content: center; justify-self: center; font-size: var(--type-4); }
  .wine-page-figure { max-height: none; }
  .page-title-shell { padding-bottom: var(--space-4); }
  .page-title { font-size: var(--type-10); }
  .page-title-shell + section { padding-top: var(--space-6); }
  .sheet-head { min-height: 100px; padding: var(--space-6) var(--space-8) var(--space-3); }
  /* The longest word of the title ("EGYEZTETÉSE") must fit beside the close button on any phone, also when
     the page is zoomed: its size follows the width. Full size from 400 px. */
  .sheet-head h2 { min-width: 0; font-size: clamp(21px, calc((100vw - 142px) / 7.9), 32.44px); overflow-wrap: anywhere; }
  .sheet-body, .sheet-footer { padding-inline: var(--space-8); }
  .sheet-form { gap: var(--space-3); padding-top: 0; }
  .sheet-fields { gap: var(--space-3); }
  .date-time-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .guest-name-row { grid-template-columns: 124px minmax(0, 1fr); }
  .guest-name-row .stepper { grid-template-columns: 44px minmax(44px, 56px) 44px; }
  textarea { min-height: 66px; height: 66px; resize: none; }
  .preview-block { gap: var(--space-1); }
  .message-preview { min-height: 64px; max-height: 120px; padding: var(--space-2); }
  .email-action { width: 100%; min-height: 48px; }
  .call-action { min-height: 44px; }
  .privacy-note { font-size: var(--type-2); }
  .stepper button { transition-duration: 100ms; }
  .site-menu-inner { width: calc(100% - (var(--gutter) * 2)); }
}
/* Reviewer-tuned compact booking label breakpoint: 380px. */
/* Measured: the full label needs 160 px and fits beside logo and menu from 372 px. */
@media (max-width: 371px) {
  .header-booking .label-full { display: none; }
  .header-booking .label-short { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .dial-hint { animation-duration: 1ms !important; animation-delay: 0s !important; } .dial-hint-glyph::after { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  a[href], button { transition: opacity 120ms ease-out !important; }
  .site-header .header-glass-light, .site-header .header-glass-dark, .site-header .header-edge,
  .logo-link img, .booking-opener, .hero-order, .hero-details, .wine-dial button,
  .stepper button, .sheet-close, .email-action, .call-action,
  .footer-logo, .footer-map, .footer-person a, .footer-email, .footer-social-links a {
    transition: opacity 120ms ease-out !important;
  }
  .sheet-panel { transition: opacity 120ms ease-out !important; }
  .wine-dot { transition: opacity 120ms ease-out !important; }
  dialog#site-menu { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .header-glass-light { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header-glass-dark { background: var(--cellar); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .header-glass-light { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header-glass-dark { background: var(--cellar); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header-bar { box-shadow: 0 1px 0 currentColor; }
}
@media (min-width: 760px) {
  .hero-copy::before {
    position: absolute;
    z-index: -1;
    inset: -14% -34% -10% -10%;
    background: radial-gradient(ellipse at 38% 56%, color-mix(in srgb, var(--cellar) 74%, transparent) 0%, color-mix(in srgb, var(--cellar) 52%, transparent) 44%, transparent 72%);
    content: "";
    pointer-events: none;
  }
}
dialog#site-menu:focus { outline: none; }
.sheet-head h2:focus, .sheet-head h2:focus-visible { outline: none; }

/* Phones and tablets: an open panel is the page (site.js, enterPage). The rest of the page is taken out, and the
   panel lies in the normal flow and scrolls with the document. No pinned box, no measured height. */
html.panel-page body > :not(dialog) { display: none; }
html.panel-page, html.panel-page body { background: var(--paper); }
html.panel-page { overflow-x: clip; }
dialog#booking-sheet.is-page, dialog#site-menu.is-page {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
  background: var(--paper);
}
dialog#booking-sheet.is-page[open] { display: block; padding: 0; }
dialog#booking-sheet.is-page .sheet-panel {
  position: static;
  width: 100%;
  max-height: none;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
dialog#booking-sheet.is-page .sheet-head { padding-top: calc(var(--space-6) + env(safe-area-inset-top)); cursor: auto; touch-action: auto; }
dialog#booking-sheet.is-page .sheet-body { flex: 1 0 auto; overflow: visible; }
dialog#site-menu.is-page .site-menu-inner { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--space-4) + env(safe-area-inset-top)); }

/* iOS only: its date and time fields keep a width of their own and push out of their column unless the
   native look is switched off. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"] { display: block; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
  input::-webkit-date-and-time-value { min-height: 1.35em; text-align: left; }
}
#wines-page-title, #story-page-title { scroll-margin-top: calc(var(--header-h) + 12px); }
#borkostolo, #kapcsolat, #borvidek, .wine-page-entry { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (min-width: 760px) and (max-width: 899px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
}/* Footer from 900 px: the map link stands under the address, not pushed to the column's far edge. */
@media (min-width: 900px) {
  .footer-address { flex-direction: column; align-items: flex-start; gap: 0; }
}/* OLASZRIZLING and BENEDEK APAT have to fit the narrow text column beside the bottle on a tablet. */
@media (min-width: 760px) and (max-width: 1099px) {
  .wine-page-headline h2 { font-size: var(--type-10); }
  .wine-page-entry { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
}