:root { color-scheme: light; --green: #143c2a; --cream: #f5ead7; --orange: #e96016; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b2118; }
body { display: grid; grid-template-rows: 1fr auto; font-family: Georgia, "Times New Roman", serif; }
main { min-height: 0; display: grid; place-items: center; padding: clamp(8px, 1.5vw, 24px); background: radial-gradient(circle at 50% 10%, #315641, #0b2118 68%); }
.poster { margin: 0; width: min(100%, 1600px); line-height: 0; box-shadow: 0 26px 90px rgba(0,0,0,.48); border: 1px solid rgba(245,234,215,.22); }
.poster img { display: block; width: 100%; height: auto; }
footer { min-height: 50px; padding: 10px clamp(16px, 3vw, 40px); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--cream); background: var(--green); font: 600 12px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
footer a { color: var(--cream); text-decoration: none; margin-left: auto; text-transform: lowercase; letter-spacing: .04em; opacity: .78; }
.signal { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(233,96,22,.18); }
@media (max-width: 620px) {
  main { align-content: start; padding: 0; overflow: hidden; }
  .poster { width: 100%; border: 0; box-shadow: none; }
  .poster img { min-height: calc(100vh - 48px); object-fit: cover; object-position: 36% top; }
  footer { position: relative; min-height: 48px; justify-content: flex-start; font-size: 10px; }
  footer a { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .poster { animation: reveal .7s ease-out both; }
  @keyframes reveal { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }
}