/* GuitarToneMap — Vintage Rock Poster theme (clean mobile nav + gutters) */
@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;
  --panel:#ffffff;
  --text:#2b2b2b;
  --muted:#595959;
  --primary:#3c9d9b;
  --soft:#e9f4f3;
  --accent:#d97925;
  --border:rgba(0,0,0,.06);
  --shadow:0 18px 40px 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"
}

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

/* Container w/ safe mobile gutters */
.container{
  max-width:1000px;
  margin:0 auto;
  padding-inline:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
@media (max-width:860px){
  .container{ padding-inline:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
}

/* =========================
   NAV
   ========================= */
.nav{ position:sticky; top:0; z-index:50; 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 }

/* Logo */
#site-logo{ display:block; max-width:240px; width:100%; aspect-ratio:3/1; line-height:0;
  background:url('./assets/Logo3.svg') no-repeat center center/contain }
@media (max-width:860px){ #site-logo{ max-width:200px } }

/* Desktop menu */
.nav a{ margin-left:18px; font-weight:600; color:var(--text); opacity:.8; text-decoration:none }
.nav a.active,.nav a:hover{ opacity:1; color:var(--primary); text-decoration:none }
.nav-links{ display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0 }

/* Dropdown (desktop) */
.browse-trigger{ background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font:600 15px/1.2 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); opacity:.8;
  padding:6px 8px; border-radius:10px; transition:background .18s ease,color .18s ease,transform .1s ease }
.browse-trigger:hover{ color:var(--primary); opacity:1; background:rgba(0,0,0,.03) }
.browse-trigger:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.dropdown{ position:relative }
.chev{ transition:transform .18s ease }

.menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--panel);
  border:1px solid var(--border); box-shadow:0 12px 30px rgba(0,0,0,.10);
  border-radius:12px; padding:8px; display:grid; gap:2px; opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; visibility:hidden; transition:opacity .14s ease, transform .14s ease, visibility .14s linear;
  list-style:none; margin:0
}
.menu li{ list-style:none; margin:0; padding:0 }
.menu a{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; color:var(--text); text-decoration:none; opacity:.92 }
.menu a:hover{ background:rgba(0,0,0,.04); opacity:1 }
.dropdown.open .menu{ opacity:1; transform:none; pointer-events:auto; visibility:visible }
.dropdown.open .chev{ transform:rotate(180deg) }

/* =========================
   HERO / CARDS / BUTTONS / SECTIONS
   (unchanged style details trimmed for brevity)
   ========================= */
.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:var(--shadow) }
.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 }
.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 }

.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 }

.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) }

.section{ padding:40px 0 }

/* ABOUT */
.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 (unchanged) */
.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; 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 }
.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 }
.reveal{ opacity:0; transform:translateY(16px) }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease }
@supports (animation-timeline: view()){
  @keyframes fadeLift{ 0%{opacity:0;transform:translateY(16px)} 30%{opacity:1;transform:none} 70%{opacity:1;transform:none} 100%{opacity:.15;transform:translateY(-8px)} }
  .reveal{ animation-name:fadeLift; animation-duration:1ms; animation-timing-function:ease; animation-timeline:view(); animation-range:entry 10% cover 60% }
}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important }
}

/* =========================
   Mobile nav
   ========================= */
.nav-toggle{ display:none }
.mobile-nav{ display:none }

.nav-toggle{
  -webkit-appearance:none; appearance:none; border:0; background:transparent !important; box-shadow:none;
  padding:8px; border-radius:10px; cursor:pointer; line-height:0; margin-left:auto; z-index:120; -webkit-tap-highlight-color:transparent
}
.nav-toggle:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.nav-toggle:hover{ background:rgba(0,0,0,.04) }
.nav-toggle .nav-icon{ display:block }
.nav-toggle .nav-icon rect{ fill:var(--text); transform-origin:center; transition-property:transform,opacity; transition-duration:.32s,.28s; transition-timing-function:cubic-bezier(.4,0,.2,1),ease }

/* Hamburger ↔ X animation */
.nav-open .nav-toggle .nav-icon rect:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.nav-open .nav-toggle .nav-icon rect:nth-child(2){ opacity:0; transition-delay:.06s,.06s }
.nav-open .nav-toggle .nav-icon rect:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
.nav-toggle .nav-icon rect:nth-child(1){ transition-delay:.12s,.12s }
.nav-toggle .nav-icon rect:nth-child(2){ transition-delay:.06s,.06s }
.nav-toggle .nav-icon rect:nth-child(3){ transition-delay:0s,0s }

@media (prefers-reduced-motion: reduce){
  .nav-toggle .nav-icon rect{ transition:none !important }
}

@media (max-width:860px){
  .nav-links{ display:none }
  .nav-inner{ height:64px }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
  .mobile-nav{ display:block }

  /* Layer that exists only when open; full-viewport, iOS-safe */
  .mobile-nav{
    position:fixed; inset:0; z-index:100; pointer-events:none; /* becomes auto when open */
    display:grid; grid-template-columns:1fr auto;
  }
  .mobile-scrim{
    grid-column:1/2; background:rgba(0,0,0,.35);
    opacity:0; transition:opacity .18s ease;
  }
  .mobile-nav-panel{
    grid-column:2/3; width:min(86vw,380px); height:100%;
    background:var(--panel); border-left:1px solid var(--border);
    box-shadow:0 24px 60px rgba(0,0,0,.28); border-top-left-radius:16px; border-bottom-left-radius:16px;
    transform:translateX(100%); transition:transform .22s ease; outline:none; display:flex; contain:paint;
  }
  .mobile-menu{
    display:flex; flex-direction:column; gap:2px; width:100%; padding:18px;
    overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }

  .mobile-link,.mobile-accordion{
    font:700 1.05rem/1.2 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    color:var(--text); text-decoration:none; padding:14px 12px; border-radius:12px;
    border:1px solid transparent; background:transparent; text-align:left;
    display:flex; align-items:center; justify-content:space-between;
  }
  .mobile-link:hover,.mobile-accordion:hover{ background:rgba(0,0,0,.04) }
  .mobile-accordion{ cursor:pointer }
  .mobile-accordion .chev{ transition:transform .18s ease }

  .mobile-sub{ display:grid; gap:4px; padding:6px 0 8px 8px }
  .mobile-sublink{ font:600 1rem/1.2 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); text-decoration:none; padding:12px 12px; border-radius:10px }
  .mobile-sublink:hover{ background:rgba(0,0,0,.04) }

  /* Open state toggles both visibility and clickability */
  body.nav-open{ overflow:hidden; position:fixed; inset:0; width:100%; touch-action:none; overscroll-behavior:none }
  .mobile-nav.open{ pointer-events:auto }
  .mobile-nav.open .mobile-scrim{ opacity:1 }
  .mobile-nav.open .mobile-nav-panel{ transform:none }
  .mobile-nav.open .mobile-accordion[aria-expanded="true"] .chev{ transform:rotate(180deg) }

  .mobile-menu,.mobile-menu *{ list-style:none }
}

/* Fallbacks */
@supports not (animation-timeline: view()){ .reveal{ opacity:1; transform:none } }