/* =====================================================================
   Gabriele & Letizia — Wedding Site Stylesheet
   All visual styling lives here. Change variables below to restyle.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────
   THEME: A5 — Total White + Allura calligraphic + warm nocciola accent.
   To revert to the previous "Champagne & Bordeaux" theme, restore the
   values commented out next to each line below.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* COLORS — A5 Total White */
  --color-bg:            #ffffff;      /* PURE WHITE — page background    | OLD: #fefdfb */
  --color-surface:       #fbfaf7;      /* Off-white — cards, alt sections | OLD: #faf6f0 */
  --color-surface-deep:  #f5f0e7;      /* Deeper warm surface             | OLD: #f3ebe1 */
  --color-primary:       #a08260;      /* Warm nocciola — main accent     | OLD: #4a1820 (bordeaux) */
  --color-primary-soft:  #b89578;      /* Lighter nocciola — hover        | OLD: #6b2230 */
  --color-secondary:     #c5a572;      /* Champagne gold — kept           | OLD: #c5a572 */
  --color-secondary-deep:#a88a5e;      /* Deep champagne — kept           | OLD: #a88a5e */
  --color-text:          #2c2723;      /* Ink — body                      | OLD: #5a4f47 */
  --color-text-light:    #8a8275;      /* Ink-mute — captions             | OLD: #9a8e83 */
  --color-heading:       #1a1410;      /* Headings — kept                 | OLD: #1a1410 */
  --color-nav-bg:        rgba(255,255,255,0.92); /* Frosted nav            | OLD: rgba(254,253,251,0.92) */
  --color-border:        #ece6d8;      /* Subtle border                   | OLD: #e8dfd0 */
  --color-on-dark:       #ffffff;      /* Text on dark — kept             | OLD: #ffffff */
  --color-footer-bg:     #ffffff;      /* PURE WHITE footer (A5 spec)     | OLD: #3a2820 (charcoal) */
  --color-hero-overlay:  rgba(0,0,0,0.4); /* Hero darkening                | OLD: rgba(0,0,0,0.5) */

  /* TYPOGRAPHY — A5: Allura (calligraphic) + Cormorant + Cormorant SC */
  --font-display:        'Cormorant Garamond', serif;   /* Headings — kept */
  --font-body:           'Lora', serif;                  /* Body copy — kept */
  --font-mono:           'Cormorant SC', serif;          /* Small-caps labels — kept */
  --font-accent:         'Allura', cursive;             /* Calligraphic accent — NEW for A5 */

  --size-hero-title:    clamp(3rem, 8vw, 7rem);
  --size-section-title: clamp(2rem, 4vw, 3.5rem);
  --size-body:          1.05rem;
  --size-small:         0.875rem;

  /* SPACING */
  --section-padding:    clamp(4rem, 10vw, 9rem);
  --content-max-width:  1100px;
  --nav-height:         64px;

  /* EFFECTS */
  --border-radius:      4px;
  --card-shadow:        0 4px 24px rgba(0,0,0,0.05);
  --transition-base:    0.3s ease;
  --parallax-speed:     0.4;
}

/* =====================================================================
   RESET & BASE
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

p {
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}

a:hover {
  color: var(--color-primary-soft);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: var(--font-body);
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.section-eyebrow .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
}

.section-eyebrow .line {
  flex: 0 0 32px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.5;
}

.section-title {
  font-size: var(--size-section-title);
  margin-bottom: 1rem;
}

.section-title em {
  font-style: italic;
  color: var(--color-primary);
}

.divider-ornament {
  text-align: center;
  font-family: var(--font-display);
  color: var(--color-secondary-deep);
  letter-spacing: 1.5rem;
  padding: 3rem 0;
  font-size: 1.25rem;
  opacity: 0.7;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Placeholder image fallback */
.placeholder-img {
  background-color: var(--color-surface);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      rgba(74, 24, 32, 0.04) 12px,
      rgba(74, 24, 32, 0.04) 24px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
}

.placeholder-img::before {
  content: attr(data-label);
  display: block;
}

/* =====================================================================
   FLOATING NAV
   ===================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: transparent;
  z-index: 100;
  transition: background var(--transition-base), backdrop-filter var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  align-items: center;
}

.nav.scrolled {
  background: var(--color-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-border);
}

.nav__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-secondary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--color-heading);
  text-decoration: none;
  transition: border-color var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}

.nav__brand:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.nav.scrolled .nav__brand {
  color: var(--color-heading);
  border-color: var(--color-secondary);
}

.nav:not(.scrolled) .nav__brand {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

.nav__links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
}

.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-heading);     /* darker for stronger contrast */
  white-space: nowrap;             /* keep each label on a single line */
}

