/* ============================================================
   OverSol — shared brand theme

   The mark: an eye inside a radiating sun, standing in for the "O"
   in SOL. One light (--soul-gold) runs through the whole site as
   the thread of Emerson's Over-Soul — "that Unity within which
   every man's particular being is contained" — and each studio
   below is one vessel that light passes through differently: ski
   and snowboard catch it cold, off snow and night sky; paddle and
   surf catch it warm, off open water. Same light, five shapes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Neutral surface — identical across every page */
  --void: #0b0906;
  --void-2: #120e09;
  --bg: #0d0a07;
  --panel: #1a140e;
  --panel-2: #221a12;
  --border: #3a2e20;
  --border-soft: rgba(217, 179, 122, 0.16);
  --text: #f5efe3;
  --muted: #b9a88f;
  --muted-dim: #8c7c64;

  /* Brand ink (matches the logo mark exactly — do not adjust) */
  --ink: #0a0a0a;
  --cream: #f7f1e6;

  /* The Over-Soul light — the one gold thread every studio shares,
     drawn straight from the mark's eye/sun glyph. Used on its own
     for the wordmark glow, nav accents, and the apparel studio. */
  --soul-gold: #d98a2b;
  --soul-gold-deep: #b8741a;
  --soul-gold-pale: #f0c98a;

  /* Ski studio slice: the light caught cold, off snow and night sky */
  --ski-accent: #8fb7d9;
  --ski-accent-2: var(--soul-gold);
  --ski-deep: #223a4d;

  /* Snowboard studio slice: the light caught in motion, dusk over
     terrain-park snow — shares ski's cold territory but leans violet
     instead of blue so the two read as siblings, not twins. */
  --snowboard-accent: #a897cf;
  --snowboard-accent-2: var(--soul-gold);
  --snowboard-deep: #2e2440;

  /* Paddle studio slice: the light caught warm, off tidewater */
  --paddle-accent: #2fa6a2;
  --paddle-accent-2: var(--soul-gold);
  --paddle-deep: #123a38;

  /* Surf studio slice: the light caught at shorebreak, low and warm —
     shares paddle's water territory but leans coral instead of teal. */
  --surf-accent: #e2704b;
  --surf-accent-2: var(--soul-gold);
  --surf-deep: #4a2416;

  /* Apparel slice: the light itself, undivided — gold leading into
     coral, the one studio that wears the mark's own color outright. */
  --apparel-accent: var(--soul-gold);
  --apparel-accent-2: #e2704b;
  --apparel-deep: #4a3417;

  --radius: 14px;
  --radius-sm: 9px;
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  font-size: 16px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* ---------- Shared site header, used by the landing page + every studio ---------- */

.oversol-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 48px);
  position: relative;
  /* Higher than .viewer-card's sticky z-index (20, in studio.css) —
     without this, the two are separate stacking contexts of equal
     z-index and DOM order (main comes after nav) lets the viewer card
     win, silently covering an open nav dropdown menu whenever the two
     overlap on screen. The nav bar should always win that fight. */
  z-index: 50;
}

.oversol-nav a.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.oversol-nav a.brand-mark .brand-icon {
  height: 38px;
  width: auto;
  display: block;
}

.oversol-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}

.oversol-nav .nav-links a {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
  padding: 6px 2px;
}

.oversol-nav .nav-links a:hover,
.oversol-nav .nav-links a.current {
  color: var(--text);
}

.oversol-nav .nav-links a.current {
  border-bottom: 1px solid currentColor;
}

/* ---------- Nav dropdowns ("Design Studios", "Apparel") ----------
   Deliberately click/tap-to-toggle rather than hover-to-open — a
   hover-only menu simply doesn't exist on a touchscreen, and this app's
   whole audience skews mobile (see the tap-to-expand preset guide and
   the tooltip-on-tap pattern in ui-helpers.js). One JS behavior
   (initNavDropdowns) drives every instance on every page identically. */

.oversol-nav .nav-dropdown {
  position: relative;
}

.oversol-nav .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  margin: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}

.oversol-nav .nav-dropdown-toggle:hover,
.oversol-nav .nav-dropdown-toggle.current {
  color: var(--text);
}

.oversol-nav .nav-dropdown-toggle.current {
  border-bottom: 1px solid currentColor;
}

.oversol-nav .nav-caret {
  width: 9px;
  height: 9px;
  flex: none;
  stroke: currentColor;
  transition: transform 0.15s ease;
}

.oversol-nav .nav-dropdown--open .nav-caret {
  transform: rotate(180deg);
}

.oversol-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 30;
}

.oversol-nav .nav-dropdown--open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.oversol-nav .nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.oversol-nav .nav-dropdown-menu a:hover,
.oversol-nav .nav-dropdown-menu a:focus-visible {
  background: var(--panel-2);
  color: var(--text);
}

.oversol-nav .nav-dropdown-menu a.current {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 480px) {
  .oversol-nav { padding: 14px 16px; gap: 10px; }
  .oversol-nav a.brand-mark { font-size: 1.05rem; gap: 8px; }
  .oversol-nav a.brand-mark .brand-icon { height: 30px; }
  .oversol-nav .nav-links { gap: 14px; font-size: 0.84rem; }
  .oversol-nav .nav-dropdown-menu { right: -10px; min-width: 172px; }
}

/* ---------- Shared buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent, var(--soul-gold)), var(--accent-2, var(--soul-gold-deep)));
  color: #17110a;
  font-weight: 700;
}

.btn-primary:hover {
  box-shadow: 0 8px 24px -8px var(--accent, var(--soul-gold));
}

.btn-ghost:hover {
  border-color: var(--accent, var(--soul-gold));
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}