:root {
  --paper: #fff6e5;
  --paper-2: #ffeed1;
  --ink: #1b1330;
  --ink-2: #3d2e5c;
  --magenta: #ff4d8d;
  --cyan: #2dd4f0;
  --lime: #b5f23e;
  --sun: #ffd23f;
  --shadow: 0 4px 0 var(--ink), 0 16px 36px rgba(27, 19, 48, 0.18);
  font-family: Nunito, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(27, 19, 48, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(27, 19, 48, 0.06) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
}

.webfront-shell {
  width: min(100%, 720px);
  padding: clamp(28px, 7vw, 64px);
  border: 4px solid var(--ink);
  border-radius: 22px;
  background: var(--paper-2);
  box-shadow: var(--shadow);
  text-align: center;
}

.logo {
  display: block;
  width: min(240px, 72vw);
  height: auto;
  margin: 0 auto 24px;
}

.eyebrow {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

h1 {
  margin: 0;
  font-size: clamp(48px, 10vw, 92px);
  line-height: 0.95;
}

.message {
  max-width: 34rem;
  margin: 18px auto 0;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.4;
}