/* ============================================================
   STYLES.CSS
   Singer/Songwriter One-Page Site
   ============================================================
   STRUCTURE:
   1. Google Fonts Import
   2. Design Tokens (:root)
   3. Base Reset & Defaults
   4. Typography System
   5. Utility Classes
   6. [Sections added per chat session below this line]
   ============================================================ */


/* ------------------------------------------------------------
   1. GOOGLE FONTS IMPORT
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&family=Outfit:wght@300;400;500&display=swap');


/* ------------------------------------------------------------
   2. DESIGN TOKENS
   All design values live here. Every use references a variable.
   To redesign: change values here only.
   ------------------------------------------------------------ */
:root {

  /* --- Colors --- */
  --color-bg:           #000508;
  --color-bg-alt:       #070F17;
  --color-accent-dark:  #5A7084;
  --color-accent-light: #EFFDFE;
  --color-light:        #FAFBFC;
  --color-accent-alt:   #2B3F59;

  /* Transparency variants (reference vars above in rgba) */
  --color-overlay-soft: rgba(0, 5, 8, 0.6);
  --color-overlay-mid:  rgba(0, 5, 8, 0.85);
  --color-accent-dark-20: rgba(90, 112, 132, 0.2);
  --color-accent-dark-40: rgba(90, 112, 132, 0.4);

  /* --- Typography: Font Families --- */
  --font-heading: 'Lusitana', Georgia, serif;
  --font-body:    'Outfit', 'Helvetica Neue', sans-serif;

  /* --- Typography: Weights --- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* --- Typography: Scale (clamp — mobile → desktop) ---
     Mobile scale:  Major 2nd  (×1.125)  base 1rem
     Desktop scale: Major 3rd  (×1.25)   base 1rem
     Mid breakpoint: 768px for interpolation
  -------------------------------------------------------- */
  --text-p:  clamp(1rem,     calc(1rem + 0vw),        1rem);
  --text-h6: clamp(1.125rem, calc(1.125rem + 0.2vw),  1.25rem);
  --text-h5: clamp(1.266rem, calc(1.266rem + 0.5vw),  1.563rem);
  --text-h4: clamp(1.424rem, calc(1.424rem + 0.9vw),  1.953rem);
  --text-h3: clamp(1.602rem, calc(1.602rem + 1.4vw),  2.441rem);
  --text-h2: clamp(1.802rem, calc(1.802rem + 2.1vw),  3.052rem);
  --text-h1: clamp(2.027rem, calc(2.027rem + 2.9vw),  3.815rem);

  /* --- Typography: Letter-spacing (rem, traditional standard) --- */
  --ls-h1: -0.03rem;
  --ls-h2: -0.02rem;
  --ls-h3: -0.01rem;
  --ls-h4:  0rem;
  --ls-h5:  0.01rem;
  --ls-h6:  0.01rem;
  --ls-p:   0.02rem;

  /* --- Typography: Line-height (unitless multipliers) --- */
  --lh-display:  1.1;    /* h1, h2 */
  --lh-heading:  1.25;   /* h3, h4 */
  --lh-subhead:  1.35;   /* h5, h6 */
  --lh-body:     1.6;    /* p */

  /* --- Spacing Scale (rem) --- */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   2rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  10rem;

  /* --- Layout --- */
  --container-max:    75rem;    /* 1200px */
  --container-pad:    clamp(var(--space-lg), 5vw, var(--space-3xl));
  --section-pad-v:    clamp(var(--space-xl), 8vw, var(--space-3xl));

  /* --- Breakpoints (for reference in clamp() and media queries) --- */
  --bp-mobile:  375px;
  --bp-mid:     768px;
  --bp-desktop: 1280px;

  /* --- Borders --- */
  --border-thin:   1px solid var(--color-accent-dark-20);
  --border-mid:    1px solid var(--color-accent-dark-40);
  --radius-sm:     0.25rem;
  --radius-md:     0.5rem;
  --radius-lg:     1rem;

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;
  --transition-crawl:  900ms ease;

  /* --- Animation Easings --- */
  --ease-emerge:   cubic-bezier(0.22, 1, 0.36, 1);  /* slow settle */
  --ease-drift:    cubic-bezier(0.4, 0, 0.2, 1);    /* smooth drift */

  /* --- Scroll Reveal --- */
  --reveal-distance: 1.25rem;   /* how far elements drift up on reveal */
  --reveal-duration: var(--transition-crawl);

  /* --- Z-index Scale --- */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-nav-overlay: 90;
  --z-overlay: 200;
  --z-modal:   300;

}


