/* ==========================================================================
   VonWely-Makk: design tokens, base layer and components.
   Palette, type scale and motion come from the supplied one-page design
   reference: white pages, very light blue section bands, near-black type and
   buttons, and restrained blue-grey botanical line work. The components below
   only use the tokens. Fonts are self-hosted in /assets/fonts/ (the CSP
   allows no external font CDNs).
   ========================================================================== */

/* ---------------------------------- fonts ---------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/parisienne-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------- tokens --------------------------------- */

:root {
  --c-bg: #ffffff;
  --c-bg-blue: #dcebff;
  --c-bg-blue-soft: #eef4fe;
  --c-panel: #f4f8ff;
  --c-ink: #111827;
  --c-ink-soft: #3b4557;
  --c-muted: #6b7280;
  --c-accent: #7d9ef0;
  --c-accent-deep: #4b6fc4;
  --c-line: rgba(17, 24, 39, 0.14);
  --c-line-soft: rgba(17, 24, 39, 0.08);
  --c-button: #111111;
  --c-button-hover: #2b2b2b;
  --c-button-text: #ffffff;
  --c-scrim: 11, 18, 32;
  --photo-ring: rgba(17, 24, 39, 0.1);
  --photo-mount: rgba(75, 111, 196, 0.3);
  --shadow-photo: 0 1px 2px rgba(17, 24, 39, 0.04), 0 20px 40px -24px rgba(17, 24, 39, 0.4);
  --shadow-photo-lift: 0 2px 6px rgba(17, 24, 39, 0.06), 0 28px 54px -22px rgba(17, 24, 39, 0.45);
  --c-notice-bg: #fdf6e6;
  --c-notice-line: #e4cd94;
  --c-error: #9a2c2c;
  --c-success: #1f6b4b;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script: 'Parisienne', 'Snell Roundhand', cursive;

  --fs-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5.1rem);
  --fs-h1: clamp(1.95rem, 1.3rem + 2.1vw, 2.65rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 1.7vw, 2.3rem);
  --fs-h3: clamp(1.22rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.32vw, 1.22rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-small: 0.94rem;
  --fs-label: 0.78rem;

  --container: 1240px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 6vw, 6.5rem);
  --radius-img: 10px;
  --radius-panel: 6px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
  --dur-slow: 420ms;

  --header-h: 68px;
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* ----------------------------------- reset --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  /* A short page would leave the footer floating with the backdrop under it;
     the column pushes the footer to the bottom of the screen. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { text-wrap: pretty; }
ul, ol { padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-accent); color: #fff; }

/* ---------------------------------- layout --------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--flush { padding-block-start: 0; }

/* The blue bands are translucent, so the hills and the vine branches behind
   the whole site carry on through them, and they fade out at top and bottom
   rather than ending on a ruled line: one scene rather than a stack of panels. */
.section--blue, .section--blue-flat {
  isolation: isolate;
  overflow: clip; /* the grape bunch overhangs on purpose */
}

.section--blue {
  background: linear-gradient(180deg,
    rgba(238, 244, 254, 0) 0%, rgba(238, 244, 254, 0.72) 9%,
    rgba(220, 235, 255, 0.8) 46%, rgba(220, 235, 255, 0.8) 92%, rgba(220, 235, 255, 0) 100%);
}

.section--blue-flat {
  background: linear-gradient(180deg,
    rgba(220, 235, 255, 0) 0%, rgba(220, 235, 255, 0.8) 10%,
    rgba(220, 235, 255, 0.8) 90%, rgba(220, 235, 255, 0) 100%);
}

/* A bunch of grapes drawn into the band itself, large and barely there. */
.section--blue::before, .section--blue-flat::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: clamp(-3rem, 2vw, 3rem);
  translate: 0 -50%;
  width: clamp(220px, 26vw, 420px);
  aspect-ratio: 220 / 300;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 300' fill='none'> <g stroke='%234b6fc4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'> <path d='M110 34c0 18-3 32-8 44'/> <path d='M110 36c14-16 34-20 52-10-12 18-34 22-52 10Z'/> <path d='M104 44c-14-10-32-8-44 6 14 11 32 9 44-6Z'/> <circle cx='80' cy='96' r='15'/><circle cx='110' cy='92' r='15'/><circle cx='140' cy='96' r='15'/> <circle cx='64' cy='124' r='15'/><circle cx='94' cy='120' r='15'/><circle cx='126' cy='120' r='15'/><circle cx='156' cy='124' r='15'/> <circle cx='80' cy='150' r='15'/><circle cx='110' cy='148' r='15'/><circle cx='140' cy='150' r='15'/> <circle cx='94' cy='177' r='15'/><circle cx='126' cy='177' r='15'/> <circle cx='110' cy='204' r='15'/> <path d='M168 58c10 6 13 18 8 28-10-5-14-18-8-28Z'/> <path d='M52 62c-11 4-16 16-12 26 11-4 17-16 12-26Z'/> </g></svg>") center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
}

