/* ============================================================
   sacraments.css — rules from styles.css used by one page, /sacraments.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   The page's own rules follow, below the second rule.
   ============================================================ */

/* The dome of the Baptistery of Neon in Ravenna, photographed from the font
   floor: the Baptism of Christ in the central medallion, the twelve apostles
   circling it, the whole of it in fifth-century mosaic.

   Centred on both axes, and there is nothing to decide — the picture is
   radially symmetric about the medallion, so any offset reads as a mistake,
   and `cover` in a band this wide keeps a horizontal strip through the middle,
   which is exactly the strip the medallion is in. The Baptism lands behind the
   h1, which is the one thing this page is about first.

   The veil opens at .56 rather than the shared .62. This is a mosaic, not a
   painted surface: it is bright (mean luminance about 117 of 255) and it is
   made of thousands of small tesserae, some of them near-white, so it is the
   worst kind of ground to set type over — a smooth dark wall forgives a thin
   veil, a field of white specks does not. .56 is the point where the dome's
   gold still reads as gold and the title clears 3:1 even against a pure-white
   tessera directly behind a letter, not merely against the average. Lift it
   and the specks start cutting into the type; drop it further and the mosaic
   goes to an undifferentiated dark, which wastes the only reason to put a
   picture here. The bottom stays at the shared .93, because the attribution
   line is the smallest type in the band and sits on it. */
.sacraments-head{
  --pagehead-image:url("images/sacraments-masthead.webp");
  --pagehead-position:center;
  --pagehead-position-mobile:center;
  --pagehead-veil:linear-gradient(180deg,rgba(26,18,11,.56) 0%,rgba(26,18,11,.72) 70%,rgba(26,18,11,.93) 100%);
}
/* The second masthead picture: Rogier van der Weyden's Seven Sacraments
   Altarpiece, cross-fading over the dome every seven seconds (the script is
   on /sacraments). It is a layer of its own rather than a second ::before so
   it can fade; with no z-index it paints over ::before and under ::after and
   the text, exactly where the dome sits. The altarpiece is a bright, white
   Gothic interior, much lighter than the mosaic, so it takes the shared
   heavier veil rather than the dome's .56. Centred: the Crucifixion is the
   middle panel and lands behind the title at every width. */
.sacraments-slide{
  position:absolute;inset:-2%;pointer-events:none;opacity:0;
  background:
    linear-gradient(180deg,rgba(26,18,11,.66) 0%,rgba(26,18,11,.80) 70%,rgba(26,18,11,.93) 100%),
    radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.08),rgba(26,18,11,.34) 68%),
    var(--slide-image,none) center / cover no-repeat;
  filter:saturate(.72) sepia(.12) contrast(1.08);transform:scale(1.025);
  transition:opacity 1.6s ease-in-out;
}
/* Both credits share one grid cell so the band does not jump in height when
   they change places. */
.sacraments-credits{display:grid;}
.sacraments-credits .pagehead-credit{grid-area:1/1;opacity:0;transition:opacity 1.6s ease-in-out;}
@media(prefers-reduced-motion:reduce){
  .sacraments-slide,.sacraments-credits .pagehead-credit{transition:none;}
}
@media print{.sacraments-slide{display:none;}}

/* ── sacraments.css — the page's own rules ── */

/* ── 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 :where(main, footer) 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;}
}