/* ------------------------------------------------------------
   3. BASE RESET & DEFAULTS
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 16px base — do not change; scale via variables */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-light);
  font-family: var(--font-body);
  font-size: var(--text-p);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-p);
  min-height: 100vh;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

/* Reduced motion — respect user system preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------
   4. TYPOGRAPHY SYSTEM
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  color: var(--color-light);
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
}

h4 {
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h4);
}

h5 {
  font-size: var(--text-h5);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-h5);
}

h6 {
  font-size: var(--text-h6);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-h6);
}

p {
  font-size: var(--text-p);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-p);
  color: var(--color-accent-light);
  max-width: 68ch;
}

strong {
  font-weight: var(--fw-medium);
}

em {
  font-style: italic;
}


/* ------------------------------------------------------------
   5. UTILITY CLASSES
   ------------------------------------------------------------ */

/* Offset anchor scroll to account for fixed header */
section[id] {
  scroll-margin-top: var(--header-height);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Section wrapper */
.section {
  padding-block: var(--section-pad-v);
}

/* Alternating background */
.section--alt {
  background-color: var(--color-bg-alt);
}

/* Divider line */
.divider {
  border: none;
  border-top: var(--border-thin);
  margin-block: var(--space-xl);
}

/* Scroll reveal — initial state */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease-emerge),
    transform var(--reveal-duration) var(--ease-emerge);
}

/* Scroll reveal — visible state (added by JS IntersectionObserver) */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal delays */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 350ms; }
.reveal--delay-4 { transition-delay: 500ms; }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   SECTION STYLES — added below as each section is built
   ============================================================ */


/* ------------------------------------------------------------
   HEADER / NAV
   ------------------------------------------------------------ */

/* Additional tokens used here (all reference :root vars) */
:root {
  --header-height:        4.5rem;
  --header-logo-height:   3.5rem;        /* was 2.25rem — increased for visibility */
  --nav-gap:              var(--space-lg);
  --nav-link-size:        0.7rem;        /* was var(--text-h6) — reduced to feel right */
  --nav-link-tracking:    0.14rem;
  --nav-underline-width:  1px;
  --nav-underline-offset: 0.35rem;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--header-height);
  display: flex;
  align-items: center;
  /* Fades in with page — starts transparent, JS adds .is-loaded */
  background-color: transparent;
  transition: background-color var(--transition-slow);
}

/* Scrolled state — added by JS when page scrolls past hero */
.site-header.is-scrolled {
  background-color: var(--color-overlay-mid);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--border-thin);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: var(--header-logo-height);
  width: auto;
  /* SVG inherits color — tint to light on dark bg */
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity var(--transition-base);
}

.header__logo:hover img {
  opacity: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--nav-link-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--nav-link-tracking);
  text-transform: uppercase;
  color: var(--color-light);
  opacity: 0.75;
  position: relative;
  padding-bottom: var(--nav-underline-offset);
  transition: opacity var(--transition-base);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: var(--nav-underline-width);
  background-color: var(--color-accent-light);
  transition: width var(--transition-base) var(--ease-drift);
}

.nav__link:hover {
  opacity: 1;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

.nav__link.is-active {
  opacity: 1;
}

/* Hamburger toggle — hidden on desktop */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: var(--z-nav);  /* always above overlay */
}

.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-light);
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

/* Animates to X when open */
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav__toggle {
    display: flex;
  }

  .nav__list {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    background-color: var(--color-bg);
    z-index: var(--z-nav-overlay);
    margin: 0;
    padding: 0;
  }

  .nav__list.is-open {
    display: flex;
  }

  .nav__link {
    font-size: var(--text-h4);
    letter-spacing: var(--ls-h4);
    opacity: 0.9;
  }
}