.nav:not(.scrolled) .nav__links a {
  color: var(--color-on-dark);
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.nav__links a:hover {
  color: var(--color-primary);
}

.nav__lang {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.nav__lang button {
  padding: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  color: var(--color-text);
  opacity: 0.55;
  transition: opacity var(--transition-base), color var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nav:not(.scrolled) .nav__lang button {
  color: var(--color-on-dark);
}

.nav__lang button:hover { opacity: 1; }
.nav__lang button.active { opacity: 1; color: var(--color-primary); }
.nav__lang span { opacity: 0.4; }

.nav__menu-toggle {
  display: none;
  width: 28px;
  height: 22px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
}

.nav__menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav:not(.scrolled) .nav__menu-toggle span {
  background: var(--color-on-dark);
}

/* =====================================================================
   HERO
   ===================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-on-dark);
  overflow: hidden;
  padding: var(--nav-height) 1.5rem 4rem;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Extra height so parallax translate doesn't reveal blank space at the bottom */
  height: 130%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a1410;       /* dark fallback when image is loading */
  background-image: url('images/Background Landing.jfif');
  z-index: 0;
  will-change: transform;
  /* DREAMY-FADE TUNING — 3 levers, change here to taste:
     1. opacity:    how transparent the photo is (0 = invisible, 1 = full strength)
     2. filter:     desaturate(0.5) = halfway to grayscale; brightness(0.85) = slightly darkened
     3. mix-blend:  optional, kept off here */
  opacity: 0.75;
  filter: saturate(0.85) brightness(1.05);
}

/* Real image holder — covers its container; falls back to a clean surface
   bg if the file is missing. Pair with an inline `style="background-image: url(...)"`. */
.image-frame {
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-hero-overlay);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* Soft halo behind text for legibility when image is faded */
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.36em;
  font-size: 0.72rem;
  opacity: 0.85;
}

.hero__names {
  font-family: 'Allura', cursive;
  font-size: clamp(2.4rem, 8vw, 6.5rem);   /* tuned: smaller min so it fits on mobile */
  font-weight: 400;
  line-height: 1.1;
  margin: 0.5rem 0;
  color: var(--color-on-dark);
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;                          /* allow wrap on very narrow screens */
  white-space: normal;
  gap: 0.1em;
  position: relative;
  padding: 0 1rem;
  text-align: center;
}

/* Editorial ornaments DISABLED for A5 — pure typography, no frame */
.hero__names::before,
.hero__names::after {
  content: none;
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--color-secondary);
  opacity: 0.85;
}
.hero__names::before { top: -1.5rem; }
.hero__names::after  { bottom: -1.5rem; }

/* Countdown frame — sits inside a faint champagne-bordered card */
.hero .countdown {
  /* A5: airy, no frame */
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 1rem;
}

.hero__names .amp {
  font-style: italic;
  color: var(--color-secondary);
  font-weight: 300;
  margin: 0 0.25em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.95rem;
  opacity: 0.92;
  margin-top: 0.5rem;
}

.hero__meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  align-self: center;
  opacity: 0.6;
}

/* Countdown — C1 "Editorial spaced": no frames, italic numbers, tiny SC labels */
.countdown {
  display: flex;
  gap: 1.25rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.countdown__unit {
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.9rem;
  /* no border, no background, no blur — pure typography */
  border: 0;
  background: transparent;
}

.countdown__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--color-on-dark);
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-family: 'Cormorant SC', serif;
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 0.45rem;
  color: var(--color-secondary);
  opacity: 1;
}

/* "Add to calendar" download button — sits under the countdown */
.calendar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--border-radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.18);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.calendar-btn::before {
  content: '✦';
  font-family: var(--font-display);
  font-size: 1em;
  color: var(--color-secondary);
  letter-spacing: 0;
}

.calendar-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
  transform: translateY(-1px);
}

/* Light variant — for use on cream backgrounds (schedule page, etc.) */
.calendar-btn--light {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.calendar-btn--light::before { color: var(--color-secondary-deep); }

.calendar-btn--light:hover {
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-color: var(--color-primary);
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 32px;
  background: currentColor;
  animation: scrollHint 1.8s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* =====================================================================
   WELCOME SECTION — short personal greeting between hero and teasers
   ===================================================================== */

.welcome {
  background: var(--color-surface);
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.welcome__inner {
  max-width: 720px;
  margin: 0 auto;
}

.welcome__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.welcome__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--color-heading);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.welcome__title em {
  font-style: italic;
  color: var(--color-primary);
}

.welcome__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
  max-width: 560px;
  margin: 0 auto;
}

/* =====================================================================
   OUR STORY — 3-card carousel with arrows + auto-rotate
   Desktop: 3 cards visible, arrow controls advance the track by 1 card
   at a time (4-second auto-advance until user interacts). On mobile
   (<800px), the same cards stack vertically — no carousel mechanics.
   ===================================================================== */

.story {
  background: var(--color-bg);
  position: relative;
}

.story__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

.story__intro .section-eyebrow {
  justify-content: center;
}

.story__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin-top: 0.75rem;
  letter-spacing: 0.005em;
}

/* The carousel wraps the viewport (which clips the off-screen cards)
   and the navigation arrows that sit just outside the viewport. */
.story__carousel {
  position: relative;
  max-width: 1240px;          /* room for arrows on each side */
  margin: 0 auto;
  padding: 0 64px;            /* leave space for the arrow buttons */
}

.story__viewport {
  overflow: hidden;
  padding: 1rem 0;            /* breathing room for the hover lift */
}

