/* ============================================================
   THE PHANTOM RIDGE TRAVEL CO.
   Main Stylesheet
   ============================================================ */

:root {
  --cream:   #F4E8C8;
  --dark:    #1B2940;
  --red:     #C23B22;
  --amber:   #C8860A;
  --teal:    #1A6B6B;
  --sky:     #2E6FA3;
  --green:   #2A6B35;
  --white:   #FAFAF5;
  --terminal:#00FF41;
  --term-dim:#00CC33;
  --term-bg: #030A03;

  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;
  --font-terminal:'VT323', 'Courier New', monospace;
  --font-body:    Georgia, 'Times New Roman', serif;

  --bw: 3px;
  --bwt: 5px;
  --border: 3px solid var(--dark);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; }

body {a
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
}

body.booting { overflow: hidden; }

/* ── Boot Overlay ───────────────────────────────────────── */

.boot-overlay {
  position: fixed;
  inset: 0;
  background: var(--term-bg);
  color: var(--terminal);
  font-family: var(--font-terminal);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* scanlines */
.boot-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* CRT vignette */
.boot-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
  z-index: 2;
}

.boot-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
}

.boot-logo {
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: 0.08em;
  color: var(--terminal);
  text-shadow: 0 0 12px var(--terminal);
  animation: flicker 5s infinite;
}

.boot-logo-sub {
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--term-dim);
  letter-spacing: 0.05em;
  margin-top: 0.15em;
}

.boot-sep {
  width: 100%;
  height: 1px;
  background: var(--term-dim);
  margin: 1em 0;
  opacity: 0.4;
}

.boot-log {
  min-height: 12em;
}

.boot-line {
  white-space: pre;
  letter-spacing: 0.03em;
}

.boot-line.boot-dim    { color: var(--term-dim); }
.boot-line.boot-blank  { height: 1.5em; }
.boot-line.boot-success {
  color: #ffffff;
  text-shadow: 0 0 10px var(--terminal);
}

.boot-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(0, 255, 65, 0.15);
  margin-top: 1.5em;
  overflow: hidden;
}

.boot-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--terminal);
  box-shadow: 0 0 8px var(--terminal);
  transition: width 0.4s ease;
}

.boot-skip {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 4;
  font-family: var(--font-terminal);
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--term-dim);
  letter-spacing: 0.15em;
  cursor: pointer;
  animation: blink 1.4s step-end infinite;
}

.boot-overlay.exiting {
  animation: bootCollapse 0.55s ease-in forwards;
}

@keyframes bootCollapse {
  0%   { transform: scaleY(1); opacity: 1; }
  60%  { transform: scaleY(0.015); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes flicker {
  0%, 94%, 100% { opacity: 1; }
  95%  { opacity: 0.6; }
  96%  { opacity: 1; }
  97%  { opacity: 0.75; }
  98%  { opacity: 1; }
}

/* ── Typography ─────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

h1 { font-size: clamp(3rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }

p { font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.75; }

/* ── Layout ─────────────────────────────────────────────── */

.container  { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section-pad { padding: 5rem 0; }

/* ── Site Header ────────────────────────────────────────── */

.site-header {
  background: var(--cream);
}

/* shared inner max-width for header sections */
.header-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px);
}

/* ── Utility strip ── */
.header-utility {
  background: var(--dark);
}

.header-utility .header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 3px;
  padding-bottom: 3px;
}

.header-utility-text {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(244,232,200,0.38);
}

/* ── Logo banner ── */
.header-banner {
  overflow: hidden;
}

.header-banner .header-wrap {
  display: flex;
  height: 108px;
}

.header-logo-block {
  background: var(--red);
  border-right: 3px solid var(--dark);
  padding: 10px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  min-width: 240px;
  text-decoration: none;
}

.header-logo-name {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--cream);
  line-height: 1;
  letter-spacing: 0.04em;
}

.header-logo-sub {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(244,232,200,0.65);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  margin-top: 5px;
}

/* Mini landscape art fills the rest of the banner */
.header-art {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.header-art-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #152840 0%, #2265A0 55%, #9BBFD4 100%);
}

.header-art-sun {
  position: absolute;
  bottom: 38%;
  right: 18%;
  width: 46px;
  height: 46px;
  background: var(--amber);
  border-radius: 50%;
  outline: 3px solid var(--dark);
}

.header-art-mts-back {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 65%;
  background: #1A3A2A;
  clip-path: polygon(0 72%, 8% 42%, 17% 62%, 26% 30%, 35% 54%, 44% 22%, 53% 46%, 63% 26%, 72% 50%, 82% 32%, 92% 56%, 100% 40%, 100% 100%, 0 100%);
}

.header-art-mts-front {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: var(--dark);
  clip-path: polygon(0 60%, 10% 34%, 20% 56%, 30% 24%, 40% 50%, 51% 18%, 61% 44%, 71% 28%, 81% 52%, 91% 36%, 100% 56%, 100% 100%, 0 100%);
}

/* Text overlay on art */
.header-art-label {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(244,232,200,0.4);
  z-index: 2;
}

/* ── Tab navigation ── */
.header-nav {
  background: var(--cream);
 /* border-top: 3px solid var(--dark); 
  border-bottom: 3px solid var(--dark); */
}

.header-nav .header-wrap {
  display: flex;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.nav-tabs {
  display: flex;
  gap: 3px;
}

.nav-tab {
  display: inline-block;
  padding: 5px 18px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: rgba(27,41,64,0.06);
  color: var(--dark);
  text-decoration: none;
  border: 2px solid var(--dark);
  transition: background 0.1s, color 0.1s;
}

.nav-tab:hover,
.nav-tab.active {
  background: var(--dark);
  color: var(--cream);
}

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: var(--bwt) solid var(--dark);
}

.hero-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    #152840 0%,
    #1E4A7A 35%,
    #3578A8 62%,
    #9BBFD4 85%,
    var(--cream) 100%
  );
}

