/* ==========================================================================
   BJELICA — Vinogradi & Vinarija
   Theme: warm ivory light, château-style. Full-bleed photo hero,
   deep charcoal type, aged gold + bordeaux accents.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* color — monochrome: white ground, black ink */
  --paper: #ffffff;
  --paper-2: #f6f6f6;
  --card: #ffffff;
  --char: #111111;
  --char-2: #0a0a0a;
  --text: #222222;
  --muted: #6a6a6a;
  --gold: #111111;
  --gold-soft: rgba(255, 255, 255, 0.85);
  --gold-dim: rgba(17, 17, 17, 0.3);
  --bordeaux: #333333;
  --hairline: rgba(17, 17, 17, 0.15);
  --hairline-soft: rgba(17, 17, 17, 0.08);
  --ivory: #ffffff;
  --shadow-soft: 0 20px 45px -25px rgba(0, 0, 0, 0.35);

  /* type */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "EB Garamond", Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --text-2xl: clamp(2.25rem, 1.7rem + 2.8vw, 4rem);
  --text-hero: clamp(3rem, 1.9rem + 6.5vw, 7.5rem);

  /* space */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6rem;
  --sp-8: clamp(5rem, 4rem + 6vw, 9rem);

  /* layout */
  --container: 72rem;
  --container-wide: 84rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;

  /* z */
  --z-nav: 100;
  --z-menu: 200;
}

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

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

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Required, not cosmetic, now that every image carries width/height attributes.
   Those attributes apply as presentational hints, so `height="985"` becomes
   `height: 985px`. Where a component sets only a width and lets `aspect-ratio`
   derive the rest — the Sorte coverflow, .gallery, .photo — both dimensions
   then become definite, `aspect-ratio` is ignored, and the image is stretched
   to its full intrinsic height. That is exactly what distorted the grape
   coverflow. `height: auto` hands the ratio back to CSS.

   Every component that genuinely wants a fixed height (.hero__media img,
   .photo img, .wine-card__media img, .nav__brand-mark) sets it in a
   class-scoped rule, which outranks this one. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--bordeaux);
  color: var(--ivory);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.container--wide {
  max-width: var(--container-wide);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-2);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--char);
  color: var(--ivory);
  font-weight: 600;
  border-radius: 3px;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--sp-2);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--gold-dim);
}

.eyebrow--center::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--gold-dim);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--char);
  text-wrap: balance;
}

.h-display em {
  font-style: italic;
  color: var(--gold);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--char);
  text-wrap: pretty;
}

.text-body {
  color: var(--muted);
  max-width: 42rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.85rem 2.1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--char);
  color: var(--char);
  border-radius: 2px;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.btn:hover {
  background: var(--char);
  color: var(--ivory);
}

.btn--solid {
  background: var(--char);
  color: var(--ivory);
}

.btn--solid:hover {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
}

.btn--light {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn--light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--char);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--hairline-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* The bar runs full-bleed rather than being capped at 84rem like page content.
   The cap put 40px of centring margin outside the gutter, so the logo could
   never get closer than ~60px to the viewport edge however much the gutter was
   trimmed. Full width plus the brand's negative margin lands it at --brand-edge.
   The menu stays centred either way: it is centred inside this element, and this
   element is now the viewport. */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: none;
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
  transition: padding var(--dur-base) var(--ease-out);
}

/* ---------- Brand lockup ----------------------------------------------------
   This is the client's actual logo, not a reconstruction. An earlier attempt
   rebuilt it in Jost and the client rightly rejected it: a substitute typeface
   cannot match their letterforms (the J is visibly different) and the tagline
   had been dropped.

   Provenance, so nobody re-derives this: the client's header <img> on the live
   site is `1pxwhitelogo.jpg`, a literal 1x1 spacer, so their site shows no
   top-left logo at all. Their media library holds `whitelogo.png` — the correct
   stacked lockup, but only 95x87 — and `bjelica-logo.png`, a *horizontal*
   variant with no tagline. The lockup only exists baked into their page
   background images, of which there are six.

   `logo-lockup.png` is cut from `sajtbg2.jpg` (2021/04) at (663,401), 274x251.
   That is NOT the background the live site uses — the live one is `sajtbgnov.jpg`,
   where the same lockup is only 206x189. sajtbg2 was chosen because it carries
   the identical variant at 1.33x the resolution on a much cleaner ground: its
   surrounding luma medians 3/255 against sajtbgnov's 9, so the key picks up far
   less JPEG ringing, which is what made the old cut look choppy when magnified.

   Variant matters and was checked, not assumed. `sajtbg.jpg` holds the lockup
   bigger still (406x398) but it is an OLDER rendering — its tagline is 64% of
   BJELICA's width where the live one is 89%, and its BJELICA tracking differs.
   Using it would have made the logo subtly wrong. sajtbg2 matches the live
   proportions to within a percent (tagline/BJELICA 0.890 vs 0.893, gap ratios
   identical), which is why it is the one cut from.

   Keyed by luminance with a 0.060 floor and everything under 5% coverage zeroed
   to kill the JPEG halo, written as black ink, so the existing
   invert-for-dark-photo mechanism works on it unchanged.

   It is black ink on transparency for the same reason logo-mark.png is: the nav
   is white when scrolled and the overlay rule inverts it to white over a photo.
   Never ship a white version — invert handles both states from one file.

   Size is one number: --brand-h. The file is 274px wide, so at the current
   104px height it renders 113px wide — about 2.4x on retina, comfortably inside
   a clean 2x with headroom to grow. The earlier 206px cut was only 1.8x, which
   is what made it look choppy when magnified.

   The tagline is a fixed 13/189 of the lockup height, so it only gets more
   legible by scaling the whole thing; there is now room to do that up to about
   --brand-h: 126px before dropping under 2x again. */