/* Two bands running into each other would put two bunches side by side. */
.section--blue + .section--blue-flat::before,
.section--blue-flat + .section--blue::before {
  inset-inline-end: auto;
  inset-inline-start: clamp(-3rem, 2vw, 3rem);
  scale: -1 1;
}

@media (max-width: 720px) {
  .section--blue::before, .section--blue-flat::before { width: 52vw; inset-inline-end: -12vw; opacity: 0.07; }
}

#main { flex: 1 0 auto; }

.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* -------------------------------- typography ------------------------------- */

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 0.9rem;
}

.display-1 { font-size: var(--fs-h1); }
.display-2 { font-size: var(--fs-h2); }
.display-3 { font-size: var(--fs-h3); }

.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 62ch; }
.muted { color: var(--c-muted); }
.todo { color: var(--c-muted); font-style: italic; }
.caption { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small); color: var(--c-ink-soft); }
.script { font-family: var(--font-script); font-weight: 400; line-height: 1.25; }
.small { font-family: var(--font-sans); font-size: 0.82rem; color: var(--c-muted); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  top: -5rem;
  z-index: 200;
  background: var(--c-button);
  color: var(--c-button-text);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 0.75rem; }

/* Plain text pages: the prose block. */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-h3); margin-block: 1.8rem 0.5rem; }
.prose p { color: var(--c-ink-soft); margin-block-end: 1rem; }
.prose ul { padding-inline-start: 1.2rem; color: var(--c-ink-soft); margin-block-end: 1rem; }

/* ---------------------------------- buttons -------------------------------- */

.btn {
  --btn-bg: var(--c-button);
  --btn-fg: var(--c-button-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.72rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--c-button-hover); }
.btn .btn__arrow { transition: translate var(--dur) var(--ease); }
.btn:hover .btn__arrow { translate: 3px 0; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { --btn-bg: rgba(17, 24, 39, 0.05); border-color: rgba(17, 24, 39, 0.28); }

.btn--on-dark {
  --btn-bg: rgba(12, 18, 30, 0.58);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover { --btn-bg: rgba(12, 18, 30, 0.78); border-color: rgba(255, 255, 255, 0.7); }

.btn--small { min-height: 38px; padding: 0.42rem 1.1rem; font-size: 0.94rem; }
.btn--block { width: 100%; }

/* Underline that draws itself in. */
.ulink { position: relative; text-decoration: none; padding-bottom: 2px; }
.ulink::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--dur) var(--ease);
}
.ulink:hover::after, .ulink:focus-visible::after, .ulink[aria-current='page']::after { scale: 1 1; }

/* ---------------------------------- notices -------------------------------- */

.notice {
  border: 1px solid var(--c-notice-line);
  background: var(--c-notice-bg);
  border-radius: var(--radius-panel);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: #6b551f;
}
.notice--info { border-color: rgba(125, 158, 240, 0.5); background: #f2f6ff; color: var(--c-ink-soft); }

/* -------------------------------- photography ------------------------------ */

/* A photograph is never a bare rectangle pasted onto the page: a hairline on
   its own edge pixels (an inset shadow, not a border, so no pale ring) and a
   soft shadow that lifts it a little, the way a print sits on paper. */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--c-panel);
}
.photo > img { width: 100%; height: 100%; object-fit: cover; }

.photo-frame {
  position: relative;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-slow) var(--ease);
}
.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--photo-ring);
  pointer-events: none;
  z-index: 2;
}

/* A mount for the editorial photographs: one blue-grey line held a little
   away from the picture, like a print inside a passe-partout. */
.photo-mount { position: relative; }
.photo-mount::before {
  content: '';
  position: absolute;
  inset: -0.7rem;
  border: 1px solid var(--photo-mount);
  border-radius: calc(var(--radius-img) + 4px);
  pointer-events: none;
}
@media (max-width: 560px) { .photo-mount::before { inset: -0.5rem; } }

/* ------------------------------- scroll reveal ----------------------------- */

/* Only hidden once JavaScript has announced itself (the .js class is set
   pre-paint); content never depends on a script to become visible. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
}
.js [data-reveal][data-revealed='true'] { opacity: 1; translate: 0 0; }

/* ---------------------------------- backdrop ------------------------------- */