.hero-sun {
  position: absolute;
  bottom: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(100px, 14vw, 190px);
  height: clamp(100px, 14vw, 190px);
  background: var(--amber);
  border-radius: 50%;
  outline: 6px solid var(--dark);
  outline-offset: 0;
}

.hero-mountains-back {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 52%;
  background: #1A3A2A;
  clip-path: polygon(
    0 75%, 5% 48%, 12% 65%, 19% 38%, 26% 58%,
    33% 28%, 40% 50%, 47% 22%, 54% 46%,
    61% 26%, 68% 48%, 75% 33%, 82% 55%,
    89% 40%, 96% 60%, 100% 50%,
    100% 100%, 0 100%
  );
}

.hero-mountains-front {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 42%;
  background: var(--dark);
  clip-path: polygon(
    0 62%, 7% 38%, 14% 58%, 22% 28%, 30% 52%,
    38% 18%, 46% 44%, 54% 16%, 61% 42%,
    68% 27%, 75% 50%, 82% 32%, 90% 54%,
    95% 40%, 100% 56%,
    100% 100%, 0 100%
  );
}

.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 2rem 8rem;
  text-align: center;
}

.hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.45em;
  margin-bottom: 1.2rem;
}

.hero-title {
  color: var(--cream);
  text-shadow: 5px 5px 0 var(--dark);
  margin-bottom: 0.1em;
}

.hero-subtitle {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.6em;
  margin-bottom: 2rem;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: var(--cream);
  font-style: italic;
  max-width: 560px;
  margin: 0 auto 3rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hero-ctas {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.9rem 2.4rem;
  text-decoration: none;
  border: var(--bw) solid var(--dark);
  cursor: pointer;
  position: relative;
  transition: transform 0.1s;
  background: none;
}

.btn::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  background: var(--dark);
  z-index: -1;
  transition: top 0.1s, left 0.1s;
}

.btn:hover               { transform: translate(-2px, -2px); }
.btn:hover::after        { top: 6px; left: 6px; }
.btn:active              { transform: translate(2px, 2px); }
.btn:active::after       { top: 2px; left: 2px; }

.btn-primary  { background: var(--red);  color: var(--cream); }
.btn-dark     { background: var(--dark); color: var(--cream); }
.btn-outline  { border-color: var(--cream); color: var(--cream); }
.btn-outline::after { background: rgba(244,232,200,0.12); }

/* ── Marquee Strip ──────────────────────────────────────── */

.marquee-strip {
  background: var(--amber);
  border-top: var(--bw) solid var(--dark);
  border-bottom: var(--bw) solid var(--dark);
  overflow: hidden;
  padding: 0.7rem 0;
}

.marquee-inner {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee-inner span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--dark);
  white-space: nowrap;
}

.marquee-sep { color: var(--red) !important; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Section Headers ────────────────────────────────────── */

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--red);
  margin-bottom: 0.6rem;
}

.section-divider {
  width: 56px;
  height: 4px;
  background: var(--red);
  margin: 1rem auto 0;
}

/* ── Destination Cards ──────────────────────────────────── */

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  border-top: var(--bw) solid var(--dark);
  border-left: var(--bw) solid var(--dark);
}

.dest-card {
  border-right: var(--bw) solid var(--dark);
  border-bottom: var(--bw) solid var(--dark);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--dark);
  position: relative;
  transition: transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}

.dest-card:hover {
  z-index: 10;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--dark);
}

.dest-card-poster {
  height: 200px;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.dest-card-landscape {
  position: absolute;
  inset: 0;
}

#dest-slider {
  display: flex;
  width: 100%;
}

#dest-container {
  min-width: 100%; /* Ensures the box stays the full width of the header */
  box-sizing: border-box;
}

.content-box {
  overflow: hidden; /* Prevents the destination from showing outside the borders */
}

/* =========================================
   Landscape Shape Layers
   Organized for depth and readability
========================================= */

/* --- Mountain: Base (distant), After (mid), Before (foreground) --- */
.ls-mountain {
  background: inherit;
  filter: brightness(0.55);
}
.ls-mountain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28); /* Distant peaks */
  clip-path: polygon(
    0 100%, 0 72%, 12% 58%, 22% 70%, 35% 42%, 
    50% 0%, 65% 42%, 78% 70%, 88% 58%, 100% 72%, 100% 100%
  );
}
.ls-mountain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52); /* Foreground peaks */
  clip-path: polygon(
    0 100%, 0 85%, 20% 78%, 36% 65%, 50% 12%, 
    64% 65%, 80% 78%, 100% 85%, 100% 100%
  );
}

/* --- Ocean: Added a distant swell layer --- */
.ls-ocean::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 65%;
  background: rgba(0, 0, 0, 0.15); /* Distant waves */
  clip-path: polygon(
    0 45%, 15% 25%, 30% 45%, 45% 20%, 60% 40%, 
    75% 22%, 90% 42%, 100% 25%, 100% 100%, 0 100%
  );
}
.ls-ocean::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 50%;
  background: rgba(0, 0, 0, 0.35); /* Foreground waves */
  clip-path: polygon(
    0 55%, 12% 35%, 25% 55%, 38% 28%, 50% 50%, 
    62% 30%, 75% 52%, 88% 32%, 100% 50%, 100% 100%, 0 100%
  );
}

/* --- Jungle: Added a towering background canopy layer --- */
.ls-jungle::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 80%;
  background: rgba(0, 0, 0, 0.20); /* Distant canopy */
  clip-path: polygon(
    0 40%, 8% 20%, 18% 45%, 25% 10%, 35% 35%, 
    45% 15%, 55% 40%, 65% 12%, 75% 38%, 85% 15%, 
    95% 35%, 100% 20%, 100% 100%, 0 100%
  );
}
.ls-jungle::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 60%;
  background: rgba(0, 0, 0, 0.40); /* Foreground foliage */
  clip-path: polygon(
    0 50%, 5% 30%, 10% 50%, 15% 20%, 22% 45%, 28% 15%, 
    35% 42%, 42% 18%, 48% 45%, 55% 22%, 62% 48%, 68% 18%, 
    75% 44%, 82% 20%, 88% 46%, 95% 24%, 100% 48%, 100% 100%, 0 100%
  );
}