/* Pulled out of the container gutter so the logo sits close to the viewport
   corner the way the client asked, instead of being inset by the full gutter
   (which reaches 3rem on desktop). The calc lands it at a constant --brand-edge
   from the edge at every width, since --gutter itself is fluid. It is a negative
   margin, not a padding change, so the brand's grid column keeps its width and
   the centred menu does not move. */
.nav__brand {
  --brand-edge: 1.25rem;
  display: inline-flex;
  align-items: center;
  margin-left: calc(var(--brand-edge) - var(--gutter));
  color: var(--char);
  transition: color var(--dur-base) var(--ease-out);
}

/* max-width: none overrides the global `img { max-width: 100% }`. Without it the
   logo is clamped to the width of its `1fr` grid column — which is narrower than
   the lockup at most viewports — and silently renders squashed to a square. */
.nav__brand-mark {
  height: var(--brand-h, 104px);
  width: auto;
  max-width: none;
  transition: filter var(--dur-base) var(--ease-out);
}

/* ---------- Brandless bar, homepages only -----------------------------------
   index.html and en/index.html drop the corner lockup, because those two pages
   already carry it full size in the hero and the client did not want it twice.
   The other 20 pages keep it — they have no hero lockup, so it is their only
   brand mark. (Worth knowing: the client's own live site has no top-left logo
   on any page; its header <img> is a 1x1 spacer.)

   Two consequences, both handled here rather than by touching the base rules:
   the bar loses the 104px that the lockup gave it, so it needs its own height
   or it collapses to menu-text height and reads as a strip; and below 1100px
   `.nav__inner` is a space-between flex row whose only remaining child is the
   hamburger, which would swing to the left edge without the flex-end.

   The desktop `1fr auto 1fr` grid needs nothing: column 1 simply sits empty and
   the menu stays centred in column 2 — in fact it centres more accurately than
   with the brand, which outgrew its 1fr below 1200px and pushed the menu right. */
.nav--nobrand .nav__inner {
  min-height: 4.5rem;
  justify-content: flex-end;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.9rem);
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Icon-only search button in the nav */
.nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text);
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__search:hover {
  color: var(--char);
}

.nav__search svg {
  width: 17px;
  height: 17px;
}

.nav--overlay:not(.is-scrolled) .nav__search {
  color: #fff;
}

/* the hover/current underline is --gold (black) by default, which vanishes
   against a dark hero or head — flip it with the rest of the overlay type */
.nav--overlay:not(.is-scrolled) .nav__link::after {
  background: #fff;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.25rem;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--char);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  right: 0;
}