/* The paper the site is printed on: a fixed layer behind every page with a
   wash into the house blue, drawn hills with vine rows along the foot, and
   vine branches in two corners. Drawn rather than photographed on purpose. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 82% at 50% 108%, rgba(186, 212, 246, 0.62) 0%, transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 40%, #eef5ff 100%);
}

/* The ridges are feathered into nothing at the top, or the horizon cuts a
   hard curve across whatever is on screen. */
.backdrop__land {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  width: 100%;
  height: min(72vh, 760px);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 26%, #000 62%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 26%, #000 62%);
}

.backdrop__vine { position: absolute; color: rgba(75, 111, 196, 0.3); }
.backdrop__vine--top { inset-block-start: -6vh; inset-inline-start: -10vw; width: clamp(200px, 24vw, 400px); rotate: 96deg; }
.backdrop__vine--bottom { inset-block-end: -4vh; inset-inline-end: -3vw; width: clamp(190px, 24vw, 400px); rotate: -84deg; }
.backdrop__sprig { inset-block-start: 38vh; inset-inline-end: -1vw; width: clamp(120px, 12vw, 200px); rotate: 180deg; opacity: 0.75; }

@media (max-width: 720px) {
  .backdrop__vine { opacity: 0.6; }
  .backdrop__vine--top { width: 46vw; inset-block-start: -1vh; inset-inline-start: -9vw; }
  .backdrop__vine--bottom { width: 44vw; inset-inline-end: -9vw; }
  .backdrop__sprig { display: none; }
  .backdrop__land { height: min(52vh, 420px); }
}

@media print { .backdrop { display: none; } }

/* ----------------------------------- header -------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header[data-scrolled='true'] {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--c-line-soft);
  box-shadow: 0 1px 14px rgba(17, 24, 39, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  position: relative;
}

/* Typographic wordmark with the grape mark, as in the design reference. */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.logo__mark { width: 26px; height: 30px; flex: none; color: var(--c-ink); }
.logo__text { display: grid; gap: 1px; }
.logo__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.logo__tagline {
  font-family: var(--font-sans);
  font-size: 0.57rem;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.2;
}
@media (max-width: 480px) { .logo__tagline { display: none; } }

.site-nav { display: none; }

@media (min-width: 900px) {
  .site-nav { display: block; position: absolute; left: 50%; translate: -50% 0; }
  .site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); list-style: none; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .site-nav { position: static; translate: none; margin-inline-start: auto; }
}

.site-nav__link { font-family: var(--font-serif); font-size: 1.02rem; color: var(--c-ink); white-space: nowrap; }
.site-nav__link[aria-current='page'] { font-weight: 600; }

