/* Header, footer, hero and page-level sections */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition-med), border-color var(--transition-med), backdrop-filter var(--transition-med);
}

/* No backdrop-filter (not even blur(0px)) on the base rule: ANY non-"none"
   filter/backdrop-filter value turns .header into the containing block for
   its position:fixed descendants (the mobile .nav drawer), collapsing it
   to the header's own 84px box instead of covering the full viewport. */
.header.is-scrolled {
  background: rgba(3, 4, 5, 0.55);
  border-bottom: 1px solid rgba(217, 180, 107, 0.12);
  backdrop-filter: blur(16px);
}

@media (max-width: 767px) {
  .header.is-scrolled {
    backdrop-filter: none;
  }
}

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

.logo {
  font-family: var(--font-caps);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-main);
  padding: 0.25rem 0;
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 0;
  height: 30px;
  transform: translateX(-50%);
  transition: width var(--transition-fast);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:root[data-theme="light"] .nav__link::after {
  background-image: url("../images/ui/decor/divider-spark-light.webp");
  background-size: 200% auto;
  filter: brightness(1.4) drop-shadow(0 0 8px rgba(241, 197, 111, 0.85));
}

:root[data-theme="dark"] .nav__link::after {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blood-burgundy), var(--accent-strong), var(--blood-burgundy), transparent);
  box-shadow: 0 0 10px rgba(199, 69, 76, 0.7);
}

.nav__link[aria-current="page"]::after {
  width: 140px;
}

.nav:hover .nav__link[aria-current="page"]:not(:hover)::after {
  width: 0;
}

.nav__link:hover::after {
  width: 140px;
}

.nav__link[aria-current="page"] {
  color: var(--nav-active-color);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.8rem;
  line-height: 1;
}

/* Mobile nav */
@media (max-width: 767px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    top: var(--header-height);
    z-index: 60;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: #050506;
    transform: translateX(100%);
    transition: transform var(--transition-med);
  }

  :root[data-theme="light"] .nav {
    background: #1c1206;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__link {
    font-size: 1.5rem;
  }
}

/* Footer */
.footer {
  border-top: 1px solid var(--card-border);
  padding: 2.5rem 0;
  margin-top: 4rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.footer__contact {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.7rem 1.1rem;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.footer__contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px var(--accent-glow);
  background: rgba(0, 0, 0, 0.32);
}

.footer__contact svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.6;
}

.footer__contact--pinterest svg { fill: var(--accent-strong); stroke: none; }

/* Label ("Instagram"/"Pinterest") follows theme text color; handle follows theme accent */
.footer__contact__label {
  color: var(--text-main);
}

:root[data-theme="light"] .footer__contact__label {
  color: var(--cream);
}

.footer__contact__handle {
  color: var(--accent-strong);
  margin-left: 0.15em;
}

/* Hero */
.hero {
  position: relative;
  padding: clamp(0.75rem, 3vw, 1.5rem) 0 clamp(1rem, 3vw, 1.5rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.hero.bg-art .bg-art__layer {
  opacity: 0.68 !important;
}

.hero__content { position: relative; z-index: 2; }

.hero__eyebrow {
  font-family: var(--font-caps);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__subtitle {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.55rem;
  margin: 1.25rem 0 clamp(2rem, 5vw, 3.25rem);
}

.hero__accent-video {
  position: relative;
  justify-self: center;
  margin-right: clamp(1rem, 5vw, 3.5rem);
  height: clamp(500px, 78vh, 760px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, black 20%, transparent 88%);
  mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, black 20%, transparent 88%);
}

.hero__accent-video::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse 55% 52% at 50% 50%, var(--accent-glow), transparent 75%);
  filter: blur(60px);
  z-index: -1;
}

.hero__accent-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 68% 66% at 50% 50%, transparent 45%, var(--page-bg) 92%);
  filter: blur(22px);
  mix-blend-mode: normal;
}

