/* ============================================================
   chaplets.css — rules from styles.css used by the pages it is linked from: /devotions/chaplet-of-divine-mercy, /devotions/chaplet-of-st-michael, /devotions/scriptural-rosary.
   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.
   ============================================================ */

/* Luca Giordano, The Fall of the Rebel Angels (c.1666) */
.michael-head{
  --pagehead-image:url("images/chaplet-of-st-michael-masthead.webp");
  --pagehead-position:center 3%;
  --pagehead-position-mobile:center 4%;
}

.rosary-lang-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;}
.rosary-lang-label{
  font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;cursor:default;
}
.rosary-lang-label.rosary-lang-active{color:var(--gold-deep);font-weight:600;}
.rosary-lang-toggle{
  position:relative;width:52px;height:28px;border-radius:14px;border:1px solid var(--rule);
  background:var(--paper-card);cursor:pointer;transition:background .25s,border-color .25s;
  padding:0;
}
.rosary-lang-thumb{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--gold-deep);transition:transform .25s,background .25s;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.rosary-how-to-body ol,.rosary-how-to-body ul{margin:0 0 14px 24px;}
.rosary-how-to-body li{margin-bottom:6px;}

.rosary-fruit{text-align:center;font-family:var(--head);font-size:17px;color:var(--gold-deep);margin-bottom:24px;}

.rosary-prayer-block{margin-bottom:20px;}

.rosary-verses{margin:24px 0;}
.rosary-bead{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.rosary-bead:first-child{border-top:1px solid var(--rule);}
.rosary-bead-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:var(--gold-deep);color:var(--paper);
  font-family:var(--display);font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.rosary-bead-content{flex:1;min-width:0;}
.rosary-scripture{
  font-family:var(--head);font-style:italic;font-size:19px;
  line-height:1.55;color:var(--ink);
}
.rosary-ref{
  font-family:var(--display);font-style:normal;font-size:11px;
  letter-spacing:.1em;color:var(--muted);white-space:nowrap;
}

.rosary-decade{scroll-margin-top:90px;}

/* ── ILLUSTRATED MYSTERIES — image-right sticky layout ──
   Used by the Joyful, Sorrowful, and Glorious sets on the Scriptural Rosary page. Each
   mystery is a two-column card: the meditation on the left, a large image
   on the right that stays stationary while the text is read, advancing to
   the next image only at the next mystery (like the Stations of the Cross). */
.sr-mystery{
  position:relative;
  width:min(1120px,94vw);
  margin:0 0 48px;
  margin-left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.6rem,3vw,3.2rem);
  align-items:start;
  /* Dark background matching the Stations of the Cross page. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    #1a120b;
  border:1px solid rgba(201,162,75,.28);
  border-radius:14px;
  padding:clamp(1.4rem,3vw,2.6rem);
}
.sr-text{min-width:0;}
/* A set with no paintings yet: the same dark panel, one column, at the
   reading measure rather than the full illustrated width. */
.sr-mystery.sr-mystery-plain{width:auto;margin-left:0;transform:none;grid-template-columns:minmax(0,1fr);}
.sr-text .rosary-fruit{text-align:left;}

/* On the dark Stations-style background, lighten the inner text to the
   parchment palette so the meditations stay readable. */
.sr-mystery .station-number{color:#c9a24b;}
.sr-mystery .rosary-fruit{color:#e3c987;}
.sr-mystery .rosary-bead{border-bottom-color:rgba(201,162,75,.2);}
.sr-mystery .rosary-bead:first-child{border-top-color:rgba(201,162,75,.2);}
.sr-mystery .rosary-bead-num{background:#c9a24b;color:#1a120b;}
.sr-figure{position:sticky;top:84px;margin:0;align-self:start;}
.sr-frame{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 24px 56px -30px rgba(40,28,8,.55);
  background:var(--paper-card);
}
.sr-frame::after{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(125,98,36,.20);border-radius:7px;pointer-events:none;
}
.sr-frame img{display:block;width:100%;height:auto;}
.sr-cap{
  text-align:center;font-style:italic;color:#bda985;
  font-size:.92rem;margin:.85rem .3rem 0;line-height:1.5;
}
.sr-cap b{
  display:block;color:#e3c987;font-style:italic;font-weight:600;
  font-size:1.08rem;margin-bottom:.3rem;
}
.sr-cap cite{
  font-family:var(--display);font-style:normal;font-size:11px;
  letter-spacing:.1em;color:#bda985;
}
@media(max-width:880px){
  .sr-mystery{
    width:auto;margin-left:0;transform:none;
    grid-template-columns:1fr;
    padding:clamp(1.1rem,4vw,1.6rem);
  }
  .sr-figure{position:static;top:auto;order:-1;margin-bottom:1.3rem;}
}
@media print{
  .sr-mystery{
    width:auto;margin-left:0;transform:none;
    grid-template-columns:1fr;border-color:#ccc;
    background:none;
    page-break-inside:avoid;
  }
  .sr-mystery .station-number{color:#7d6224;}
  .sr-mystery .rosary-fruit,
  .sr-mystery .sr-cap b{color:#7d6224;}
  .sr-mystery .rosary-bead-num{background:#7d6224;color:#fff;}
  .sr-figure{position:static;top:auto;}
}

@media(max-width:560px){
  .rosary-scripture{font-size:17px;}
  .rosary-bead-num{width:28px;height:28px;font-size:11px;}
  .rosary-bead{gap:10px;}
}