/* Library home ("The Cenacle Library") — ported from the design system's
 * library.html preview. Streaming-style hub: hero, rows, series, people. */
.ml-hero { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; }
.ml-hero__art { position: absolute; inset: 0; }
.ml-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; opacity: .85; }
.ml-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-deep) 8%, rgba(13,31,58,.7) 42%, rgba(13,31,58,.15) 100%); }
.ml-hero__inner { position: relative; z-index: 2; max-width: 82rem; margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
.ml-hero__col { max-width: 34rem; }
.ml-tag { display: inline-block; font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-deep); background: var(--gold); padding: .3rem .8rem; border-radius: 999px; margin-bottom: var(--sp-4); }
.ml-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
.ml-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.ml-hero__lead { font-size: var(--text-lg); color: #e9eef5; margin: 0 0 var(--sp-5); }
.ml-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ml-hero__meta { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); font-size: var(--text-sm); color: #c7d2e2; }
.ml-hero__meta b { color: var(--gold-soft); font-weight: 600; }
.ml-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); padding: .75rem 1.5rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.45); color: #fff; text-decoration: none; }
.ml-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.ml-btn-ghost--ink { border-color: var(--line-strong); color: var(--ink); }
.ml-btn-ghost--ink:hover { background: var(--mist); border-color: var(--navy); color: var(--navy); }

/* ---- Hero directions -------------------------------------------------------
 * Six alternates to the Ignatius art, chosen on the page rather than from a
 * mock (SiteSetting.hero_variant; HeroVariant knows which have their art yet).
 * Each one keeps .ml-hero__inner / __col / the words, and changes only the
 * ground it stands on. */

.ml-hero__inner--split { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--sp-7); align-items: center; }

/* Typographic — no photograph; a wash of colour and the mark. */
.ml-hero--typo::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 88% 15%, rgba(124,0,0,.55), transparent 60%),
              radial-gradient(60% 100% at 10% 90%, rgba(181,143,77,.28), transparent 65%); }
.ml-hero__rules { position: absolute; inset: 0; opacity: .16;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.5) 22px 23px); }
.ml-hero__mark { justify-self: center; text-align: center; }
.ml-hero__mark img { width: 11rem; height: auto; opacity: .95; }
.ml-hero__mark p { font-family: var(--font-serif); font-style: italic; color: var(--gold-soft);
  font-size: var(--text-base); margin: var(--sp-3) 0 0; line-height: 1.5; }

/* Mural — cropped off-centre so the left stays quiet enough to read against. */
.ml-hero__art--mural img { object-position: 38% 34%; opacity: 1; }
/* 34% rather than centre: the band is much wider than the photograph is
 * tall, so a centred crop takes a strip through the middle and cuts the
 * halo off at the top of the frame. */
.ml-hero--mural .ml-hero__art::after {
  background: linear-gradient(90deg, rgba(9,20,40,.96) 22%, rgba(9,20,40,.72) 46%, rgba(9,20,40,.28) 72%, rgba(9,20,40,.5) 100%); }
/* The warm crop is framed tighter still, so its Christ sits higher again —
 * centred, the band cut him off at the neck. */
.ml-hero--warm .ml-hero__art--mural img { object-position: 52% 14%; }
.ml-hero--warm .ml-hero__art::after {
  background: linear-gradient(90deg, rgba(46,26,20,.94) 20%, rgba(46,26,20,.66) 46%, rgba(46,26,20,.15) 74%, rgba(46,26,20,.45) 100%); }
.ml-hero--warm h1 em { color: #e8c98a; }
.ml-hero--warm .ml-tag { background: #e8c98a; color: #3a2415; }
/* Only the image is mirrored, not the section — the scrim stays dark on the
 * left, under the words, which is the whole point of flipping it. */
.ml-hero--mirror .ml-hero__art--mural img { transform: scaleX(-1); }

/* Good Shepherd — the only light ground. The art fades into the page rather
 * than being scrimmed over, so the words sit on white. */
.ml-hero--light { background: var(--page); color: var(--ink); display: grid;
  grid-template-columns: 1.02fr .98fr; align-items: center; }
.ml-hero--light h1 { color: var(--ink); }
.ml-hero--light h1 em { color: var(--crimson); }
.ml-hero--light .ml-hero__lead { color: var(--ink-soft); }
.ml-hero--light .ml-tag { background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold-soft); }
.ml-hero--light .ml-hero__inner--split { grid-template-columns: 1fr; }
.ml-hero__aside { position: relative; align-self: stretch; min-height: 26rem; overflow: hidden; }
.ml-hero__aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.ml-hero__aside::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--page) 0%, rgba(255,255,255,.55) 14%, transparent 42%); }