/* ------------------------------------------------------------
   HERO SECTION
   ------------------------------------------------------------ */

:root {
  --hero-min-height:        75svh;       /* was 100svh */
  --hero-content-max:       44rem;
  --hero-eyebrow-size:      var(--text-h6);
  --hero-eyebrow-tracking:  0.18rem;
  --hero-eyebrow-color:     var(--color-accent-dark);
  --hero-image-fade-width:  55%;
  --hero-cta-size:          0.7rem;      /* matches nav — small, intentional */
  --hero-cta-tracking:      0.14rem;
  --hero-cta-color:         var(--color-accent-dark);   /* same as underline + chevron */
  --hero-cta-underline:     1px;
  --hero-chevron-gap:       var(--space-xs);
  /* Load animation */
  --hero-anim-duration:     800ms;
  --hero-anim-ease:         var(--ease-emerge);
  --hero-anim-distance:     1.5rem;
}

.hero {
  position: relative;
  min-height: var(--hero-min-height);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  padding-top: var(--header-height);
}

/* Image fills the right half — positioned absolutely behind content */
.hero__image-wrap {
  position: absolute;
  inset: 0;
  left: 38%;  /* image occupies right ~62% */
  z-index: var(--z-base);
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Gradient: left edge of image fades to bg color */
.hero__image-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-bg) 0%,
    var(--color-overlay-mid) 30%,
    transparent var(--hero-image-fade-width)
  );
}

/* Bottom fade — image fades into bg at bottom */
.hero__image-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-bg)
  );
}

/* Content column — sits above the image layer */
.hero__content-wrap {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  min-height: var(--hero-min-height);
  padding-bottom: var(--space-xl);
}

.hero__content {
  max-width: var(--hero-content-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Eyebrow — small label above heading */
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--hero-eyebrow-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--hero-eyebrow-tracking);
  color: var(--hero-eyebrow-color);
  text-transform: none;
  max-width: none;  /* override p default */
  line-height: var(--lh-subhead);
}

/* Hero heading — the main statement */
.hero__heading {
  font-size: var(--text-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h1);
  color: var(--color-light);
  /* Allow natural line breaks — this is a multi-line statement */
  max-width: 14ch;
}

/* Hero body copy */
.hero__subhead {
  font-size: var(--text-p);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-p);
  color: var(--color-accent-light);
  opacity: 0.8;
  max-width: 46ch;
}

/* CTA link — underlined, uppercase, small */
.hero__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--hero-cta-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--hero-cta-tracking);
  text-transform: uppercase;
  color: var(--hero-cta-color);
  /* Underline sized to text — use border on just the text span inside */
  gap: 0.3rem;
  transition: color var(--transition-base);
}

.hero__cta:hover {
  color: var(--color-accent-light);
}

/* Underline — wraps only the text, not the chevron */
.hero__cta-text {
  border-bottom: var(--hero-cta-underline) solid currentColor;
  padding-bottom: 0.2rem;
  transition: border-color var(--transition-base);
}

/* Chevron — directly inside CTA, same color, breathing animation */
.hero__chevron {
  color: var(--hero-cta-color);
  display: flex;
  align-items: center;
  animation: chevron-drift 2.4s var(--ease-drift) infinite;
  transition: color var(--transition-base);
}

.hero__cta:hover .hero__chevron {
  color: var(--color-accent-light);
}