/* --- Desert: Added a backdrop of distant dunes --- */
.ls-desert::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 65%;
  background: rgba(0, 0, 0, 0.15); /* Distant dunes */
  clip-path: polygon(
    0 60%, 25% 30%, 50% 65%, 75% 25%, 100% 55%, 100% 100%, 0 100%
  );
}
.ls-desert::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 45%;
  background: rgba(0, 0, 0, 0.30); /* Foreground dunes */
  clip-path: polygon(
    0 80%, 20% 40%, 40% 70%, 55% 30%, 70% 60%, 
    85% 45%, 100% 65%, 100% 100%, 0 100%
  );
}

/* --- Savanna: Ground base + iconic Acacia tree --- */
.ls-savanna::after {
  content: '';
  position: absolute;
  bottom: 28%; left: 15%;
  width: 12%; height: 40%;
  background: rgba(0, 0, 0, 0.35); /* Tree */
  clip-path: polygon(
    40% 0%, 60% 0%, 80% 40%, 100% 40%, 50% 80%, 0 40%, 20% 40%
  );
}
.ls-savanna::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 30%;
  background: rgba(0, 0, 0, 0.30); /* Ground plane */
  clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
}

/* --- Coast: Added a secondary rocky outcropping --- */
.ls-coast::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 70%;
  background: rgba(0, 0, 0, 0.20); /* Distant cliffs */
  clip-path: polygon(
    0 25%, 20% 45%, 35% 15%, 55% 40%, 75% 20%, 
    90% 45%, 100% 30%, 100% 100%, 0 100%
  );
}
.ls-coast::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 55%;
  background: rgba(0, 0, 0, 0.35); /* Foreground rocks */
  clip-path: polygon(
    0 40%, 15% 60%, 30% 30%, 45% 55%, 60% 25%, 
    72% 50%, 85% 35%, 100% 55%, 100% 100%, 0 100%
  );
}

/* --- Canyon: Towering rock walls with a distant city skyline in the gap --- */
.ls-canyon {
  /* Drawing blocky skyscrapers using layered background gradients */
  background-image:
    /* Center Tall Skyscraper (Base, Mid, Antenna) */
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    /* Left Skyscraper (Base, Top) */
    linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    /* Right Skyscraper */
    linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
    /* Far Right Low Block */
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));

  background-size:
    9% 55%,   /* Center base */
    5% 65%,   /* Center mid-tier */
    1px 75%,  /* Center antenna */
    8% 42%,   /* Left base */
    4% 48%,   /* Left top */
    7% 49%,   /* Right base */
    5% 32%;   /* Far right */

  background-position:
    50% bottom, /* Center base */
    50% bottom, /* Center mid-tier */
    50% bottom, /* Center antenna */
    39% bottom, /* Left base */
    40% bottom, /* Left top */
    60% bottom, /* Right base */
    64% bottom; /* Far right */

  background-repeat: no-repeat;
}

.ls-canyon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.40); /* Right wall */
  clip-path: polygon(
    100% 0, 64% 0, 68% 20%, 70% 45%, 66% 68%, 70% 100%, 100% 100%
  );
}

.ls-canyon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48); /* Left wall */
  clip-path: polygon(
    0 0, 36% 0, 32% 20%, 30% 45%, 34% 68%, 30% 100%, 0 100%
  );
}

/* --- Hills: Gentle rolling silhouette, two layers --- */
.ls-hills::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 60%;
  background: rgba(0, 0, 0, 0.22); /* Distant hills */
  clip-path: polygon(
    0 68%, 18% 28%, 38% 55%, 58% 18%, 80% 48%, 100% 28%, 100% 100%, 0 100%
  );
}
.ls-hills::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 42%;
  background: rgba(0, 0, 0, 0.32); /* Foreground hills */
  clip-path: polygon(
    0 78%, 25% 40%, 50% 65%, 76% 30%, 100% 55%, 100% 100%, 0 100%
  );
}

/* --- Castle: An imposing, turreted fortress with a surrounding village on a massive steep hill --- */
.ls-castle {
  background-color: inherit;
  filter: brightness(0.75) saturate(0.85);
}

/* LAYER 1: The Castle Keep, Turrets, and Village Buildings */
.ls-castle::before {
  content: '';
  position: absolute;
  inset: 0;

  background-image:
    /* --- 1. SPIRES (Very thin gradients resting on the turrets) --- */
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), /* Left Spire */
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), /* Right Spire */

    /* --- 2. TURRETS (Tall flanking towers) --- */
    linear-gradient(rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.80)), /* Left Turret Body */
    linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), /* Right Turret Body */

    /* --- 3. MAIN KEEP & OUTER WALLS --- */
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), /* Main Central Keep */
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), /* Left Outer Wall */
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), /* Right Outer Wall */

    /* --- 4. SURROUNDING VILLAGE (Cascading down the hill) --- */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), /* Upper Left Village Block */
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), /* Lower Left Village Block */
    linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), /* Upper Right Village Block */
    linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)); /* Lower Right Village Block */

  background-size:
    /* Spires  */ 2px 82%, 2px 75%,
    /* Turrets */ 6% 70%, 5% 62%,
    /* Keep    */ 24% 55%, 12% 48%, 14% 45%,
    /* Village */ 9% 42%, 7% 32%, 11% 40%, 8% 28%;

  background-position:
    /* Spires  */ 35% bottom, 65% bottom,
    /* Turrets */ 35% bottom, 65% bottom,
    /* Keep    */ 50% bottom, 25% bottom, 75% bottom,
    /* Village */ 15% bottom, 6% bottom, 86% bottom, 95% bottom;

  background-repeat: no-repeat;
}

