:root {
  --blue-900: #06192c;
  --blue-800: #0a2540;
  --blue-700: #103257;

  --gold-500: #c0a15b;
  --gold-400: #d6bd83;

  --white: #ffffff;

  --on-dark:       #eaf1f9;
  --on-dark-muted: #a8bdd6;
  --rule-dark:     rgb(255 255 255 / 0.16);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                Georgia, "Times New Roman", serif;

  color-scheme: dark;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 6vw, 3rem);
  background: var(--blue-800);
  color: var(--on-dark);
  font-family: var(--font);
  font-size: clamp(0.975rem, 0.95rem + 0.12vw, 1.0375rem);
  line-height: 1.65;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 2px; }

.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    radial-gradient(90% 70% at 50% 0%, rgb(192 161 91 / 0.16), transparent 65%),
    linear-gradient(168deg, var(--blue-700) 0%, var(--blue-800) 48%, var(--blue-900) 100%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 50%, rgb(0 0 0 / 0.4) 100%);
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: soft-light;
}

.plate {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mark {
  width: clamp(3.25rem, 8vw, 4rem);
  height: auto;
  aspect-ratio: 1;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: 0.005em;
  color: var(--white);
}
.wordmark__rule { width: 1px; height: 0.9em; background: var(--gold-500); opacity: 0.85; }

.rule {
  width: clamp(3rem, 9vw, 4.5rem);
  height: 1px;
  margin-top: 1.75rem;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

.tagline {
  margin-top: 1.75rem;
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--on-dark-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.actions--secondary {
  margin-top: 0.75rem;
  gap: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 5px;
  background: transparent;
  color: var(--on-dark);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease), translate 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover {
  color: var(--gold-400);
  border-color: var(--gold-400);
  background: rgb(255 255 255 / 0.05);
  translate: 0 -1px;
}
.btn:active { translate: 0 0; }

.btn--gold {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--blue-900);
}
.btn--gold:hover {
  border-color: var(--gold-400);
  background: var(--gold-400);
  color: var(--blue-900);
  box-shadow: 0 6px 18px -6px rgb(192 161 91 / 0.65);
}

.btn--quiet {
  padding: 0.55rem 1.1rem;
  border-color: rgb(255 255 255 / 0.10);
  color: var(--on-dark-muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.btn--quiet:hover {
  color: var(--gold-400);
  border-color: rgb(214 189 131 / 0.45);
}

@media (max-width: 26rem) {
  .btn--quiet { padding-inline: 0.8rem; }
  .actions--secondary { gap: 0.4rem; }
}

.btn[aria-expanded="true"]:not(.btn--gold) {
  color: var(--gold-400);
  border-color: var(--gold-400);
}

.panels { width: 100%; max-width: 30rem; }

.panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.js .panel { grid-template-rows: 0fr; }
.js .panel.is-open { grid-template-rows: 1fr; }
.panel__inner { overflow: hidden; }

.panel__card,
.panel__inner > :first-child { margin-top: 0; }

.panel__inner > * { margin-inline: auto; }

.panel__text {
  padding-top: 1.9rem;
  max-width: 34ch;
  color: var(--on-dark-muted);
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.35s var(--ease) 0.08s, translate 0.35s var(--ease) 0.08s;
}
.js .panel:not(.is-open) .panel__text { opacity: 0; translate: 0 -0.4rem; }

.panel__slot {
  min-height: 2.1rem;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--on-dark-muted);
}

.panel__email {
  display: inline-block;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--white);
  text-decoration: none;
  word-break: break-word;
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease), color 0.22s var(--ease),
              opacity 0.35s var(--ease) 0.12s;
}
.panel__email:hover { color: var(--gold-400); background-size: 100% 2px; }
.js .panel:not(.is-open) .panel__email { opacity: 0; }

.foot {
  flex: none;
  width: 100%;
  max-width: 46rem;
  padding-top: 2.5rem;
  font-size: 0.7rem;
  line-height: 1.7;
  color: rgb(168 189 214 / 0.6);
}
.foot__notice { text-wrap: pretty; }
.foot__notice strong { font-weight: 600; color: rgb(214 189 131 / 0.85); }
.foot__copy { margin-top: 0.9rem; letter-spacing: 0.06em; }

@keyframes rise {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes draw {
  from { opacity: 0; scale: 0 1; }
  to   { opacity: 1; scale: 1 1; }
}

.mark, .wordmark, .rule, .tagline, .actions {
  animation: rise 0.8s var(--ease) backwards;
}
.mark     { animation-delay: 0.05s; }
.wordmark { animation-delay: 0.17s; }
.rule     { animation: draw 0.9s var(--ease) 0.3s backwards; }
.tagline  { animation-delay: 0.4s; }
.actions  { animation-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}