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

/* ───────────────── SEVEN SORROWS PAGE (DARK THEME) ───────────────── */
.ss-page{
  --ss-ink:#1a120b;
  --ss-ink-2:#241811;
  --ss-gold:#c9a24b;
  --ss-gold-soft:#e3c987;
  --ss-parchment:#efe4cf;
  --ss-parchment-dim:#bda985;
  --ss-rule:rgba(201,162,75,.28);
  --ss-blue-muted:#8aa4c0;

  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    var(--ss-ink);
  color:var(--ss-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;
}
.ss-wrap{max-width:1180px;margin:0 auto;}

/* dark pagehead — Michelangelo's Pieta (1498-99) behind the title. The supplied
   photograph is a cutout on a plain white ground, which the default veil turns to
   grey mud, so the artwork is prepared in the file instead: the white is knocked
   out and the marble seated on a deep espresso ground with a soft halo of its own
   light, the same practice as the rosary masthead whose lettering is cropped out
   of the file. Because the plate is already dark, the veil is lifted from the
   .62/.78/.93 default so the marble still reads under the type. The band is held
   just above centre to keep Our Lady's face above the title and the body of her
   Son across the lower half. */
.ss-pagehead{
  background:linear-gradient(180deg, #1e150e, #1a120b) !important;
  --pagehead-image:url("images/seven-sorrows-masthead.webp");
  --pagehead-position:center 42%;
  --pagehead-position-mobile:center 45%;
  --pagehead-veil:linear-gradient(180deg,rgba(26,18,11,.38) 0%,rgba(26,18,11,.54) 70%,rgba(26,18,11,.82) 100%);
  border-bottom:1px solid rgba(201,162,75,.28);
}
.ss-pagehead .a-emblem{filter:drop-shadow(0 2px 10px rgba(201,162,75,.35)) brightness(1.1);}
.ss-pagehead h1{font-family:var(--display);color:#efe4cf;}

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

/* sticky image column — right side */
.ss-figure{position:sticky;top:1.5rem;margin:0;order:2;}
.ss-prayers{order:1;}
.ss-frame{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--ss-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(201,162,75,.08), transparent 55%),
    var(--ss-ink-2);
}
.ss-frame::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(201,162,75,.22);
  border-radius:9px;pointer-events:none;
}
.ss-frame img{display:block;width:100%;height:auto;object-fit:contain;}
.ss-cap{
  text-align:center;font-style:italic;color:var(--ss-parchment-dim);
  font-size:.92rem;margin:.85rem .4rem 0;line-height:1.5;
}
.ss-cap b{color:var(--ss-gold-soft);font-style:normal;font-weight:600;font-size:1.09rem;}

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

.ss-prayer{
  border-left:2px solid var(--ss-rule);padding:.15rem 0 .15rem 1.1rem;margin:.6rem 0;
}

/* sorrow cards */
.ss-sorrow{
  background:linear-gradient(180deg, rgba(201,162,75,.06), transparent);
  border:1px solid var(--ss-rule);border-radius:14px;
  padding:0;margin:1.8rem 0;overflow:hidden;
}
.ss-sorrow-head{
  display:flex;flex-direction:column;gap:0;margin-bottom:0;
}
.ss-sorrow-img-link{
  display:block;width:100%;overflow:hidden;
  border-bottom:1px solid var(--ss-rule);
  background:rgba(0,0,0,.2);
}
.ss-sorrow-img{
  width:100%;object-fit:contain;
  display:block;
  cursor:pointer;transition:transform .4s ease, filter .4s ease;
}
.ss-sorrow-img:hover{
  transform:scale(1.03);
  filter:brightness(1.08);
}
.ss-sorrow-text{
  padding:1.2rem 1.3rem .2rem;
}
.ss-sorrow-label{
  font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ss-gold);margin:0 0 .2rem;
}
.ss-sorrow-title{
  font-family:var(--head);font-size:1.35rem;font-weight:600;
  color:var(--ss-gold-soft);margin:0;line-height:1.3;
}
.ss-sorrow-body{
  padding:0 1.3rem 1.2rem;
}
.ss-scripture-ref{
  color:var(--ss-parchment-dim);font-style:italic;font-size:.92rem;margin:.6rem 0 .4rem;
}
.ss-scripture{
  font-style:italic;color:var(--ss-parchment);margin:.4rem 0;
  border-left:2px solid var(--ss-rule);padding:.15rem 0 .15rem 1.1rem;
}
.ss-meditation{
  color:var(--ss-parchment);margin:.6rem 0;
  border-left:2px solid var(--ss-rule);padding:.15rem 0 .15rem 1.1rem;
}
.ss-hail-mary{
  font-style:italic;color:var(--ss-parchment-dim);margin:.4rem 0 0;
  font-size:.96rem;
}
.ss-hr{border:0;height:1px;background:var(--ss-rule);margin:2.4rem 0;}
.ss-quote{
  font-family:var(--head);font-style:italic;font-size:1.45rem;line-height:1.4;
  text-align:center;color:var(--ss-parchment);margin:2.6rem auto 0;max-width:30rem;
}
.ss-colophon{
  text-align:center;color:var(--ss-parchment-dim);font-size:.88rem;
  margin:2rem 0 0;font-style:italic;line-height:1.55;
}

/* toc on dark */
.ss-toc{margin:0 0 1.5rem;}
.ss-toc-heading{
  font-family:var(--display);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ss-gold);margin:0 0 .6rem;
}
.ss-toc a{
  display:block;font-family:var(--body);font-size:1.15rem;
  color:var(--ss-parchment-dim);text-decoration:none;padding:.22rem 0;
  transition:color .2s;
}
.ss-toc a:hover{color:var(--ss-gold-soft);}

/* responsive */
@media(max-width:820px){
  .ss-grid{grid-template-columns:1fr;}
  .ss-figure{position:static;top:auto;max-width:360px;margin:0 auto 1rem;order:0;}
  .ss-prayers{order:0;}
  .ss-page{font-size:17px;}
  .ss-toc a{font-size:1rem;}
  .ss-sorrow-img{max-height:none;}
}
@media(prefers-reduced-motion:no-preference){
  .ss-fade{opacity:0;transform:translateY(10px);animation:ssIn .9s ease forwards;}
}
@media print{
  .ss-pagehead{background:#fff !important;border-bottom-color:#ccc !important;}
  .ss-pagehead h1{color:#000 !important;}
  .ss-page{background:#fff !important;color:#241a10 !important;padding:0 0.5in;}
  .ss-page .ss-figure{display:none !important;}
  .ss-page .ss-grid{display:block;}
  .ss-page .ss-prayer,.ss-page .ss-scripture,.ss-page .ss-meditation{border-left-color:#ccc;}
  .ss-page .ss-step{color:#333;}
  .ss-page .ss-rubric,.ss-page .ss-cap{color:#666;}
  .ss-page .ss-sorrow{border-color:#ccc;background:none;}
}