/* LAYER 2: The Big Hill (Masks the bottoms of the buildings) */
.ls-castle::after {
  content: '';
  position: absolute;
  inset: 0;

  /* A dark, earthy gradient to give the hill mass */
  background: linear-gradient(to bottom, rgba(15, 20, 25, 0.5), rgba(5, 5, 10, 0.9));

  /* Creates a sweeping hill that peaks broadly in the center to hold the castle, 
     then drops off sharply on the sides to reveal the cascading village houses. */
  clip-path: polygon(
    0 100%, 0 95%, 
    12% 82%, 25% 72%, 
    38% 66%, 62% 66%, /* The flat peak for the main castle */
    75% 75%, 88% 88%, 
    100% 98%, 100% 100%
  );

  /* A slight atmospheric shadow to separate the hill from the buildings behind it */
  filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, 0.35));
}

/* --- Forest: Dense conifer canopy, two layers --- */
.ls-forest::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 70%;
  background: rgba(0, 0, 0, 0.25); /* Distant pines */
  clip-path: polygon(
    0 58%, 3% 38%, 6% 58%, 10% 18%, 14% 45%, 18% 8%, 22% 40%, 
    26% 22%, 30% 48%, 34% 12%, 38% 42%, 42% 18%, 46% 45%, 
    50% 10%, 54% 40%, 58% 20%, 62% 48%, 66% 14%, 70% 44%, 
    74% 22%, 78% 50%, 82% 18%, 86% 45%, 90% 28%, 94% 52%, 
    97% 35%, 100% 52%, 100% 100%, 0 100%
  );
}
.ls-forest::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 42%;
  background: rgba(0, 0, 0, 0.38); /* Foreground pines */
  clip-path: polygon(
    0 65%, 5% 40%, 10% 60%, 15% 28%, 20% 52%, 26% 18%, 32% 48%, 
    38% 25%, 44% 52%, 50% 15%, 56% 45%, 62% 22%, 68% 50%, 
    74% 18%, 80% 44%, 86% 25%, 92% 50%, 97% 35%, 100% 50%, 100% 100%, 0 100%
  );
}

/* --- Valley: Misty valley walls with distinct, smaller floating apparitions --- */
.ls-valley {
  /* Inherit background-color but filter to make it look cold/misty */
  background-color: inherit;
  filter: brightness(0.65) saturate(0.9);

  /* Layering multiple distinct "ghost" entities using radial gradients (glowing core to transparent blue/white) */
  background-image:
    radial-gradient(circle at center, rgba(200, 220, 255, 0.40) 0%, rgba(200, 220, 255, 0.1) 40%, transparent 65%), /* Main Upper Center */
    radial-gradient(circle at center, rgba(190, 215, 255, 0.45) 0%, rgba(190, 215, 255, 0.1) 45%, transparent 70%), /* Center Right, slightly larger */
    radial-gradient(circle at center, rgba(210, 225, 255, 0.35) 0%, rgba(210, 225, 255, 0.1) 35%, transparent 60%), /* Top Left, high */
    radial-gradient(circle at center, rgba(185, 210, 255, 0.30) 0%, rgba(185, 210, 255, 0.1) 50%, transparent 75%); /* Lower Left, fainter */

  background-size:
    45px 65px,  /* Ghost 1 size */
    55px 80px,  /* Ghost 2 size */
    30px 48px,  /* Ghost 3 size */
    35px 55px;  /* Ghost 4 size */

  background-position:
    50% 35%,    /* Ghost 1 position */
    62% 60%,    /* Ghost 2 position */
    38% 30%,    /* Ghost 3 position */
    43% 72%;    /* Ghost 4 position */

  background-repeat: no-repeat;
}

/* --- Valley: Victorian factory town nestled between two framing hills --- */
.ls-valley {
  /* Moody, desaturated atmospheric sky */
  background-color: inherit;
  filter: brightness(0.7) saturate(0.85);
}

/* LAYER 1: The Factories and Smog (Midground) */
.ls-valley::before {
  content: '';
  position: absolute;
  inset: 0;
  
  background-image:
    /* --- 1. SMOKE PLUMES --- */
    /* Left Chimney Smoke */
    radial-gradient(circle, rgba(200, 210, 220, 0.25) 0%, transparent 50%),
    radial-gradient(circle, rgba(200, 210, 220, 0.15) 0%, transparent 60%),
    
    /* Center Chimney Smoke (Tallest) */
    radial-gradient(circle, rgba(200, 210, 220, 0.30) 0%, transparent 50%),
    radial-gradient(circle, rgba(200, 210, 220, 0.18) 0%, transparent 60%),

    /* Right Chimney Smoke */
    radial-gradient(circle, rgba(200, 210, 220, 0.20) 0%, transparent 50%),
    radial-gradient(circle, rgba(200, 210, 220, 0.10) 0%, transparent 60%),

    /* --- 2. THE CHIMNEYS --- */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), /* Left */
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), /* Center */
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), /* Right */

    /* --- 3. THE FACTORY BUILDINGS --- */
    linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), /* Main center block */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), /* Left annex */
    linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), /* Right annex */
    linear-gradient(rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40)); /* Distant background block */

  background-size:
    /* Smoke 1 */ 45px 45px, 70px 70px,
    /* Smoke 2 */ 55px 55px, 85px 85px,
    /* Smoke 3 */ 35px 35px, 60px 60px,
    /* Chimneys */ 3% 45%, 4% 65%, 3% 35%,
    /* Factories */ 28% 25%, 18% 15%, 22% 18%, 40% 32%;

  background-position:
    /* Smoke 1 */ 32% 40%, 35% 25%,
    /* Smoke 2 */ 50% 20%, 52% 0%,
    /* Smoke 3 */ 68% 45%, 70% 30%,
    /* Chimneys */ 32% bottom, 50% bottom, 68% bottom,
    /* Factories */ 50% bottom, 34% bottom, 66% bottom, 48% bottom;

  background-repeat: no-repeat;
}

