/* ====================================================================
   Vela Arte — Editorial Cinema
   Design system + homepage styles
   ==================================================================== */

:root {
  --bg: #0E0E0E;
  --bg-soft: #161514;
  --bg-elev: #1B1A18;
  --cream: #F5F1E8;
  --cream-dim: #E5DFD0;
  --muted: #8A847A;
  --line: #2A2724;
  --gold: #C9A961;
  --gold-deep: #A8884B;
  --sienna: #B86A3F;

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --container: 1280px;
  --container-narrow: 880px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --section-y: clamp(5rem, 10vw, 9rem);

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .35s var(--ease), opacity .35s var(--ease); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--gold); color: var(--bg); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.h-xl { font-size: clamp(3rem, 9vw, 8rem); }
.h-lg { font-size: clamp(2.4rem, 6vw, 5rem); }
.h-md { font-size: clamp(1.8rem, 3.5vw, 3rem); }
.italic { font-style: italic; color: var(--cream-dim); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--cream-dim); max-width: 56ch; line-height: 1.6; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
section { padding: var(--section-y) 0; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.75rem;
  border: 1px solid var(--cream);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:hover { background: var(--cream); color: var(--bg); transform: translateY(-1px); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-gold:hover { background: var(--gold); color: var(--bg); }

.btn-ghost { border: none; padding-left: 0; padding-right: 0; }
.btn-ghost::after { content: ""; display: block; width: 100%; height: 1px; background: currentColor; transform: scaleX(.5); transform-origin: left; transition: transform .4s var(--ease); margin-top: .35rem; }
.btn-ghost:hover { color: var(--gold); }
.btn-ghost:hover::after { transform: scaleX(1); }

/* ====================================================================
   NAV
   ==================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled {
  background: rgba(14,14,14,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(245,241,232,.06);
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.nav__brand img {
  height: 22px; width: auto;
  filter: invert(1) brightness(1.05) contrast(1.1);
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.nav__brand .arte {
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  position: relative;
  top: 1px;
}
.nav__brand:hover img { opacity: .85; }
.nav__menu {
  display: flex;
  list-style: none;
  gap: 2.25rem;
  justify-content: center;
}
.nav__menu a {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  padding: .25rem 0;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__menu a:hover { color: var(--cream); }
.nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  justify-self: end;
  display: flex; align-items: center; gap: 1rem;
}
.nav__cta .lang {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
}
.nav__book {
  padding: .65rem 1.25rem;
  font-size: 11px;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.nav__book:hover { background: var(--gold); color: var(--bg); }

/* Mobile hamburger toggle — hidden on desktop */
.nav__toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  margin-left: .25rem;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  position: absolute;
  display: block;
  width: 22px; height: 1px;
  background: var(--cream);
  transition: transform .35s var(--ease), top .35s var(--ease), background .35s var(--ease);
}
.nav__toggle span { left: 7px; top: 50%; }
.nav__toggle span::before { content: ""; top: -7px; left: 0; }
.nav__toggle span::after  { content: ""; top: 7px;  left: 0; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before { top: 0; transform: rotate(45deg); background: var(--gold); }
.nav__toggle.is-open span::after  { top: 0; transform: rotate(-45deg); background: var(--gold); }

@media (max-width: 860px) {
  .nav { padding: .85rem 0; }
  .nav.scrolled { padding: .65rem 0; }
  .nav__inner { grid-template-columns: auto 1fr auto; gap: .75rem; }
  .nav__brand img { height: 18px; }
  .nav__cta { gap: .5rem; }
  .nav__cta .lang { display: none; }
  .nav__book { padding: .5rem .9rem; font-size: 10px; letter-spacing: .12em; }
  .nav__toggle { display: inline-block; }

  /* Slide-down mobile menu */
  .nav__menu {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 6rem clamp(1.5rem, 6vw, 3rem) 3rem;
    background: rgba(14,14,14,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    transform: translateY(-100%);
    transition: transform .45s var(--ease);
    list-style: none;
    z-index: 90;
    overflow-y: auto;
    max-height: 100vh;
    display: flex;
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__menu li { border-bottom: 1px solid var(--line); }
  .nav__menu a {
    display: block;
    padding: 1.4rem 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--cream);
    text-transform: none;
    letter-spacing: 0;
  }
  .nav__menu a::after { display: none; }
  .nav__menu a:hover { color: var(--gold); }
  body.menu-open { overflow: hidden; }
}

/* ====================================================================
   HERO
   ==================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  filter: contrast(1.05) saturate(.95);
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.15) 35%, rgba(14,14,14,.85) 100%),
    radial-gradient(1200px 600px at 80% 20%, rgba(201,169,97,.12), transparent 60%);
}
.hero__inner {
  width: 100%;
  padding-bottom: clamp(4rem, 9vw, 7rem);
  padding-top: 8rem;
}
.hero__eyebrow { margin-bottom: 1.75rem; opacity: 0; animation: fadeUp .9s var(--ease) .2s forwards; }
.hero__title {
  max-width: 18ch;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) .35s forwards;
}
.hero__title .em {
  font-style: italic;
  color: var(--gold);
  display: block;
}
.hero__sub {
  max-width: 48ch;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) .55s forwards;
}
.hero__cta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) .75s forwards;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .35em; text-transform: uppercase; color: var(--cream-dim);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  opacity: 0;
  animation: fadeIn 1.4s var(--ease) 1.4s forwards;
}
.hero__scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  background-size: 100% 200%;
  animation: scrollLine 2.4s linear infinite;
}
@keyframes scrollLine {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* tiny film ticks at edges */
.hero__ticks {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero__ticks::before, .hero__ticks::after {
  content: "";
  position: absolute; left: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem);
  height: 1px; background: rgba(245,241,232,.08);
}
.hero__ticks::before { top: 5rem; }
.hero__ticks::after  { bottom: 5rem; }

.hero__corner {
  position: absolute; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: rgba(245,241,232,.55); text-transform: uppercase;
}
.hero__corner.tl { top: 8rem; left: clamp(1.25rem, 4vw, 3rem); }
.hero__corner.tr { top: 8rem; right: clamp(1.25rem, 4vw, 3rem); text-align: right; }
.hero__corner.br { bottom: 2rem; right: clamp(1.25rem, 4vw, 3rem); text-align: right; }

/* On mobile the timestamps collide. Hide the top ones, keep just the bottom-right one. */
@media (max-width: 760px) {
  .hero__corner.tl,
  .hero__corner.tr { display: none; }
  .hero__corner.br { font-size: 9px; bottom: 1rem; }
  .hero__ticks::before { top: 4rem; }
  .hero__ticks::after  { bottom: 3.5rem; }
  .hero__inner { padding-top: 6rem; }
}

/* ====================================================================
   MARQUEE
   ==================================================================== */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0;
  overflow: hidden;
  background: var(--bg-soft);
}
.marquee__track {
  display: flex; gap: 4rem;
  white-space: nowrap;
  animation: scroll 38s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-style: italic;
  color: var(--cream-dim);
  display: inline-flex; align-items: center; gap: 4rem;
}
.marquee__track .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ====================================================================
   INTRO / EDITORIAL
   ==================================================================== */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.intro__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.intro__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.intro__media:hover img { transform: scale(1.04); }
.intro__media::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(245,241,232,.1);
  margin: 12px;
  pointer-events: none;
}
.intro__text .eyebrow { margin-bottom: 1.5rem; }
.intro__text h2 { margin-bottom: 1.75rem; }
.intro__text p + p { margin-top: 1.25rem; }
.intro__sig {
  margin-top: 2.5rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
}
.intro__sig small {
  display: block;
  font-family: var(--sans); font-style: normal;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); margin-top: .5rem;
}

