/* hearth.hankelsner.com — the demo page.
   Loaded AFTER site.css + home.css (both pulled from hankelsner.com so the brand
   stays in one place). This file adds only what the demo page needs that the
   product page did not: the on-air dot on the hero signature, and the four
   entry-point doors. Everything else is inherited. */

/* ---------- the live dot: this page's one moving part ---------- */
body.theater .sig.live { display: flex; align-items: center; gap: 9px; }
body.theater .sig.live .dotlive {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.7);
  animation: onair 2s infinite;
  flex: none;
}

/* ---------- the doors ----------
   Same idea as the two doors on the landing page, but four of them and each one
   opens a live surface rather than another page of copy. */
body.theater .doors2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 34px;
}
body.theater .door2 {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 270px; padding: 26px 28px 24px;
  background: var(--deck); border: 1px solid var(--hair-2); border-radius: 4px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.theater .door2:hover {
  transform: translateY(-3px); border-color: var(--ember);
  box-shadow: 0 18px 50px rgba(255, 122, 26, 0.09);
}
body.theater .door2 .dcode {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--ember);
}
body.theater .door2 .dname {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--chalk);
}
body.theater .door2 .ddesc { color: var(--grey); font-size: 0.98rem; line-height: 1.6; }
body.theater .door2 .ddesc b { color: var(--chalk); font-weight: 600; }
body.theater .door2 .dgo {
  margin-top: auto; align-self: flex-start;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em;
  border: 1.5px solid var(--ember); border-radius: 3px; padding: 9px 15px;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ember);
}
body.theater .door2 .dgo em { font-style: normal; transition: transform 0.15s ease; }
body.theater .door2:hover .dgo { background: var(--ember); color: var(--void); }
body.theater .door2:hover .dgo em { transform: translateX(4px); }

/* The closing block has two buttons here, not one. */
body.theater .closing .backlink {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

@media (max-width: 760px) {
  body.theater .doors2 { grid-template-columns: 1fr; }
  body.theater .door2 { min-height: 0; }
}