/* The language switcher: NL · EN · HU, in the bar at every size. */
.lang-switch { margin-inline-start: auto; }
.lang-switch ul { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.lang-switch__link {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch__link:hover { color: var(--c-ink); background: rgba(17, 24, 39, 0.05); }
.lang-switch__link[aria-current='true'] { color: var(--c-ink); background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line-soft); }
.lang-switch + .nav-toggle { margin-inline-start: 0; }
@media (max-width: 480px) {
  .logo__name { white-space: nowrap; font-size: 1.1rem; }
  .logo { gap: 0.45rem; }
  .lang-switch__link { min-width: 30px; padding-inline: 0.2rem; letter-spacing: 0.05em; }
  .site-header__inner { gap: 0.4rem; }
}
@media (min-width: 900px) { .lang-switch { margin-inline-start: 0; } }

/* The menu button on a phone. */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-inline-start: auto;
  border-radius: var(--radius-pill);
  color: var(--c-ink);
  transition: background-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: rgba(17, 24, 39, 0.05); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:first-child { translate: 0 3.2px; rotate: 45deg; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:last-child { translate: 0 -3.3px; rotate: -45deg; }

/* The panel hangs under the bar and is only as tall as its contents. The page
   keeps its place behind it: a disclosure, not a dialog. Without JavaScript it
   simply sits in the flow under the header, open. It lives outside <header>
   because the header's backdrop-filter would trap a fixed child. */
.nav-panel {
  background: #fff;
  border-block-end: 1px solid var(--c-line-soft);
}
.js .nav-panel {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: 95;
  max-height: calc(100dvh - var(--header-h) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 18px 38px -26px rgba(17, 24, 39, 0.55);
}
.js .nav-panel:not([data-open='true']) { display: none; }
@media (min-width: 900px) { .nav-panel { display: none !important; } }

/* It unfolds downwards rather than appearing. */
.nav-panel[data-open='true'] { animation: unfold 300ms cubic-bezier(0.22, 0.7, 0.3, 1) both; }
@keyframes unfold {
  from { clip-path: inset(0 0 100% 0); opacity: 0.4; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.nav-panel__inner { padding-block: 0.4rem 1rem; }
.nav-panel ul { list-style: none; }
.nav-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.92rem;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav-panel li + li .nav-panel__link { border-block-start: 1px solid var(--c-line-soft); }
.nav-panel__link[aria-current='page'] { color: var(--c-accent-deep); }
.nav-panel__chevron {
  width: 7px; height: 11px;
  flex: none;
  color: var(--c-muted);
  transition: translate var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-panel__link:hover .nav-panel__chevron, .nav-panel__link[aria-current='page'] .nav-panel__chevron { color: var(--c-accent-deep); translate: 2px 0; }

/* Each row follows the one above it, a beat apart, as the panel opens. */
.nav-panel[data-open='true'] li {
  animation: row-in 340ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
  animation-delay: calc(70ms + var(--step, 0) * 42ms);
}
@keyframes row-in {
  from { opacity: 0; translate: 0 -7px; }
  to { opacity: 1; translate: 0 0; }
}

/* ----------------------------------- footer -------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: rgba(220, 235, 255, 0.82);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid rgba(125, 158, 240, 0.35);
}
.site-footer__ornament {
  position: absolute;
  inset-block-end: -40px;
  inset-inline-end: -30px;
  width: 210px;
  color: rgba(75, 111, 196, 0.22);
  pointer-events: none;
}
.site-footer__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); position: relative; }

@media (min-width: 860px) {
  .site-footer__inner { grid-template-columns: 1fr auto 1fr; align-items: start; }
  .site-footer__middle { border-inline: 1px solid rgba(75, 111, 196, 0.28); padding-inline: clamp(2rem, 4vw, 3.5rem); }
}

.site-footer__column { display: grid; gap: 1rem; align-content: start; }
.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.site-footer__socials { display: flex; gap: 0.65rem; list-style: none; }
.site-footer__social {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  color: var(--c-ink);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-footer__social svg { width: 26px; height: 26px; }
.site-footer__social:hover { color: var(--c-accent-deep); background: rgba(255, 255, 255, 0.6); }
.site-footer__pending { font-family: var(--font-sans); font-size: 0.85rem; color: var(--c-ink-soft); max-width: 26rem; }

.site-footer__list { list-style: none; display: grid; gap: 0.1rem; font-family: var(--font-sans); font-size: 0.9rem; }
/* 23px links are under the 24px target WCAG 2.2 asks for; the padding takes
   each one over it without opening the list up. */
.site-footer__list a { display: inline-flex; align-items: center; min-height: 28px; padding-block: 0.15rem; }
.site-footer__address { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.55; color: var(--c-ink-soft); }
.site-footer__copyright { font-family: var(--font-sans); font-size: 0.82rem; color: var(--c-ink-soft); }
.site-footer__copyright span + span::before { content: ' · '; }

.site-footer__middle { display: grid; justify-items: center; gap: 0.9rem; text-align: center; }
.site-footer__mark { width: 30px; height: 34px; color: var(--c-ink); }
.site-footer__motto { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); color: var(--c-ink); max-width: 14ch; }

/* ------------------------------------ hero --------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(26rem, 62vh, 34rem);
  overflow: hidden;
  background: #16261c;
}
@media (min-width: 900px) { .hero { min-height: min(74vh, 44rem); } }

.hero__backdrop { position: absolute; inset: -8% 0 -8%; z-index: -2; will-change: translate; }
.hero__media { width: 100%; height: 100%; border-radius: 0; background: #16261c; }
.hero__media > img { object-position: center 52%; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 60% at 50% 46%, rgba(var(--c-scrim), 0.46) 0%, rgba(var(--c-scrim), 0) 100%),
    linear-gradient(180deg, rgba(var(--c-scrim), 0.2) 0%, rgba(var(--c-scrim), 0.34) 45%, rgba(var(--c-scrim), 0.46) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding-block: clamp(3rem, 8vw, 5rem);
  color: #fff;
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 2px 26px rgba(8, 14, 24, 0.42);
  animation: rise-in 700ms var(--ease) both;
}
.hero__subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 0.9rem + 0.75vw, 1.45rem);
  max-width: 46ch;
  text-shadow: 0 1px 16px rgba(8, 14, 24, 0.45);
  animation: rise-in 700ms var(--ease) 130ms both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-block-start: clamp(1.2rem, 2.6vw, 1.9rem);
  animation: rise-in 700ms var(--ease) 260ms both;
}
.hero__cta { min-width: 13.5rem; }

.hero__motto {
  position: absolute;
  inset-inline-end: clamp(1.25rem, 4vw, 3.4rem);
  inset-block-end: clamp(1.4rem, 4vw, 3rem);
  max-width: 9ch;
  color: #fff;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.05rem);
  text-align: center;
  rotate: -6deg;
  text-shadow: 0 2px 18px rgba(8, 14, 24, 0.5);
  animation: rise-in 700ms var(--ease) 420ms both;
}
@media (max-width: 899px) {
  .hero__motto { position: static; margin: 1.6rem auto 0; max-width: 14ch; rotate: -3deg; }
  .hero__inner { padding-block-end: 2rem; }
}

@keyframes rise-in {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

/* ------------------------------- about section ----------------------------- */

.about { position: relative; overflow: hidden; }
.about__ornament {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-end: -66px;
  width: 210px;
  color: rgba(75, 111, 196, 0.24);
  pointer-events: none;
  display: none;
}
@media (min-width: 1280px) { .about__ornament { display: block; } }

.about__inner { display: grid; gap: clamp(2rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 900px) { .about__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.12fr); } }
@media (min-width: 1280px) { .about__inner { padding-inline-end: 4rem; } }

.about__copy { display: grid; justify-items: start; }
.about__copy h2 { margin-block-end: 1.15rem; }
.about__body { color: var(--c-ink-soft); max-width: 44ch; }
.about__cta { margin-block-start: 1.7rem; }

.about__figures { display: grid; grid-template-columns: 180fr 234fr; gap: clamp(0.8rem, 1.6vw, 1.15rem); align-items: start; }
.about__figure { display: grid; gap: 0.7rem; }
.about__caption { text-align: center; font-size: 0.92rem; }
@media (max-width: 520px) { .about__figures { grid-template-columns: 1fr; } }

/* ------------------------------- wines section ----------------------------- */

.wines { overflow: hidden; }
.wines__head { display: grid; justify-items: center; text-align: center; gap: 0.2rem; margin-block-end: clamp(2rem, 3.5vw, 3rem); }
.wines__intro { max-width: 62ch; margin-block-start: 0.7rem; }

.wines__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; list-style: none; }
@media (min-width: 700px) { .wines__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wines__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.wines__panel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--c-panel);
  border-radius: var(--radius-img);
  grid-column: span 2;
}
@media (min-width: 700px) { .wines__panel { grid-column: span 3; } }
@media (min-width: 1100px) { .wines__panel { grid-column: span 1; align-self: stretch; } }

.wines__bottles { width: 62px; color: var(--c-ink); }
.wines__panel-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; max-width: 9ch; }
.wines__footer { display: grid; justify-items: center; margin-block-start: clamp(2rem, 3.5vw, 3rem); }

/* A wine: the bottle, the name, the price. */
.wine-card { min-width: 0; }
.wine-card__link { display: grid; gap: 0.75rem; text-decoration: none; color: inherit; }
.wine-card__frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius-img); background: #fff; }
.wine-card__media { border-radius: 0; transition: scale var(--dur-slow) var(--ease); }
.wine-card__link:hover .wine-card__media, .wine-card__link:focus-visible .wine-card__media { scale: 1.03; }
.wine-card__link:hover .wine-card__frame, .wine-card__link:focus-visible .wine-card__frame { box-shadow: var(--shadow-photo-lift); }
.wine-card__meta { display: grid; gap: 0.15rem; }
.wine-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; transition: color var(--dur) var(--ease); }
.wine-card__link:hover .wine-card__name { color: var(--c-accent-deep); }
.wine-card__price { font-family: var(--font-serif); font-size: 1rem; color: var(--c-ink-soft); }
.wine-card__facts { font-family: var(--font-sans); font-size: 0.82rem; color: var(--c-muted); }