@media (max-width: 800px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__media { aspect-ratio: 3/4; max-width: 480px; margin-inline: auto; }
}

/* ====================================================================
   DESTINATIONS
   ==================================================================== */
.destinations { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 { max-width: 16ch; }
.section-head .eyebrow { display: block; margin-bottom: 1rem; }

.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.dest {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg-elev);
  cursor: pointer;
  isolation: isolate;
}
.dest img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1s var(--ease);
  filter: brightness(.78) saturate(.95);
}
.dest:hover img { transform: scale(1.06); filter: brightness(.95) saturate(1); }
.dest__body {
  position: absolute; inset: 0;
  padding: 1.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 1;
  pointer-events: none;
}
.dest__top { display: flex; justify-content: space-between; align-items: flex-start; }
.dest__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  color: var(--cream-dim); opacity: .8;
}
.dest__price {
  font-family: var(--serif); font-size: 1.75rem; color: var(--gold);
  font-style: italic;
}
.dest__title {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
}
.dest__title small {
  display: block;
  font-family: var(--sans); font-size: 11px; letter-spacing: .25em;
  text-transform: uppercase; color: var(--cream-dim);
  margin-top: .5rem;
  font-style: normal;
}
.dest::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(14,14,14,.45) 0%, rgba(14,14,14,.1) 35%, rgba(14,14,14,.85) 100%);
  transition: opacity .5s var(--ease);
}
.dest:hover::after { opacity: .7; }

@media (max-width: 900px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dest-grid { grid-template-columns: 1fr; } .section-head { grid-template-columns: 1fr; }}

