/* ==========================================================================
   SpinJacket — shared site styles (design system)
   Reused by every page: home, audiophiles, displays, events, pricing, about,
   support, legal. Change a token here and the whole site follows.
   Palette + type carried over from the existing SpinJacket site.
   ========================================================================== */

:root {
  --black:#0a0a0a; --surface:#111111; --lifted:#1a1a1a; --border:#222222;
  --gold:#12aec4; --gold-dim:#0b7f91; --white:#ffffff; --grey:#888888;
  --grey-lt:#aaaaaa; --green:#1db954; --r:12px;
  --maxw:1100px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--black); color:var(--white); font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.display { font-family:'Playfair Display',serif; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.gold { color:var(--gold); }

/* ── Navigation ─────────────────────────────────────────────────────────── */
header.site { padding:22px 0; border-bottom:1px solid var(--border); position:sticky; top:0;
  background:rgba(10,10,10,.86); backdrop-filter:blur(10px); z-index:50; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logo { display:inline-flex; align-items:center; gap:8px; font-family:'Playfair Display',serif;
  font-weight:700; font-size:22px; letter-spacing:-.3px; }
.nav-logo .wordmark { display:none; }  /* logo image already contains the name */
.nav-logo-img { height:40px; width:auto; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { font-size:14.5px; color:var(--grey-lt); transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-login { font-size:14.5px; color:var(--grey-lt); }
.nav-login:hover { color:var(--white); }
.nav-toggle { display:none; background:none; border:0; color:var(--white); font-size:22px; cursor:pointer; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display:inline-block; text-align:center; padding:13px 26px; border-radius:8px;
  font-size:15px; font-weight:600; transition:.18s; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:var(--gold); color:var(--black); }
.btn-primary:hover { background:var(--gold-dim); color:var(--white); }
.btn-ghost { border-color:var(--border); color:var(--white); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn-sm { padding:10px 18px; font-size:14px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding:84px 0 64px; }
.hero-eyebrow { color:var(--gold); font-size:13px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:18px; }
.hero h1 { font-family:'Playfair Display',serif; font-weight:900;
  font-size:clamp(34px,6vw,60px); line-height:1.05; letter-spacing:-1.5px; margin-bottom:20px; }
.hero p.lead { color:var(--grey-lt); font-size:clamp(16px,2vw,19px); max-width:600px; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
section.block { padding:64px 0; }
section.block.alt { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-head { text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head h2 { font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(26px,3.4vw,38px); letter-spacing:-.6px; margin-bottom:14px; }
.section-head p { color:var(--grey-lt); font-size:16.5px; }
.eyebrow { color:var(--gold); font-size:12.5px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; margin-bottom:12px; }

/* ── Cards / grids ──────────────────────────────────────────────────────── */
.grid { display:grid; gap:24px; }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
.card:hover { border-color:#333; transform:translateY(-3px); }
.card.target { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 10px 40px rgba(18,174,196,.13); }
.card-body { padding:28px 26px; display:flex; flex-direction:column; flex:1; }
.card h3 { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; margin-bottom:8px; }
.card p { color:var(--grey-lt); font-size:14.5px; flex:1; }
.card .card-link { color:var(--gold); font-weight:600; font-size:14.5px; margin-top:18px; }
.card .card-link:hover { text-decoration:underline; }

/* Image placeholder — swap the .ph divs for real <img> later */
.ph { position:relative; overflow:hidden; background:linear-gradient(135deg,#161620,#0d0d14);
  border-bottom:1px solid var(--border); aspect-ratio:16/10; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph.tall { aspect-ratio:4/5; }
.ph.wide { aspect-ratio:21/9; border:1px solid var(--border); border-radius:var(--r); }

/* Feature list (checkmarks) */
ul.checks { list-style:none; }
ul.checks li { padding:8px 0 8px 28px; position:relative; font-size:15px; color:var(--grey-lt); }
ul.checks li::before { content:''; position:absolute; left:0; top:15px; width:13px; height:7px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }

/* Two-column feature row (image + text) */
.split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.split.rev .split-media { order:2; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.site { border-top:1px solid var(--border); padding:44px 0 34px; color:var(--grey); font-size:13.5px; }
.foot-grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; margin-bottom:28px; }
.foot-col h4 { color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.foot-col a { display:block; color:var(--grey-lt); padding:4px 0; }
.foot-col a:hover { color:var(--gold); }
.foot-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex;
  flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; }
.foot-bottom a { color:var(--grey-lt); }
.foot-bottom a:hover { color:var(--gold); }
.attrib { color:var(--grey); font-size:12px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:760px) {
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    gap:0; background:var(--black); border-bottom:1px solid var(--border); padding:8px 24px 18px; }
  .nav-links.open a { padding:12px 0; border-bottom:1px solid var(--border); }
  .nav-toggle { display:block; }
  .split, .split.rev .split-media { grid-template-columns:1fr; order:0; }
  .split { gap:24px; }
}

/* logo image used in place of the 'SpinJacket' wordmark inside text */
.inline-logo { height:1.05em; width:auto; vertical-align:-0.16em; display:inline-block; }
.foot-logo { height:40px; width:auto; display:block; margin-bottom:8px; }

/* stacked hero headline: "Find your" over a large logo */
.headline-stack { display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.headline-stack .hero-logo { height:auto; width:min(560px,80%); max-width:100%; display:block; }
@media (max-width:760px){ .headline-stack .hero-logo { width:88%; } .headline-stack { gap:12px; } }

/* homepage cards cross-fade between two images */
.ph.rotate img { opacity:0; transition:opacity 1.2s ease; z-index:1; }
.ph.rotate img.show { opacity:1; }