/* ============================================================
   scriptural-rosary.css — rules from styles.css used by one page, /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 (and any family sheet).
   ============================================================ */

/* Padre Pio at prayer, the rosary wound through his hands — the beads he
   called his weapon, and the reason this page exists.

   The artwork came with that quote lettered across the upper left, which would
   have collided with the h1 and read as two competing titles. It could not be
   positioned away: the lettering sits at exactly the height of the crown of
   the head, so no horizontal band contains the face and excludes the words,
   and cropping it out sideways leaves a sliver too narrow to fill a masthead.
   So it is cropped out of the file itself. That has to be done in the file
   rather than here, because the band's travel shrinks as the viewport
   narrows — anything still in the image would surface at some width. The
   words are not lost: they are set as live text in the corner instead, which
   is what .rosary-cry below is for.

   Cropping the words also takes the top of the skull with them, so the band is
   anchored hard at 0%: the frame opens on the brow, the closed eyes, the
   bowed head and the white beard. Both ends of that are deliberate. Anchoring
   at the top keeps the face as high in the band as the source allows, and it
   means every viewport shows the same first row of pixels — the row directly
   below the deleted lettering — instead of drifting into the hands as the band
   grows taller. The face wins over the hands and beads further down because
   the bowed head says *praying* in a way hands alone do not; the beads still
   read at the right edge on wider screens. The pale brow and beard land on the
   right of centre and the veil is heavy over all of it, so the title column
   never rises above about 27% luminance — roughly 8:1 against the h1. */
.rosary-head{
  --pagehead-image:url("images/scriptural-rosary-masthead.webp");
  --pagehead-position:center 0%;
  --pagehead-position-mobile:center 0%;
}

/* The painting's own words, set back into the band as live text. They go in the
   top-right corner for three reasons. It is where the painter put them, only
   mirrored — the figure now occupies the right of the frame, so the words move
   off him instead of over him. It is the one region of the band that is empty
   at every width: the emblem, title and subtitle are centred and begin at the
   64px top padding, so a single line inset above that can never collide with
   them, however the h1 and sub rewrap. And it is dark — the component's veil
   starts at .62 there and the ::after side vignette adds another .54 at the
   edge, so the corner never rises above about 6.5% luminance and this
   parchment gold holds better than 7:1 at every width from 360px up.

   The clamps are sized so the line always finishes above the emblem: at the
   widest, top 34px plus a 25px line still leaves 5px of air. It stays one line
   at every width it needs to, and if it ever wrapped to two it would still
   clear. In print the band is white and the corner is meaningless, so the
   quote drops back into the flow beneath the subtitle. */
.rosary-cry{
  position:absolute;
  z-index:2;
  top:clamp(18px,2.2vw,34px);
  right:clamp(16px,3.4vw,52px);
  margin:0;
  max-width:min(60vw,360px);
  font-family:var(--head);
  font-style:italic;
  font-weight:600;
  font-size:clamp(15px,1.55vw,21px);
  line-height:1.2;
  text-align:right;
  color:#ecdcb0;
  text-shadow:0 2px 18px rgba(12,7,3,.75);
}

/* ───────────────── SCRIPTURAL ROSARY ───────────────── */
.rosary-tabs{display:inline-flex;gap:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin-bottom:20px;}
.rosary-tab{
  font-family:var(--display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 28px;border:none;cursor:pointer;
  background:var(--paper-card);color:var(--muted);transition:background .2s,color .2s;
}
/* The line under the tabs, and the small line under the Luminous heading: the
   Joyful, Sorrowful and Glorious are the traditional fifteen; the Luminous
   (2002) are optional and come after them. */
.rosary-sets-note{
  max-width:34em;margin:-6px auto 18px;font-family:var(--head);font-style:italic;
  font-size:16px;line-height:1.5;color:var(--muted);
}
.rosary-set-note{
  display:block;margin-top:6px;font-family:var(--head);font-style:italic;font-weight:500;
  font-size:16px;letter-spacing:.02em;
}
.rosary-how-to-note{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:15px;line-height:1.6;color:var(--muted);
}
.rosary-gloss{
  margin:4px 0 0;font-family:var(--body);font-style:normal;font-size:15px;
  line-height:1.5;color:var(--muted);
}
.rosary-gloss::before{content:'\2014\a0';}

/* ── ROSARY FIELD ──
   The opening prayers, the Joyful/Sorrowful/Glorious mystery sets, and the
   closing prayers all sit on one continuous dark field — the same deep
   brown-black with a faint gold glow used by the Stations of the Cross — so
   the whole devotion reads like that page from top to bottom, instead of the
   prayers floating on light parchment above and below the dark mysteries. */
.sr-field{
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(201,162,75,.10), transparent 60%),
    #1a120b;
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,3vw,2.5rem);
}
.sr-field .prayer-text{color:#e7dcc6;}
.sr-field .colophon{color:#bda985;}
/* On the dark field each mystery card matches the Stations' station cards:
   a faint gold wash and gold rule rather than a separate dark island. */
.sr-field .sr-mystery{
  background:linear-gradient(180deg, rgba(201,162,75,.06), transparent);
}
@media print{
  .sr-field{background:none;padding:0;}
  .sr-field .prayer-text{color:#241a10;}
  .sr-field .colophon{color:#666;}
  .sr-field .sr-mystery{background:none;}
}

@media(max-width:560px){
  /* Four sets since the Luminous Mysteries: a 2 × 2 grid on a phone, so the
     row never runs wider than the screen. The 1px gap shows the rule colour
     beneath as the dividing lines. */
  .rosary-tabs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);width:100%;max-width:340px;}
  .rosary-tab{padding:10px 8px;font-size:10px;letter-spacing:.1em;}
  .rosary-gloss{font-size:14px;}
}

/* ───────────────── PRINT ───────────────── */
@media print{
  .rosary-cry{position:static;text-align:center;font-size:12pt;color:#333 !important;margin:0 0 6pt;}
}