/* apps.busyowl.co — /ramtv/demos, "Now preparing" ( templates/pages/demos_ramtv.php ). Hand-written,
   unminified. Loaded after style.css and landing.css. The hero is the demos-page shell from
   style.css (.dm_hero, the same one RKHM's demos page opens with); the sections below borrow the
   landing's .cx primitives: the kicker, the section head and the closer. What is here is the
   page's own: the wall of demo windows, the one-sheets and the intermission.

   The same rules as everywhere else on the site: the brand colour as a fill and --theme_ink as
   type, hairlines rather than boxes, one easing at three speeds, Bebas Neue only where film or a
   poster would set it. */

/* ================================================================= HERO
   The demos themselves on the light demos-page ground: one browser window per demo, a real
   screenshot of its home page, fanned like stills pinned to a board. Each window is a link; on
   hover or focus it straightens and comes forward. The tag under each window carries its number,
   name and model, so the fan reads without the lineup below. */
.tv_wall { position: relative; width: min(100%, 620px); aspect-ratio: 1 / 1; justify-self: end; }
.tv_win {
  --r: 0deg;
  position: absolute; width: 55%;
  display: block;
  border-radius: 12px;
  background: #111216; color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(var(--border), .14), 0 34px 60px -30px rgba(var(--border), .6);
  transform: rotate(var(--r));
  transition: transform var(--t_mid) var(--ease), box-shadow var(--t_mid) var(--ease);
}
.tv_win_1 { --r: -4deg;  left: 0;  top: 3%;    z-index: 1; }
.tv_win_2 { --r: 3.5deg; right: 0; top: 0;     z-index: 2; }
.tv_win_3 { --r: 2.5deg; left: 4%; bottom: 3%; z-index: 3; }
.tv_win_4 { --r: -3deg;  right: 2%; bottom: 0; z-index: 4; }
a.tv_win:hover, a.tv_win:focus-visible {
  z-index: 9;
  transform: rotate(0deg) translateY(-6px) scale(1.04);
  box-shadow: 0 0 0 1px rgba(var(--border), .16), 0 50px 90px -36px rgba(var(--border), .75);
}
a.tv_win:focus-visible { outline: 2px solid rgb(var(--theme_color)); outline-offset: 4px; }

/* The chrome: three lights and an address pill with the demo's own host. */
.tv_win_bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 12px 12px 0 0; background: #1d1e24; }
.tv_win_bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.tv_win_url {
  flex: 1; min-width: 0; margin-left: 8px; padding: 3px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .07);
  font-size: .625rem; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv_win_view { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0 0 12px 12px; background: #1b1c22; }
.tv_win_view img, .tv_win_view svg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* The tag hangs off the window's lower edge, a paper label on the still. */
.tv_win_tag {
  position: absolute; left: 14px; bottom: -14px;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px; background: #fff;
  font-size: .75rem; font-weight: 600; color: rgb(var(--ink));
  box-shadow: 0 0 0 1px rgba(var(--border), .1), 0 10px 24px -12px rgba(var(--border), .55);
  white-space: nowrap;
}
.tv_win_tag b { font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--theme_ink)); }
/* In the fan the top row's labels hang from the upper edge, where no window covers them. */
@media (min-width: 761px) {
  .tv_win_1 .tv_win_tag, .tv_win_2 .tv_win_tag { top: -30px; bottom: auto; }
  .tv_win_2 .tv_win_tag { left: auto; right: 14px; }
}
.tv_win_tag em { font-style: normal; font-weight: 500; color: rgb(var(--ink_faint)); }

/* ================================================================ LINEUP
   One one-sheet per demo: the poster in a lit case, the programme notes beside it. The spread
   alternates sides, so three of them read as a sequence rather than one block three times. */
.tv_lineup { padding: var(--s6) 0; background: rgb(var(--bg)); border-top: 1px solid rgba(var(--border), .08); }
.tv_lineup_foot { margin-top: 96px; }
.tv_bills { display: grid; gap: 120px; }
.tv_bill { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.tv_bill.is_flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.tv_bill.is_flip .tv_case { order: 2; }

/* The case: a dark lightbox in the white page, lit by its own poster. */
.tv_case {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 5 / 4; padding: 44px 44px 60px;
  border-radius: 22px;
  background: rgb(var(--dk)); color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(var(--border), .1), 0 50px 90px -50px rgba(var(--border), .75);
}
.tv_case_glow { position: absolute; z-index: -1; inset: -20%; opacity: .5; filter: blur(64px) saturate(1.4); }
.tv_case_glow svg { display: block; width: 100%; height: 100%; }
.tv_case_poster {
  position: relative; overflow: hidden;
  width: min(44%, 270px); aspect-ratio: 2 / 3;
  border-radius: 5px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 0 0 8px #121217,
    0 0 0 9px rgba(255, 255, 255, .09),
    0 44px 70px -24px rgba(0, 0, 0, .95);
}
.tv_case_poster svg { display: block; width: 100%; height: 100%; }
/* Glass over the poster. */
.tv_case_poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .14), transparent 38%); pointer-events: none; }
/* The snipe: a band across the poster's corner, the oldest "coming soon" there is. */
.tv_snipe {
  position: absolute; z-index: 2; top: 11%; right: -22%; width: 90%;
  padding: 6px 0;
  transform: rotate(40deg);
  background: rgb(var(--theme_ink)); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; white-space: nowrap;
}
.tv_case_shot { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 70px -30px rgba(0, 0, 0, .9); }
.tv_case_shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tv_case_cap {
  position: absolute; left: 0; right: 0; bottom: 16px;
  font-size: .625rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-align: center;
  color: rgba(255, 255, 255, .42);
}
a.tv_case { transition: transform var(--t_mid) var(--ease), box-shadow var(--t_mid) var(--ease); }
a.tv_case:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(var(--border), .1), 0 60px 100px -50px rgba(var(--border), .85); }

/* The notes. */
.tv_bill_body { min-width: 0; }
.tv_bill_head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tv_bill_head::after { content: ""; flex: 1; height: 1px; background: rgba(var(--border), .1); }
.tv_bill_n { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgb(var(--theme_ink)); }
.tv_bill_model { display: inline-flex; align-items: center; gap: 7px; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ink_faint)); }
.tv_bill_model .mdi { font-size: 1rem; line-height: 1; color: rgb(var(--theme_ink)); }
.tv_bill_name {
  margin: 0 0 16px;
  font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400;
  font-size: clamp(4rem, 7.6vw, 6.5rem); line-height: .82; letter-spacing: .015em;
  color: rgb(var(--ink));
}
.tv_bill_text { margin: 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.6; color: rgb(var(--ink_soft)); }

.tv_specs { margin: 30px 0 0; }
.tv_specs > div {
  display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: 12px; padding: 10px 0;
  border-top: 1px solid rgba(var(--border), .08);
  font-size: .875rem;
}
.tv_specs > div:last-child { border-bottom: 1px solid rgba(var(--border), .08); }
.tv_specs dt { color: rgb(var(--ink_faint)); }
.tv_specs dd { margin: 0; min-width: 0; color: rgb(var(--ink)); }
.tv_specs dd.is_tbc { color: rgb(var(--ink_faint)); }
.tv_host { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; color: rgb(var(--ink)); border-bottom: 1px solid rgba(var(--theme_color), .4); overflow-wrap: anywhere; }
.tv_host:hover { border-bottom-color: rgb(var(--theme_color)); }
.tv_host .mdi { font-size: .8em; color: rgb(var(--ink_faint)); }
/* Dashed while provisional — the changelog's beta convention. Solid once it is open. */
.tv_status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 1px 10px 1px 8px;
  border: 1px dashed rgba(var(--theme_color), .6); border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.6;
  color: rgb(var(--theme_ink));
}
.tv_status i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--theme_color)); animation: rx_tally 2.4s var(--ease) infinite; }
.tv_status.is_live { border-style: solid; border-color: rgba(var(--border), .14); color: rgb(var(--ink)); }
.tv_status.is_live i { background: #1f9d57; animation: none; }
.tv_bill_acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }

/* =========================================================== INTERMISSION */
.tv_wait { padding: var(--s6) 0; background: rgb(var(--bg_alt)); border-top: 1px solid rgba(var(--border), .08); }
/* Hairline cells, as the changelog's plugin index draws them. Four links divide evenly into four
   columns and into two, so the grid never ends on a stub. */
.tv_wait_grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(var(--border), .08);
  border: 1px solid rgba(var(--border), .08);
  border-radius: var(--radius); overflow: hidden;
}
.tv_wait_i {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 24px 58px;
  background: rgb(var(--bg)); color: rgb(var(--ink)); text-decoration: none;
  transition: background var(--t_fast) var(--ease), box-shadow var(--t_fast) var(--ease);
}
.tv_wait_i:hover { background: rgb(var(--bg_alt)); box-shadow: inset 0 2px 0 rgb(var(--theme_color)); }
.tv_wait_i > .mdi:first-child { margin-bottom: 8px; font-size: 1.375rem; line-height: 1; color: rgb(var(--theme_ink)); }
.tv_wait_i b { font-size: 1rem; font-weight: 600; letter-spacing: -.012em; }
.tv_wait_i > span:not(.mdi) { font-size: .875rem; line-height: 1.55; color: rgb(var(--ink_soft)); }
.tv_wait_i > i { position: absolute; left: 24px; bottom: 22px; font-size: 1.05rem; line-height: 1; color: rgb(var(--ink_faint)); transition: transform var(--t_fast) var(--ease), color var(--t_fast) var(--ease); }
.tv_wait_i:hover > i { transform: translateX(4px); color: rgb(var(--theme_ink)); }

/* ============================================================ RESPONSIVE */
@media (max-width: 1080px) {
  .tv_bill, .tv_bill.is_flip { gap: 48px; }
  .tv_wait_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .tv_wall { justify-self: start; }
}
@media (max-width: 960px) {
  .tv_bills { gap: 88px; }
  .tv_bill, .tv_bill.is_flip { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tv_bill.is_flip .tv_case { order: 0; }
  .tv_case { aspect-ratio: 4 / 3; }
  .tv_lineup_foot { margin-top: 72px; }
}
@media (max-width: 760px) {
  /* The fan becomes a row of straight windows to swipe through. */
  .tv_wall { width: auto; aspect-ratio: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 30px; scrollbar-width: none; }
  .tv_wall::-webkit-scrollbar { display: none; }
  .tv_win { position: relative; inset: auto; flex: 0 0 min(78%, 340px); width: auto; transform: none; scroll-snap-align: start; }
  a.tv_win:hover, a.tv_win:focus-visible { transform: none; }
}
@media (max-width: 560px) {
  .tv_case { aspect-ratio: auto; padding: 32px 24px 56px; border-radius: 16px; }
  .tv_case_poster { width: min(52%, 220px); }
  .tv_snipe { font-size: .5625rem; letter-spacing: .12em; }
  .tv_specs > div { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .tv_wait_grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tv_win, a.tv_case { transition: none; }
  a.tv_win:hover, a.tv_win:focus-visible { transform: rotate(0deg); }
  .tv_status i { animation: none; }
}