/* The two founders — duotone so two archive photographs read as one picture. */
.ml-hero--pair { display: grid; grid-template-columns: 1fr 1fr; }
.ml-hero__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.ml-hero__pair figure { position: relative; margin: 0; overflow: hidden; min-height: 26rem; }
.ml-hero__pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); }
.ml-hero__pair figure::after { content: ""; position: absolute; inset: 0; mix-blend-mode: color; background: var(--navy); }
.ml-hero__pair figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(10,20,38,.92)); }
.ml-hero__pair figcaption b { display: block; font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: var(--text-sm); }
.ml-hero__pair figcaption span { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-soft); }

/* Commissioned Christ — art held right, left kept quiet for the scrim. */
.ml-hero__art--right { inset: 0 0 0 42%; }
.ml-hero--commissioned .ml-hero__art::after {
  background: linear-gradient(90deg, var(--navy-deep) 30%, rgba(13,31,58,.72) 48%, rgba(13,31,58,.05) 78%); }

@media (max-width: 900px) {
  .ml-hero__inner--split { grid-template-columns: 1fr; }
  .ml-hero__mark { display: none; }
  .ml-hero--light, .ml-hero--pair { grid-template-columns: 1fr; }
  .ml-hero__aside { min-height: 16rem; }
  .ml-hero__aside::after { background: linear-gradient(180deg, var(--page), transparent 30%); }
  .ml-hero__pair figure { min-height: 15rem; }
  .ml-hero__art--right { inset: 0; }
}

