:root {
  --bg: #090909;
  --bg-soft: #10100f;
  --paper: #f0eadc;
  --text: #f3eee4;
  --muted: #9d9990;
  --gold: #d7ad62;
  --gold-soft: #b58c4b;
  --line: rgba(240,234,220,.14);
  --line-soft: rgba(240,234,220,.08);
  --shell: min(1240px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .035;
  background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px 4px);
  background-size: 7px 7px;
  mix-blend-mode: soft-light;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40; height: 76px;
  padding: 0 max(24px, calc((100vw - 1240px)/2));
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(9,9,9,.88), rgba(9,9,9,0));
}
.mini-brand { width: 76px; display: block; }
.mini-brand img { width: 100%; height: 42px; object-fit: contain; object-position: left center; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { color: rgba(243,238,228,.72); text-decoration: none; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease; }
.nav a:hover { color: var(--text); }
.nav-cta { color: var(--text) !important; border-bottom: 1px solid var(--gold); padding-bottom: 4px; }
.nav-cta span { color: var(--gold); margin-left: 5px; }
.nav-toggle { display: none; border: 0; background: none; padding: 10px; cursor: pointer; }
.nav-toggle span { display:block; width:25px; height:1px; background:var(--text); margin:5px; }

/* ── Layout ─────────────────────────────────────────────── */
.section-inner { width: var(--shell); margin-inline: auto; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { min-height: 100svh; position: relative; display:flex; align-items:center; overflow:hidden; }
.hero-inner { width: var(--shell); margin: 0 auto; padding-top: 76px; }
.hero-kicker { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:11px; color:var(--gold); font-size:.68rem; letter-spacing:.18em; }
.hero-logo-wrap { position:relative; width:min(980px, 100%); margin: 7vh auto 4vh; }
.hero-logo { width:100%; position:relative; z-index:2; }
.hero-logo-echo { position:absolute; inset:0; background:url('assets/echo-logo.png') center/contain no-repeat; transform:translateY(18px) scale(.99); opacity:.12; filter:blur(1px); z-index:1; }
.hero-bottom { display:grid; grid-template-columns: 1fr auto; gap:30px; align-items:end; border-bottom:1px solid var(--line); padding-bottom:22px; }
.hero-intro { max-width:620px; margin:0; font:500 clamp(1.25rem,2.5vw,2rem)/1.18 "Bodoni Moda", serif; letter-spacing:-.02em; }
.hero-links { display:flex; gap:28px; }
.text-link { display:inline-flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; border-bottom:1px solid rgba(240,234,220,.3); padding-bottom:7px; transition:border-color .25s, color .25s, transform .25s; }
.text-link:hover { color:var(--gold); border-color:var(--gold); transform:translateX(3px); }
.text-link span { color:var(--gold); }
.hero-sweep { position:absolute; width:72vw; aspect-ratio:1; border:1px solid rgba(215,173,98,.12); border-radius:50%; right:-30vw; top:18%; pointer-events:none; }
.hero-sweep span { position:absolute; inset:12%; border:inherit; border-radius:inherit; }
.hero-sweep span:nth-child(2){inset:24%}.hero-sweep span:nth-child(3){inset:36%}.hero-sweep span:nth-child(4){inset:48%}

/* ── Sections ───────────────────────────────────────────── */
.section { padding: 130px 0; border-top:1px solid var(--line-soft); }
.section-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; margin-bottom:70px; }
.section-index { margin:0; color:var(--gold); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
.section-rule { height:1px; background:var(--line); }
.section-side { margin:0; color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
h2 { margin:0; font:500 clamp(3.3rem,7.5vw,8.5rem)/.88 "Bodoni Moda", Georgia, serif; letter-spacing:-.055em; }
h2 em { color:var(--gold); font-style:normal; }
.section-intro > p:last-child, .about-copy p, .repertoire-copy > p { color:var(--muted); max-width:42ch; }

/* ── Listen / video embed ───────────────────────────────── */
.listen-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,8vw,130px); align-items:start; }
.listen .section-intro > p:last-child { margin:32px 0 0; }

.media-embed {
  background:#11110f;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.media-embed::before {
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid var(--line-soft);
  pointer-events:none;
  z-index:1;
}

.video-player-wrap {
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:2;
}
.video-player-wrap video {
  width:100%;
  aspect-ratio:16/9;
  display:block;
  background:#000;
  object-fit:cover;
}

.video-footer {
  border-top:1px solid var(--line-soft);
}
.video-caption {
  margin:0;
  padding:11px 16px 8px;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}

.video-thumbs-inline {
  display:flex;
  gap:0;
  border-top:1px solid var(--line-soft);
}
.vthumb-inline {
  flex:1;
  background:none;
  border:none;
  border-right:1px solid var(--line-soft);
  cursor:pointer;
  padding:0;
  color:var(--text);
  font-family:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  transition:background .2s;
}
.vthumb-inline:last-child { border-right:none; }
.vthumb-inline:hover, .vthumb-inline.active { background:rgba(215,173,98,.07); }
.vthumb-inline svg {
  width:100%;
  height:62px;
  padding:14px;
  color:var(--gold);
  opacity:.55;
  transition:opacity .2s;
}
.vthumb-inline:hover svg, .vthumb-inline.active svg { opacity:1; }
.vthumb-inline img {
  width:100%;
  height:62px;
  object-fit:cover;
  display:block;
  filter:grayscale(.5);
  transition:filter .2s;
}
.vthumb-inline:hover img, .vthumb-inline.active img { filter:grayscale(0); }
.vthumb-inline span {
  display:block;
  padding:6px 8px 9px;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  line-height:1.3;
  border-top:1px solid var(--line-soft);
  width:100%;
}
.vthumb-inline.active span { color:var(--gold); }

/* ── About ──────────────────────────────────────────────── */
.about { background:linear-gradient(180deg, #0b0b0a, #0f0f0e); }
.about-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(50px,10vw,180px); align-items:end; }
.about-grid h2 { max-width:900px; }
.about-copy { padding-bottom:10px; }
.about-copy p { font-size:1rem; line-height:1.75; margin:0 0 35px; }

/* ── Members ────────────────────────────────────────────── */
.members { padding-top:80px; }
.members-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.member-card { min-height:430px; position:relative; overflow:hidden; background:#151513; border:1px solid var(--line-soft); }
.member-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.82)); }
.member-card img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); opacity:.82; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s, opacity .6s; }
.member-card:hover img { transform:scale(1.045); filter:grayscale(.35) contrast(1.05); opacity:1; }
.member-meta { position:absolute; z-index:2; left:18px; right:18px; bottom:17px; }
.member-meta h3 { margin:0; font:500 clamp(1.35rem,2vw,2rem)/1 "Bodoni Moda",serif; }
.member-meta p { margin:6px 0 0; color:#c9c4b9; font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; }
.member-card.missing::before { content:"Foto kommer"; position:absolute; inset:0; display:grid; place-items:center; color:#67645e; font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; }
.member-card.missing img { display:none; }

/* ── Repertoire ─────────────────────────────────────────── */
.repertoire { position:relative; overflow:hidden; padding-bottom:90px; }
.repertoire-grid { display:grid; grid-template-columns:1fr .72fr; gap:80px; align-items:end; }
.repertoire-copy { padding-bottom:10px; }
.repertoire-copy > p { line-height:1.75; margin:0 0 35px; }
.genre-tags { display:flex; flex-wrap:wrap; gap:8px; }
.genre-tags span { color:var(--gold); border:1px solid rgba(215,173,98,.35); padding:8px 12px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.wave-divider { height:150px; margin-top:100px; opacity:.65; }
.wave-divider svg { width:100%; height:100%; }
.wave-divider path { fill:none; stroke:var(--gold); stroke-width:1; opacity:.5; }

/* ── Gigs ───────────────────────────────────────────────── */
.gigs { padding-top:100px; }
.gigs-list { border-top:1px solid var(--line); }
.gig { display:grid; grid-template-columns:130px 1fr auto; gap:30px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line-soft); transition:padding .3s, background .3s; }
.gig:hover { padding-left:12px; background:rgba(215,173,98,.025); }
.gig-date { color:var(--gold); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
.gig-meta strong { display:block; font:500 clamp(1.5rem,2.5vw,2.3rem)/1 "Bodoni Moda",serif; }
.gig-meta span { display:block; margin-top:5px; color:var(--muted); font-size:.82rem; }
.gig a { color:var(--text); text-decoration:none; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; }
.gig a:hover { color:var(--gold); }
.empty-state { padding:40px 0; color:var(--muted); }

/* ── Booking ────────────────────────────────────────────── */
.booking-section { position:relative; overflow:hidden; background:var(--paper); color:#11110f; padding:120px 0; }
.booking-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(50px,8vw,130px); align-items:start; position:relative; z-index:2; }
.booking-inner {}
.booking-inner h2 { max-width:600px; margin-bottom:28px; }
.booking-inner > p { color:#555149; max-width:38ch; margin:0 0 32px; line-height:1.7; }
.booking-email-link { display:inline-flex; align-items:center; gap:10px; color:#11110f; text-decoration:none; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid rgba(17,17,15,.25); padding-bottom:6px; transition:border-color .2s, color .2s; }
.booking-email-link:hover { color:var(--gold-soft); border-color:var(--gold-soft); }
.booking-email-link span { color:var(--gold-soft); }
.button { display:inline-flex; align-items:center; gap:14px; color:#f3eee4; background:#11110f; padding:15px 19px; text-decoration:none; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; }
.button span { color:var(--gold); }
.booking-orbit { position:absolute; width:620px; aspect-ratio:1; border:1px solid rgba(120,87,35,.25); border-radius:50%; right:-170px; top:-110px; }
.booking-orbit span { position:absolute; inset:14%; border:inherit; border-radius:50%; }
.booking-orbit span:nth-child(2){inset:28%}.booking-orbit span:nth-child(3){inset:42%}

/* ── Contact form ──────────────────────────────────────────── */
.booking-form-wrap {
  background: rgba(17,17,15,.06);
  border: 1px solid rgba(17,17,15,.18);
  padding: 40px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.form-group label { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:#555149; }
.label-required { color: var(--gold-soft); }
.form-group input,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(17,17,15,.28);
  padding: 10px 0;
  font-family: inherit;
  font-size: .95rem;
  color: #11110f;
  outline: none;
  resize: none;
  transition: border-color .2s;
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(17,17,15,.35); }
.form-group input:focus,
.form-group textarea:focus { border-bottom-color: #11110f; }
.field-error { font-size:.65rem; color:#b94040; min-height:1em; }
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #11110f;
  color: #f3eee4;
  border: none;
  padding: 14px 22px;
  font-family: inherit;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity .2s;
}
.form-submit span { color: var(--gold); }
.form-submit:disabled { opacity: .5; cursor: not-allowed; }
.form-error {
  font-size: .8rem;
  color: #b94040;
  margin-bottom: 12px;
  min-height: 0;
}

/* Tack-meddelande — dolt tills JS sätter display + .animating */
.form-success {
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  padding: 40px 0 20px;
  text-align: center;
}
.form-success.animating {
  opacity: 1;
  transform: none;
}
.form-success p {
  font: 500 1.6rem/1.3 "Bodoni Moda", serif;
  color: #11110f;
  margin: 0;
  letter-spacing: -.02em;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer { border-top:1px solid var(--line); padding:35px 0 45px; }
.footer-inner { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:30px; }
.footer-logo { width:110px; }
.footer-logo img { width:100%; height:52px; object-fit:contain; object-position:left center; }
.footer p { color:var(--muted); margin:0; font-size:.7rem; }
.socials { display:flex; justify-content:center; gap:28px; }
.socials a { color:var(--muted); text-decoration:none; text-transform:uppercase; font-size:.67rem; letter-spacing:.12em; }
.socials a:hover{color:var(--gold)}

/* ── Reveal ─────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-logo-echo{display:none}.member-card img,.gig{transition:none}}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  :root{--shell:min(100% - 32px, 1240px)}
  .site-header{padding:0 16px}
  .nav-toggle{display:block}
  .nav{display:none; position:absolute; top:64px; left:16px; right:16px; padding:20px; flex-direction:column; align-items:flex-start; gap:20px; background:rgba(13,13,12,.96); border:1px solid var(--line); backdrop-filter:blur(18px)}
  .nav.open{display:flex}
  .hero-inner{padding-top:88px}.hero-logo-wrap{margin:8vh auto 6vh}.hero-bottom{grid-template-columns:1fr; gap:22px}.hero-links{justify-content:space-between}
  .listen-grid,.about-grid,.repertoire-grid{grid-template-columns:1fr;gap:55px}
  .booking-layout{grid-template-columns:1fr;gap:50px}
  .members-grid{grid-template-columns:repeat(2,1fr)}.member-card{min-height:330px}
  .footer-inner{grid-template-columns:1fr auto}.footer-logo{grid-column:1}.socials{grid-column:1/-1;justify-content:flex-start}.footer p{grid-column:2;grid-row:1}
}

@media (max-width: 560px) {
  .section{padding:90px 0}.section-top{grid-template-columns:auto 1fr; margin-bottom:45px}.section-side{display:none}.hero-kicker{font-size:.58rem}.hero-sweep{width:130vw;right:-90vw}.hero-intro{font-size:1.25rem}.hero-links{gap:16px}.hero-logo-wrap{margin:12vh auto 7vh}
  h2{font-size:3.5rem}.members-grid{grid-template-columns:1fr 1fr}.member-card{min-height:260px}.member-meta{left:12px;right:12px;bottom:12px}.member-meta h3{font-size:1.2rem}
  .gig{grid-template-columns:78px 1fr;gap:15px}.gig > :last-child{grid-column:2}.booking-section{padding:90px 0}.booking-orbit{width:420px;right:-250px;top:80px}
  .form-row{grid-template-columns:1fr}
  .booking-form-wrap{padding:24px 20px}
  .vthumb-inline svg, .vthumb-inline img { height:48px; }
  .vthumb-inline span { font-size:.55rem; padding:5px 4px 7px; }
}