.hero__accent-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
}

@media (max-width: 1023px) {
  /* Plain block stacking instead of a single-column grid: the grid track
     was measuring out wider than the container's own content box (a track
     sizing quirk with these children), shifting all the centered content
     right by the overflow amount. Block flow has no track-sizing math to
     get wrong. */
  .hero {
    display: block;
  }
  .hero__accent-video {
    justify-self: unset;
    margin: clamp(1rem, 3vw, 2rem) auto 0;
    height: auto;
    width: min(480px, 90vw);
  }

  /* Stacked single-column layout reads better centered than left-aligned */
  .hero__content {
    text-align: center;
  }
  .hero__content .hero-title-img,
  .hero__content .divider,
  .hero__content .side-toggle {
    margin-left: auto;
    margin-right: auto;
  }
  .hero__content .filters {
    justify-content: center;
  }
}

/* Smaller phones: the enlarged text/buttons need room to breathe */
@media (max-width: 560px) {
  .container {
    padding: 0 1.4rem;
  }
  .section-title {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }
  .hero__subtitle {
    font-size: 1.25rem;
  }
  .side-toggle__btn {
    padding: 0.75rem 1.15rem;
    font-size: 1.05rem;
    gap: 0.4rem;
  }
  .chip {
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
  }
}

/* Section title (tech spec §9.3) */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7.5vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text-main);
  text-shadow: 0 0 28px var(--accent-glow);
  margin: 0;
}

.section-title .accent { color: var(--accent-strong); }

/* Hero title as her gold/red textured artwork, real text kept for a11y/SEO */
.hero-title-img {
  display: block;
  width: min(100%, 640px);
  height: auto;
  margin: 0.25rem 0;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 1.25rem 0;
  width: 280px;
  max-width: 100%;
}

.divider img {
  width: 100%;
  height: auto;
  opacity: 0.9;
  display: none;
}

:root[data-theme="light"] .divider__spark {
  display: block;
}

.divider--plain {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-border), transparent);
  max-width: 100%;
}

:root[data-theme="light"] .divider--plain {
  display: none;
}

:root[data-theme="dark"] .divider--plain {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blood-burgundy) 42%, var(--accent-strong) 50%, var(--blood-burgundy) 58%, transparent);
  box-shadow: 0 0 14px rgba(199, 69, 76, 0.55);
}

/* Faint artwork bleeding into the background of otherwise-empty sections.
   Uses a real element (not ::before) so JS can set background-image as an
   inline style — inline styles resolve relative URLs against the page,
   not the stylesheet, which is what we need on GitHub Pages subpaths. */
.bg-art {
  position: relative;
  isolation: isolate;
}

.bg-art__layer {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent),
    linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent),
    linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-composite: intersect;
}

:root[data-theme="light"] .bg-art__layer { opacity: 0.3; }
:root[data-theme="dark"] .bg-art__layer { opacity: 0.5; }

/* About the artist (shared: home teaser, artist page, gallery footer block) */
.about {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.about--compact {
  grid-template-columns: minmax(260px, 340px) 1fr;
}

@media (max-width: 900px) {
  .about, .about--compact {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about__portrait { justify-self: center; }
}

.about__portrait img {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.about__bio p {
  color: var(--text-muted);
  max-width: 60ch;
  font-size: 1.4rem;
}

.about__quote {
  font-style: italic;
  color: var(--text-main);
  font-size: 1.65rem;
  margin: 1.5rem 0;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  transition: gap var(--transition-fast);
}

.more-link:hover { gap: 0.85rem; }

/* Page wrapper for non-home pages */
.page-hero {
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* Artist page: title block sits right above the bio/photo, whole thing centered on screen */
.about-page {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}

.about-page__header {
  text-align: center;
  margin-bottom: clamp(0.5rem, 2vw, 1.25rem);
}

.about-page__header .divider {
  margin-left: auto;
  margin-right: auto;
}