/* ==========================================================================
   The subject pages (/stations-of-the-cross/, /workshop/, and the rest).

   These are static pages: no site.js runs on them, so nothing here may depend
   on a class that JavaScript adds. They borrow the palette, the type and the
   .page / .band / .dsp / .act / .lbl rules from site.css and add only what a
   plain document needs - a header that is not fixed, a photograph wall, and
   a readable measure.
   ========================================================================== */

.subpage { padding-top: 0 }

/* ---------- header -------------------------------------------------------- */

.ph{
  border-bottom:1px solid var(--rule-2);
  background:var(--paper);
  position:sticky;top:0;z-index:40;
}
.ph__in{
  display:flex;align-items:center;gap:clamp(12px,2.2vw,32px);
  min-height:64px;padding-block:10px;
}
.ph__nav{
  display:none;gap:clamp(12px,1.5vw,24px);margin-inline:auto;
  font-size:14px;color:var(--ink-66);
}
.ph__nav a{border-bottom:1px solid transparent;padding-block:3px}
.ph__nav a:hover{color:var(--ink);border-bottom-color:var(--brass)}
@media (min-width:1080px){ .ph__nav{display:flex} }
@media (max-width:1079px){ .ph .act{margin-left:auto} }

.ph__top{padding-block:clamp(34px,5vw,72px) 0}

.crumb{
  font-family:var(--sans);font-stretch:112%;font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-66);
  margin-bottom:18px;
}
.crumb a{border-bottom:1px solid var(--rule)}
.crumb span{color:var(--ink-40);margin-inline:4px}

/* ---------- prose --------------------------------------------------------- */

.prose{max-width:var(--read);margin-top:22px}
.prose p{margin-bottom:1em;color:var(--ink-72)}
.prose p:last-child{margin-bottom:0}

/* ---------- the photograph wall ------------------------------------------- */

.ph__wall{
  display:grid;gap:clamp(22px,3vw,44px);margin-top:clamp(20px,2.4vw,34px);
  grid-template-columns:1fr;
}
@media (min-width:680px){ .ph__wall{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1120px){ .ph__wall{grid-template-columns:repeat(3,1fr)} }

.ph__plate figure{
  background:var(--card);padding:10px 10px 0;
  box-shadow:var(--lift);height:100%;
  display:flex;flex-direction:column;
}
.ph__plate img{width:100%;height:auto}
.ph__plate figcaption{padding:14px 4px 18px}
.ph__plate h3{
  font-family:var(--disp);font-weight:650;font-stretch:96%;
  font-size:19px;line-height:1.2;letter-spacing:-.012em;
}
.ph__plate figcaption p{margin-top:7px;font-size:15.5px;line-height:1.5;color:var(--ink-72)}
.ph__plate figcaption .lbl{margin-top:10px;color:var(--ink-66)}

/* ---------- the workshop page's three extra blocks ------------------------ */

.ph__steps{counter-reset:s;margin-top:26px;display:grid;gap:22px;max-width:var(--read)}
.ph__steps li{counter-increment:s;padding-left:46px;position:relative}
.ph__steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--brass);
}
.ph__steps h3,.ph__qa h3{
  font-family:var(--disp);font-weight:650;font-size:18px;line-height:1.25;
}
.ph__steps p,.ph__qa p{margin-top:6px;color:var(--ink-72)}

.ph__mat{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;
}
.ph__mat li{
  border:1px solid var(--rule);border-radius:999px;padding:7px 15px;
  font-size:14.5px;color:var(--ink-72);
}

.ph__qa{display:grid;gap:26px;margin-top:26px;max-width:var(--read)}

/* ---------- contact and the onward links ---------------------------------- */

.ph__acts{display:flex;flex-wrap:wrap;gap:10px;margin-block:20px}
.ph__dl{
  display:grid;grid-template-columns:auto 1fr;gap:8px 20px;
  margin-top:22px;font-size:15.5px;
}
.ph__dl dt{
  font-family:var(--sans);font-stretch:112%;font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-66);padding-top:3px;
}
.ph__dl dd{color:var(--ink-72)}

.ph__also{
  display:grid;gap:2px;margin-top:20px;max-width:var(--read);
  border-top:1px solid var(--rule-2);
}
.ph__also li{border-bottom:1px solid var(--rule-2)}
.ph__also a{display:block;padding:14px 0;color:var(--ink-72)}
.ph__also a:hover{color:var(--ink)}

/* ---------- skim furniture: byline, the short version, on-this-page --------
   A parish committee reads three lines and a list before it reads a page, and
   an answer engine lifts whichever block answers the question first. Both want
   the same thing: the summary at the top, in plain markup. -------------- */

.ph__by{
  margin-top:14px;font-size:13px;color:var(--ink-66);
  font-family:var(--sans);
}

.tldr{
  margin-top:26px;max-width:var(--read);
  background:var(--card);border-left:3px solid var(--brass);
  padding:18px 22px;box-shadow:var(--lift);
}
.tldr .lbl{color:var(--ink-66)}
.tldr ul{margin-top:10px;display:grid;gap:7px}
.tldr li{
  font-size:16px;line-height:1.5;color:var(--ink);
  padding-left:16px;position:relative;
}
.tldr li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--brass);border-radius:50%;
}

.toc{margin-top:30px;max-width:var(--read)}
.toc .lbl{color:var(--ink-66)}
.toc ul{
  margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 10px;
}
.toc a{
  display:inline-block;border:1px solid var(--rule);border-radius:999px;
  padding:6px 14px;font-size:14.5px;color:var(--ink-72);
}
.toc a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}