/* ====================================================================
   EXPERIENCES
   ==================================================================== */
.exp__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.exp__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2.25rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: background .4s var(--ease);
}
.exp__item:nth-child(odd) { border-right: 1px solid var(--line); }
.exp__item:hover { background: var(--bg-soft); }
.exp__item:hover .exp__title { color: var(--gold); }
.exp__num { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .15em; }
.exp__title { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.85rem); transition: color .4s var(--ease); line-height: 1.2; }
.exp__title small { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; font-weight: 400; }
.exp__icon { font-size: 1.25rem; color: var(--gold); transition: transform .4s var(--ease); }
.exp__item:hover .exp__icon { transform: rotate(45deg); }

@media (max-width: 760px) {
  .exp__list { grid-template-columns: 1fr; }
  .exp__item:nth-child(odd) { border-right: none; }
  .exp__item { grid-template-columns: 50px 1fr auto; gap: 1rem; }
}

/* ====================================================================
   GALLERY (magazine grid)
   ==================================================================== */
.gallery { background: var(--bg); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 90px;
  gap: 1rem;
}
.gallery-grid figure { position: relative; overflow: hidden; }
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease), filter 1s var(--ease);
  filter: brightness(.95);
}
.gallery-grid figure:hover img { transform: scale(1.05); filter: brightness(1.05); }
.g1 { grid-column: span 5; grid-row: span 6; }
.g2 { grid-column: span 4; grid-row: span 4; }
.g3 { grid-column: span 3; grid-row: span 4; }
.g4 { grid-column: span 4; grid-row: span 5; }
.g5 { grid-column: span 3; grid-row: span 5; }
.g6 { grid-column: span 5; grid-row: span 4; }

@media (max-width: 800px) {
  .gallery-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 70px; }
  .g1 { grid-column: span 6; grid-row: span 5; }
  .g2 { grid-column: span 3; grid-row: span 3; }
  .g3 { grid-column: span 3; grid-row: span 3; }
  .g4 { grid-column: span 4; grid-row: span 4; }
  .g5 { grid-column: span 2; grid-row: span 4; }
  .g6 { grid-column: span 6; grid-row: span 3; }
}

/* ====================================================================
   PROCESS / HOW IT WORKS
   ==================================================================== */
.process { background: var(--bg-soft); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
.process-step {
  border-top: 1px solid var(--gold);
  padding-top: 1.75rem;
}
.process-step__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; color: var(--gold);
  display: block; margin-bottom: 1.25rem;
}
.process-step h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 1rem; line-height: 1.2; }
.process-step p { color: var(--cream-dim); font-size: .95rem; line-height: 1.7; }

@media (max-width: 720px) { .process-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ====================================================================
   QUOTE / TESTIMONIAL
   ==================================================================== */
.quote {
  text-align: center;
  position: relative;
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: clamp(7rem, 14vw, 12rem);
}
.quote::before {
  content: "“";
  position: absolute;
  top: clamp(2rem, 5vw, 4rem); left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(8rem, 20vw, 16rem);
  color: var(--gold);
  opacity: .15;
  line-height: .8;
  font-style: italic;
}
.quote__text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  max-width: 28ch;
  margin: 0 auto 2.5rem;
  color: var(--cream);
}
.quote__author {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold);
}
.quote__author span { color: var(--muted); margin-left: .5rem; }

/* ====================================================================
   BLOG / JOURNAL
   ==================================================================== */
.journal {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.j-card {
  cursor: pointer;
}
.j-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.j-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.j-card:hover .j-card__img img { transform: scale(1.05); }
.j-card__meta {
  display: flex; gap: 1.5rem; align-items: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem;
}
.j-card__meta .cat { color: var(--gold); }
.j-card h3 {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.3;
  transition: color .35s var(--ease); font-weight: 400;
}
.j-card:hover h3 { color: var(--gold); }

@media (max-width: 800px) { .journal-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* ====================================================================
   FINAL CTA
   ==================================================================== */
.final-cta {
  position: relative;
  padding: clamp(6rem, 12vw, 10rem) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.final-cta__bg {
  position: absolute; inset: 0; z-index: -2;
}
.final-cta__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.4) saturate(.85);
}
.final-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at center, rgba(14,14,14,.55) 0%, rgba(14,14,14,.95) 100%);
}
.final-cta h2 { max-width: 18ch; margin: 0 auto 1.5rem; }
.final-cta p { max-width: 50ch; margin: 0 auto 2.5rem; color: var(--cream-dim); }
.final-cta__buttons { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer {
  background: var(--bg-soft);
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer__brand h4 {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.25rem;
}
.footer__brand h4 img {
  height: 28px; width: auto;
  filter: invert(1) brightness(1.05);
}
.footer__brand h4 .arte {
  font-family: var(--serif); font-style: italic;
  font-size: 1rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold);
  font-weight: 300;
}
.footer__brand p { font-size: .9rem; color: var(--cream-dim); max-width: 32ch; }
.footer__col h5 {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem; font-weight: 500;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.footer__col a { font-size: .9rem; color: var(--cream-dim); }
.footer__col a:hover { color: var(--gold); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 1rem;
}

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   WhatsApp floating button
   ==================================================================== */
.wa-fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37,211,102,.5); }