.story__track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
}

/* Each card takes up exactly 1/3 of the viewport (minus the gap).
   --visible is set inline by JS so the same CSS works for 3 / 2 / 1
   visible cards depending on viewport width. */
.story__stop {
  flex: 0 0 calc((100% - (var(--visible, 3) - 1) * 1.5rem) / var(--visible, 3));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.story__stop:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.story__stop-flag {
  font-size: 1.75rem;
  line-height: 1;
}

.story__stop-city {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--color-heading);
}

.story__stop-city em {
  font-style: italic;
  color: var(--color-primary);
}

.story__stop-img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* dynamic — preserves photo proportions */
  height: auto;
  min-height: 180px;            /* don't shrink below the original height on desktop */
}

.story__stop-text {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
}

.story__stop-marker {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 99px;
}

/* ── Carousel arrows ─────────────────────────────────────────────── */
.story__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: var(--card-shadow);
  transition: background var(--transition-base), color var(--transition-base),
              opacity var(--transition-base), transform var(--transition-base);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
}

.story__arrow:hover:not([disabled]) {
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-color: var(--color-primary);
}

.story__arrow[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

.story__arrow--prev { left: 0; }
.story__arrow--next { right: 0; }

/* ── Mobile: drop the carousel, stack vertically ─────────────────── */
@media (max-width: 800px) {
  .story__carousel { padding: 0 1.25rem; }

  .story__viewport {
    overflow: visible;
    padding: 0;
  }

  .story__track {
    flex-direction: column;
    gap: 1.25rem;
    transform: none !important; /* override any inline JS transform */
  }

  .story__stop {
    flex: 1 1 auto;
    width: 100%;
  }

  .story__stop-img {
    aspect-ratio: 16 / 10;     /* on mobile single-column, slightly wider proportion */
    min-height: 0;
    height: auto;
  }

  .story__arrow { display: none; }
}

/* =====================================================================
   VENUE — Il Conventino (single-venue editorial)
   ===================================================================== */

.venue {
  background: var(--color-surface);
}

.venue__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.venue__image {
  height: 100%;
  min-height: 460px;
}

.venue__text h2 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.venue__text h2 em {
  font-style: italic;
  color: var(--color-primary);
}

.venue__text p {
  color: var(--color-text);
  line-height: 1.75;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.venue__meta {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.venue__meta dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
  margin-bottom: 0.35rem;
}

.venue__meta dd {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-heading);
}

.venue__meta dd.coords {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.venue__map {
  width: 100%;
  height: 360px;
  border: 0;
  margin-top: 3rem;
  border-radius: var(--border-radius);
  filter: grayscale(0.15);
  box-shadow: var(--card-shadow);
}

/* Wide banner image — used as a 2nd Conventino shot between the text and the map */
.venue__banner-image {
  width: 100%;
  height: clamp(280px, 40vw, 460px);
  margin-top: 3rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

/* =====================================================================
   CITY SUB-PAGES (story-lausanne, story-trieste, etc.)
   ===================================================================== */

.city-hero-image {
  width: 100%;
  max-width: var(--content-max-width);
  aspect-ratio: 16 / 9;          /* dynamic — preserves photo proportions */
  height: auto;
  margin: 0 auto 3rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.city-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.city-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.city-content p:first-child::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.5rem;
  float: left;
  line-height: 0.95;
  margin: 0.15rem 0.5rem 0 0;
  color: var(--color-primary);
}

.city-second-image {
  width: 100%;
  max-width: var(--content-max-width);
  height: clamp(220px, 32vw, 360px);
  margin: 3rem auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

/* Photo with NATURAL proportions — no cropping. Use as <img> element. */
.city-image-natural {
  display: block;
  width: 100%;
  max-width: var(--content-max-width);
  height: auto;
  margin: 3rem auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

/* ─── Photo gallery for story sub-pages (used on Lavaux) ───────────── */
.proposta-gallery {
  max-width: var(--content-max-width);
  margin: 3.5rem auto 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.proposta-gallery__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.proposta-gallery__img {
  width: 100%;
  aspect-ratio: 4 / 5;          /* portrait orientation */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-surface-deep);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

.proposta-gallery__wide {
  width: 100%;
  aspect-ratio: 16 / 9;         /* landscape, full width */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-surface-deep);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

@media (max-width: 700px) {
  .proposta-gallery__row {
    grid-template-columns: 1fr;
  }
}

.city-back {
  display: inline-block;
  margin: 4rem auto 0;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius);
  transition: all var(--transition-base);
}

.city-back:hover {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.city-back-wrap {
  text-align: center;
  padding-bottom: 4rem;
}

/* City sub-page nav — prev / all-stops / next (sits between page-hero and the city image) */
.city-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 760px;
  margin: 0 auto 3rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
}

.city-nav a {
  text-decoration: none;
  color: var(--color-heading);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: color var(--transition-base);
}

.city-nav a:hover { color: var(--color-primary); }

.city-nav__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.city-nav__city {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
}

.city-nav__prev { text-align: left; flex: 1 1 0; align-items: flex-start; }
.city-nav__next { text-align: right; flex: 1 1 0; align-items: flex-end; }

.city-nav__home {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  text-align: center;
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
}

.city-nav__home:hover { color: var(--color-primary-soft); }

.city-nav__placeholder { flex: 1 1 0; }

@media (max-width: 600px) {
  .city-nav {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
  }
  .city-nav__prev,
  .city-nav__next {
    text-align: center;
    align-items: center;
  }
}

/* =====================================================================
   GRADARA HISTORY — text-only editorial block, centred
   ===================================================================== */

.gradara-history {
  background: var(--color-bg);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.gradara-history__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gradara-history__inner .section-eyebrow {
  justify-content: center;
}

.gradara-history__title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

.gradara-history__title em {
  font-style: italic;
  color: var(--color-primary);
}

.gradara-history__inner p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

.gradara-history__inner h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary-deep);
  margin: 0.75rem 0 -0.25rem;
}

/* =====================================================================
   PULL QUOTE (Dante)
   ===================================================================== */

.pull-quote {
  background: var(--color-surface-deep);
  padding: clamp(5rem, 10vw, 8rem) 1.5rem;
  text-align: center;
}

.pull-quote__text {
  max-width: 800px;
  margin: 0 auto 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.4;
  color: var(--color-heading);
  font-weight: 400;
}

.pull-quote__source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-primary);
}

/* =====================================================================
   SCHEDULE
   ===================================================================== */

.schedule {
  background: var(--color-bg);
}

.schedule__list {
  max-width: 760px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
  position: relative;
  list-style: none;
}

.schedule__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  position: relative;
}

.schedule__item + .schedule__item {
  border-top: 1px dashed var(--color-border);
}

.schedule__time {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-primary);
  font-style: italic;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* schedule__dot removed — vertical timeline rail no longer used */

.schedule__body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 0.35rem;
}

