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

/* ═══════════════════════════════════════════════
   LENTEN REFLECTION — ECCE HOMO
   ═══════════════════════════════════════════════
   A reading page rather than a devotion to be prayed: the Sorrowful Mysteries
   walked slowly, with five witnesses speaking in turn at each step. The five
   are colour-coded and must stay distinguishable from one another — a reader
   has to know at a glance whether the voice is Liguori, a forensic pathologist,
   the cloth in Turin, a mystic, or a prophet — so this page carries its own
   palette of five accents beside the house gold.
   The dark masthead opens onto the site's paper, as the reading pages do. This
   one was briefly set dark throughout, in the manner of .sc-page, and it did
   not survive contact with the material: five accents that stay separable from
   one another and legible on espresso is a much harder brief than five on
   paper, and it is a long page to read in reverse contrast.

   The masthead is Ciseri's Ecce Homo, and it is by some distance the palest
   artwork on the site — a white marble palace and a bleached sky occupy most of
   the upper half. Measured across the visible band, the paint runs about 0.52
   mean linear luminance behind the title and 0.62 behind the kicker, which put
   the 12px gold kicker near 2.3:1 under the component's default veil. No veil
   light enough to leave the picture legible fixes that: holding a small gold at
   4.5:1 over paint that bright needs roughly 94% opacity, and at that point
   there is no painting left to look at. So the contrast is bought only where it
   is needed — a moderately deeper veil, plus a soft vignette behind the text
   column alone, which puts the kicker near 4.9:1 and the h1 near 9:1 while the
   portico, the crowned figure and the faces at both edges stay visible.

   On the height: the painting is nearly square (1140×875) and a masthead is a
   wide letterbox, so at cover only a narrow band of it can ever show — the
   default head left about 30% of the canvas visible, which is the row of faces
   and nothing else. Since anything narrower than cover would letterbox the
   sides, the way to show more of the picture is to give the frame more room:
   min-height in vw holds about 52% of the canvas from tablet widths up to
   1500px, which opens the crop from the column capitals down past the crowd
   below the balcony rail. The cap is what a masthead can be without swallowing
   a laptop viewport, so beyond 1500px the share eases back toward 40% as the
   artwork keeps scaling with the window. Below about 440px the container is
   finally taller than it is wide relative to the canvas, cover switches to
   scaling by height, and the whole composition shows top to bottom — so the
   mobile position only has to hold the horizontal centre, where Christ and the
   governor’s wife both sit. */
