/* ============================================================
   Lorraine Travel — Luxury Design System
   ============================================================ */

:root {
  --ink: #0B1B2B;
  --midnight: #10243A;
  --bone: #F6F1E7;
  --sand: #EDE3CF;
  --champagne: #C8A96A;
  --gold: #B08D4C;
  --rouge: #7A2E2A;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--bone); }

/* Display typography */
.font-serif, h1, h2, h3, h4, .display { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

/* Eyebrow label */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* Hairline */
.hairline { display:inline-block; width:48px; height:1px; background: var(--champagne); vertical-align: middle; }

/* Hero gradient overlay */
.hero-gradient {
  background:
    linear-gradient(180deg, rgba(11,27,43,0.35) 0%, rgba(11,27,43,0.55) 60%, rgba(11,27,43,0.85) 100%);
}
.vignette {
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 0%, rgba(11,27,43,0.25) 60%, rgba(11,27,43,0.8) 100%);
}

/* Ken Burns slow zoom */
@keyframes kenburns {
  0%   { transform: scale(1.08) translate3d(0,0,0); }
  100% { transform: scale(1.18) translate3d(-1.5%, -1%, 0); }
}
.kenburns { animation: kenburns 18s ease-in-out infinite alternate; }

/* Fade in up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 45s linear infinite; }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--ink); color: var(--bone);
  padding: 14px 28px;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.btn-primary:hover { background: var(--champagne); color: var(--ink); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.6rem;
  border: 1px solid currentColor;
  padding: 13px 26px;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500;
  transition: background .3s ease, color .3s ease;
}
.btn-ghost:hover { background: currentColor; }
.btn-ghost:hover > * { color: var(--ink); }

/* Card */
.lux-card {
  background: var(--bone);
  border: 1px solid rgba(11,27,43,.08);
  transition: transform .5s ease, box-shadow .5s ease, border-color .3s ease;
}
.lux-card:hover {
  transform: translateY(-6px);
  border-color: var(--champagne);
  box-shadow: 0 30px 60px -30px rgba(11,27,43,.25);
}

/* Image hover zoom */
.img-zoom { overflow:hidden; }
.img-zoom img { transition: transform 1.2s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* Frame */
.gold-frame { position: relative; }
.gold-frame::before, .gold-frame::after {
  content:''; position:absolute; width:36px; height:36px; border:1px solid var(--champagne);
}
.gold-frame::before { top:-8px; left:-8px; border-right:0; border-bottom:0; }
.gold-frame::after { bottom:-8px; right:-8px; border-left:0; border-top:0; }

/* Table */
.compare-table th, .compare-table td { padding: 1.1rem 1.25rem; }
.compare-table tr + tr { border-top: 1px solid rgba(11,27,43,.08); }

/* FAQ */
details summary::-webkit-details-marker { display:none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* Section dividers */
.divider {
  display:flex; align-items:center; justify-content:center; gap: 1rem;
  color: var(--champagne);
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px; background: linear-gradient(to right, transparent, rgba(176,141,76,.5), transparent);
}

/* Subtle paper texture */
.paper-bg {
  background-color: var(--bone);
  background-image:
    radial-gradient(rgba(11,27,43,.03) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Focus */
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* Print */
@media print { header, footer, .no-print { display: none; } }