/* ============================================================
   last-things.css — rules from styles.css used by one page, /last-things.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   Linked straight after styles.css (and any family sheet).
   ============================================================ */

/* ───────────────── PRINT ───────────────── */
@media print{
  .hell-gallery-section{padding:0 0.5in;background:white !important;border:none !important;}
  .hell-gallery-wrap{display:block;}
  .hell-gallery-aside{display:none !important;}
  .heaven-gallery-wrap{display:block;}
  .heaven-gallery-aside{display:none !important;}
}

/* ───────────────── CINEMATIC IMAGE SEQUENCE ───────────────── */
.cine-seq{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#0a0604;
  border-radius:2px;
}
.cine-seq img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  will-change:opacity,transform;
  transition:opacity 1.8s ease-in-out;
}
.cine-seq img.cine-active{opacity:1;}

@media(prefers-reduced-motion:no-preference){
  .cine-seq img.cine-active{
    animation:cine-kb 8.8s ease-in-out forwards;
  }
}

.cine-credit{
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  margin-top:12px;
  opacity:.7;
}

@media(prefers-reduced-motion:reduce){
  .cine-seq img{transition:none;animation:none;transform:none;}
  .cine-seq img:first-of-type{opacity:1;}
  .cine-advance-btn{
    position:absolute;inset:0;z-index:2;
    background:none;border:none;cursor:pointer;
    width:100%;height:100%;
  }
  .cine-advance-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;}
}