.schedule__body p {
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.6;
}

.schedule__loc {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin-top: 0.35rem;
}

/* =====================================================================
   THINGS TO DO — Le Marche sanno aspettare
   ===================================================================== */

.todo {
  background: var(--color-surface);
}

.todo__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.todo__list {
  margin-top: 3rem;
  border-top: 1px solid var(--color-border);
}

.todo__item {
  display: grid;
  grid-template-columns: 3rem 240px 1fr;
  gap: 2.5rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.todo__idx {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.todo__img {
  width: 240px;
  aspect-ratio: 4 / 3;
  height: auto;
}

.todo__body h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  margin-bottom: 0.5rem;
  color: var(--color-heading);
}

.todo__body p {
  color: var(--color-text);
  line-height: 1.55;
  font-size: 0.92rem;
  margin-bottom: 0.65rem;
}

.todo__dist {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-light);
}

/* =====================================================================
   GIFT / HONEYMOON FUND
   ===================================================================== */

.gift {
  background: var(--color-bg);
  text-align: center;
}

.gift__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.gift__inner .section-eyebrow {
  justify-content: center;
}

.gift__title {
  font-size: var(--size-section-title);
  margin-bottom: 1.25rem;
  color: var(--color-heading);
}

.gift__title em {
  font-style: italic;
  color: var(--color-primary);
}

.gift__message {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
}

/* ── Stacked card layout (Viaggio first, Lista below) ─────────────── */
.gift-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 760px;          /* narrower since cards stack — keeps line length comfortable */
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  text-align: left;
}

.gift-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.gift-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.gift-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary-deep);
}

.gift-card__title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--color-heading);
  line-height: 1.2;
}

.gift-card__title em {
  font-style: italic;
  color: var(--color-primary);
}

.gift-card__desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
}

.gift-card .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ── Bassa California photos (gallery preview) ────────────────────── */
.gift-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.gift-photos__img {
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-surface-deep);
  border-radius: var(--border-radius);
  transition: transform var(--transition-base);
}

@media (max-width: 600px) {
  .gift-photos__img {
    height: 200px;
  }
}

.gift-photos__img:hover {
  transform: scale(1.03);
}

.gift-photos__caption {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-style: italic;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin-top: 0.25rem;
}

/* ── IBAN reveal (click to show + auto-copy) ──────────────────────── */
.iban-reveal {
  margin-top: 1rem;
  border-top: 1px dashed var(--color-border);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.iban-reveal__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.iban-reveal__btn {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-primary);
  padding: 0.55rem 1.1rem;
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.iban-reveal__btn:hover {
  background: var(--color-secondary);
  color: var(--color-on-dark);
}

.iban-reveal__details {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1rem 1.2rem;
}

.iban-reveal__details.open {
  display: flex;
}

.iban-reveal__number {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: var(--color-heading);
  word-break: break-all;
  cursor: pointer;
  user-select: all;
  transition: color var(--transition-base);
}

.iban-reveal__number:hover {
  color: var(--color-primary);
}

.iban-reveal__holder {
  font-size: 0.88rem;
  color: var(--color-text);
}

.iban-reveal__feedback {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-secondary-deep);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.iban-reveal__feedback.show {
  opacity: 1;
}

.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius);
  background: var(--color-primary);
  color: var(--color-on-dark);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-on-dark);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