.lent-pagehead{
  --pagehead-image:url("images/lenten-reflection-masthead.webp");
  --pagehead-position:center 40%;
  --pagehead-position-mobile:center;
  --pagehead-veil:linear-gradient(180deg,rgba(26,18,11,.68) 0%,rgba(26,18,11,.80) 70%,rgba(26,18,11,.93) 100%);
  border-bottom:1px solid rgba(201,162,75,.28);
  min-height:clamp(340px,40vw,600px);
  display:flex;flex-direction:column;justify-content:center;
}
.lent-pagehead .a-emblem{filter:drop-shadow(0 2px 10px rgba(201,162,75,.35)) brightness(1.1);}
.lent-pagehead h1{font-family:var(--display);color:#efe4cf;}

/* ── the page ──
   Set on the site's paper, like every other reading page: the five voices are
   the whole point of this reflection, and five accents that stay distinct from
   one another AND legible on espresso is a harder brief than the same five on
   paper. Each label below is 10.5px uppercase, so each label accent is held
   above 4.5:1 on both the page and the card tint. The rules are a separate,
   brighter track: at 4px of pure colour they are graphical objects, not text,
   so they can run hotter than the label they sit beside and actually read as
   five different hues rather than five shades of the same brown.
   Colour is never the only channel: every voice is named in its label as well,
   which is what carries the distinction for a reader who cannot separate the
   gold, the terracotta and the green. */
.lent-page{
  /* Two tracks for the same five voices. The --c- set colours the small
     uppercase labels, so it stays at AA for text (≥4.5:1 on the paper); the
     --r- set colours only the vertical rules, where the bar is 3:1 for a
     graphical object — which buys the extra chroma that tells five hues apart
     at a glance instead of leaving them all reading as "muted brown". */
  --c-stn:#856512;   /* the Station — the house gold                    4.8:1 */
  --c-doc:#a83c18;   /* the Physician — terracotta                      5.6:1 */
  --c-shr:#1a5f81;   /* the Shroud — the blue of linen in shadow        6.2:1 */
  --c-mys:#6b3ea8;   /* the Mystic — violet, as private revelation      6.5:1 */
  --c-prp:#3c6b2a;   /* the Prophecy — green, for what was planted      5.6:1 */

  --r-stn:#ad7a08;   /* rule only — brighter than its label             3.4:1 */
  --r-doc:#c9421b;   /*                                                 4.4:1 */
  --r-shr:#0f6f9e;   /*                                                 4.9:1 */
  --r-mys:#7d3fc4;   /*                                                 5.5:1 */
  --r-prp:#3f8c2a;   /*                                                 3.7:1 */
  /* tiny uppercase citations, a step quieter than the body but still legible */
  --lent-quiet:#736349;

  font-family:var(--body);font-size:18px;line-height:1.72;
  padding:0 0 5rem;
}
.lent-page > *{max-width:var(--measure);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;}
:where(.lent-page) strong,:where(.lent-page) b{font-weight:600;color:var(--espresso);}
:where(.lent-page) a{border-bottom:1px solid rgba(154,122,46,.35);transition:color .2s,border-color .2s;}
:where(.lent-page) a:hover{border-color:var(--gold);}
:where(.lent-page) h4,:where(.lent-page) h5,:where(.lent-page) h6{font-family:var(--head);color:var(--ink);}
:where(.lent-page) ul{padding-left:1.15rem;}
:where(.lent-page) li{margin:0 0 .5rem;}

/* The standfirst, carried down from the masthead: centred on the measure, and a
   little narrower than the body so it reads as a caption to the header. */
.lent-stand{
  font-family:var(--head);font-style:italic;font-size:1.24rem;line-height:1.5;
  color:var(--gold-deep);text-align:center;
  max-width:calc(33rem + 64px);margin:0 auto;padding-top:2.6rem;
}

/* ── ornament rule ── */
.lent-orn{display:flex;align-items:center;gap:1.1rem;margin:3.2rem auto;}
.lent-orn::before,.lent-orn::after{content:"";flex:1;height:1px;background:var(--rule);}
.lent-orn span{color:var(--gold);font-size:1rem;line-height:1;}

/* ── the two opening panels ── */
.lent-howto{
  background:var(--paper-card);border:1px solid var(--rule);border-radius:4px;
  padding:2.1rem 2.1rem 1.6rem;
}
.lent-howto h4{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 1.1rem;
}
.lent-howto p{font-size:.99rem;}
.lent-howto p:last-child{margin-bottom:0;}
.lent-voices{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.85rem;}
.lent-voices li{border-left:4px solid var(--rule);padding:.15rem 0 .15rem .9rem;font-size:.99rem;line-height:1.6;}
.lent-voices b{
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;display:block;margin-bottom:.2rem;
}
.lent-voices .lent-v-stn{border-left-color:var(--r-stn);} .lent-v-stn b{color:var(--c-stn);}
.lent-voices .lent-v-doc{border-left-color:var(--r-doc);} .lent-v-doc b{color:var(--c-doc);}
.lent-voices .lent-v-shr{border-left-color:var(--r-shr);} .lent-v-shr b{color:var(--c-shr);}
.lent-voices .lent-v-mys{border-left-color:var(--r-mys);} .lent-v-mys b{color:var(--c-mys);}
.lent-voices .lent-v-prp{border-left-color:var(--r-prp);} .lent-v-prp b{color:var(--c-prp);}

/* ── a step of the road ── */
.lent-station{padding-top:2.6rem;padding-bottom:1.4rem;}
.lent-stn-head{margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);}
.lent-stn-num{
  display:block;font-family:var(--display);font-size:11.2px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.5rem;
}
.lent-page h2{
  font-family:var(--head);font-weight:600;font-size:clamp(1.55rem,3.6vw,2.05rem);
  line-height:1.18;color:var(--ink);margin:0;text-wrap:balance;
}
.lent-tradition{
  display:block;margin-top:.45rem;font-family:var(--head);font-style:italic;
  font-size:.95rem;color:var(--muted);
}
.lent-lead{font-family:var(--head);font-style:italic;font-size:1.16rem;line-height:1.55;color:var(--ink);margin:0 0 1.6rem;}
.lent-after{
  font-family:var(--head);font-style:italic;font-size:1.06rem;line-height:1.55;color:var(--muted);
  border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.1rem;
}