@keyframes chevron-drift {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ── Hero load animations ─────────────────────────────────── */

.hero-animate {
  opacity: 0;
  transform: translateY(var(--hero-anim-distance));
}

/* JS adds .hero-loaded to <body> after content populates */
body.hero-loaded .hero-animate {
  animation: hero-emerge var(--hero-anim-duration) var(--hero-anim-ease) forwards;
}

body.hero-loaded .hero-animate--1 { animation-delay: 100ms; }
body.hero-loaded .hero-animate--2 { animation-delay: 250ms; }
body.hero-loaded .hero-animate--3 { animation-delay: 420ms; }
body.hero-loaded .hero-animate--4 { animation-delay: 580ms; }

@keyframes hero-emerge {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hero responsive ──────────────────────────────────────── */

@media (max-width: 768px) {
  .hero__image-wrap {
    left: 0;
  }

  /* Replace left-to-right fade with bottom gradient for mobile */
  .hero__image-fade {
    background: linear-gradient(
      to bottom,
      transparent 30%,
      var(--color-overlay-mid) 65%,
      var(--color-bg) 100%
    );
  }

  /* Bottom fade no longer needed — image-fade handles it */
  .hero__image-wrap::after {
    display: none;
  }

  /* Text anchored to bottom */
  .hero__content-wrap {
    align-items: flex-end;
    padding-bottom: var(--space-2xl);
  }

  .hero__content {
    gap: var(--space-md);
  }

  .hero__heading {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero__content-wrap {
    padding-bottom: var(--space-xl);
  }
}


/* ------------------------------------------------------------
   MUSIC SECTION
   ------------------------------------------------------------ */

:root {
  --music-eyebrow-size:     0.7rem;
  --music-eyebrow-tracking: 0.14rem;
  --music-eyebrow-color:    var(--color-accent-dark);
  --music-cta-size:         0.7rem;
  --music-cta-tracking:     0.14rem;
  --music-col-text:         25%;
  --music-col-gap:          var(--space-lg);
}

.music-section {
  background: linear-gradient(
    to bottom,
    var(--color-bg-alt),
    var(--color-bg)
  );
  position: relative;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.music__inner {
  display: grid;
  grid-template-columns: var(--music-col-text) 1fr;
  gap: var(--music-col-gap);
  align-items: center;
  padding-bottom: var(--space-lg);
}

/* Left: text column */
.music__eyebrow {
  font-family: var(--font-body);
  font-size: var(--music-eyebrow-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--music-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--music-eyebrow-color);
  margin-bottom: var(--space-sm);
  max-width: none;
  line-height: var(--lh-subhead);
}

.music__heading {
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
  color: var(--color-light);
  margin-bottom: var(--space-md);
}

.music__body {
  font-size: var(--text-p);
  line-height: var(--lh-body);
  color: var(--color-accent-light);
  opacity: 0.8;
  margin-bottom: var(--space-lg);
  max-width: 34ch;
}

/* "View all tracks" CTA — same style as hero CTA */
.music__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--music-cta-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--music-cta-tracking);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  transition: color var(--transition-base);
}

.music__cta:hover {
  color: var(--color-accent-light);
}

/* Right: player */
.music__player {
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Dark tinted border to frame the embed */
  outline: var(--border-thin);
}

.music__player iframe {
  display: block;
  width: 100%;
}

/* ── Music responsive ─────────────────────────────────────── */

@media (max-width: 768px) {
  .music__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .music__text {
    order: 1;
  }

  .music__player {
    order: 2;
  }

  .music__body {
    max-width: 100%;
  }
}


/* ------------------------------------------------------------
   ABOUT SECTION
   ------------------------------------------------------------ */

:root {
  --about-photo-width:      45%;
  --about-eyebrow-size:     0.7rem;
  --about-eyebrow-tracking: 0.14rem;
  --about-eyebrow-color:    var(--color-accent-dark);
  --about-cta-size:         0.7rem;
  --about-cta-tracking:     0.14rem;
}

.about-section {
  background: linear-gradient(
    to bottom,
    var(--color-bg-alt),
    var(--color-bg)
  );
}

/* Two-column grid inside container — same pattern as music/video */
.about__inner {
  display: grid;
  grid-template-columns: var(--about-photo-width) 1fr;
  gap: var(--space-xl);
  align-items: center;
}

/* Photo — background-image div in grid column */
.about__image-wrap {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: var(--radius-md);
  min-height: 420px;
  align-self: stretch;
}

/* Mobile img — hidden on desktop */
.about__image-mobile {
  display: none;
}

/* Text column */
.about__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-xl);
}

.about__eyebrow {
  font-family: var(--font-body);
  font-size: var(--about-eyebrow-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--about-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--about-eyebrow-color);
  margin-bottom: var(--space-sm);
  max-width: none;
  line-height: var(--lh-subhead);
}