/* Boxed Kontakt item, like the original site */
.nav__link--box {
  border: 1px solid var(--char);
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.nav__link--box::after {
  display: none;
}

.nav__link--box:hover {
  background: var(--char);
  color: var(--ivory);
}

.nav__link--lang {
  color: var(--gold);
}

.nav__chev {
  width: 10px;
  height: 10px;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Dropdown (Vina) */
.drop {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 13rem;
  padding: 0.6rem 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}

.nav__item.is-open .drop,
.nav__item:hover .drop,
.nav__item:focus-within .drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.nav__item.is-open .nav__chev,
.nav__item:hover .nav__chev {
  transform: rotate(180deg);
}

.drop a {
  display: block;
  padding: 0.55rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* Language dropdown. It reuses .nav__item / .drop wholesale, so it inherits the
   open/close behaviour and the overlay-nav colours for free; only two things
   differ. It sits at the right end of the bar, so the panel is pinned to its
   right edge instead of centred - centring would push it off-screen at the
   1100px breakpoint. And three language names need nothing like the 13rem the
   wine list wants. */
.drop--lang {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
  min-width: 9rem;
}

.nav__item--lang.is-open .drop--lang,
.nav__item--lang:hover .drop--lang,
.nav__item--lang:focus-within .drop--lang {
  transform: translate(0, 0);
}

/* the current language is already named on the button */
.drop--lang a[aria-current="page"] {
  color: var(--muted);
}

.drop a:hover {
  color: var(--char);
  background: var(--paper-2);
}

/* Transparent-over-hero variant (homepage) */
.nav--overlay:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav--overlay:not(.is-scrolled) .nav__brand,
.nav--overlay:not(.is-scrolled) .nav__link {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.nav--overlay:not(.is-scrolled) .nav__brand-mark {
  filter: invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
}

.nav--overlay:not(.is-scrolled) .nav__link--box {
  border-color: rgba(255, 255, 255, 0.85);
}

.nav--overlay:not(.is-scrolled) .nav__link--box:hover {
  background: #fff;
  color: var(--char);
  text-shadow: none;
}

.nav--overlay:not(.is-scrolled) .nav__toggle-box span {
  background: #fff;
}

/* Hamburger */
.nav__toggle {
  display: none;
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.nav__toggle-box {
  position: relative;
  width: 26px;
  height: 14px;
}

.nav__toggle-box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--char);
  transition:
    transform var(--dur-base) var(--ease-out),
    top var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.nav__toggle-box span:nth-child(1) { top: 0; }
.nav__toggle-box span:nth-child(2) { top: 100%; }

.nav__toggle[aria-expanded="true"] .nav__toggle-box span {
  background: var(--char);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-box span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-box span:nth-child(2) {
  top: 50%;
  transform: rotate(-45deg);
}

/* Mobile menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out);
}

.menu__link {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--char);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  transition-delay: calc(50ms * var(--i, 0));
}

.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
}

.menu__link:hover {
  color: var(--gold);
}

.menu__sub {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--hairline);
  margin: 0.25rem 0 0.5rem;
}

.menu__sub .menu__link {
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  padding: 0.35rem 0;
  color: var(--text);
}

.menu__meta {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 350ms;
}

.menu.is-open .menu__meta {
  opacity: 1;
}

/* ==========================================================================
   Hero — full-bleed photo (Margaux style)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: var(--sp-7) var(--gutter) clamp(6rem, 14vh, 9rem);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* neutral fallback shown only if the hero photo fails to load */
  background: linear-gradient(180deg, #e8e8e8 0%, #d0d0d0 45%, #7a7a7a 80%, #222222 100%);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: hero-settle 4s var(--ease-out) both;
}

@keyframes hero-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

/* scrims: top for nav legibility, bottom for the title */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.42) 0%, transparent 26%),
    linear-gradient(0deg, rgba(10, 8, 6, 0.55) 0%, transparent 45%);
}

.hero__content {
  max-width: 60rem;
}

.hero__eyebrow {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--sp-3);
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  background: rgba(255, 255, 255, 0.5);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

/* Pećina Stroga's hero title is the venue's own wordmark instead of set type.
   The PNG is already white ink on transparency, so it needs no inversion over
   the night photo; the drop-shadow just carries over what text-shadow did.
   Its two-line lockup replaces the wrap the typeset version relied on. */
.hero__title--logo {
  display: flex;
  justify-content: center;
  text-indent: 0;
}

.hero__title--logo img {
  width: min(100%, 44rem);
  height: auto;
  filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.35));
}

/* The homepage hero carries the client's own stacked lockup instead of set type,
   so BJELICA and the tagline both come from the logo file and the separate
   .hero__tagline line is gone. It is `logo-lockup.svg`, not the .png the nav
   uses: at this size the 274px raster stair-steps, and the vector is the only
   way the lockup stays clean on a 2x display. Black ink like every other
   wordmark here, so it needs invert(1) over the photo — see the note on
   .page-head__title--logo.

   Sized off the viewport's *height* as well as its width, because unlike the
   Pećina Stroga wordmark this lockup is nearly square, and the hero is
   bottom-anchored: every pixel of height it gains pushes the eyebrow further
   up the photo. 1.0916 is the lockup's 274/251 aspect, turning the height
   budget back into a width.

   The budget subtracts 26rem, not the ~21rem the nav + bottom padding actually
   need, and the extra 5rem is deliberate: `hero.jpg` turns to bright sky above
   roughly 250px down, and white eyebrow text over that measures 1.3:1. Holding
   the lockup to this height keeps "Fruška gora · Banstol" on the dark roofline
   at ~3.6:1 instead. Scrimming it out is not an alternative — the sky is bright
   enough that it would take a 66% black wash to reach 3:1. If the lockup is
   ever wanted larger than this, the eyebrow has to move or go. */
.hero__title--lockup img {
  width: min(52vw, 29rem, calc((100dvh - 26rem) * 0.7164));
  /* NO invert here, unlike every other wordmark on the site: logo-lockup-silver.svg
     already carries the client's own metallic tone, light-on-dark. Inverting it
     would turn the silver into mud.
     Two shadows, not one: the tight one gives the ink a defined edge against a
     busy photo, the wide one lifts it off the background. A single 30px shadow
     on its own read as soft. */
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))
    drop-shadow(0 3px 26px rgba(0, 0, 0, 0.4));
}

.hero__tagline {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}

/* staged entrance */
.hero [data-stage] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1100ms var(--ease-out),
    transform 1100ms var(--ease-out);
}

body.is-loaded .hero [data-stage] {
  opacity: 1;
  transform: none;
}

body.is-loaded .hero [data-stage="2"] { transition-delay: 200ms; }
body.is-loaded .hero [data-stage="3"] { transition-delay: 400ms; }

/* scroll-down cue */
.hero__scroll {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 1300ms;
}