/* =====================================================================
   FAQ ACCORDION
   ===================================================================== */

.faq {
  background: var(--color-surface);
}

.faq__list {
  max-width: 820px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
}

.faq__item {
  border-top: 1px solid var(--color-border);
  padding: 0;
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-heading);
  cursor: pointer;
  transition: color var(--transition-base);
}

.faq__q:hover {
  color: var(--color-primary);
}

.faq__toggle {
  flex: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: transform var(--transition-base);
  line-height: 1;
}

.faq__item.open .faq__toggle {
  transform: rotate(45deg);
}

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq__a-inner {
  padding: 0 0 1.5rem;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.7;
}

.faq__item.open .faq__a {
  max-height: 400px;
}

/* =====================================================================
   TRAVEL PAGE — sub-page sections
   ===================================================================== */

.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + 5rem) 1.5rem 4rem;
  text-align: center;
  background: var(--color-surface-deep);
  color: var(--color-heading);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin: 0.5rem 0 1rem;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--color-primary);
}

.page-hero__lede {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-text);
}

.travel-list {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.travel-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 1.05rem;
}

.travel-list__name {
  flex: 1 1 auto;
}

.travel-list__name em {
  font-style: italic;
  color: var(--color-heading);
}

.travel-list__dist {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
}

.stay {
  background: var(--color-surface);
}

.stay__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Featured callout — 10 rooms reserved at Il Conventino */
.stay-featured {
  background: var(--color-surface-deep);
  border: 1px solid var(--color-secondary-deep);
  border-radius: var(--border-radius);
  padding: 2.5rem 2rem;
  margin-top: 3rem;
  text-align: center;
  position: relative;
}

.stay-featured::before {
  content: '★';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  color: var(--color-secondary-deep);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-secondary-deep);
  font-size: 0.95rem;
}

.stay-featured__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.stay-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--color-heading);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.stay-featured__title em {
  font-style: italic;
  color: var(--color-primary);
}

.stay-featured p {
  color: var(--color-text);
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
}

.stay__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.stay__img {
  height: 200px;
}

.stay__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stay__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

.stay__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-heading);
}

.stay__type {
  color: var(--color-text-light);
  font-size: 0.95rem;
  font-style: italic;
}

.stay__meta {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-top: 1px solid var(--color-border);
  padding-top: 0.85rem;
}

.stay__price {
  color: var(--color-heading);
}

.stay__book {
  color: var(--color-primary);
  text-decoration: none;
}

.stay__book:hover {
  color: var(--color-primary-soft);
}

.travel-note {
  text-align: center;
  margin-top: 3.5rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-light);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   STAY · La Loggia property block — description, video, dimore, contacts
   ===================================================================== */

.loggia-block {
  margin-top: 5rem;
  display: grid;
  gap: 3rem;
}

.loggia-block__intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.loggia-block__intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.loggia-block__quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: center;
  max-width: 720px;
  margin: 1rem auto 0;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.loggia-block__quote::before,
.loggia-block__quote::after {
  content: '—';
  color: var(--color-secondary-deep);
  margin: 0 0.5rem;
  font-style: normal;
}

/* Video — responsive 16:9 wrapper. Works for <iframe> (Vimeo / YouTube)
   and for <video> tags. The src is filled in later. */
.loggia-video {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-deep);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.loggia-video iframe,
.loggia-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.loggia-video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-text-light);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
}

.loggia-video__placeholder em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary-deep);
}

/* The 4 dimore — same look as .stay__card grid */
.dimore-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.dimore-title em {
  font-style: italic;
  color: var(--color-primary);
}

.dimore-lede {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: var(--color-text);
  font-size: 1rem;
}

.dimore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.dimore-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.5rem 1.4rem;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.dimore-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}

.dimore-card__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.dimore-card__name em {
  font-style: italic;
  color: var(--color-primary);
}

.dimore-card__role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-secondary-deep);
  margin-bottom: 0.75rem;
}

.dimore-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
}

/* Contact strip below the dimore */
.loggia-contact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem 2.5rem;
  text-align: center;
  display: grid;
  gap: 1.25rem;
}

.loggia-contact__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 0.25rem;
}

.loggia-contact__title em {
  font-style: italic;
  color: var(--color-primary);
}

.loggia-contact__rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.5rem;
  font-size: 0.95rem;
}

.loggia-contact__rows a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--transition-base);
}

.loggia-contact__rows a:hover {
  border-bottom-color: var(--color-primary);
}

