/* ================================================
   SAILING MUSIC AFRICA
   Luxury African Cultural Travel — Design System
   ================================================ */

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

/* ================================================
   COLOUR SYSTEM
   Fixed dark surfaces: hero, cinematic, manifesto, footer.
   Adaptive surfaces: pivot, expedition-content,
   destinations, what, community — switch with theme.

   KEY PRINCIPLE (matching Black Tomato):
   All text at near-full opacity. No faded type.
   Secondary text = 85%+. Dim text = 65%+.
   Font hierarchy: condensed sans for authority,
   serif for editorial storytelling.
   ================================================ */

:root {
  /* ── Fixed dark surfaces ──────────────────── */
  --ink:  #09090c;
  --char: #111318;
  --void: #0d0b08;

  /* ── Light palette ────────────────────────── */
  --L-bg:       #f6f2ea;
  --L-bg-alt:   #eee9df;
  --L-bg-muted: #e7e0d3;

  --L-fg:       #171410;              /* warm charcoal — full strength */
  --L-fg2:      rgba(23,20,16,0.86);  /* body / secondary — very readable */
  --L-fg3:      rgba(23,20,16,0.68);  /* captions / dim — still visible */

  --L-gold:     #634e24;              /* bronze — strong on ivory */
  --L-gold-lt:  #7c6030;
  --L-rule:     rgba(99,78,36,0.22);
  --L-btn:      rgba(26,23,20,0.30);  /* clear button border */

  /* ── Dark palette ─────────────────────────── */
  --D-bg:       #09090c;
  --D-bg-alt:   #111318;
  --D-bg-muted: #0d0b08;

  --D-fg:       #f2ede4;              /* warm cream — full strength */
  --D-fg2:      rgba(242,237,228,0.88); /* body — clearly readable */
  --D-fg3:      rgba(242,237,228,0.70); /* captions — visible */

  --D-gold:     #d6b973;              /* gold — vivid on dark surfaces */
  --D-gold-lt:  #e6cc86;
  --D-rule:     rgba(214,185,115,0.22);
  --D-btn:      rgba(242,237,228,0.38); /* clear button border */

  /* ── Section-scoped tokens (default: dark) ── */
  --sec-bg:      var(--D-bg);
  --sec-fg:      var(--D-fg);
  --sec-fg2:     var(--D-fg2);
  --sec-fg3:     var(--D-fg3);
  --sec-gold:    var(--D-gold);
  --sec-gold-lt: var(--D-gold-lt);
  --sec-rule:    var(--D-rule);
  --sec-btn:     var(--D-btn);

  /* ── Typography ───────────────────────────── */
  --serif:     'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --editorial: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --condensed: 'Oswald', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --sans:      'Inter', Arial, system-ui, sans-serif;

  /* ── Motion ───────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   ADAPTIVE SECTION — .sec-a
   Light by default. Switched by [data-theme="dark"].
   ================================================ */

.sec-a {
  --sec-bg:      var(--L-bg);
  --sec-fg:      var(--L-fg);
  --sec-fg2:     var(--L-fg2);
  --sec-fg3:     var(--L-fg3);
  --sec-gold:    var(--L-gold);
  --sec-gold-lt: var(--L-gold-lt);
  --sec-rule:    var(--L-rule);
  --sec-btn:     var(--L-btn);
  background: var(--sec-bg);
  color:      var(--sec-fg);
}

.sec-a.sec-alt   { --sec-bg: var(--L-bg-alt); }
.sec-a.sec-muted { --sec-bg: var(--L-bg-muted); }

[data-theme="dark"] .sec-a {
  --sec-bg:      var(--D-bg);
  --sec-fg:      var(--D-fg);
  --sec-fg2:     var(--D-fg2);
  --sec-fg3:     var(--D-fg3);
  --sec-gold:    var(--D-gold);
  --sec-gold-lt: var(--D-gold-lt);
  --sec-rule:    var(--D-rule);
  --sec-btn:     var(--D-btn);
  background: var(--sec-bg);
}

[data-theme="dark"] .sec-a.sec-alt   { --sec-bg: var(--D-bg-alt); }
[data-theme="dark"] .sec-a.sec-muted { --sec-bg: var(--D-bg-muted); }

/* Smooth colour crossfade on theme switch */
.theme-transitioning .sec-a,
.theme-transitioning .sec-a * {
  transition:
    color            0.6s ease,
    background-color 0.6s ease,
    border-color     0.6s ease !important;
}

/* ================================================
   BASE
   ================================================ */

html { scroll-behavior: smooth; }

body {
  font-family:             var(--sans);
  font-weight:             400;
  background:              var(--ink);
  color:                   var(--D-fg);
  overflow-x:              hidden;
  line-height:             1.68;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
  font-feature-settings:   "kern" 1, "liga" 1, "calt" 1;
}

/* Analogue grain — barely perceptible luxury texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ================================================
   SCROLL REVEAL
   Restrained — editorial fade, not theatre.
   ================================================ */

.rv {
  opacity:   0;
  transform: translateY(10px);
  transition: opacity 0.92s var(--ease-out), transform 0.92s var(--ease-out);
}

.rv.v { opacity: 1; transform: translateY(0); }

.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.25s; }
.d3 { transition-delay: 0.40s; }

