/* ── The Sacraments ──────────────────────────────────────────────────────
   Page-scoped styles for /sacraments. One long reference page: a seven-cell
   index under the masthead, a short "what a sacrament is" intro, a sticky
   jump bar, then each group opens on a dark band and each sacrament is set
   out the same way — photograph and definition side by side, the effects
   under the definition, a ruled Matter / Form / Minister band, then the
   Scripture it rests on.

   The nav, the Ravenna masthead (.sacraments-head in styles.css) and the
   footer are the shared ones and are not restyled here.

   Every class is .sacr-*. The .sac-* family in styles.css belongs to the
   twelve-plate predella on /sacramentals, which sits on an espresso band and
   sets pale, centred text; sharing a prefix with it is how this page once
   ended up with cream type on cream paper. Keep the two apart. */

.page-sacraments{
  --sacr-panel:#ede4d0;
  --sacr-rule-soft:#e6dcc6;
  --sacr-dark-soft:#d4c7a9;   /* 11:1 on --espresso */
  --sacr-dark-muted:#b3a07c;  /* 7.2:1 on --espresso */
  --sacr-shadow:0 22px 48px -18px rgba(40,28,8,.32);
}

.sacr-eyebrow{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);line-height:1.6;
}

.page-sacraments a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;}

/* ── The seven, as an index ─────────────────────────────────────────── */
/* The index card sits between the masthead and the intro. It used to have 56px
   above it and 72px of intro padding below, so a reader came off the masthead
   into a large stretch of empty paper around one card before reaching the
   intro. 40 and 48 keep the card clear of the masthead's rule while reading
   the masthead, the index and the intro as one opening. */
.sacr-index-wrap{margin-top:40px;}
.sacr-index{
  background:var(--paper-card);border:1px solid var(--rule);box-shadow:var(--sacr-shadow);
  padding:30px 24px 26px;
}
.sacr-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:22px;}
.sacr-glabel{grid-row:1;display:flex;align-items:center;gap:14px;padding:0 10px;margin:0;}
.sacr-glabel span:first-child{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);white-space:nowrap;
}
.sacr-glabel span:last-child{flex:1;height:1px;background:var(--rule);}
.sacr-g3{grid-column:1/span 3;}
.sacr-g2a{grid-column:4/span 2;}
.sacr-g2b{grid-column:6/span 2;}
.sacr-cell{
  grid-row:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:6px 12px;text-align:center;min-width:0;color:var(--ink);
  border-left:1px solid var(--sacr-rule-soft);
}
.sacr-strip > .sacr-cell:first-of-type{border-left:0;}
.sacr-cell .n{font-family:var(--display);font-size:11px;color:var(--gold-deep);}
.sacr-cell svg{color:var(--gold);flex:none;}
.sacr-cell .txt{display:contents;}
.sacr-cell .nm{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.35;
}
.sacr-cell .gl{font-family:var(--head);font-style:italic;font-size:17px;color:var(--muted);line-height:1.3;}
.sacr-cell:hover .nm,.sacr-cell:focus-visible .nm{color:var(--gold-deep);}
@media(max-width:900px){
  .sacr-index-wrap{margin-top:28px;}
  .sacr-index{padding:20px 18px 8px;}
  .sacr-strip{display:block;}
  .sacr-glabel{padding:0;margin-top:16px;}
  .sacr-glabel:first-child{margin-top:0;}
  .sacr-cell{
    flex-direction:row;text-align:left;gap:14px;padding:12px 0;min-height:44px;
    border-left:0;border-top:1px solid var(--sacr-rule-soft);
  }
  .sacr-glabel + .sacr-cell{border-top:0;}
  .sacr-cell svg{width:32px;height:32px;}
  .sacr-cell .n{order:3;margin-left:auto;padding-left:8px;}
  .sacr-cell .txt{display:flex;flex-direction:column;flex:1;min-width:0;}
}