/* LAYER 2: The Two Framing Hills (Foreground) */
.ls-valley::after {
  content: '';
  position: absolute;
  inset: 0;
  
  /* Give the hills a slight gradient so they feel like solid earth, not flat shapes */
  background: linear-gradient(to bottom, rgba(15, 25, 40, 0.45), rgba(5, 10, 20, 0.85));
  
  /* This polygon draws the left hill (peaks at 15%), 
     dips down into a valley basin in the middle (88% deep), 
     and rises back up to the right hill (peaks at 85%).
     Because it covers the bottom center, it perfectly hides the base of the factories!
  */
  clip-path: polygon(
    0 35%, 15% 25%, 28% 50%, 38% 75%, 50% 88%, 62% 76%, 72% 48%, 85% 20%, 100% 30%, 
    100% 100%, 0 100%
  );
  
  /* Add an inner glow/mist to the edge of the hills */
  filter: drop-shadow(0 -4px 10px rgba(175, 200, 255, 0.15));
}

/* --- Plains: Rolling farmland with an unbreakable windmill, barn, and sweeping crop lines --- */
.ls-plains {
  background-color: inherit;
  filter: brightness(0.85) saturate(0.95);
}

/* LAYER 1: The Unbreakable Skyline Vector */
.ls-plains::before {
  content: '';
  position: absolute;
  inset: 0;
  
  /* A single, solid dark earthy tone for the entire background silhouette */
  background: #1c1712; 

  /* This single polygon traces the entire horizon. 
     Because the windmill blades are traced point-by-point, they can never detach from the tower! */
  clip-path: polygon(
    0 100%,
    0 65%,
    /* Left Distant Trees */
    4% 60%, 8% 62%, 12% 58%, 16% 63%,
    
    /* The Classic Barn (Gambrel Roof) */
    18% 63%, 
    18% 50%, /* Left Wall */
    22% 43%, /* Lower Roof Angle Left */
    26% 40%, /* Upper Roof Peak Left */
    30% 40%, /* Upper Roof Peak Right */
    34% 43%, /* Lower Roof Angle Right */
    38% 50%, /* Right Wall */
    38% 63%,
    
    /* The Silo */
    40% 63%,
    40% 35%, /* Left Wall */
    42% 32%, /* Dome Left */
    44% 32%, /* Dome Right */
    46% 35%, /* Right Wall */
    46% 63%,
    
    /* Distant Farmhouse */
    52% 63%,
    52% 55%, 55% 50%, 58% 55%, 58% 63%,
    
    /* The Windmill */
    68% 63%, /* Base Left */
    70% 43%, /* Upper Left Tower */
    /* Blade 1: Bottom Left */
    65% 52%, 66% 54%, 71% 43%,
    /* Blade 2: Top Left */
    65% 32%, 66% 30%, 71% 41%,
    /* Hub / Dome */
    72% 38%, 74% 38%,
    /* Blade 3: Top Right */
    79% 30%, 80% 32%, 73% 41%,
    /* Blade 4: Bottom Right */
    80% 52%, 79% 54%, 73% 43%,
    /* Upper Right Tower */
    74% 43%,
    76% 63%, /* Base Right */
    
    /* Right Distant Trees */
    82% 60%, 88% 64%, 94% 58%, 100% 65%,
    100% 100%
  );
}

/* LAYER 2: Rolling Fields and Crop Lines */
.ls-plains::after {
  content: '';
  position: absolute;
  inset: 0;

  /* Stacked angled repeating gradients to create cross-hatched crop lines over an earthy base */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 15%),
    
    repeating-linear-gradient(
      82deg,
      rgba(0, 0, 0, 0.18) 0%,  rgba(0, 0, 0, 0.18) 2%,
      rgba(0, 0, 0, 0.05) 2%,  rgba(0, 0, 0, 0.05) 4%
    ),
    
    repeating-linear-gradient(
      -75deg,
      rgba(0, 0, 0, 0.10) 0%,  rgba(0, 0, 0, 0.10) 3%,
      transparent 3%,          transparent 6%
    ),
    
    rgba(35, 25, 10, 0.45);

  /* The top edge of this polygon creates the smooth, rolling foreground hills.
     The peaks are perfectly aligned to mask the jagged bottom edges of the barn and windmill. */
  clip-path: polygon(
    0 68%, 15% 65%,            /* Left edge dip */
    30% 55%,                   /* Peak 1 (Masks the barn & silo) */
    50% 68%,                   /* Center Valley */
    72% 52%,                   /* Peak 2 (Masks the windmill perfectly) */
    88% 66%, 100% 62%,         /* Right edge dip */
    100% 100%, 0 100%          /* Anchor to bottom corners */
  );

  /* Soft atmospheric drop-shadow separates the hills from the sky */
  filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.35));
}

/* --- Water: Eerie swamp, ruined shack, and dead trees --- */
.ls-water {
  /* The Sky: A sickly, glowing swamp-gas moon perfectly positioned behind the ruins */
  background: radial-gradient(circle at 55% 35%, #8B9A7B 0%, #4A563D 30%, #1F261A 65%, #0D120B 100%) !important;
}

/* LAYER 1: The Unbreakable Silhouette */
.ls-water::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0d120b; /* Pitch black silhouette */
  
  /* This draws the ENTIRE skyline as one continuous jagged shape.
    It traces dead trees, ruined walls, a caved-in roof, and a towering chimney.
    Because it's one shape, it will scale perfectly on any device without breaking apart.
  */
  clip-path: polygon(
    0 100%,
    0 35%,
    /* Left Dead Trees / Spiky Reeds */
    2% 50%, 4% 20%, 6% 45%, 8% 10%, 10% 50%, 15% 65%,
    20% 65%,
    /* Broken Pier Posts sticking out of the water */
    22% 55%, 23% 55%, 23% 65%,
    27% 50%, 28% 50%, 28% 65%,
    35% 65%,
    /* The Ruined Shack */
    38% 65%, /* base left */
    38% 35%, /* surviving left wall */
    48% 20%, /* pitched roof left */
    53% 30%, /* roof caved in */
    55% 45%, /* inside floor rubble */
    58% 45%,
    60% 5%,  /* tall chimney left edge */
    63% 5%,  /* chimney right edge */
    63% 45%, /* down to floor */
    68% 40%, /* broken right wall */
    70% 65%, /* base right */
    75% 65%,
    /* Right Dead Trees */
    78% 45%, 80% 15%, 83% 50%, 86% 25%, 89% 55%, 93% 40%, 97% 65%,
    100% 65%,
    100% 100%
  );
}

