:root {
  --black: #080607;
  --black-soft: #100c0e;
  --wine: #321017;
  --gold: #b98a4b;
  --gold-light: #e1bd7a;
  --ivory: #eee8dc;
  --muted: #aca39b;
  --line: rgba(185, 138, 75, .28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ivory);
  background: var(--black);
  font-family: "Inter", sans-serif;
  font-weight: 300;
  line-height: 1.75;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.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;
}

.site-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 76px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--ivory);
  text-decoration: none;
  font: 600 .76rem/1 "Cinzel", serif;
  letter-spacing: .16em;
}

.monogram {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border: 1px solid var(--gold);
  font-size: .72rem;
  letter-spacing: .05em;
}
.brand .monogram { line-height: 42px; text-align: center; }

.nav { display: flex; gap: clamp(22px, 3vw, 45px); }

.nav a {
  position: relative;
  padding: 34px 0 30px;
  color: #ddd7ce;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 0;
  height: 1px;
  background: var(--gold-light);
  transition: width .25s ease;
}

.nav a:hover::after, .nav a:focus-visible::after { width: 100%; }
.menu-button { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 135px clamp(24px, 8vw, 130px) 90px;
}

.hero-bg, .hero-shade { position: absolute; inset: 0; }

.hero-bg {
  background: url("assets/thassia-portrait.png") 76% 38% / cover no-repeat;
  transform: scale(1.02);
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 4, 5, .97) 0%, rgba(5, 4, 5, .82) 31%, rgba(5, 4, 5, .25) 63%, rgba(5, 4, 5, .45) 100%),
    linear-gradient(0deg, var(--black) 0%, transparent 27%, rgba(0, 0, 0, .2) 100%);
}

.hero-content { position: relative; z-index: 1; max-width: 720px; }

.eyebrow {
  margin: 0 0 20px;
  color: var(--gold-light);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .3em;
}

h1, h2, h3, .signature, .footer-brand {
  font-family: "Cinzel", serif;
  font-weight: 500;
}

h1 {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 7.6rem);
  line-height: .86;
  letter-spacing: -.045em;
  text-shadow: 0 5px 30px rgba(0, 0, 0, .55);
}

h1 span { color: var(--gold-light); font-size: .58em; letter-spacing: .03em; }

.hero-copy {
  max-width: 590px;
  margin: 34px 0;
  color: #cbc4ba;
  font: 300 clamp(1rem, 1.3vw, 1.18rem)/1.8 "Inter", sans-serif;
}

.button {
  display: inline-block;
  padding: 15px 25px;
  color: var(--black);
  background: var(--gold-light);
  border: 1px solid var(--gold-light);
  text-decoration: none;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  transition: color .2s, background .2s;
}

.button:hover, .button:focus-visible { color: var(--gold-light); background: transparent; }

.scroll-cue {
  position: absolute;
  z-index: 1;
  bottom: 34px;
  right: clamp(24px, 5vw, 76px);
  color: var(--muted);
  text-decoration: none;
  font-size: .57rem;
  letter-spacing: .25em;
}

.scroll-cue span { padding-left: 10px; color: var(--gold-light); }

.section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(90px, 11vw, 160px) 0;
}

.about, .music {
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(300px, 1fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: center;
}

.portrait-frame, .release-cover { position: relative; }

.portrait-frame::before, .release-cover::before {
  content: "";
  position: absolute;
  inset: -17px 17px 17px -17px;
  z-index: -1;
  border: 1px solid var(--line);
}

.portrait-frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(.72) contrast(1.07);
}