@media(prefers-reduced-motion:no-preference){
  .cine-advance-btn{display:none;}
}
.heaven-gallery-wrap{
  display:grid;
  grid-template-columns:1fr 680px;
  gap:48px;
  max-width:1440px;
  margin:0 auto;
  align-items:start;
}
.heaven-gallery-aside{position:relative;}
.heaven-gallery-sticky{
  position:sticky;
  top:32px;
}
.heaven-gallery-section .cine-seq{background:#0a1220;}
.heaven-gallery-section .cine-credit{color:var(--muted-dark);opacity:.5;}
@media(max-width:1200px){
  .heaven-gallery-wrap{
    grid-template-columns:1fr 480px;
  }
}
@media(max-width:960px){
  .heaven-gallery-wrap{
    grid-template-columns:1fr;
    max-width:var(--measure);
    gap:32px;
  }
  .heaven-gallery-aside{order:-1;}
  .heaven-gallery-sticky{position:static;}
}

/* ───────────────── HELL + GALLERY SIDE-BY-SIDE ───────────────── */
.hell-gallery-section{
  padding:60px 32px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(80,20,10,.18), transparent 60%),
    linear-gradient(180deg, var(--espresso) 0%, #0e0906 50%, var(--espresso) 100%);
  border-top:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
}
.hell-gallery-header{max-width:1440px;margin:0 auto 0;}
.hell-gallery-wrap{
  display:grid;
  grid-template-columns:1fr 680px;
  gap:48px;
  max-width:1440px;
  margin:0 auto;
  align-items:start;
}
.hell-gallery-text{max-width:var(--measure);}
.hell-gallery-text .prayer-text{color:var(--paper);opacity:.92;}
.hell-gallery-text .prayer-text em{color:var(--muted-dark);}
.hell-gallery-aside{position:relative;}
.hell-gallery-sticky{
  position:sticky;
  top:32px;
}
.hell-gallery-section .cine-credit{color:var(--muted-dark);opacity:.5;}
@media(max-width:1200px){
  .hell-gallery-wrap{
    grid-template-columns:1fr 480px;
  }
}
@media(max-width:960px){
  .hell-gallery-wrap{
    grid-template-columns:1fr;
    max-width:var(--measure);
    gap:32px;
  }
  .hell-gallery-aside{order:-1;}
  .hell-gallery-sticky{position:static;}
}
@media(max-width:560px){
  .hell-gallery-section{padding:40px 20px;}
}

/* SACRAMENTS PAGE — the body of /sacraments (index, jump bar, group bands,
   one entry per sacrament) lives in sacraments.css, under the .sacr-* prefix.
   Only its masthead, .sacraments-head above, stays here with the other heads. */
/* ───────────────── Last Things illuminated redesign ───────────────── */
.page-last-things{
  background-color:#f1e9d6;
  background-image:
    radial-gradient(900px 520px at 12% 0%, rgba(154,122,46,.12), transparent 62%),
    radial-gradient(900px 620px at 92% 28%, rgba(126,43,24,.08), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.036'/%3E%3C/svg%3E");
}
.last-things-hero{
  position:relative;
  overflow:hidden;
  padding:78px 0 48px;
  background:
    linear-gradient(180deg, rgba(26,18,11,.96), rgba(36,24,14,.92)),
    radial-gradient(680px 360px at 50% 0%, rgba(201,168,90,.18), transparent 70%);
  border-bottom:1px solid rgba(201,168,90,.36);
}
/* Michelangelo, The Last Judgement — Sistine Chapel altar wall */
.last-things-hero::before{
  content:"";
  position:absolute;
  inset:-2%;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(26,18,11,.62) 0%,rgba(26,18,11,.78) 70%,rgba(26,18,11,.94) 100%),
    radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.10),rgba(26,18,11,.36) 68%),
    url("images/last-things/last-judgment.webp") center 29% / cover no-repeat;
  filter:saturate(.72) sepia(.12) contrast(1.08);
  transform:scale(1.025);
}
.last-things-hero::after{
  content:"";
  position:absolute;
  inset:18px;
  pointer-events:none;
  border:1px solid rgba(201,168,90,.22);
  box-shadow:inset 0 0 0 5px rgba(26,18,11,.38);
}
.last-things-hero .a-emblem{filter:drop-shadow(0 0 26px rgba(201,168,90,.44)) brightness(1.08);}
.last-things-hero h1{color:#f5ecd6;font-size:clamp(42px,7vw,82px);letter-spacing:.075em;text-shadow:0 3px 24px rgba(0,0,0,.42);}
.last-things-predella{
  position:relative;
  padding:58px 24px 68px !important;
  background:var(--espresso);
  border-top:1px solid rgba(201,168,90,.34);
  border-bottom:1px solid rgba(201,168,90,.34);
}
.last-things-predella::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(760px 320px at 50% -10%, rgba(201,168,90,.14), transparent 72%);
}
.last-things-predella-head{position:relative;z-index:1;text-align:center;margin:0 auto 34px;}
.last-things-predella-head h2{margin-top:8px;color:#efe4cf;font-size:clamp(26px,3.5vw,40px);letter-spacing:.06em;}
.last-things-niches{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.last-things-niche{display:grid;justify-items:center;gap:8px;color:#e9ddc4;text-align:center;}
.last-things-niche:hover{color:var(--champagne);}
.last-things-frame{width:100%;aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(201,168,90,.54);border-radius:999px 999px 8px 8px;background:#0f0a06;box-shadow:inset 0 0 0 5px var(--espresso), inset 0 0 0 6px rgba(201,168,90,.25), 0 20px 46px rgba(0,0,0,.36);}
.last-things-frame img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .55s ease, opacity .3s ease;}
.last-things-niche:hover img{transform:scale(1.045);opacity:1;}
.last-things-num{margin-top:10px;font-family:var(--head);font-size:30px;line-height:1;color:var(--champagne);letter-spacing:.12em;}
.last-things-niche strong{font-family:var(--head);font-size:26px;line-height:1.05;color:#f1e6cc;}
.last-things-niche em{color:#a8946f;font-size:16px;line-height:1.35;}
.last-things-subnav{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px;}
.last-things-subnav a{border:1px solid rgba(201,168,90,.32);border-radius:999px;color:#cdbd9c;font-family:var(--display);font-size:11px;letter-spacing:.16em;padding:8px 14px;text-transform:uppercase;}
.last-things-altarpiece{margin:36px 0;padding:22px;background:var(--espresso);border:1px solid rgba(201,168,90,.5);border-radius:7px;box-shadow:inset 0 0 0 5px var(--espresso), inset 0 0 0 6px rgba(201,168,90,.24), 0 18px 42px rgba(26,18,11,.22);}
.last-things-altarpiece > figcaption{text-align:center;margin-bottom:16px;}
.last-things-altarpiece > figcaption span{color:var(--champagne);font-family:var(--display);font-size:11px;letter-spacing:.28em;text-transform:uppercase;}
.last-things-diptych{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.last-things-diptych > figcaption{grid-column:1/-1;}
.last-things-altarpiece img{display:block;width:100%;height:auto;border:1px solid rgba(201,168,90,.38);border-radius:4px;}
.last-things-subsection{margin-top:34px;padding-top:28px;border-top:1px solid rgba(154,122,46,.26);}
.last-things-subsection h4{margin:0 0 14px;font-family:var(--head);font-size:clamp(24px,3vw,32px);line-height:1.1;color:#5d261a;letter-spacing:.02em;}
/* Doctrinal notes. The page states defined teaching, traditional theological
   explanation, and devotional imagery side by side, so the distinctions have to
   be visible as well as stated: a note is set as a marginal gloss — narrower
   measure, ranged left rather than justified — and never reads as part of the
   meditation it qualifies. Placed in both the parchment body and the two dark
   gallery sections, hence the overrides further down. */
.lt-note{
  margin:22px 0 0;
  padding:15px 20px;
  border-left:3px solid rgba(154,122,46,.52);
  border-radius:0 5px 5px 0;
  background:rgba(154,122,46,.07);
  font-size:17px;
  line-height:1.6;
  text-align:left;
  color:var(--muted);
}
.lt-note strong{color:#5d261a;}
.lt-note + .prayer-text{margin-top:18px;}
.lt-frame{font-size:.98em;}
.heaven-gallery-text .lt-note,
.hell-gallery-text .lt-note{
  border-left-color:rgba(201,168,90,.5);
  background:rgba(246,241,230,.06);
  color:var(--muted-dark);
  opacity:.9;
}
.heaven-gallery-text .lt-note strong,
.hell-gallery-text .lt-note strong{color:var(--champagne);}
@media(max-width:620px){.lt-note{padding:13px 15px;font-size:16px;}}
.last-things-single img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:760px;
  margin-inline:auto;
  background:#0f0a06;
}
@media(max-width:940px){.last-things-niches{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;}}
@media(max-width:620px){
  .last-things-hero{padding:52px 0 34px;}
  .last-things-hero::before{background-position:center 38%;}
  .last-things-hero::after{inset:10px;}
  .last-things-niches{grid-template-columns:1fr;max-width:330px;}
  .last-things-diptych{grid-template-columns:1fr;}
}

/* ── Single-element styles, once written inline on the page ──
   Each class carries what one style="" attribute said. They sit last in
   the page's cascade, as the attributes did; where a rule elsewhere
   matched the same element more specifically, the class is doubled so it
   still wins, exactly as the attribute won. */
.u-pt-20{padding-top:20px;}
.u-mb-22{margin-bottom:22px;}
.u-mt-16.u-mt-16{margin-top:16px;}
.u-m-8-0-40{margin:8px 0 40px;}
.u-m-24-0-10{margin:24px 0 10px;}
.u-mt-18.u-mt-18{margin-top:18px;}
.u-mt-24{margin-top:24px;}
.u-pt-0{padding-top:0;}
.u-m-60-0-20{margin:60px 0 20px;}
.u-bb-none-pb-0.u-bb-none-pb-0.u-bb-none-pb-0.u-bb-none-pb-0.u-bb-none-pb-0{border-bottom:none;padding-bottom:0;}
.u-mb-20{margin-bottom:20px;}
.u-mb-24{margin-bottom:24px;}
.u-mb-10{margin-bottom:10px;}
.u-fs-17-lh-1p6{font-size:17px;line-height:1.6;}
.u-m-20-0-10{margin:20px 0 10px;}
.u-mt-40{margin-top:40px;}
.u-ta-center-mt-24{text-align:center;margin-top:24px;}