/* LAYER 2: The Murky Water and Lilypads */
.ls-water::after {
  content: '';
  position: absolute;
  inset: 0;

  background-image:
    /* --- LILYPADS (Fixed px sizes so they never distort) --- */
    radial-gradient(ellipse 15px 4px at 20% 80%, #1a2615 50%, transparent 50%),
    radial-gradient(ellipse 20px 5px at 70% 85%, #1a2615 50%, transparent 50%),
    radial-gradient(ellipse 12px 3px at 45% 70%, #1a2615 50%, transparent 50%),
    
    /* --- STAGNANT RIPPLES --- */
    repeating-linear-gradient(
      180deg,
      transparent 0, transparent 6px,
      rgba(0, 0, 0, 0.2) 6px, rgba(0, 0, 0, 0.2) 8px
    ),
    
    /* --- BASE WATER & FOG --- */
    linear-gradient(to bottom, rgba(70, 90, 60, 0.6) 0%, rgba(10, 15, 10, 0.95) 100%);
    
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* An undulating waterline that overlaps the base of the silhouette layer, submerging it */
  clip-path: polygon(
    0 63%, 12% 61%, 25% 64%, 40% 62%, 55% 64%, 70% 61%, 85% 63%, 100% 61%,
    100% 100%, 0 100%
  );
  
  /* Creates an eerie, humid fog glow right where the water meets the sky */
  filter: drop-shadow(0 -4px 8px rgba(130, 150, 110, 0.4));
}

/* LAYER 1: The Town, Lighthouse, and Distant Hills */
.ls-lake::before {
  content: '';
  position: absolute;
  inset: 0;
  
  /* NOTE: Gradients render from top to bottom in this list (First is closest to viewer) */
  background-image:
    /* --- 1. LIGHTHOUSE BEACON (Glow & Water Reflection) --- */
    radial-gradient(circle, rgba(255, 240, 180, 0.5) 0%, rgba(255, 240, 180, 0.1) 30%, transparent 60%),
    linear-gradient(to bottom, rgba(255, 240, 180, 0.35), transparent),

    /* --- 2. LIGHTHOUSE TOWER --- */
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), /* Lantern top */
    linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), /* Tower body */
    linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), /* Rocky Base */

    /* --- 3. THE TOWN BUILDINGS (Left side) --- */
    linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), /* House 1 (Left) */
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), /* House 2 (Tall) */
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), /* House 3 (Wide) */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), /* House 4 (Small) */
    linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), /* Pier / Boardwalk */

    /* --- 4. DISTANT HILLS (Rendered furthest back) --- */
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, 0.22) 0%, transparent 50%), /* Left Hill */
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, 0.12) 0%, transparent 50%); /* Right Hill */

  background-size:
    /* Glow/Reflect */ 90px 90px, 4% 28%,
    /* Lighthouse   */ 2% 62%, 5% 58%, 12% 25%,
    /* Town         */ 8% 35%, 6% 45%, 11% 32%, 5% 26%, 40% 22%,
    /* Hills        */ 60% 40%, 70% 35%;

  background-position:
    /* Glow/Reflect */ 85% 20%, 85% bottom,
    /* Lighthouse   */ 85% bottom, 85% bottom, 83% bottom,
    /* Town         */ 8% bottom, 15% bottom, 22% bottom, 32% bottom, 15% bottom,
    /* Hills        */ 0% bottom, 100% bottom;

  background-repeat: no-repeat;
}

/* LAYER 2: The Water Plane (Overlays the bottom to create reflections) */
.ls-lake::after {
  content: '';
  position: absolute;
  inset: 0;
  
  /* Semi-transparent dark water lets the bottoms of the buildings and the glowing beacon show through */
  background: linear-gradient(to bottom, rgba(15, 25, 40, 0.4) 0%, rgba(5, 10, 15, 0.8) 100%);
  
  /* Creates a shoreline that gently slopes up at the far edges */
  clip-path: polygon(
    0 70%, 15% 72%, 85% 72%, 100% 70%, 
    100% 100%, 0 100%
  );
  
  /* A crisp horizon line separating water from land */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dest-card-name {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cream);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
  line-height: 1;
}

.dest-card-body {
  padding: 1.5rem;
  background: var(--cream);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dest-card-tagline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--red);
}

.dest-card-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #3a3a3a;
  flex: 1;
}

.dest-card-meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(27,41,64,0.12);
}

.dest-meta-item {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #777;
}

.dest-meta-item strong {
  display: block;
  color: var(--dark);
  font-size: 0.72rem;
  margin-bottom: 0.1em;
}

.dest-highlights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
}

.dest-highlights li {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(27,41,64,0.2);
  color: #555;
}

/* ── Features Section ───────────────────────────────────── */

.features-section {
  background: var(--dark);
  color: var(--cream);
  border-top: var(--bwt) solid var(--amber);
  border-bottom: var(--bwt) solid var(--amber);
}

.features-section .section-eyebrow { color: var(--amber); }
.features-section h2 { color: var(--cream); }
.features-section .section-divider { background: var(--amber); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid rgba(244,232,200,0.1);
  border-left: 1px solid rgba(244,232,200,0.1);
}