/* ── the five voices ── */
.lent-v{border-left:4px solid var(--rule);padding:.15rem 0 .15rem 1.05rem;margin:0 0 1.6rem;}
.lent-v-label{
  display:block;font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:.55rem;
}
.lent-v.lent-stn{border-left-color:var(--r-stn);} .lent-v.lent-stn .lent-v-label{color:var(--c-stn);}
.lent-v.lent-doc{border-left-color:var(--r-doc);} .lent-v.lent-doc .lent-v-label{color:var(--c-doc);}
.lent-v.lent-shr{border-left-color:var(--r-shr);} .lent-v.lent-shr .lent-v-label{color:var(--c-shr);}
.lent-v.lent-mys{border-left-color:var(--r-mys);} .lent-v.lent-mys .lent-v-label{color:var(--c-mys);}
.lent-v.lent-prp{border-left-color:var(--r-prp);} .lent-v.lent-prp .lent-v-label{color:var(--c-prp);}
.lent-v p:last-child{margin-bottom:0;}

/* ── quotations ── */
.lent-page blockquote{
  font-family:var(--head);font-style:italic;font-size:1.1rem;line-height:1.5;
  color:var(--gold-deep);margin:1.05rem 0;padding-left:1.1rem;border-left:1px solid var(--rule);
}
.lent-page blockquote.lent-scr{font-style:normal;font-family:var(--body);font-size:1.06rem;color:var(--ink);}
.lent-page cite{
  display:block;margin-top:.5rem;font-family:var(--display);font-style:normal;font-size:10px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lent-quiet);
}
.lent-q{color:var(--espresso);font-style:italic;}
.lent-gen{font-style:italic;}
.lent-feel{font-family:var(--head);font-style:italic;color:var(--muted);}

/* the versicle, set as the site sets it */
.lent-versicle{
  font-family:var(--body);font-style:italic;font-size:1rem;line-height:1.6;
  border-left:1px solid var(--rule);padding:.15rem 0 .15rem 1.1rem;margin:0 0 1.05rem;
}
.lent-versicle b{font-style:normal;color:var(--gold-deep);font-weight:600;}
/* the sung response */
.lent-sung{margin:1.7rem auto 0;}
.lent-hymn{
  font-family:var(--head);font-style:italic;font-size:1.05rem;line-height:1.45;
  color:var(--gold-deep);text-align:center;max-width:26rem;margin:0 auto 1.05em;
}
.lent-cue{
  display:block;font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lent-quiet);text-align:center;margin-bottom:.6rem;
}
.lent-vr{font-size:.93rem;color:var(--muted);font-style:italic;margin-top:.7rem;text-align:center;}