/* Hero entrance — triggered by body.loaded */
.hero-eyebrow,
.hero-headline,
.hero-sub,
.hero-ctas {
  opacity:   0;
  transform: translateY(8px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}

body.loaded .hero-eyebrow { opacity: 1; transform: none; transition-delay: 0.36s; }
body.loaded .hero-headline { opacity: 1; transform: none; transition-delay: 0.58s; }
body.loaded .hero-sub      { opacity: 1; transform: none; transition-delay: 0.80s; }
body.loaded .hero-ctas     { opacity: 1; transform: none; transition-delay: 1.04s; }

/* ================================================
   TYPOGRAPHY UTILITIES
   ================================================ */

/* Eyebrow / section label
   Weight 400 at 9px — must be readable  */
.label {
  font-family:    var(--condensed);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--sec-gold);
  display:        block;
  margin-bottom:  16px;
}

.label--dim { color: var(--sec-fg3); }

/* Editorial italic text link */
.cta-link {
  font-family:     var(--condensed);
  font-size:       11px;
  font-style:      normal;
  font-weight:     500;
  color:           var(--sec-gold-lt);
  text-decoration: none;
  display:         inline-block;
  letter-spacing:  0.13em;
  text-transform:  uppercase;
  transition:      color 0.4s;
}

.cta-link:hover { color: var(--sec-fg); }

/* Pale secondary CTA — still clearly legible */
.cta-link--pale {
  color:     var(--sec-fg2);   /* 82-85% opacity — readable */
  font-size: 11px;
}

.cta-link--pale:hover { color: var(--sec-fg); }

/* Outlined editorial button */
.btn-editorial {
  display:         inline-block;
  font-family:     var(--condensed);
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  color:           var(--sec-fg);
  border:          1px solid var(--sec-btn);
  padding:         11px 26px 12px;
  text-decoration: none;
  line-height:     1;
  transition:      border-color 0.5s, color 0.5s, background 0.5s, transform 0.5s;
}

.btn-editorial:hover {
  border-color: var(--sec-gold);
  color:        var(--sec-gold-lt);
  transform:    translateY(-1px);
}

/* Hero CTAs always on dark palette (hero is fixed dark) */
.hero .btn-editorial {
  color:        rgba(242,237,228,0.84);
  border-color: rgba(242,237,228,0.22);
  min-width:    106px;
}

.hero .btn-editorial:hover {
  border-color: rgba(196,165,104,0.52);
  color:        var(--D-gold-lt);
}

/* Travel CTA — filled pink accent, Events stays outlined */
.hero-ctas .btn-editorial:last-child {
  background:   #d2a126;
  border-color: #d2a126;
  color:        rgba(255,255,255,0.96);
}

.hero-ctas .btn-editorial:last-child:hover {
  background:   #d91249;
  border-color: #d91249;
  color:        #fff;
  transform:    translateY(-1px);
}

/* ================================================
   NAVIGATION
   Black Tomato standard: full opacity, weight 400.
   Almost invisible at rest — clear on approach.
   ================================================ */

#nav {
  position:  fixed;
  top:       0;
  left:      0;
  right:     0;
  z-index:   200;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:   0 52px;
  height:    66px;
  transition: background 0.9s, backdrop-filter 0.9s;
}

#nav.scrolled {
  background:              rgba(9,9,12,0.94);
  backdrop-filter:         blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Logo */
.logo {
  text-decoration: none;
  display:         block;
  flex-shrink:     0;
  line-height:     1;
}

