* {
  box-sizing: border-box;
}

:root {
  --ink: #101010;
  --paper: #f7f3e8;
  --faint: rgba(16, 16, 16, 0.68);
  --frame: rgba(16, 16, 16, 0.22);
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.45), transparent 58%),
    linear-gradient(135deg, #151515, #050505);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 4rem);
}

.poster {
  width: min(94vw, 980px);
  min-height: min(94vh, 1380px);
  padding: clamp(1.25rem, 4vw, 4.5rem);
  background:
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0)),
    repeating-linear-gradient(
      0deg,
      rgba(16,16,16,0.025),
      rgba(16,16,16,0.025) 1px,
      transparent 1px,
      transparent 5px
    ),
    var(--paper);
  border: 1px solid var(--frame);
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.55),
    inset 0 0 0 0.55rem rgba(16, 16, 16, 0.035),
    inset 0 0 0 0.7rem rgba(255, 255, 255, 0.45);
  text-align: center;
}

.kicker {
  margin: 0 0 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.7rem, 1.2vw, 0.95rem);
  color: var(--faint);
}

h1 {
  margin: 0;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.title-line {
  display: block;
  font-size: clamp(2.45rem, 8vw, 6.5rem);
  font-weight: 900;
}

.title-small {
  display: block;
  margin: 0.55rem 0 0.45rem;
  font-size: clamp(0.85rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.55em;
  color: var(--faint);
}

.quack {
  letter-spacing: 0.04em;
}

.ascii-art {
  display: inline-block;
  max-width: 100%;
  margin: clamp(1rem, 2.5vw, 2.4rem) auto 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  font-size: clamp(0.18rem, 0.72vw, 0.47rem);
  line-height: 0.82;
  letter-spacing: 0;
  white-space: pre;
  text-rendering: geometricPrecision;
}

.tagline {
  margin: clamp(1.1rem, 3vw, 2.1rem) auto 0;
  max-width: 48rem;
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.credits {
  margin: clamp(1.25rem, 3vw, 2.4rem) auto 0;
  padding-top: clamp(0.9rem, 2vw, 1.5rem);
  border-top: 1px solid var(--frame);
  max-width: 48rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.68rem, 1.1vw, 0.9rem);
  line-height: 1.5;
}

.credits p {
  margin: 0.2rem 0;
}

.credits strong {
  color: var(--ink);
}

.url {
  color: var(--ink);
  font-weight: 800;
}

@media (max-width: 620px) {
  .poster {
    width: 100%;
    min-height: auto;
  }

  .ascii-art {
    font-size: clamp(0.12rem, 1.05vw, 0.3rem);
  }
}

@media print {
  html,
  body {
    background: #fff;
  }

  .page {
    padding: 0;
  }

  .poster {
    width: 100%;
    min-height: 100vh;
    box-shadow: none;
    border: 0;
  }
}