/* ====================================================================
   STATS / CRAFT
   ==================================================================== */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats__item {
  padding: 3rem clamp(1rem, 2vw, 2rem);
  text-align: center;
  border-right: 1px solid var(--line);
}
.stats__item:last-child { border-right: none; }
.stats__num {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-style: italic;
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: .75rem;
}
.stats__label {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--cream-dim);
}
@media (max-width: 700px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: none; }
  .stats__item:nth-child(1), .stats__item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ====================================================================
   FEATURES / What You Get
   ==================================================================== */
.craft { background: var(--bg-soft); }
.craft__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 4rem;
}
.craft__item {
  background: var(--bg-soft);
  padding: 2.5rem;
  transition: background .4s var(--ease);
}
.craft__item:hover { background: var(--bg-elev); }
.craft__icon {
  width: 44px; height: 44px;
  border: 1px solid var(--gold); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 1.1rem;
}
.craft__item h4 {
  font-family: var(--serif); font-size: 1.35rem;
  margin-bottom: .75rem; line-height: 1.25;
}
.craft__item p { color: var(--cream-dim); font-size: .92rem; line-height: 1.7; }
@media (max-width: 800px) { .craft__grid { grid-template-columns: 1fr; } }

/* ====================================================================
   SERVICES (homepage compact)
   ==================================================================== */
.services { background: var(--bg); }
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
}
.svc-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-soft);
  transition: border-color .4s var(--ease);
}
.svc-card:hover { border-color: var(--gold); }
.svc-card__img { aspect-ratio: 4/5; overflow: hidden; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.svc-card:hover .svc-card__img img { transform: scale(1.05); }
.svc-card__body { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; }
.svc-card__body h3 { font-family: var(--serif); font-size: 1.65rem; margin-bottom: 1rem; line-height: 1.2; }
.svc-card__body p { color: var(--cream-dim); font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; }
.svc-card__body ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.5rem; }
.svc-card__body li { font-size: .85rem; color: var(--cream-dim); padding-left: 1.25rem; position: relative; }
.svc-card__body li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
@media (max-width: 1000px) { .services__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .svc-card { grid-template-columns: 1fr; } .svc-card__img { aspect-ratio: 16/10; } }

/* ====================================================================
   PAGE HERO (interior pages, smaller than homepage hero)
   ==================================================================== */
.page-hero {
  position: relative;
  padding: clamp(9rem, 18vw, 14rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--page-hero-img, none);
  background-size: cover; background-position: center 40%;
  filter: brightness(.45) saturate(.9);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,14,14,.5) 0%, rgba(14,14,14,.3) 30%, rgba(14,14,14,.85) 100%),
    radial-gradient(1000px 500px at 70% 20%, rgba(201,169,97,.1), transparent 60%);
}
.page-hero__inner {
  text-align: center;
  position: relative;
}
.page-hero h1 { margin: 1.25rem auto 1.5rem; max-width: 18ch; }
.page-hero .lede { margin: 0 auto; }

/* breadcrumb */
.crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-dim);
  display: inline-flex; gap: .65rem; align-items: center;
}
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { color: var(--gold); opacity: .6; }

/* ====================================================================
   DESTINATION DETAIL CARDS (pricing list page)
   ==================================================================== */
.dest-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  align-items: stretch;
}
.dest-detail:last-of-type { border-bottom: 1px solid var(--line); }
.dest-detail__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-elev);
}
.dest-detail__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.dest-detail:hover .dest-detail__media img { transform: scale(1.04); }
.dest-detail__body {
  padding: clamp(2rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--line);
}
.dest-detail.reverse { grid-template-columns: 1fr 1.2fr; }
.dest-detail.reverse .dest-detail__body { border-left: none; border-right: 1px solid var(--line); order: -1; }

