/* ==========================================================================
   Phil Floyd — shared stylesheet
   ========================================================================== */

:root {
  --bg: #0b0b0f;
  --bg-raised: #14141b;
  --bg-card: #1a1a23;
  --line: #2a2a35;
  --text: #f1f0ec;
  --text-dim: #b7b5c2;
  --text-faint: #7c7a89;
  --accent: #e8a13a;      /* stage spotlight amber */
  --accent-dim: #a9762b;
  --accent2: #6a8dff;     /* rig blue */
  --accent3: #d24b6b;     /* laser magenta */
  --max: 1120px;
  --radius: 10px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: 0.03em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--text); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--text-dim); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }
.section-tight { padding: 48px 0; }

.eyebrow {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 14px;
}

.lede {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 62ch;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--accent); color: #1a1206; }
.btn-primary:hover { background: #f2b559; }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,11,15,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.3rem;
  color: var(--text);
}
.brand span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text-dim);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: 48px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(232,161,58,0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(106,141,255,0.12), transparent 60%),
    var(--bg);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow { display: block; }
.hero h1 { margin: 0 auto 18px; max-width: 16ch; }
.hero .lede { margin: 0 auto; text-align: center; }
.hero .btn-row { justify-content: center; }

.hero-disc {
  width: 340px; height: 340px;
  max-width: 70vw;
  border-radius: 50%;
  margin: 0 auto 40px;
  background: conic-gradient(from 180deg, #e8a13a, #d24b6b, #6a8dff, #e8a13a);
  box-shadow: 0 0 120px rgba(232,161,58,0.25), inset 0 0 60px rgba(0,0,0,0.5);
  position: relative;
}
.hero-disc::before {
  content: "";
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: var(--bg);
}

/* ---- Cards / grids ---- */
.grid {
  display: grid;
  gap: 28px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.card h3 { color: var(--accent); }

.card-accent-top { border-top: 3px solid var(--accent); }

/* ---- Quote / pull ---- */
.pull-quote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 26px;
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin: 36px 0;
}
.pull-quote cite {
  display: block;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--text-faint);
  margin-top: 10px;
}

/* ---- Timeline / devices list ---- */
.device-list { display: grid; gap: 22px; }
.device {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.device-num {
  font-family: "Oswald", sans-serif;
  font-size: 2rem;
  color: var(--accent);
}
.device h3 { margin-bottom: 6px; }

/* ---- Section divider ---- */
.divider {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  border: none;
  margin: 0;
  opacity: 0.7;
}

/* ---- Band alt sections ---- */
.section-alt { background: var(--bg-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery-tile {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a23, #23232f);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }
.gallery-tile.placeholder { color: var(--text-faint); font-size: 0.85rem; text-align: center; padding: 12px; }

/* ---- Forms ---- */
form { display: grid; gap: 16px; max-width: 520px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row-2 { grid-template-columns: 1fr; } }

label { font-size: 0.85rem; color: var(--text-dim); display: block; margin-bottom: 6px; }
input, textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 130px; resize: vertical; }

.form-note { font-size: 0.85rem; color: var(--text-faint); }

/* ---- Status banner (for TBD / placeholder content) ---- */
.status-banner {
  background: rgba(232,161,58,0.08);
  border: 1px solid rgba(232,161,58,0.3);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.status-banner strong { color: var(--accent); }

/* ---- Legal pages: comfortable reading column ---- */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content .meta { color: var(--text-faint); font-size: 0.9em; margin-bottom: 2em; }
.legal-content h2 { margin-top: 1.6em; }
.legal-content ul, .legal-content ol { padding-left: 1.3em; margin: 0 0 1em; }
.legal-content li { margin-bottom: 0.4em; color: var(--text-dim); }
.legal-content li::marker { color: var(--accent); }

/* ---- About page: Phil & Kati photo ---- */
.about-photo { margin: 0 0 36px; text-align: center; }
.about-photo img { width: 100%; max-width: 640px; margin: 0 auto; display: block; border-radius: var(--radius); }
.about-photo figcaption { margin-top: 10px; color: var(--text-faint); font-size: 0.85rem; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  background: var(--bg-raised);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--text-dim); font-size: 0.92rem; }

.social-row { display: flex; gap: 14px; margin-top: 14px; }
.social-row a {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.social-row a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: 0.82rem;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: var(--text-faint); }

/* ---- Page header (non-home pages) ---- */
.page-header {
  padding: 64px 0 48px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(232,161,58,0.12), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-header .lede { margin: 0 auto; text-align: center; }

/* ---- Real logo (replaces text wordmark) ---- */
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}
.footer-grid .brand-logo { height: 30px; }

.hero-logo {
  max-width: 560px;
  width: 82%;
  margin: 0 auto 8px;
}

/* ---- Hero: circular photo graphic, centered above the headline ---- */
.hero-visual {
  position: relative;
  max-width: 780px;
  margin: 0 auto 12px;
}

/* Light beam + spectrum: a separate layer stretched to the full width of the
   browser window (not just this centered column) for maximum impact. The
   circle photo keeps its own fixed size below, layered on top. */
.hero-beams {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.hero-circle {
  position: relative;
  z-index: 2;
  display: block;
  width: 43%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* ---- Logo placed above the hero circle graphic ---- */
.hero-logo-top {
  height: clamp(3rem, 17vw, 10.6rem);
  width: auto;
  margin: 0 auto 22px;
  display: block;
}