/* ============================================================
   purgatory.css — rules from styles.css used by one page, /purgatory.
   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).
   ============================================================ */

/* ───────────────── PURGATORY PAGE ───────────────── */
/* This page used to carry a bespoke dark theme: a near-black page ground with
   ember radials and a dark-to-paper gradient breaking at 34%, a black contents
   band, and gilt-on-black mounts around every illustration. It is paper and ink
   now, like /the-mass, /prayers, /sacraments and /last-things, which carry these
   same body components. The gradient in particular had been calibrated for the
   full-viewport hero and broke in the wrong place the moment the head became a
   normal masthead.

   What stayed is the layout, which was never the problem: the contents figure,
   the plate widths, the two-up devotion grid, the title cards and the Luke pull
   quote. The accents that stayed are already the on-paper family the
   sibling page uses — the rust #5d261a of the section headings is the same
   register as /last-things' #8c2f1b drop cap, and it measures 10.6:1 on paper.

   overflow-x:hidden is kept deliberately even though the full-bleed hero that
   needed it is gone. It is no longer propping up a sticky element — the
   contents figure used to be sticky and is not any more, since it now stretches
   to the height of the index beside it — but it is still the guard against a
   stray wide child scrolling the whole page sideways on a phone, which is the
   failure this page shipped with. Dropping it would be an untested change to
   scroll behaviour in a change that is otherwise about the index. */
.page-purgatory{overflow-x:hidden;}
/* The page's plate — Domenico di Michelino's "Dante, Florence and the Divine
   Comedy" (1465, Santa Maria del Fiore, Florence), the terraced mountain of
   Purgatory rising behind the poet with the Duomo at his left. This head used
   to be a bespoke full-viewport hero: place-items:end start, a 132px
   left-aligned title, its own .purgatory-hero-art layer for the picture and
   its own veil stack. All four of those things already exist in
   .pagehead-image, tuned once for every other masthead on the site, so the
   head is the shared component now and only the plate and its veil are
   page-specific. */
.purgatory-head{
  /* The "-michelino" suffix is a deliberate cache-bust, not a naming whim, and
     renaming this file back to the shorter name would break the page again.
     The plate was briefly absent from a deploy, so browsers requested
     images/purgatory-masthead.webp and got a 404 — and because netlify.toml
     gives everything under /images/ a week in the browser and a year at the
     edge, and that rule matches on path without regard to status, they were
     told to remember the 404 for a week. The file returning 200 afterwards
     changed nothing: nothing asked again. A new filename is a new cache key,
     which is the only fix that reaches a reader who already holds the bad
     entry. See the note on the images header block in netlify.toml. */
  --pagehead-image:url("images/purgatory-masthead-michelino.webp");
  /* 25%, not centre. A 1400x380 band shows only the middle ~40% of the
     painting's height, and the three things worth keeping — the crowning
     terrace of the mountain, Dante's face, and the Duomo — sit in a narrow
     horizontal register near the top. Centre drops the terrace and the tops of
     the spires; lower still and the band is nothing but the crowd at the gate. */
  --pagehead-position:center 25%;
  --pagehead-position-mobile:center;
  /* Just over the default. This plate is the opposite problem from the night
     scene it replaces: bright sky, Dante's pink robe, and a gilded city, all
     of it behind the type. .60/.76/.92 is the lightest stack that still holds
     the kicker above AA once the type plate below is added, and it keeps
     marginally more of the picture than the site standard .62/.78/.93. */
  --pagehead-veil:linear-gradient(180deg,rgba(26,18,11,.60) 0%,rgba(26,18,11,.76) 70%,rgba(26,18,11,.92) 100%);
}
/* The kicker is what sets these numbers. #c9a85a is a mid gold, so it is the
   first line to fail as the veil lightens. Measured against the single
   brightest pixel under it — not an average — it runs 5.00:1 here, with
   5.24:1 against the brightest 2%. Everything else has room to spare:
   h1 9.3:1, sub and thesis 8.6:1, credit 6.1:1, all worst-case.
   Measured, not estimated: there is no headless browser in this environment,
   so the band was rebuilt at the real crop geometry with the veil as a per-row
   alpha mask and the type plate as a per-pixel radial mask at the true
   .measure box, the CSS grade applied, then sampled. A blurred-ellipse
   approximation of the plate read a point too optimistic, so the exact
   geometry is what these figures come from. */
/* The thesis keeps its text and its place in the header; what it loses is the
   left rule and the left alignment, which belonged to the old off-centre hero
   and read as a mistake once the head became centred like every other page. */
.purgatory-thesis{
  max-width:680px;
  margin:14px auto 0;
  color:var(--muted-dark);
  font-family:var(--head);
  font-size:clamp(17px,1.25vw,19px);
  line-height:1.55;
}
/* Plain paper, like every other .prayer-toc. The gold hairlines top and bottom
   went with the dark ground — they were edging a black band, and on paper the
   .orn divider in the head does that job, which is how /prayers, /the-mass and
   /sacraments open their contents. */
