/* ---------------------------------------------------------------
   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 logo, at the size the old splash page gave it. Bounded on both axes:
   a logo is a fixed drawing, and letting it run to the column width makes it
   the loudest thing on a page that also has two show boxes on it. */
.front-logo {
  display: block;
  width: auto;
  max-width: min(100%, 30rem);
  max-height: 11rem;
  height: auto;
  /* The artwork has its own red glow. A drop shadow underneath separates it
     from the hero photograph without competing with that. */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8));
}

.front-tagline {
  margin: 1.4rem 0 0;
  font-family: var(--display);
  /* Sized to fit the phrase on ONE line in the hero column.
     Measured: the column is about 432px at desktop and 342px on a phone,
     and the line runs about 402px at 1.5rem and 308px at 1.15rem. The upper
     bound is what fits the wide case, the lower what fits the narrow one.
     Wrapping is left possible on purpose -- at some width something has to
     give, and two lines is better than a line running off the side. */
  font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 2px 8px #000, 0 0 20px rgba(0, 0, 0, 0.85);
  max-width: 30rem;
}

/* The two show boxes, held together so they can be the same height.
   align-items:stretch is on THIS, not on .front-hero-inner: stretching them
   against the hero would measure them against the headline. */
.front-shows {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  flex: 0 1 46rem;
  flex-wrap: wrap;
}

/* The next Calling, pinned in the corner. */
.front-next {
  flex: 1 1 20rem;
  /* A column, so the link can be pushed to the bottom. Equal heights would
     otherwise leave the shorter box's link floating in the middle of its
     own empty space. */
  display: flex;
  flex-direction: column;
  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;
  /* A FIXED height, not a max. The two posters are different shapes, so a
     max-height only caps the taller one and leaves the shorter sitting at
     its own size -- which is why the Gathering and the Calling did not
     line up. object-fit:contain keeps each poster's proportions inside the
     same box, so neither is stretched. */
  width: 100%; height: 7rem;
  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 {
  /* margin-top:auto pins it to the bottom of the box, so the two links line
     up with each other however much copy sits above them. align-self keeps
     the link the width of its own text rather than the whole column, or the
     hover target would run the full width. */
  align-self: flex-start;
  margin-top: auto; padding-top: 1rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* The show that just happened, beside the one that is coming.
   Reuses .front-next for its shape, so the two are the same object and
   cannot drift apart; only what separates them is set here.

   Outlined in the Drop a Marker paper rather than red. Red already means
   "next" on this page, so the pair read as the same object in two colours:
   one border says what is coming, the other says what has been. The panel
   itself stays dark like everything else in the hero. */
.front-last { border-color: rgba(239, 230, 214, 0.9); }
.front-last .kicker { color: var(--concrete); }
/* The four-:not() chain from design2.css, or the site-wide link rule
   (0,4,1) outscores a plain .front-last .front-next-link (0,2,0) and this
   link stays accent red like the one in the box next to it. */
/* The link takes the border colour, so the box is one idea rather than a
   cream edge round a red link. */
.front-last a.front-next-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: rgba(239, 230, 214, 0.9); }
.front-last a.front-next-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--marquee-red); }
.front-last-blurb {
  margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5;
}

/* Three across is too many at this width. The hero copy takes the row and
   the two shows sit side by side underneath it, still matched in height. */
@media (max-width: 78rem) {
  .front-hero-copy { flex: 1 1 100%; }
  .front-shows { flex: 1 1 100%; }
}

/* ---- 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));
}

/* FIVE panels in a two-column grid leaves one of them alone on the last
   row, which reads as a mistake rather than a choice. The Log takes the
   full width instead, so the rows come out News | Marker, ICON | Chatter,
   then the Log across the bottom.
   
   It is the right one to widen: it is a list of single lines, so a wide box
   costs it nothing and the two-column label-and-line layout has more room
   to breathe. Chatter pairs with the ICON panel above it, which is the
   shape it was built for. */
.front-log { grid-column: 1 / -1; }

@media (max-width: 52rem) {
  /* One column here anyway, so spanning means nothing. */
  .front-log { grid-column: auto; }
}
.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 name is a link now. It should still read as the panel's heading, so
   it takes the h2's colour rather than the site link colour -- which means
   repeating design2.css's four-:not() chain to outscore it. Colour change
   on hover is the only cue; no underline anywhere on the site now. */
a.front-icon-name-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) {
  color: inherit;
  text-decoration: none;
}
a.front-icon-name-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover {
  color: var(--accent);
}
/* 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;
}