h2 {
  margin: 0 0 27px;
  color: var(--ivory);
  font-size: clamp(2.2rem, 4.2vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.section-copy p, .release-copy > p {
  max-width: 600px;
  color: var(--muted);
}

.signature { margin-top: 32px; color: var(--gold-light); font-size: 1.25rem; font-style: italic; }

.universe {
  padding: clamp(95px, 12vw, 170px) 24px;
  border-block: 1px solid var(--line);
  background: radial-gradient(circle at 20% 40%, rgba(80, 18, 28, .4), transparent 34%), #0c090a;
}

.universe-inner { width: min(1180px, 100%); margin: 0 auto; }
.universe h2 { max-width: 800px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 65px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pillars article { padding: 38px; background: #0c090a; }
.pillars span { color: var(--gold); font: 500 .65rem/1 "Cinzel", serif; letter-spacing: .15em; }
.pillars h3 { margin: 20px 0 12px; color: var(--ivory); font-size: 1.15rem; }
.pillars p { margin: 0; color: var(--muted); font-size: .9rem; }

.music { grid-template-columns: minmax(280px, .82fr) minmax(300px, 1fr); }

.release-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 30px 65px rgba(0, 0, 0, .55);
}

.release-type { color: var(--gold-light) !important; font-size: .67rem; font-weight: 600; letter-spacing: .23em; }

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tags span { padding: 8px 12px; border: 1px solid var(--line); color: #c8bdaa; font-size: .56rem; letter-spacing: .16em; }

.manifesto {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 80px 24px;
  text-align: center;
  overflow: hidden;
}

.manifesto-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(4, 3, 3, .56), rgba(4, 3, 3, .86)), url("assets/thassia-dark-room.png") center / cover no-repeat;
}

blockquote {
  position: relative;
  max-width: 920px;
  margin: 0;
  color: var(--ivory);
  font: 500 clamp(1.7rem, 3.3vw, 3.6rem)/1.35 "Cinzel", serif;
}

blockquote span { display: block; height: 48px; color: var(--gold-light); font-size: 5rem; line-height: .8; }

.contact { padding: clamp(100px, 12vw, 170px) 24px; text-align: center; }
.contact h2 { margin-bottom: 15px; }
.contact > p:not(.eyebrow) { color: var(--muted); }

.contact-card {
  width: min(540px, 100%);
  margin: 45px auto 0;
  padding: 38px 24px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(55, 17, 24, .23), transparent);
}

.contact-card span { display: block; color: var(--gold); font-size: .58rem; letter-spacing: .24em; }
.contact-card strong { display: block; margin: 10px 0 4px; font: 500 1.25rem/1.4 "Cinzel", serif; }
.contact-card a { color: #cfc7bc; text-decoration-color: var(--gold); text-underline-offset: 5px; }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 35px clamp(24px, 5vw, 76px);
  border-top: 1px solid var(--line);
  color: #776f6b;
  font-size: .63rem;
  letter-spacing: .08em;
}

.footer-brand { color: var(--gold); letter-spacing: .12em; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 800px) {
  .site-header { min-height: 72px; }
  .brand { font-size: .64rem; }
  .monogram { width: 34px; height: 34px; line-height: 34px !important; }

  .menu-button {
    display: grid;
    gap: 5px;
    padding: 10px 0 10px 10px;
    border: 0;
    background: none;
  }

  .menu-button > span:not(.sr-only) { width: 25px; height: 1px; background: var(--ivory); }

  .nav {
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 18px 24px;
    background: rgba(8, 6, 7, .97);
    border-bottom: 1px solid var(--line);
  }

  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; }
  .nav a::after { bottom: 8px; }

  .hero { min-height: 860px; align-items: flex-end; padding-bottom: 120px; }
  .hero-bg { background-position: 60% top; }
  .hero-shade { background: linear-gradient(0deg, var(--black) 5%, rgba(5, 4, 5, .8) 45%, rgba(5, 4, 5, .15) 78%, rgba(5, 4, 5, .38) 100%); }

  .about, .music { grid-template-columns: 1fr; }
  .portrait-frame, .release-cover { width: min(520px, 100%); margin: 0 auto; }
  .pillars { grid-template-columns: 1fr; }
  .pillars article { padding: 30px; }
  .manifesto { min-height: 440px; }

  footer { flex-direction: column; text-align: center; }
}

@media (max-width: 460px) {
  .brand > span:last-child { max-width: 175px; line-height: 1.35; }
  .hero { min-height: 760px; }
  h1 { font-size: 3.05rem; }
  .section { width: min(100% - 38px, 1180px); }
  .portrait-frame::before, .release-cover::before { inset: -10px 10px 10px -10px; }
  .contact-card a { font-size: .86rem; }
}