/* =========================================================
   Aurum Skies — static stylesheet
   (plain-CSS port of the original Tailwind design)
   ========================================================= */

:root {
  --background: oklch(0.13 0.008 60);
  --foreground: oklch(0.94 0.02 85);
  --card: oklch(0.17 0.01 60);
  --primary: oklch(0.78 0.12 80);
  --primary-foreground: oklch(0.13 0.008 60);
  --muted-foreground: oklch(0.68 0.02 80);
  --border: oklch(0.78 0.12 80 / 20%);
  --input: oklch(0.78 0.12 80 / 25%);
  --ring: oklch(0.78 0.12 80);
  --gold: oklch(0.78 0.12 80);
  --gradient-fade: linear-gradient(180deg, oklch(0.13 0.008 60 / 30%) 0%, oklch(0.13 0.008 60 / 10%) 40%, oklch(0.13 0.008 60) 100%);
  --font-display: "Cormorant Garamond", serif;
  --font-sans: "Manrope", sans-serif;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; font-size: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit;
  background: transparent; border-radius: 0;
}
button { cursor: pointer; }

/* ---------- Shared utilities ---------- */
.text-gold { color: var(--gold); }
.muted { color: var(--muted-foreground); }
.relaxed { line-height: 1.625; }
.self-start { align-self: flex-start; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
}

.btn-gold,
.btn-ghost-gold {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.btn-gold { background: var(--primary); color: var(--primary-foreground); transition: opacity 0.3s; }
.btn-gold:hover { opacity: 0.85; }
.btn-ghost-gold { border: 1px solid var(--gold); color: var(--gold); transition: background 0.3s; }
.btn-ghost-gold:hover { background: oklch(0.78 0.12 80 / 10%); }

/* Type scale */
.t-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.t-5xl { font-size: 3rem; line-height: 1; }
.t-5xl-6xl { font-size: 3rem; line-height: 1; }
.t-5xl-7xl { font-size: 3rem; line-height: 1; }
@media (min-width: 768px) {
  .t-5xl-6xl { font-size: 3.75rem; }
  .t-5xl-7xl { font-size: 4.5rem; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: oklch(0.13 0.008 60 / 40%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.logo { font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; letter-spacing: 0.3em; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-link {
  display: none;
  font-size: 0.75rem; line-height: 1rem;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--muted-foreground);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover, .nav-link.is-active { color: var(--gold); }
.logo { white-space: nowrap; }
@media (max-width: 479px) {
  .logo { font-size: 1.25rem; letter-spacing: 0.2em; }
  .site-header .btn-ghost-gold { padding: 0.75rem 1.25rem; }
}
@media (min-width: 640px) { .nav-link { display: inline; } }
@media (min-width: 768px) {
  .site-header { padding-inline: 3rem; }
  .site-nav { gap: 2.5rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top-width: 1px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 0.75rem; line-height: 1rem;
  text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--muted-foreground);
}

/* ---------- Parallax image ---------- */
.parallax { position: relative; overflow: hidden; }
.parallax > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  will-change: transform;
}
.parallax--fill { position: absolute; inset: 0; }
.parallax--fixed { position: fixed; inset: 0; z-index: -1; opacity: 0.3; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Page hero ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 80vh; }
.hero-fade { position: absolute; inset: 0; background: var(--gradient-fade); }
.hero__inner { position: relative; width: 100%; max-width: 80rem; margin-inline: auto; padding: 0 1.5rem 5rem; }
.hero__title { max-width: 56rem; font-size: 3.75rem; line-height: 0.95; }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 768px) {
  .hero__inner { padding-inline: 3rem; }
  .hero__title { font-size: 6rem; }
}

/* ---------- Full-bleed image band ---------- */
.band { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 80vh; }
.band--70 { min-height: 70vh; }
.overlay { position: absolute; inset: 0; background: oklch(0.13 0.008 60 / 55%); }
.overlay--60 { background: oklch(0.13 0.008 60 / 60%); }
.band__content { position: relative; padding-inline: 1.5rem; }
.max-2xl { max-width: 42rem; }
.max-3xl { max-width: 48rem; }

/* ---------- Two-column split ---------- */
.split { display: grid; }
.split__text { display: flex; flex-direction: column; justify-content: center; padding: 6rem 1.5rem; }
.split__img { height: 70vh; }
@media (min-width: 768px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__text { padding-inline: 5rem; }
  .md-order-2 { order: 2; }
}

/* ---------- Home: tours grid ---------- */
.section-tours { max-width: 80rem; margin-inline: auto; padding: 8rem 1.5rem; }
.section-tours h2 { margin-bottom: 4rem; }
.tour-grid { display: grid; gap: 1px; background: var(--border); }
.tour-card { display: block; background: var(--background); padding: 2.5rem; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.tour-card:hover { background: var(--card); }
.tour-card__meta {
  margin-bottom: 2rem; display: flex; justify-content: space-between;
  font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.tour-card h3 { margin-bottom: 1rem; }
@media (min-width: 768px) {
  .section-tours { padding-inline: 3rem; }
  .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Journeys: stop list ---------- */
.stops { margin-bottom: 2.5rem; }
.stops li { display: flex; gap: 1rem; border-top-width: 1px; padding-top: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.stops li + li { margin-top: 0.75rem; }

/* ---------- Fleet ---------- */
.fleet-grid { max-width: 80rem; margin-inline: auto; display: grid; gap: 1px; background: var(--border); }
.fleet-card { background: var(--background); padding: 3rem; }
.spec-list li { border-top-width: 1px; padding-top: 0.75rem; color: var(--muted-foreground); }
.spec-list li + li { margin-top: 0.75rem; }
@media (min-width: 768px) {
  .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-card { padding: 4rem; }
}

/* ---------- Experience ---------- */
.steps { max-width: 56rem; margin-inline: auto; padding: 8rem 1.5rem; }
.step { display: grid; gap: 1rem; border-top-width: 1px; padding-block: 2.5rem; }
.step__num { font-family: var(--font-display); font-size: 2.25rem; line-height: 2.5rem; color: var(--gold); }
@media (min-width: 768px) {
  .step { grid-template-columns: 120px 1fr 2fr; }
}

/* ---------- Reserve ---------- */
.reserve { position: relative; min-height: 100vh; }
.reserve__inner { max-width: 48rem; margin-inline: auto; padding: 10rem 1.5rem 8rem; text-align: center; }
.reserve__title { margin-bottom: 3rem; }
.reserve-form {
  display: grid; gap: 1.5rem;
  padding: 2rem; text-align: left;
  background: oklch(0.13 0.008 60 / 80%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.reserve-form label { display: block; }
.field {
  display: block; width: 100%;
  margin-top: 0.5rem; padding-block: 0.75rem;
  border-bottom: 1px solid var(--input);
  outline: none;
}
.field:focus { border-color: var(--ring); }
.field option { background: var(--background); }
textarea.field { resize: vertical; }
.reserve-form .btn-gold { justify-content: center; border: 0; }
.thanks { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; color: var(--gold); }
.thanks[hidden] { display: none; }
@media (min-width: 640px) {
  .reserve-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 768px) {
  .reserve-form { padding: 3rem; }
}

/* ---------- 404 ---------- */
.notfound { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 6rem 1rem; text-align: center; }
.notfound__code { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; }
.notfound__title { margin-top: 1rem; font-size: 1.875rem; line-height: 2.25rem; }
.notfound p { margin-top: 0.5rem; font-size: 0.875rem; }
.notfound .btn-gold { margin-top: 2rem; }