body.is-loaded .hero__scroll {
  opacity: 1;
}

.hero__scroll:hover {
  color: #fff;
}

.hero__scroll-line {
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  position: relative;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: scroll-drip 2.4s var(--ease-out) infinite;
}

@keyframes scroll-drip {
  0% { top: -100%; }
  55%, 100% { top: 100%; }
}

/* ==========================================================================
   Page head (subpages)
   ========================================================================== */
.page-head {
  padding: calc(5.5rem + var(--sp-6)) var(--gutter) var(--sp-6);
  text-align: center;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--hairline-soft);
}

.page-head .eyebrow {
  margin-bottom: var(--sp-3);
}

.page-head__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.05;
  color: var(--char);
}

.page-head__sub {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--muted);
}

/* Wine-page titles replaced by the label wordmark logos. The PNGs are 2x
   (retina); the width/height attributes in the HTML hold the 1x display size,
   so don't stretch them past it — the sources are small raster files. */
.page-head__title--logo img {
  display: block;
  margin-inline: auto;
  max-width: min(80vw, 100%);
  height: auto;
}

/* Page head with a photo behind it — Vinarija only, via .page-head--photo.
   Same construction as .section--photo: the image sits under a dark scrim on a
   ::before so the heading can flip to white and stay legible over a bright,
   busy cellar shot. The URL lives here rather than inline so it resolves
   against the stylesheet, which is what lets the root and /en/ pages share it.
   The box is a wide, short band (~4:1 at desktop against a 3:2 source), so only
   the middle third of the photo's height shows — that's the band holding the
   branded barrel heads. Scrim strength is the knob to turn if the client wants
   the barrels more or less present. */
.page-head--photo {
  position: relative;
  isolation: isolate;
  background-image: url("../img/vinarija-hero.jpg");
  background-size: cover;
  background-position: center;
  border-bottom-color: transparent;
}

.page-head--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.78);
}

.page-head--photo .page-head__title {
  color: var(--ivory);
}

.page-head--photo .page-head__sub {
  color: rgba(255, 255, 255, 0.78);
}

.page-head--photo .eyebrow {
  color: var(--ivory);
}

.page-head--photo .eyebrow::before,
.page-head--photo .eyebrow--center::after {
  background: rgba(255, 255, 255, 0.45);
}

/* Inverted page head — the wine pages. Straight tonal flip of the default
   .page-head: the light top-to-bottom gradient becomes a dark one, ink goes
   to ivory, and the hairlines/eyebrow rules flip to light-on-dark. The
   wordmark logos are black-ink PNGs on transparency, so invert(1) turns the
   ink white and leaves the alpha alone — no second set of white files. */
.page-head--invert {
  background: linear-gradient(180deg, var(--char-2) 0%, var(--char) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.page-head--invert .page-head__title {
  color: var(--ivory);
}

.page-head--invert .page-head__sub {
  color: rgba(255, 255, 255, 0.78);
}

.page-head--invert .eyebrow {
  color: var(--ivory);
}

.page-head--invert .eyebrow::before,
.page-head--invert .eyebrow--center::after {
  background: rgba(255, 255, 255, 0.45);
}

.page-head--invert .page-head__title--logo img {
  filter: invert(1);
}

/* Penušava Babaroga: the label's witch drawing sits behind the inverted head.
   penusava-hero.jpg is that artwork tonally flipped (white line on black) so
   it belongs to the dark band instead of fighting it. Selector is compound so
   it beats --invert's background regardless of source order. The band is far
   wider than the 1.6:1 art, so cover scales by width and only the vertical
   window is adjustable — 32% frames the witch's eyes. */
.page-head--invert.page-head--art {
  position: relative;
  isolation: isolate;
  background-color: var(--char-2);
  background-image: url("../img/penusava-hero.jpg");
  background-size: cover;
  background-position: center 32%;
}

.page-head--invert.page-head--art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
}

/* Vinogradi/Vineyards get the same photo-head treatment with their own shot;
   the modifier only swaps the image, everything else inherits from --photo. */
.page-head--photo-vinogradi {
  background-image: url("../img/vinogradi-hero.jpg");
}

/* Koncept/Concept: the harvest painting, cropped out of the restaurant photo
   (koncept-hero.jpg is just the canvas — no wall slats or furniture). */
.page-head--photo-koncept {
  background-image: url("../img/koncept-hero.jpg");
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
  padding-block: var(--sp-8);
  position: relative;
}

.section--tint {
  background: var(--paper-2);
}

.section--dark {
  background: var(--char);
  color: var(--ivory);
}

.section--dark .h-display {
  color: var(--ivory);
}

.section--dark .text-body {
  color: rgba(255, 255, 255, 0.72);
}

/* Dark section with a photo background behind an overlay */
.section--photo {
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}

.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.78);
}

/* Simple photo gallery row */
.gallery {
  display: grid;
  gap: var(--sp-3);
}

.gallery .photo {
  --ratio: 3 / 4;
}