/* ------------------------------ tasting section ---------------------------- */

.tasting { overflow: hidden; }
.tasting__inner { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 900px) { .tasting__inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.2fr) minmax(0, 0.72fr); } }

.tasting__figure { min-width: 0; padding: 0.7rem; }
.tasting__copy { display: grid; justify-items: start; }
.tasting__copy h2 { margin-block-end: 1.05rem; }
.tasting__body { color: var(--c-ink-soft); max-width: 46ch; }
.tasting__cta { margin-block-start: 1.6rem; }

.tasting__quote-wrap { position: relative; display: grid; place-items: center; min-height: 15rem; }
.tasting__quote {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 1;
  width: min(17rem, 78vw);
  padding: 2rem 1.9rem;
  border: 1px solid rgba(75, 111, 196, 0.35);
  border-radius: 50%;
}
.tasting__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem);
  line-height: 1.45;
  color: var(--c-ink);
  max-width: 17ch;
}
.tasting__sprig { position: absolute; inset-block-end: -6px; inset-inline-end: 4%; width: 118px; color: rgba(75, 111, 196, 0.3); pointer-events: none; }
@media (max-width: 899px) { .tasting__sprig { display: none; } }

/* ------------------------------ gallery section ---------------------------- */

.gallery-section { background: var(--c-bg-blue); }
.gallery-section__head { display: grid; gap: 1.1rem; justify-items: center; text-align: center; margin-block-end: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 900px) {
  .gallery-section__head { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .gallery-section__heading { grid-column: 2; }
  .gallery-section__cta { grid-column: 3; justify-self: end; }
}
.gallery-section__heading .label { margin-block-end: 0.55rem; }

/* The photographs: a scrolling strip on the homepage, a grid on /galerij. */
.gallery { list-style: none; margin: 0; }
.gallery--strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(58vw, 1fr);
  gap: clamp(0.65rem, 1.4vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 0.6rem;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.gallery--strip .gallery__item { scroll-snap-align: start; }
@media (min-width: 640px) { .gallery--strip { grid-auto-columns: minmax(31%, 1fr); } }
@media (min-width: 1100px) { .gallery--strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; } }

.gallery--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: clamp(0.75rem, 1.6vw, 1.2rem); }

