:root {
  color-scheme: light;
  --paper: #eee;
  --ink: #303030;
  --blue: #4ea8de;
  --ground: var(--paper);
  --text: var(--ink);
  --glass: rgb(238 238 238 / 86%);
  --solid: #eee;
  --edge: rgb(255 255 255 / 82%);
  --shade: rgb(48 48 48 / 15%);
  --accent: rgb(78 168 222 / 50%);
  --spring: linear(0, .42 16%, .89 34%, 1.055 53%, 1.014 75%, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ground: #191919;
    --text: var(--paper);
    --glass: rgb(25 25 25 / 82%);
    --solid: #303030;
    --edge: rgb(238 238 238 / 24%);
    --shade: rgb(0 0 0 / 42%);
    --accent: var(--blue);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #191919;
  --text: var(--paper);
  --glass: rgb(25 25 25 / 82%);
  --solid: #303030;
  --edge: rgb(238 238 238 / 24%);
  --shade: rgb(0 0 0 / 42%);
  --accent: var(--blue);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.page {
  width: min(100%, 1540px);
  min-height: 100vh;
  min-height: 100svh;
  margin: auto;
  padding: 0 clamp(16px, 5.5vw, 88px);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.masthead, .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.masthead { padding: clamp(20px, 4vw, 56px) 0 12px; }
.wordmark {
  display: inline-flex;
  gap: .65rem;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.name { font-size: clamp(30px, 4vw, 45px); font-weight: 760; letter-spacing: -.09em; line-height: 1; }
.edition { font-size: .8rem; font-weight: 650; white-space: nowrap; }

.glass {
  background: var(--solid);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 1px var(--edge), 0 16px 44px var(--shade);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }
  :root[data-theme="light"] .invitation {
    background: linear-gradient(90deg, var(--glass) 72%, rgb(238 238 238 / 49%));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
}
.theme button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: inherit;
  transition: transform 350ms ease, transform 350ms var(--spring), background-color 240ms ease;
}
.theme[hidden] { display: none; }
.theme svg { width: 16px; height: 16px; }
.theme button[aria-pressed="true"] {
  background: var(--shade);
  border-color: var(--edge);
  box-shadow: inset 0 1px 2px var(--edge);
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  min-height: clamp(550px, 52vw, 745px);
}
.chrome { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.sphere {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 21px 18px var(--shade));
  animation: settle 850ms cubic-bezier(.2,.75,.25,1) both;
}
.sphere-main { width: min(46vw, 640px); right: 1%; top: 5%; --shift: 18px; --turn: -21deg; }
.sphere-back { width: min(26vw, 360px); right: 37%; top: 2%; --shift: 9px; --turn: 35deg; }
.sphere-front { width: min(23vw, 315px); right: 2%; bottom: 4%; --shift: 25px; --turn: 130deg; }
@keyframes settle {
  from { transform: translateY(var(--shift)) rotate(calc(var(--turn) + 4deg)); }
  to { transform: translateY(0) rotate(var(--turn)); }
}

.invitation {
  width: min(100%, 640px);
  margin: 34px 0;
  padding: clamp(24px, 4.2vw, 62px);
  border-radius: clamp(26px, 3vw, 48px);
}
h1 {
  margin: 0;
  font-size: clamp(38px, 5.65vw, 83px);
  font-weight: 690;
  letter-spacing: -.075em;
  line-height: 1.02;
}
.intro {
  max-width: 42ch;
  margin: 25px 0 30px;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.58;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 25px;
  min-height: 54px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 2px 1px rgb(255 255 255 / 50%), 0 6px 13px var(--shade);
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 400ms ease, transform 400ms var(--spring), box-shadow 220ms ease;
}
.cta:disabled {
  cursor: default;
  background: var(--solid);
  color: var(--text);
  border-color: var(--edge);
  box-shadow: inset 0 1px 1px var(--edge);
}
@media (hover: hover) {
  .cta:any-link:hover, .theme button:hover { transform: translateY(-2px); }
}
.cta:any-link:active, .theme button:active { transform: translateY(1px) scale(.97); transition-duration: 90ms; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 5px; }
#survey-note { margin: 12px 0 0; font-size: .875rem; line-height: 1.45; }
.footer {
  padding: 20px 0 27px;
  border-top: 1px solid var(--shade);
  font-size: .82rem;
  line-height: 1.4;
}
.footer span:first-child { font-weight: 650; }

@media (max-width: 980px) {
  .invitation { width: min(100%, 570px); }
  .sphere-main { top: 13%; right: -4%; width: min(57vw, 580px); }
  .sphere-back { right: 33%; }
  .sphere-front { top: calc(13% + 40vw); right: 3%; bottom: auto; }
}
@media (min-width: 981px) {
  .sphere-back { right: 41%; }
}
@media (max-width: 650px) {
  .masthead { gap: 10px; }
  .wordmark { gap: .45rem; }
  .hero { min-height: auto; padding-top: clamp(136px, 38vw, 218px); }
  .invitation { margin: 0 0 24px; }
  .desktop-break { display: none; }
  .chrome { inset-inline: calc(-1 * clamp(16px, 5.5vw, 88px)); }
  .sphere-main { top: 10px; right: 8%; width: 57vw; }
  .sphere-back { top: 31px; right: 50%; width: 37vw; }
  .sphere-front { top: 101px; right: -4%; bottom: auto; width: 29vw; }
  .intro { margin: 18px 0 22px; }
  .footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 360px) {
  .sphere-front { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sphere { transform: rotate(var(--turn)); }
  .cta:any-link:hover, .cta:any-link:active, .theme button:hover, .theme button:active { transform: none; }
}