@media (min-width: 700px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Kuhinja gallery carousel — keeps the 3-up rhythm of .gallery, but pages
   through the full set three photos at a time. The track is translated in whole
   pages; main.js measures item offsets so the flex gap is accounted for, and
   clamps the last page flush to the end instead of leaving an empty cell. */
.gallery-carousel {
  position: relative;
}

.gallery-carousel__viewport {
  position: relative;
  overflow: hidden;
}

.gallery-carousel__track {
  display: flex;
  gap: var(--sp-3);
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.gallery-carousel__track .photo {
  --ratio: 3 / 4;
  flex: 0 0 100%;
}

@media (min-width: 700px) {
  .gallery-carousel__track .photo {
    flex-basis: calc((100% - 2 * var(--sp-3)) / 3);
  }
}

/* Arrows sit over the outer edges of the photo row */
.gallery-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--char);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.gallery-carousel__arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

.gallery-carousel__arrow--prev {
  left: var(--sp-2);
}

.gallery-carousel__arrow--next {
  right: var(--sp-2);
}

.gallery-carousel__arrow:hover {
  background: #fff;
  border-color: var(--gold-dim);
}

.gallery-carousel__arrow:focus-visible {
  outline: 2px solid var(--char);
  outline-offset: -2px;
}

.gallery-carousel__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* Page dots */
.gallery-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--sp-3);
}

.gallery-carousel__dots:empty {
  display: none;
}

.gallery-carousel__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.gallery-carousel__dot[aria-current="true"] {
  background: var(--char);
  border-color: var(--char);
}

.gallery-carousel__dot:focus-visible {
  outline: 2px solid var(--char);
  outline-offset: 3px;
}

@media (max-width: 699px) {
  .gallery-carousel__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Sorte coverflow — the grape-variety carousel on Vinogradi/Vineyards.
   One photo in focus, neighbours peeking behind it scaled down and blurred.
   JS ([data-sorte-flow] in main.js) assigns data-pos="-2…2" per item; all the
   motion lives in these transform/filter transitions so reduced-motion can
   switch it off wholesale. Items are absolutely positioned in a fixed-height
   stage, so the .reveal class belongs on the wrapper, not the figures. */
/* the section head's sp-6 gap is too airy here — pull the whole flow up so
   the heading, the variety name and the photos read as one block */
.sorte-flow {
  margin-top: calc(var(--sp-3) - var(--sp-6));
}

.sorte-flow__name {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  margin-bottom: var(--sp-3);
  min-height: 1.4em;
}

.sorte-flow__stage {
  position: relative;
  height: clamp(240px, 42vw, 430px);
  touch-action: pan-y;
}

.sorte-flow__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(600px, 64%);
  margin: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.55s ease, filter 0.55s ease, opacity 0.55s ease;
}

.sorte-flow__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sorte-flow__item[data-pos="0"] {
  z-index: 3;
  cursor: default;
  opacity: 1;
}

.sorte-flow__item[data-pos="1"],
.sorte-flow__item[data-pos="-1"] {
  z-index: 2;
  opacity: 0.55;
  filter: blur(5px) grayscale(0.2);
}

.sorte-flow__item[data-pos="1"] { transform: translate(calc(-50% + 44%), -50%) scale(0.72); }
.sorte-flow__item[data-pos="-1"] { transform: translate(calc(-50% - 44%), -50%) scale(0.72); }

.sorte-flow__item[data-pos="2"],
.sorte-flow__item[data-pos="-2"] {
  z-index: 1;
  opacity: 0.28;
  filter: blur(9px) grayscale(0.35);
}

.sorte-flow__item[data-pos="2"] { transform: translate(calc(-50% + 74%), -50%) scale(0.55); }
.sorte-flow__item[data-pos="-2"] { transform: translate(calc(-50% - 74%), -50%) scale(0.55); }

.sorte-flow .gallery-carousel__arrow {
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .sorte-flow__item {
    transition: none;
  }
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head .h-display {
  margin-top: var(--sp-3);
}

.section__head .text-body {
  margin-top: var(--sp-3);
}

.section__head--center .text-body {
  margin-inline: auto;
}

.section__head .btn {
  margin-top: var(--sp-4);
}

/* Split layout (text + media) */
.split {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

.split__text .eyebrow {
  margin-bottom: var(--sp-3);
}

.split__text .h-display {
  margin-bottom: var(--sp-3);
}

.split__text .text-body + .text-body {
  margin-top: var(--sp-2);
}

.split__text .btn {
  margin-top: var(--sp-4);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
  }

  /* variant with a dominant photo column — the media half gets ~40% more
     width than the text half, for splits where the photo should carry */
  .split--media-wide {
    grid-template-columns: 1fr 1.4fr;
  }

  .split--flip .split__text {
    order: 2;
  }

  .split--flip .photo {
    order: 1;
  }
}

/* ==========================================================================
   Photo component (graceful placeholder until real photos arrive)
   ========================================================================== */
.photo {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background:
    radial-gradient(70% 60% at 50% 30%, #e9e9e9, transparent 80%),
    linear-gradient(200deg, #d6d6d6 0%, #b8b8b8 55%, #909090 100%);
  aspect-ratio: var(--ratio, 4 / 3);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--missing img {
  display: none;
}

.photo figcaption {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  padding: 0.3rem 0.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.photo:not(.photo--missing) figcaption {
  display: none;
}

.photo--wide {
  --ratio: 21 / 9;
}

/* The vinarija photo pair: one landscape barrel shot, one portrait of the
   winemaker. A square is the only box that serves both — it keeps the two the
   same size, trims the wide shot harmlessly at the sides, and leaves enough
   height for the portrait. Without it the portrait sat in the default 4/3 box,
   which kept only the middle 50% of a 933x1400 photo and cut the subject's
   head off. */
.photo--square {
  --ratio: 1 / 1;
}

/* Anchor the crop to the top of the source instead of its centre — used on the
   portrait so the head stays in frame rather than being trimmed off the top. */
.photo--top img {
  object-position: center top;
}

@media (max-width: 640px) {
  .photo--wide {
    --ratio: 4 / 3;
  }
}

/* ==========================================================================
   Wine cards
   ========================================================================== */
.wines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-3);
}

.wine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--hairline-soft);
  border-radius: 3px;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.wine-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-dim);
  box-shadow: var(--shadow-soft);
}