/* ── panels ── */
.lent-eden,.lent-note,.lent-ponder,.lent-warnbox{
  background:var(--paper-card);border:1px solid var(--rule);border-radius:4px;
  padding:1.5rem 1.6rem;margin:1.9rem 0;
}
.lent-ponder{background:transparent;border-style:dashed;}
.lent-warnbox{border-color:rgba(154,74,44,.34);}
.lent-eden h5,.lent-note h5,.lent-ponder h5,.lent-warnbox h4{
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 .85rem;
}
.lent-warnbox h4{color:var(--c-doc);}
.lent-eden p,.lent-note p,.lent-ponder p,.lent-warnbox p{font-size:1rem;}
.lent-eden p:last-child,.lent-note p:last-child,.lent-ponder p:last-child,.lent-warnbox p:last-child{margin-bottom:0;}
.lent-disc{
  border-top:1px solid var(--rule);margin-top:1.1rem;padding-top:.9rem;
  font-size:.94rem;color:var(--muted);
}

/* ── prophecy pairs ── */
.lent-pair{margin:0 0 1.3rem;padding-left:.1rem;}
.lent-fore{
  font-family:var(--head);font-style:italic;font-size:1.06rem;line-height:1.45;
  color:var(--gold-deep);margin:0 0 .35rem;
}
.lent-fore cite{margin-top:.35rem;}
.lent-then{
  display:block;font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-prp);margin:.35rem 0;
}
.lent-pair p:last-child{margin-bottom:0;font-size:1rem;}

/* ── drill-downs ── */
.lent-page details{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin:1.9rem 0;background:rgba(154,122,46,.045);
}
.lent-page details + details{margin-top:-1.9rem;border-top:none;}
.lent-page summary{
  cursor:pointer;list-style:none;padding:1rem .2rem;position:relative;padding-right:2rem;
  font-family:var(--head);font-weight:600;font-size:1.06rem;color:var(--gold-deep);transition:color .2s;
}
.lent-page summary::-webkit-details-marker{display:none;}
.lent-page summary:hover{color:var(--ink);}
.lent-dd{padding:0 .2rem 1.5rem;}
.lent-dd h6{
  font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:1.5rem 0 .7rem;
}
.lent-dd h6:first-child{margin-top:0;}
.lent-dd p{font-size:1rem;}

/* ── the seven last words ── */
.lent-words{margin:1.7rem 0;border-top:1px solid var(--rule);}
.lent-word{border-bottom:1px solid var(--rule);padding:1.2rem 0 1.2rem 2.7rem;position:relative;}
.lent-word .lent-n{
  position:absolute;left:0;top:1.35rem;font-family:var(--display);font-size:11px;
  font-weight:600;letter-spacing:.14em;color:var(--gold-deep);
}
.lent-word .lent-said{
  font-family:var(--head);font-style:italic;font-size:1.2rem;line-height:1.42;
  margin:0 0 .4rem;color:var(--gold-deep);
}
.lent-word .lent-ref{
  font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lent-quiet);margin:0 0 .6rem;
}
.lent-word .lent-refl{font-size:1rem;margin:0;}

/* ── sources, and the way back out ── */
.lent-foot{
  margin-top:4rem;padding-top:2.2rem;border-top:1px solid var(--rule);
  text-align:center;color:var(--muted);font-size:.95rem;
}
.lent-foot h4{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 1.1rem;
}
.lent-foot-nav{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

@media(max-width:640px){
  .lent-page{font-size:17px;}
  .lent-page > *{padding-left:20px;padding-right:20px;}
  .lent-stand{padding-top:2rem;}
  .lent-howto{padding:1.5rem 1.3rem 1.1rem;}
  .lent-eden,.lent-note,.lent-ponder,.lent-warnbox{padding:1.2rem 1.15rem;}
  .lent-word{padding-left:2.2rem;}
}

@media print{
  .lent-page{font-size:10.5pt;padding:0;}
  .lent-page summary::after{display:none;}
  .lent-station{page-break-before:always;}
  .lent-page blockquote,.lent-eden,.lent-ponder,.lent-note,.lent-warnbox,.lent-word,.lent-pair{page-break-inside:avoid;}
  .lent-page h2,.lent-page h4,.lent-page h5,.lent-page h6,.lent-page summary{page-break-after:avoid;}
  .lent-page a{border:none;}
  .lent-foot-nav{display:none;}
}