.loggia-contact__address {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-light);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .loggia-contact {
    padding: 1.5rem 1.25rem;
  }
  .loggia-contact__rows {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* =====================================================================
   FOOTER
   ===================================================================== */

/* F1 footer — white background, calligraphic signature, gold accents */
.footer {
  background: var(--color-footer-bg);   /* white per A5 spec */
  color: var(--color-text);
  padding: 4rem 1.5rem 2.5rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

/* F1 signature — calligraphic "Gabriele & Letizia" */
.footer__signature {
  font-family: 'Allura', cursive;
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  line-height: 1;
  color: var(--color-heading);
  margin-bottom: 0.4rem;
  font-weight: 400;
}

/* Legacy class kept for safety — same styling as signature */
.footer__monogram {
  font-family: 'Allura', cursive;
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  line-height: 1;
  color: var(--color-heading);
  font-style: normal;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}

.footer__monogram .amp {
  font-style: normal;
  color: inherit;
}

.footer__date {
  font-family: var(--font-mono);
  color: var(--color-primary);          /* warm nocciola */
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Subtle gold rule between date and nav (F1 detail) */
.footer__rule {
  width: 60px;
  height: 1px;
  background: var(--color-primary);     /* warm nocciola */
  opacity: 0.55;
  margin: 0 auto 2.5rem;
}

.footer__nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.footer__nav a {
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer__nav a:hover {
  color: var(--color-primary);          /* nocciola on hover */
}

.footer__lang {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.footer__lang button {
  padding: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: color var(--transition-base);
}

.footer__lang button.active,
.footer__lang button:hover {
  color: var(--color-primary);
}

.footer__lang span { color: var(--color-border); }

.footer__credit {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-light);
  letter-spacing: 0;
  text-transform: none;
}

.footer__credit em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  color: var(--color-primary);          /* heart in nocciola */
  letter-spacing: 0;
  font-size: 1rem;
  margin: 0 0.3rem;
}

/* =====================================================================
   LANDING PAGE TEASERS — Story / Venue / Schedule preview blocks
   ===================================================================== */

.teaser {
  padding: clamp(4rem, 8vw, 7rem) 1.5rem;
}

.teaser--surface { background: var(--color-surface); }
.teaser--deep    { background: var(--color-surface-deep); }

.teaser__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.teaser__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 880px) {
  .teaser__inner--split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.teaser__image {
  height: 100%;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

/* On mobile: shrink height + scale image dynamically to fit (no zoom crop).
   The aspect ratio of the photo is preserved. */
@media (max-width: 880px) {
  .teaser__image {
    min-height: 0;
    aspect-ratio: 4 / 3;        /* dynamic — adapts to viewport width */
    height: auto;
    background-size: cover;     /* still fills the box, but the box is now sized to the photo */
    background-position: center;
  }
}

.teaser__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-heading);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.teaser__title em {
  font-style: italic;
  color: var(--color-primary);
}

.teaser__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.teaser-cta {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-secondary-deep);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.teaser-cta:hover {
  color: var(--color-primary-soft);
  border-bottom-color: var(--color-primary);
}

/* Schedule teaser — 3 highlight rows */
.teaser__schedule {
  list-style: none;
  margin: 1.5rem 0 1rem;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.teaser__schedule li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.teaser__schedule .time {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.teaser__schedule .what {
  color: var(--color-text);
  font-size: 1rem;
}

.teaser__schedule .what strong {
  color: var(--color-heading);
  font-weight: 500;
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

/* =====================================================================
   TESTIMONI / WEDDING PARTY
   ===================================================================== */

.testimoni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  margin-top: 2rem;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.testimoni-group-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-heading);
  text-align: center;
  margin: 5rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.testimoni-group-title:first-of-type {
  margin-top: 1.5rem;
}

.testimoni-group-title::before,
.testimoni-group-title::after {
  content: '';
  flex: 0 0 40px;
  height: 1px;
  background: var(--color-secondary-deep);
  opacity: 0.7;
}

.testimoni-group-title em {
  font-style: italic;
  color: var(--color-primary);
}

.testimoni-card {
  text-align: center;
}

.testimoni-card__portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  margin-bottom: 1.25rem;
  position: relative;
}

.testimoni-card__portrait.placeholder-img {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Stylised avatar placeholders (SVG data URIs) ─────────────────────
   Six minimal portraits in champagne+bordeaux tones — used until the
   real photos are dropped in. To replace one, change the matching
   .avatar--* rule to use background-image: url('images/<filename>'). */

.avatar {
  background-color: #f3ebe1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Karolina — brunette, long hair */
.avatar--brunette-long {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23f3ebe1'/><path d='M50 200 Q40 130 60 95 Q70 60 100 55 Q130 60 140 95 Q160 130 150 200 Z' fill='%233a2418'/><circle cx='100' cy='95' r='30' fill='%23e8d4c0'/><path d='M75 95 Q70 75 80 70 Q100 60 120 70 Q130 75 125 95 Q120 80 100 80 Q80 80 75 95 Z' fill='%233a2418'/><circle cx='90' cy='95' r='2' fill='%23a88a5e'/><circle cx='110' cy='95' r='2' fill='%23a88a5e'/><path d='M93 110 Q100 113 107 110' stroke='%23a88a5e' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M85 130 Q100 140 115 130 Q105 200 100 200 Q95 200 85 130 Z' fill='%23e8d4c0'/></svg>");
}

/* Caterina — brunette, medium hair, soft waves */
.avatar--brunette-medium {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23f3ebe1'/><path d='M62 160 Q50 120 65 90 Q75 60 100 55 Q125 60 135 90 Q150 120 138 160 Z' fill='%234a2a1a'/><circle cx='100' cy='95' r='30' fill='%23e8d4c0'/><path d='M73 90 Q72 72 85 68 Q100 62 118 70 Q128 76 127 90 Q120 78 100 78 Q82 80 73 90 Z' fill='%234a2a1a'/><circle cx='90' cy='95' r='2' fill='%23a88a5e'/><circle cx='110' cy='95' r='2' fill='%23a88a5e'/><path d='M94 110 Q100 113 106 110' stroke='%23a88a5e' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M88 130 Q100 138 112 130 Q108 200 100 200 Q92 200 88 130 Z' fill='%23e8d4c0'/></svg>");
}

/* Elisa — brunette, bob cut */
.avatar--brunette-bob {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23f3ebe1'/><path d='M68 130 Q65 100 75 80 Q85 58 100 55 Q115 58 125 80 Q135 100 132 130 L120 130 L120 100 L80 100 L80 130 Z' fill='%23422518'/><circle cx='100' cy='100' r='28' fill='%23e8d4c0'/><path d='M75 95 Q72 75 88 68 Q100 62 112 68 Q128 75 125 95 Q118 82 100 82 Q82 82 75 95 Z' fill='%23422518'/><circle cx='91' cy='100' r='2' fill='%23a88a5e'/><circle cx='109' cy='100' r='2' fill='%23a88a5e'/><path d='M94 113 Q100 116 106 113' stroke='%23a88a5e' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M88 130 Q100 138 112 130 Q110 200 100 200 Q90 200 88 130 Z' fill='%23e8d4c0'/></svg>");
}

/* Gianluca — blond, short hair */
.avatar--blond-short {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23f3ebe1'/><circle cx='100' cy='95' r='32' fill='%23e8d4c0'/><path d='M70 88 Q70 65 85 60 Q100 55 115 60 Q130 65 130 88 Q120 75 100 75 Q80 75 70 88 Z' fill='%23c5a572'/><circle cx='90' cy='95' r='2' fill='%23a88a5e'/><circle cx='110' cy='95' r='2' fill='%23a88a5e'/><path d='M93 113 Q100 116 107 113' stroke='%23a88a5e' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M85 130 Q100 138 115 130 Q113 200 100 200 Q87 200 85 130 Z' fill='%23e8d4c0'/></svg>");
}

/* Jacopo — brunette, tousled */
.avatar--brunette-tousled {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23f3ebe1'/><circle cx='100' cy='95' r='32' fill='%23e8d4c0'/><path d='M68 90 Q65 60 80 55 Q90 50 100 56 Q108 50 120 55 Q135 60 132 90 Q125 78 115 80 Q108 70 100 78 Q92 70 85 80 Q75 78 68 90 Z' fill='%233a2418'/><circle cx='90' cy='95' r='2' fill='%23a88a5e'/><circle cx='110' cy='95' r='2' fill='%23a88a5e'/><path d='M93 113 Q100 116 107 113' stroke='%23a88a5e' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M85 130 Q100 138 115 130 Q113 200 100 200 Q87 200 85 130 Z' fill='%23e8d4c0'/></svg>");
}

/* Marco — brunette, side part */
.avatar--brunette-side {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><rect width='200' height='200' fill='%23f3ebe1'/><circle cx='100' cy='95' r='32' fill='%23e8d4c0'/><path d='M70 88 Q67 62 82 58 Q92 54 100 60 L98 80 Q90 78 78 85 Q72 80 70 88 Z' fill='%233a2418'/><path d='M100 60 Q108 54 118 58 Q133 62 132 88 Q120 78 105 80 Q103 70 100 60 Z' fill='%233a2418'/><circle cx='90' cy='95' r='2' fill='%23a88a5e'/><circle cx='110' cy='95' r='2' fill='%23a88a5e'/><path d='M93 113 Q100 116 107 113' stroke='%23a88a5e' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M85 130 Q100 138 115 130 Q113 200 100 200 Q87 200 85 130 Z' fill='%23e8d4c0'/></svg>");
}

.testimoni-card__role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.testimoni-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-heading);
  margin-bottom: 0.6rem;
}

.testimoni-card__bio {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 240px;
  margin: 0 auto;
}

/* =====================================================================
   PASSWORD GATE OVERLAY (RSVP, Vendors)
   ===================================================================== */

.gate-overlay {
  position: fixed;
  top: var(--nav-height);   /* leaves the nav visible above the gate */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;              /* below the nav (z-index 100) so nav stays interactive */
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.4s ease;
  overflow-y: auto;
}

.gate-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.gate-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 3rem 2rem;
  box-shadow: var(--card-shadow);
}

.gate-card h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-heading);
}

.gate-card h2 em {
  font-style: italic;
  color: var(--color-primary);
}

.gate-card .gate-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.gate-card p {
  color: var(--color-text);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gate-input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-heading);
  transition: border-color var(--transition-base);
  text-align: center;
  letter-spacing: 0.1em;
}