.wine-card__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--sp-3);
  border-radius: 2px;
  overflow: hidden;
}

.wine-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.wine-card:hover .wine-card__media img {
  transform: scale(1.05);
}

.wine-card__type {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.wine-card__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--char);
}

.wine-card__blend {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.wine-card__cta {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.wine-card:hover .wine-card__cta,
.wine-card:focus-visible .wine-card__cta {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Wine rail — the homepage "Naša vina" row. All seven cards live in one flex
   track; --per decides how many are on show and is the only thing the
   breakpoints below touch, so browser zoom steps 7 → 5 → 3 → 1 exactly the
   way a narrower screen does. main.js reads --per back and moves the track.
   Cards keep .wine-card, so type/name/blend styling is shared; only the hover
   lift is re-stated, because the track's own transform would otherwise be the
   thing that animates. */
.wine-rail {
  --per: 1;
  --rail-gap: var(--sp-3);
  /* how much of the neighbouring card shows on each side; scales with the
     viewport so the slice stays a readable piece of bottle rather than just
     the card's own padding */
  --peek: clamp(3.25rem, 5vw, 5.5rem);
  position: relative;
}

@media (min-width: 760px)  { .wine-rail { --per: 3; } }
@media (min-width: 1200px) { .wine-rail { --per: 5; } }
/* every wine fits at this tier, so nothing peeks and no room is reserved */
@media (min-width: 1600px) { .wine-rail { --per: 7; --peek: 0rem; } }

/* The clip has to be wider than the text column or the peeking card would be
   cut off flush with the focused ones. Pulling the viewport out by the gutter
   and padding it back in gives the peek somewhere to sit without the track
   (7 cards wide) spilling into a page-level scrollbar. */
.wine-rail__viewport {
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

/* The row is --peek narrower than the viewport on each side, and the track is
   pushed right by that much, so the card outside the window shows the same
   slice whichever side it is on. Without the offset flex packs every card to
   the left, all the slack ends up on the right, and the left "peek" is only as
   wide as the gutter — which is less than .wine-card's own padding, so it
   showed a blank white sliver instead of a bottle. main.js only sets --shift
   (in px); the peek stays in CSS so it can keep its rem units. */
.wine-rail__track {
  display: flex;
  gap: var(--rail-gap);
  transform: translate3d(calc(var(--peek) - var(--shift, 0px)), 0, 0);
  transition: transform 0.55s var(--ease-out);
}

/* `min-width: 0` is load-bearing, not tidying. A flex item defaults to
   `min-width: auto`, which means it refuses to shrink below its own min-content
   width — so the flex-basis below is only a *request*. Any card whose longest
   unbreakable word is wider than the basis silently grows, and because the media
   is `aspect-ratio: 3/4` off the card width, a wider card gets a taller photo and
   every label under it drops. That is exactly what happened at the 7-up tier:
   basis worked out at 157.7px but "Babaroga" sets at 25.6px Playfair needs
   170.8px, so Babaroga, Babaroga Crvena and Penusava Babaroga came out 13px
   wider than the other four and their "Belo vino" labels sat 17.5px lower.
   With min-width: 0 the basis is authoritative and every card is identical at
   every tier, whatever a future wine ends up being called.

   The names do not need shrinking to make this work: at the tightest tier
   "Babaroga" runs about 11px wider than the card's content box, which is
   absorbed by the card's own 24px side padding (roughly 5.5px each side), so it
   still sits well inside the border with ~18px to spare. Only if a wine name got
   another ~35px longer would it reach the card edge and need a size rule. */
.wine-rail__item {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--rail-gap) - 2 * var(--peek)) / var(--per));
  min-width: 0;
  transition:
    opacity 0.45s var(--ease-out),
    filter 0.45s var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* the card just outside the window peeks in, behind and out of focus */
.wine-rail__item[data-state="near"] {
  opacity: 0.4;
  filter: blur(4px);
  cursor: pointer;
}

/* everything past that is dropped rather than clipped — no overflow box means
   the peek can bleed into the page gutter, and body already hides overflow-x */
.wine-rail__item[data-state="far"] {
  opacity: 0;
  pointer-events: none;
}

.wine-rail__item[data-state="near"]:hover,
.wine-rail__item[data-state="far"]:hover {
  transform: none;
}

/* when every wine fits there is nothing to page through */
.wine-rail.is-static .gallery-carousel__arrow {
  display: none;
}

.wine-rail .gallery-carousel__arrow {
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .wine-rail__track,
  .wine-rail__item {
    transition: none;
  }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.stat {
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--char);
  font-variant-numeric: tabular-nums;
}

.stat__value small {
  font-size: 0.45em;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.stat__label {
  margin-top: 0.7rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 640px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Varieties strip */
.varieties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.varieties li {
  padding: 0.55rem 1.3rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--char);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  background: var(--card);
}

/* ==========================================================================
   Quote band
   ========================================================================== */
.quote-band {
  text-align: center;
}

/* the Evil band names the wine with its wordmark; the band is .section--dark,
   so the black-ink PNG is inverted here the same way the wine heads do it */
.quote-band__logo {
  margin-bottom: var(--sp-3);
}

.quote-band__logo img {
  margin-inline: auto;
  max-width: 100%;
  height: auto;
  filter: invert(1);
}

.quote-band__quote {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  max-width: 52rem;
  margin-inline: auto;
  color: var(--char);
}

.section--dark .quote-band__quote {
  color: var(--ivory);
}

.quote-band__quote strong {
  font-weight: 600;
  font-style: normal;
  color: var(--gold-soft);
}

.quote-band__attrib {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.section--dark .quote-band__attrib {
  color: rgba(255, 255, 255, 0.6);
}

.quote-band .btn {
  margin-top: var(--sp-5);
}

/* ==========================================================================
   Feature list (Pećina Stroga)
   ========================================================================== */
.features {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.feature {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
}

.feature__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  min-width: 2.2rem;
  font-variant-numeric: tabular-nums;
}

.feature p {
  font-size: var(--text-sm);
  color: var(--muted);
}

.feature p strong {
  display: block;
  font-size: var(--text-base);
  color: var(--char);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   Wine detail page
   ========================================================================== */
.wine-detail {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.wine-detail__figure {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.wine-detail__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.wine-detail__body .lede {
  margin-bottom: var(--sp-3);
}

.wine-detail__body .text-body {
  max-width: none;
}

.wine-detail__body .text-body + .text-body {
  margin-top: var(--sp-2);
}

.serving {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--sp-4);
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  background: var(--card);
  font-size: var(--text-sm);
  color: var(--char);
}

.serving strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Tech sheet */
.tech {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.tech__row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--sp-2);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.tech__row dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.15rem;
}

.tech__row dd {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--char);
}

@media (min-width: 900px) {
  .wine-detail {
    grid-template-columns: 2fr 3fr;
  }

  .wine-detail__figure {
    position: sticky;
    top: 7rem;
  }
}

/* Prev / next wine */
.wine-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}

.wine-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 45%;
}

.wine-nav a:last-child {
  text-align: right;
  margin-left: auto;
}

.wine-nav__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.wine-nav__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--char);
  transition: color var(--dur-fast) var(--ease-out);
}