.about__heading {
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
  color: var(--color-light);
  margin-bottom: var(--space-lg);
}

.about__body {
  font-size: var(--text-p);
  line-height: var(--lh-body);
  color: var(--color-accent-light);
  opacity: 0.8;
  max-width: 100%;
  margin-bottom: var(--space-md);
}

.about__body:last-of-type {
  margin-bottom: var(--space-lg);
}

.about__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--about-cta-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--about-cta-tracking);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  transition: color var(--transition-base);
  align-self: flex-start;
}

.about__cta:hover {
  color: var(--color-accent-light);
}

/* Other Heroes link */
.about__other-heroes {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--about-cta-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--about-cta-tracking);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  margin-top: var(--space-sm);
  transition: color var(--transition-base);
  align-self: flex-start;
  opacity: 0.7;
}

.about__other-heroes:hover {
  color: var(--color-accent-light);
  opacity: 1;
}

/* ── About responsive ─────────────────────────────────────── */

@media (max-width: 900px) {
  .about__inner {
    grid-template-columns: 1fr;
  }

  .about__image-wrap {
    background-image: none !important;
    min-height: unset;
  }

  .about__image-mobile {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }

  .about__text {
    padding-block: 0;
  }
}

@media (max-width: 480px) {
  .about__text {
    padding-bottom: var(--space-lg);
  }
}


/* ------------------------------------------------------------
   QUOTES SECTION
   ------------------------------------------------------------ */

:root {
  --quote-text-size:        var(--text-h3);
  --quote-attr-size:        0.7rem;
  --quote-attr-tracking:    0.14rem;
  --quote-source-size:      0.7rem;
  --quote-source-tracking:  0.14rem;
  --quote-max-width:        52rem;
  --quote-fade-duration:    1200ms;
  --quote-drift-distance:   1rem;
  --quote-timer:            7000ms;
}

.quotes-section {
  background-color: var(--color-bg);
  padding-block: var(--section-pad-v);
}

.quotes-carousel {
  position: relative;
  max-width: var(--quote-max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  min-height: 12rem; /* prevent layout jump during crossfade */
}

/* Individual quote — hidden by default, shown when active */
.quote-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(var(--quote-drift-distance));
  transition:
    opacity var(--quote-fade-duration) var(--ease-emerge),
    transform var(--quote-fade-duration) var(--ease-emerge);
  pointer-events: none;
}

.quote-item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* Quote text */
.quote-item__text p {
  font-family: var(--font-heading);
  font-size: var(--quote-text-size);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  color: var(--color-light);
  max-width: none;
  margin-bottom: var(--space-lg);
}

/* Attribution block */
.quote-item__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* Small decorative rule above attribution */
.quote-item__attribution::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
}

/* Who said it */
.quote-item__attr {
  font-family: var(--font-body);
  font-size: var(--quote-attr-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--quote-attr-tracking);
  text-transform: uppercase;
  color: var(--color-accent-light);
}

/* Where it appeared */
.quote-item__source {
  font-family: var(--font-body);
  font-size: var(--quote-source-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--quote-source-tracking);
  color: var(--color-accent-dark);
  font-style: italic;
}

/* ── Quotes responsive ────────────────────────────────────── */

@media (max-width: 768px) {
  .quote-item__text p {
    font-size: var(--text-h4);
  }
}


/* ------------------------------------------------------------
   VIDEO SECTION
   ------------------------------------------------------------ */

:root {
  --video-text-width:         22%;
  --video-eyebrow-size:       0.7rem;
  --video-eyebrow-tracking:   0.14rem;
  --video-eyebrow-color:      var(--color-accent-dark);
  --video-label-size:         0.65rem;
  --video-label-tracking:     0.16rem;
  --video-cta-size:           0.7rem;
  --video-cta-tracking:       0.14rem;
  --video-thumb-radius:       var(--radius-sm);
  --video-play-size:          3.5rem;
  --video-control-size:       1.5rem;
  --video-dot-size:           6px;
}

.video-section {
  background: linear-gradient(
    to bottom,
    var(--color-bg),
    var(--color-bg-alt)
  );
  padding-block: var(--section-pad-v);
}