.gallery__item { min-width: 0; }
.gallery__link { display: block; width: 100%; overflow: hidden; border-radius: var(--radius-img); background: var(--c-panel); position: relative; }
.gallery__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease), filter var(--dur) var(--ease);
}
.gallery__link:hover .gallery__image, .gallery__link:focus-visible .gallery__image { scale: 1.045; filter: brightness(0.92); }
.gallery__link:hover, .gallery__link:focus-visible { box-shadow: var(--shadow-photo-lift); }

/* The film is one tile of the grid: far right, two photo rows tall, so it sits
   in the composition instead of above it. The video is positioned inside its
   tile so its own proportions never stretch the rows; it crops a little to fill. */
.gallery__item--video { position: relative; min-height: 22rem; }
.gallery__video-frame { position: absolute; inset: 0; overflow: hidden; background: #0b1220; }
.gallery__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__item--empty .gallery__video-frame {
  display: grid; place-items: center; padding: 1rem; text-align: center;
  background: var(--c-panel); border: 1px dashed var(--c-muted); color: var(--c-muted); font-style: italic;
}
/* One column (phone): the film comes first, as a tall tile. */
.gallery--grid .gallery__item--video { order: -1; aspect-ratio: 4 / 5; min-height: 0; }
@media (min-width: 640px) {
  .gallery--grid .gallery__item--video { order: 0; aspect-ratio: auto; min-height: 22rem; grid-column: -2 / -1; grid-row: 1 / span 2; }
}

/* The last tile of the grid: the motto in the hand-written script, on the light
   blue of the page bands. It closes the final row of three on a wide screen and
   is left out where the grid has fewer columns. */
.gallery__item--motto { display: none; }
@media (min-width: 900px) {
  .gallery--grid .gallery__item--motto {
    display: grid; place-content: center; justify-items: center; gap: 0.9rem;
    aspect-ratio: 5 / 4; padding: 1.5rem; text-align: center;
    border-radius: var(--radius-img); background: var(--c-panel);
    box-shadow: inset 0 0 0 1px var(--c-line-soft);
  }
}
.gallery__motto-mark { width: 30px; height: 35px; color: var(--c-accent-deep); opacity: 0.7; }
.gallery__motto { font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--c-ink-soft); max-width: 14ch; margin: 0; }

/* The lightbox is a native <dialog>, built by lightbox.js. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 13, 22, 0.93); }
.lightbox[open] { display: grid; place-items: center; animation: fade 200ms var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
html:has(.lightbox[open]) { overflow: hidden; }

.lightbox__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.6rem, 2vw, 1.2rem) clamp(0.8rem, 3vw, 1.8rem);
  color: rgba(255, 255, 255, 0.85);
}
.lightbox__counter { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.06em; }
.lightbox__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color var(--dur) var(--ease);
}
.lightbox__icon svg { width: 22px; height: 22px; }
.lightbox__icon:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__prev, .lightbox__next { position: absolute; inset-block-start: 50%; translate: 0 -50%; }
.lightbox__prev { inset-inline-start: clamp(0.5rem, 2vw, 1.6rem); }
.lightbox__next { inset-inline-end: clamp(0.5rem, 2vw, 1.6rem); }

.lightbox__figure { display: grid; gap: 0.9rem; justify-items: center; max-width: min(72rem, 94vw); }
.lightbox__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(74vh, 46rem);
  object-fit: contain;
  border-radius: var(--radius-img);
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.85);
}
.lightbox__caption { font-family: var(--font-serif); font-style: italic; font-size: 0.98rem; color: rgba(255, 255, 255, 0.82); text-align: center; max-width: 56ch; }
.lightbox__caption:empty { display: none; }

/* ------------------------------ location section --------------------------- */

