:root {
  --bg: #0a0a0a;
  --bg-soft: #121212;
  --ink: #f0ece5;
  --ink-dim: rgba(240, 236, 229, 0.55);
  --ink-faint: rgba(240, 236, 229, 0.4);
  --accent: #c9a76a;
  --serif: 'Cormorant', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* ---------- Views ---------- */
.view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 480ms var(--ease);
}
.view[hidden] {
  display: none;
}
.view--fading {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Landing ---------- */
.view--landing {
  display: block;
  padding: 6vh 6vw;
  background:
    radial-gradient(ellipse at 50% 50%, #1a1a1a 0%, var(--bg) 70%),
    var(--bg);
}

.landing__inner {
  /* THRIVE wordmark sits at the exact vertical center of the page;
     nav stack is anchored just below it. */
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.landing__inner .wordmark--hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.42em;
  margin: 0;
  text-transform: uppercase;
  padding-left: 0.42em; /* balance trailing letter-spacing for true centering */
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.fonts-ready .wordmark {
  opacity: 1;
}

.wordmark--hero {
  font-size: clamp(38px, 9.5vw, 132px);
  line-height: 1;
}

.landing__nav {
  position: absolute;
  /* Vertically centered between bottom of THRIVE wordmark and top of footer.
     Midpoint = 75% + (half-wordmark / 2) - half-footer-area. */
  top: calc(75% + clamp(19px, 4.75vw, 66px) / 2 - 21px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.section-link {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 10px 14px;
  position: relative;
  transition: color 320ms var(--ease), letter-spacing 480ms var(--ease);
}
.section-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 420ms var(--ease), left 420ms var(--ease);
}
.section-link:hover,
.section-link:focus-visible {
  color: var(--ink);
  letter-spacing: 0.42em;
  outline: none;
}
.section-link:hover::after,
.section-link:focus-visible::after {
  width: 38%;
  left: 31%;
}

.landing__footer {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  /* Use only system fonts to avoid layout shift when Inter loads (Inter is wider than fallback) */
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: 10px;
  white-space: nowrap;
  max-width: 98vw;
}
.landing__footer .dot { color: var(--ink-faint); }
.landing__footer a {
  color: inherit;
  text-decoration: none;
  transition: color 240ms var(--ease);
}
.landing__footer a:hover { color: var(--ink-dim); }

@media (max-width: 540px) {
  .landing__footer {
    bottom: 22px;
    max-width: 98vw;
  }
}

/* ---------- Gallery ---------- */
.view--gallery {
  background: #050505;
  display: flex;
}

.gallery__header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 32px;
  gap: 24px;
}

.wordmark--small {
  font-size: 22px;
  letter-spacing: 0.38em;
  justify-self: start;
  color: var(--ink);
  transition: opacity 240ms var(--ease);
}
.wordmark--small:hover { opacity: 0.7; }

.gallery__header-spacer {
  justify-self: end;
}

.gallery__nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
}

.gallery__nav-link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 8px 2px;
  position: relative;
  transition: color 280ms var(--ease), letter-spacing 420ms var(--ease);
}

@media (max-width: 720px) {
  .gallery__nav-link {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 8px 1px;
  }
  .gallery__nav-link[data-action="home"] {
    display: none;
  }
  .gallery__nav {
    gap: clamp(10px, 2.5vw, 22px) !important;
  }
  .gallery__header {
    padding: 18px 16px;
    gap: 10px;
  }
}
.gallery__nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 360ms var(--ease), left 360ms var(--ease);
}
.gallery__nav-link:hover,
.gallery__nav-link:focus-visible {
  color: var(--ink);
  outline: none;
}
.gallery__nav-link:hover::after,
.gallery__nav-link:focus-visible::after {
  width: 60%;
  left: 20%;
}
.gallery__nav-link.is-active {
  color: var(--ink);
  letter-spacing: 0.4em;
}
.gallery__nav-link.is-active::after {
  width: 100%;
  left: 0;
  background: var(--accent);
}

/* Stage */
.stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 12px 0;
  overflow: hidden;
}

