:root {
  --bg: #020b13;
  --shell: #031523;
  --panel: #06243b;
  --panel-2: #031827;
  --gold: #d8a64b;
  --gold-2: #f0c86b;
  --text: #f4f7f2;
  --muted: #b6c4ca;
  --line: rgba(216, 166, 75, 0.58);
  --line-b: rgba(122, 177, 205, 0.28);
  --shadow: 0 1rem 3rem rgba(0, 0, 0, 0.32);
  --radius: 0.8rem;
  --max: 76rem;
  --s-1: 0.35rem;
  --s-2: 0.65rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --t-heading-3: 700 clamp(1.2rem, 1rem + 0.7vw, 1.65rem)/1.2 "Arial Narrow", Arial, Helvetica, sans-serif;
}

/* Responsive containment required by the system-browser release audit. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body .container,
body .stage,
body .stage > *,
body .invitation,
body .invitation > *,
body .u-status,
body .action-row,
body .action-row > *,
body .footer-grid,
body .footer-grid > * {
  min-width: 0;
  max-width: 100%;
}

body h1,
body h2,
body h3,
body p,
body a,
body li,
body span {
  overflow-wrap: anywhere;
}

body .btn {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 48rem) {
  body .stage {
    grid-template-columns: minmax(0, 1fr);
  }
}