.gate-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.gate-error {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  height: 1rem;
}

.gate-error.show { opacity: 1; }

.gate-back {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition-base);
}

.gate-back:hover { color: var(--color-primary); }

.gate-card.shake {
  animation: gateShake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes gateShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.gate-protected {
  transition: opacity 0.4s ease;
}

.gate-protected.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
}

/* =====================================================================
   FORMS — RSVP
   ===================================================================== */

.form {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.form-field {
  margin-bottom: 2.25rem;
}

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  margin-bottom: 0.65rem;
}

.form-label-required::after {
  content: ' *';
  color: var(--color-primary-soft);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-heading);
  transition: border-color var(--transition-base);
}

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

.form-textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-body);
}

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.form-radio {
  flex: 1 1 auto;
  min-width: 110px;
  position: relative;
}

.form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-radio label {
  display: block;
  padding: 0.85rem 1rem;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: all var(--transition-base);
}

.form-radio input[type="radio"]:checked + label {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.form-radio input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-actions {
  margin-top: 3rem;
  text-align: center;
}

.form-success {
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.form-success.hidden { display: none; }

.form-success h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.form-success p {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.6;
}

/* =====================================================================
   VENDORS
   ===================================================================== */

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

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

.vendor-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.vendor-category {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vendor-category .icon {
  font-size: 1rem;
  letter-spacing: 0;
}

.vendor-logo {
  height: 100px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* When the logo is a real <img> instead of a placeholder div */
img.vendor-logo {
  width: 100%;
  height: 100px;
  object-fit: contain;
  object-position: center;
  background: var(--color-surface);
  padding: 0.75rem;
}

/* For logos that are white-on-transparent — give them a dark backdrop */
img.vendor-logo--dark-bg {
  background: var(--color-heading);  /* deep ink */
}

.vendor-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-heading);
}

.vendor-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-primary);
  margin-top: -0.4rem;
  margin-bottom: 0.4rem;
}

