:root{
  --bg:#0b100c;
  --green:#7dff6a;
  --pink:#ff3fa4;
  --tape:#d6c08a;
  --ink:#c8d7c4;
  --foot:#9aaf96;
  --mono:"Share Tech Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;min-height:100%;color:var(--ink)}
body{
  font-family:var(--mono);
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  background:transparent;
}
a{color:var(--green);text-decoration:none}
a:hover,a:focus-visible{color:#fff;text-shadow:0 0 8px var(--green);text-decoration:underline;text-underline-offset:.2em}
a:focus-visible{outline:1px dashed var(--green);outline-offset:3px}

.bg,.bg img{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.bg img{object-fit:cover;object-position:center}

.scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 2px,
    rgba(0,0,0,.12) 2px 3px
  );
  opacity:.35;
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(70,160,70,.08) 0%, rgba(0,0,0,0) 48%),
    linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.35) 100%);
}

main{
  position:relative;
  z-index:3;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3.5rem 1rem 3.25rem;
}

.poster{
  position:relative;
  margin:0;
  max-height:90vh;
  max-width:min(92vw, calc(90vh * 864 / 1152));
  transform:rotate(-1.15deg);
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.7)) drop-shadow(0 0 36px rgba(80,220,90,.22));
}
.poster img{
  display:block;
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:contain;
  background:#1a1814;
  box-shadow:
    0 0 0 1px rgba(255,255,230,.08),
    0 1px 0 rgba(255,255,200,.15);
}

.tape{
  position:absolute;
  width:4.6rem;
  height:1.35rem;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(214,192,138,.82) 0 3px,
      rgba(196,170,112,.7) 3px 6px
    );
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  mix-blend-mode:multiply;
  opacity:.88;
  z-index:2;
  pointer-events:none;
}
.tape-tl{top:-.45rem;left:8%;transform:rotate(-22deg)}
.tape-tr{top:-.35rem;right:9%;transform:rotate(16deg)}

footer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:4;
  text-align:center;
  padding:.55rem .75rem .7rem;
  font-size:clamp(.7rem,.95vw,.85rem);
  letter-spacing:.06em;
  color:var(--foot);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  pointer-events:none;
}
footer p{margin:0}
footer a{pointer-events:auto}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:600px),(max-aspect-ratio:3/4){
  main{padding:2.5rem .7rem 3rem}
  .poster{
    max-width:min(94vw, calc(84vh * 864 / 1152));
    transform:rotate(-0.8deg);
  }
  .poster img{max-height:84vh}
  .tape{width:3.4rem;height:1.05rem}
  footer{font-size:.7rem;letter-spacing:.04em;padding:.45rem .6rem .85rem}
}

@media (prefers-reduced-motion:reduce){
  .poster{transform:none}
}