/* ============================================
   ColourfulTone Mastering - Stylesheet
   ============================================ */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #000;
  color: #f5f0e8;
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: #d4a855;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #f0cc7a;
}

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

/* ============================================
   Navigation
   ============================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 168, 85, 0.2);
  padding: 0.8rem 2rem;
}

nav .nav-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

nav .nav-brand {
  font-size: 1.05rem;
  font-weight: bold;
  font-style: italic;
  color: #f5f0e8;
  letter-spacing: 0.02em;
}

nav .nav-brand sup {
  font-size: 0.55em;
  vertical-align: super;
}

nav .nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
}

nav .nav-links a {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8b88a;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

nav .nav-links a:hover,
nav .nav-links a.active {
  color: #f5f0e8;
  border-bottom-color: #d4a855;
}

/* Mobile nav toggle */
nav .nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #c8b88a;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem;
}

/* ============================================
   Main Content
   ============================================ */
main {
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 2rem;
  width: 100%;
}

/* Page header */
.page-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.page-title h1 {
  font-size: 2rem;
  font-style: italic;
  font-weight: bold;
  color: #f5f0e8;
  letter-spacing: 0.03em;
}

.page-title h1 sup {
  font-size: 0.45em;
  vertical-align: super;
}

.page-title .subtitle {
  font-size: 1rem;
  font-style: italic;
  color: #c8b88a;
  margin-top: 0.5rem;
  letter-spacing: 0.15em;
}

/* Hero image */
.hero-image {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hero-image img {
  margin: 0 auto;
  max-width: 500px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   Home page hero — slow Ken Burns zoom on fioreviola.jpg.
   No overflow clipping on the container: the image just scales freely,
   so no part of the photograph is ever cropped while it breathes
   between scale(1) and scale(1.12). Same approach as the EM Productions
   home logo (planet on black).
   --------------------------------------------------------------- */
.home-hero {
  /* leave overflow visible so the scaled image can spill freely
     onto the surrounding black background — never cropped */
  overflow: visible;
}

.home-hero img {
  transform-origin: center center;
  animation: ctm-home-zoom 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ctm-home-zoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}

/* Respect the user's OS-level motion preferences */
@media (prefers-reduced-motion: reduce) {
  .home-hero img {
    animation: none;
  }
}

.photo-credit {
  font-size: 0.7rem;
  color: #999;
  margin-top: 0.5rem;
  text-align: right;
}

/* Quote block */
.quote-block {
  max-width: 600px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.quote-block blockquote {
  font-style: italic;
  font-size: 1.05rem;
  color: #e8d9a8;
  line-height: 1.6;
  border-left: 2px solid rgba(212, 168, 85, 0.3);
  padding-left: 1.2rem;
}

.quote-block .quote-author {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #c8b88a;
  font-style: normal;
}

.quote-block .quote-detail {
  font-size: 0.8rem;
  color: #888;
}

/* Section divider */
.section-divider {
  width: 80px;
  height: 1px;
  background: rgba(212, 168, 85, 0.3);
  margin: 2.5rem auto;
  border: none;
}

/* Text content */
.content-section {
  margin-bottom: 2.5rem;
}

.content-section h2 {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4a855;
  margin-bottom: 1.2rem;
}

.content-section p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #ddd;
}

/* Epigraph (italic centered quote under a heading) */
.epigraph {
  max-width: 640px;
  margin: 0.5rem auto 2rem;
  text-align: center;
  font-style: italic;
  font-size: 1.1rem;
  color: #e8d9a8;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* Content image */
.content-image {
  text-align: center;
  margin: 2rem 0;
}

.content-image img {
  margin: 0 auto;
  max-width: 567px;
}

.content-image .caption {
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Feedback / Testimonials */
.testimonial {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial:last-child {
  border-bottom: none;
}

.testimonial .album-title {
  font-size: 1.1rem;
  font-style: italic;
  font-weight: bold;
  color: #d4a855;
  margin-bottom: 0.2rem;
}

.testimonial .album-artist {
  font-size: 0.9rem;
  color: #c8b88a;
  margin-bottom: 1rem;
}

.testimonial blockquote {
  font-style: italic;
  font-size: 0.95rem;
  color: #e8d9a8;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

.testimonial .attribution {
  font-size: 0.85rem;
  color: #aaa;
}

.testimonial .attribution strong {
  color: #ccc;
}

/* Audio player */
.audio-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 168, 85, 0.15);
  border-radius: 4px;
  padding: 1.5rem;
  margin: 2.5rem 0;
  text-align: center;
}

.audio-section h3 {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4a855;
  margin-bottom: 0.8rem;
}

.audio-section p {
  font-size: 0.85rem;
  color: #aaa;
  margin-bottom: 1rem;
}

.audio-section audio {
  width: 100%;
  max-width: 400px;
}

/* Contact info */
.contact-info {
  text-align: center;
  margin: 2rem 0;
}

.contact-info p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #ddd;
}

.contact-info a {
  color: #d4a855;
}

/* ============================================
   Footer
   ============================================ */
footer {
  border-top: 1px solid rgba(212, 168, 85, 0.15);
  padding: 2rem;
  text-align: center;
}

footer p {
  font-size: 0.7rem;
  color: #666;
  line-height: 1.8;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  nav .nav-toggle {
    display: block;
  }

  nav .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
    padding-top: 0.8rem;
  }

  nav .nav-links.open {
    display: flex;
  }

  nav .nav-links a {
    font-size: 0.9rem;
    padding: 0.4rem 0;
  }

  main {
    padding: 2rem 1.2rem;
  }

  .page-title h1 {
    font-size: 1.5rem;
  }

  .hero-image img {
    max-width: 90%;
  }

  .quote-block {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .page-title h1 {
    font-size: 1.3rem;
  }

  .page-title .subtitle {
    font-size: 0.85rem;
  }

  nav {
    padding: 0.6rem 1rem;
  }

  main {
    padding: 1.5rem 1rem;
  }
}