/* Two-column: text left, carousels right */
.video__inner {
  display: grid;
  grid-template-columns: var(--video-text-width) 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Left: text */
.video__eyebrow {
  font-family: var(--font-body);
  font-size: var(--video-eyebrow-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--video-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--video-eyebrow-color);
  margin-bottom: var(--space-sm);
  max-width: none;
  line-height: var(--lh-subhead);
}

.video__heading {
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
  color: var(--color-light);
  margin-bottom: var(--space-md);
}

.video__body {
  font-size: var(--text-p);
  line-height: var(--lh-body);
  color: var(--color-accent-light);
  opacity: 0.8;
  max-width: 100%;
  margin-bottom: var(--space-lg);
}

.video__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--video-cta-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--video-cta-tracking);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  transition: color var(--transition-base);
}

.video__cta:hover {
  color: var(--color-accent-light);
}

/* Right: three carousels in a row */
.video__carousels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* Each carousel */
.video-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Label */
.video-carousel__label {
  font-family: var(--font-body);
  font-size: var(--video-label-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--video-label-tracking);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  max-width: none;
  line-height: var(--lh-subhead);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-thin);
  margin-bottom: var(--space-xs);
}

/* Track — clips to show one slide at a time */
.video-carousel__track {
  position: relative;
  width: 100%;
}

/* Each slide — stacked, only active is visible */
.video-slide {
  display: none;
}

.video-slide.is-active {
  display: block;
}

/* Thumbnail button — 16:9 aspect ratio */
.video-thumb__btn {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display: block;
  border-radius: var(--video-thumb-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-alt);
  border: none;
}

.video-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.video-thumb__btn:hover .video-thumb__img {
  transform: scale(1.03);
}

/* Play overlay */
.video-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-thumb__play svg {
  width: var(--video-play-size);
  height: var(--video-play-size);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transition: transform var(--transition-base);
}

.video-thumb__btn:hover .video-thumb__play svg {
  transform: scale(1.1);
}

/* Iframe replaces button on click */
.video-thumb__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--video-thumb-radius);
  display: block;
  border: none;
}

/* Title */
.video-thumb__title {
  font-family: var(--font-body);
  font-size: var(--text-p);
  font-weight: var(--fw-light);
  color: var(--color-accent-light);
  opacity: 0.8;
  margin-top: var(--space-sm);
  max-width: 100%;
  line-height: var(--lh-subhead);
}

/* Controls — prev, dots, next */
.video-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.video-carousel__prev,
.video-carousel__next {
  font-family: var(--font-body);
  font-size: var(--video-control-size);
  color: var(--color-accent-dark);
  cursor: pointer;
  transition: color var(--transition-base);
  line-height: 1;
  padding: 0;
  background: none;
  border: none;
}

.video-carousel__prev:hover,
.video-carousel__next:hover {
  color: var(--color-accent-light);
}

.video-carousel__dots {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.video-carousel__dot {
  width: var(--video-dot-size);
  height: var(--video-dot-size);
  border-radius: 50%;
  background-color: var(--color-accent-dark-40);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-base);
}

.video-carousel__dot.is-active {
  background-color: var(--color-accent-light);
}

/* ── Video responsive ─────────────────────────────────────── */

@media (max-width: 900px) {
  .video__inner {
    grid-template-columns: 1fr;
  }

  .video__carousels {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}


/* ------------------------------------------------------------
   VIDEO LIGHTBOX
   ------------------------------------------------------------ */

:root {
  --lightbox-max-width:   56rem;
  --lightbox-bg:          rgba(0, 5, 8, 0.95);
  --lightbox-close-size:  2.5rem;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.lightbox[hidden] {
  display: none;
}

/* Dark backdrop */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--lightbox-bg);
  cursor: pointer;
}

/* Content box — above backdrop */
.lightbox__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lightbox-max-width);
}

/* Close button */
.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--lightbox-close-size) - var(--space-sm));
  right: 0;
  width: var(--lightbox-close-size);
  height: var(--lightbox-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-light);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-base);
  background: none;
  border: none;
}