.vendor-meta {
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-text);
}

.vendor-meta dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.1rem;
}

.vendor-meta dd a {
  color: var(--color-primary);
}

.vendor-notes {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
  font-style: italic;
  color: var(--color-text-light);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Vendor page header — minimal, no full nav */
.vendor-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--color-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-border);
  display: flex;
  align-items: center;
  z-index: 100;
}

.vendor-header__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.back-arrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.back-arrow:hover { color: var(--color-primary); }

.vendor-header__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-heading);
  text-align: center;
  flex: 1 1 auto;
}

.vendor-confidential {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: 1rem;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1100px) {
  /* 8 nav items + brand + lang toggle is too wide for tablets — collapse to hamburger earlier */
  .nav__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    border-top: 1px solid var(--color-border);
    transform: translateY(-110%);
    transition: transform var(--transition-base);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }

  .nav__links.open {
    transform: translateY(0);
  }

  .nav__links a,
  .nav:not(.scrolled) .nav__links a {
    color: var(--color-text);
    text-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
  }

  .nav__menu-toggle {
    display: flex;
  }

  .nav__menu-toggle.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .nav__menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav__menu-toggle.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .venue__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .venue__image {
    min-height: 320px;
  }

  .schedule__item {
    grid-template-columns: 80px 1fr;
    gap: 1.25rem;
  }

  .schedule__time {
    font-size: 1.25rem;
  }

  .story__stop {
    flex: 0 0 280px;
  }
}

@media (max-width: 600px) {
  :root {
    --section-padding: clamp(3rem, 12vw, 5rem);
  }

  /* Hero on mobile: smaller height + photo positioned higher to keep castle in view */
  .hero {
    min-height: 80vh;
    padding: calc(var(--nav-height) + 2rem) 1rem 3rem;
  }

  .hero__bg {
    background-position: center 30%;       /* show top portion of the photo, not center */
  }

  .hero__names {
    font-size: clamp(2rem, 9vw, 3.4rem);    /* even smaller on mobile so it fits on one line */
    padding: 0 0.5rem;
  }

  /* Meta line: force on a single row, shrink as needed */
  .hero__meta {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.5rem;
    overflow: hidden;
    max-width: 100%;
  }
  .hero__meta .dot { flex-shrink: 0; }

  /* Countdown: 4 units side-by-side on a single row */
  .countdown {
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .countdown__unit {
    min-width: 0;
    padding: 0.25rem 0.4rem;
    flex: 1 1 0;
  }

  .countdown__num {
    font-size: 1.55rem;
  }

  .countdown__label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    margin-top: 0.25rem;
  }

  .schedule__item {
    grid-template-columns: 60px 1fr;
    gap: 1rem;
  }

  .schedule__time {
    font-size: 1.05rem;
  }

  /* Story page: stack stops vertically on small screens — easier than horizontal swiping */
  .story__scroll {
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    padding: 0 0 2rem;
  }
  .story__track {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1.5rem;
  }
  .story__track::before { display: none; }
  .story__stop {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: none;
  }
  .story__hint { display: none; }

  .footer__nav {
    flex-direction: column;
    gap: 0.75rem;
  }

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

  .todo__item {
    grid-template-columns: 2rem 120px 1fr;
    gap: 1.25rem;
    padding: 1.75rem 0;
  }

  .todo__img {
    width: 120px;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__bg {
    transform: none !important;
  }

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