:root {
  --ivory: #f8f4eb;
  --paper: #fdfbf6;
  --ink: #3d3027;
  --muted: #756356;
  --gold: #a8864b;
  --gold-pale: #d5c092;
  --line: rgba(116, 88, 47, .22);
}

* { box-sizing: border-box; }

html { background: var(--ivory); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% -8%, rgba(218, 195, 143, .28), transparent 40rem),
    linear-gradient(115deg, rgba(160, 119, 62, .045), transparent 32%, rgba(160, 119, 62, .04)),
    var(--ivory);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.page-glow {
  position: fixed;
  z-index: -1;
  right: -18rem;
  bottom: -20rem;
  width: 48rem;
  height: 48rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 139, 79, .10), transparent 67%);
  pointer-events: none;
}

main { max-width: 1060px; margin: 0 auto; padding: 0 32px; }

.hero { padding: clamp(6.5rem, 16vw, 10.5rem) 0 clamp(5rem, 11vw, 7.5rem); text-align: center; }

.ornament, .footer-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--gold);
}

.ornament { margin-bottom: 1.8rem; }
.ornament span, .footer-ornament span { display: block; width: 44px; height: 1px; background: var(--gold-pale); }
.ornament i, .footer-ornament i { font-style: normal; font-size: .7rem; }

.eyebrow, .section-kicker {
  margin: 0 0 .75rem;
  color: var(--gold);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2, .tagline, .music-names { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }

h1 { margin: 0; font-size: clamp(3.25rem, 8vw, 5.8rem); line-height: .94; letter-spacing: -.035em; }
.tagline { margin: 1.3rem 0 0; color: var(--muted); font-size: clamp(1.35rem, 3.5vw, 1.8rem); font-style: italic; }
.hero-line { width: 1px; height: 3.5rem; margin: 2.4rem auto 0; background: linear-gradient(var(--gold-pale), transparent); }

.welcome {
  display: grid;
  grid-template-columns: minmax(230px, .82fr) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  max-width: 830px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.portrait-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.13;
  box-shadow: 14px 17px 0 rgba(168, 134, 75, .14), 0 16px 34px rgba(70, 48, 27, .13);
}
.portrait-wrap::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255, 255, 255, .3); pointer-events: none; }
.portrait-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.welcome-copy { text-align: left; }
h2 { margin: 0; font-size: clamp(2.35rem, 5vw, 3.55rem); line-height: 1; letter-spacing: -.02em; }
.welcome-copy p:last-child { max-width: 610px; margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; }

.video-section { padding: clamp(3.8rem, 8vw, 6.3rem) 0 clamp(6.5rem, 12vw, 9.5rem); border-top: 1px solid var(--line); }
.video-copy { margin-bottom: 2rem; text-align: center; }
.video-copy p:last-child { margin: .7rem 0 0; color: var(--muted); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-style: italic; }
.video-frame {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2e251e;
  box-shadow: 0 18px 52px rgba(70, 48, 27, .18);
  color: white;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.video-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 20, 13, .34), rgba(29, 20, 13, .06) 65%, rgba(29, 20, 13, .2)); transition: background .35s ease; }
.play-button {
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  width: 72px; height: 72px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  background: rgba(63, 43, 25, .23);
  transform: translate(-50%, -50%);
  transition: background .35s ease, transform .35s ease;
}
.play-button span { margin-left: 4px; font-size: 1.2rem; }
.watch-label { position: absolute; right: 1.25rem; bottom: 1rem; font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.watch-label b { margin-left: .35rem; font-size: 1rem; font-weight: 400; }
.video-frame:hover img, .video-frame:focus-visible img { transform: scale(1.035); }
.video-frame:hover .video-shade, .video-frame:focus-visible .video-shade { background: rgba(29, 20, 13, .13); }
.video-frame:hover .play-button, .video-frame:focus-visible .play-button { background: rgba(168, 134, 75, .75); transform: translate(-50%, -50%) scale(1.07); }
.video-frame:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }

footer { padding: 3.8rem 2rem 3.2rem; border-top: 1px solid var(--line); text-align: center; }
.footer-ornament { margin-bottom: 1.35rem; }
.music-names { margin: 0; color: var(--ink); font-size: clamp(1.2rem, 3vw, 1.45rem); letter-spacing: .01em; }
.music-names b { margin: 0 .35rem; color: var(--gold); font-weight: 400; }
.coming-soon { margin: .8rem 0 0; color: var(--muted); font-size: .82rem; }
.copyright { margin: 2.5rem 0 0; color: #98887a; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 540px) {
  main { padding: 0 21px; }
  .hero { padding-top: 5.6rem; }
  .welcome { grid-template-columns: 1fr; gap: 2.4rem; }
  .portrait-wrap { width: min(290px, 84vw); margin: 0 auto; }
  .welcome-copy { text-align: center; }
  .welcome-copy p:last-child { margin-inline: auto; }
  .music-names { max-width: 280px; margin-inline: auto; line-height: 1.35; }
  .music-names b { display: inline-block; }
}