.feature-item {
  padding: 3rem 2.5rem;
  border-right: 1px solid rgba(244,232,200,0.1);
  border-bottom: 1px solid rgba(244,232,200,0.1);
}

.feature-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--amber);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.feature-item h3 { color: var(--cream); margin-bottom: 0.85rem; }
.feature-item p  { font-size: 0.88rem; color: rgba(244,232,200,0.65); line-height: 1.75; }

/* ── Quote Section ──────────────────────────────────────── */

.quote-section {
  background: var(--amber);
  border-top: var(--bwt) solid var(--dark);
  border-bottom: var(--bwt) solid var(--dark);
  padding: 5.5rem 2rem;
  text-align: center;
}

.quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 7rem;
  color: var(--dark);
  opacity: 0.18;
  line-height: 0.6;
  margin-bottom: 1.2rem;
}

.quote-text {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  font-style: italic;
  color: var(--dark);
  max-width: 780px;
  margin: 0 auto 1.5rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0.01em;
}

.quote-attr {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(27,41,64,0.6);
}

/* ── CTA Section ────────────────────────────────────────── */

.cta-section {
  background: var(--red);
  border-top: var(--bwt) solid var(--dark);
  padding: 5rem 2rem;
  text-align: center;
}

.cta-section h2 { color: var(--cream); text-shadow: 3px 3px 0 rgba(0,0,0,0.25); margin-bottom: 0.8rem; }
.cta-section p  { color: rgba(244,232,200,0.82); max-width: 480px; margin: 0 auto 2.5rem; }

/* ── Page Hero (inner pages) ────────────────────────────── */

.page-hero {
  background: var(--dark);
  padding: 4.5rem 2rem 4rem;
  border-bottom: var(--bwt) solid var(--amber);
  text-align: center;
}

.page-hero h1 { color: var(--cream); text-shadow: 3px 3px 0 rgba(0,0,0,0.35); }

.page-hero-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.45em;
  margin-top: 0.9rem;
}

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
  background: var(--cream);
}

.footer-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px);
}

/* Name bar */
.footer-name-bar {
  background: var(--dark);
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--cream);
  letter-spacing: 0.08em;
  line-height: 1;
}

.footer-name-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(244,232,200,0.42);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* Three content-box columns */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  border-left: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
}

.footer-col-box {
  border-right: 2px solid var(--dark);
}

.footer-col-hdr {
  background: var(--dark);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 4px 10px;
}

.footer-col-body {
  padding: 8px 10px;
  background: var(--cream);
}

.footer-col-body ul  { list-style: none; columns: 3; column-gap: 1rem; }
.footer-col-body li  { break-inside: avoid; border-bottom: 1px solid rgba(27,41,64,0.08); }
.footer-col-body li:last-child { border-bottom: none; }

.footer-col-body a {
  display: block;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sky);
  text-decoration: none;
  transition: color 0.1s;
}
.footer-col-body a::before { content: '\203A  '; color: rgba(27,41,64,0.3); }
.footer-col-body a:hover   { color: var(--red); }

.footer-col-body p {
  font-size: 0.75rem;
  line-height: 1.65;
  color: #555;
  margin-bottom: 6px;
}

/* Status bar */
.footer-status {
  background: var(--dark);
  color: rgba(244,232,200,0.28);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── About Page ─────────────────────────────────────────── */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--border);
}

.about-split-text {
  padding: 4rem;
  border-right: var(--border);
}

.about-split-text h2  { margin-bottom: 1.5rem; }
.about-split-text p   { color: #3a3a3a; margin-bottom: 1.25rem; }

.about-split-visual {
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 3rem;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.about-year {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 9rem);
  color: var(--cream);
  opacity: 0.2;
  line-height: 1;
}

.about-visual-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(244,232,200,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

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

.value-card {
  padding: 2.5rem 2rem;
  border: var(--border);
  position: relative;
}

.value-num {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  background: var(--amber);
  color: var(--dark);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.2rem 0.8rem;
  letter-spacing: 0.2em;
  border: 2px solid var(--dark);
}

.value-card h3  { margin-bottom: 0.8rem; }
.value-card p   { font-size: 0.88rem; color: #444; line-height: 1.7; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  border-top: var(--border);
  border-left: var(--border);
}

.team-card {
  border-right: var(--border);
  border-bottom: var(--border);
  overflow: hidden;
}

.team-card-img {
  height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.25rem;
}

.team-card-body {
  padding: 1.25rem;
  background: var(--cream);
}

.team-card-name { font-size: 1.4rem; margin-bottom: 0.1em; }
.team-card-role {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--red);
  display: block;
  margin-bottom: 0.75rem;
}
.team-card-bio  { font-size: 0.85rem; color: #444; line-height: 1.65; }

/* ── Contact Page ───────────────────────────────────────── */

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  border: var(--border);
}

.contact-info {
  background: var(--dark);
  color: var(--cream);
  padding: 3.5rem;
  border-right: var(--border);
}

.contact-info h3  { color: var(--cream); margin-bottom: 1.5rem; }
.contact-info p   { font-size: 0.88rem; color: rgba(244,232,200,0.65); line-height: 1.7; margin-bottom: 2rem; }

.contact-detail {
  margin-bottom: 1.25rem;
}

.contact-detail-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--amber);
  display: block;
  margin-bottom: 0.2rem;
}

.contact-detail-value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--cream);
  text-decoration: none;
}

.contact-form-wrap { padding: 3.5rem; }

