/* =============================================================
   THE GALAXIE AGENCY — MAIN STYLESHEET
   -------------------------------------------------------------
   Quick edits:
   • Colors & fonts → change the variables in :root below.
   • Photos        → replace files in /images with the same name,
                     or change the url(...) / src="" paths.
   ============================================================= */

:root {
  /* Colors */
  --night: #0a0f1d;          /* main dark background */
  --night-2: #0f1628;        /* card background */
  --paper: #ece3d2;          /* cream paper */
  --ink: #13203d;            /* dark navy text on paper */
  --ice: #8fd0f0;            /* light blue accent (buttons, script) */
  --blue: #4fb3ea;           /* "Galaxie" blue */
  --pink: #e59bd0;           /* "Live" pink */
  --lavender: #a99be8;
  --text-light: #e8ecf5;
  --text-muted: #b6bfd3;

  /* Fonts */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-script: "Rock Salt", cursive;         /* brush caps: Galaxie Live, Official Merch */
  --font-script-thin: "felt-tip-roman", "Nothing You Could Do", cursive; /* handwriting (Adobe Fonts): Fluent Blues., card titles, etc. */
  --font-display: "Abril Fatface", "Playfair Display", Georgia, serif; /* big headlines */
  --font-condensed: "Anton", Impact, sans-serif;
  --font-caps: "Bebas Neue", "Oswald", sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-type: "Special Elite", "Courier New", monospace;

  --max: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ice); line-height: 1.8; margin: 0;
}
.short-rule { width: 56px; border: 0; border-top: 2px solid var(--text-light); margin: 22px 0; }
.short-rule.dark { border-color: var(--ink); opacity: .7; }
.star-accent { color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid currentColor;
  transition: background .25s, color .25s, transform .25s;
}
.btn .arrow { font-size: 16px; transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn .icon { width: 18px; height: 18px; }
.btn-small { padding: 11px 18px; font-size: 11px; }
.btn-outline { color: var(--ice); }
.main-nav .btn-outline { background: rgba(8,12,24,.5); }
.btn-outline:hover { background: var(--ice); color: var(--night); }
.btn-dark { color: var(--ink); }
.btn-dark:hover { background: var(--ink); color: var(--paper); }
.btn-light-outline { color: #fff; }
.btn-light-outline:hover { background: #fff; color: var(--night); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px 40px;
  /* dark fade behind the menu so it stands out from the photo */
  background: linear-gradient(180deg, rgba(8,12,24,.92) 0%, rgba(8,12,24,.65) 60%, rgba(8,12,24,0) 100%);
  transition: padding .3s, background .3s, box-shadow .3s;
}
/* solid bar once you scroll down (class added by main.js) */
.site-header.scrolled {
  padding: 12px 48px;
  background: rgba(8,12,24,.96);
  box-shadow: 0 1px 0 rgba(143,208,240,.25), 0 8px 24px rgba(0,0,0,.35);
}
.logo { display: block; line-height: 0; }
.logo img { width: 210px; height: auto; transition: width .3s; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.site-header.scrolled .logo img { width: 140px; }

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav > ul { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.main-nav > ul > li { display: flex; align-items: center; }
.main-nav > ul > li > a {
  text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; padding-bottom: 8px; border-bottom: 2px solid transparent;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  transition: border-color .2s, color .2s;
}
.main-nav > ul > li > a:hover { color: var(--ice); border-color: var(--ice); }
.main-nav > ul > li > a.active { border-color: #d4b04c; }   /* gold underline to match the logo */
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 780px;
  display: flex; align-items: center;   /* headline sits mid-banner instead of at the bottom */
  padding: 150px 48px 110px;
  overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0 0 0 30%;
  background: url("../images/hero-guitar-case.jpg") center 40% / cover no-repeat;
}
.hero-photo::after {           /* fades the photo into the dark left side */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(10,15,29,.75) 18%, rgba(10,15,29,0) 45%),
    linear-gradient(0deg, rgba(10,15,29,.7) 0%, rgba(10,15,29,0) 30%);
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.hero-content .eyebrow { margin-bottom: 36px; }
.hero-title { line-height: .86; margin-bottom: 40px; width: max-content; max-width: 100%; }
.hero-title .serif { display: block; font-family: var(--font-display); font-size: clamp(50px, 7vw, 104px); white-space: nowrap; color: #eef0f6; letter-spacing: -.02em; }
.hero-title .script {
  display: block; font-family: var(--font-script-thin); font-size: clamp(30px, 4.1vw, 62px); white-space: nowrap; width: max-content;
  margin: .1em 0 0 auto; line-height: 1.1; padding: 0 .12em .1em 0; transform: rotate(-6deg); transform-origin: right center; /* lines up with the end of "We Speak" */
}
.gradient-text {
  background: linear-gradient(95deg, #b8a4f0 0%, #8da2f2 45%, #5fc4f0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(120,150,255,.35));
}
.hero-sub, .hero-tag { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; line-height: 1.9; margin: 0; }

.hero-words {
  position: absolute; z-index: 2; right: 5%; top: 16%;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-caps); font-size: 30px; letter-spacing: .08em; line-height: 1.25;
  color: rgba(150,185,225,.75);
  transform: rotate(-6deg);
}

/* ---------- Paper sections (shared) ---------- */
.paper {
  position: relative; color: var(--ink);
  background: var(--paper) url("../images/paper-texture.jpg");
  z-index: 3;
}
.paper::before, .paper::after {     /* torn paper edges */
  content: ""; position: absolute; left: 0; right: 0; height: 30px; pointer-events: none;
  background-size: 100% 100%;
}
.paper::before { top: -29px; background-image: url("../images/torn-top.svg"); }
.paper::after  { bottom: -29px; background-image: url("../images/torn-bottom.svg"); }
.mountains {
  position: absolute; right: 0; bottom: 0; width: 55%; height: 70%;
  background: url("../images/mountains.svg") right bottom / contain no-repeat;
  pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.paper .container { position: relative; z-index: 1; }

/* ---------- About ---------- */
.about { padding: 90px 0 100px; }
.about-grid { display: grid; grid-template-columns: 1.15fr .8fr .35fr; gap: 48px; align-items: center; }
.about-logo { margin: 0; line-height: 0; }
.about-logo img { width: 100%; max-width: 440px; height: auto; }
.stamp-title {
  font-family: var(--font-condensed); font-size: clamp(54px, 6vw, 84px); line-height: .95;
  text-transform: uppercase; letter-spacing: .01em; position: relative;
}
.stamp-title .small { display: block; font-size: .55em; }
.stamp-title .star-accent { position: absolute; top: -8px; left: 120px; font-size: .6em; color: var(--ink); }
.about-text p { font-size: 16px; max-width: 560px; }
.about-text .btn { margin-top: 12px; }

.polaroid {
  margin: 0; background: #f5efe3; padding: 18px 18px 70px;
  box-shadow: 0 14px 30px rgba(20,20,40,.28), 0 2px 4px rgba(0,0,0,.15);
  transform: rotate(-3deg); position: relative;
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-family: var(--font-script-thin); font-size: 26px; line-height: 1.15; color: var(--ink);
  transform: rotate(-6deg);
}
.side-words {
  font-family: var(--font-caps); font-size: 30px; line-height: 1.15; letter-spacing: .12em;
  text-transform: uppercase; transform: rotate(-8deg); margin: 0; position: relative;
}
.side-words .star-accent { display: block; font-size: 34px; margin: 0 0 14px 70%; }

/* ---------- Galaxie Live ---------- */
.live {
  display: grid; grid-template-columns: 1fr 1.6fr .95fr; align-items: stretch;
  background: var(--night);
  min-height: 560px; position: relative;
}
.live-left, .live-right { position: relative; overflow: hidden; }
.live-left img, .live-right img { width: 100%; height: 100%; object-fit: cover; }
.live-left::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,15,29,0) 60%, var(--night) 100%); }
.live-right::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--night) 0%, rgba(10,15,29,0) 30%); }
.live-script {
  position: absolute; z-index: 2; left: 8%; top: 42%;
  font-family: var(--font-script-thin); font-size: 36px; line-height: 1.1;
  color: #f2cde6; transform: rotate(-14deg); margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.live-center { padding: 70px 40px 70px; position: relative; z-index: 2; }
.live-title { font-family: var(--font-script); font-size: clamp(44px, 4.6vw, 70px); line-height: 1.3; text-transform: uppercase; margin: 0 0 52px -6px; transform: rotate(-4deg); white-space: nowrap; position: relative; }
.live-title .blue { color: var(--blue); }
.live-title .pink { color: var(--pink); }
.live-title .sparkle { position: absolute; left: 50%; bottom: -46px; font-family: var(--font-body); font-size: 36px; color: #fff; text-shadow: 0 0 12px #9cd7ff; }
.live-center p { color: #d6dcea; max-width: 560px; }
.live-center .btn { margin-top: 12px; }

/* ---------- Cards ---------- */
.cards { background: var(--night); padding: 20px 0 90px; }
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: linear-gradient(180deg, var(--night-2), #0b1122); display: flex; flex-direction: column; padding-bottom: 28px; transition: transform .3s; }
.card:hover { transform: translateY(-6px); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card h3 { font-family: var(--font-script-thin); font-size: 42px; color: var(--ice); line-height: 1.1; margin: -26px 20px 12px; transform: rotate(-4deg); transform-origin: left; position: relative; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.card p { font-size: 14px; color: #d3d9e6; margin: 0 20px 22px; flex: 1; }
.card .btn { margin: 0 20px; align-self: flex-start; }

/* ---------- Family of Artists ---------- */
.family { padding: 70px 0 80px; }
.family-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; }
.serif-title { font-family: var(--font-serif); font-size: clamp(32px, 3vw, 42px); line-height: 1.12; }
.family-intro p { font-size: 14px; }
.artist-list {
  list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 28px;
  font-size: 14px;
}
.artist-list li { break-inside: avoid; padding: 4px 0 4px 26px; position: relative; }
.artist-list li::before { content: "\2739"; position: absolute; left: 0; top: 3px; color: #1d4f8f; font-size: 14px; }

/* ---------- Merch ---------- */
.merch { position: relative; overflow: hidden; background: var(--night); padding: 70px 0; }
.merch-photo {
  position: absolute; inset: 0 0 0 42%;
  background: url("../images/merch.jpg") center / cover no-repeat;
}
.merch-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(10,15,29,0) 25%); }
.merch-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; }
.merch-title {
  font-family: var(--font-script); font-size: 50px; line-height: 1.2; text-transform: uppercase;
  color: #fff; transform: rotate(-10deg); position: relative; padding-bottom: 16px;
}
.merch-title::after { content: ""; position: absolute; left: 30%; bottom: 0; width: 60%; height: 4px; background: var(--blue); border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 7px 0 -1px var(--blue); }
.merch-text { max-width: 360px; }
.merch-text p { color: #d6dcea; }

/* ---------- Newsletter ---------- */
.newsletter { padding: 60px 0; }
.newsletter-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 50px; }
.connect-title { font-family: var(--font-script-thin); font-size: 50px; line-height: 1.1; white-space: nowrap; transform: rotate(-6deg); position: relative; }
.connect-title .star-accent { position: absolute; right: 10px; bottom: -34px; font-family: var(--font-body); font-size: 34px; }
.signup label { display: block; font-size: 14px; margin-bottom: 12px; }
.signup-row { display: flex; max-width: 520px; }
.signup input { flex: 1; padding: 16px 18px; font: 15px var(--font-body); border: 1.5px solid var(--ink); border-right: 0; background: #fbf8f2; color: var(--ink); outline: none; }
.signup input:focus { background: #fff; }
.signup button { width: 64px; border: 0; background: var(--ink); color: #fff; font-size: 22px; cursor: pointer; transition: background .2s; }
.signup button:hover { background: #1d4f8f; }
.form-note { margin-top: 10px; font-weight: 700; }
.postmark { display: flex; align-items: center; gap: 14px; color: var(--ink); opacity: .85; transform: rotate(-5deg); }
.postmark .waves { width: 110px; }
.postmark p { font-family: var(--font-type); font-size: 17px; line-height: 1.35; text-transform: uppercase; border-left: 2px solid var(--ink); padding-left: 14px; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--night); padding: 90px 0 30px; }
.footer-photo { position: absolute; inset: 0 0 0 22%; background: url("../images/footer-road.jpg") center 30% / cover no-repeat; }
.footer-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(10,15,29,.2) 35%, rgba(10,15,29,.2) 75%, rgba(10,15,29,.6) 100%), linear-gradient(0deg, var(--night) 0%, rgba(10,15,29,0) 45%); }
.site-footer .container { position: relative; z-index: 1; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; }
.logo-footer img { width: 230px; filter: none; }
.footer-brand .eyebrow { margin-top: 18px; }
.socials { list-style: none; display: flex; gap: 22px; margin: 36px 0 0; padding: 0; }
.socials a { display: block; text-align: center; color: #fff; transition: color .2s, transform .2s; }
.socials a:hover { color: var(--ice); transform: translateY(-2px); }
.socials svg { display: block; width: 30px; height: 30px; margin: 0 auto; }
.social-label { display: block; margin-top: 7px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.footer-script { font-family: var(--font-script-thin); font-size: 46px; line-height: 1.1; transform: rotate(-12deg); margin: 0 40px 0 0; position: relative; color: #f1f3fa; }
.footer-script .star-accent { position: absolute; right: -40px; top: 10px; font-family: var(--font-body); font-size: 40px; color: var(--ice); text-shadow: 0 0 12px var(--ice); }
.footer-nav { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin: 60px 0 26px; }
.footer-nav a { text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #c9dcef; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.footer-nav a:hover, .footer-nav a.active { border-color: var(--ice); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(143,208,240,.6); padding-top: 20px; font-size: 13px; color: #d6dcea; }
.footer-bottom p { margin: 0; }

/* ---------- Scroll reveal (set by main.js) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1180px) {
  .main-nav > ul { gap: 20px; }
  .main-nav { gap: 22px; }
  .hero-words { font-size: 24px; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .side-words { display: none; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .artist-list { columns: 2; }
  .newsletter-grid { grid-template-columns: 1fr 1fr; }
  .postmark { display: none; }
}

@media (max-width: 960px) {
  .site-header, .site-header.scrolled { padding: 12px 20px; }
  .logo img { width: 150px; }
  .site-header.scrolled .logo img { width: 120px; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 10px; cursor: pointer; z-index: 30;
  }
  .nav-toggle span { width: 28px; height: 2px; background: #fff; transition: transform .3s, opacity .3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .main-nav {
    position: fixed; inset: 0; background: rgba(10,15,29,.97); flex-direction: column; justify-content: center;
    gap: 40px; opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .main-nav.open { opacity: 1; pointer-events: auto; }
  .main-nav > ul { flex-direction: column; align-items: center; gap: 22px; }
  .main-nav > ul > li > a { font-size: 16px; }

  .hero { padding: 150px 24px 70px; min-height: 720px; }
  .hero-photo { inset: 0; opacity: .55; }
  .hero-words { display: none; }

  .about-grid, .family-grid, .newsletter-grid { grid-template-columns: 1fr; }
  .polaroid { max-width: 380px; margin: 20px auto 0; }
  .live { grid-template-columns: 1fr; }
  .live-left { height: 360px; }
  .live-left::after { background: linear-gradient(0deg, var(--night) 0%, rgba(10,15,29,0) 50%); }
  .live-right { display: none; }
  .live-center { padding: 20px 24px 70px; }
  .merch-photo { inset: 0; opacity: .35; }
  .merch-inner { flex-direction: column; align-items: flex-start; }
  .footer-top { flex-direction: column; gap: 50px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .container { padding: 0 24px; }
  .mountains { width: 100%; opacity: .5; }
}

@media (max-width: 600px) {
  .cards-grid { grid-template-columns: 1fr; }
  .artist-list { columns: 1; }
  .live-title { font-size: 40px; }
  .merch-title { font-size: 40px; }
  .connect-title { font-size: 42px; }
  .footer-script { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* =============================================================
   ARTISTS DROPDOWN MENU
   ============================================================= */
.has-dropdown { position: relative; display: flex; align-items: center; gap: 4px; }
.dd-toggle {
  background: none; border: 0; padding: 0 0 8px; color: #fff; cursor: pointer; display: flex;
}
.dd-toggle svg { width: 11px; height: 8px; transition: transform .25s; }
.has-dropdown:hover .dd-toggle svg, .has-dropdown.open .dd-toggle svg { transform: rotate(180deg); }
.dropdown {
  list-style: none; margin: 0; padding: 18px 22px;
  position: absolute; top: calc(100% + 14px); left: -24px; width: 560px;
  columns: 2; column-gap: 26px;
  background: rgba(8,12,24,.97); border-top: 2px solid #d4b04c;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 60;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* hover bridge */
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: none;
}
.dropdown li { break-inside: avoid; }
.dropdown a {
  display: block; padding: 7px 0; font-size: 14px; line-height: 1.35; color: #dfe5f1; text-decoration: none;
  border-bottom: 1px solid rgba(143,208,240,.12); transition: color .15s, padding-left .15s;
}
.dropdown a:hover, .dropdown a.active { color: #d4b04c; padding-left: 6px; }

/* =============================================================
   INNER PAGES — shared banner
   ============================================================= */
.page-hero {
  position: relative; min-height: 460px; display: flex; align-items: flex-end;
  padding: 190px 0 70px; background-size: cover; background-position: center; overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,15,29,.95) 0%, rgba(10,15,29,.7) 45%, rgba(10,15,29,.35) 100%),
              linear-gradient(0deg, rgba(10,15,29,.9) 0%, rgba(10,15,29,0) 50%); }
.page-hero .container { position: relative; z-index: 1; }
.page-title { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); line-height: .95; letter-spacing: -.02em; color: #eef0f6; margin: 14px 0 6px; }
.page-title .blue { color: var(--blue); } .page-title .pink { color: var(--pink); }
.page-script { font-family: var(--font-script-thin); font-size: clamp(30px, 3.4vw, 46px); margin: 0; transform: rotate(-3deg); transform-origin: left;
  background: linear-gradient(95deg, #b8a4f0, #5fc4f0); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-right: 10px; }
.page-hero .eyebrow a, .artist-hero .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(143,208,240,.5); }

.narrow { max-width: 860px; }
.page-intro { padding: 70px 0; }
.lead { font-size: 21px; line-height: 1.55; font-family: var(--font-serif); }
.section-script { font-family: var(--font-script-thin); font-size: 52px; color: var(--ice); margin: 0 0 26px; transform: rotate(-3deg); transform-origin: left; }
.small-note { font-size: 14px; opacity: .8; }

/* =============================================================
   ARTISTS ROSTER PAGE
   ============================================================= */
.roster { padding: 80px 0 100px; }
.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.roster-card { background: linear-gradient(180deg, var(--night-2), #0b1122); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.roster-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.roster-photo { display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.roster-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.roster-card:hover .roster-photo img { transform: scale(1.05); }
.roster-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.roster-tag { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #d4b04c; margin: 0 0 8px; font-weight: 700; }
.roster-body h2 { font-family: var(--font-serif); font-size: 27px; line-height: 1.15; margin: 0 0 12px; }
.roster-body h2 a { text-decoration: none; color: #eef0f6; }
.roster-body p { font-size: 14px; color: #c9d1e2; flex: 1; }
.roster-body .btn { align-self: flex-start; margin-top: 8px; }

/* =============================================================
   INDIVIDUAL ARTIST PAGES
   ============================================================= */
.artist-hero { position: relative; overflow: hidden; padding: 180px 0 80px; }
.artist-hero-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.2); opacity: .45; }
.artist-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--night) 0%, rgba(10,15,29,.35) 60%, rgba(10,15,29,.7) 100%); }
.artist-hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 48px; }
.artist-hero-photo { flex: 0 0 340px; background: #f5efe3; padding: 14px 14px 40px; transform: rotate(-3deg); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.artist-hero-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.artist-hero-text { padding-bottom: 20px; }
.artist-hero .page-title { font-size: clamp(44px, 6vw, 84px); }

.artist-body { padding: 80px 0 90px; }
.artist-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 64px; align-items: start; }
.artist-bio p { font-size: 17px; line-height: 1.75; }
.artist-bio > p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 3.4em; float: left; line-height: .85; padding: 6px 10px 0 0; color: #1d4f8f; }
.pull-quote { margin: 34px 0; padding: 6px 0 6px 26px; border-left: 3px solid #d4b04c; }
.pull-quote p { font-family: var(--font-serif); font-size: 23px; line-height: 1.4; font-style: italic; margin: 0 0 8px; }
.pull-quote cite { font-style: normal; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.artist-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.side-block { background: rgba(255,255,255,.45); border: 1px solid rgba(19,32,61,.15); padding: 22px 24px; }
.side-block h3 { font-family: var(--font-caps); font-size: 24px; letter-spacing: .08em; margin: 0 0 12px; }
.link-list, .disco-list { list-style: none; margin: 0; padding: 0; }
.link-list li a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(19,32,61,.15); text-decoration: none; font-weight: 500; transition: color .15s, padding-left .15s; }
.link-list li a:hover { color: #1d4f8f; padding-left: 4px; }
.disco-list li { padding: 7px 0 7px 22px; position: relative; font-size: 15px; border-bottom: 1px solid rgba(19,32,61,.1); }
.disco-list li::before { content: "\2739"; position: absolute; left: 0; top: 7px; color: #1d4f8f; font-size: 13px; }
.side-block.book { background: var(--ink); color: var(--paper); border: 0; }
.side-block.book .btn-dark { color: var(--paper); }
.side-block.book .btn-dark:hover { background: var(--paper); color: var(--ink); }

.artist-video { padding: 90px 0 70px; background: var(--night); }
.video-frame { position: relative; aspect-ratio: 16 / 9; max-width: 960px; box-shadow: 0 20px 50px rgba(0,0,0,.5); border: 1px solid rgba(143,208,240,.25); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.artist-pager { background: var(--night); padding: 50px 0 80px; }
.pager-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(143,208,240,.25); padding-top: 34px; }
.pager-link { text-decoration: none; font-family: var(--font-serif); font-size: 22px; color: #eef0f6; display: flex; flex-direction: column; max-width: 34%; }
.pager-link span { font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); margin-bottom: 6px; }
.pager-link.next { text-align: right; }
.pager-link:hover { color: #d4b04c; }
.artist-list a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.artist-list a:hover { color: #1d4f8f; border-color: #1d4f8f; }

/* =============================================================
   NEWS PAGE
   ============================================================= */
.news-list { padding: 80px 0 100px; }
.news-item { display: grid; grid-template-columns: 170px 1fr; gap: 34px; padding: 34px 0; border-bottom: 1px solid rgba(19,32,61,.18); }
.news-item:first-child { padding-top: 0; }
.news-date { font-family: var(--font-caps); font-size: 26px; letter-spacing: .06em; color: #1d4f8f; margin: 0; line-height: 1.1; }
.news-text h2 { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; margin: 0 0 12px; }

/* =============================================================
   SERVICES PAGE
   ============================================================= */
.services { padding: 90px 0 100px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { background: linear-gradient(180deg, var(--night-2), #0b1122); padding: 30px 28px; border-top: 2px solid transparent; transition: border-color .25s, transform .25s; }
.service-card:hover { border-color: #d4b04c; transform: translateY(-4px); }
.service-num { font-family: var(--font-caps); font-size: 20px; color: #d4b04c; letter-spacing: .1em; }
.service-card h2 { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; margin: 8px 0 12px; color: #eef0f6; }
.service-card p { font-size: 14.5px; color: #c9d1e2; margin: 0; }
.cta { padding: 70px 0; }
.cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta .connect-title { transform: rotate(-4deg); }

/* =============================================================
   CONTACT PAGE
   ============================================================= */
.contact-quick { padding: 80px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.contact-box { background: var(--ink); color: var(--paper); padding: 36px 38px; transform: rotate(1deg); box-shadow: 0 16px 34px rgba(19,32,61,.3); }
.contact-big { font-family: var(--font-serif); font-size: 26px; margin: 0 0 8px; word-break: break-word; }
.contact-big a { text-decoration: none; }
.contact-big a:hover { color: #d4b04c; }
.contact-box .btn-dark { color: var(--paper); margin-top: 10px; }
.contact-box .btn-dark:hover { background: var(--paper); color: var(--ink); }
.staff { padding: 90px 0 100px; }
.staff-card { display: grid; grid-template-columns: 300px 1fr; gap: 44px; padding: 40px 0; border-top: 1px solid rgba(143,208,240,.2); }
.staff-head h2 { font-family: var(--font-serif); font-size: 34px; margin: 0 0 14px; color: #eef0f6; }
.staff-contact { list-style: none; margin: 0; padding: 0; font-size: 15px; color: #c9d1e2; }
.staff-contact li { padding: 3px 0; }
.staff-contact a { text-decoration: none; color: var(--ice); }
.staff-contact a:hover { text-decoration: underline; }
.staff-bio p { color: #d3d9e6; }

/* =============================================================
   GALAXIE LIVE + MERCH PAGES
   ============================================================= */
.live-page { min-height: 440px; }
.live-page .live-center { padding-top: 60px; }
.shows { padding: 70px 0 90px; }
.show-list { list-style: none; margin: 0; padding: 0; }
.show-list li { display: flex; gap: 26px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(19,32,61,.18); }
.show-date { font-family: var(--font-caps); font-size: 30px; color: #1d4f8f; min-width: 110px; }
.merch-page { padding: 110px 0; }
.merch-page .merch-photo { inset: 0 0 0 38%; }

/* =============================================================
   INNER PAGES — RESPONSIVE
   ============================================================= */
@media (max-width: 1180px) {
  .dropdown { width: 480px; }
  .roster-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
  .artist-grid { gap: 40px; }
}
@media (max-width: 960px) {
  .main-nav { justify-content: flex-start; padding: 110px 24px 40px; overflow-y: auto; }
  .has-dropdown { flex-wrap: wrap; justify-content: center; }
  .dd-toggle { padding: 4px 8px; }
  .dd-toggle svg { width: 14px; height: 10px; }
  .has-dropdown:hover .dd-toggle svg { transform: none; }
  .has-dropdown.open .dd-toggle svg { transform: rotate(180deg); }
  .dropdown {
    position: static; width: 100%; flex-basis: 100%; columns: 1; margin-top: 12px; padding: 6px 16px;
    background: rgba(255,255,255,.04); border-top: 2px solid #d4b04c; box-shadow: none;
    display: none; opacity: 1; visibility: visible; transform: none; text-align: center;
  }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: none; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown::before { display: none; }
  .page-hero { min-height: 380px; padding: 140px 0 50px; }
  .artist-hero { padding: 130px 0 50px; }
  .artist-hero-inner { flex-direction: column; align-items: flex-start; gap: 30px; }
  .artist-hero-photo { flex: none; width: 260px; }
  .artist-grid, .contact-grid, .staff-card { grid-template-columns: 1fr; }
  .artist-side { position: static; }
  .news-item { grid-template-columns: 1fr; gap: 8px; }
  .pager-inner { flex-wrap: wrap; }
  .pager-link { max-width: 45%; font-size: 18px; }
  .pager-inner .btn { order: 3; width: 100%; justify-content: center; }
  .merch-page .merch-photo { inset: 0; }
  .staff-card { gap: 16px; }
}
@media (max-width: 600px) {
  .roster-grid, .services-grid { grid-template-columns: 1fr; }
  .lead { font-size: 18px; }
  .contact-box { padding: 28px 24px; transform: none; }
}

/* ---------- Meet the team photos (contact page) ---------- */
.staff-photo {
  margin: 0 0 22px; width: 100%; max-width: 260px;
  background: #f5efe3; padding: 10px 10px 30px;
  transform: rotate(-2deg); box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.staff-card:nth-of-type(even) .staff-photo { transform: rotate(2deg); }
.staff-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 960px) { .staff-photo { max-width: 220px; } }

/* ---------- Galaxie Live (home page) — full background photo ---------- */
.live.live-bg {
  display: flex; align-items: center; min-height: 640px;
  background: var(--night) url("../images/galaxie-live-alley.jpg") center / cover no-repeat;
  position: relative;
}
.live.live-bg::before {           /* darkens the left side so the text reads clearly */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,15,29,.94) 0%, rgba(10,15,29,.82) 38%, rgba(10,15,29,.25) 72%, rgba(10,15,29,.1) 100%);
}
.live.live-bg .live-center { max-width: 700px; padding: 90px 48px; }
@media (max-width: 960px) {
  .live.live-bg { min-height: 0; background-position: 60% center; }
  .live.live-bg::before { background: rgba(10,15,29,.78); }
  .live.live-bg .live-center { padding: 70px 24px; }
}
.live.live-bg .live-poster { position: relative; z-index: 2; flex: 0 0 auto; width: min(420px, 34vw); margin: 60px 7vw 60px auto; transform: rotate(3deg); }
.live.live-bg .live-poster img { width: 100%; height: auto; border: 8px solid #f5efe3; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
@media (max-width: 960px) {
  .live.live-bg { flex-direction: column; align-items: flex-start; }
  .live.live-bg .live-poster { width: min(340px, 80vw); margin: 0 auto 70px; }
  .live.live-bg .live-center { padding-bottom: 40px; }
}


/* ---------- Full-length team photos (contact page) ---------- */
.staff-photo.full img { aspect-ratio: auto; object-fit: initial; }

/* ---------- Galaxie Live merch ad (home + merch page) ---------- */
.merch-ad {
  position: relative; z-index: 2; flex: 0 1 auto; width: min(520px, 46vw); margin: 0 0 0 auto;
  transform: rotate(-2deg);
}
.merch-ad img { display: block; width: 100%; height: auto; border: 8px solid #f5efe3; box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.merch-inner { justify-content: space-between; }
@media (max-width: 960px) {
  .merch-ad { width: min(480px, 92%); margin: 28px auto 0; transform: rotate(-1deg); }
}

/* News story sub-headings */
.news-text h3 { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; margin: 26px 0 6px; color: #1d4f8f; font-weight: 600; }
.form-error { margin-top: 10px; font-weight: 700; color: #a33; }