.logo-img {
  height:     72px;
  width:      auto;
  display:    block;
  filter:     saturate(0.88) contrast(0.96);
  transition: opacity 0.3s;
}

.logo-img--footer {
  height: 120px;
}

.logo:hover .logo-img { opacity: 0.82; }
.footer-logo:hover .logo-img--footer { opacity: 0.82; }

/* Nav links — weight 400, high opacity */
.nav-links {
  display:    flex;
  gap:        34px;
  list-style: none;
}

.nav-links a {
  font-family:     var(--condensed);
  font-size:       13px;
  font-weight:     500;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           rgba(242,237,228,0.85);
  text-decoration: none;
  text-shadow:     0 1px 8px rgba(0,0,0,0.3);
  transition:      color 0.35s;
}

.nav-links a:hover { color: var(--D-gold-lt); }

/* Nav CTA — italic serif, clearly visible */
.nav-cta {
  font-family:     var(--condensed);
  font-size:       13px;
  font-style:      normal;
  font-weight:     500;
  color:           var(--D-gold);
  text-decoration: none;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  transition:      color 0.35s;
}

.nav-cta:hover { color: var(--D-gold-lt); }

/* Right cluster */
.nav-right {
  display:     flex;
  align-items: center;
  gap:         20px;
}

/* Theme toggle — minimal half-circle */
.theme-toggle {
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         6px 4px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.theme-icon {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  border:        1px solid rgba(242,237,228,0.38);
  position:      relative;
  overflow:      hidden;
  transition:    border-color 0.5s;
}

.theme-icon::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      50%;
  height:     100%;
  background: rgba(242,237,228,0.55);
  transition: background 0.5s;
}

[data-theme="light"] .theme-icon {
  border-color: rgba(26,23,20,0.28);
}

[data-theme="light"] .theme-icon::before {
  background: rgba(26,23,20,0.62);
}

/* Mobile hamburger */
.nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  background:     none;
  border:         none;
  padding:        8px;
}

.nav-toggle span {
  display:    block;
  width:      22px;
  height:     1px;
  background: rgba(242,237,228,0.72);
  transition: transform 0.35s var(--ease-out), opacity 0.35s;
}

/* Mobile drawer */
.nav-drawer {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         190;
  background:      rgba(9,9,12,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             42px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.5s var(--ease-out);
}

.nav-drawer.open { opacity: 1; pointer-events: all; }

.nav-drawer a {
  font-family:     var(--condensed);
  font-size:       clamp(38px, 12vw, 68px);
  font-style:      normal;
  font-weight:     700;
  color:           var(--D-fg);
  text-decoration: none;
  letter-spacing:  0.03em;
  text-transform:  uppercase;
  line-height:     0.95;
  transition:      color 0.3s;
}

.nav-drawer a:hover { color: var(--D-gold-lt); }

.nav-drawer .drawer-cta {
  font-family:    var(--condensed);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--D-gold);
  font-style:     normal;
}

/* ================================================
   SECTION 1 — HERO  [fixed dark]
   Cinematic. Text must be fully readable.
   ================================================ */

.hero {
  position:   relative;
  width:      100%;
  height:     100vh;
  min-height: 580px;
  overflow:   hidden;
  display:    flex;
  align-items:     center;
  justify-content: center;
}

.hero-videos { position: absolute; inset: 0; z-index: 0; }

.hero-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 2.2s ease;
}

.hero-video.active { opacity: 1; }

/* Restrained overlay — image breathes, but text is always readable */
.hero-overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
  background: linear-gradient(
    to bottom,
    rgba(9,9,12,0.28) 0%,
    rgba(9,9,12,0.08) 28%,
    rgba(9,9,12,0.28) 60%,
    rgba(9,9,12,0.68) 100%
  );
}

.hero-inner {
  position:   absolute;
  left:       50%;
  top:        50%;
  transform:  translate(-50%, -48%);
  z-index:    2;
  text-align: center;
  width:      min(760px, calc(100% - 30px));
  max-width:  760px;
  padding:    0 15px;
}

/* Eyebrow — clear gold at weight 400 */
.hero-eyebrow {
  font-family:    var(--condensed);
  font-size:      clamp(10px, 0.82vw, 12px);
  font-weight:    800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--D-gold);
  margin-bottom:  20px;
  text-shadow:    0 1px 10px rgba(0,0,0,0.3);
}