.wine-nav a:hover .wine-nav__name {
  color: var(--gold);
}

/* ==========================================================================
   Story blocks (Koncept)
   ========================================================================== */
.story {
  display: grid;
  gap: var(--sp-6);
  /* wider than a plain reading column because each block carries a link out to
     the wine on its right; the prose keeps its own measure below */
  max-width: 62rem;
  margin-inline: auto;
}

.story__block {
  position: relative;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--hairline);
}

/* stacked under the prose until there is room for a column of its own */
.story__link {
  margin-top: var(--sp-4);
  justify-self: start;
}

/* Text left, link to the wine on the right. Below the breakpoint the two
   simply stack, which is why the columns are only declared inside it. */
@media (min-width: 900px) {
  .story__block {
    display: grid;
    /* a fixed link column, not auto: with auto the longest label would set the
       measure and each block's prose would wrap to a different width */
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: var(--sp-5);
    align-items: center;
  }

  .story__block > :not(.story__link) {
    grid-column: 1;
  }

  .story__link {
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: end;
    margin-top: 0;
    white-space: nowrap;
  }
}



.story__block h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--char);
  margin-bottom: var(--sp-2);
}

/* Koncept headings carry the label wordmarks instead of set type. The PNGs
   are black-ink on transparency and this section sits on paper, so unlike the
   wine-page heads they need no inversion. Sizes in the HTML are the whole set
   scaled by the same factor, which is what keeps them looking like one family. */
.story__block h2 img {
  display: block;
  max-width: 100%;
  height: auto;
}

.story__block p {
  color: var(--muted);
}

.story__block p + p {
  margin-top: var(--sp-2);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: var(--sp-5);
}

.contact-card {
  display: grid;
  gap: var(--sp-3);
}

.contact-card__item {
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--hairline-soft);
  border-radius: 3px;
}

