/* The front door. It has one job: say what this is, and offer the two rooms.
   Same firelight as the theatre, so the three pages feel like one place. */
:root {
  --ember: #ff9d4d;
  --room: #120e14;
  --card: #1b1520;
  --ink: #f4e9dd;
  --dim: #a3927f;
  --line: rgba(255, 157, 77, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100svh;
  background: var(--room); color: var(--ink);
  font: 16px/1.6 ui-rounded, "Segoe UI", system-ui, sans-serif;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 5vw, 56px) clamp(16px, 5vw, 40px);
  gap: clamp(20px, 4vh, 44px);
}

#hearth { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#hearth .glow {
  position: absolute; left: 50%; bottom: -34vh; transform: translateX(-50%);
  width: 130vmax; height: 88vh;
  background: radial-gradient(ellipse at center,
    rgba(255, 157, 77, .26), rgba(210, 82, 26, .10) 44%, transparent 70%);
  filter: blur(8px);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.04); }
}

header, main, footer { position: relative; z-index: 1; max-width: 980px;
  margin-inline: auto; width: 100%; }

h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 44px); letter-spacing: -.02em; }
.lede { margin: 0; color: var(--dim); font-size: clamp(16px, 2.4vw, 20px);
  max-width: 46ch; }

/* ---- the two doors ---- */
.doors { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.door {
  display: grid; gap: 8px; align-content: start;
  padding: 22px; border-radius: 18px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(255, 157, 77, .06), var(--card));
  border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.door:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 157, 77, .5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.door-icon { font-size: 30px; }
.door-title { font-size: 21px; font-weight: 700; }
.door-title em {
  font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 157, 77, .18); color: var(--ember);
}
.door-note { color: var(--dim); }
.door-go { color: var(--ember); font-weight: 700; }

.what { margin-top: clamp(24px, 5vh, 48px); }
.what h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); font-weight: 700; margin: 0 0 10px; }
.what ul { margin: 0; padding: 0; list-style: none;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.what li { padding: 14px 16px; border-radius: 14px; background: rgba(27, 21, 32, .7);
  border: 1px solid rgba(255, 255, 255, .05); color: var(--dim); }
.what strong { color: var(--ink); }

footer { text-align: center; }
.muted { color: var(--dim); font-size: 13px; }

/* Light rooms exist too: honour them rather than forcing the dark on everyone. */
@media (prefers-color-scheme: light) {
  :root { --room: #fdf7f1; --card: #fff; --ink: #241c26; --dim: #6c5d52;
          --line: rgba(210, 82, 26, .22); }
  .what li { background: #fff; border-color: rgba(0, 0, 0, .06); }
  .door { box-shadow: 0 8px 26px rgba(80, 50, 20, .08); }
}