@font-face {
  font-family: 'Montserrat';
  src: url('assets/montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --page: #faf9f9;
  --ink: #202020;
  --soft-ink: #292929;
  --desktop-ground: url('assets/ground-desktop-light.webp');
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--page);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; }
.scene {
  position: relative;
  isolation: isolate;
  min-height: 40rem;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 28%, #fff 0%, #faf9f9 72%);
}
.ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ground img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }
.content { position: relative; height: 100%; min-height: inherit; text-align: center; }
.brand { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: 19%; max-width: 340px; height: auto; }
.brand img { display: block; width: 100%; height: auto; }
.announcement { position: absolute; top: 41.6%; left: 0; width: 100%; }
.eyebrow { margin: 0; display: grid; gap: .52em; font-size: clamp(.8rem, 1.15vw, 1.25rem); font-weight: 400; line-height: 1.25; letter-spacing: .39em; text-transform: uppercase; color: var(--soft-ink); }
.eyebrow span { padding-left: .39em; }
h1 { display: flex; align-items: center; justify-content: center; gap: .23em; margin: .08em 0 0; font-family: 'Montserrat', 'Arial Black', Arial, sans-serif; font-size: clamp(3rem, 6.65vw, 8rem); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; }
.word { display: inline-flex; align-items: center; white-space: nowrap; }
.letter-orb { display: inline-block; width: .89em; height: .89em; object-fit: contain; margin: 0 .01em; filter: drop-shadow(0 .10em .075em #3025221c); }
.tagline { display: flex; align-items: center; justify-content: center; gap: 2.2em; margin: 2.2em 1rem 0; font-size: clamp(.65rem, .97vw, 1rem); font-weight: 400; line-height: 1.6; letter-spacing: .34em; text-transform: uppercase; color: var(--soft-ink); }
@media (prefers-color-scheme: dark) {
  :root { --page: #000; --ink: #fafafa; --soft-ink: #e7e7e7; --desktop-ground: url('assets/ground-desktop-dark.webp'); }
  .scene { background: #000; }
  .letter-orb { filter: none; }
}
@media (min-width: 701px) {
  /* Preserve the reference's full-height framing in wide, short browser
     viewports. A single layer avoids seams or duplicated reflections. */
  .ground img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}
@media (min-width: 701px) and (min-aspect-ratio: 16/9) {
  /* One 16:9 stage controls every central measurement. Browser chrome can
     shorten the viewport without allowing width-based type to collide with
     height-based positioning. */
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100vw, 177.7778svh);
    height: min(56.25vw, 100svh);
    min-height: 0;
    transform: translate(-50%, -50%);
  }
  .brand { width: 19%; max-width: none; }
  .eyebrow { font-size: clamp(.8rem, min(1.15vw, 2.0444svh), 1.25rem); }
  h1 { font-size: clamp(3rem, min(6.65vw, 11.8222svh), 8rem); }
  .tagline { font-size: clamp(.65rem, min(.97vw, 1.7244svh), 1rem); }
}
@media (min-width: 701px) and (max-aspect-ratio: 8/5) {
  .brand { top: 14%; }
  .announcement { top: 42%; }
  h1 { margin-top: .18em; }
  .tagline { margin-top: 2.5em; }
}
@media (max-width: 700px) {
  .scene { min-height: 40.625rem; }
  .brand { top: 11.5%; width: 43%; max-width: none; }
  .announcement { top: 34.5%; }
  .eyebrow { gap: .55em; font-size: clamp(.75rem, 2.85vw, 1.25rem); letter-spacing: .35em; }
  h1 { flex-direction: column; gap: 0; margin-top: .15em; font-size: clamp(1rem, 15.5vw, 6.8rem); line-height: .90; }
  .letter-orb { width: .89em; height: .89em; }
  .word { min-height: .90em; }
  .tagline { flex-wrap: wrap; gap: .7em 1.6em; font-size: clamp(.5rem, 2.1vw, .9rem); letter-spacing: .30em; margin: 2.1em .5rem 0; }
  .tagline span { white-space: nowrap; }
  .ground img { bottom: -9%; }
}
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  .brand { top: 9.6%; }
  .announcement { top: 30.7%; }
  h1 { margin-top: .27em; }
  .tagline { margin-top: 2.3em; }
}
@media (min-width: 701px) and (max-width: 1000px) and (orientation: portrait) {
  .brand { width: 30%; }
  h1 { font-size: 9vw; }
  .tagline { font-size: .75rem; gap: 1.5em; }
}