/* Group watch — the screen a leader projects.
 *
 * Dark, wide, and quiet: it's competing with a lit room, and everything on it
 * is meant to be legible from the back. Nothing personal is ever rendered
 * here, so there is no styling for a journal or a roster by design. */
.gw {
  min-height: 100vh; max-width: 92rem; margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-8);
  background: var(--navy-deep); color: #eef2f8;
}

/* Two grounds, one screen. Everything a leader steers with — where you are,
 * what's up, which step — sits on a darker band; what the room is meant to
 * read sits below it on the page's own navy. A projector crushes dark values,
 * so the shade alone can vanish on a cheap one: the gold hairline at the seam
 * is what guarantees the division survives the beam. */
.gw__chrome {
  background: #081226;
  /* Edge to edge, whatever the column does: a band that stops short of the
   * screen reads as a floating panel rather than as the top of the room's
   * view. Pulled to the viewport edges, then padded back so its contents
   * still line up with everything below the seam. */
  margin-inline: calc(50% - 50vw); margin-bottom: var(--sp-6);
  padding: var(--sp-5) max(var(--sp-6), calc(50vw - 46rem + var(--sp-6))) var(--sp-4);
  border-bottom: 1px solid rgba(233,220,195,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.gw__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
/* The mark sits with the group's name, not over it — this row says whose
 * screen this is and which gathering, in that order. */
.gw__id { display: flex; align-items: center; gap: var(--sp-3); }
.gw__logo { height: 3.4rem; width: auto; flex: none; opacity: .92; }
.gw__group { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.gw__meeting { margin: var(--sp-1) 0 0; color: #b9c6d8; }
.gw__sep { margin: 0 .4rem; opacity: .5; }
.gw__held {
  margin-left: var(--sp-2); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #0f2a17; background: #9fe3b4;
  border-radius: 999px; padding: .1rem .5rem;
}
.gw__exit { color: #b9c6d8; font-size: var(--text-sm); }

/* Fixed size and place: it names what's up, and stays put while the steps
 * move underneath it. */
.gw__title {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.6rem);
  margin: var(--sp-4) 0 var(--sp-2); color: #fff; min-height: 1.2em;
}

/* aspect-ratio rather than the padding-top trick: a percentage padding
 * resolves against the container's width, so capping the player's max-width
 * while reading shrank it sideways and left it as tall as the page. */
.gw__player {
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.gw__player iframe, .gw__player > div { width: 100%; height: 100%; border: 0; display: block; }

.gw__episodes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gw__chip {
  color: #cfd9e7; font-size: var(--text-sm); padding: .3rem .7rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
}
.gw__chip.is-on { background: var(--gold); border-color: var(--gold); color: #1a1207; font-weight: 600; }
.gw__next { margin: var(--sp-3) 0 0; color: #b9c6d8; }
.gw__empty { margin-top: var(--sp-6); color: #b9c6d8; }

/* Read from the back of a parish hall, not from a laptop. */
.gw__discussion { margin-top: var(--sp-7); border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--sp-5); }
.gw__discussion h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft); margin: 0 0 var(--sp-4);
}
.gw__discussion ol { margin: 0; padding-left: 1.6rem; }
.gw__discussion li {
  font-family: var(--font-serif); font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  line-height: 1.45; margin-bottom: var(--sp-4); color: #fff;
}

.gw__meetings { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gw__meeting-chip {
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%;
  font-size: var(--text-sm); color: #cfd9e7; border: 1px solid rgba(255,255,255,.22);
}
.gw__meeting-chip.is-held { background: rgba(159,227,180,.18); border-color: rgba(159,227,180,.5); }
.gw__meeting-chip.is-on { background: var(--gold); border-color: var(--gold); color: #1a1207; font-weight: 700; }

body.presentation { background: var(--navy-deep); margin: 0; }
.gw__flash {
  margin: 0; padding: var(--sp-3) var(--sp-6); text-align: center;
  background: rgba(159,227,180,.16); color: #d7f2e0; font-size: var(--text-sm);
}

}

/* Secondary buttons are built for a light page; on the wall they vanish. */
.gw .h2h-btn--secondary {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); color: #eef2f8;
}
.gw .h2h-btn--secondary:hover { background: rgba(255,255,255,.2); }
.gw .h2h-btn--quiet { color: #cfd9e7; }


/* ── The gathering, as steps ───────────────────────────────────────────────
 * The deck's nine slides, under a player that never moves. Watching wants the
 * picture big; praying and talking want the words big, so the player yields
 * rather than disappearing — a cue jump back into it still works. */
.gw__steps { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0; }
.gw__step {
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #cfd9e7;
  border-radius: 999px; padding: .35rem .9rem; font: inherit; font-size: var(--text-sm);
  cursor: pointer;
}
.gw__step:hover { border-color: var(--gold-soft); color: #fff; }
.gw__step.is-on { background: var(--gold); border-color: var(--gold); color: #1a1207; font-weight: 600; }

.gw__movement { margin-top: var(--sp-5); max-width: 62rem; }
.gw__movement h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft); margin: 0 0 var(--sp-4);
}
/* Say this, do that. Four kinds of speech arrive as identical paragraphs, so
 * the closing gets the treatment a missal gives it: the instruction set back
 * as a rubric, Scripture quoted against a gold rule, the citation under it,
 * and the prayer — the words actually said aloud — left as the plain voice. */
.gw__rubric { font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-soft); opacity: .85; }
.gw__rubric p { margin: 0 0 var(--sp-5); }
.gw__scripture { border-left: 3px solid var(--gold); padding-left: var(--sp-5); margin: 0 0 var(--sp-2); }
.gw__scripture p { margin: 0; font-size: clamp(1.3rem, 2.4vw, 2.05rem); font-style: italic; color: #fff; }
.gw__citation { margin: 0 0 var(--sp-5) calc(var(--sp-5) + 3px); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); }
.gw__prayer p { margin: 0 0 var(--sp-3); }
/* The closing prayer gets the opening's mark and its words, so the two read as
 * the same act rather than as a reading and then more text. Floated and
 * filtered exactly as the opening's ornament is — the line art is drawn in
 * black, and without the filter it lands as a black smudge on navy. */
.gw__prayer-block { clear: both; margin-top: var(--sp-5); }
.gw__prayer-block::before {
  content: ""; float: left; width: 2.6rem; height: 2.6rem;
  margin: .35rem var(--sp-4) var(--sp-2) 0;
  background: var(--prayer-mark) center / contain no-repeat;
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.05);
  opacity: .85;
}
.gw__prayer-lead { margin: 0 0 var(--sp-2); font-family: var(--font-sans);
  font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .85; }
/* The opening is the one thing on its step, and a room says it together — so
 * it gets room to breathe and a measure short enough to read in unison,
 * rather than running the full width because nothing stops it. */
/* Wide enough that a paragraph stays a paragraph rather than a column, short
 * enough that the eye finds the next line — a prayer said in unison is read,
 * not scanned. */
.gw__prayer--opening { max-width: none; }
.gw__prayer--opening p { font-size: clamp(1.2rem, 2.1vw, 1.75rem); line-height: 1.6; color: #fff; }

/* A pyramid, built out of its own words. Each tier is a row that widens as it
 * descends, so the shape carries the meaning the deck's triangle carried
 * without anyone having to read a picture. */
.gw__pyramid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  max-width: 60rem; margin: var(--sp-5) auto 0; }
.gw__tier { display: flex; gap: var(--sp-3); justify-content: center; width: 100%; }
.gw__tier-item { flex: 1 1 0; text-align: center; padding: var(--sp-4) var(--sp-3);
  border-radius: var(--radius); background: rgba(255,255,255,.05);
  border: 1px solid rgba(233,220,195,.28); font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem); color: #fff; }
/* No gold fill on the apex. Gold means "you are here" on the step row and on
 * the gathering chips, and a gold block at the top of a pyramid says the same
 * thing about a word that isn't a place you can be. The rows widening as they
 * descend is what makes it a pyramid; the top doesn't need colouring in. */
/* Rooms for rows that grow: a level that gains the words the answer folds in
 * needs width for them, so the silhouette widens rather than the cards
 * squeezing to nothing. */
.gw__tier[data-level="0"] { max-width: 22rem; }
.gw__tier[data-level="0"]:has(.gw__tier-item--joining) { max-width: 30rem; }
.gw__tier[data-level="1"]:has(.gw__tier-item--joining) { max-width: 48rem; }
.gw__tier[data-level="0"] .gw__tier-item { border-color: rgba(233,220,195,.5); font-weight: 700; }
.gw__tier[data-level="1"] { max-width: 42rem; }
/* Playing: the board is there but the words aren't, so the room sees the shape
 * and the category and nothing to read off. */
.gw__pyramid--hidden .gw__tier-item { color: transparent; background: rgba(255,255,255,.03); }
/* Two columns, not a wrapping row: the instructions grow into their own
 * column and the controls stay in the corner. As a flex row they wrapped the
 * moment the left side gained a line, which threw the buttons from the top
 * right to under the text — and pushed the board down with them. */
.gw__board-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: var(--sp-4); max-width: 60rem; margin: 0 auto var(--sp-4); }
/* Space held for the line that appears when the round ends, so the board
 * underneath doesn't rise and fall. */
.gw__board-guide { max-width: 34rem; min-height: 5.4rem; }
.gw__board-how { margin: var(--sp-1) 0 0; font-family: var(--font-sans);
  font-size: var(--text-sm); color: #b9c6d8; }
/* The question the board asks, above the thing it asks about and unmistakably
 * a question — a line of prose in the middle of a screen reads as a caption. */
.gw__board-question { display: flex; align-items: baseline; gap: var(--sp-3);
  max-width: 52rem; margin: 0 auto var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(233,220,195,.28); border-radius: var(--radius);
  background: rgba(255,255,255,.04); text-align: left;
  font-family: var(--font-serif); font-size: clamp(1.1rem, 1.9vw, 1.5rem); color: #fff; }
.gw__board-question__mark { flex: none; font-family: var(--font-sans); font-weight: 700;
  font-size: 1.4em; line-height: 1; color: var(--gold); }
.gw__tier-item--open[disabled] { cursor: default; }
.gw__tier-item--open[disabled]:hover { border-color: rgba(233,220,195,.28); }
.gw__board-category { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gw__board-actions { display: flex; align-items: center; gap: var(--sp-3); justify-self: end; }
/* Spent controls stay in place rather than vanishing — the row a leader is
 * pressing shouldn't rearrange itself under their hand. */
.gw__step[disabled] { opacity: .35; cursor: default; }
.gw__step--complete[disabled] { background: transparent; border-color: rgba(255,255,255,.22);
  color: #cfd9e7; }
.gw__board-clock { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 700;
  color: #cfd9e7; font-variant-numeric: tabular-nums; }
.gw__board-clock.is-done { color: var(--gold); }
/* Before the round: what's about to be counted, said quietly. */
.gw__board-clock.is-waiting { opacity: .45; font-weight: 600; }

/* A block you can press says so quietly — the pyramid still has to read as a
 * pyramid from the back of the room, not as a row of buttons. */
.gw__tier-item--open { cursor: pointer; font: inherit; font-family: var(--font-serif); }
.gw__tier-item--open:hover { border-color: var(--gold); }
.gw__tier-item--open.is-on { background: rgba(233,220,195,.14); border-color: var(--gold); }
.gw__pyramid-note { max-width: 52rem; margin: var(--sp-5) auto 0; text-align: center; }
.gw__pyramid-note h3 { margin: 0 0 var(--sp-2); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); }
.gw__pyramid-note p { margin: 0; font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.5; color: #eef2f8; }

/* The answer's blocks, joining the board they complete. Gold-edged, because
 * these are the ones that weren't there a moment ago — and they arrive rather
 * than appear: the words already up draw in a little to make the room, and the
 * new ones settle in under them. */
.gw__answer { margin-top: var(--sp-3); }
.gw__answer .gw__tier-item,
.gw__tier-item--joining,
.gw__tier-item.is-answer { border-color: var(--gold); background: rgba(233,220,195,.1); }

/* A caption under a pyramid belongs to the pyramid, so it sits under it rather
 * than starting again at the left margin. */
.gw__pyramid-wrap + .gw__movement-body { text-align: center; max-width: 60rem;
  margin: var(--sp-5) auto 0; }

/* The supplements chip earns words rather than a number. */
.gw__meeting-chip--wide { width: auto; padding: 0 .8rem; border-radius: 999px; font-size: var(--text-sm); }

/* The commitments, under the questions they govern. Medium chips: read at a
 * glance from the back, without competing with what's being discussed. */
.gw__commitments { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-6) 0 0; padding: 0; clear: both; }
.gw__commitment { border: 1px solid rgba(233,220,195,.28); border-radius: 999px;
  padding: .45rem 1rem; font-family: var(--font-sans); font-size: var(--text-sm);
  color: #cfd9e7; background: rgba(255,255,255,.03); }
.gw__commitment b { color: var(--gold-soft); }

/* Read from the back of a parish hall, not from a laptop. */
/* A recap, structured the way the closing is: the line that introduces a list
 * is a heading and looks like one; the list is what the room reads. Full width
 * — this is four episodes summarised, not a paragraph. */
.gw__recap { max-width: none; }
/* Two columns, assigned rather than balanced: a recap that runs off the bottom
 * of a projector is a recap nobody reads, and a section arriving shouldn't
 * shuffle the ones already up. */
.gw__recap-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-7); align-items: start; }
@media (max-width: 60rem) { .gw__recap-columns { grid-template-columns: 1fr; } }
.gw__recap-section { margin-bottom: var(--sp-5); }
.gw__recap-body { margin: 0 0 var(--sp-3); font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem); color: #eef2f8; }
.gw__recap-heading { margin: 0 0 var(--sp-3); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); }
.gw__recap-lead { margin: 0 0 var(--sp-5); font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 2rem); color: #fff; }
.gw__recap-list { margin: 0; padding-left: 1.4rem; font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.9vw, 1.55rem); line-height: 1.5; color: #eef2f8; }
.gw__recap-list li { margin-bottom: var(--sp-3); }
/* The line a recap lands on. Boxed and centred, in the gold the headings use:
 * as a bare sentence under two columns of bullets it read as a leftover. */
.gw__recap-closer { max-width: 52rem; margin: var(--sp-6) auto 0; padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(233,220,195,.35); border-radius: var(--radius);
  background: rgba(233,220,195,.07); text-align: center; font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem); color: #fff; }

/* Above the words, and holding its place once there's nothing left to press. */
.gw__recap-more { margin: 0 0 var(--sp-4); min-height: 2.4rem; }

.gw__movement-body { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.1vw, 1.8rem); line-height: 1.5; }
.gw__movement-body p { margin: 0 0 var(--sp-5); }
.gw__movement-body ol, .gw__movement-body ul { margin: 0; padding-left: 1.5rem; }
.gw__movement-body li { margin-bottom: var(--sp-4); }
.gw__movement-body em { color: #cfd9e7; }

/* Reading: the player yields to the words but stays where the eye left it —
 * same left margin as everything else, so a cue jump back into the video
 * doesn't send anyone hunting across the screen. */

/* The words take the place the video had, at the size the video was: this is
 * what the room is reading now, so it gets the stage rather than a column
 * beside one. A finished video is finished — its step is still there to go
 * back to, and the player is hidden rather than removed so it keeps its
 * position. */
/* Room between the steps and what they open — a prayer shouldn't start the
 * moment the pills stop. */
.gw__stage { min-height: 40vh; padding-top: var(--sp-3); }
.gw__stage .gw__movement { margin: 0; max-width: none; }
/* A measure, so a full-width prayer doesn't run to the edges of a projector.
 * With art beside it the column is already the measure, and capping it again
 * only made the text taller for no gain — the words were pushed down the page
 * while space sat empty to their right. */
.gw__stage .gw__movement-body { max-width: 54rem; }
.gw__movement--illustrated .gw__movement-body,
.gw__movement:has(.gw__ornament) .gw__movement-body { max-width: none; }

/* The deck's artwork, kept: a photograph beside the words rather than behind
 * them — that sunset would take the contrast out of serif type on a
 * projector, and legibility is the one thing this screen can't trade. */
/* Floated rather than a column, so a long prayer runs beside the picture and
 * then carries on underneath it. In a grid the words were trapped in their
 * column for the whole movement, riding below the image with the space to
 * its left unused. */
.gw__movement-art { float: right; width: 18rem; margin: 0 0 var(--sp-5) var(--sp-6); }
.gw__movement-art img {
  width: 100%; border-radius: var(--radius-lg); display: block;
  opacity: .85; box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
/* The float has to be cleared or the controls beneath ride up beside it. */
.gw__movement::after { content: ""; display: block; clear: both; }

/* Line art arrives black on transparent, which is invisible on navy. Floated
 * too, so the first line of a prayer starts level with the hands rather than
 * beneath them. */
.gw__ornament {
  float: left; width: 2.6rem; height: auto; margin: .35rem var(--sp-4) var(--sp-2) 0;
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.05);
  opacity: .85;
}
@media (max-width: 62rem) {
  .gw__movement-art { float: none; width: 100%; max-width: 26rem; margin-left: 0; }
}

/* Gatherings sit with the exit rather than under the words — they're
 * navigation, not part of what the room is reading. */
.gw__head-right { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: flex-end; }

/* Marking the gathering done: the last chip in the step row, so the strip a
 * leader ran the gathering from is also where they end it. `display: contents`
 * on the wrapper and the form lets the chips sit in the row's own flex flow
 * rather than nested two boxes deep. */
.gw__done, .gw__done-form { display: contents; }
/* Square corners where the chips are pills: these two do something to the
 * gathering rather than move around inside it, and shouldn't read as one more
 * step you can click by accident. */
.gw__step--complete, .gw__step--undo { border-radius: var(--radius); padding: .35rem 1.1rem; font-weight: 600; }
.gw__step--complete { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.gw__step--complete:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: #fff; }
/* Undo isn't the same act as completing, so it isn't the same colour — slate,
 * which sits back from the crimson without disappearing into the page. */
.gw__step--undo { background: #33415a; border-color: #47597a; color: #dbe4f0; }
.gw__step--undo:hover { background: #47597a; border-color: #5d7199; color: #fff; }
.gw__step--game { text-decoration: none; }

/* The closing screen. Read from across a room, and short enough that nobody
 * has to stay seated for it. */
.gw__closing { text-align: center; max-width: 48rem; margin-inline: auto; padding-top: var(--sp-6); }
/* Not the eyebrow the other movements use — this is the line, so it's set
 * like one: serif, sentence case, big. */
.gw__closing h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700; letter-spacing: normal; text-transform: none; color: #fff;
  margin: 0 0 var(--sp-4); }
.gw__closing-next { font-size: var(--text-xl); margin: 0 0 var(--sp-2); }
.gw__closing-titles { color: #cfd9e7; margin: 0 0 var(--sp-5); }
.gw__closing .gw__step--complete { display: inline-block; text-decoration: none; font-size: var(--text-base); padding: .6rem 1.4rem; }