.location__inner { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .location__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
  .location__maps { grid-column: 1 / -1; }
}

.location__copy { display: grid; justify-items: start; }
.location__copy h2 { margin-block-end: 1rem; }
.location__body { color: var(--c-ink-soft); max-width: 40ch; }

.location__address { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; margin-block-start: 1.6rem; }
.location__pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--c-panel); color: var(--c-ink); }
.location__pin svg { width: 15px; height: 19px; }
.location__address-title { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.location__address-line { display: block; color: var(--c-ink-soft); font-size: 0.95rem; }
.location__cta { margin-block-start: 1.7rem; }

/* Contact details with an icon in front: used on the homepage and /contact. */
.details { list-style: none; display: grid; gap: 1.05rem; }
.details li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; font-size: 0.98rem; }
.details svg { width: 24px; height: 24px; color: var(--c-ink); margin-block-start: 1px; }
.details address { line-height: 1.5; color: var(--c-ink-soft); }

.location__maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.6rem); }
@media (max-width: 560px) { .location__maps { grid-template-columns: 1fr; } }

/* A map card: framed like the photographs, with the address and a link that
   opens the place in Google Maps. No embedded map (no third-party frames,
   and nothing of the visitor goes to Google before they click). */
.map-card { display: grid; gap: 0.6rem; align-content: start; margin: 0; min-width: 0; }
.map-card__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-img);
  background:
    repeating-linear-gradient(90deg, rgba(75, 111, 196, 0.1) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(75, 111, 196, 0.1) 0 1px, transparent 1px 38px),
    linear-gradient(160deg, #eef4ff 0%, #e3ebf9 100%);
  text-decoration: none;
  color: inherit;
}
.map-card__frame:hover { box-shadow: var(--shadow-photo-lift); }
@media (max-width: 560px) { .map-card__frame { aspect-ratio: 4 / 3; } }

.map-card__roads { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(75, 111, 196, 0.35); pointer-events: none; }
.map-card__place { position: relative; display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 1rem; }
.map-card__pin { width: 26px; height: 32px; color: var(--c-accent-deep); filter: drop-shadow(0 4px 6px rgba(17, 24, 39, 0.25)); }
.map-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.map-card__line { font-family: var(--font-sans); font-size: 0.85rem; color: var(--c-ink-soft); }

/* Sits on the map, top-left, where the winery's own site puts it. */
.map-card__open {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-start: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1), 0 6px 18px -8px rgba(17, 24, 39, 0.45);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  transition: background-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.map-card__frame:hover .map-card__open { background: #fff; translate: 0 -1px; }
.map-card__external { width: 13px; height: 13px; color: var(--c-accent-deep); }
.map-card__title { font-family: var(--font-serif); font-size: 0.95rem; color: var(--c-ink-soft); }

/* --------------------------------- page header ----------------------------- */

.page-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-bg-blue-soft) 0%, transparent 100%);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.8rem, 3vw, 2.6rem);
}
.page-header__ornament { position: absolute; inset-block-start: -40px; inset-inline-end: -60px; width: 200px; color: rgba(75, 111, 196, 0.2); pointer-events: none; }
.page-header__inner { display: grid; gap: 0.85rem; justify-items: start; position: relative; }
.page-header__inner .label { margin: 0; }

/* --------------------------------- about page ------------------------------ */

.about-page__wide { margin-block-end: clamp(2rem, 4vw, 3.2rem); }

.story { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; margin-block-end: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .story--reverse .story__block { order: 2; }
}
.story__block { display: grid; gap: 0.9rem; align-content: start; }
.story__block p { color: var(--c-ink-soft); max-width: 54ch; }
.story__heritage { font-family: var(--font-serif); font-style: italic; color: var(--c-ink) !important; }
.story__figure { min-width: 0; padding: 0.7rem; }
.story__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1.4vw, 1rem); }

.about-page__pending { max-width: 54rem; margin-block-end: clamp(2rem, 4vw, 3rem); }