.dest-detail__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em;
  color: var(--gold); margin-bottom: 1rem;
}
.dest-detail__title {
  font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05; margin-bottom: .5rem;
}
.dest-detail__sub {
  font-style: italic; color: var(--cream-dim);
  font-family: var(--serif); font-size: 1.2rem; margin-bottom: 1.5rem;
}
.dest-detail__desc {
  color: var(--cream-dim); margin-bottom: 2rem; max-width: 50ch;
}
.dest-detail__meta {
  display: flex; gap: 2.5rem; align-items: baseline;
  margin-bottom: 2rem;
}
.dest-detail__price {
  font-family: var(--serif); font-style: italic;
  font-size: 2.5rem; color: var(--gold); line-height: 1;
}
.dest-detail__price-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-top: .25rem;
}
.dest-detail__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 800px) {
  .dest-detail, .dest-detail.reverse { grid-template-columns: 1fr; }
  .dest-detail__body, .dest-detail.reverse .dest-detail__body { border: none; order: 0; }
}

/* ====================================================================
   EXPERIENCE BLOCK
   ==================================================================== */
.exp-block {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.exp-block:last-of-type { border-bottom: 1px solid var(--line); }
.exp-block__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.exp-block__media {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.exp-block__media img { width: 100%; height: 100%; object-fit: cover; }
.exp-block.reverse .exp-block__grid { direction: rtl; }
.exp-block.reverse .exp-block__grid > * { direction: ltr; }
.exp-block__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  color: var(--gold); margin-bottom: 1.25rem; display: block;
}
.exp-block h3 { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.05; margin-bottom: 1rem; }
.exp-block__sub { font-style: italic; font-family: var(--serif); color: var(--cream-dim); font-size: 1.2rem; margin-bottom: 1.5rem; }
.exp-block__desc { color: var(--cream-dim); margin-bottom: 2rem; max-width: 56ch; }
.exp-block__features { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.exp-block__features li { display: flex; gap: 1rem; align-items: flex-start; color: var(--cream-dim); font-size: .95rem; }
.exp-block__features li::before { content: "—"; color: var(--gold); }
.exp-block__price { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; font-size: 1.1rem; }
.exp-block__price strong { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--gold); }

@media (max-width: 850px) {
  .exp-block__grid { grid-template-columns: 1fr; }
  .exp-block.reverse .exp-block__grid { direction: ltr; }
}

/* ====================================================================
   GALLERY PAGE GRID (full)
   ==================================================================== */
.gallery-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery-page figure {
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}
.gallery-page figure:nth-child(7n+1) { aspect-ratio: 3/4; }
.gallery-page figure:nth-child(7n+2) { aspect-ratio: 4/3; }
.gallery-page figure:nth-child(7n+3) { aspect-ratio: 1/1; }
.gallery-page figure:nth-child(7n+4) { aspect-ratio: 3/4; }
.gallery-page figure:nth-child(7n+5) { aspect-ratio: 4/5; }
.gallery-page figure:nth-child(7n+6) { aspect-ratio: 4/3; }
.gallery-page figure:nth-child(7n) { aspect-ratio: 3/4; }
.gallery-page img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease), filter 1s var(--ease);
}
.gallery-page figure:hover img { transform: scale(1.04); }
@media (max-width: 800px) { .gallery-page { grid-template-columns: repeat(2, 1fr); } }

.gallery-filter {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 3rem;
}
.gallery-filter button {
  padding: .5rem 1.25rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: all .35s var(--ease);
}
.gallery-filter button:hover { color: var(--gold); border-color: var(--gold); }
.gallery-filter button.active { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* ====================================================================
   ABOUT PAGE
   ==================================================================== */
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
.about-value {
  border-top: 1px solid var(--gold);
  padding-top: 1.5rem;
}
.about-value__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em;
  color: var(--gold); margin-bottom: 1rem; display: block;
}
.about-value h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .75rem; }
.about-value p { color: var(--cream-dim); font-size: .95rem; }

@media (max-width: 750px) { .about-values { grid-template-columns: 1fr; } }

/* ====================================================================
   FAQ ACCORDION
   ==================================================================== */
