/* ============================================================
   One word, really big.
   Palette + type drawn from an original pulp-print direction.
   ============================================================ */

:root {
  --ink: #11151C;      /* Night Ink   */
  --paper: #F1D7A2;    /* Pulp Cream  */
  --gold: #F2B705;     /* Signal Gold */
  --brick: #A92D32;    /* Brick Red   */
  --press: #214B78;    /* Press Blue  */
  --smoke: #59616B;    /* Smoke Gray  */

  --display: "Anton", "Arial Narrow", "Impact", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 82%, rgba(33, 75, 120, 0.10) 0, transparent 42%),
    radial-gradient(circle at 84% 16%, rgba(242, 183, 5, 0.08) 0, transparent 46%),
    var(--paper);
  color: var(--ink);
  font-family: var(--display);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  width: 100%;
  padding: clamp(0.5rem, 2vw, 2rem);
}

/* The one word. Sized to always fill the width, huge on every screen. */
.word {
  margin: 0;
  font-size: clamp(4rem, 24vw, 34rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0.045em 0.045em 0 var(--gold);
  user-select: all;
  overflow-wrap: break-word;
}

.word::selection {
  background: var(--brick);
  color: var(--paper);
}

@media (max-width: 480px) {
  .word {
    font-size: 22vw;
    text-shadow: 0.05em 0.05em 0 var(--gold);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .word {
    animation: settle 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(0.35em) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}