/* Headline — weight 400 for screen rendering confidence */
.hero-headline {
  font-family:    var(--condensed);
  font-size:      clamp(34px, 4.7vw, 64px);
  font-weight:    400;
  font-style:     normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--D-fg);
  line-height:    1.02;
  text-shadow:    0 2px 18px rgba(0,0,0,0.24);
  margin:         0 auto 18px;
  max-width:      720px;
}

/* Sub — near-full opacity, clearly readable */
.hero-sub {
  font-family:    var(--condensed);
  font-size:      clamp(12px, 0.95vw, 15px);
  font-weight:    400;
  font-style:     normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(242,237,228,0.75);
  line-height:    1.2;
  text-shadow:    0 1px 12px rgba(0,0,0,0.20);
}

/* Dual editorial CTAs */
.hero-ctas {
  margin-top:      30px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  flex-wrap:       wrap;
}

/* Scroll indicator */
.hero-scroll {
  position:        absolute;
  bottom:          26px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  opacity:         0;
  animation:       scrollfade 1s var(--ease-out) 2.2s forwards;
}

@keyframes scrollfade { to { opacity: 1; } }

.hero-scroll-label {
  font-family:    var(--condensed);
  font-size:      8.5px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(242,237,228,0.48);
}

.hero-scroll-line {
  display:    block;
  width:      1px;
  height:     36px;
  background: linear-gradient(to bottom, rgba(196,165,104,0.6), transparent);
  animation:  scrollpulse 2.8s ease-in-out infinite;
}

@keyframes scrollpulse {
  0%,100% { opacity: 0.35; transform: scaleY(0.9); }
  50%     { opacity: 1;    transform: scaleY(1.1); }
}

/* ================================================
   SECTION 2 — PIVOT  [adaptive]
   The emotional reframe. Pure typography, no imagery.
   Editorial weight — poetic but fully legible.
   ================================================ */

.pivot {
  padding:    120px 24px 112px;
  display:    flex;
  align-items:     center;
  justify-content: center;
  text-align:  center;
  position:    relative;
}

.pivot::before {
  content:   '';
  position:  absolute;
  top:       0;
  left:      50%;
  transform: translateX(-50%);
  width:     1px;
  height:    64px;
  background: linear-gradient(to bottom, transparent, var(--sec-rule));
}

.pivot-inner { max-width: 860px; }

/* Keep 300 here — largest display size compensates.
   The pivot is the poetic, delicate editorial moment. */
.pivot-statement {
  font-family:   var(--serif);
  font-size:     clamp(24px, 3.1vw, 40px);
  font-weight:   700;
  font-style:    normal;
  color:         var(--sec-fg);
  line-height:   1.18;
  margin-bottom: 12px;
}

.pivot-continuation {
  font-family:   var(--serif);
  font-size:     clamp(16px, 1.9vw, 24px);
  font-weight:   400;
  font-style:    normal;
  color:         var(--sec-fg2);
  line-height:   1.5;
  margin-bottom: 42px;
}

.pivot-route {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--sec-gold);
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            12px;
  flex-wrap:      wrap;
  line-height:    2.15;
}

.pivot-sep {
  color:       var(--sec-rule);
  font-size:   13px;
  font-weight: 200;
  opacity:     1;
}

/* ================================================
   SECTION 3 — EXPEDITION  [image + adaptive content]
   ================================================ */

.expedition {
  display: grid;
  grid-template-columns: 56% 44%;
  min-height: 86vh;
}

.expedition-image { position: relative; overflow: hidden; }

.expedition-image img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transform:  scale(1.05);
  transition: transform 10s var(--ease-out);
}

.expedition-image.zoomed img { transform: scale(1); }

.expedition-content {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         96px 68px 96px 60px;
}

.expedition-title {
  font-family:    var(--serif);
  font-size:      clamp(28px, 3.5vw, 48px);
  font-weight:    700;
  font-style:     normal;
  color:          var(--sec-fg);
  line-height:    1.1;
  letter-spacing: 0;
  margin-bottom:  28px;
}

.expedition-route {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           5px 9px;
  margin-bottom: 32px;
}

.expedition-route span {
  font-family:    var(--sans);
  font-size:      9.5px;
  font-weight:    500;
  letter-spacing: 0.11em;
  color:          var(--sec-fg3);       /* 60% — still readable */
  text-transform: uppercase;
}