.faq-list {
  border-top: 1px solid var(--line);
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.75rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans); font-size: 1.5rem; color: var(--gold);
  transition: transform .35s var(--ease);
}
.faq-item[open] summary { color: var(--gold); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body {
  padding: 0 0 1.75rem;
  color: var(--cream-dim);
  max-width: 70ch;
  line-height: 1.75;
}
.faq-item__body p + p { margin-top: 1rem; }

/* ====================================================================
   CONTACT PAGE
   ==================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-form {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-form label {
  display: flex; flex-direction: column; gap: .5rem;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  padding: .75rem 0;
  font-family: var(--sans); font-size: 1rem;
  transition: border-color .3s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--gold);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form select { appearance: none; background: var(--bg-soft); padding: .75rem 1rem; border: 1px solid var(--line); }
.contact-form button[type="submit"] {
  margin-top: 1rem;
  align-self: flex-start;
}
.contact-info {
  background: var(--bg-soft); padding: 2.5rem; border: 1px solid var(--line);
}
.contact-info h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 1.5rem; }
.contact-info dl { display: grid; gap: 1.25rem; }
.contact-info dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .25rem; }
.contact-info dd { color: var(--cream-dim); font-size: .95rem; }
.contact-info dd a:hover { color: var(--gold); }
.contact-info__socials { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.contact-info__socials a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .35s var(--ease);
}
.contact-info__socials a:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 850px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* ====================================================================
   BOOKING PAGE
   ==================================================================== */
.booking-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.booking-summary {
  background: var(--bg-soft); padding: 2.5rem; border: 1px solid var(--line);
  position: sticky; top: 6rem;
}
.booking-summary__title {
  font-family: var(--serif); font-size: 1.5rem; margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.booking-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .75rem 0; font-size: .9rem; color: var(--cream-dim);
}
.booking-summary__row span:last-child { color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.booking-summary__total {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.booking-summary__total span:first-child { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.booking-summary__total span:last-child { font-family: var(--serif); font-style: italic; font-size: 2.5rem; color: var(--gold); }

.booking-options {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 2rem;
}
.booking-option {
  border: 1px solid var(--line);
  padding: 1.25rem;
  cursor: pointer;
  transition: all .35s var(--ease);
  text-align: center;
}
.booking-option:hover, .booking-option.selected {
  border-color: var(--gold); color: var(--cream);
  background: var(--bg-soft);
}
.booking-option.selected { background: rgba(201,169,97,.08); }
.booking-option strong { display: block; font-family: var(--serif); font-size: 1.15rem; margin-bottom: .25rem; }
.booking-option small { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 850px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-summary { position: static; }
  .booking-options { grid-template-columns: 1fr; }
}

/* ====================================================================
   BLOG / JOURNAL INDEX
   ==================================================================== */
.journal-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.journal-index .j-card {
  border-bottom: 1px solid var(--line);
  padding-bottom: 2rem;
}
@media (max-width: 850px) { .journal-index { grid-template-columns: 1fr; gap: 3rem; } }

.journal-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--line);
}
.journal-featured__img { aspect-ratio: 16/10; overflow: hidden; }
.journal-featured__img img { width: 100%; height: 100%; object-fit: cover; }
.journal-featured__meta { display: flex; gap: 1.5rem; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.journal-featured__meta .cat { color: var(--gold); }
.journal-featured h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin-bottom: 1.5rem; }
.journal-featured p { color: var(--cream-dim); margin-bottom: 2rem; }

@media (max-width: 850px) { .journal-featured { grid-template-columns: 1fr; gap: 2rem; } }

/* ====================================================================
   SINGLE POST
   ==================================================================== */
.post-hero {
  text-align: center;
  padding: clamp(8rem, 16vw, 13rem) 0 clamp(3rem, 5vw, 5rem);
}
.post-hero .crumbs { margin-bottom: 1.5rem; }
.post-hero h1 { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; max-width: 22ch; margin: 0 auto 1.5rem; }
.post-hero__meta { display: inline-flex; gap: 2rem; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.post-hero__meta .cat { color: var(--gold); }
.post-cover {
  aspect-ratio: 16/9; overflow: hidden;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body {
  max-width: 720px; margin: 0 auto;
  font-size: 1.1rem; line-height: 1.85; color: var(--cream-dim);
}
.post-body h2, .post-body h3 {
  font-family: var(--serif); color: var(--cream);
  margin: 3rem 0 1rem; line-height: 1.2;
}
.post-body h2 { font-size: 2rem; }
.post-body h3 { font-size: 1.5rem; }
.post-body p { margin-bottom: 1.5rem; }
.post-body strong { color: var(--cream); }
.post-body em { color: var(--gold); font-style: italic; }
.post-body blockquote {
  border-left: 2px solid var(--gold);
  padding: .5rem 0 .5rem 2rem;
  margin: 2rem 0;
  font-family: var(--serif); font-style: italic; font-size: 1.4rem;
  color: var(--cream);
}
.post-body img { margin: 2rem 0; width: 100%; }
.post-body ul, .post-body ol { margin: 1.5rem 0 1.5rem 1.5rem; }
.post-body li { margin-bottom: .65rem; }

/* ====================================================================
   GIFT VOUCHER
   ==================================================================== */
.voucher-card {
  max-width: 720px; margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 0% 0%, rgba(201,169,97,.08), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(184,106,63,.05), transparent 60%),
    var(--bg-soft);
  border: 1px solid var(--gold);
  position: relative;
  text-align: center;
}
.voucher-card::before, .voucher-card::after {
  content: ""; position: absolute;
  width: 30px; height: 30px;
  border: 1px solid var(--gold);
}
.voucher-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.voucher-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.voucher-card .stamp {
  display: inline-block; padding: .35rem 1rem;
  border: 1px solid var(--gold); color: var(--gold);
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  margin-bottom: 2rem;
}
.voucher-card h2 { margin-bottom: 1rem; }
.voucher-card .lede { margin: 0 auto 2rem; }
.voucher-card ul { list-style: none; margin: 2rem 0; }
.voucher-card li { padding: .75rem 0; color: var(--cream-dim); border-bottom: 1px solid var(--line); }
.voucher-card li:last-child { border: none; }
.voucher-card .footnote {
  margin-top: 2rem; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted);
}

/* ====================================================================
   PAGINATION (blog index, archive, search)
   ==================================================================== */
.pagination ul {
  list-style: none;
  display: inline-flex;
  gap: .5rem;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination ul li { display: inline-block; }
.pagination ul a,
.pagination ul .current,
.pagination ul .dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cream-dim);
  text-decoration: none;
  transition: all .35s var(--ease);
}
.pagination ul a:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.pagination ul .current {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.pagination ul .dots {
  border: none;
  color: var(--muted);
}

/* ====================================================================
   INTERACTIVE ITALY MAP (Destinations page)
   ==================================================================== */
.italy-map-section {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
	position: relative;
}
.italy-map-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1200px 600px at 70% 30%, rgba(201,169,97,.05), transparent 60%),
		radial-gradient(800px 400px at 20% 80%, rgba(184,106,63,.04), transparent 60%);
	pointer-events: none;
}
.italy-map-wrap {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	position: relative;
}
.italy-map {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	aspect-ratio: 400 / 600;
}
.italy-map svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}
.italy-map .country path,
.italy-map .country polygon,
.italy-map .country ellipse {
	fill: var(--bg-elev);
	stroke: var(--gold);
	stroke-width: .8;
	stroke-linejoin: round;
	stroke-opacity: .65;
	transition: fill .5s var(--ease), stroke-opacity .5s var(--ease);
}
.italy-map:hover .country path,
.italy-map:hover .country polygon,
.italy-map:hover .country ellipse {
	fill: var(--bg);
	stroke-opacity: .9;
}
.italy-map .grid-bg line {
	stroke: rgba(201,169,97,.06);
	stroke-width: .35;
	stroke-dasharray: 2 4;
}
.italy-map .pin {
	cursor: pointer;
	outline: none;
}
.italy-map .pin__dot {
	fill: var(--gold);
	stroke: var(--bg);
	stroke-width: 1.5;
	transition: r .3s var(--ease), fill .3s var(--ease);
}
.italy-map .pin__pulse {
	fill: var(--gold);
	pointer-events: none;
}
.italy-map .pin__label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	fill: var(--cream);
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s var(--ease);
	paint-order: stroke;
	stroke: rgba(14,14,14,.85);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.italy-map .pin:hover .pin__label,
