/* ============================================================
   angels.css — rules from styles.css used by one page, /angels.
   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{
  .choir-section{background:white !important;border:none !important;}
  .choir-section .choir-card{background:none !important;border-color:#ccc !important;box-shadow:none !important;}
}

/* ════════════════════════════════════════════════════════════════
   ANGELS PAGE
   Sacred-art imagery, the nine choirs as a three-tier hierarchy,
   the three Archangels as cards, and supporting figures.
   ════════════════════════════════════════════════════════════════ */

/* ── Inline source citation (CCC §, ST I q.) ── */
.ccc-ref{
  font-family:var(--display);font-size:.72em;letter-spacing:.06em;
  color:var(--gold-deep);white-space:nowrap;
}
.heaven-gallery-text .ccc-ref{color:var(--champagne);}
.heaven-gallery-text .prayer-text strong{color:var(--champagne);}

/* ── Reusable footnote (numbering, choir placement, etc.) ── */
.prayer-footnote{
  font-family:var(--body);font-size:14px;line-height:1.6;color:var(--muted);
  font-style:italic;margin:20px 0 0;padding-top:12px;
  border-top:1px solid var(--rule);
}

/* ── Framed sacred figure (hero, guardian, fallen) ── */
.angel-fig{margin:0 0 8px;}
.angel-fig img{
  display:block;width:100%;height:auto;border-radius:5px;
  box-shadow:0 10px 34px rgba(26,18,11,.22);
}
.angel-fig figcaption{
  font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);text-align:center;
  margin-top:12px;
}

/* A portrait image floated alongside body prose (guardian / fallen). */
.angel-aside{
  float:right;width:240px;margin:6px 0 18px 28px;
}
@media(max-width:640px){
  .angel-aside{float:none;width:100%;max-width:380px;margin:0 auto 24px;}
}

/* ── The Nine Choirs — three hierarchies, juxtaposed left to right ── */
.choir-hierarchy{
  margin:8px 0 8px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  align-items:start;
}
.choir-tier{margin:0;}
.choir-tier-head{text-align:center;margin:0 0 22px;}
.choir-tier-label{
  font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}
.choir-tier-sub{
  font-family:var(--head);font-style:italic;font-size:20px;
  color:var(--muted);margin-top:4px;
}
/* Within each hierarchy the three choirs stack vertically. */
.choir-grid{
  display:grid;grid-template-columns:1fr;gap:24px;align-content:start;
}
.choir-card{
  background:var(--paper-card);border:1px solid var(--rule);
  border-radius:6px;overflow:hidden;
  box-shadow:0 6px 20px rgba(26,18,11,.10);
  display:flex;flex-direction:column;
}
.choir-card img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;
}
.choir-card-body{padding:18px 20px 22px;text-align:center;display:flex;flex-direction:column;flex:1;}
.choir-rank{
  font-family:var(--display);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);
}
.choir-name{
  font-family:var(--head);font-size:25px;font-weight:600;color:var(--ink);
  margin:4px 0 2px;line-height:1.15;
}
.choir-gloss{
  font-family:var(--head);font-style:italic;font-size:16px;color:var(--muted);
  margin-bottom:10px;
}
.choir-desc{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);}
.choir-ref{
  font-family:var(--display);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:12px;
}

/* ── The Nine Choirs — dark "Stations of the Cross" backdrop ──
   The three hierarchy groups sit on the same warm-ink, soft-gold
   gradient used by the Stations of the Cross page. Card chrome and
   text are re-toned to read against the dark field, and each angel
   image fills its native 4:5 portrait frame. */
