:root {
  color-scheme: light;
  --ink: #11120e;
  --paper: #f4efdf;
  --signal: #dfff3f;
  --signal-dark: #c8ea23;
}

* {
  box-sizing: border-box;
}

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

body {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(18px, 4vw, 52px);
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 62%) 0 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(135deg, var(--paper) 0 54%, var(--signal) 54% 100%);
  font-family: "Courier New", Courier, monospace;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  content: "";
  border: 3px solid var(--ink);
  border-radius: 999px;
}

body::before {
  width: min(56vw, 760px);
  aspect-ratio: 1;
  top: -32vw;
  right: -14vw;
  box-shadow: 18px 18px 0 var(--ink);
}

body::after {
  width: min(31vw, 430px);
  aspect-ratio: 1;
  bottom: -20vw;
  left: -7vw;
  background: var(--signal-dark);
}

.poster {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(100%, 1120px);
  min-height: min(74svh, 660px);
  padding: clamp(42px, 8vw, 100px) clamp(24px, 7vw, 88px);
  text-align: center;
  background: rgb(244 239 223 / 88%);
  border: clamp(3px, 0.45vw, 6px) solid var(--ink);
  box-shadow: clamp(10px, 2vw, 24px) clamp(10px, 2vw, 24px) 0 var(--ink);
}

.poster::before {
  position: absolute;
  inset: 13px;
  z-index: -1;
  content: "";
  border: 1px solid var(--ink);
  pointer-events: none;
}

.stamp {
  position: absolute;
  top: clamp(28px, 4vw, 48px);
  right: clamp(28px, 4vw, 48px);
  padding: 8px 11px 6px;
  border: 2px solid var(--ink);
  background: var(--signal);
  font-size: clamp(0.62rem, 1.2vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: rotate(3deg);
}

.wordmark-wrap {
  margin-top: 1rem;
}

h1 {
  margin: 0;
  font-family: "Cooper Black", "Rockwell Extra Bold", Georgia, serif;
  font-size: clamp(4.5rem, 16vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.085em;
  line-height: 0.78;
  text-wrap: nowrap;
}

h1 span {
  color: var(--signal-dark);
  -webkit-text-stroke: 2px var(--ink);
}

.tagline {
  display: inline-block;
  margin: clamp(26px, 4vw, 48px) 0 0;
  padding: 0.28em 0.5em 0.2em;
  color: var(--paper);
  background: var(--ink);
  font-family: "Cooper Black", "Rockwell Extra Bold", Georgia, serif;
  font-size: clamp(1.35rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  transform: rotate(-1deg);
}

.incoming {
  position: absolute;
  bottom: clamp(33px, 5vw, 58px);
  margin: 0;
  font-size: clamp(0.72rem, 1.7vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .poster {
    min-height: 76svh;
    box-shadow: 9px 9px 0 var(--ink);
  }

  .stamp {
    top: 30px;
    right: 28px;
  }

  h1 {
    font-size: clamp(3.65rem, 19vw, 6.8rem);
  }

  .tagline {
    font-size: clamp(1.15rem, 6vw, 1.8rem);
  }

  .incoming {
    max-width: calc(100% - 70px);
    justify-content: center;
    letter-spacing: 0.06em;
    line-height: 1.4;
  }
}