/* ── Intro and reading key ──────────────────────────────────────────── */
.sacr-intro{padding-top:48px;}
.sacr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;}
.sacr-lead{font-family:var(--head);font-size:25px;line-height:1.45;margin-top:14px;}
.sacr-key{margin-top:14px;font-size:19px;color:var(--muted);line-height:1.6;}
.sacr-key b{color:var(--ink);font-weight:600;}
@media(max-width:900px){
  .sacr-intro{padding-top:36px;}
  .sacr-two{grid-template-columns:1fr;gap:32px;}
  .sacr-lead{font-size:22px;}
}

/* ── Sticky jump bar ────────────────────────────────────────────────────
   Sits under the site bar, reading --nav-h like every other sticky index on
   the site, and scrolls sideways on a phone rather than wrapping. */
.sacr-jump{
  position:sticky;top:var(--nav-h);z-index:20;margin-top:56px;
  background:var(--espresso);border-bottom:1px solid var(--rule-dark);
}
.sacr-jump .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;}
.sacr-jump .wrap::-webkit-scrollbar{display:none;}
.sacr-jump a,.sacr-jump .grp{
  flex:none;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
}
.sacr-jump a{
  color:var(--sacr-dark-soft);padding:15px 12px 13px;
  border-bottom:2px solid transparent;
}
.sacr-jump a:hover{color:var(--paper);}
.sacr-jump a[aria-current]{color:var(--champagne);border-bottom-color:var(--champagne);}
.page-sacraments .sacr-jump a:focus-visible{outline:2px solid var(--champagne);outline-offset:-4px;}
.sacr-jump .grp{
  color:var(--sacr-dark-muted);padding:15px 6px 13px 14px;
  border-left:1px solid var(--rule-dark);
}
.sacr-jump .grp:first-child{border-left:0;padding-left:0;}

/* The html scroll-padding (80px) plus this clears the bar and the jump bar. */
.sacr-band,.sacr-entry{scroll-margin-top:calc(var(--nav-h) - 14px);}

/* ── Group bands ────────────────────────────────────────────────────── */
.sacr-band{background:var(--espresso);color:var(--paper);margin-top:88px;}
.sacr-jump + .sacr-band{margin-top:0;}
.sacr-band .wrap{display:flex;align-items:baseline;flex-wrap:wrap;gap:32px;padding-top:40px;padding-bottom:40px;}
.sacr-band .num{font-family:var(--display);font-size:46px;color:var(--champagne);font-weight:500;line-height:1;}
.sacr-band .mid{flex:1 1 320px;min-width:0;}
.sacr-band h2{
  font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:#f5ecd6;line-height:1.3;
}
.sacr-band p{margin-top:8px;font-family:var(--head);font-style:italic;font-size:21px;color:var(--sacr-dark-soft);}
.sacr-band .count{
  margin-left:auto;font-family:var(--display);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sacr-dark-muted);
}
@media(max-width:900px){
  .sacr-band{margin-top:56px;}
  .sacr-band .wrap{padding-top:28px;padding-bottom:28px;gap:20px;}
  .sacr-band .num{font-size:36px;}
  .sacr-band h2{font-size:16px;}
  .sacr-band p{font-size:18px;}
  .sacr-band .count{display:none;}
}

/* ── One sacrament ──────────────────────────────────────────────────── */
.sacr-entry{padding-top:88px;}
.sacr-top{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;}
.sacr-top.img-right{grid-template-columns:7fr 5fr;}
.sacr-top.img-right .sacr-media{order:2;}
.sacr-media{margin:0;min-width:0;}
.sacr-media img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  background:var(--sacr-panel);border:1px solid var(--rule);
}
.sacr-media figcaption{
  margin-top:14px;font-family:var(--display);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);line-height:1.7;
}
.sacr-text{min-width:0;}
.sacr-text h3{
  font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,46px);
  letter-spacing:.02em;line-height:1.08;margin-top:14px;
}
.sacr-latin{font-family:var(--head);font-style:italic;font-size:21px;color:var(--muted);margin-top:6px;}
.sacr-def{font-family:var(--head);font-size:clamp(20px,1.8vw,23px);line-height:1.5;margin-top:26px;}
.sacr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.sacr-chip{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule);padding:9px 14px;
  font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
}
.sacr-sw{width:14px;height:14px;border-radius:50%;border:1px solid var(--gold);flex:none;}
.sacr-effects{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule);}
.sacr-effects h4,.sacr-scr h4{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);
}
.sacr-effects p{font-size:19px;line-height:1.6;margin-top:14px;}

