/* likwest.com — Musaic weekly challenge pages (/musaic/challenge/).
   Loaded on top of landing.css by the pages that tools/musaic-challenges.py
   writes. The first version (cards, chips, a pulsing pill, icon tiles and a
   mono label over every block) read as generated, Marco 2026-11-07. This one
   is a title, a few sentences, the reel beside them and one paragraph on how
   to join. */

/* Room for "A Cappella Attack" on one line beside the reel; the legal-page
   measure of 760px wraps it after two words. */
.c-doc .wrap { max-width: 920px; }

/* ---------------------------------------------------------------- hero */
/* Desktop: text left, reel right across both rows. Phone: title, then the
   reel, then the sentences, so the first screen shows what it is about. */
.c-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "head reel" "body reel";
  column-gap: 56px;
  align-items: start;
}
.c-head { grid-area: head; }
.c-body { grid-area: body; max-width: 34em; }
.c-reel { grid-area: reel; position: relative; margin: 6px 0 0; }
@media (max-width: 720px) {
  .c-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "reel" "body";
  }
  .c-reel { width: min(300px, 78vw); margin: 28px auto 4px; }
}

/* "NEW CHALLENGE · STARTS SUNDAY": challenge.js writes both words from the
   window in data-start / data-end; without JS it says "Weekly challenge". */
.c-eyebrow {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.c-status::before { content: " · "; }
.c-status[data-state="live"] { color: var(--brand); }
/* An inline display rule would beat the hidden attribute. */
.c-status[hidden], .c-tz[hidden], .c-sound[hidden] { display: none; }

.c-doc h1 { margin-top: 10px; font-size: clamp(40px, 5.6vw, 64px); line-height: 0.98; }
.c-doc h1 .c-song { display: block; }
/* The colon is for the title as text (search, screen readers, copy and
   paste); on screen the line break does its job. */
.c-doc h1 .c-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.c-body p { margin: 18px 0 0; font-size: 17px; line-height: 1.58; }
.c-body > p:first-child { margin-top: 26px; }
.c-when time { font-weight: 650; }
.c-tz { display: block; font-size: 13.5px; color: var(--faint); }
.c-body .c-badge { margin-top: 24px; }
.c-badge .store-badge { margin: 0; }

/* ---------------------------------------------------------------- reel */
.c-reel video, .c-reel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background: #000;
  box-shadow: 0 0 0 1px var(--line-soft);
}
.c-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------- how to join */
.v2-doc .c-join { margin-top: clamp(40px, 6vh, 64px); padding-top: 22px; border-top: 1px solid var(--line-soft); }
.c-join h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.c-join p { margin: 8px 0 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; }
.c-join em { font-style: normal; font-weight: 600; }

.c-past { margin: 28px 0 0; font-size: 14px; color: var(--faint); }
.c-past a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }