/* ============================================================
   chaplet-of-divine-mercy.css — rules from styles.css used by one page, /devotions/chaplet-of-divine-mercy.
   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{
  .dm-controls{display:none;}
  .dm-page{background:#fff !important;color:#241a10 !important;padding:0 0.5in;}
  .dm-page .dm-figure{display:none !important;}
  .dm-page .dm-grid{display:block;}
  .dm-page .dm-prayer{border-left-color:#ccc;}
  .dm-page .dm-step{color:#333;}
  .dm-page .dm-rubric,.dm-page .dm-cap{color:#666;}
  .dm-page .dm-decade{border-color:#ccc;background:none;}
}

/* ───────────────── DIVINE MERCY PAGE (DARK THEME) ───────────────── */
.dm-page{
  --dm-ink:#1a120b;
  --dm-ink-2:#241811;
  --dm-gold:#c9a24b;
  --dm-gold-soft:#e3c987;
  --dm-parchment:#efe4cf;
  --dm-parchment-dim:#bda985;
  --dm-rule:rgba(201,162,75,.28);
  --dm-ray-red:#d24b4b;
  --dm-ray-blue:#dfeaf2;

  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    var(--dm-ink);
  color:var(--dm-parchment);
  font-family:var(--body);
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  padding:clamp(1.25rem,4vw,3rem) clamp(1rem,5vw,2rem) 4rem;
}
.dm-wrap{max-width:1180px;margin:0 auto;}

/* The two rays of the Divine Mercy image, pale and red, falling across a bare
   floor — "The pale ray stands for the Water which makes souls righteous. The
   red ray stands for the Blood which is the life of souls" (Diary, 299). Base
   colour from .pagehead-dark, artwork layered by .pagehead-image, as on the
   other devotion heads.

   The source frame is close to half unlit: the rays fall down its left, the
   right is dark wall. Left at its full width the band would scale the file by
   width and that empty half would sit under the title. So the file is cropped
   to the lit portion, which leaves it tall enough that the band crops vertically
   instead and the diagonal sweeps the whole width. The band is then held just
   below centre, where both rays are in frame with the gap between them still
   legible — higher and the lit floor climbs toward the title, lower and the top
   of the pale ray is lost. The two positions match because below the breakpoint
   the band grows tall enough for cover to scale by height, which leaves no
   vertical travel to spend: the vertical component goes inert there and only the
   centring still bites, so holding one value keeps the crop from jumping when a
   resize crosses the breakpoint.

   The title column lands on the unlit side of the pale ray, so the h1 keeps
   about 10:1 even against the brightest pixel the veil lets through. */
.dm-pagehead{
  --pagehead-image:url("images/chaplet-of-divine-mercy-masthead.webp");
  --pagehead-position:center 45%;
  --pagehead-position-mobile:center 45%;
  border-bottom:1px solid rgba(201,162,75,.28);
}
.dm-pagehead .a-emblem{filter:drop-shadow(0 2px 10px rgba(201,162,75,.35)) brightness(1.1);}
.dm-pagehead h1{font-family:var(--display);color:#efe4cf;}
.dm-controls{
  background:#1a120b;padding:24px 0 0;
}

/* language toggle (dark variant) */
.dm-lang-row .rosary-lang-label{color:#bda985;}
.dm-lang-row .rosary-lang-label.rosary-lang-active{color:#e3c987;}
.dm-lang-row .rosary-lang-toggle{
  background:#241811;border-color:rgba(201,162,75,.28);
}
.dm-lang-row .rosary-lang-toggle .rosary-lang-thumb{background:#c9a24b;}

/* two-column body */
.dm-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}

/* sticky image column */
.dm-figure{position:sticky;top:1.5rem;margin:0;}
.dm-frame{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--dm-rule);
  box-shadow:0 1px 0 rgba(227,201,135,.12) inset, 0 24px 60px -28px rgba(0,0,0,.85);
  background:
    radial-gradient(80% 60% at 50% 18%, rgba(223,234,242,.10), transparent 55%),
    radial-gradient(75% 70% at 50% 78%, rgba(210,75,75,.10), transparent 55%),
    var(--dm-ink-2);
}
.dm-frame::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(201,162,75,.22);
  border-radius:9px;pointer-events:none;
}
.dm-frame img{display:block;width:100%;height:100%;object-fit:contain;}
.dm-slideshow{position:relative;aspect-ratio:2/3;}
.dm-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;}
.dm-slide:first-child{position:relative;width:100%;height:100%;}
.dm-slide-active{opacity:1;}
.dm-cap{
  text-align:center;font-style:italic;color:var(--dm-parchment-dim);
  font-size:.92rem;margin:.85rem .4rem 0;line-height:1.5;
}
.dm-cap b{color:var(--dm-gold-soft);font-style:normal;font-weight:600;font-size:1.09rem;}

.dm-section{margin:.5rem 0 0;}
.dm-step{
  display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--head);font-weight:600;font-size:1.5rem;
  color:var(--dm-gold-soft);margin:0 0 .15rem;letter-spacing:.01em;
}
.dm-rubric{color:var(--dm-parchment-dim);font-style:italic;margin:.1rem 0 .7rem;font-size:.98rem;}

.dm-prayer{
  border-left:2px solid var(--dm-rule);padding:.15rem 0 .15rem 1.1rem;margin:.6rem 0;
}
.dm-repeat{
  display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dm-gold);border:1px solid var(--dm-rule);border-radius:999px;
  padding:.18rem .6rem;margin:.2rem 0 .5rem;
}
.dm-decade{
  background:linear-gradient(180deg, rgba(201,162,75,.06), transparent);
  border:1px solid var(--dm-rule);border-radius:12px;padding:1rem 1.15rem;margin:.8rem 0;
}
.dm-decade h4{
  font-family:var(--head);font-size:1.15rem;color:var(--dm-gold-soft);
  margin:0 0 .5rem;font-weight:600;
}
.dm-hr{border:0;height:1px;background:var(--dm-rule);margin:2.4rem 0;}
.dm-quote{
  font-family:var(--head);font-style:italic;font-size:1.45rem;line-height:1.4;
  text-align:center;color:var(--dm-parchment);margin:2.6rem auto 0;max-width:30rem;
}
.dm-colophon{
  text-align:center;color:var(--dm-parchment-dim);font-size:.88rem;
  margin:2rem 0 0;font-style:italic;line-height:1.55;
}

/* responsive */
@media(max-width:820px){
  .dm-grid{grid-template-columns:1fr;}
  .dm-figure{position:static;top:auto;max-width:440px;margin:0 auto 1rem;}
  .dm-page{font-size:17px;}
}
@media(prefers-reduced-motion:no-preference){
  .dm-fade{opacity:0;transform:translateY(10px);animation:dmIn .9s ease forwards;}
}