/* ============================================================================
   THE FORUM — the room with the lights down
   ---------------------------------------------------------------------------
   Owner, 23 September 2026: the Forum should "look and feel superior as the
   content coming from it will be real honest and with a touch of showime and
   magic".

   So: showtime, and not one gram of hype. Those are not in tension here. The
   magic in a venue is not a promise about what is coming — it is the room
   itself, the moment before anything starts, the lights going down. That is
   entirely honest and it is the most theatrical thing there is.

   NOTHING HERE IS A NEW IDENTITY. Every colour is a token already on this site:
   --dusk is the ground the park uses after dark, --gold and --amber are its
   lamps, --on-dark its text, --lamp its glow. The faces are Bitter and IBM Plex,
   already self-hosted in campaign/fonts. A venue that arrived with its own
   palette would look like a different company's page.

   AND IT IS LIT FROM THE PARK'S OWN SUN. styles.css derives --sun-x: 68% from
   park-shop.js's DAWN_X, and says in as many words: "not a texture, a light
   source". Every glow and every raised edge below reads that variable rather
   than picking a direction. If the park's dawn ever moves, this room's lights
   move with it.
   ========================================================================= */

.forum-page{
  /* the screen's own face — darker than the room, as a screen is when it is off */
  --screen:#0A1614;
  --screen-edge:rgba(237,231,218,.10);
  --marquee:var(--gold);
}

/* ---- THE STAGE ---------------------------------------------------------- */
.forum-stage{
  position:relative;
  background:var(--dusk);
  color:var(--on-dark);
  padding:clamp(52px,10vw,110px) 0 clamp(40px,7vw,76px);
  overflow:hidden;
  isolation:isolate;
}
/* HOUSE LIGHT. One wash, from the park's bearing, above the top edge — the
   same key that lights every raised plane on the other forty pages. */
.forum-stage::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:120%;
  background:radial-gradient(60% 70% at var(--sun-x) var(--sun-y),
    rgba(240,200,118,.20) 0%, rgba(232,162,74,.09) 38%, transparent 72%);
  pointer-events:none;z-index:0;
}
.forum-stage > *{position:relative;z-index:1}

.forum-marquee{
  font-family:var(--mono);
  font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-soft);
  display:flex;align-items:center;gap:.7rem;margin:0 0 var(--s3);
}
/* the standby lamp. It breathes, like the jumbotron in the game breathes —
   one tween, no per-frame work, and it stops dead for anyone who asked for
   less motion. */
.forum-lamp{
  /* inline-block, not inline. A <span> is inline by default, which means width,
     height and `margin:auto` are all ignored — the lamp rendered as a
     zero-sized nothing and the standby label sat off-centre beside it. Caught
     by looking at the page rather than at the numbers, which all read fine. */
  display:inline-block;
  width:9px;height:9px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 10px 2px rgba(232,162,74,.55);
  animation:forumBreath 4.5s var(--ease,ease-in-out) infinite;
}
@keyframes forumBreath{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}

.forum-stage h1{
  font-family:var(--serif);
  font-size:clamp(2.6rem,7.5vw,4.6rem);line-height:1.02;letter-spacing:-.02em;
  margin:0;color:var(--on-dark);text-wrap:balance;
  /* the name catches the house light along its top edge, the way every raised
     plane on this site does — down and to the left, because the sun is up and
     to the right */
  text-shadow:0 1px 0 rgba(240,200,118,.22), 0 14px 40px rgba(0,0,0,.45);
}
.forum-stage .lede{
  color:var(--on-dark-soft);max-width:54ch;margin:var(--s4) 0 0;
  font-size:clamp(1.02rem,2.2vw,1.18rem);line-height:1.6;
}

/* ---- THE BILL ----------------------------------------------------------- */
/* THE EDGE OF THE LIGHT. --dusk and --dusk-2 are two points apart (#12211F,
   #14221F), so stage and bill rendered as one undifferentiated slab and the
   page lost its sense of moving from the room to the programme. This is the
   spill where the house light stops — one gradient, on the park's bearing, no
   extra element, and it does the separating that a second colour could not. */
.forum-bill{
  background:var(--dusk-2);color:var(--on-dark);
  padding:clamp(36px,6vw,64px) 0;
  position:relative;
}
.forum-bill::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(240,200,118,.10) 22%,
    rgba(240,200,118,.42) var(--sun-x),rgba(240,200,118,.10) 86%,transparent 100%);
}
.forum-bill .wrap{max-width:var(--maxw)}
.forum-billhead{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--on-dark-soft);margin:0 0 var(--s4);
  padding-bottom:var(--s2);border-bottom:1px solid var(--lamp);
}
.forum-series{margin:0 0 var(--s6)}
.forum-series h2{
  font-family:var(--serif);font-size:clamp(1.55rem,4vw,2.2rem);line-height:1.12;
  margin:0 0 var(--s2);color:var(--on-dark);text-wrap:balance;
}
.forum-by{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 var(--s3);
}
.forum-series .lede{color:var(--on-dark-soft);max-width:var(--measure);margin:0 0 var(--s4)}
/* A series' subtitle and its written course. The course link sits above the
   standby screen on purpose: it is the one thing on the bill a guest can
   actually use tonight. */
.forum-sub{font-family:var(--serif);font-size:1.1rem;color:var(--on-dark);margin:0 0 var(--s3);max-width:var(--measure)}
.forum-course{margin:0 0 var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2)}
.forum-course .btn.forum-stage-btn{min-height:44px;display:inline-flex;align-items:center;background:transparent;color:var(--gold-soft);border:1px solid var(--gold)}
.forum-bynote{font-size:.95rem;color:var(--on-dark);margin:-4px 0 var(--s3);max-width:var(--measure)}
.forum-voice{font-size:.9rem;color:var(--on-dark-soft);margin:0 0 var(--s4)}
/* an audio-only talk: no picture, so no 16:9 box — just the player on the screen's face */
.forum-audio{aspect-ratio:auto!important;padding:var(--s4);background:var(--screen)}
.forum-audio audio{width:100%;display:block}
.forum-course .btn{min-height:44px;display:inline-flex;align-items:center;background:var(--gold);color:var(--dusk);border-color:var(--gold)}
.forum-course .btn:hover,.forum-course .btn:focus-visible{background:var(--gold-soft);color:var(--dusk)}

/* THE HELD MOMENT. An empty programme is not a disabled control and must not
   look like one — there is nothing to press. It is a dark screen with a lamp
   on standby, which is exactly what the room actually is tonight, and is the
   most honest thing this page could possibly show. */
.forum-empty{
  border:1px solid var(--screen-edge);border-radius:14px;
  background:
    radial-gradient(90% 120% at var(--sun-x) -20%, rgba(240,200,118,.10), transparent 60%),
    var(--screen);
  padding:clamp(26px,5vw,40px) clamp(20px,5vw,40px);
  text-align:center;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(237,231,218,.06);
}
.forum-empty .forum-lamp{display:block;margin:0 auto var(--s3)}
.forum-empty p{margin:0;color:var(--on-dark-soft);font-size:1.02rem;max-width:44ch;margin-inline:auto}
.forum-empty .forum-standby{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  /* `margin:0 0 x` would reset the margin-inline:auto this inherits from
     .forum-empty p, and a 44ch block with auto margins killed sits flush LEFT
     in a wide panel while the sentence beneath it centres. It looked correct on
     a phone, where the panel is narrower than the text and the difference
     cannot appear. Only the desktop render showed it. */
  color:var(--gold-soft);margin:0 auto var(--s2);
}

.forum-eps{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));margin-top:var(--s4)}
.forum-ep{margin:0;background:var(--screen);border:1px solid var(--screen-edge);border-radius:14px;overflow:hidden;
  box-shadow:0 16px 44px -24px rgba(0,0,0,.7)}
.forum-ep .vcap{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-soft);padding:var(--s3) var(--s3) 0}
.forum-ep .cap{color:var(--on-dark-soft);padding:var(--s1) var(--s3) var(--s3);margin:0}

.forum-note{color:var(--on-dark-soft);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;margin:var(--s4) 0 0}

/* ---- THE FOYER ---------------------------------------------------------- */
.forum-foyer{background:var(--dusk);color:var(--on-dark);padding:clamp(40px,7vw,76px) 0}
.forum-foyer h2{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 var(--s3);color:var(--on-dark)}
.forum-foyer .lede{color:var(--on-dark-soft);max-width:60ch;margin:0 0 var(--s5)}
.forum-open{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin:0 0 var(--s5)}
.forum-door{
  border:1px solid var(--screen-edge);border-radius:14px;
  padding:var(--s4);
  background:linear-gradient(180deg, rgba(237,231,218,.055), rgba(237,231,218,.02));
  box-shadow:inset 0 1px 0 rgba(240,200,118,.13);   /* the top edge catches the dawn */
}
.forum-door h3{font-family:var(--serif);font-size:1.16rem;margin:0 0 var(--s2);color:var(--gold-soft)}
.forum-door p{margin:0;color:var(--on-dark-soft);line-height:1.58}
.forum-foyer .list-note{color:var(--on-dark-soft);max-width:60ch}
.forum-foyer a,.forum-bill a{color:var(--gold-soft);text-underline-offset:3px}
.forum-foyer a:hover,.forum-bill a:hover{color:var(--on-dark)}

/* ---- and it holds still for anyone who asked ---------------------------- */
@media (prefers-reduced-motion:reduce){
  .forum-lamp{animation:none;opacity:.9}
}