:root {
  --page-edge: max(20px, 4.5vw);
  --page-line: rgba(245, 231, 211, 0.24);
}

.inner-page {
  --hero-focus: center center;
  --hero-light-x: 68%;
  --hero-light-y: 30%;
  background: #1d1c1c;
}

.inner-hero {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  background: #171616;
  overflow: hidden;
}

.inner-hero::before,
.inner-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.inner-hero::before {
  z-index: 1;
  background:
    radial-gradient(circle at var(--hero-light-x) var(--hero-light-y), rgba(234, 205, 166, 0.2), transparent 38%),
    linear-gradient(102deg, rgba(9, 10, 11, 0.34) 0%, transparent 43%, rgba(9, 10, 11, 0.12) 100%);
  mix-blend-mode: soft-light;
}

.inner-hero::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8, 9, 10, 0.2) 0%, transparent 34%, rgba(8, 9, 10, 0.08) 56%, rgba(8, 9, 10, 0.62) 100%),
    linear-gradient(90deg, rgba(8, 9, 10, 0.2), transparent 40%, rgba(8, 9, 10, 0.12));
}

.inner-hero > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
  filter: saturate(0.9) contrast(1.035);
  transform: scale(1.006);
}

.inner-hero__title {
  position: absolute;
  right: var(--page-edge);
  bottom: 38px;
  left: var(--page-edge);
  z-index: 2;
  margin: 0;
  font-size: clamp(92px, 14vw, 210px);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.inner-intro {
  display: grid;
  padding: 145px var(--page-edge) 175px;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 0.8fr);
  gap: 9vw;
}

