/* ============================================================
   Imaginary Voyages — shared stylesheet
   Speculative / conceptual future VR tour experiences.
   Distinct dreamlike palette, clearly separate from the
   factual Search for Alien Life pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=Work+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --void: #0E0B1A;
  --void-deep: #070510;
  --nebula-mist: #F4F1FA;
  --nebula-dim: #E7E1F4;
  --line: rgba(244,241,250,0.14);
  --line-soft: rgba(14,11,26,0.12);

  /* per-tour accents — dreamlike, not scientific */
  --venus: #E8A87C;      /* warm cloud-gold */
  --venus-soft: #F5D9BE;
  --europa-d: #7FB3D5;   /* dream-ice blue */
  --europa-d-soft: #C9E2F0;
  --saturn: #C9A8E8;     /* ring-violet */
  --saturn-soft: #E5D4F5;
  --accent: var(--saturn);
  --accent-soft: var(--saturn-soft);

  --surface: #F4F1FA;
  --surface-alt: #ECE5F7;
  --ink-light: #211C33;
  --ink-light-soft: #5B5470;
  --ink-light-faint: #8880A0;
  --line-light: rgba(33,28,51,0.12);

  --serif: 'Fraunces', serif;
  --sans: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface);
  color: var(--ink-light);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3.5rem); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--accent); }
p { color: var(--ink-light-soft); font-weight: 300; max-width: 62ch; }

/* ---- nav ---- */
.site-nav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 5vw, 3.5rem);
  background: var(--void); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nebula-mist);
}
.site-nav .brand { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.site-nav .crumb { color: var(--nebula-dim); opacity: .6; }
.site-nav ul { list-style: none; display: flex; gap: clamp(1rem, 2.5vw, 1.6rem); flex-wrap: wrap; }
.site-nav a { text-decoration: none; opacity: .75; transition: opacity .2s ease; }
.site-nav a:hover, .site-nav a.active { opacity: 1; }

/* ---- disclosure banner ---- */
.disclosure {
  background: var(--nebula-mist); color: var(--void);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  padding: .8rem clamp(1.2rem, 5vw, 3.5rem); text-align: center;
}
.disclosure strong { font-weight: 600; }

/* ---- hero ---- */
.hero { background: var(--void); padding: clamp(3.5rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(201,168,232,0.18), transparent 55%),
              radial-gradient(ellipse at 80% 70%, rgba(127,179,213,0.14), transparent 50%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--nebula-mist); }
.hero p { color: var(--nebula-dim); }
.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: .7em; margin-bottom: 1.2rem; }
.tagline { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--accent-soft); margin-bottom: .8rem; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); max-width: 18ch; margin-bottom: 1.2rem; }
.lead { font-size: 1.1rem; max-width: 60ch; }

/* ---- grid / tour cards ---- */
.section { padding: clamp(2.5rem,6vw,4rem) 0; }
.section-head { margin-bottom: 2rem; }
.section .eyebrow { color: #6B4F9E; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2.4vw,1.5rem); }
.tour-card {
  position: relative; border: 1px solid var(--line-light); background: var(--void);
  display: flex; flex-direction: column; min-height: 340px; overflow: hidden;
  text-decoration: none; color: inherit; transition: border-color .25s ease, transform .25s ease;
}
.tour-card:hover { border-color: var(--card-accent, var(--accent)); transform: translateY(-3px); }
.tour-card .media { position: relative; flex: 1; overflow: hidden; background: var(--void-deep); }
.tour-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .7s ease, opacity .3s ease; }
.tour-card:hover .media img { transform: scale(1.045); opacity: .95; }
.tour-card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,16,0) 40%, rgba(7,5,16,.92) 100%); }
.tour-card .body { position: relative; z-index: 2; padding: clamp(1.3rem,3vw,1.8rem); margin-top: -6rem; }
.tour-card .tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--card-accent, var(--accent)); }
.tour-card h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--nebula-mist); margin: .5rem 0 .4rem; }
.tour-card p { font-size: .88rem; color: var(--nebula-dim); opacity: .85; }
.tour-card .status { display: inline-block; margin-top: .8rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; padding: .3em .7em; border: 1px solid var(--line); border-radius: 2px; }
.tour-card .status.live { color: var(--void); background: var(--card-accent, var(--accent)); border-color: transparent; }
.tour-card .status.soon { color: var(--nebula-dim); opacity: .6; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* ---- explain / how-it-works ---- */
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,2.5rem); margin-top: 2rem; }
.explain-grid .tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #6B4F9E; }
.explain-grid h3 { font-size: 1.1rem; margin: .6rem 0 .5rem; font-style: italic; font-weight: 500; color: var(--ink-light); }
.explain-grid p { font-size: .92rem; }
@media (max-width: 820px) { .explain-grid { grid-template-columns: 1fr; } }

.section-alt { background: var(--surface-alt); }

/* ---- notice ---- */
.notice { font-family: var(--mono); font-size: .78rem; color: var(--ink-light-faint); opacity: 1; text-align: center; padding: 2rem 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); margin: 2rem 0; }

/* ---- footer ---- */
.site-footer { padding: 2rem clamp(1.2rem,5vw,3.5rem) 2.6rem; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-light-faint); opacity: 1; padding: 0; }
.site-footer ul { list-style: none; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }