/* ---------------------------------------------------------------
   front.css — the index page.
   --------------------------------------------------------------- */

/* The backdrop. FIXED so it stays put while the page scrolls -- the panels
   move over it rather than dragging it along.

   z-index 0, NOT -1. body carries an opaque background, and a negative
   z-index put this behind it, which hid the image completely. Sitting at 0
   with the content at 1 keeps it above the body and below everything else.
   pointer-events:none so it never swallows a click. */
.front-backdrop {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.front-backdrop img {
  width: 100%; height: 100%; object-fit: cover;
  /* Was 0.42, which combined with the wash below left the room barely
     visible. The panels are opaque, so the backdrop does not need to be
     dimmed for legibility -- only enough that the hero copy reads. */
  opacity: 0.9;
}
/* A light wash, weighted to the top-left where the headline sits. Was a
   near-solid gradient reaching 94% black, which is what buried the image. */
.front-backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,9,11,0.82) 0%, rgba(9,9,11,0.35) 42%, rgba(9,9,11,0.2) 100%),
    linear-gradient(180deg, rgba(9,9,11,0.1) 0%, rgba(9,9,11,0.35) 100%);
}

.front-hero {
  position: relative;
  z-index: 1;
  min-height: 24rem;
  display: flex; align-items: center;
  margin-bottom: 1.5rem;
}
.front-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 78rem; margin: 0 auto;
  padding: 3rem 1.5rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.front-hero-copy { flex: 1 1 22rem; min-width: 0; }
.front-hero-copy h1 {
  margin: 0.3rem 0 0;
  font-size: clamp(3rem, 2rem + 6vw, 5.5rem);
  line-height: 0.92; text-transform: uppercase;
}
.front-hero-lede { color: var(--muted); max-width: 26rem; margin-top: 1rem; }

/* The next Calling, pinned in the corner. */
.front-next {
  flex: 0 1 22rem;
  border: 1px solid var(--marquee-red);
  /* Darker and less transparent than the panels below: it sits over the
     brightest part of the image, and the countdown has to stay readable. */
  background: rgba(9, 9, 11, 0.68);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding: 1.25rem 1.4rem;
}
/* The whole poster, not a crop of it. object-fit:cover was cutting the ends
   off the show's name. Capped in height so a tall upload can't push the
   countdown off the screen. */
.front-next-poster {
  display: block;
  width: 100%; height: auto;
  max-height: 9rem;
  object-fit: contain; object-position: center;
  border-radius: 2px;
  margin: 0 0 0.9rem;
}
.front-next .kicker { color: var(--marquee-red); margin: 0; }
.front-next h2 {
  font-family: var(--display); font-size: 2.1rem; line-height: 1;
  margin: 0.4rem 0 0.6rem; text-transform: uppercase;
}
.front-next-when { margin: 0; font-size: 0.9rem; }
.front-next-where { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; }
.front-next-label { margin: 1rem 0 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.front-countdown { display: flex; gap: 1.1rem; }
.front-countdown span { display: flex; flex-direction: column; }
.front-countdown b {
  font-family: var(--display); font-size: 1.8rem; line-height: 1; font-weight: 400;
  /* Tabular figures, or the row jitters every second as digits change. */
  font-variant-numeric: tabular-nums;
}
.front-countdown i {
  font-family: var(--mono); font-style: normal;
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.2rem;
}
.front-next-link {
  display: inline-block; margin-top: 1rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---- The four panels ---- */
.front-grid {
  position: relative;
  z-index: 1;
  max-width: 78rem; margin: 0 auto 3rem;
  padding: 0 1.5rem;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.front-panel {
  border: 1px solid var(--border);
  border-radius: 4px;
  /* --elevated, sampled from the mock-up. --surface is a step darker and
     disappeared against the page. Opaque, so the backdrop behind the page
     does not muddy the text. */
  /* Translucent, so the room shows through. --elevated is #1c1c20, given
     here as rgba so the alpha can be set. Backed by a blur: without it the
     detail behind the panel competes with the text on top of it. */
  background: rgba(28, 28, 32, 0.68);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding: 1.4rem 1.5rem;
  min-width: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.front-panel .kicker { margin: 0; }
.front-panel h2 { font-size: 2rem; margin: 0.2rem 0 1rem; text-transform: uppercase; }
.front-empty { color: var(--concrete); font-style: italic; }
.front-more {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* News -- built to mirror the rundown on news.php: a numbered row, the
   headline in the display face with a split fringe, then a mono line of
   date and tag. Same vocabulary, panel-sized. */

/* design2.css aliases --mono to --sans, so var(--mono) is Barlow, not a
   monospace. These rows want a real one, and it has to match the stack in
   wire.css or the front page and the news page will disagree about what a
   date looks like. Change one, change the other. */
.front-news {
  --front-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

.front-news-list { list-style: none; margin: 0; padding: 0; }
.front-news-list li { border-top: 1px solid var(--border); }
.front-news-list li:first-child { border-top: 0; }
.front-news-list a,
.front-news-list a:hover {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.6rem;
  padding: 0.85rem 0;
  text-decoration: none !important;
}
.front-news-list a .front-news-title,
.front-news-list a .front-news-lede,
.front-news-list a .front-news-meta { text-decoration: none; }

/* Spans inside one grid cell, so they have to be told to stack. */
.front-news-item { min-width: 0; }
.front-news-wire,
.front-news-title,
.front-news-meta,
.front-news-lede { display: block; }

.front-news-no {
  font-family: var(--front-mono); font-size: 0.72rem;
  color: var(--concrete); padding-top: 0.15rem;
}

/* What is breaking, said out loud. `.is-wire` used to be set on the title
   and then styled the same as everything else, so a Wire post was flagged
   in the markup and invisible on the page. This is the flag. */
.front-news-wire {
  width: fit-content;
  background: #c61f3b; color: #fff;
  padding: 0.15rem 0.45rem;
  margin-bottom: 0.35rem;
  font-family: var(--front-mono); font-size: 0.56rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.front-news-wire .dot {
  display: inline-block; width: 0.4rem; height: 0.4rem;
  border-radius: 50%; background: #fff;
  margin-right: 0.2rem; vertical-align: 0.02rem;
}

.front-news-title {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: 1.15rem; line-height: 1.1; letter-spacing: 0.02em;
  color: var(--fg);
  text-shadow: -0.6px 0 rgba(53, 200, 232, 0.38), 0.6px 0 rgba(224, 58, 58, 0.33);
  overflow-wrap: anywhere;
}
/* Hover locks the signal in harder rather than turning the title red: the
   fringe is already red on one edge, so an accent-red headline would half
   disappear into its own shadow. */
.front-news-list a:hover .front-news-title {
  color: #fff;
  text-shadow: -0.9px 0 rgba(53, 200, 232, 0.6), 0.9px 0 rgba(224, 58, 58, 0.52);
}

.front-news-meta {
  font-family: var(--front-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--concrete); margin: 0.35rem 0 0;
}
.front-news-lede { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.88rem; }

/* Drop a Marker -- the paper panel from the mock-up. */
/* Sampled from the mock-up. --paper resolves to #f4f0ea, which is the
   body text colour and a touch cooler than the panel actually is. */
/* The paper panel stays paper -- a translucent cream over a dark room turns
   muddy grey. Only its alpha is nudged, not its colour. */
.front-marker {
  background: rgba(239, 230, 214, 0.9);
  color: #14100E;
  border-color: transparent;
}
.front-marker h2 { color: #14100E; }
.front-marker .kicker { color: #6B5F52; }
.front-marker .front-empty { color: #6B5F52; }
.front-marker-note { color: #6B5F52; font-size: 0.9rem; margin: 0 0 1rem; }
/* Links inside a light panel need the dark ink, not the site's red. */
.front-marker a:not(.btn) { color: #14100E; }

/* An ICON */
.front-icon-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.front-icon-title { min-width: 0; }
.front-icon-head h2 { margin: 0.3rem 0 0; }
/* The face fills the panel, with the file laid over it. */
.front-icon-card {
  position: relative;
  display: block;
  min-height: 15rem;
  text-decoration: none;
  overflow: hidden;
}
/* A scrim between the picture and the words, across the whole panel.
   Full-bleed art behind body text is unreadable without one, and darkening
   the image itself instead would just make it muddy. */
.front-panel.has-face::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(20, 20, 24, 0.95) 0%,
    rgba(20, 20, 24, 0.78) 48%,
    rgba(20, 20, 24, 0.42) 100%);
  pointer-events: none;
}
/* Fills the WHOLE panel, edge to edge and behind the heading too. It is a
   child of the panel rather than of the card inside it, so the panel's
   padding no longer shows as a grey border around the picture. */
.front-panel-face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
.front-panel.has-face { position: relative; overflow: hidden; }
/* Everything except the picture sits above it. */
.front-panel.has-face > *:not(.front-panel-face) { position: relative; z-index: 2; }
.front-icon-file { position: relative; z-index: 1; }
/* Shape only, NO colour. The five Morality classes -- honorable, ambiguous,
   ruthless, evil, undeclared -- already exist in design2.css and are added
   alongside this one, so setting a colour here would override all of them
   and every badge would come out grey. */
.front-icon-badge {
  display: inline-block; margin: 0 0 0.4rem;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 2px;
  padding: 0.15rem 0.45rem;
}
.front-icon-nick { margin: 0.15rem 0 0; color: var(--muted); font-style: italic; }
.front-icon-stats, .front-icon-moves {
  display: grid; gap: 0.6rem 1rem; margin: 0 0 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.front-icon-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.front-icon-stats dt, .front-icon-moves dt {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.15rem;
}
.front-icon-stats dd, .front-icon-moves dd { margin: 0; font-size: 0.95rem; }

/* Chatter */
/* Bottom right, out of the way. The panel is a flex column so this can be
   pushed to the foot regardless of how long the post is. */
.front-chatter-nav {
  display: flex; align-items: center; gap: 0.6rem;
  justify-content: flex-end;
  margin-top: auto; padding-top: 1rem;
}
.front-chatter { display: flex; flex-direction: column; }
.front-chatter-window { flex: 1 1 auto; }
.chatter-step {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer;
  width: 2rem; height: 2rem; font-size: 1.1rem; line-height: 1;
}
.chatter-step:hover { border-color: var(--accent); color: var(--fg); }
.front-chatter-count { font-family: var(--mono); font-size: 0.7rem; color: var(--concrete); }
/* Same treatment as the ICON panel opposite: the speaker's face behind
   their own words. */
.front-chatter-item { position: relative; min-height: 15rem; overflow: hidden; }

.front-chatter-body { position: relative; z-index: 1; }
/* index.php does not load chatter.css, so the byline rules it relies on are
   repeated here. Without them the name inherits the site-wide link red and
   the timestamp runs on as body text. */
.front-chatter-body .chatter-meta {
  margin: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.front-chatter-body .chatter-name {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em;
}
.front-chatter-body a.chatter-name:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) {
  color: var(--fg); text-decoration: none;
}
.front-chatter-body a.chatter-name:hover { color: var(--accent); }
.front-chatter-body .chatter-time {
  font-family: var(--mono); font-size: 0.7rem; color: var(--concrete);
}
.front-chatter-text { margin: 0.25rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.front-chatter-stats {
  margin: 0.6rem 0 0;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--concrete);
}

@media (max-width: 900px) {
  .front-grid { grid-template-columns: 1fr; }
  .front-next { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  /* Narrower panel, so the text sits over more of the picture -- it drops
     back to a wash rather than competing with the words. */
  .front-panel-face { opacity: 0.28; }
  .front-icon-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-countdown { gap: 0.8rem; }
}

/* ---- Drop a Marker, on the front page ----
   The panel is light, so the marker controls need dark ink rather than the
   site's usual pale-on-dark. */
.front-marker .marker-nav {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.9rem;
}
.front-marker .marker-step {
  background: none; border: 1px solid rgba(20,16,14,0.3); border-radius: 4px;
  color: #14100E; cursor: pointer;
  width: 1.9rem; height: 1.9rem; line-height: 1; font-size: 1rem;
}
.front-marker .marker-step:hover { border-color: #14100E; }
.marker-nav-label {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #6B5F52;
}
.front-marker .marker-side {
  border-color: rgba(20,16,14,0.22);
}
.front-marker .marker-side.is-picked { border-color: var(--marquee-red); }
.front-marker .marker-side-bar { background: rgba(20,16,14,0.12); }
.front-marker .marker-side-pct,
.front-marker .marker-hint,
.front-marker .marker-shut { color: #6B5F52; }
.front-marker input, .front-marker select {
  background: rgba(255,255,255,0.6); color: #14100E;
  border: 1px solid rgba(20,16,14,0.25); border-radius: 4px;
  padding: 0.35rem 0.5rem; font: inherit;
}
.marker-flash {
  font-family: var(--mono); font-size: 0.72rem;
  padding: 0.4rem 0.6rem; border-radius: 3px;
  background: rgba(20,16,14,0.08); color: #14100E; margin: 0 0 0.8rem;
}
.marker-flash.is-bad { color: var(--marquee-red); }

/* ---- Marker side cards ----
   A photo strip, the side's name, who is in it, and the action -- matching
   the mock-up rather than a row of radio buttons. */
.front-marker .marker-sides {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: 1rem;
}
.front-marker .marker-side {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "photos copy" "bar bar";
  align-items: center; gap: 0.15rem 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(20,16,14,0.22); border-radius: 3px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
}
.front-marker .marker-side:hover { border-color: rgba(20,16,14,0.5); }
.front-marker .marker-side.is-picked {
  border-color: var(--marquee-red);
  background: rgba(255,255,255,0.7);
}
/* Kept in the DOM so the form still posts, but visually hidden -- the card
   is the control. Sized 1px rather than 0 so it remains focusable: a
   zero-size input is skipped by keyboard navigation entirely. */
.front-marker .marker-side input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
/* Focus lands on the hidden radio, so the ring has to be drawn on the card
   around it or keyboard users get no indication at all. */
.front-marker .marker-side:focus-within {
  outline: 2px solid var(--marquee-red); outline-offset: 2px;
}
.marker-side-photos { grid-area: photos; display: flex; gap: 2px; }
.marker-side-photos img,
.marker-side-blank {
  width: 2.6rem; height: 3.4rem; object-fit: cover; object-position: top;
  display: block; border-radius: 2px; background: rgba(20,16,14,0.15);
}
.marker-side-copy { grid-area: copy; min-width: 0; }
.marker-side-lead {
  display: block;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6B5F52;
}
.marker-side-sub {
  display: block; font-weight: 600; color: #14100E;
  /* One line: a long pair of names should truncate rather than reflow the
     card and break the row's alignment. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marker-side-cta {
  display: block; margin-top: 0.2rem;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6B5F52;
}
.marker-side.is-picked .marker-side-cta { color: var(--marquee-red); }
.front-marker .marker-side-bar {
  grid-area: bar; height: 0.25rem; margin-top: 0.45rem;
  background: rgba(20,16,14,0.12);
}
.front-marker .marker-side-pct { display: none; }

/* The wallet, top right of the whole panel. */
.front-marker-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
}
.front-marker-head h2 { margin: 0.2rem 0 0; }
.marker-wallet { margin: 0; text-align: right; flex: 0 0 auto; }
.marker-wallet-label {
  display: block;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6B5F52;
}
.marker-wallet strong {
  font-family: var(--display); font-size: 1.2rem; color: #14100E;
  font-weight: 400;
}