.stage .swiper {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* mask the very edges so peeking neighbors fade out elegantly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.stage .swiper-wrapper {
  align-items: center;
}

.stage .swiper-slide {
  width: auto;
  height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* dim non-active slides for that focused, high-end feel */
  opacity: 0.32;
  transition: opacity 540ms var(--ease), filter 540ms var(--ease);
  filter: saturate(0.85);
  will-change: opacity;
}
.stage .swiper-slide-active,
.stage .swiper-slide-visible.swiper-slide-active {
  opacity: 1;
  filter: none;
  /* stay on top so the scaled-up active image fully covers neighbors instead of bleeding through them */
  z-index: 2;
}

.stage .swiper-slide img {
  display: block;
  max-width: 60vw;
  max-height: 62vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  background: #0d0d0d;
  transform: scale(0.94);
  transform-origin: center center;
  transition: transform 540ms var(--ease), box-shadow 540ms var(--ease);
  will-change: transform;
}
.stage .swiper-slide-active img {
  transform: scale(1.25);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}

/* Side click zones — narrow so they don't block swipe gestures */
.stage__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9vw;
  min-width: 56px;
  max-width: 120px;
  z-index: 3;
  background: transparent;
  transition: background 320ms var(--ease);
}
.stage__nav--prev { left: 0; cursor: w-resize; }
.stage__nav--next { right: 0; cursor: e-resize; }

.stage__nav--prev:hover {
  background: linear-gradient(to right, rgba(255,255,255,0.04), transparent);
}
.stage__nav--next:hover {
  background: linear-gradient(to left, rgba(255,255,255,0.04), transparent);
}

/* Footer */
.gallery__footer {
  position: relative;
  z-index: 5;
  /* Padding-bottom matches landing__footer's bottom offset so meta sits at the same viewport spot. */
  padding: 14px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.gallery__footer-meta {
  /* Match landing__footer exactly so it stays the same size on home + gallery. */
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: 10px;
  white-space: nowrap;
  max-width: 98vw;
}
.gallery__footer-meta .dot { color: var(--ink-faint); }
.gallery__footer-meta a {
  color: inherit;
  text-decoration: none;
  transition: color 240ms var(--ease);
}
.gallery__footer-meta a:hover { color: var(--ink-dim); }

.progress {
  width: clamp(200px, 36vw, 420px);
  height: 1px;
  background: var(--ink-faint);
  position: relative;
  overflow: hidden;
}
.progress__bar {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--ink);
  transition: right 480ms var(--ease);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .wordmark--hero { letter-spacing: 0.3em; padding-left: 0.3em; }
  .gallery__header { padding: 14px 14px; gap: 12px; }
  .wordmark--small { font-size: 16px; letter-spacing: 0.32em; }
  .gallery__nav { gap: 12px; }
  .gallery__nav-link { font-size: 10px; letter-spacing: 0.24em; padding: 6px 2px; }
  .gallery__nav-link.is-active { letter-spacing: 0.3em; }
  .stage { padding: 6px 0; }
  .stage .swiper-slide { height: 70vh; }
  .stage .swiper-slide img { max-width: 70vw; max-height: 56vh; }
  .stage .swiper {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  }
  .stage__nav { width: 14vw; }
  /* Padding-bottom matches landing__footer's mobile bottom offset (22px) for identical placement.
     Slightly larger gap lifts the progress bar up a few pixels above the footer meta. */
  .gallery__footer { padding: 10px 18px 22px; gap: 16px; }
  .progress {
    /* 25% wider than desktop progress bar minimum (200 → 250). */
    width: clamp(250px, 45vw, 420px);
  }
  /* Both footers stay on a single line; same size on home + gallery.
     Font scales with viewport so the meta fits within 80vw without wrapping. */
  .landing__footer,
  .gallery__footer-meta {
    font-size: min(8px, 2vw);
    letter-spacing: 0.16em;
    gap: 8px;
    max-width: 80vw;
  }
}

@media (hover: none) {
  .stage__nav { cursor: default; }
  .stage__nav:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}