/* GuitarToneMap — Vintage Rock Poster theme (Option C) */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #f9f5e7;      /* cream background */
  --panel: #ffffff;   /* white cards */
  --text: #2b2b2b;    /* ink text */
  --muted: #595959;   /* secondary text */
  --primary: #3c9d9b; /* turquoise */
  --soft: #e9f4f3;    /* very light turquoise wash */
  --accent: #d97925;  /* burnt orange */
  --border: rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg) 80%, white);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.brand {
  font-family: "League Spartan", Inter, sans-serif;
  font-weight: 700; font-size: 1.25rem; letter-spacing: .3px;
}
.brand em { color: var(--primary); font-style: normal; }
.nav a { margin-left: 18px; font-weight: 600; color: var(--text); opacity: .8; }
.nav a.active, .nav a:hover { opacity: 1; color: var(--primary); }

/* Hero */
.hero { padding: clamp(48px, 8vw, 96px) 0; }
.hero .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(20px, 4vw, 36px);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.kicker {
  display: inline-block; font-weight: 700; letter-spacing: .3px;
  color: var(--primary); background: var(--soft);
  padding: 6px 10px; border-radius: 999px; margin-bottom: 12px;
}
h1.title {
  font-family: "League Spartan", Inter, sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.03; margin: 0 0 8px 0;
}
.subtitle { color: var(--muted); font-size: clamp(1rem, 2.6vw, 1.15rem); margin: 0; }
.rule {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 65%, var(--accent)));
  margin: 18px 0 8px 0;
}

/* Feature grid */
.features { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.card h3 { font-family: "League Spartan", Inter, sans-serif; font-size: 1.1rem; margin: 8px 0; }
.badge { font-size: .8rem; font-weight: 700; color: var(--primary); }
.card p { color: var(--muted); margin: 6px 0 0 0; }

/* Buttons */
.hero-cta { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.button {
  display: inline-block; padding: 12px 16px; font-weight: 700;
  border-radius: 14px; border: 1px solid var(--border);
  background: #fff; color: var(--text);
  transition: transform .06s ease, box-shadow .2s ease;
}
.button.primary {
  background: var(--primary); color: #fff; border-color: transparent;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }

/* Sections */
.section { padding: 40px 0; }

/* About page styles */
.lede { font-size: 1.1rem; color: var(--muted); max-width: 70ch; }
h2 {
  font-family: "League Spartan", Inter, sans-serif;
  font-size: clamp(1.4rem, 3.6vw, 2rem); margin: 26px 0 6px;
}
ul.feature-list { padding-left: 1.1rem; color: var(--muted); }

/* Footer */
.footer {
  margin: 56px 0 28px; color: color-mix(in oklab, var(--text) 70%, #666);
  font-size: .95rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.swatches { display: inline-flex; gap: 8px; align-items: center; }
.swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border); }

/* ===== Sticky narrative panels ===== */
.narrative {
    padding: 32px 0 80px;
  }
  
  .narrative-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 28px;
  }
  
  @media (max-width: 860px) {
    .narrative-grid { grid-template-columns: 1fr; }
  }
  
  .narrative-sticky {
    position: sticky;
    top: 96px;                 /* sticks below your nav */
    align-self: start;
  }
  
  .narrative-sticky h2 {
    font-family: "League Spartan", Inter, sans-serif;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    margin: 0 0 6px;
  }
  .narrative-sticky p { color: var(--muted); margin: 0; }
  
  /* Content list */
  .narrative-list {
    display: grid;
    gap: 18px;
  }
  
  .narrative-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    will-change: opacity, transform;
  }
  
  /* Initial state (for both CSS scroll animations & JS fallback) */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
  }
  
  /* Fallback when JS toggles visibility */
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s ease;
  }
  
  /* --- Scroll-linked animation (modern browsers) --- */
  @supports (animation-timeline: view()) {
    @keyframes fadeLift {
      0%   { opacity: 0; transform: translateY(16px) }
      30%  { opacity: 1; transform: translateY(0) }
      70%  { opacity: 1; transform: translateY(0) }
      100% { opacity: 0.15; transform: translateY(-8px) } /* dissipate on exit */
    }
    .reveal {
      animation-name: fadeLift;
      animation-duration: 1ms;            /* duration ignored; timeline drives it */
      animation-timing-function: ease;
      animation-timeline: view();         /* tie to element’s viewport progress */
      animation-range: entry 10% cover 60%;  /* animate entry→cover→exit */
    }
  }
  
  /* Respect users who prefer less motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
  }