.ml-row { max-width: 82rem; margin: 0 auto; padding: var(--sp-7) var(--sp-6) 0; }
.ml-row:last-of-type { padding-bottom: var(--sp-7); }
.ml-row__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ml-row__head h2 { font-size: var(--text-2xl); margin: 0; }
.ml-row__head h2 em { font-style: italic; color: var(--navy); }
.ml-row__all { font-size: var(--text-sm); font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.ml-rule-eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
/* Direct child only. The mark is the empty <span> beside the text — but the
 * TEXT is also wrapped in a span for super admins, by copy(), so a descendant
 * selector painted the label with the rule's own background: gold behind
 * gold-deep text. Invisible unless you were signed in as a super admin, which
 * is how it survived this long. */
.ml-rule-eyebrow > span { width: 1.6rem; height: 3px; background: var(--gold); border-radius: 2px; }
.ml-rule-eyebrow p { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }

/* This Sunday band */
.ml-sunday { background: var(--mist); border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.ml-sunday__inner { max-width: 82rem; margin: 0 auto; padding: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
/* The day's name needs room. Weekday titles are long — "Monday of the
 * Nineteenth Week in Ordinary Time" — and on an equal share it wrapped to
 * four lines against an empty middle, making the band twice as tall as it
 * needed to be and pushing everything below it off the fold. Basis, not a
 * fixed width, so it still collapses on a phone. */
.ml-sunday__body { flex: 1 1 24rem; min-width: 16rem; }
.ml-sunday__cite { font-family: var(--font-serif); font-style: italic; color: var(--navy); font-size: var(--text-lg); }
/* The passage, pushed to the far end of the stepper row — the emptiest part
 * of the band. A link, not a label: it searches every teaching that touches
 * the passage, which is more than the day itself can show. */
/* The way onward on a bare day. A link inside the sentence rather than a
 * card: a dark block is a lot of weight to spend saying we have nothing, and
 * as a card it looked like the content cards beside it while behaving like
 * the date stepper — content to look at, versus a jump to another day. */
/* Sits where a teaching would have sat, so the space reads as answered rather
 * than empty — and at the picks' own left edge, lined up with the cards it
 * stands in for. */
.ml-sunday__none { margin: 0; align-self: center; font-size: var(--text-sm); color: var(--ink-soft); }
.ml-sunday__onward { color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ml-sunday__onward:hover { color: var(--crimson); text-decoration: underline; }
/* Beside the date now, not at the far end of the row. It was pushed right to
 * fill the emptiest part of the band — a layout reason, not a meaning one.
 * The day and its Gospel are one thought and read as one. */
.ml-sunday__refs { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ml-sunday__ref {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--gold-soft);
  border-radius: 999px; padding: .35rem .9rem;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.ml-sunday__ref:hover { border-color: var(--gold); box-shadow: var(--shadow); color: var(--crimson); }
/* Names what the citation is. Small caps so it labels without competing —
 * the passage is the thing you click, this only says which reading it is. */
.ml-sunday__ref-label {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}
.ml-sunday__ref-cite { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); }

/* In-place search on the home page — results land here, not on another page.
 *
 * A full-bleed band (design C3): white-on-white between two white sections,
 * this read as leftover space rather than as the way in. Deepened gold ground,
 * dark ink on top, and the field runs nearly the full width so it looks like
 * the thing to use rather than a footnote to the section above. */
.ml-find { position: relative; overflow: hidden; margin-top: var(--sp-7);
  background: linear-gradient(160deg, #f2e2c0 0%, #e8d3a4 48%, #dcc088 100%);
  border-top: 1px solid #c3a465; border-bottom: 1px solid #c3a465; }
.ml-find::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #8a6c33, var(--gold), #8a6c33); }
.ml-find::after { content: ""; position: absolute; right: -6rem; top: -7rem; width: 28rem; height: 28rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(122,93,44,.16), transparent 68%); }
.ml-find__inner { position: relative; z-index: 2; max-width: 82rem; margin: 0 auto; padding: var(--sp-7) var(--sp-6); }

.ml-find__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.ml-find__head h2 { font-family: var(--font-serif); font-weight: 900; font-size: 2.4rem; line-height: 1.1;
  margin: 0 0 var(--sp-2); color: #241f18; }
.ml-find__head h2 em { font-style: italic; font-weight: 400; color: var(--navy); }
/* Design's own values. Tried white here first and it was both a mismatch and
 * about 1.8:1 against a 4.5:1 minimum — the deep gold is the legible answer as
 * well as the specified one. */
.ml-find .ml-rule-eyebrow > span { background: #8a6c33; }
.ml-find .ml-rule-eyebrow p { color: #6f5320; }
.ml-find__sub { font-size: var(--text-base); color: #4a4034; margin: 0; max-width: 34rem; }
.ml-find__link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  color: var(--navy); text-decoration: none; white-space: nowrap; }

/* The field is one object — icon, input and button share a single pill. */
.ml-find__field { display: flex; align-items: stretch; width: 100%; border-radius: 999px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(94,70,31,.22); }
.ml-find__icon { display: grid; place-items: center; padding-left: 1.4rem; background: #fff;
  border-top: 1px solid #cdae72; border-bottom: 1px solid #cdae72; border-left: 1px solid #cdae72;
  border-radius: 999px 0 0 999px; }
.ml-find__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #8b8378; stroke-width: 2; stroke-linecap: round; }
.ml-find__field input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: #fff;
  border-top: 1px solid #cdae72; border-bottom: 1px solid #cdae72;
  font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink); padding: 1.1rem 1rem; }
.ml-find__field input[type="search"]::placeholder { color: #9a9287; }
.ml-find__field input[type="search"]:focus { outline: 2px solid var(--navy); outline-offset: -2px; }
.ml-find__field input[type="submit"] { border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700;
  font-size: 1rem; color: #fff; background: var(--crimson); padding: 0 2.4rem; white-space: nowrap; }
.ml-find__field input[type="submit"]:hover { background: var(--crimson-deep); }

.ml-find__chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: var(--sp-4); }
.ml-find__try { font-size: var(--text-sm); color: #5c5145; margin-right: .25rem; }
.ml-find__chips a { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; text-decoration: none;
  padding: .35rem .85rem; border-radius: 999px; color: var(--navy);
  border: 1px solid #c3a465; background: rgba(255,255,255,.62); }
.ml-find__chips a:hover { background: #fff; border-color: #8a6c33; }

/* Results sit below the band on the page's own white — see the note in the
 * view. No min-height and no padding until there is something to show, so an
 * unused search leaves the band sitting straight on the next section rather
 * than on a reserved gap, which is the fault this redesign was fixing. */
/* Answers overlay the page instead of pushing it down. The wrap is the
 * positioning context; the band itself can't be, because it clips its own
 * overflow for the radial in its corner. */
.ml-find-wrap { position: relative; z-index: 20; }
.ml-find__results { position: absolute; top: 100%; left: 0; right: 0; display: none;
  max-width: 82rem; margin: 0 auto; padding: 0 var(--sp-6); }
/* The frame element is always a child, so :has(*) would always match and show
 * an empty panel — it has to be the frame's CONTENT. This is also the only
 * open/closed state there is: the controller closes by emptying the frame. */
.ml-find__results:has(turbo-frame:not(:empty)) { display: block; }
.ml-find__results turbo-frame { display: block; background: var(--card);
  border: 1px solid var(--gold-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 0; box-shadow: var(--shadow-lift);
  max-height: min(34rem, 70vh); overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); }

.ml-find__close { position: absolute; top: var(--sp-3); right: calc(var(--sp-6) + var(--sp-3)); z-index: 2;
  width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer;
  font-size: 1.35rem; line-height: 1; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.ml-find__close:hover { color: var(--ink); border-color: var(--line-strong); background: var(--mist); }

@media (max-width: 700px) {
  .ml-find__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .ml-find__field { flex-wrap: wrap; border-radius: var(--radius); }
  .ml-find__field input[type="submit"] { flex: 1; padding: .9rem 1.5rem; }
}

/* What each voice recorded for this Sunday's gospel. */
/* Sized to its contents rather than claiming half the band: with flex:1 the
 * cards were pinned to the far right with a gulf beside them. */
.ml-sunday__picks { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-start; flex: 1 1 34rem; min-width: 0; }
/* Dark buttons on the light band. Each wears its program's own deep colour —
 * Fr. Jim's violet, Fr. Michael's blue, or the season's liturgical dark — so
 * you can tell whose voice it is before reading the label. */
.ml-sunday__pick {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--program-hero-bg, var(--navy-deep));
  border: 1px solid transparent;
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-4);
  /* Share the row rather than each claiming its content width. Sized by
   * content they came to ~230px each, and two plus a gap lost to the column
   * by a few pixels — so every card wrapped onto its own line and three
   * voices became three rows. */
  /* 18rem, not less: below that a third card squeezes into the row and
   * every title wraps. Better to wrap the heading on the left — a heading
   * over two lines still reads as a heading, a button over two lines makes
   * the row it sits in uneven. */
  flex: 1 1 18rem; min-width: 0; max-width: 24rem;
}
.ml-sunday__pick-title { overflow-wrap: anywhere; }
.ml-sunday__pick:hover { box-shadow: var(--shadow-lift); border-color: var(--gold); }
.ml-sunday__pick-program { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); }
.ml-sunday__pick-title { font-family: var(--font-serif); font-weight: 700; color: #fff; }

/* The band with the stepper stacks: a top line the arrows live on, then the
 * gospel and the recordings below. Nothing below the top line can move the
 * arrows — not a title that wraps to three lines, not a third recording. */
.ml-sunday--nav .ml-sunday__inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.ml-sunday__top { display: flex; align-items: center; gap: var(--sp-4); }
/* The date holds its line. Left to wrap it broke onto two on the longer days
 * and took the row's height with it — the same jumping the stepper was laid
 * out to avoid. What gives instead is the empty-day caption, which wraps
 * inside the refs group where it belongs. */
.ml-sunday__top .ml-rule-eyebrow { white-space: nowrap; }
.ml-sunday__top .ml-rule-eyebrow { margin: 0; }
/* No reservation needed: the date is to the RIGHT of the arrows now, so it
 * can be any length without moving them. */
.ml-sunday__top /* Two arrows, adjacent, first in the row. No middle track any more: the
 * label that lived there changed width and drifted the right arrow, and
 * nothing sits left of these now, so their position is fixed outright. */
.ml-sunday__nav {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: none; order: 0; margin-left: 0;
}
/* Nothing in here may move when you step from one day to the next.
 *
 * Two things made it move. align-items:center re-centred a short column, so a
 * one-line feast name pushed the line above it DOWN rather than simply ending
 * sooner — the text jumped every time the title changed length. And nothing
 * reserved height, so the band itself grew and shrank, shoving the whole page
 * below it up and down as you stepped through days.
 *
 * Top-aligned, and tall enough for the two-line titles that most weekdays
 * have ("Saturday of the Nineteenth Week in Ordinary Time"). A one-line day
 * leaves space below rather than dragging everything up. */
.ml-sunday__main { display: flex; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; min-height: 7.5rem; }

/* Step between days — look ahead to prepare, or back to catch up. The
 * position is fixed by being first in the row; see the rule above. */
/* Reads as part of the stepper rather than a word after the date. Same pill
 * family as the arrows, quieter: the arrows are the thing you press
 * repeatedly, this is the one-off way back. Constant width either way, so
 * stepping on and off today never shifts the date beside it. */
/* Hard right, at the far end of the band: it is the one thing here that
 * leaves the site, so it reads as a door out rather than another of our own
 * links. Green because every other action on this page is crimson or navy —
 * a different destination gets a different colour. */
.ml-sunday__readings {
  margin-left: auto; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ok); color: #fff; text-decoration: none; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: 999px; padding: .4rem .55rem .4rem .95rem;
}
.ml-sunday__readings:hover { background: #33592f; color: #fff; }
/* Whose readings these are. Said on the button rather than beside it, because
 * the point is that this link goes somewhere else — and a visitor who doesn't
 * know the initials still reads the verb. */
.ml-sunday__readings-src {
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  background: rgba(255, 255, 255, .18); border-radius: 999px; padding: .15rem .4rem;
}
@media (max-width: 720px) { .ml-sunday__readings { margin-left: 0; } }

.ml-sunday__here {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.5rem; height: 2.25rem; padding: 0 var(--sp-3);
  border-radius: 999px; font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: 600; white-space: nowrap;
  /* Reads as a disabled button on today, not as a stray word: it keeps the
   * border and shape of the pill it becomes when you step away, just muted.
   * A control that vanishes into text is one nobody knows is there. */
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); cursor: default;
}
/* Solid gold when it is live, matching the arrows beside it — the three of
 * them read as one control rather than two buttons and an outline. Inverts on
 * hover rather than deepening, so the change is unmistakable. */
.ml-sunday__here--link {
  background: var(--navy); border-color: var(--navy); color: #fff; text-decoration: none;
  /* The base rule sets cursor:default for the disabled state, which is right
   * there and wrong here — without this the live button showed an arrow, so
   * the one you can press looked less pressable than an ordinary link. */
  cursor: pointer;
}
.ml-sunday__here--link:hover { background: var(--card); color: var(--navy); }
.ml-sunday__step {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; border: 1px solid var(--gold); background: var(--gold);
  color: #fff; text-decoration: none; font-size: 1.4rem; line-height: 1;
}
.ml-sunday__step:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.ml-sunday__today { color: var(--gold-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ml-sunday__today:hover { color: var(--crimson); text-decoration: underline; }

/* Happening now — the current things, side by side */
.ml-spotlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ml-spot {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; border-top: 4px solid var(--navy);
}
.ml-spot--running { border-top-color: var(--crimson); }
.ml-spot--weekly { border-top-color: var(--gold); }
.ml-spot--flagship { border-top-color: var(--navy); }
.ml-spot__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4) 0; color: var(--ink-soft);
}
.ml-spot--running .ml-spot__label { color: var(--crimson); }
.ml-spot--weekly .ml-spot__label { color: var(--gold-deep); }
.ml-spot--flagship .ml-spot__label { color: var(--navy); }
.ml-spot__thumb { position: relative; padding-top: 52%; margin: var(--sp-3) var(--sp-4) 0; border-radius: var(--radius); overflow: hidden; background: #1c1512; }
.ml-spot__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-spot__body { padding: var(--sp-3) var(--sp-4); flex: 1; }
.ml-spot__title { font-size: var(--text-lg); margin: 0 0 var(--sp-2); line-height: 1.25; }
.ml-spot__title a { text-decoration: none; color: var(--ink); }
.ml-spot__title a:hover { color: var(--navy); }
.ml-spot__blurb { font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--sp-3); }
/* Two of these stack on a mid-release series — start and latest — so they need
 * space between them rather than running together as one block. */
.ml-spot__next { font-size: var(--text-sm); margin: 0; }
.ml-spot__next + .ml-spot__next { margin-top: var(--sp-2); }
.ml-spot__next-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ml-spot__cta { padding: 0 var(--sp-4) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 900px) { .ml-spotlight { grid-template-columns: 1fr; } }

/* Continue */
.ml-continue { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ml-cont { display: flex; gap: var(--sp-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: inherit; }
.ml-cont__thumb { position: relative; flex: none; width: 44%; background: #1c1512; }
.ml-cont__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-cont__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.35); }
.ml-cont__bar i { display: block; height: 100%; background: var(--crimson); }
.ml-cont__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; display: flex; flex-direction: column; justify-content: center; }
.ml-cont__series { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.ml-cont__t { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-base); margin: var(--sp-1) 0 var(--sp-2); }
.ml-cont__meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* Series */
.ml-series { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ml-serie { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 140ms, transform 140ms; text-decoration: none; color: inherit; display: block; }
.ml-serie:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ml-serie__thumb { position: relative; padding-top: 60%; background: #1c1512; }
.ml-serie__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-serie__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,31,58,0) 45%, rgba(13,31,58,.78) 100%); }
.ml-serie__count { position: absolute; z-index: 2; left: var(--sp-4); bottom: var(--sp-3); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ml-serie__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.ml-serie__eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.ml-serie__t { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-lg); margin: var(--sp-1) 0 var(--sp-2); }
.ml-serie__d { font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }

/* People */
.ml-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.ml-person { text-align: center; text-decoration: none; color: inherit; }
.ml-person__frame { border-radius: 50%; padding: 5px; background: linear-gradient(150deg, var(--gold) 0%, var(--gold-soft) 100%); box-shadow: var(--shadow); width: 8.5rem; height: 8.5rem; margin: 0 auto; }
.ml-person__frame > div { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--mist); display: grid; place-items: center; }
.ml-person__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-person__initials { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-2xl); color: var(--gold-deep); }
.ml-person__name { font-family: var(--font-serif); font-weight: 700; margin-top: var(--sp-3); }
.ml-person__role { font-size: var(--text-sm); color: var(--ink-soft); }

/* CTA */
.ml-cta { position: relative; background: var(--navy); color: #fff; text-align: center; overflow: hidden; margin-top: var(--sp-7); }
.ml-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% -20%, rgba(181,143,77,.35), transparent 55%); }
/* 44rem broke the heading over three lines and dropped "blesses." on its own,
 * which reads as a mistake rather than a line. The band is wide enough for the
 * sentence, so the band gets the width. The paragraph keeps its own narrower
 * measure inside it: a centred line running the full 58rem is a long way for
 * an eye to travel back, and this is the one paragraph on the page asking
 * someone for money. */
.ml-cta__inner { position: relative; z-index: 2; max-width: 58rem; margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
.ml-cta h2 { color: #fff; font-size: var(--text-3xl); margin: 0 0 var(--sp-3); text-wrap: balance; }
.ml-cta h2 em { font-style: italic; color: var(--gold-soft); }
.ml-cta p { color: #dbe4f0; font-size: var(--text-lg); max-width: 44rem; margin: 0 auto var(--sp-5); }
.ml-cta .h2h-btn--primary { background: #fff; color: var(--crimson); }
.ml-cta .h2h-btn--primary:hover { background: var(--gold-soft); color: var(--crimson-deep); }

@media (max-width: 820px) { .ml-continue, .ml-series, .ml-people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ml-continue, .ml-series, .ml-people { grid-template-columns: 1fr; } }

/* ============================================================
 * The daily section — three shapes from the design project, chosen at
 * Admin › Site mode. They share a card, an empty state, a stepper and a
 * readings link; only the frame around them differs.
 * ============================================================ */

.dt { background: var(--mist); border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.dt--panel { background: var(--page); border: 0; }
.dt__in { max-width: 82rem; margin: 0 auto; padding: var(--sp-6); }
.dt__top { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.dt__dateline { font-size: var(--text-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.dt__top .dt-readings { margin-left: auto; }
/* Two columns: who the day is on the left, what we have on the right. */
.dt__grid { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: var(--sp-7); align-items: start; }
.dt__ident { border-left: 3px solid var(--gold); padding-left: var(--sp-4); }
.dt--rail .dt__ident { border-left: 0; padding-left: 0; }
.dt__kicker { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.dt__feast { font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; line-height: 1.15; margin: var(--sp-2) 0; }
.dt__cite { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-lg); color: var(--crimson); text-decoration: none; }
.dt__cite:hover { color: var(--crimson-deep); }
.dt__note { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--sp-3) 0 0; }
.dt__col h3 { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--sp-3); }
.dt__stack { display: grid; gap: var(--sp-3); }

/* Stepper — yesterday, today, tomorrow. */
.dt-step { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Two states that used to look identical. On today the control has nothing to
 * do, so it reads as spent — present, because its width is what keeps the
 * arrows from moving, but plainly not a button. Away from today it is the way
 * back, so it is the dark one. */
.dt-step__today { font-size: var(--text-sm); font-weight: 600; border-radius: 999px;
  padding: .4rem .9rem; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--line); background: transparent; }
.dt-step__today--link { color: var(--page); background: var(--navy); border-color: var(--navy); }
/* The colour is stated on hover too: a general link hover rule was turning
 * the text navy on the navy pill, dark on dark. */
.dt-step__today--link:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--page); }
.dt-step__arw { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); display: grid; place-items: center; text-decoration: none; }
.dt-step__arw:hover { border-color: var(--navy); color: var(--navy); }

/* Readings link — text, because it leaves the site and shouldn't outrank
   the things that don't. */
.dt-readings { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600;
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; }
.dt-readings:hover { color: var(--navy-deep); border-color: var(--gold); }

/* Teaching card. The left edge takes the program's accent so two series on
   one gospel are told apart without reading. */
.dt-card { display: flex; gap: var(--sp-4); align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--sp-3); text-decoration: none;
  color: inherit; position: relative; overflow: hidden; transition: box-shadow 140ms, transform 140ms; }
.dt-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.dt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--program-accent, var(--crimson)); }
.dt-card__thumb { flex: none; width: 6.5rem; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden;
  background: var(--mist); position: relative; margin-left: var(--sp-1); }
.dt-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dt-card__play { position: absolute; inset: 0; display: grid; place-items: center; }
.dt-card__play span { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(255,255,255,.92);
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.dt-card__play svg { width: .7rem; height: .7rem; fill: var(--program-accent, var(--crimson)); margin-left: 2px; }
.dt-card__body { min-width: 0; flex: 1; display: block; }
.dt-card__series { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--program-accent, var(--crimson)); }
.dt-card__title { display: block; font-family: var(--font-serif); font-weight: 700; font-size: var(--text-base);
  margin: 3px 0; line-height: 1.3; }
.dt-card__meta { display: flex; gap: .5rem; align-items: center; font-size: var(--text-sm); color: var(--ink-soft); }
.dt-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

/* The empty day: same slot, same shape, offered as a doorway. */
.dt-empty { display: grid; gap: var(--sp-3); }
.dt-inv { display: flex; gap: var(--sp-4); align-items: center; border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, var(--gold-wash), var(--card)); border-radius: var(--radius-lg);
  padding: var(--sp-4); text-decoration: none; color: inherit; }
.dt-inv:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.dt-inv--quiet { background: var(--card); }
.dt-inv__mark { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gold-soft);
  color: var(--gold-deep); display: grid; place-items: center; font-size: 1.1rem; }
.dt-inv__body { flex: 1; min-width: 0; display: block; }
.dt-inv__kind { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.dt-inv__title { display: block; font-family: var(--font-serif); font-size: var(--text-base); margin: 3px 0 2px; line-height: 1.35; }
.dt-inv__meta { display: block; font-size: var(--text-sm); color: var(--ink-soft); }
.dt-inv__go { flex: none; font-size: var(--text-sm); font-weight: 700; color: var(--navy); white-space: nowrap; }

/* Split panel (B). */
.dt-split { display: grid; grid-template-columns: minmax(0, 24rem) 1fr; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--line); }
.dt-split__panel { background: var(--navy-deep); color: #fff; padding: var(--sp-6); }
.dt-split__kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--sp-4); }
.dt-split__kicker i { width: 1.4rem; height: 2px; background: var(--gold); display: block; }
.dt-split__kicker b { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.dt-split__date { font-size: var(--text-sm); color: #b9c6d8; margin: 0 0 var(--sp-2); }
.dt-split__feast { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: #fff; margin: 0 0 var(--sp-4); }
.dt-split__gospel { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--sp-4); }
.dt-split__gl { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.dt-split__gc { display: block; font-family: var(--font-serif); font-style: italic; font-size: var(--text-xl);
  color: #fff; margin: 4px 0 var(--sp-4); text-decoration: none; }
.dt-split__gc:hover { color: var(--gold-soft); }
.dt-split__panel .dt-readings { color: var(--gold-soft); border-color: rgba(255,255,255,.3); }
.dt-split__panel .dt-readings:hover { color: #fff; border-color: var(--gold); }
/* Pinned above everything whose height varies with the day — the feast wraps to
 * one line or three, and only some days carry a season position — so the arrows
 * stay under the cursor as you click through. */
.dt-split__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.dt-split__head .dt-split__kicker { margin: 0; }
.dt-split__nav { flex: none; }
/* On the navy panel the same distinction, inverted: faded when spent, solid
   white when it is the way back. */
.dt-split__nav .dt-step__today, .dt-split__nav .dt-step__arw { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.55); background: transparent; }
.dt-split__nav .dt-step__today--link { color: var(--navy); background: #fff; border-color: #fff; }
.dt-split__nav .dt-step__today--link:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy-deep); }
.dt-split__nav .dt-step__today:hover, .dt-split__nav .dt-step__arw:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.dt-split__body { background: var(--card); padding: var(--sp-6); }
.dt-split__bh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.dt-split__bh h3 { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0; }

/* Week rail (C). */
.dt-rail { display: flex; gap: var(--sp-2); align-items: stretch; margin-bottom: var(--sp-6); }
.dt-rail__day { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-2); text-align: center; text-decoration: none; color: inherit; }
.dt-rail__day:hover { border-color: var(--gold); }
.dt-rail__day .dow { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.dt-rail__day .num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: var(--text-lg); margin: 2px 0 var(--sp-2); }
.dt-rail__day.is-sunday { background: var(--gold-wash); border-color: var(--gold-soft); }
.dt-rail__day.is-on { border-color: var(--navy); border-width: 2px; box-shadow: var(--shadow); background: var(--card); }
.dt-rail__day.is-on .num { color: var(--navy); }
.dt-rail__day.is-empty .num { color: var(--ink-soft); opacity: .6; }
/* A pip per program with something that day — the whole point of the rail. */
.dt-rail__pips { display: flex; gap: 3px; justify-content: center; min-height: 6px; }
.dt-rail__pips i { width: 5px; height: 5px; border-radius: 50%; display: block; background: var(--crimson); }
.dt-rail__pips i[data-program="sparough"] { background: #1d3f6b; }
.dt-rail__pips i[data-program="willig"] { background: var(--crimson); }
.dt-rail__pips i[data-program="lent"] { background: #6b2d6b; }
.dt-rail__pips i[data-program="advent"] { background: #5b3d8a; }
.dt-rail__pips i[data-program="easter"], .dt-rail__pips i[data-program="christmas"] { background: #9c7420; }
.dt-rail__pips i[data-program="ordinary"] { background: #2f6b3a; }

@media (max-width: 900px) {
  .dt__grid, .dt-split { grid-template-columns: 1fr; }
  .dt__top .dt-readings { margin-left: 0; }
}


/* Why a teaching is on today's list when it isn't the gospel. Quiet, because
   it is an explanation rather than a claim — but present, because the heading
   used to promise a gospel and hand you Leviticus. */
.dt-card__on { display: block; font-size: var(--text-sm); font-style: italic; color: var(--gold-deep); margin: 2px 0 1px; }

/* Where the day sits in the season, under whatever a feast has named it. Quiet
   and italic: the feast is the day's identity, this is its address. */
.dt__position { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); font-size: var(--text-sm);
  font-style: italic; color: var(--ink-soft); }
.dt-split__position { margin: calc(var(--sp-3) * -1) 0 var(--sp-4); font-size: var(--text-sm);
  font-style: italic; color: #b9c6d8; }

/* ---- On-page switchers -----------------------------------------------------
 * Staff pickers drawn next to the thing they change (SiteSetting
 * .on_page_switchers?, super admin only). Styled as an instrument and not as
 * part of the site: dashed edge, small caps label, nothing that could be
 * mistaken for the design being judged. */
.sw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  max-width: 82rem; margin: 0 auto; padding: var(--sp-3) var(--sp-6);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--mist) 0 10px, #fff 10px 20px); }
.sw__label { font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-right: var(--sp-2); }
.sw form { display: inline; margin: 0; }
.sw__btn { font-family: var(--font-sans); font-size: .8125rem; font-weight: 600; line-height: 1.2;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); cursor: pointer; }
.sw__btn:hover { border-color: var(--navy); color: var(--navy); }
.sw__btn--on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sw__btn--on:hover { color: #fff; }
.sw__btn--off { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.sw__btn--off:hover { border-color: var(--line-strong); color: var(--ink); }
.sw__note { font-size: .75rem; color: var(--ink-soft); font-style: italic; }

/* This week band — the two weekly voices above the fold (2026-09-15). The
 * Sunday panel is the design project's "This Sunday" module on the navy
 * ground; the homily panel is a card beside it. Two panels, no tabs, no
 * slider; below 760px they stack. */
.tw { background: var(--page); border-bottom: 1px solid var(--line); }
.tw__in { max-width: 82rem; margin: 0 auto; padding: var(--sp-6); display: grid; gap: var(--sp-5); align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* One to three seats; the Sunday panel, when present, takes the wider share. */
.tw__in[data-seats="1"] { grid-template-columns: minmax(0, 1fr); }
.tw__in[data-seats="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw__in[data-seats="2"][data-sunday="true"] { grid-template-columns: 1.15fr .85fr; }
.tw__in[data-seats="3"][data-sunday="true"] { grid-template-columns: 1.3fr 1fr 1fr; }
.tw__sunday { background: linear-gradient(150deg, var(--navy), var(--navy-deep)); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: var(--sp-5); display: flex; flex-direction: column; justify-content: center; }
.tw__kicker { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.tw__kicker span { width: 1.6rem; height: 3px; background: var(--gold); border-radius: 2px; }
.tw__kicker p { margin: 0; font-size: var(--text-sm); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tw__kicker--ink p { color: var(--gold-deep); }
/* Kept to a size the band can afford: the row is as tall as its tallest
 * panel, and this one sets it. */
.tw__feast { font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.15; margin: 0 0 var(--sp-1); color: #fff; }
.tw__date { font-size: var(--text-sm); color: #c7d2e2; margin: 0 0 var(--sp-3); }
.tw__gospel { border-left: 3px solid var(--gold); padding-left: var(--sp-3); margin: 0 0 var(--sp-3); }
.tw__cite { font-size: var(--text-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-soft); text-decoration: none; }
.tw__cite:hover { color: #fff; }
.tw__line { font-family: var(--font-serif); font-style: italic; font-size: var(--text-base); color: #eef2f8; margin: var(--sp-1) 0 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw__study { display: flex; align-items: center; gap: var(--sp-3); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); text-decoration: none; color: inherit; }
.tw__study:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.tw__thumb { flex: none; width: 5.5rem; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #1c1512; }
.tw__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw__meta { display: flex; flex-direction: column; min-width: 0; }
.tw__meta .l { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); }
.tw__meta .t { font-family: var(--font-serif); font-weight: 700; color: #fff; margin: 2px 0; }
.tw__meta .d { font-size: var(--text-sm); color: #c7d2e2; }
.tw__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.tw__ghost { display: inline-flex; align-items: center; font-weight: 600; font-size: var(--text-sm); padding: .55rem 1.1rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .4); color: #fff; text-decoration: none; }
.tw__sunday .h2h-btn--primary, .tw__seat .h2h-btn--primary { padding: .55rem 1.1rem; font-size: var(--text-sm); }
.tw__ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.tw__seat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--sp-4); display: flex; flex-direction: column; }
.tw__seat .tw__cta { margin-top: 0; }
/* The poster is the panel's flexible part: the row's height is set by the
 * Sunday panel, and whatever that leaves goes to the picture rather than to
 * a gap above the buttons. A floor keeps it a picture on a short row; no
 * ceiling, and no aspect of its own — the image is cropped to fit. */
.tw__poster { display: block; flex: 1 1 10rem; min-height: 9rem; width: 100%; border-radius: var(--radius); overflow: hidden; background: #1c1512; position: relative; margin: 0 0 var(--sp-3); }
/* Cropped high, not from the middle: a preacher's head is at the top of the
 * frame and a centred crop took it off. The stored stills are 16:9 now
 * (maxres, no letterbox), so nothing else to dodge. */
.tw__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.tw__poster .play { position: absolute; inset: 0; display: grid; place-items: center; }
.tw__poster .play span { width: 3rem; height: 3rem; border-radius: 50%; background: var(--crimson); display: grid; place-items: center; box-shadow: var(--shadow); }
.tw__poster .play svg { width: 1rem; height: 1rem; fill: #fff; margin-left: 2px; }
.tw__title { font-family: var(--font-serif); font-size: var(--text-lg); margin: 0 0 var(--sp-1); line-height: 1.25; }
.tw__when { margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--ink-soft); }
.tw__more { color: var(--navy); font-weight: 600; text-decoration: none; }
.tw__latest { margin: 0 0 var(--sp-3); font-size: var(--text-sm); }
.tw__latest span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-right: .4rem; }
.tw__latest a { color: var(--navy); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) { .tw__in, .tw__in[data-seats] { grid-template-columns: 1fr; } }