.form-group { margin-bottom: 1.4rem; }

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

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: var(--border);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--dark);
  appearance: none;
  outline: none;
  transition: box-shadow 0.12s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 3px 3px 0 var(--red);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .about-split  { grid-template-columns: 1fr; }
  .about-split-text { border-right: none; border-bottom: var(--border); padding: 2.5rem; }
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-info { border-right: none; border-bottom: var(--border); }
  .form-row     { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .nav-link     { padding: 0.6rem 0.75rem; font-size: 0.62rem; letter-spacing: 0.12em; }
  .hero-ctas    { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .destinations-grid { grid-template-columns: 1fr; }
  .about-split-text  { padding: 2rem; }
  .contact-info      { padding: 2rem; }
  .contact-form-wrap { padding: 2rem; }
}

/* ============================================================
   HOMEPAGE — EARLY 00s THREE-COLUMN LAYOUT
   ============================================================ */

.home-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px);
}

/* ── Leaderboard strip ──────────────────────────────────── */

.home-lb-strip {
  background: var(--cream);
  padding: 8px 0;
  display: flex;
  justify-content: center;
}

.home-lb-strip .home-wrap {
  display: flex;
  justify-content: center;
}

/* ── Status bar ─────────────────────────────────────────── */

.home-status-bar {
  display: flex;
  justify-content: space-between;
  background: var(--dark);
  color: rgba(244, 232, 200, 0.45);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  margin: 0 0 6px;
}

/* ── Three columns ──────────────────────────────────────── */

.home-columns {
  display: grid;
  grid-template-columns: 160px 1fr 300px;
  gap: 8px;
  align-items: start;
  padding-bottom: 10px;
}

.home-col-left,
.home-col-main,
.home-col-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Places-to-visit grid (2-col subgrid inside centre col) ── */
.places-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.places-grid .content-box { margin: 0; }

.places-grid .featured-img { height: 105px; }

.places-grid .featured-img-label {
  font-size: 1.3rem;
}

.places-grid .featured-desc {
  font-size: 0.7rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ── Content boxes ──────────────────────────────────────── */

.content-box {
  border: 2px solid var(--dark);
  overflow: hidden;
}

.content-box-hdr {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.content-box-hdr-red   { background: var(--red); }
.content-box-hdr-amber { background: var(--amber); color: var(--dark); }

.content-box-body {
  padding: 10px;
  background: var(--cream);
  font-size: 0.82rem;
}

.hdr-link {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(244, 232, 200, 0.65);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.hdr-link:hover { color: var(--cream); }

/* ── Featured expedition ────────────────────────────────── */

.featured-img {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.featured-img .dest-card-landscape {
  position: absolute;
  inset: 0;
}

.featured-img-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--cream);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  z-index: 3;
  line-height: 1;
}

.featured-tagline {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--red);
  margin-bottom: 6px;
}

.featured-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 8px;
}

.content-link {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sky);
  text-decoration: none;
}

.content-link:hover { color: var(--red); }

/* ── Departures table ───────────────────────────────────── */

.dep-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.dep-table th {
  background: var(--dark);
  color: var(--cream);
  padding: 5px 10px;
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  font-weight: normal;
}

.dep-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(27, 41, 64, 0.1);
  vertical-align: middle;
}

.dep-table tr:nth-child(even) td { background: rgba(27, 41, 64, 0.04); }
.dep-table tr:last-child td      { border-bottom: none; }

.table-link {
  color: var(--sky);
  text-decoration: none;
}
.table-link:hover { color: var(--red); }

.spaces-low  { color: var(--red); }
.spaces-ok   { color: var(--green); }
.spaces-none { color: #999; font-style: italic; }

/* ── News / dispatch ────────────────────────────────────── */

.news-item {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(27, 41, 64, 0.12);
}
.news-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.news-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red);
  margin-bottom: 3px;
}

.news-headline {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
  margin-bottom: 5px;
}

.news-body {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #333;
  margin-bottom: 5px;
}

/* ── Left sidebar: quick links ──────────────────────────── */

.quick-links { list-style: none; }

.quick-links li { border-bottom: 1px solid rgba(27, 41, 64, 0.1); }
.quick-links li:last-child { border-bottom: none; }

.quick-links a {
  display: block;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-decoration: none;
  color: var(--sky);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.1s;
}
.quick-links a::before { content: '\203A  '; color: var(--red); }
.quick-links a:hover   { color: var(--red); }

.sidebar-micro {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 1.8;
  color: #555;
}

/* ── Right sidebar ──────────────────────────────────────── */

.dest-mini-list { list-style: none; }

.dest-mini-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(27, 41, 64, 0.1);
}
.dest-mini-list li:last-child { border-bottom: none; }

.dest-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.dest-mini-list a {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-decoration: none;
  color: var(--sky);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1;
}
.dest-mini-list a:hover { color: var(--red); }

.dest-mini-difficulty {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.sidebar-blurb {
  font-size: 0.78rem;
  line-height: 1.6;
  color: #444;
}

/* ── Full banner footer strip ───────────────────────────── */

.home-fb-strip {
  border-top: 2px solid rgba(27, 41, 64, 0.12);
  border-bottom: 2px solid rgba(27, 41, 64, 0.12);
  background: rgba(27, 41, 64, 0.04);
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/* ── Badges row ─────────────────────────────────────────── */

.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================================================
   BANNER SLOTS
   ============================================================ */

.banner-slot {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}

.banner-placeholder {
  background: rgba(27, 41, 64, 0.05);
  border: 1px dashed rgba(27, 41, 64, 0.2);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-mono);
  text-align: center;
}

.banner-size {
  font-size: 0.7rem;
  color: rgba(27, 41, 64, 0.38);
  letter-spacing: 0.08em;
}

.banner-label {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(27, 41, 64, 0.22);
}

.banner-slot img { display: block; }

/* ── Homepage responsive collapse ───────────────────────── */

@media (max-width: 1020px) {
  .home-status-bar { display: none; }
  .home-columns {
    grid-template-columns: 160px 1fr;
  }
  .home-col-right {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home-col-right > * { flex: 1 1 280px; }
}

@media (max-width: 640px) {
  .home-columns {
    grid-template-columns: 1fr;
  }
  .home-lb-strip,
  .home-fb-strip { display: none; }
  [data-banner="skyscraper"] { display: none !important; }
}