.expedition-route .route-arrow {
  color:          var(--sec-gold);
  opacity:        0.6;
  font-size:      11px;
  letter-spacing: 0;
}

.expedition-body {
  font-family:   var(--sans);
  font-size:     15px;
  font-weight:   400;                   /* was 300 — strong readability */
  color:         var(--sec-fg2);        /* 82% — editorial clarity */
  line-height:   1.78;
  margin-bottom: 42px;
  max-width:     430px;
}

/* ================================================
   SECTION 4 — CINEMATIC VIDEO  [fixed dark]
   ================================================ */

.cinematic {
  position:   relative;
  height:     100vh;
  min-height: 520px;
  overflow:   hidden;
  display:    flex;
  align-items:     center;
  justify-content: center;
}

.cinematic-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}

.cinematic-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: rgba(9,9,12,0.40);
}

.cinematic-inner {
  position:   relative;
  z-index:    2;
  text-align: center;
  padding:    0 24px;
}

.cinematic-line {
  font-family:    var(--serif);
  font-size:      clamp(26px, 3.5vw, 50px);
  font-weight:    400;
  font-style:     italic;
  color:          var(--D-fg);
  letter-spacing: 0.01em;
  text-shadow:    0 2px 24px rgba(0,0,0,0.20);
}

/* ================================================
   SECTION 5 — DESTINATIONS  [adaptive]
   ================================================ */

.destinations { padding: 108px 60px 88px; }

.destinations-header { margin-bottom: 44px; }

.destinations-title {
  font-family:    var(--serif);
  font-size:      clamp(22px, 2.7vw, 36px);
  font-weight:    700;
  font-style:     normal;
  color:          var(--sec-fg);
  line-height:    1.18;
  letter-spacing: 0;
}

/* Asymmetric editorial grid */
.destinations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    360px 260px;
  gap: 0;
}

.dest-card {
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  background: var(--char);
}

.dest-card--wide { grid-column: span 4; }

.dest-card img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.dest-card:hover img { transform: scale(1.04); }

.dest-meta {
  position:  absolute;
  bottom:    0;
  left:      0;
  right:     0;
  padding:   56px 26px 26px;
  background: linear-gradient(to top, rgba(9,9,12,0.92) 0%, transparent 100%);
  opacity:   0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
}

.dest-card:hover .dest-meta { opacity: 1; transform: translateY(0); }

@media (hover: none) { .dest-meta { opacity: 1; transform: translateY(0); } }

/* Meta always on dark gradient overlay → use D-palette */
.dest-country {
  display:       block;
  font-family:   var(--serif);
  font-size:     22px;
  font-style:    normal;
  font-weight:   700;
  color:         var(--D-fg);
  margin-bottom: 4px;
}

.dest-detail {
  display:        block;
  font-family:    var(--sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--D-gold);
}

/* ================================================
   SECTION 6 — WHAT WE DO  [adaptive]
   ================================================ */

.what { padding: 112px 60px; }

.what-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:       80px;
  max-width: 1240px;
  margin:    0 auto;
  align-items: start;
}

.what-title {
  font-family:    var(--serif);
  font-size:      clamp(22px, 2.8vw, 38px);
  font-weight:    700;
  font-style:     normal;
  color:          var(--sec-fg);
  line-height:    1.2;
  letter-spacing: 0;
  margin-top:     6px;
}

/* Gap becomes rule hairline */
.what-pillars {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        1px;
  background: var(--sec-rule);
}

.pillar {
  background: var(--sec-bg);
  padding:    34px 30px 34px 0;
}

.pillar:nth-child(2),
.pillar:nth-child(4) { padding-left: 30px; padding-right: 0; }

.pillar-rule {
  width:         20px;
  height:        1px;
  background:    var(--sec-gold);
  opacity:       0.5;
  margin-bottom: 18px;
}

.pillar-title {
  font-family:   var(--serif);
  font-size:     17px;
  font-weight:   700;
  font-style:    normal;
  color:         var(--sec-fg);
  margin-bottom: 10px;
  line-height:   1.3;
}

/* Body — weight 400 for screen readability */
.pillar-body {
  font-family: var(--sans);
  font-size:   14px;
  font-weight: 400;
  color:       var(--sec-fg2);          /* 82% — clear */
  line-height: 1.74;
}

/* ================================================
   SECTION 7 — MANIFESTO  [fixed dark]
   Image at low brightness. Text must dominate.
   ================================================ */

