/* ============================================================
   Gooshe Aike Travel & Tours — Maintenance page
   Palette pulled from the brand mark: deep expedition-night navy,
   glacier ice, and a warm brass gold. Signature: a vertical
   "route line" tracing the country north–south, echoing that
   Gooshe Aike runs trips the length of Argentina.
   ============================================================ */

:root{
  --navy-deep:  #071726;
  --navy-mid:   #0e2c42;
  --navy-soft:  #16405c;
  --ice:        #cfe6ee;
  --ice-soft:   #eef7fa;
  --gold:       #c9a961;
  --gold-soft:  #e6d4a0;
  --white:      #ffffff;

  --font-display: "Spectral", Georgia, serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ color-scheme: dark; }

body{
  min-height:100svh;
  overflow-x:hidden;
  background: var(--navy-deep);
  color: var(--ice-soft);
  font-family: var(--font-body);
  position:relative;
}

/* ---------------- Slideshow ---------------- */

.slideshow{
  position:fixed;
  inset:0;
  z-index:0;
}

.slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transform: scale(1.06);
  transition: opacity 2.4s ease, transform 9s linear;
  will-change: opacity, transform;
}

.slide.is-active{
  opacity:1;
  transform: scale(1);
}

.scrim{
  position:fixed;
  inset:0;
  z-index:1;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(7,23,38,0.94) 0%, rgba(7,23,38,0.72) 45%, rgba(7,23,38,0.55) 100%),
    linear-gradient(180deg, rgba(7,23,38,0.55) 0%, rgba(7,23,38,0.25) 30%, rgba(7,23,38,0.55) 70%, rgba(7,23,38,0.92) 100%);
}

.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------------- Hero content ---------------- */

.hero{
  position:relative;
  z-index:3;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: var(--space-4) var(--space-3);
  max-width: 48rem;
  margin: 0 auto;
}

.logo{
  width: 74px;
  height: 74px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(201,169,97,0.35), 0 12px 34px rgba(0,0,0,0.45);
  margin-bottom: var(--space-3);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--space-2);
}

.headline{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 6.2vw, 3rem);
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -0.01em;
}

.headline em{
  font-style: italic;
  font-weight: 300;
  color: var(--ice);
}

.lede{
  margin-top: var(--space-3);
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(238,247,250,0.82);
  max-width: 34rem;
  font-weight: 300;
}

.contact{
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  display:flex;
  align-items:center;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content:center;
}

.contact-link{
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0.2rem 0.1rem;
}

.contact-link:hover,
.contact-link:focus-visible{
  color: var(--white);
  border-color: var(--gold-soft);
}

.contact-link:focus-visible{
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.contact-sep{ color: rgba(207,230,238,0.35); }

/* ---------------- Route signature ---------------- */

.route{
  position:fixed;
  top:0;
  right: clamp(1.2rem, 3vw, 3rem);
  height:100svh;
  z-index:4;
  display:flex;
  align-items:center;
  pointer-events:none;
}

.route-line{
  position:absolute;
  left:3px;
  top:12%;
  bottom:12%;
  width:1px;
  background: linear-gradient(180deg, transparent, rgba(201,169,97,0.55) 12%, rgba(201,169,97,0.55) 88%, transparent);
}

.route-points{
  list-style:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:76%;
}

.route-point{
  display:flex;
  align-items:center;
  gap: 0.6rem;
  pointer-events:auto;
}

.route-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background: rgba(207,230,238,0.45);
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
  flex-shrink:0;
}

.route-point.is-active .route-dot{
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,169,97,0.18);
  transform: scale(1.15);
}

.route-label{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(238,247,250,0.5);
  white-space: nowrap;
  transition: color 0.5s ease;
}

.route-label em{
  font-style:normal;
  display:block;
  color: rgba(238,247,250,0.32);
  font-size: 0.62rem;
  margin-top: 0.1rem;
}

.route-point.is-active .route-label{
  color: var(--gold-soft);
}

/* ---------------- Footer ---------------- */

.footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:3;
  display:flex;
  gap: 0.6rem;
  align-items:center;
  justify-content:center;
  padding: 1.1rem var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: rgba(207,230,238,0.4);
  text-align:center;
  flex-wrap:wrap;
}

.footer-sep{ color: rgba(207,230,238,0.25); }

/* ---------------- Responsive ---------------- */

@media (max-width: 720px){
  .route{ display:none; }
  .hero{ padding: var(--space-3) var(--space-2) 5rem; }
  .footer{ font-size: 0.62rem; }
}

@media (max-width: 420px){
  .headline{ font-size: 1.85rem; }
  .lede{ font-size: 0.94rem; }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce){
  .slide{ transition: opacity 1.2s ease; transform:none !important; }
  .route-dot, .route-label{ transition:none; }
}