.italy-map .pin:focus .pin__label,
.italy-map .pin.is-active .pin__label { opacity: 1; }
.italy-map .pin:hover .pin__dot,
.italy-map .pin:focus .pin__dot,
.italy-map .pin.is-active .pin__dot {
	fill: var(--cream);
	r: 6.5;
}
.italy-map .pin--featured .pin__dot { r: 5.5; }
.italy-map .pin--featured.is-active .pin__dot { r: 7.5; }
.italy-map__legend {
	position: absolute;
	bottom: -1.25rem;
	left: 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex; gap: 1.25rem;
}
.italy-map__legend strong { color: var(--gold); font-weight: 500; }

/* Side panel: shows hovered/selected pin info */
.italy-map-info {
	position: relative;
	padding: 0;
}
.italy-map-info__eyebrow {
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.25rem;
}
.italy-map-info h2 {
	font-family: var(--serif);
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.05;
	margin-bottom: 1.5rem;
}
.italy-map-info p { color: var(--cream-dim); margin-bottom: 1rem; max-width: 50ch; }
.italy-map-info .card {
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 1.25rem;
	transition: border-color .4s var(--ease), transform .4s var(--ease);
	opacity: 0;
	animation: cardFadeIn .5s var(--ease) forwards;
}
.italy-map-info .card:hover { border-color: var(--gold); }
.italy-map-info .card img {
	width: 96px; height: 96px;
	object-fit: cover;
	border-radius: 2px;
}
.italy-map-info .card h3 {
	font-family: var(--serif);
	font-size: 1.35rem;
	margin-bottom: .3rem;
}
.italy-map-info .card__meta {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .6rem;
}
.italy-map-info .card__desc {
	font-size: .85rem;
	line-height: 1.55;
	color: var(--cream-dim);
	max-width: none;
	margin: 0;
}
@keyframes cardFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
	.italy-map-wrap { grid-template-columns: 1fr; }
	.italy-map { max-width: 320px; }
	.italy-map-info { text-align: center; }
	.italy-map-info p, .italy-map-info .card { margin-inline: auto; }
}

