:root {
  --mustard: #a79b34;
  --mustard-dark: #8f852a;
  --ink: #20211f;
  --cream: #efe7cf;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(180deg, #aea03a 0%, var(--mustard) 52%, var(--mustard-dark) 100%);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  padding: 28px;
}

.poster {
  width: min(1120px, 94vw);
  aspect-ratio: 3 / 2;
  background: url("assets/sailfishmachine-hero.png") center / cover no-repeat;
  border-radius: 28px;
  box-shadow: 0 18px 55px rgba(25, 25, 18, .18);
}

.status {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .42em;
  color: rgba(32,33,31,.72);
  padding-left: .42em;
}

@media (max-width: 720px) {
  .hero { padding: 14px; gap: 16px; }
  .poster {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(25, 25, 18, .16);
  }
  .status { font-size: 10px; letter-spacing: .34em; }
}