.manifesto {
  position:   relative;
  min-height: 80vh;
  display:    flex;
  align-items:     center;
  justify-content: center;
  text-align:  center;
  overflow:    hidden;
  padding:     112px 24px;
}

.manifesto-bg { position: absolute; inset: 0; z-index: 0; }

.manifesto-bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(0.28) saturate(0.8);
}

.manifesto-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: rgba(9,9,12,0.56);
}

.manifesto-inner {
  position: relative;
  z-index:  2;
  max-width: 680px;
  padding:   0 24px;
}

.manifesto-headline {
  font-family:    var(--serif);
  font-size:      clamp(24px, 2.9vw, 40px);
  font-weight:    700;
  font-style:     normal;
  color:          var(--D-fg);
  line-height:    1.2;
  letter-spacing: 0;
  margin-bottom:  28px;
}

.manifesto-body {
  font-family:   var(--sans);
  font-size:     15px;
  font-weight:   400;
  color:         var(--D-fg2);           /* 85% — editorial comfort */
  line-height:   1.78;
  max-width:     560px;
  margin:        0 auto 48px;
}

.manifesto-quote {
  font-family:    var(--editorial);
  font-size:      clamp(16px, 1.75vw, 22px);
  font-style:     normal;
  font-weight:    400;
  color:          var(--D-gold-lt);
  line-height:    1.72;
  border:         none;
  max-width:      560px;
  margin:         0 auto;
}

/* ================================================
   SECTION 8 — COMMUNITY / CTA  [adaptive]
   ================================================ */

.community {
  padding:         132px 24px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
}

.community-inner { max-width: 560px; }

.community-title {
  font-family:    var(--serif);
  font-size:      clamp(22px, 2.9vw, 40px);
  font-weight:    700;
  font-style:     normal;
  color:          var(--sec-fg);
  line-height:    1.2;
  letter-spacing: 0;
  margin-bottom:  20px;
}

.community-sub {
  font-family:   var(--sans);
  font-size:     14px;
  font-weight:   400;
  color:         var(--sec-fg2);
  line-height:   1.72;
  margin-bottom: 44px;
}

.community-ctas {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             48px;
  flex-wrap:       wrap;
}

/* ================================================
   SECTION 9 — FOOTER  [fixed dark]
   ================================================ */

.footer { background: var(--char); border-top: 1px solid var(--D-rule); }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap:     56px;
  padding: 80px 60px 64px;
}

.footer-logo {
  text-decoration: none;
  display:         block;
  margin-bottom:   18px;
}

.footer-tagline {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   400;
  color:         var(--D-fg3);           /* 62% — visible */
  margin-bottom: 30px;
  letter-spacing: 0.04em;
}

.footer-social { display: flex; gap: 18px; align-items: center; }

.footer-social a {
  color:           rgba(242,237,228,0.60);
  text-decoration: none;
  display:         flex;
  align-items:     center;
  transition:      color 0.35s, opacity 0.35s;
}

.footer-social a:hover { color: var(--D-gold-lt); }

.footer-social svg { display: block; }

.footer-col-title {
  font-family:    var(--sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--D-gold);
  margin-bottom:  22px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }

.footer-col ul a {
  font-family:     var(--sans);
  font-size:       13px;
  font-weight:     400;
  color:           var(--D-fg2);          /* 85% — clearly readable */
  text-decoration: none;
  transition:      color 0.35s;
}

.footer-col ul a:hover { color: var(--D-fg); }

.newsletter-form { display: flex; margin-bottom: 26px; }

.nl-input {
  flex:         1;
  background:   rgba(242,237,228,0.05);
  border:       1px solid var(--D-rule);
  border-right: none;
  padding:      12px 16px;
  color:        var(--D-fg);
  font-family:  var(--sans);
  font-size:    12px;
  font-weight:  400;
  outline:      none;
  transition:   border-color 0.35s;
}

.nl-input:focus      { border-color: rgba(196,165,104,0.4); }
.nl-input::placeholder { color: var(--D-fg3); }

.nl-btn {
  background:  none;
  border:      1px solid var(--D-rule);
  padding:     12px 20px;
  color:       var(--D-gold);
  font-family: var(--sans);
  font-size:   10px;
  font-style:  normal;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor:      pointer;
  white-space: nowrap;
  transition:  background 0.35s, color 0.35s;
}

