:root {
  color-scheme: light;
  --color-surface: #ffffff;
  --color-canvas: #f7f9fb;
  --color-primary: #202734;
  --color-secondary: #5f6b7a;
  --color-accent: #007acc;
  --color-rule: #e0e5eb;
  --space-4: 0.5rem;
  --space-8: 1rem;
  --space-12: 1.5rem;
  --space-16: 2rem;
  --space-24: 3rem;
  --space-32: 4rem;
  font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--color-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-24) var(--space-12);
}

.coming-soon {
  width: min(100%, 48rem);
  padding: var(--space-24) 0 var(--space-32);
  border-block: 1px solid var(--color-rule);
  text-align: center;
}

picture {
  display: block;
}

img {
  display: block;
  width: min(16rem, 72vw);
  height: auto;
  margin: 0 auto;
}

.rule {
  width: var(--space-24);
  height: 2px;
  margin: var(--space-24) auto var(--space-16);
  background: var(--color-accent);
}

.eyebrow {
  margin: 0 0 var(--space-12);
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1rem;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 10vw, 6.25rem);
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.message {
  max-width: 32rem;
  margin: var(--space-16) auto 0;
  color: var(--color-secondary);
  font-size: 1rem;
  line-height: 1.625rem;
}

@media (max-width: 34rem) {
  main {
    padding-inline: var(--space-8);
  }

  .coming-soon {
    padding-block: var(--space-16) var(--space-24);
  }
}