.awards { list-style: none; display: grid; gap: 1.1rem; margin-block: 0.4rem; }
.awards li { padding-inline-start: 1rem; border-inline-start: 2px solid rgba(75, 111, 196, 0.45); }
.awards__result { font-family: var(--font-serif); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--c-ink) !important; }
.awards__where { font-size: 0.95rem; }
.awards__note { font-family: var(--font-sans); font-size: 0.8rem; color: var(--c-muted) !important; margin-block-start: 0.35rem; }

/* --------------------------------- wines page ------------------------------ */

.wine-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2.4vw, 2rem); }
@media (min-width: 640px) { .wine-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wine-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.wines-page__house { max-width: 62ch; color: var(--c-ink-soft); margin-block-end: clamp(1.6rem, 3vw, 2.4rem); padding-block-end: 1.4rem; border-bottom: 1px solid var(--c-line-soft); }
.wines-page__note { margin-block-start: clamp(1.6rem, 3vw, 2.4rem); font-family: var(--font-sans); font-size: 0.86rem; color: var(--c-muted); max-width: 60ch; }

/* How to order: a panel in the band under the list. */
.order { display: grid; gap: clamp(1.6rem, 3.2vw, 2.8rem); align-items: center; }
@media (min-width: 900px) { .order { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.order__copy { display: grid; gap: 0.9rem; justify-items: start; }
.order__copy p { color: var(--c-ink-soft); max-width: 50ch; }
.order__actions { margin-block-start: 0.6rem; }
.order__figure { min-width: 0; padding: 0.7rem; }

/* -------------------------------- tastings page ---------------------------- */

.tastings__hero { margin-block-end: clamp(2rem, 4vw, 3rem); }
.tastings__columns { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .tastings__columns { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.9fr); } }

.experiences { list-style: none; display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); margin-block-start: 1.4rem; }
.experience { padding-block-end: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--c-line-soft); }
.experience:last-child { border-bottom: 0; padding-block-end: 0; }
.experience__summary { margin-block-start: 0.6rem; color: var(--c-ink-soft); max-width: 56ch; }
.facts { display: grid; gap: 0.5rem; margin-block-start: 1.1rem; }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 1rem; font-size: 0.98rem; }
.facts dt { color: var(--c-muted); }
.facts dd { margin: 0; }
.facts__alt { display: block; }
.facts__note { display: block; font-family: var(--font-sans); font-size: 0.82rem; color: var(--c-muted); margin-block-start: 0.25rem; max-width: 34ch; }

.tastings__side { display: grid; gap: 1.1rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 899px) { .tastings__side { position: static; } }

.gastronomy { display: grid; gap: clamp(1.6rem, 3.2vw, 2.8rem); align-items: center; }
@media (min-width: 900px) { .gastronomy { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.7fr); } }
.gastronomy__figure, .gastronomy__copy { min-width: 0; }
.gastronomy__copy h2 { margin-block-end: 0.9rem; }
.gastronomy__copy > p { color: var(--c-ink-soft); max-width: 56ch; }
.gastronomy__food { list-style: none; display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.gastronomy__food li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.98rem; padding-block: 0.4rem; border-bottom: 1px solid var(--c-line-soft); }
.gastronomy__food li:last-child { border-bottom: 0; }
.gastronomy__price { color: var(--c-muted); font-size: 0.9rem; white-space: nowrap; }

/* --------------------------------- contact page ---------------------------- */

.contact__layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) {
  .contact__layout { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.9fr); }
  .contact__maps { grid-column: 1 / -1; }
}
.contact__main { display: grid; gap: 1.2rem; justify-items: start; }
.contact__main h2 { margin-block-end: 0.2rem; }
.contact__main > p { color: var(--c-ink-soft); max-width: 56ch; }
.contact__side { display: grid; gap: 0.9rem; align-content: start; }
.contact__visit { font-size: 1rem; color: var(--c-ink-soft); }
.contact__maps { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-block-start: 0.6rem; }
@media (min-width: 560px) { .contact__maps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------- legal pages ---------------------------- */

.legal__company {
  display: grid;
  gap: 0.4rem;
  margin-block-start: 2.2rem;
  padding-block-start: 1.4rem;
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.legal__company > div { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: 1rem; }
.legal__company dt { color: var(--c-muted); }
.legal__company dd { margin: 0; }

/* -------------------------------- reduced motion --------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; translate: 0 0; }
  .nav-panel[data-open='true'], .nav-panel[data-open='true'] li, .hero__title, .hero__subtitle, .hero__actions, .hero__motto { animation: none; }
}