.purgatory-toc{
  position:relative;
  padding:66px clamp(18px,4vw,56px) 74px !important;
}
.purgatory-toc-head{
  max-width:980px;
  margin:0 auto 34px;
  text-align:center;
}
.purgatory-toc-head h2{
  margin-top:8px;
  color:var(--ink);
  font-size:clamp(32px,4.8vw,56px);
  letter-spacing:.055em;
}
.purgatory-toc-layout{
  display:grid;
  grid-template-columns:minmax(320px,520px) minmax(0,1fr);
  gap:clamp(28px,5vw,58px);
  /* stretch, not start: the plate and the index are one row, so the row's
     height is the taller of the two and both items take it. That is the whole
     mechanism behind the columns matching — see .purgatory-toc-plate. */
  align-items:stretch;
  max-width:1260px;
  margin:0 auto;
}
/* The paper mount the side-image articles use (.aml-frame): paper-card behind
   the plate, the shared rule for the outer line, and a hairline set in from the
   edge so the picture reads as mounted rather than pasted on. The dark original
   bought that effect with two inset box-shadows in gilt over near-black, which
   has no paper equivalent — so it takes the site's paper treatment rather than
   a second invented one. */
.purgatory-toc-figure{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:14px;
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:10px;
  box-shadow:0 24px 56px -30px rgba(40,28,8,.55);
}
/* The plate used to be the img itself at aspect-ratio:3/4, which is why it ran
   taller than the index beside it: a 3/4 box at this column width is ~590px,
   and the index was around 440px, so the picture overhung the cards by the best
   part of a hundred pixels no matter what the index contained.

   Now the picture lives in a flexible box instead of a fixed ratio. The figure
   is a flex column; this wrapper takes flex:1, so it absorbs whatever height is
   left after the caption; and the img fills the wrapper absolutely. Because the
   grid row is sized by the taller item and the index is normally the taller one,
   the index sets the height and the picture is cropped to fit it — the two
   columns end level, and the plate can no longer be the thing that stretches
   the row.

   The hairline moved from the img to this wrapper, and stays a border rather
   than an inset pseudo-element — the same reason it is a border on /sacraments,
   where an absolutely positioned inset line escaped its box on mobile. */
.purgatory-toc-plate{
  position:relative;
  /* flex-basis:0 with a min-height floor, and deliberately no aspect-ratio.
     The distinction matters: an aspect-ratio here would become the plate's flex
     basis, so the plate would contribute a 1:1 height to the grid row's own
     sizing and could once again be the taller of the two columns — which is the
     overhang this change exists to remove. At basis 0 the plate asks the row
     for nothing beyond the floor (the img is absolutely positioned, so the box
     has no in-flow content of its own), the index sets the row height, and
     flex-grow then hands the plate everything left after the caption. Level
     bottoms, with the picture as the side that yields.

     The floor bounds the other direction. If the index ever came out shorter
     than the figure, the plate would stop at 320px rather than collapse, and a
     520-wide column at 320 tall is landscape — so neither the tall failure nor
     the flat one can reappear. */
  flex:1 1 0;
  min-height:320px;
  overflow:hidden;
  border-radius:5px;
  border:1px solid rgba(125,98,36,.20);
}
.purgatory-toc-figure img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* The two standing figures sit a little below the middle of the plate and the
     souls below them lower still, so a centred crop clips the wrong end. */
  object-position:center 52%;
}
.purgatory-toc-figure figcaption,
.purgatory-inline-plate figcaption{
  margin-top:13px;
  color:var(--muted);
  font-size:17px;
  line-height:1.42;
  text-align:center;
}
/* The reference line every plate on the page now carries, in the same voice as
   .cine-credit on /last-things and .pagehead-credit in the mastheads: display
   face, small, wide tracking, upper case.

   It sits inside the figcaption rather than after it, because a <figure> may
   only have its <figcaption> as first or last child — a sibling <p> after the
   caption would leave the caption in the middle and the markup invalid. Inside,
   it still renders where it belongs, at the bottom of the plate.

   No opacity. .cine-credit fades var(--muted) to .7, which composites to about
   3.9:1 on paper and fails AA for text this small; at full strength the same
   colour is 6.6:1 on --paper-card and 6.2:1 on --paper, so the line is legible
   without borrowing a second colour token. */
