:root {
  color-scheme: dark;
  --ink: #100d12;
  --ink-soft: #171219;
  --paper: #f7f1e9;
  --muted: #aaa1a9;
  --pink: #ec2c72;
  --pink-light: #ff679c;
  --gold: #d8b987;
  font-family: "DM Sans", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
}

a {
  color: inherit;
}

.hero {
  position: relative;
  min-height: 800px;
  overflow: hidden;
  background: #100d12;
}

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 7.3vw, 112px);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.wordmark,
.topbar-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark {
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.wordmark-light {
  color: #a89da6;
  font-weight: 500;
}

.wordmark-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--pink);
  color: var(--pink-light);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 20px;
  font-weight: 800;
  transform: skew(-8deg);
}

.topbar-link {
  gap: 9px;
  color: #d5cbd2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink-light);
  box-shadow: 0 0 12px var(--pink);
}

.hero-content {
  position: relative;
  display: flex;
  width: min(100% - 48px, 1256px);
  min-height: 670px;
  align-items: center;
  margin: 0 auto;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(60%, 690px);
  padding: 66px 0 74px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  color: var(--pink-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.eyebrow > span {
  width: 22px;
  height: 1px;
  background: var(--pink);
}

h1,
h2 {
  margin: 0;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(66px, 8vw, 112px);
  line-height: 0.91;
}

h1 em,
h2 em {
  color: var(--pink-light);
  font-style: normal;
}

.intro {
  max-width: 430px;
  margin: 25px 0 30px;
  color: #c5bbc4;
  font-size: 14px;
  line-height: 1.8;
}

.intro strong {
  color: var(--paper);
  font-weight: 600;
}

.countdown-panel {
  max-width: 555px;
  padding: 19px 21px 15px;
  border: 1px solid rgb(255 255 255 / 13%);
  background: linear-gradient(130deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%));
  box-shadow: 0 18px 60px rgb(0 0 0 / 18%);
  backdrop-filter: blur(6px);
}

.countdown-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #e7dce4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.heading-dash {
  width: 15px;
  height: 1px;
  background: var(--pink-light);
}

.release-date {
  margin-left: auto;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.release-date i {
  color: var(--pink-light);
  font-style: normal;
}

.timer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0 13px;
}

.time-unit {
  display: flex;
  min-width: 55px;
  flex-direction: column;
  gap: 3px;
}

.time-value {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(39px, 5vw, 57px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 0.95;
}

.time-label {
  color: #a99fa8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.time-separator {
  padding-top: 2px;
  color: var(--pink);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 38px;
  line-height: 0.9;
}

.countdown-footnote {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid rgb(255 255 255 / 9%);
  color: #9e949e;
  font-size: 10px;
  letter-spacing: 0.015em;
}

.portrait {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: -42px;
  display: flex;
  width: min(54%, 620px);
  height: calc(100% - 18px);
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.portrait img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.82) contrast(1.03);
  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 92%,
      rgb(0 0 0 / 94%) 96%,
      rgb(0 0 0 / 70%) 98%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 20% 32% at 0% 84%,
      transparent 0%,
      transparent 12%,
      rgb(0 0 0 / 38%) 48%,
      #000 100%
    );
  mask-composite: intersect;
}

.portrait-caption {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: 12%;
  display: grid;
  gap: 5px;
  justify-items: end;
  color: #f8edf2;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 16px #000;
}

.caption-line {
  width: 34px;
  height: 2px;
  margin-bottom: 3px;
  background: var(--pink);
}

.caption-subtitle {
  color: #dbc9d5;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.hero-watermark {
  position: absolute;
  top: 45px;
  right: 4%;
  color: rgb(255 255 255 / 2%);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 430px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

@media (min-width: 1440px) {
  .hero-content {
    min-height: 735px;
  }

  .hero {
    min-height: 865px;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 745px;
  }

  .hero-content {
    min-height: 610px;
  }

  .hero-copy {
    width: 70%;
  }

  .portrait {
    right: -15%;
    width: 61%;
    opacity: 0.76;
  }

  .portrait-caption {
    right: 6%;
  }

  .hero-watermark {
    right: -3%;
    font-size: 360px;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 820px;
  }

  .topbar {
    min-height: 70px;
    padding: 0 20px;
  }

  .wordmark {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.11em;
  }

  .wordmark-mark {
    width: 27px;
    height: 27px;
    font-size: 17px;
  }

  .topbar-link {
    gap: 7px;
    font-size: 8px;
  }

  .hero-content {
    width: calc(100% - 40px);
    min-height: 750px;
    align-items: flex-start;
  }

  .hero-copy {
    width: 100%;
    padding: 51px 0 89px;
  }

  .eyebrow {
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.13em;
  }

  h1 {
    font-size: clamp(61px, 15vw, 83px);
  }

  .intro {
    max-width: 335px;
    margin: 17px 0 22px;
    font-size: 12px;
  }

  .countdown-panel {
    position: relative;
    z-index: 2;
    padding: 15px 13px 12px;
  }

  .countdown-heading {
    gap: 6px;
    font-size: 8px;
  }

  .release-date {
    font-size: 8px;
  }

  .timer {
    padding: 15px 0 12px;
  }

  .time-unit {
    min-width: 42px;
  }

  .time-value {
    font-size: clamp(34px, 10vw, 48px);
  }

  .time-label {
    font-size: 7px;
  }

  .time-separator {
    font-size: 29px;
  }

  .countdown-footnote {
    font-size: 9px;
  }

  .portrait {
    top: auto;
    right: -22%;
    bottom: -5px;
    width: 91%;
    height: 54%;
    opacity: 0.6;
  }

  .portrait-caption {
    right: 13%;
    bottom: 13%;
    font-size: 14px;
  }

  .hero-watermark {
    top: 270px;
    right: -12%;
    font-size: 290px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}