/* ── The Holy Mass ───────────────────────────────────────────────────────
   Page-scoped styles for /the-mass. The page is a long, sectioned exposition
   of the Traditional Latin Mass, so it needs three things the shared
   stylesheet does not already carry: paired Latin/English prayer blocks, the
   reference tables (vestments, colours, postures, feast ranks), and a
   distinct treatment for the words of Consecration.
   Everything else — .pagehead, .prayer-toc, .prayer-text — comes from
   styles.css so the page reads as part of the Faith section. */

.page-mass main{overflow:hidden}

/* ── Opening epigraph ───────────────────────────────────────────────── */
.mass-epigraph{
  margin:26px auto 0;max-width:560px;
  font-family:var(--head);font-style:italic;font-size:21px;line-height:1.6;
  color:var(--gold-deep);text-align:center;
}
.mass-epigraph cite{display:block;margin-top:10px;font-style:normal;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* Both colours above are mid-tones picked against the paper, and the epigraph
   now opens the page inside the dark masthead. Over the veil they go to mud, so
   the header takes the on-dark pair the kicker and sub already use. */
.pagehead-dark .mass-epigraph{color:var(--champagne);}
.pagehead-dark .mass-epigraph cite{color:rgba(246,241,230,.62);}

/* The bold statement that opens the exposition. */
.mass-lead{
  font-family:var(--head);font-size:23px;line-height:1.6;color:var(--ink);
  text-align:center;margin:0 0 30px;
}

/* ── Numbered subsection headings (1.1, 2.4, 3.6 …) ─────────────────── */
.mass-step{
  display:flex;align-items:baseline;gap:14px;
  margin:0 0 18px;
}
.mass-step .num{
  flex:none;font-family:var(--display);font-size:14px;letter-spacing:.1em;
  color:var(--gold);padding-top:6px;
}
.mass-step h3{
  font-family:var(--head);font-size:clamp(23px,3.1vw,30px);font-weight:600;
  color:var(--ink);margin:0;
}

/* ── Latin / English prayer pairs ───────────────────────────────────────
   The Latin is the prayer; the English is the gloss beneath it. Kept in one
   block with a single gold rule so the two never drift apart on reflow. */
.mass-quote{
  margin:22px 0;padding:18px 24px;
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(251,248,239,.78),rgba(246,241,230,.30));
  border-radius:0 5px 5px 0;
}
.mass-quote + .mass-quote{margin-top:14px}
.mass-quote .lat{
  display:block;font-family:var(--head);font-style:italic;font-size:20px;
  line-height:1.62;color:var(--gold-deep);
}
.mass-quote .eng{
  display:block;margin-top:7px;font-family:var(--body);font-size:19px;
  line-height:1.62;color:var(--muted);
}
.mass-quote .lat + .lat,.mass-quote .eng + .lat{margin-top:12px}

/* Versicle-and-response exchanges (Sursum corda, Dominus vobiscum). */
.mass-dialogue{margin:22px 0;padding:18px 24px;border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(251,248,239,.78),rgba(246,241,230,.30));
  border-radius:0 5px 5px 0;}
.mass-dialogue p{margin:0 0 9px;font-size:19px;line-height:1.55}
.mass-dialogue p:last-child{margin-bottom:0}
.mass-dialogue .lat{font-family:var(--head);font-style:italic;color:var(--gold-deep)}
.mass-dialogue .eng{color:var(--muted)}

/* ── The Consecration ───────────────────────────────────────────────────
   The one place on the page that is set apart typographically, because it is
   the one place the page is describing as set apart. */
.mass-consecration{
  margin:26px 0;padding:28px 30px;
  border:1px solid rgba(125,98,36,.34);border-radius:6px;
  background:linear-gradient(180deg,rgba(251,248,239,.92),rgba(240,232,214,.62));
  box-shadow:0 18px 38px -30px rgba(36,26,16,.6);
}
.mass-consecration .cx-label{
  font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);text-align:center;display:block;margin-bottom:16px;
}
.mass-words{
  margin:18px 0 0;text-align:center;
  font-family:var(--display);font-size:clamp(17px,2.5vw,22px);font-weight:600;
  letter-spacing:.06em;line-height:1.45;color:var(--ink);
}
.mass-words .en{
  display:block;margin-top:8px;font-size:clamp(14px,2vw,17px);
  letter-spacing:.1em;color:var(--gold-deep);
}

/* ── Reference tables ───────────────────────────────────────────────── */
.mass-table-wrap{overflow-x:auto;margin:24px 0}
.mass-table{width:100%;border-collapse:collapse;font-size:17px}
.mass-table caption{
  font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding-bottom:10px;
}
.mass-table th{
  font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);text-align:left;padding:10px 14px 10px 0;
  border-bottom:2px solid var(--rule);white-space:nowrap;
}
.mass-table td{
  font-family:var(--body);line-height:1.5;padding:12px 14px 12px 0;
  border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink);
}
.mass-table td:first-child{font-family:var(--head);font-weight:600;color:var(--ink)}
.mass-table tr:last-child td{border-bottom:none}

/* On a phone the tables become stacked records; the column header is carried
   down as a label so a cell is never orphaned from its meaning. */
@media(max-width:640px){
  .mass-table,.mass-table tbody,.mass-table tr,.mass-table td{display:block;width:100%}
  .mass-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mass-table tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .mass-table tr:last-child{border-bottom:none}
  .mass-table td{padding:3px 0;border:none}
  .mass-table td:first-child{font-size:20px;padding-bottom:6px}
  .mass-table td[data-label]::before{
    content:attr(data-label) " ";
    font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);display:block;margin-top:6px;
  }
}

/* ── Lists ──────────────────────────────────────────────────────────── */
.mass-list{margin:16px 0 16px 4px;padding:0;list-style:none}
.mass-list li{position:relative;padding-left:26px;margin-bottom:11px;line-height:1.62}
.mass-list li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold);font-size:12px}
.mass-list li:last-child{margin-bottom:0}

/* ── Cross-references and source lists ──────────────────────────────── */
.mass-seealso{
  margin:22px 0;font-family:var(--head);font-style:italic;font-size:18px;color:var(--muted);
}
.mass-seealso::before{content:"→ ";color:var(--gold);font-style:normal}

.mass-sources{margin:18px 0 26px}
.mass-sources h4{
  font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin:24px 0 12px;
}
.mass-sources ul{margin:0;padding:0;list-style:none}
.mass-sources li{
  position:relative;padding-left:22px;margin-bottom:12px;font-size:18px;line-height:1.58;
}
.mass-sources li::before{content:"—";position:absolute;left:0;color:var(--gold)}

/* ── Closing colophon ───────────────────────────────────────────────── */
.mass-colophon{
  margin:56px 0 0;padding:28px 30px;text-align:center;
  border-top:1px solid var(--rule);
  font-family:var(--head);font-style:italic;font-size:18px;line-height:1.6;color:var(--muted);
}
.mass-colophon .back{display:block;margin-top:16px;font-style:normal;font-family:var(--display);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;}

@media(max-width:640px){
  .mass-quote,.mass-dialogue{padding:15px 18px}
  .mass-consecration{padding:22px 20px}
  .mass-step{gap:10px}
}