.plate-credit{
  display:block;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid rgba(221,208,180,.9);
  font-family:var(--display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1.55;
  text-transform:uppercase;
  color:var(--muted);
}
.page-purgatory .prayer-text{font-size:21px;}
/* Same paper mount as the contents figure. This is the base for all five plate
   variants below (-wide-, -split-, -devotion-, -single-, -mary-), which change
   only width and aspect ratio, so they all come along. */
.purgatory-inline-plate{
  max-width:920px;
  margin:0 auto 30px;
  padding:16px;
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:10px;
  box-shadow:0 24px 56px -30px rgba(40,28,8,.55);
}
.purgatory-inline-plate img{
  display:block;
  width:100%;
  max-height:760px;
  object-fit:cover;
  object-position:center 34%;
  border:1px solid rgba(125,98,36,.20);
  border-radius:5px;
}
.purgatory-wide-plate{
  max-width:1120px;
  margin-top:12px;
}
.purgatory-wide-plate img{aspect-ratio:16/8.5;}
.purgatory-split-plate{
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(260px,.42fr);
  gap:22px;
  align-items:center;
  max-width:1040px;
}
.purgatory-split-plate img{aspect-ratio:4/3;}
.purgatory-split-plate figcaption{
  margin:0;
  text-align:left;
  font-size:22px;
  color:var(--muted);
}
.page-purgatory .purgatory-devotion-heading{
  max-width:1000px;
  font-family:var(--head);
  letter-spacing:.055em;
  text-transform:none;
}
.purgatory-devotion-plate{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:1040px;
}
.purgatory-single-plate{
  display:block;
  max-width:920px;
}
.purgatory-devotion-plate img{
  aspect-ratio:4/3;
  max-height:none;
}
.purgatory-devotion-plate figcaption{
  grid-column:1 / -1;
}
.purgatory-mary-plate{
  max-width:840px;
}
.purgatory-mary-plate img{
  aspect-ratio:auto;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center center;
}
.purgatory-title-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.purgatory-title-card{
  min-width:0;
  padding:20px;
  background:linear-gradient(180deg,rgba(154,122,46,.09),rgba(93,38,26,.055));
  border:1px solid rgba(154,122,46,.22);
  border-radius:8px;
}
.purgatory-title-card h3{
  margin:0 0 10px;
  color:#5d261a;
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.35;
  text-transform:uppercase;
}
.purgatory-title-card h3 span{
  display:block;
  margin-top:4px;
  color:#7a5f24;
  font-family:var(--head);
  font-size:18px;
  font-style:italic;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:none;
}
.purgatory-luke-quote{
  margin:24px auto;
  padding:24px clamp(22px,4vw,42px);
  background:linear-gradient(180deg,rgba(93,38,26,.08),rgba(154,122,46,.08));
  border-left:4px solid #8d3b26;
  border-radius:0 8px 8px 0;
  color:#3b2a18;
}
.purgatory-luke-quote cite{
  display:block;
  margin-top:12px;
  color:#7a5f24;
  font-family:var(--display);
  font-size:13px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
@media(max-width:980px){
  .purgatory-toc-layout{grid-template-columns:1fr;}
  /* One column, so there is no second column to match in height: the plate
     takes a ratio of its own again rather than flexing to a neighbour, and the
     min-height floor comes off so it cannot exceed that ratio. */
  .purgatory-toc-figure{max-width:520px;margin:0 auto;}
  /* flex:0 0 auto here, not the basis-0 of the desktop rule: in one column the
     figure's height is its own content, so there is no free space for grow to
     distribute and a basis-0 plate would collapse. The ratio drives it instead,
     which is what the single-column case wants anyway. */
  .purgatory-toc-plate{flex:0 0 auto;aspect-ratio:4/5;min-height:0;}
  .purgatory-split-plate{display:block;}
  .purgatory-split-plate figcaption{margin-top:13px;text-align:center;font-size:18px;}
}
@media(max-width:660px){
  .purgatory-thesis{font-size:17px;}
  .purgatory-toc{padding-left:18px !important;padding-right:18px !important;}
  .page-purgatory .prayer-text{font-size:19px;}
  .purgatory-inline-plate{padding:12px;}
  .purgatory-wide-plate img{aspect-ratio:4/3;}
  .purgatory-devotion-plate{grid-template-columns:1fr;}
  .purgatory-devotion-plate figcaption{grid-column:auto;}
  .purgatory-title-grid{grid-template-columns:1fr;}
  .purgatory-title-card{padding:18px;}
}

/* ── 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-m-10-0-18{margin:10px 0 18px;}
.u-pt-20{padding-top:20px;}
.u-m-8-0-40{margin:8px 0 40px;}
.u-mt-16{margin-top:16px;}
.u-mt-12{margin-top:12px;}
.u-m-24-0-10{margin:24px 0 10px;}
.u-mt-8{margin-top:8px;}
.u-mt-24{margin-top:24px;}
.u-mt-22{margin-top:22px;}
.u-mt-36{margin-top:36px;}
.u-mb-4{margin-bottom:4px;}
.u-m-60-0-20{margin:60px 0 20px;}
.u-bb-none-pb-0.u-bb-none-pb-0{border-bottom:none;padding-bottom:0;}
.u-mb-20{margin-bottom:20px;}
.u-mb-10{margin-bottom:10px;}
.u-fs-17-lh-1p6.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;}