.lightbox__close:hover {
  opacity: 1;
}

/* 16:9 iframe container */
.lightbox__player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lightbox__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ------------------------------------------------------------
   CONTACT SECTION
   ------------------------------------------------------------ */

:root {
  --contact-text-width:       35%;
  --contact-eyebrow-size:     0.7rem;
  --contact-eyebrow-tracking: 0.14rem;
  --contact-eyebrow-color:    var(--color-accent-dark);
  --contact-social-size:      1.5rem;
  --contact-social-gap:       var(--space-lg);
  --input-border:             1px solid var(--color-accent-dark-40);
  --input-bg:                 rgba(7, 15, 23, 0.6);
  --input-radius:             var(--radius-sm);
  --input-pad:                0.75rem 1rem;
  --input-size:               var(--text-p);
  --submit-bg:                var(--color-accent-alt);
  --submit-bg-hover:          var(--color-accent-dark);
  --submit-tracking:          0.14rem;
}

.contact-section {
  background: linear-gradient(
    to bottom,
    var(--color-bg-alt),
    var(--color-bg)
  );
  padding-block: var(--section-pad-v);
  scroll-margin-top: var(--header-height);
}

.contact__inner {
  display: grid;
  grid-template-columns: var(--contact-text-width) 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Left: text */
.contact__eyebrow {
  font-family: var(--font-body);
  font-size: var(--contact-eyebrow-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--contact-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--contact-eyebrow-color);
  margin-bottom: var(--space-sm);
  max-width: none;
  line-height: var(--lh-subhead);
}

.contact__heading {
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
  color: var(--color-light);
  margin-bottom: var(--space-md);
}

.contact__body {
  font-size: var(--text-p);
  line-height: var(--lh-body);
  color: var(--color-accent-light);
  opacity: 0.8;
  max-width: 100%;
  margin-bottom: var(--space-xl);
}

/* Social icons */
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--contact-social-gap);
  align-items: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--contact-social-size);
  height: var(--contact-social-size);
  color: var(--color-accent-dark);
  transition: color var(--transition-base);
}

.social-icon svg {
  width: 100%;
  height: 100%;
}

.social-icon:hover {
  color: var(--color-accent-light);
}

/* Right: form */
.contact__form-wrap {
  width: 100%;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
}

.contact-form__input {
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-pad);
  font-family: var(--font-body);
  font-size: var(--input-size);
  font-weight: var(--fw-light);
  color: var(--color-light);
  width: 100%;
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base);
  outline: none;
  appearance: none;
}

.contact-form__input::placeholder {
  color: var(--color-accent-dark);
  opacity: 0.8;
}

.contact-form__input:focus {
  border-color: var(--color-accent-dark);
  background-color: var(--color-bg-alt);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: var(--lh-body);
}

/* Submit row */
.contact-form__footer {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.contact-form__submit {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--submit-tracking);
  text-transform: uppercase;
  color: var(--color-light);
  background-color: var(--submit-bg);
  border: none;
  border-radius: var(--input-radius);
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.contact-form__submit:hover {
  background-color: var(--submit-bg-hover);
}

.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status message */
.contact-form__status {
  font-family: var(--font-body);
  font-size: var(--text-p);
  font-weight: var(--fw-light);
  max-width: none;
  line-height: var(--lh-body);
}

.contact-form__status.is-success {
  color: var(--color-accent-light);
}

.contact-form__status.is-error {
  color: #e07070;
}

/* ── Contact responsive ───────────────────────────────────── */

@media (max-width: 900px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

:root {
  --footer-pad-v:   var(--space-xl);
  --footer-size:    0.7rem;
  --footer-tracking: 0.1rem;
}

.site-footer {
  background-color: var(--color-bg);
  border-top: var(--border-thin);
  padding-block: var(--footer-pad-v);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__copy {
  font-family: var(--font-body);
  font-size: var(--footer-size);
  font-weight: var(--fw-light);
  letter-spacing: var(--footer-tracking);
  color: var(--color-accent-dark);
  opacity: 0.7;
  text-align: center;
  max-width: none;
  line-height: var(--lh-body);
}