.inner-intro h2 {
  max-width: 1020px;
  margin: 0;
  font-size: clamp(48px, 6vw, 86px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.inner-intro p {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.48;
}

.inner-kicker {
  display: block;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.inner-footer {
  display: grid;
  min-height: 300px;
  padding: 80px var(--page-edge) 42px;
  grid-template-columns: 1fr auto 1fr;
  gap: 5vw;
  border-top: 1px solid var(--page-line);
  font-size: 12px;
  line-height: 1.5;
}

.inner-footer p { margin: 0; }
.inner-footer p:last-child { text-align: right; }
.inner-footer nav { display: flex; gap: 25px; }

.page-reveal {
  opacity: 1;
  transform: none;
}

.page-reveal.is-pending {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms ease, transform 900ms var(--ease);
}

.page-reveal.is-pending.is-visible { opacity: 1; transform: translateY(0); }

/* Music */
.music-page {
  --hero-focus: center 27%;
  --hero-light-x: 62%;
  --hero-light-y: 26%;
}

.music-archive {
  padding: 0 var(--page-edge) 190px;
}

.music-archive .song-gallery {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

.music-statement {
  padding: 120px var(--page-edge) 150px;
  font-size: clamp(58px, 8vw, 118px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* Journey */
.journey-page {
  --hero-focus: center 47%;
  --hero-light-x: 48%;
  --hero-light-y: 36%;
}

.journey-list { padding: 0 var(--page-edge) 180px; }

.journey-item {
  display: grid;
  min-height: 330px;
  padding: 40px 0 55px;
  grid-template-columns: 160px minmax(0, 1.1fr) minmax(260px, 0.72fr);
  gap: 5vw;
  align-items: start;
  border-top: 1px solid var(--page-line);
}

.journey-item time {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.journey-item h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(44px, 5.8vw, 82px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.journey-item p {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.48;
}

.journey-image {
  width: calc(100% - 20px);
  height: 78svh;
  margin: 0 10px 180px;
  overflow: hidden;
}

.journey-image img { width: 100%; height: 100%; object-fit: cover; }

/* Press */
.press-page {
  --hero-focus: center 16%;
  --hero-light-x: 70%;
  --hero-light-y: 34%;
}

.press-grid {
  display: grid;
  padding: 0 var(--page-edge) 190px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.press-card {
  display: flex;
  min-height: 440px;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  background: #242323;
  border: 1px solid var(--page-line);
  transition: color 250ms ease, background 250ms ease;
}

.press-card:hover,
.press-card:focus-visible { color: #1d1c1c; background: var(--ink); }
.press-card__meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.press-card h2 { max-width: 700px; margin: 60px 0 30px; font-size: clamp(37px, 4vw, 60px); line-height: 0.97; letter-spacing: -0.04em; }
.press-card p { max-width: 590px; margin: 0; font-size: 16px; line-height: 1.45; }
.press-card__arrow { align-self: flex-end; font-size: 34px; }

.press-kit {
  display: grid;
  min-height: 620px;
  padding: 220px var(--page-edge) 90px;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 0.8fr);
  gap: 9vw;
  align-items: end;
}

.press-kit h2 { margin: 0; font-size: clamp(62px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.04em; }
.press-kit p { margin: 0; font-size: 17px; line-height: 1.48; }

/* Contact */
.contact-page {
  --hero-focus: center 21%;
  --hero-light-x: 60%;
  --hero-light-y: 24%;
}
.contact-page .inner-hero { background: #6f5337; }

.contact-options {
  display: grid;
  padding: 0 var(--page-edge) 180px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.contact-option {
  display: flex;
  min-height: 330px;
  padding: 34px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--page-line);
}

.contact-option span { font-size: 12px; font-weight: 700; letter-spacing: 0.11em; }
.contact-option h2 { margin: 0 0 18px; font-size: clamp(44px, 5vw, 70px); line-height: 0.92; letter-spacing: -0.04em; }
.contact-option p { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.45; }
.contact-option a { display: inline-block; margin-top: 26px; border-bottom: 1px solid currentColor; }

.contact-biglink {
  display: flex;
  min-height: 62vh;
  padding: 80px var(--page-edge);
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--page-line);
}

.contact-biglink a { font-size: clamp(58px, 10vw, 146px); font-weight: 600; line-height: 0.88; letter-spacing: -0.04em; }

@media (max-width: 700px) {
  .music-page { --hero-focus: 56% center; }
  .journey-page { --hero-focus: 43% center; }
  .press-page { --hero-focus: 92% center; }
  .contact-page { --hero-focus: 53% center; }

  .inner-hero { min-height: max(620px, 100svh); }

  .inner-hero__title { bottom: 28px; font-size: clamp(48px, 15vw, 75px); overflow-wrap: anywhere; }

  .inner-intro {
    padding: 88px 18px 108px;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .inner-intro h2 { font-size: clamp(36px, 11.5vw, 45px); line-height: 1; }
  .inner-intro p { font-size: 16px; line-height: 1.58; }

  .inner-footer { padding: 60px 20px 35px; grid-template-columns: 1fr; gap: 40px; }
  .inner-footer nav { flex-direction: column; gap: 7px; }
  .inner-footer p:last-child { text-align: left; }

  .music-archive { padding: 0 10px 110px; }
  .music-archive .song-gallery { padding: 0; }
  .music-statement { padding: 96px 18px 116px; font-size: clamp(46px, 16vw, 57px); }

  .journey-list { padding: 0 18px 112px; }
  .journey-item { min-height: 0; padding: 32px 0 74px; grid-template-columns: 1fr; gap: 20px; }
  .journey-item h2 { font-size: clamp(38px, 12.5vw, 48px); line-height: .96; }
  .journey-item p { font-size: 16px; line-height: 1.58; }
  .journey-image { height: 68svh; margin-bottom: 110px; }

  .press-grid, .contact-options { padding: 0 18px 112px; grid-template-columns: 1fr; }
  .press-card { min-height: 360px; padding: 23px; }
  .press-card h2 { margin: 48px 0 26px; font-size: clamp(35px, 11.5vw, 42px); }
  .press-card p { font-size: 15px; line-height: 1.55; }
  .press-kit { min-height: 540px; padding: 150px 18px 82px; grid-template-columns: 1fr; gap: 48px; }
  .press-kit h2 { font-size: clamp(52px, 18vw, 68px); }

  .contact-option { min-height: 300px; padding: 23px; }
  .contact-option h2 { font-size: clamp(37px, 12vw, 44px); }
  .contact-option p { font-size: 16px; line-height: 1.55; }
  .contact-biglink { min-height: 52vh; padding: 76px 18px; }
  .contact-biglink a { font-size: clamp(32px, 9vw, 64px); overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .page-reveal,
  .page-reveal.is-pending { opacity: 1; transform: none; transition: none; }
}