.contact-card__item h2 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.contact-card__item p,
.contact-card__item a {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--char);
  line-height: 1.5;
}

.contact-card__item a:hover {
  color: var(--gold);
}

/* Form */
.form {
  display: grid;
  gap: var(--sp-3);
}

.form__field {
  display: grid;
  gap: 0.45rem;
}

.form__field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.form__field label span {
  color: var(--bordeaux);
}

.form input,
.form textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--char);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.form textarea {
  min-height: 9rem;
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form__note {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Honeypot. Positioned off-screen rather than display:none on purpose — a bot
   that parses styles will skip a hidden field, but it happily fills this one,
   and send.php then drops the submission. It must stay reachable in the DOM to
   work, so it is taken out of the tab order and hidden from screen readers on
   the element itself (tabindex="-1" + aria-hidden) rather than by the CSS. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The send result. Hidden until there is something to say — the [hidden]
   attribute is on the element, and this rule must not override it, which is why
   the display lives on the modifier-free base rather than here. */
.form__status {
  margin-top: var(--sp-3);
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--hairline);
  font-size: var(--text-sm);
  color: var(--muted);
}

.form__status--ok {
  border-left-color: var(--char);
  color: var(--char);
}

.form__status--err {
  border-left-color: var(--char);
  color: var(--char);
  background: var(--hairline-soft);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--sp-7);
  }
}

/* ==========================================================================
   Footer — deep charcoal, grounds the page
   ========================================================================== */
.footer {
  background: var(--char-2);
  color: var(--ivory);
  padding: var(--sp-7) 0 var(--sp-4);
}

.footer__grid {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* The footer shows the same logo file as the nav, inverted to white for the
   dark footer ground. It gets more room here, so it renders larger — still
   under the 206px native width, which keeps it inside a clean 2x. */
.footer__brand-mark {
  height: 96px;
  width: auto;
  filter: invert(1);
}

.footer__brand p {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  max-width: 24rem;
}

.footer__col h2 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--sp-2);
}

.footer__col ul {
  display: grid;
  gap: 0.65rem;
}

.footer__col a,
.footer__col span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__col a:hover {
  color: var(--ivory);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   Scroll reveals
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: calc(70ms * var(--i, 0));
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive nav: centered menu bar on desktop (like the original site),
   brand + hamburger on smaller screens
   ========================================================================== */
@media (max-width: 1099px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  /* The lockup is nearly square, so it costs real vertical space in a bar that
     is fixed over the content the whole way down a phone screen — smaller here,
     and closer to the edge since the mobile gutter is already tight. */
  .nav__brand {
    --brand-h: 70px;
    --brand-edge: 0.9rem;
  }
}
@media (min-width: 1100px) {
  .menu {
    display: none;
  }

  /* Brand and menu each get their own column, so they can never overlap however
     wide the menu grows or however far the page is zoomed. The empty third
     column is what keeps the menu centred: it mirrors the brand's column, the
     way the old site's centred bar looked. Before this the brand was absolutely
     positioned, i.e. outside the flow, which is what let the two collide. */
  .nav__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .nav__brand {
    justify-self: start;
  }

  .nav__links {
    grid-column: 2;
  }
}

/* The wordmark used to be hidden between 1100 and 1559px, and the bar dropped
   its 84rem cap above that, because the old side-by-side brand was 194px wide
   and simply would not fit beside a centred 983px menu inside 1344px.
   The stacked logo image removed that problem at the root, and the brand now
   shows at every width from 1100px up. Measured at 113px wide (--brand-h: 104):
   the menu is exactly centred at 1425 (0px offset) and stays centred down to
   roughly 1300px; below that the brand outgrows its `1fr` and pushes the menu
   right — 66px at 1105 — but the 24px grid gap still guarantees no overlap and
   there is no overflow. Growing --brand-h further widens that off-centre band,
   so re-measure at 1100 if you change it or the menu items. */

/* ==========================================================================
   Search overlay
   ========================================================================== */
.search {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter) var(--sp-5);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.search.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out);
}

.search__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.search__close:hover {
  color: var(--char);
}

.search__box {
  width: 100%;
  max-width: 38rem;
}

.search__input {
  width: 100%;
  padding: 0.6rem 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 500;
  color: var(--char);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.search__input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.search__input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.search__results {
  margin-top: var(--sp-4);
  display: grid;
  gap: 0.2rem;
}

.search__result {
  display: block;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--hairline-soft);
  transition: padding-left var(--dur-fast) var(--ease-out);
}

.search__result:hover {
  padding-left: 0.6rem;
}

.search__result-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--char);
}

.search__result-sub {
  font-size: var(--text-sm);
  color: var(--muted);
}

.search__empty {
  margin-top: var(--sp-4);
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 480px) {
  .wines-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wine-card__bottle {
    height: 140px;
  }

  .wine-card {
    padding: var(--sp-4) var(--sp-2) var(--sp-3);
  }

  .tech__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ==========================================================================
   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;
    transition-delay: 0s !important;
  }

  .reveal,
  .hero [data-stage] {
    opacity: 1;
    transform: none;
  }
}