.nl-btn:hover { background: rgba(196,165,104,0.08); color: var(--D-gold-lt); }

.footer-contact { display: flex; flex-direction: column; gap: 10px; }

.footer-contact a {
  font-family:     var(--sans);
  font-size:       12px;
  font-weight:     400;
  color:           var(--D-fg3);
  text-decoration: none;
  transition:      color 0.35s;
}

.footer-contact a:hover { color: var(--D-gold-lt); }

.footer-bottom {
  padding:         22px 60px;
  border-top:      1px solid var(--D-rule);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.footer-bottom p {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  color:          var(--D-fg3);
  letter-spacing: 0.06em;
}

.footer-bottom-links { display: flex; gap: 24px; }

.footer-bottom-links a {
  font-family:     var(--sans);
  font-size:       11px;
  font-weight:     400;
  color:           var(--D-fg3);
  text-decoration: none;
  transition:      color 0.35s;
}

.footer-bottom-links a:hover { color: var(--D-fg); }

/* ================================================
   RESPONSIVE — TABLET  (≤1024px)
   ================================================ */

@media (max-width: 1024px) {
  #nav { padding: 0 32px; }

  .hero-headline {
    font-size: clamp(28px, 5.2vw, 52px);
    max-width: 600px;
  }

  .expedition { grid-template-columns: 1fr; min-height: auto; }
  .expedition-image { height: 56vw; position: relative; }
  .expedition-image img { position: absolute; }
  .expedition-content { padding: 60px 36px; }

  .what { padding: 92px 40px; }
  .what-inner { grid-template-columns: 1fr; gap: 56px; }

  .destinations { padding: 84px 40px 68px; }
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:    280px 280px 220px;
  }
  .dest-card--wide { grid-column: span 2; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; padding: 64px 40px 52px; }
  .footer-bottom { padding: 20px 40px; }
}

/* ================================================
   RESPONSIVE — MOBILE  (≤768px)
   ================================================ */

@media (max-width: 768px) {
  #nav { padding: 0 20px; height: 58px; }

  .nav-links  { display: none; }
  .nav-cta    { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer { display: flex; }
  .nav-right  { gap: 16px; }

  .logo-img { height: 52px; }

  .hero-inner {
    width: calc(100% - 30px);
  }

  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }

  .hero-headline {
    font-size: clamp(26px, 8.5vw, 44px);
    line-height: 1.04;
    letter-spacing: 0.08em;
    max-width: 100%;
    margin-bottom: 14px;
  }

  .hero-sub {
    font-size: clamp(11px, 3.4vw, 14px);
    letter-spacing: 0.13em;
  }

  .hero-ctas  { margin-top: 22px; gap: 10px; }
  .hero .btn-editorial {
    min-width: 100px;
    padding: 10px 20px 11px;
  }

  .hero-scroll { bottom: 22px; }

  .pivot { padding: 84px 24px 76px; }

  .expedition { grid-template-columns: 1fr; }
  .expedition-image { height: 68vw; }
  .expedition-content { padding: 48px 24px; }

  .cinematic { height: 80vh; min-height: 420px; }

  .destinations { padding: 84px 20px 64px; }
  .destinations-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    250px 250px 200px;
  }

  .what { padding: 76px 24px; }
  .what-inner { gap: 48px; }
  .what-pillars { grid-template-columns: 1fr; }
  .pillar { padding: 32px 0; }
  .pillar:nth-child(2),
  .pillar:nth-child(4) { padding-left: 0; }

  .manifesto { padding: 84px 24px; min-height: 68vh; }

  .community { padding: 92px 24px; }
  .community-ctas { gap: 28px; flex-direction: column; }

  .footer-top { grid-template-columns: 1fr; padding: 56px 24px 44px; gap: 44px; }
  .footer-bottom { padding: 20px 24px; flex-direction: column; gap: 12px; text-align: center; }
}

/* ================================================
   RESPONSIVE — SMALL MOBILE  (≤480px)
   ================================================ */

@media (max-width: 480px) {
  .hero-headline {
    font-size: clamp(24px, 7.5vw, 36px);
    max-width: 100%;
  }

  .hero-sub {
    font-size: 11px;
  }

  .btn-editorial {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .destinations-grid {
    grid-template-columns: 1fr;
    grid-template-rows:    repeat(5, 260px);
  }
  .dest-card--wide { grid-column: span 1; }
  .community-ctas  { gap: 20px; }
}