.sacr-triad{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
}
.sacr-triad > div{padding:28px 32px;min-width:0;}
.sacr-triad > div + div{border-left:1px solid var(--rule);}
.sacr-triad dt{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);
}
.sacr-triad dd{margin-top:10px;font-size:18px;line-height:1.55;}

.sacr-scr{margin-top:56px;}
.sacr-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px 40px;margin-top:14px;}
.sacr-quotes blockquote{padding-top:16px;border-top:1px solid var(--rule);min-width:0;}
.sacr-quotes blockquote p{font-family:var(--head);font-style:italic;font-size:20px;line-height:1.5;}
.sacr-quotes cite{
  display:block;margin-top:8px;font-family:var(--display);font-style:normal;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
}
.sacr-saint{margin:48px auto 0;max-width:760px;padding:32px 36px;background:var(--sacr-panel);text-align:center;}
.sacr-saint blockquote p{font-family:var(--head);font-style:italic;font-size:23px;line-height:1.4;margin-top:14px;}
.sacr-saint cite{
  display:block;margin-top:12px;font-family:var(--display);font-style:normal;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
@media(max-width:900px){
  .sacr-entry{padding-top:56px;}
  .sacr-top,.sacr-top.img-right{grid-template-columns:1fr;gap:32px;}
  .sacr-top.img-right .sacr-media{order:0;}
  .sacr-media{max-width:460px;}
  .sacr-triad{grid-template-columns:1fr;margin-top:40px;}
  .sacr-triad > div{padding:20px 0;}
  .sacr-triad > div + div{border-left:0;border-top:1px solid var(--rule);}
  .sacr-scr{margin-top:40px;}
  .sacr-quotes{gap:20px;}
  .sacr-saint{padding:24px 20px;margin-top:36px;}
}

/* ── Close ──────────────────────────────────────────────────────────── */
.sacr-close{padding:120px 0 96px;}
.sacr-close .star{text-align:center;color:var(--gold);font-size:22px;}
.sacr-colophon{
  text-align:center;font-family:var(--head);font-style:italic;font-size:23px;line-height:1.45;
  max-width:780px;margin:18px auto 0;
}
.sacr-lists{margin-top:72px;background:var(--sacr-panel);padding:48px;}
.sacr-lists h2{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
.sacr-plain{list-style:none;margin-top:16px;font-size:18px;line-height:1.55;}
.sacr-plain li{padding:12px 0;border-top:1px solid var(--rule);}
.sacr-plain a{font-weight:600;}
.sacr-plain .d{color:var(--muted);}
.sacr-endrow{display:flex;justify-content:center;margin-top:56px;}
.sacr-note{font-family:var(--head);font-style:italic;font-size:18px;color:var(--muted);text-align:center;max-width:520px;}
@media(max-width:900px){
  .sacr-close{padding:72px 0 64px;}
  .sacr-colophon{font-size:21px;}
  .sacr-lists{padding:24px 20px;margin-top:48px;}
}

@media print{
  .sacr-jump{display:none;}
  .sacr-index{box-shadow:none;}
  .sacr-band{background:none;color:var(--ink);border-top:1px solid var(--ink);}
  .sacr-band h2,.sacr-band .num,.sacr-band p{color:var(--ink);}
  .sacr-media,.sacr-triad,.sacr-quotes blockquote{break-inside:avoid;}
}