:root {
  --paper: #0b1f3a;
  --ink: #ffffff;
  --muted: rgba(255,255,255,.78);
  --quiet: rgba(255,255,255,.56);
  --hairline: rgba(255,255,255,.14);
  --cycle: 70s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 24%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #081a33 0%, #0a1d3f 48%, #07152c 100%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.15), transparent 70%);
}

.ambient {
  position: fixed;
  width: 42rem;
  height: 42rem;
  left: 50%;
  top: -25rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  filter: blur(88px);
  pointer-events: none;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 4vw, 54px) clamp(22px, 5vw, 70px) clamp(22px, 3vw, 38px);
}

.hero {
  width: min(980px, 100%);
  margin: auto;
  padding: 8vh 0 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wordmark {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .36em;
  text-indent: .36em;
}

.rule {
  width: 34px;
  height: 1px;
  margin: 24px 0 34px;
  background: rgba(255,255,255,.28);
}

h1 {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: clamp(2.25rem, 4.15vw, 4.55rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 18px rgba(255,255,255,.035);
  white-space: nowrap;
  text-wrap: nowrap;
}

.intro {
  margin: 31px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.75;
  letter-spacing: -.01em;
}

.identity {
  position: relative;
  width: min(520px, 100%);
  height: 28px;
  margin-top: 44px;
}

.identity span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: linear-gradient(90deg, #b68534 0%, #e4bb63 32%, #fff0b7 50%, #e4bb63 68%, #b68534 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  transform: translateY(5px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
}

.identity .fade-up { animation: fadeUp var(--cycle) cubic-bezier(.45,0,.2,1) infinite; }
.identity .slide-left { animation: slideLeft var(--cycle) cubic-bezier(.45,0,.2,1) infinite; }
.identity .slide-right { animation: slideRight var(--cycle) cubic-bezier(.45,0,.2,1) infinite; }
.identity .drop-in { animation: dropIn var(--cycle) cubic-bezier(.45,0,.2,1) infinite; }
.identity .soft-bounce { animation: softBounce var(--cycle) cubic-bezier(.34,1.2,.64,1) infinite; }
.identity .fade-scale { animation: fadeScale var(--cycle) cubic-bezier(.45,0,.2,1) infinite; }

.identity span:nth-child(1)  { animation-delay: 0s; }
.identity span:nth-child(2)  { animation-delay: 5s; }
.identity span:nth-child(3)  { animation-delay: 10s; }
.identity span:nth-child(4)  { animation-delay: 15s; }
.identity span:nth-child(5)  { animation-delay: 20s; }
.identity span:nth-child(6)  { animation-delay: 25s; }
.identity span:nth-child(7)  { animation-delay: 30s; }
.identity span:nth-child(8)  { animation-delay: 35s; }
.identity span:nth-child(9)  { animation-delay: 40s; }
.identity span:nth-child(10) { animation-delay: 45s; }
.identity span:nth-child(11) { animation-delay: 50s; }
.identity span:nth-child(12) { animation-delay: 55s; }
.identity span:nth-child(13) { animation-delay: 60s; }
.identity span:nth-child(14) { animation-delay: 65s; }

@keyframes fadeUp {
  0% {opacity:0;transform:translateY(10px);filter:blur(2px)}
  2.2% {opacity:1;transform:translateY(0);filter:blur(0)}
  5.3% {opacity:1;transform:translateY(0);filter:blur(0)}
  7.1%,100% {opacity:0;transform:translateY(-7px);filter:blur(1.4px)}
}
@keyframes slideLeft {
  0% {opacity:0;transform:translateX(-22px);filter:blur(2px)}
  2.2% {opacity:1;transform:translateX(0);filter:blur(0)}
  5.3% {opacity:1;transform:translateX(0);filter:blur(0)}
  7.1%,100% {opacity:0;transform:translateX(14px);filter:blur(1.2px)}
}
@keyframes slideRight {
  0% {opacity:0;transform:translateX(22px);filter:blur(2px)}
  2.2% {opacity:1;transform:translateX(0);filter:blur(0)}
  5.3% {opacity:1;transform:translateX(0);filter:blur(0)}
  7.1%,100% {opacity:0;transform:translateX(-14px);filter:blur(1.2px)}
}
@keyframes dropIn {
  0% {opacity:0;transform:translateY(-18px);filter:blur(2px)}
  2.2% {opacity:1;transform:translateY(0);filter:blur(0)}
  5.3% {opacity:1;transform:translateY(0);filter:blur(0)}
  7.1%,100% {opacity:0;transform:translateY(9px);filter:blur(1.2px)}
}
@keyframes softBounce {
  0% {opacity:0;transform:translateY(10px) scale(.985);filter:blur(2px)}
  1.5% {opacity:1;transform:translateY(-2px) scale(1.005);filter:blur(0)}
  2.7% {opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  5.3% {opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  7.1%,100% {opacity:0;transform:translateY(-5px) scale(.995);filter:blur(1.2px)}
}
@keyframes fadeScale {
  0% {opacity:0;transform:scale(.965);filter:blur(2px)}
  2.2% {opacity:1;transform:scale(1);filter:blur(0)}
  5.3% {opacity:1;transform:scale(1);filter:blur(0)}
  7.1%,100% {opacity:0;transform:scale(1.018);filter:blur(1.2px)}
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--quiet);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-name {
  color: rgba(255,255,255,.78);
  font-weight: 600;
}

.footer-year {
  white-space: nowrap;
}



::selection {
  background: rgba(255,255,255,.18);
}

@media (max-width: 720px) {
  .hero {
    padding-top: 11vh;
    padding-bottom: 10vh;
  }

  .rule {
    margin-bottom: 30px;
  }

  h1 {
    font-size: clamp(2.55rem, 12.5vw, 4.65rem);
    line-height: .98;
    letter-spacing: -.05em;
    white-space: normal;
    text-wrap: balance;
  }

  .intro {
    max-width: 430px;
    margin-top: 25px;
    font-size: .98rem;
    line-height: 1.65;
  }

  .identity {
    margin-top: 36px;
  }

  .identity span {
    font-size: 12.5px;
    letter-spacing: .13em;
  }
}

@media (max-width: 430px) {
  .page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer {
    font-size: 11px;
    letter-spacing: .1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity span {
    animation: none !important;
    opacity: 0;
    transform: none;
    filter: none;
  }

  .identity span:first-child {
    opacity: 1;
  }
}