.choir-section{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    #1a120b;
  border-top:1px solid rgba(201,162,75,.28);
  border-bottom:1px solid rgba(201,162,75,.28);
}
.choir-section .prayer-text{color:#e7dcc6;}
.choir-section .prayer-text em{color:#efe4cf;}
.choir-section .choir-tier-label{color:#c9a24b;}
.choir-section .choir-tier-sub{color:#bda985;}

.choir-section .choir-card{
  background:linear-gradient(180deg, rgba(201,162,75,.06), transparent), #20160d;
  border:1px solid rgba(201,162,75,.28);
  box-shadow:0 6px 22px rgba(0,0,0,.38);
}
/* Frame hugs the artwork: native 4:5 portrait, filled edge to edge with no
   empty letterbox bars, and no distortion (the source images are 4:5). */
.choir-section .choir-card img{
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  background:#160d06;
}
.choir-section .choir-rank{color:#c9a24b;}
.choir-section .choir-name{color:#efe4cf;}
.choir-section .choir-gloss{color:#bda985;}
.choir-section .choir-desc{color:#e7dcc6;}
.choir-section .choir-ref{color:#bda985;border-top:1px solid rgba(201,162,75,.18);margin-top:auto;}

/* ── The Three Archangels — cards ── */
.archangel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px;
}
.archangel-card{
  background:var(--paper-card);border:1px solid var(--rule);border-radius:6px;
  overflow:hidden;box-shadow:0 6px 20px rgba(26,18,11,.10);
  display:flex;flex-direction:column;
}
.archangel-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top center;}
.archangel-card-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1;}
.archangel-name{
  font-family:var(--head);font-size:27px;font-weight:600;color:var(--ink);
  text-align:center;margin:0;line-height:1.1;
}
.archangel-meaning{
  font-family:var(--head);font-style:italic;font-size:17px;color:var(--gold-deep);
  text-align:center;margin:2px 0 16px;
}
.archangel-meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--muted);
}
.archangel-meta strong{font-family:var(--display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);}

@media(max-width:860px){
  /* Hierarchies stack vertically; each one's choirs return to a row. */
  .choir-hierarchy{grid-template-columns:1fr;gap:36px;}
  .choir-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
  .archangel-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media(max-width:560px){
  .choir-grid,.archangel-grid{grid-template-columns:1fr;gap:22px;max-width:380px;margin-left:auto;margin-right:auto;}
}

/* ── Baltimore Catechism Q&A accordion (reuses .rosary-how-to) ── */
.bc-qa .rosary-how-to summary{font-size:15px;letter-spacing:.04em;text-transform:none;font-family:var(--head);font-weight:600;}
.bc-qa .rosary-how-to-body{font-family:var(--body);}
.bc-answer{margin:0;}

/* ── Scripture timeline ── */
.angel-timeline{list-style:none;margin:8px 0 0;padding:0;}
.angel-timeline li{
  position:relative;padding:0 0 22px 28px;border-left:2px solid var(--rule);margin-left:6px;
}
.angel-timeline li:last-child{border-left-color:transparent;padding-bottom:0;}
.angel-timeline li::before{
  content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--gold-deep);box-shadow:0 0 0 4px var(--paper);
}
.angel-timeline-when{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);display:block;margin-bottom:3px;
}
.angel-timeline-what{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);}
.angel-timeline-ref{font-family:var(--head);font-style:italic;color:var(--muted);}

/* ════════════════════════════════════════════════════════════════
   ANGELS PAGE — isolated overrides (scoped to .page-angels only)
   Everything below is confined to the Angels page (body.page-angels)
   so the Stations of the Cross page, the shared styles, and every
   other page are left untouched.
   ════════════════════════════════════════════════════════════════ */

/* ── CHANGE 2: dark palette, matching /devotions/stations-of-the-cross ── */
body.page-angels{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    #1a120b;
  color:#efe4cf;
}
.page-angels h1,.page-angels h2,.page-angels h3,.page-angels h4{color:#efe4cf;}
.page-angels :where(main, footer) a{color:#e3c987;}
.page-angels :where(main, footer) a:hover{color:#c9a24b;}
.page-angels .prayer-text{color:#e7dcc6;}
.page-angels .prayer-text em{color:#efe4cf;}
.page-angels .prayer-text strong{color:#efe4cf;}
.page-angels .prayer-text a{color:#e3c987;}
.page-angels .prayer-footnote{color:#bda985;border-top-color:rgba(201,162,75,.22);}
.page-angels .colophon{color:#bda985;}
.page-angels .colophon a{color:#e3c987;}
.page-angels .ccc-ref{color:#e3c987;}

/* The Angelic Doctor block — re-toned to the warm-ink Stations palette */
.page-angels .heaven-gallery-section{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    #1a120b;
  border-top:1px solid rgba(201,162,75,.28);
  border-bottom:1px solid rgba(201,162,75,.28);
}

/* Baltimore Catechism accordion */
.page-angels .rosary-how-to{
  background:linear-gradient(180deg, rgba(201,162,75,.06), transparent), #20160d;
  border:1px solid rgba(201,162,75,.28);
}
.page-angels .rosary-how-to summary{color:#c9a24b;}
.page-angels .rosary-how-to-body{color:#e7dcc6;}
.page-angels .bc-answer{color:#e7dcc6;}

/* Scripture timeline */
.page-angels .angel-timeline li{border-left-color:rgba(201,162,75,.28);}
.page-angels .angel-timeline li:last-child{border-left-color:transparent;}
.page-angels .angel-timeline li::before{background:#c9a24b;box-shadow:0 0 0 4px #1a120b;}
.page-angels .angel-timeline-when{color:#c9a24b;}
.page-angels .angel-timeline-what{color:#e7dcc6;}
.page-angels .angel-timeline-ref{color:#bda985;}

/* The Three Archangels — dark cards to match the choir cards */
.page-angels .archangel-card{
  background:linear-gradient(180deg, rgba(201,162,75,.06), transparent), #20160d;
  border:1px solid rgba(201,162,75,.28);
  box-shadow:0 6px 22px rgba(0,0,0,.38);
}
.page-angels .archangel-name{color:#efe4cf;}
.page-angels .archangel-meaning{color:#e3c987;}
.page-angels .archangel-card-body p{color:#e7dcc6;}
.page-angels .archangel-meta{color:#bda985;border-top-color:rgba(201,162,75,.22);}
.page-angels .archangel-meta strong{color:#c9a24b;}

/* ── CHANGE 1: the Nine Choirs — three equal side-by-side columns
   spanning the full content width, each column stacking its three
   cards vertically, collapsing to one column below 900px.
   Added last so these rules win. ── */
.page-angels .choir-hierarchy{ display:flex; flex-wrap:wrap; gap:32px; width:100%; max-width:1180px; margin:0 auto; padding:0 24px; align-items:flex-start; box-sizing:border-box; }
.page-angels .choir-tier{ flex:1 1 0; min-width:280px; }
.page-angels .choir-grid{ display:flex; flex-direction:column; gap:20px; }
.page-angels .choir-card img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
@media (max-width:900px){ .page-angels .choir-tier{ flex:1 1 100%; } }

/* Equal-height choir cards: every card stretches to fill its tier column so
   the three cards in each hierarchy match, and (with the uniform 4:5 images
   above) all nine read as identically sized cards. */
.page-angels .choir-grid{ align-items:stretch; }
.page-angels .choir-card{width:100%;height:100%; }

/* ── The Three Archangels — same image size as the nine-choir cards ──
   The archangel grid now mirrors the .choir-hierarchy container geometry
   exactly (same max-width, padding, gap and three equal columns), and its
   wrapper is a passthrough so no outer .wrap caps it differently. Each
   archangel card therefore renders at the identical width — and so each
   archangel image at the identical size — to a nine-choir card image at
   every viewport width, instead of reading larger. ── */
.page-angels .archangel-wrap{ width:100%; }
.page-angels .archangel-grid{
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  width:100%;
  max-width:1180px;
  margin:8px auto 0;
  padding:0 24px;
  box-sizing:border-box;
}
@media(max-width:900px){
  .page-angels .archangel-grid{ grid-template-columns:1fr; gap:22px; max-width:420px; }
}

/* ── CHANGE 2: enlarge the standalone Guardian Angel image ──
   The floated figure in the "Your Guardian Angel" section (the only
   .angel-aside on this page) renders at roughly twice its former 240px
   width, capped at the content column so it never overflows. Height stays
   auto (inherited from .angel-fig img) so it scales proportionally. This
   does NOT touch the small "Angels" choir image, which stays uniform. */
.page-angels .angel-aside{ width:480px; max-width:100%; }

@media(max-width:640px){

  /* Two pages ran wider than a phone: the angels page's long Scripture
     citations, which .ccc-ref holds on one line, and a bare DOI in the
     references of the Bitter Cup analysis. Both may break on a phone. */
  .ccc-ref{white-space:normal;}
}

/* ── 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-p-40-0-20{padding:40px 0 20px;}
.u-m-10-0-28{margin:10px 0 28px;}
.u-pt-20{padding-top:20px;}
.u-m-8-0-40{margin:8px 0 40px;}
.u-mt-16{margin-top:16px;}
.u-m-24-0-10{margin:24px 0 10px;}
.u-fs-17-lh-1p6{font-size:17px;line-height:1.6;}
.u-m-8-0-24{margin:8px 0 24px;}
.u-m-0-auto{margin:0 auto;}
.u-bb-none.u-bb-none{border-bottom:none;}
.u-maxw-420-m-22-auto-6{max-width:420px;margin:22px auto 6px;}
.u-p-50-0-40{padding:50px 0 40px;}
.u-m-8-0-28{margin:8px 0 28px;}
.u-ta-center-maxw-620-m-0-auto-6.u-ta-center-maxw-620-m-0-auto-6{text-align:center;max-width:620px;margin:0 auto 6px;}
.u-ta-center-maxw-620-m-14-auto-6.u-ta-center-maxw-620-m-14-auto-6{text-align:center;max-width:620px;margin:14px auto 6px;}
.u-ta-center-mt-6{text-align:center;margin-top:6px;}
.u-p-30-0-30{padding:30px 0 30px;}
.u-mt-36{margin-top:36px;}
.u-m-0-0-8{margin:0 0 8px;}
.u-mt-20{margin-top:20px;}
.u-m-0-0-12{margin:0 0 12px;}
.u-mt-18{margin-top:18px;}
.u-p-10-0-30{padding:10px 0 30px;}
.u-ta-center-maxw-600-m-0-auto-28{text-align:center;max-width:600px;margin:0 auto 28px;}
.u-m-0-0-14{margin:0 0 14px;}
.u-m-8-0-36{margin:8px 0 36px;}
.u-angels-27{font-family:var(--head);font-size:21px;line-height:1.7;text-align:center;font-style:italic;}
.u-angels-28{font-family:var(--head);font-size:20px;line-height:1.7;text-align:center;font-style:italic;}
.u-ta-center-mt-14{text-align:center;margin-top:14px;}
.u-mb-10{margin-bottom:10px;}
.u-bb-none-pb-0.u-bb-none-pb-0{border-bottom:none;padding-bottom:0;}
.u-fs-17-lh-1p65{font-size:17px;line-height:1.65;}
.u-m-50-0-20{margin:50px 0 20px;}
.u-mt-40{margin-top:40px;}
.u-ta-center-mt-24{text-align:center;margin-top:24px;}