/* Single-screen placeholder styled after 1920s signage. Palette is sampled from
   the artwork (lounge.webp): near-black room, lamp-cream text, whiskey-gold
   secondary text, and the phosphor green of the logo (icon.svg).
   Limelight is the deco marquee face for the name; Josefin Sans is the geometric
   sans for everything else. Both are SIL OFL fonts, self-hosted from fonts/. */
@font-face {
  font-family: "Limelight";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/limelight-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/josefin-sans-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/josefin-sans-italic.woff2") format("woff2");
}

:root {
  --room: #060506;
  --lamp: #ecdcbc;
  --gold: #c9a24f;
  --phosphor: #41ff00;
  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html { background: var(--room); }

body {
  min-height: 100svh;
  background: var(--room);
  color: var(--lamp);
  font-family: "Josefin Sans", "Century Gothic", "Avenir Next", Futura, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4vh, 44px);
  padding-block: 4vh;
}

/* The artwork keeps its 2000:669 proportions on wide screens and crops toward
   the players on narrow ones. Every edge dissolves into the page background. */
.room {
  display: block;
  width: 100%;
  height: clamp(300px, 33.45vw, 72svh);
  object-fit: cover;
  object-position: 62% 50%;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
  animation: lights-up 2.4s ease-out both;
}

.plate {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  padding-inline: var(--gutter);
}

.mark { flex: none; width: clamp(44px, 5vw, 56px); height: auto; }

h1 {
  font-family: "Limelight", "Bodoni MT", Didot, Georgia, serif;
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.tagline {
  margin-top: 0.7em;
  font-size: clamp(0.8rem, 1.25vw, 0.95rem);
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
}

.tagline span { display: block; }

.line {
  margin-top: 0.9em;
  color: var(--gold);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.35em;
  vertical-align: -0.12em;
  background: var(--phosphor);
  animation: blink 1.1s steps(1) infinite 2.4s;
}

@keyframes lights-up {
  from { opacity: 0; filter: brightness(0.3); }
  to   { opacity: 1; filter: none; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .room, .cursor { animation: none; }
}

.line a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.line a:hover { color: var(--lamp); }

.line a:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 4px;
}