/* ====================================================================
   DESTINATION CARD GRID (clean, no overlap)
   ==================================================================== */
.dest-grid-2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.dest-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.dest-card:hover {
	border-color: var(--gold);
	transform: translateY(-4px);
}
.dest-card__img {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
}
.dest-card__img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.6s var(--ease), filter 1s var(--ease);
	filter: brightness(.92);
}
.dest-card:hover .dest-card__img img {
	transform: scale(1.08);
	filter: brightness(1.02);
}
.dest-card__num {
	position: absolute;
	top: 1rem; left: 1rem;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--cream);
	background: rgba(14,14,14,.7);
	padding: .35rem .65rem;
	z-index: 2;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.dest-card__price {
	position: absolute;
	top: 1rem; right: 1rem;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--gold);
	background: rgba(14,14,14,.7);
	padding: .25rem .75rem;
	z-index: 2;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 999px;
}
.dest-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	flex: 1;
}
.dest-card__title {
	font-family: var(--serif);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--cream);
}
.dest-card__title small {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .35rem;
	font-style: normal;
}
.dest-card__desc {
	font-size: .9rem;
	line-height: 1.65;
	color: var(--cream-dim);
	flex: 1;
}
.dest-card__spots {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .5rem 0;
}
.dest-card__spots span {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .15em;
	color: var(--cream-dim);
	padding: .25rem .6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
}
.dest-card__cta {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.dest-card__cta .light {
	color: var(--muted);
}
.dest-card__cta .ask {
	color: var(--gold);
	font-weight: 500;
	transition: gap .35s var(--ease);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.dest-card:hover .dest-card__cta .ask { gap: .65rem; }
.dest-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

@media (max-width: 1000px) { .dest-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dest-grid-2 { grid-template-columns: 1fr; } }

/* ====================================================================
   CAMERA SHUTTER PAGE TRANSITION
   ==================================================================== */
.shutter {
	position: fixed;
	inset: 0;
	z-index: 10000;
	pointer-events: none;
	overflow: hidden;
}
.shutter__top,
.shutter__bottom {
	position: absolute;
	left: -2%;
	right: -2%;
	height: 52%; /* tiny overlap prevents a 1px gap at center */
	background: var(--bg);
	will-change: transform;
	transform: translateY(-101%);
	transition: transform .42s cubic-bezier(.76, 0, .24, 1);
}
.shutter__top    { top: 0; }
.shutter__bottom { bottom: 0; transform: translateY(101%); }

.shutter__flash {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(201,169,97,.18), transparent 55%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .14s ease-out;
	mix-blend-mode: screen;
}

.shutter__reticle {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(.7) rotate(-12deg);
	opacity: 0;
	transition: opacity .16s linear .14s, transform .42s cubic-bezier(.76, 0, .24, 1);
	display: flex; flex-direction: column; align-items: center; gap: .9rem;
	pointer-events: none;
}
.shutter__reticle svg { display: block; }
.shutter__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .4em;
	color: var(--gold);
	opacity: .85;
}

/* ─── Closed state (during transition) ─── */
.shutter.is-closing .shutter__top,
.shutter.is-closed  .shutter__top,
html.is-page-incoming .shutter .shutter__top { transform: translateY(0); }
.shutter.is-closing .shutter__bottom,
.shutter.is-closed  .shutter__bottom,
html.is-page-incoming .shutter .shutter__bottom { transform: translateY(0); }
.shutter.is-closed .shutter__flash,
html.is-page-incoming .shutter .shutter__flash { opacity: 1; }
.shutter.is-closed .shutter__reticle,
html.is-page-incoming .shutter .shutter__reticle {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1) rotate(0);
}

/* ─── Opening (after navigation) ─── */
.shutter.is-opening .shutter__top    { transform: translateY(-101%); transition-duration: .55s; }
.shutter.is-opening .shutter__bottom { transform: translateY(101%);  transition-duration: .55s; }
.shutter.is-opening .shutter__flash  { opacity: 0; transition-duration: .25s; }
.shutter.is-opening .shutter__reticle {
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.4) rotate(8deg);
	transition: opacity .2s linear, transform .55s cubic-bezier(.76, 0, .24, 1);
}

/* Prevent flicker/scroll while incoming */
html.is-page-incoming body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.shutter { display: none !important; }
	html.is-page-incoming body { overflow: auto; }
}

/* ====================================================================
   Reveal on scroll
   ==================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}