/* Guarantee the book's two voices load even if the portfolio's appearance
   fonts are set to something else. display=swap avoids blocking. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   SUNDAY PILGRIMAGE — an editorial book, built from materials
   Loaded only on /churches/ (scoped to .sp-page). The page is not a screen;
   it is paper, parchment, stone and, rarely, the dark. Gold appears only as
   aged brass — a detail, as in a church. Cormorant + Inter, set like a book.
   ============================================================ */

.sp-page {
  /* COLOUR tokens (the art-direction palette) */
  --color-paper:      #F5F1EA;
  --color-warm:       #EEE7DA;
  --color-parchment:  #E5D9C5;
  --color-stone:      #DDD4C5;
  --color-ivory:      #F7F3EC;
  --color-brown:      #2B2119;   /* dark brown — warm near-black */
  --color-charcoal:   #1A1A1A;
  --color-gold:       #C4A267;   /* old gold */
  --color-brass:      #A98A55;   /* aged brass */
  --color-bronze:     #876A44;
  /* legacy aliases — existing rules keep working */
  --paper: var(--color-paper); --paper-warm: var(--color-warm); --parchment: var(--color-parchment);
  --stone: var(--color-stone); --ivory: var(--color-ivory); --brown: var(--color-brown);
  --charcoal: var(--color-charcoal); --gold: var(--color-gold); --brass: var(--color-brass); --bronze: var(--color-bronze);

  /* MATERIAL textures — barely-perceptible grain, stitched so no repeat shows.
     Kept separate from colour so a surface = colour token + texture token. */
  --texture-paper:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='0.028'/%3E%3C/svg%3E");
  --texture-parchment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23q)' opacity='0.04'/%3E%3C/svg%3E");
  --texture-stone:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)' opacity='0.045'/%3E%3C/svg%3E");
  --texture-charcoal:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23c)' opacity='0.05'/%3E%3C/svg%3E");

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:     1.1s;         /* reveals are slow and barely seen */
  --dur-img: 1.7s;

  --maxw:   1360px;
  --read:   46rem;   /* the reading measure — widened for a more generous column */
  --gutter: clamp(1.5rem, 6vw, 7rem);

  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sp-page.sp-theme-light { background: var(--paper); }
.sp-page.sp-theme-dark  { background: var(--brown); }

/* A chapter is a leaf of a given material. Text reads from --fg/--dim/--faint. */
.sp-chapter {
  position: relative;
  background: var(--paper);
  color: var(--brown);
  --fg: var(--brown); --dim: #6b6152; --faint: #a89d89;
  --line: rgba(43, 33, 25, 0.15); --accent: var(--brass);
  padding-block: clamp(6rem, 14vw, 13rem);
  transition: background var(--dur) var(--ease);
}
.sp-chapter[data-tone="paper"]     { background: var(--paper); }
.sp-chapter[data-tone="warm"]      { background: var(--paper-warm); }
.sp-chapter[data-tone="parchment"] { background: var(--parchment); --line: rgba(43,33,25,0.17); }
.sp-chapter[data-tone="stone"]     { background: var(--stone); --line: rgba(43,33,25,0.18); }
.sp-chapter[data-tone="ivory"]     { background: var(--ivory); }
.sp-chapter[data-tone="dark"] {
  background: var(--charcoal); color: var(--paper);
  --fg: var(--paper); --dim: #b9b1a3; --faint: #7c7568; --line: rgba(245,241,234,0.14); --accent: var(--gold);
}
.sp-chapter[data-tone="bronze"] {
  background: var(--brown); color: var(--paper-warm);
  --fg: var(--paper-warm); --dim: #c6baa6; --faint: #8a7d68; --line: rgba(245,241,234,0.13); --accent: var(--gold);
}
.sp-chapter--tight { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sp-chapter--air   { padding-block: clamp(9rem, 20vw, 18rem); }

/* faint material texture — every toned surface carries a grain so nothing reads
   as a flat digital block. Behind the content, never over photographs, static. */
.sp-chapter[data-tone]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--texture-paper); background-size: 140px 140px;
  mix-blend-mode: multiply;
}
.sp-chapter[data-tone="warm"]::before      { background-image: var(--texture-paper); background-size: 140px; }
.sp-chapter[data-tone="parchment"]::before { background-image: var(--texture-parchment); background-size: 160px; }
.sp-chapter[data-tone="stone"]::before     { background-image: var(--texture-stone); background-size: 160px; }
.sp-chapter[data-tone="ivory"]::before     { background-image: var(--texture-paper); background-size: 140px; }
.sp-chapter[data-tone="dark"]::before,
.sp-chapter[data-tone="bronze"]::before    { background-image: var(--texture-charcoal); background-size: 180px; mix-blend-mode: soft-light; }
/* keep the chapter's content above its own grain */
.sp-chapter[data-tone] > .sp-wrap,
.sp-chapter[data-tone] > .sp-narrow { position: relative; z-index: 1; }

.sp-wrap   { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sp-narrow { width: min(var(--read), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

/* ---------- Quiet, adaptive chrome (the book has almost no interface) ---------- */
.sp-page .site-header { background: transparent; border: 0; box-shadow: none; }
.sp-page .site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.sp-page .site-header.is-scrolled .brand-name,
.sp-page .site-header.is-scrolled .brand-sub,
.sp-page .site-header.is-scrolled .site-nav a { color: var(--brown); }
.sp-page .site-header.is-scrolled .nav-toggle span { background: var(--brown); }
.sp-page .site-footer { background: var(--charcoal); }

/* ---------- Typographic primitives ---------- */
.sp-kicker { display: inline-block; font-family: var(--sans); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.36em; text-transform: uppercase; color: var(--faint); }
.sp-folio  { font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--accent); }
.sp-num-tag{ font-family: var(--sans); font-variant-numeric: oldstyle-nums; letter-spacing: 0.08em; color: var(--faint); }
.sp-display{ font-family: var(--serif); font-weight: 400; line-height: 0.94; letter-spacing: -0.012em; color: var(--fg); text-wrap: balance; }
.sp-h2 { font-family: var(--serif); font-weight: 400; line-height: 1.0; font-size: clamp(2.1rem, 4.8vw, 3.6rem); letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.sp-lede { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.5; color: var(--fg); }
.sp-read { font-family: var(--serif); font-size: clamp(1.14rem, 1.7vw, 1.32rem); line-height: 1.6; color: var(--fg); }
.sp-read p + p { margin-top: 0.85em; }
.sp-rule { width: 46px; height: 1px; background: var(--accent); border: 0; }

/* a chapter opener: marginal folio + kicker, generous air */
.sp-opener { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: baseline; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.sp-opener .sp-folio { padding-top: 0.1rem; }

/* ---------- Reveal: slow, barely perceptible; images "develop" ---------- */
html.js .sp-page .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-io), transform var(--dur) var(--ease-io); transition-delay: var(--d, 0ms); }
/* NOTE: the .is-visible rules MUST carry the same `html.js` prefix, or the hide
   rule above out-specifies them and the content stays invisible forever. */
html.js .sp-page .reveal.is-visible { opacity: 1; transform: none; }
html.js .sp-page .reveal .sp-frame-media img,
html.js .sp-page .reveal .sp-ph-media img,
html.js .sp-page .reveal.sp-develop img { filter: brightness(0.86) saturate(0.92); transform: scale(1.035); transition: filter var(--dur-img) var(--ease-io), transform var(--dur-img) var(--ease-io); }
html.js .sp-page .reveal.is-visible .sp-frame-media img,
html.js .sp-page .reveal.is-visible .sp-ph-media img,
html.js .sp-page .reveal.is-visible.sp-develop img { filter: none; transform: none; }
/* keep the hover zoom from fighting the develop transform once revealed */
@media (hover: hover) { html.js .sp-page .reveal.is-visible .sp-ph:hover .sp-ph-media img { transform: scale(1.03); } }

/* =====================================================
   OPENING — a photograph, held
   ===================================================== */
.sp-open { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; padding: 0; background: var(--charcoal); }
.sp-open--nomedia { background: var(--brown); }
.sp-open-media { position: absolute; inset: 0; z-index: 0; }
.sp-open-media img, .sp-open-media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.sp-open-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(20,18,15,0.5) 0%, rgba(20,18,15,0.06) 26%, rgba(20,18,15,0.14) 58%, rgba(20,18,15,0.86) 100%); }
.sp-open-inner { position: relative; z-index: 2; grid-row: 2; width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding-bottom: clamp(3rem, 7vw, 6rem); }
.sp-open-eyebrow { display: flex; gap: 1.6rem; align-items: baseline; margin-bottom: 1.8rem; }
.sp-open-eyebrow .sp-kicker, .sp-open-eyebrow .sp-num-tag { color: rgba(245,241,234,0.72); }
.sp-open-title { font-family: var(--serif); font-weight: 400; line-height: 0.9; letter-spacing: -0.016em; font-size: clamp(3.4rem, 12vw, 10rem); color: var(--paper); }
.sp-open-sub { margin-top: 1.4rem; max-width: 26ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.7vw, 2rem); color: rgba(245,241,234,0.92); }
.sp-open-foot { display: flex; flex-wrap: wrap; gap: 0.6rem 2.6rem; margin-top: clamp(2rem, 4vw, 3.2rem); font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,241,234,0.62); }
.sp-open-foot b { color: var(--paper); font-weight: 500; }
.sp-scrollcue { position: absolute; left: 50%; bottom: 1.8rem; z-index: 2; transform: translateX(-50%); width: 1px; height: 52px; background: linear-gradient(var(--gold), transparent); opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) { .sp-scrollcue { animation: spCue 3s var(--ease) infinite; transform-origin: top; } }
@keyframes spCue { 0%,100% { transform: translateX(-50%) scaleY(0.45); opacity: 0.3; } 50% { transform: translateX(-50%) scaleY(1); opacity: 0.85; } }

/* =====================================================
   SINGLE-PHRASE PAGE  ·  SINGLE-PHOTOGRAPH PAGE
   The silences of the book.
   ===================================================== */
.sp-phrase { min-height: 82svh; display: grid; place-items: center; text-align: center; }
.sp-phrase p { max-width: 22ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1.28; color: var(--fg); }
.sp-phrase cite { display: block; margin-top: 1.6rem; font-family: var(--sans); font-style: normal; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }

.sp-plate { min-height: 96svh; display: grid; place-items: center; padding: 0; overflow: hidden; }
.sp-plate figure { margin: 0; width: 100%; height: 100%; }
.sp-plate .sp-frame-media { width: 100%; height: 100%; }
.sp-plate .sp-frame-media img { width: 100%; height: 100%; object-fit: cover; }
.sp-plate figcaption { position: absolute; left: var(--gutter); bottom: clamp(2rem, 5vw, 3.5rem); z-index: 2; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,234,0.8); }
.sp-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,15,0.55), transparent 30%); pointer-events: none; }

/* =====================================================
   MANIFESTO — a printed page
   ===================================================== */
.sp-manifesto-body { font-family: var(--serif); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.52; color: var(--fg); }
.sp-manifesto-body p + p { margin-top: 1em; }
.sp-manifesto-body p:first-child::first-letter { font-size: 3.6em; line-height: 0.68; float: left; margin: 0.06em 0.12em 0 0; font-weight: 500; color: var(--accent); font-family: var(--serif); }

/* =====================================================
   LATEST — the current chapter (a dark plate)
   ===================================================== */
.sp-latest-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: end; text-decoration: none; color: inherit; }
.sp-latest-media { position: relative; overflow: hidden; }
.sp-latest-media img { width: 100%; height: auto; }
.sp-latest-num { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 2; font-family: var(--serif); font-style: italic; font-size: clamp(2rem,5vw,3.4rem); color: var(--gold); }
.sp-latest-body .sp-kicker { color: var(--accent); }
.sp-latest-name { font-family: var(--serif); font-weight: 400; line-height: 1; font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 1rem 0 1.1rem; color: var(--fg); }
.sp-latest-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.7rem; }
.sp-latest-excerpt { font-family: var(--serif); font-size: 1.25rem; line-height: 1.66; color: var(--dim); max-width: 42ch; margin-bottom: 1.9rem; }
.sp-inline-link { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--accent); padding-bottom: 3px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur) var(--ease); }
a:hover .sp-inline-link { background-size: 100% 1px; }

/* =====================================================
   MAP — an engraved plate of Dublin
   ===================================================== */
.sp-map-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.sp-map-intro { max-width: 42ch; font-family: var(--serif); font-size: 1.2rem; line-height: 1.62; color: var(--dim); }
.sp-map-filters { display: inline-flex; border: 1px solid var(--line); }
.sp-map-filter { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); padding: 0.6rem 1.1rem; background: none; border: 0; border-left: 1px solid var(--line); cursor: pointer; }
.sp-map-filter:first-child { border-left: 0; }
.sp-map-filter[aria-pressed="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }

.sp-map-stage { position: relative; }
/* the plate: a parchment field, double hairline border, engraved */
.sp-map-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--parchment); box-shadow: inset 0 0 0 1px rgba(43,33,25,0.2), inset 0 0 0 7px var(--parchment), inset 0 0 0 8px rgba(43,33,25,0.12); }
.sp-cartography { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.sp-geo-water  { fill: rgba(120,140,138,0.16); }   /* desaturated blue, near sepia */
.sp-geo-coast  { fill: none; stroke: rgba(43,33,25,0.32); stroke-width: 1.1; }
.sp-geo-liffey { fill: none; stroke: rgba(120,140,138,0.5); stroke-width: 1.4; }
.sp-geo-label  { fill: rgba(43,33,25,0.4); font-family: var(--serif); font-style: italic; font-size: 12px; letter-spacing: 0.12em; }
/* the pilgrimage thread — the Sundays, drawn in order */
.sp-thread { fill: none; stroke: var(--gold); stroke-width: 1.1; opacity: 0.65; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) { .sp-thread.is-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: spDraw 2.6s var(--ease-io) forwards; } }
@keyframes spDraw { to { stroke-dashoffset: 0; } }
/* points as engraved marks */
.sp-pt { cursor: pointer; }
.sp-pt-hit { fill: transparent; }
.sp-pt-dot { transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); transform-box: fill-box; transform-origin: center; }
.sp-pt--unvisited .sp-pt-dot { fill: none; stroke: rgba(43,33,25,0.4); stroke-width: 0.9; r: 2.1; }
.sp-pt--visited  .sp-pt-dot { fill: var(--gold); stroke: #F5EEDD; stroke-width: 1; r: 4.1; }
.sp-pt--planned  .sp-pt-dot { fill: none; stroke: var(--brass); stroke-width: 1.2; stroke-dasharray: 2 2; r: 4; }
.sp-pt--next .sp-pt-ring { fill: none; stroke: var(--brass); stroke-width: 1.3; r: 8; }
.sp-pt--next .sp-pt-dot  { fill: var(--brass); r: 2.3; }
.sp-pt.is-dim .sp-pt-dot { opacity: 0.14; }
.sp-pt.is-active .sp-pt-dot, .sp-pt:hover .sp-pt-dot { transform: scale(1.9); }
.sp-pt.is-active .sp-pt-halo { r: 12; opacity: 1; }
.sp-pt-halo { fill: none; stroke: var(--brass); stroke-width: 0.9; r: 6; opacity: 0; transition: r 0.4s var(--ease), opacity 0.4s var(--ease); }
@media (prefers-reduced-motion: no-preference) { .sp-pt-dot { opacity: 0; animation: spPop 0.5s var(--ease) forwards; } }
@keyframes spPop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
/* cartouche — the plate's title, set in a corner like an antique map */
.sp-map-cartouche { position: absolute; top: clamp(1rem, 2.5vw, 2rem); left: clamp(1rem, 2.5vw, 2rem); z-index: 4; max-width: 46%; }
.sp-map-cartouche h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 0.98; color: var(--brown); letter-spacing: 0.01em; }
.sp-map-cartouche p { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(43,33,25,0.55); margin-top: 0.5rem; }
/* hover chip + preview restyled to material */
.sp-map-chip { position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); background: var(--paper); border: 1px solid rgba(43,33,25,0.25); padding: 0.65rem 0.85rem; min-width: 150px; opacity: 0; transition: opacity 0.2s var(--ease); box-shadow: 0 8px 30px rgba(43,33,25,0.12); }
.sp-map-chip.is-on { opacity: 1; }
.sp-map-chip-name { font-family: var(--serif); font-size: 1.05rem; color: var(--brown); line-height: 1.05; }
.sp-map-chip-meta { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(43,33,25,0.55); margin-top: 0.3rem; }
.sp-map-preview { position: absolute; top: 0; right: 0; width: min(340px, 82%); z-index: 7; background: var(--paper); border: 1px solid rgba(43,33,25,0.2); transform: translateX(8%); opacity: 0; pointer-events: none; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); box-shadow: 0 20px 60px rgba(43,33,25,0.18); }
.sp-map-preview.is-open { transform: none; opacity: 1; pointer-events: auto; }
.sp-map-preview-media { aspect-ratio: 4/3; background: var(--stone); overflow: hidden; }
.sp-map-preview-media img { width: 100%; height: 100%; object-fit: cover; }
.sp-map-preview-body { padding: 1.1rem 1.2rem 1.3rem; }
.sp-map-preview-kicker { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.sp-map-preview-name { font-family: var(--serif); font-size: 1.55rem; line-height: 1.02; color: var(--brown); margin: 0.4rem 0 0.6rem; }
.sp-map-preview-meta { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.05em; color: rgba(43,33,25,0.6); line-height: 1.6; }
.sp-map-preview-links { display: flex; gap: 1.2rem; margin-top: 1rem; }
.sp-map-preview-close { position: absolute; top: 0.5rem; right: 0.6rem; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(43,33,25,0.6); background: none; border: 0; cursor: pointer; }
.sp-map-legend { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 1.8rem; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.sp-map-legend li { display: inline-flex; align-items: center; gap: 0.55rem; }
.sp-lg { width: 12px; height: 12px; display: inline-block; }
.sp-lg--visited { background: var(--bronze); border-radius: 50%; }
.sp-lg--next { border: 1.4px solid var(--brass); border-radius: 50%; }
.sp-lg--planned { border: 1.3px dashed var(--brass); border-radius: 50%; }
.sp-lg--unvisited { width: 8px; height: 8px; border: 1px solid var(--faint); border-radius: 50%; }
.sp-map-list { display: none; }

/* =====================================================
   INDEX — the book's index, mostly silence
   ===================================================== */
.sp-archive-tools { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: baseline; justify-content: space-between; margin-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.sp-search { position: relative; flex: 1 1 240px; max-width: 380px; }
.sp-search input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); font-family: var(--serif); font-style: italic; font-size: 1.3rem; padding: 0.4rem 0; }
.sp-search input::placeholder { color: var(--faint); font-style: italic; }
.sp-search input:focus { outline: none; border-bottom-color: var(--accent); }
.sp-archive-controls { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: baseline; }
.sp-select select { appearance: none; background: none; border: 0; color: var(--dim); font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 1.4rem 0.4rem 0; cursor: pointer; }
.sp-select { position: relative; }
.sp-select::after { content: "·"; position: absolute; right: 0.4rem; top: 40%; transform: translateY(-50%); pointer-events: none; color: var(--faint); }
.sp-archive-count { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--faint); }

.sp-index-group { margin-top: clamp(3rem, 7vw, 5rem); }
.sp-index-group:first-child { margin-top: 0; }
.sp-group-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.4rem; }
.sp-group-name { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--fg); }
.sp-group-count { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--faint); }

.sp-row { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 1.4rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: padding-left 0.45s var(--ease); }
.sp-row:last-child { border-bottom: 1px solid var(--line); }
.sp-row.is-hidden { display: none; }
.sp-row-num { font-family: var(--sans); font-variant-numeric: oldstyle-nums; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--faint); }
.sp-row-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sp-row-name { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.08; color: var(--fg); transition: color 0.3s var(--ease); }
.sp-row-sub { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.sp-row-state { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--faint); white-space: nowrap; }
.sp-row--visited .sp-row-state, .sp-row--next .sp-row-state { color: var(--accent); }
.sp-row-thumb { position: absolute; right: 9rem; top: 50%; transform: translateY(-50%) scale(0.92); width: 96px; height: 68px; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); z-index: 3; box-shadow: 0 10px 30px rgba(43,33,25,0.2); }
@media (hover: hover) and (min-width: 861px) {
  .sp-row:hover { padding-left: 1.2rem; }
  .sp-row:hover .sp-row-name { color: var(--accent); }
  .sp-row--has-thumb:hover .sp-row-thumb { opacity: 1; transform: translateY(-50%) scale(1); }
}
.sp-archive-empty { padding: 3.5rem 0; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--dim); }

/* =====================================================
   PHOTOBOOK
   ===================================================== */
.sp-book { columns: 2; column-gap: clamp(1.6rem, 3.5vw, 3rem); }
.sp-book-entry { display: block; break-inside: avoid; margin-bottom: clamp(2.8rem, 6vw, 5rem); text-decoration: none; color: inherit; }
.sp-book-entry--wide { column-span: all; }
.sp-book-media { overflow: hidden; margin-bottom: 1rem; }
.sp-book-media img { width: 100%; height: auto; transition: transform var(--dur-img) var(--ease); }
@media (hover: hover) { .sp-book-entry:hover .sp-book-media img { transform: scale(1.03); } }
.sp-book-cap { display: flex; align-items: baseline; gap: 0.9rem; }
.sp-book-num { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--accent); }
.sp-book-name { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--fg); }
.sp-book-sub { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 0.3rem; }
@media (hover: hover) { .sp-book-entry:hover .sp-book-name { color: var(--accent); } }

/* =====================================================
   NEXT SUNDAY · REFLECTIONS · TIME · CLOSE
   ===================================================== */
.sp-next-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
.sp-next-mark { font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--accent); line-height: 0.9; }
.sp-next-name { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--fg); line-height: 1.04; }
.sp-next-meta { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.sp-next-reason { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--dim); margin-top: 1.1rem; max-width: 46ch; }

.sp-refl { padding-block: clamp(2.6rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.sp-refl:first-of-type { border-top: 0; }
.sp-refl-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.38; color: var(--fg); }
.sp-refl-meta { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 1.5rem 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.sp-refl-body { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--dim); }
.sp-refl-title { font-family: var(--serif); font-size: 1.7rem; color: var(--fg); margin-bottom: 0.9rem; }

.sp-time-track { display: flex; gap: 0.42rem; align-items: flex-end; flex-wrap: wrap; }
.sp-tick { width: 2px; background: color-mix(in srgb, var(--fg) 18%, transparent); align-self: stretch; min-height: 16px; }
.sp-tick--on { width: 2px; background: var(--accent); }
.sp-time-figures { display: flex; flex-wrap: wrap; gap: 1.2rem 3.4rem; margin-top: 2.2rem; }
.sp-time-fig b { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--fg); }
.sp-time-fig span { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

.sp-close-text { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 4.4vw, 3rem); color: var(--fg); text-align: center; max-width: 22ch; margin-inline: auto; line-height: 1.3; }

/* =====================================================
   CHURCH PAGE
   ===================================================== */
.sp-chero { position: relative; min-height: 96svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--charcoal); }
.sp-chero--nomedia { min-height: 66svh; background: var(--brown); }
.sp-chero--minimal { min-height: 72svh; background: var(--paper); }
.sp-chero--architectural .sp-chero-name { font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: 0; }
.sp-chero--architectural .sp-chero-veil { background: linear-gradient(to bottom, rgba(20,18,15,0.28) 0, transparent 34%, rgba(20,18,15,0.72) 100%); }
.sp-chero-media { position: absolute; inset: 0; z-index: 0; }
.sp-chero-media img, .sp-chero-media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.sp-chero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(20,18,15,0.46) 0, rgba(20,18,15,0.04) 30%, rgba(20,18,15,0.18) 62%, rgba(20,18,15,0.9) 100%); }
.sp-chero-inner { position: relative; z-index: 2; grid-row: 2; width: min(var(--maxw), calc(100% - var(--gutter)*2)); margin-inline: auto; padding-bottom: clamp(2.6rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.6rem; }
.sp-chero--minimal .sp-chero-inner, .sp-chero--minimal .sp-chero-name, .sp-chero--minimal .sp-chero-official, .sp-chero--minimal .sp-cmeta { color: var(--brown); }
.sp-chero-back { display: inline-block; margin-bottom: 1.3rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,241,234,0.7); }
.sp-chero--minimal .sp-chero-back { color: rgba(43,33,25,0.6); }
.sp-chero-back:hover { color: var(--gold); }
.sp-chero-name { font-family: var(--serif); font-weight: 400; line-height: 0.94; letter-spacing: -0.01em; font-size: clamp(2.8rem, 8vw, 6.2rem); color: var(--paper); }
.sp-chero-official { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.35rem); color: rgba(245,241,234,0.75); margin-top: 0.6rem; }
.sp-chero-index { text-align: right; font-family: var(--serif); color: var(--paper); }
.sp-chero-index b { display: block; font-style: italic; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 0.9; }
.sp-chero-index span { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,241,234,0.65); }
.sp-chero-phrase { position: relative; z-index: 2; grid-row: 1; align-self: center; width: min(var(--maxw), calc(100% - var(--gutter)*2)); margin-inline: auto; }
.sp-chero-phrase p { max-width: 18ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 4.2vw, 3.2rem); line-height: 1.28; color: var(--paper); }
.sp-chero--minimal .sp-chero-phrase p { color: var(--brown); }
.sp-cmeta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding-top: 1.5rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,234,0.72); }

.sp-cmemory-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.34; color: var(--fg); margin-bottom: 2rem; }
.sp-cmemory-body { font-family: var(--serif); font-size: clamp(1.16rem, 1.9vw, 1.34rem); line-height: 1.62; color: var(--fg); }
.sp-cmemory-body p + p { margin-top: 0.85em; }
.sp-cmemory-body p:first-of-type::first-letter { font-size: 3.1em; line-height: 0.7; float: left; margin: 0.05em 0.1em 0 0; color: var(--accent); font-weight: 500; }
.sp-liturgy { margin-top: clamp(2.4rem, 5vw, 3.4rem); border-top: 1px solid var(--line); }
.sp-liturgy-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.sp-liturgy-row dt { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.sp-liturgy-row dd { font-family: var(--serif); font-size: 1.14rem; color: var(--fg); }

/* =====================================================
   EDITORIAL PHOTO GRID (masonry) — the church essay + the About-me page.
   Photographs keep their natural proportion; the layout is a CSS multi-column
   masonry (organic, asymmetric) that adapts 3 → 2 → 1 columns by screen size.
   Panoramas and emphasised photos span the whole width. Generous, responsive
   margins around the whole grid — never glued to the edges of the screen.
   ===================================================== */
.sp-essay { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sp-grid {
  columns: 3;
  column-gap: clamp(0.9rem, 2vw, 1.7rem);
  margin-block: clamp(1.6rem, 4vw, 3.2rem);
}
.sp-grid:first-child { margin-top: 0; }
.sp-ph {
  break-inside: avoid;
  margin: 0 0 clamp(0.9rem, 2vw, 1.7rem);
  padding: 0;
  display: block;
  cursor: zoom-in;
  background: none; border: 0;
  -webkit-appearance: none; appearance: none;
  text-align: left;
}
.sp-ph-media { position: relative; overflow: hidden; background: var(--stone); }
.sp-ph-media img { width: 100%; height: auto; display: block; }
.sp-ph-cap {
  margin-top: 0.55rem; font-family: var(--sans); font-size: 0.62rem;
  letter-spacing: 0.09em; color: var(--dim); line-height: 1.55;
}
/* a panorama or an emphasised photograph spans the full grid width */
.sp-ph--span { column-span: all; margin-bottom: clamp(1.2rem, 3vw, 2.4rem); }
/* keyboard focus + hover, quiet and on-brand */
.sp-ph:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sp-ph-media::after {
  content: ""; position: absolute; inset: 0; background: rgba(20, 18, 15, 0);
  transition: background 0.5s var(--ease); pointer-events: none;
}
@media (hover: hover) { .sp-ph:hover .sp-ph-media::after { background: rgba(20, 18, 15, 0.06); } }
@media (max-width: 1024px) { .sp-grid { columns: 2; } }
@media (max-width: 620px)  { .sp-grid { columns: 1; column-gap: 0; } .sp-ph { margin-bottom: clamp(1rem, 4vw, 1.6rem); } }

/* essay */
.sp-block { margin-inline: auto; margin-block: clamp(2.4rem, 5vw, 4.5rem); }
.sp-block--image, .sp-block--medium { width: min(64rem, 100%); }
.sp-block--wide { width: min(94rem, 100%); }
.sp-block--full { width: 100%; }
.sp-block--small { width: min(30rem, 88%); }
.sp-block--portrait { width: min(36rem, 86%); }
.sp-block--diptych { width: min(94rem, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.6vw, 1.6rem); }
.sp-block--sequence { width: min(94rem, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.4rem); }
.sp-block--video { width: min(88rem, 100%); }
.sp-al--left { margin-left: 0; } .sp-al--right { margin-right: 0; }
.sp-bg--light, .sp-bg--dark { padding: clamp(1.6rem, 4.5vw, 4rem); }
.sp-bg--light { background: var(--paper-warm); }
.sp-bg--dark { background: var(--charcoal); }
.sp-sb1 { margin-top: clamp(3.5rem,7vw,6rem); } .sp-sb2 { margin-top: clamp(6rem,11vw,10rem); } .sp-sb3 { margin-top: clamp(8rem,16vw,15rem); }
.sp-sa1 { margin-bottom: clamp(3.5rem,7vw,6rem); } .sp-sa2 { margin-bottom: clamp(6rem,11vw,10rem); } .sp-sa3 { margin-bottom: clamp(8rem,16vw,15rem); }
.sp-frame { margin: 0; }
.sp-frame-media { overflow: hidden; }
.sp-frame-media img { width: 100%; height: auto; display: block; }
.sp-cap { margin-top: 0.8rem; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--dim); display: flex; justify-content: space-between; gap: 1rem; }
.sp-cap--over { position: absolute; left: 1rem; bottom: 1rem; margin: 0; color: rgba(245,241,234,0.9); }
.sp-cap-type { color: var(--faint); text-transform: uppercase; letter-spacing: 0.14em; }
.sp-essay-text { width: min(var(--read), 100%); margin-inline: auto; font-family: var(--serif); font-size: 1.28rem; line-height: 1.6; color: var(--fg); }
.sp-essay-text p + p { margin-top: 0.85em; }
.sp-memory-body p + p { margin-top: 0.7em; }
.sp-essay-quote { width: min(44rem, 100%); margin-inline: auto; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.36; color: var(--fg); }
.sp-block--chapter { width: min(var(--read), 100%); text-align: center; }
.sp-chapter-rule { display: block; width: 42px; height: 1px; background: var(--accent); margin: 0 auto 1.1rem; }
.sp-chapter-label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim); }
.sp-block--space { height: clamp(4rem, 10vw, 9rem); margin: 0; }
.sp-video-embed { position: relative; aspect-ratio: 16/9; background: var(--charcoal); }
.sp-video-embed iframe, .sp-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* architecture / history / practical */
.sp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.sp-fact { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.sp-fact dt { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.sp-fact dd { font-family: var(--serif); font-size: 1.16rem; color: var(--fg); }
.sp-hist-text { font-family: var(--serif); font-size: 1.16rem; line-height: 1.6; color: var(--fg); margin-top: 1.8rem; }
.sp-hist-text p + p { margin-top: 0.85em; }
.sp-hist-text--muted { color: var(--dim); font-size: 1.06rem; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.sp-tags li { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--dim); border: 1px solid var(--line); padding: 0.36rem 0.9rem; border-radius: 999px; }
.sp-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2.6rem; }
.sp-rating { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-rating span:first-child { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.sp-dots { display: inline-flex; gap: 0.35rem; }
.sp-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--brass); opacity: 0.5; }
.sp-dot.on { background: var(--brass); opacity: 1; }
.sp-practical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.2rem); }
.sp-times-label, .sp-info-label { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.7rem; }
.sp-times-main { font-family: var(--serif); font-size: 1.4rem; color: var(--fg); }
.sp-times-list { font-family: var(--serif); font-size: 1.04rem; color: var(--dim); margin-top: 0.4rem; line-height: 1.7; }
.sp-times-stale { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--bronze); margin-top: 0.6rem; }
.sp-info-row { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.sp-info-row dt { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.sp-info-row dd { font-family: var(--serif); font-size: 1.08rem; color: var(--fg); }
.sp-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.sp-link { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.08em; color: var(--accent); border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.sp-link:hover { border-color: var(--gold); color: var(--gold); }
.sp-map-mini { border: 1px solid var(--line); aspect-ratio: 3/2; overflow: hidden; background: var(--parchment); }
.sp-locator path { stroke: rgba(43,33,25,0.28) !important; }

.sp-cnav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.sp-cnav-item { position: relative; min-height: 42vh; display: flex; align-items: flex-end; padding: clamp(1.8rem, 4vw, 3rem); overflow: hidden; text-decoration: none; color: var(--paper); }
.sp-cnav-item--next { border-left: 1px solid rgba(245,241,234,0.14); text-align: right; justify-content: flex-end; align-items: flex-end; }
.sp-cnav-media { position: absolute; inset: 0; z-index: 0; opacity: 0.55; transition: opacity 0.55s var(--ease), transform 0.9s var(--ease); }
.sp-cnav-media img { width: 100%; height: 100%; object-fit: cover; }
.sp-cnav-item:hover .sp-cnav-media { opacity: 0.78; transform: scale(1.04); }
.sp-cnav-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,18,15,0.88), rgba(20,18,15,0.34)); }
.sp-cnav-txt { position: relative; z-index: 2; }
.sp-cnav-dir { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,241,234,0.7); }
.sp-cnav-name { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.02; margin-top: 0.55rem; }
.sp-cnav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: clamp(2rem,4vw,3rem); }

/* =====================================================
   RESPONSIVE — a mobile direction
   ===================================================== */
@media (max-width: 1024px) { .sp-open, .sp-chero { min-height: 90svh; } .sp-plate { min-height: 84svh; } }
@media (max-width: 860px) {
  .sp-latest-grid { grid-template-columns: 1fr; gap: 1.8rem; } .sp-latest-media { order: -1; }
  .sp-next-grid { grid-template-columns: 1fr; gap: 1rem; }
  .sp-chero-inner { grid-template-columns: 1fr; }
  .sp-chero-index { text-align: left; display: flex; align-items: baseline; gap: 0.6rem; } .sp-chero-index b { font-size: 1.7rem; }
  .sp-facts, .sp-ratings, .sp-practical-grid { grid-template-columns: 1fr; }
  .sp-block--diptych { grid-template-columns: 1fr; }
  .sp-cnav { grid-template-columns: 1fr; }
  .sp-cnav-item--next { border-left: 0; border-top: 1px solid rgba(245,241,234,0.14); text-align: left; justify-content: flex-start; }
  .sp-liturgy-row { grid-template-columns: 6.5rem 1fr; }
  .sp-map-frame { aspect-ratio: 1 / 1; }
  .sp-map-cartouche { position: static; max-width: none; margin-bottom: 1rem; }
  .sp-map-preview { width: 100%; right: 0; bottom: 0; top: auto; transform: translateY(12%); }
  .sp-map-preview.is-open { transform: none; }
  .sp-map-list { display: block; margin-top: 1.6rem; max-height: 48vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
  .sp-map-list-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
  .sp-map-list-name { font-family: var(--serif); font-size: 1.12rem; color: var(--fg); }
  .sp-map-list-meta { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
}
@media (max-width: 620px) {
  .sp-book { columns: 1; }
  .sp-row { grid-template-columns: 2.6rem 1fr; }
  .sp-row-state { grid-column: 2; margin-top: 0.2rem; font-size: 0.85rem; }
  .sp-row-thumb { display: none; }
  .sp-archive-tools { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-open-media img, .sp-chero-media img { transform: none; }
  .sp-pt-dot { animation: none; opacity: 1; }
  .sp-scrollcue { animation: none; }
  .sp-thread.is-draw { animation: none; stroke-dashoffset: 0; }
  html.js .sp-page .reveal { transition-duration: 0.01ms; transform: none; }
  html.js .sp-page .reveal .sp-frame-media img { transition-duration: 0.01ms; filter: none; transform: none; }
}

/* ============================================================
   HOME — the eight movements (edit v5). Composition, hierarchy, rhythm.
   The Home is now: opening → intention → latest → silence → cartography →
   photobook → continuity → closing. Tools live on /archive and /explore.
   ============================================================ */

/* II — The intention (phrase + manifesto fused into one printed page) */
.sp-intention-lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.34; color: var(--fg); margin-bottom: clamp(2rem, 4vw, 3.2rem); text-wrap: balance; }
.sp-intention-body { font-family: var(--serif); font-size: clamp(1.16rem, 1.8vw, 1.34rem); line-height: 1.62; color: var(--fg); }
.sp-intention-body p + p { margin-top: 0.85em; }
.sp-intention-body p:first-child::first-letter { font-size: 3.4em; line-height: 0.66; float: left; margin: 0.06em 0.12em 0 0; font-weight: 500; color: var(--accent); font-family: var(--serif); }

/* III — the latest Sunday, empty state (no visit yet) */
.sp-latest-empty { min-height: 60svh; display: grid; align-content: center; }
.sp-empty-phrase { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.3; color: var(--fg); max-width: 20ch; }
.sp-empty-next { display: inline-flex; flex-direction: column; gap: 0.4rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); text-decoration: none; }
.sp-empty-next-name { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--fg); }
.sp-empty-next:hover .sp-empty-next-name { color: var(--accent); }
.sp-empty-next-meta { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* V — the cartography: the plate + a quiet side column (short preview) */
.sp-map-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sp-map-side { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.3rem); }
.sp-map-side .sp-map-intro { max-width: none; }
.sp-map-recent { display: flex; flex-direction: column; }
.sp-map-recent li { border-top: 1px solid var(--line); }
.sp-map-recent li:last-child { border-bottom: 1px solid var(--line); }
.sp-map-recent a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; text-decoration: none; color: inherit; transition: padding-left 0.4s var(--ease); }
@media (hover:hover) { .sp-map-recent a:hover { padding-left: 0.6rem; } }
.sp-map-recent-name { font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--fg); }
.sp-map-recent a:hover .sp-map-recent-name { color: var(--accent); }
.sp-map-recent-state { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.sp-map-side-foot { display: flex; flex-direction: column; gap: 0.5rem; }
.sp-map-side-note { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--faint); }
.sp-map-chapter .sp-map-legend { margin-top: 0.2rem; }

/* VI — the photobook, an editorial (asymmetric) composition */
.sp-book-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.sp-book-head .sp-opener { margin-bottom: 0; }
.sp-photobook { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.6vw, 2.2rem); align-items: start; }
.sp-pb { text-decoration: none; color: inherit; display: block; }
.sp-pb .sp-figure { --fig-bg: var(--stone); }
@media (hover:hover) { .sp-pb:hover .sp-figure-media img { transform: scale(1.03); } }
.sp-pb-cap { display: flex; align-items: baseline; gap: 0.8rem; margin-top: 0.9rem; }
.sp-pb-num { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--accent); }
.sp-pb-name { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--fg); line-height: 1.06; }
@media (hover:hover) { .sp-pb:hover .sp-pb-name { color: var(--accent); } }
.sp-pb-sub { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 0.3rem; }

/* VII — continuity: the next Sunday + the passage of time, in one line */
.sp-cont-next { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; text-decoration: none; color: inherit; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sp-cont-mark { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--accent); line-height: 0.9; }
.sp-cont-next-body { display: flex; flex-direction: column; gap: 0.4rem; }
.sp-cont-next-name { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--fg); line-height: 1.04; }
.sp-cont-next:hover .sp-cont-next-name { color: var(--accent); }
.sp-cont-next-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.sp-cont-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--dim); }
/* the next Sunday (a full editorial panel) stacked above the passage of time */
.sp-continuity .sp-wrap { display: block; }
.sp-continuity .sp-opener { margin-bottom: clamp(2.4rem, 5vw, 3.5rem); }
.sp-cont-time { display: flex; flex-direction: column; gap: 1rem; }
.sp-cont-ticks { display: flex; gap: 5px; flex-wrap: wrap; align-items: flex-end; }
.sp-cont-tick { width: 7px; height: 22px; background: color-mix(in srgb, var(--fg) 15%, transparent); }
.sp-cont-tick.is-on { background: var(--accent); height: 26px; }

/* THE NEXT SUNDAY — its own quiet chapter (stone), a large faint cross to one
   side instead of a second map, set before the cartography. */
.sp-nextvisit-chapter { overflow: hidden; }
.sp-nextvisit-cross { position: absolute; top: 50%; right: clamp(-1rem, 3vw, 4rem); transform: translateY(-50%); z-index: 0; width: clamp(120px, 22vw, 320px); height: auto; color: var(--bronze); opacity: 0.16; pointer-events: none; }
.sp-nextvisit { position: relative; z-index: 1; }
.sp-nextvisit-body { max-width: min(48rem, 82%); }
.sp-nextvisit-chip { display: inline-block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--brass); border-radius: 999px; padding: 0.4rem 0.95rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.sp-nextvisit-name { font-family: var(--serif); font-weight: 400; line-height: 0.98; font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.012em; color: var(--fg); margin: 0 0 0.5rem; text-wrap: balance; }
.sp-nextvisit-name a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
.sp-nextvisit-name a:hover { color: var(--accent); }
.sp-nextvisit-official { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.3rem); color: var(--dim); margin-bottom: 1rem; }
.sp-nextvisit-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 0.9rem 0 1.4rem; }
/* a narrative note about the church (gives the block substance) */
.sp-nextvisit-lede { font-family: var(--serif); font-size: clamp(1.16rem, 1.9vw, 1.36rem); line-height: 1.6; color: var(--fg); max-width: 54ch; margin: 0 0 1.6rem; }
/* why this church — a small editorial aside */
.sp-nextvisit-reason { margin: 0 0 1.7rem; padding-left: 1.1rem; border-left: 2px solid var(--brass); max-width: 46ch; }
.sp-nextvisit-reason-kicker { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.5rem; }
.sp-nextvisit-reason p { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.45; color: var(--fg); }
/* the church's facts (reuses .sp-facts) */
.sp-nextvisit-facts { margin: 1.6rem 0; max-width: 44rem; }
.sp-nextvisit-facts .sp-fact dd { line-height: 1.35; }
.sp-nextvisit-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem 2rem; margin-top: 1.6rem; }
@media (max-width: 720px) {
  .sp-nextvisit-body { max-width: 100%; }
  .sp-nextvisit-cross { top: clamp(3.5rem, 12vw, 5rem); right: 0.4rem; transform: none; width: clamp(72px, 22vw, 130px); opacity: 0.14; }
}

/* VIII — closing (the amen + the coda + the ways onward) */
.sp-closing { text-align: center; }
.sp-vatican-coda { display: inline-flex; flex-direction: column; gap: 0.4rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); text-decoration: none; }
.sp-vatican-coda-kicker { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }
.sp-vatican-coda-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--bronze); }
.sp-vatican-coda:hover .sp-vatican-coda-line { color: var(--brass); }
.sp-closing-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2.2rem; margin-top: clamp(3rem, 6vw, 5rem); }
.sp-closing-lang { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); display: inline-flex; gap: 0.5rem; }
.sp-closing-lang a { color: var(--faint); }
.sp-closing-lang a[aria-current="true"] { color: var(--brown); }

@media (max-width: 860px) {
  .sp-map-layout { grid-template-columns: 1fr; gap: 1.8rem; }
  .sp-cont-next { grid-template-columns: 1fr; gap: 0.6rem; }
  .sp-cont-mark { display: none; }
}
@media (max-width: 620px) {
  .sp-photobook { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
}

/* silence — full-bleed cinematic band (desktop 21:9, mobile 4:5) */
.sp-silence { position: relative; width: 100%; }
.sp-silence .sp-figure { aspect-ratio: 21 / 9; }
.sp-silence .sp-figure::before, .sp-silence .sp-figure::after,
.sp-silence .sp-figure-media::before, .sp-silence .sp-figure-media::after { width: 18px; height: 18px; }
@media (max-width: 720px) { .sp-silence .sp-figure { aspect-ratio: 4 / 5; } }

/* latest — the figure fills the media column */
.sp-latest-media { position: relative; overflow: visible; }
.sp-latest-media .sp-figure { width: 100%; }

/* ============================================================
   ARCHIVE PAGE — the complete index (search + filters live here)
   ============================================================ */
.sp-archive-page { padding-block: clamp(4.5rem, 10vw, 9rem); }
.sp-archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sp-archive-back { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.sp-archive-back:hover { color: var(--accent); }
.sp-archive-topnav { display: inline-flex; gap: 1.4rem; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; }
.sp-archive-topnav-cur { color: var(--fg); }
.sp-archive-topnav a { color: var(--faint); text-decoration: none; }
.sp-archive-topnav a:hover { color: var(--accent); }
.sp-archive-h1 { font-family: var(--serif); font-weight: 400; line-height: 0.98; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.sp-archive-lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.5; color: var(--dim); max-width: 44ch; margin-top: 1.2rem; }
.sp-archive-page .sp-archive-tools { margin-top: clamp(2.6rem, 5vw, 4rem); align-items: center; }
.sp-archive-tools-right { display: inline-flex; align-items: center; gap: 1.4rem; }
.sp-filters { position: relative; }
.sp-filters summary { list-style: none; cursor: pointer; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); user-select: none; white-space: nowrap; }
.sp-filters summary::-webkit-details-marker { display: none; }
.sp-filters[open] summary { color: var(--fg); }
.sp-filters-plus { display: inline-block; transition: transform 0.3s var(--ease); }
.sp-filters[open] .sp-filters-plus { transform: rotate(45deg); }
.sp-filters .sp-archive-controls { position: absolute; right: 0; top: calc(100% + 0.8rem); z-index: 6; background: var(--paper); border: 1px solid var(--line); padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.8rem; box-shadow: 0 20px 50px rgba(43, 33, 25, 0.16); min-width: 220px; }
.sp-archive-foot { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
@media (max-width: 620px) {
  .sp-filters .sp-archive-controls { right: auto; left: 0; }
}

/* ============================================================
   EXPLORE PAGE — the practical map (Google Maps + list, logistics)
   ============================================================ */
.sp-explore-page { padding-block: clamp(4.5rem, 10vw, 9rem); }
.sp-explore-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2.6rem, 5vw, 4rem); align-items: start; }
.sp-explore-map { position: relative; }
.sp-explore-fallback { aspect-ratio: 4 / 5; background: var(--parchment); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 2rem; text-align: center; }
.sp-explore-cross { width: 22px; height: 29px; color: var(--bronze); opacity: 0.8; }
.sp-explore-fallback-note { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--dim); max-width: 26ch; line-height: 1.5; }
.sp-explore-side { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2rem); }
.sp-explore-tools { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.sp-explore-tools .sp-search { flex: 1 1 180px; }
.sp-explore-list { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sp-xrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.sp-xrow.is-hidden { display: none; }
.sp-xrow-main { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sp-xrow-name { font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--fg); line-height: 1.1; }
.sp-xrow-main:hover .sp-xrow-name { color: var(--accent); }
.sp-xrow-meta { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.sp-xrow-route { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--accent); border-bottom: 1px solid var(--brass); padding-bottom: 2px; white-space: nowrap; text-decoration: none; }
.sp-xrow-route:hover { color: var(--gold); border-color: var(--gold); }
.sp-explore-empty { padding: 2.5rem 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--dim); }
.sp-explore-note { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--faint); line-height: 1.6; }
@media (max-width: 860px) {
  .sp-explore-layout { grid-template-columns: 1fr; }
  .sp-explore-list { max-height: none; }
}

/* ============================================================
   ANTECHAMBER — a church not yet visited (facts only, dignified)
   ============================================================ */
.sp-antechamber-page { padding-block: clamp(5rem, 12vw, 10rem); min-height: 72svh; }
.sp-antechamber-page .sp-archive-back { display: inline-block; margin-bottom: clamp(2rem, 5vw, 3rem); }
.sp-ante-chip { display: inline-block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--brass); border-radius: 999px; padding: 0.35rem 0.9rem; margin-bottom: 1.6rem; }
.sp-ante-name { font-family: var(--serif); font-weight: 400; line-height: 0.98; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.sp-ante-official { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.3rem); color: var(--dim); margin-top: 0.6rem; }
.sp-ante-meta { padding-top: 1.2rem; color: var(--dim); }
.sp-ante-lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.4; color: var(--fg); max-width: 24ch; margin: clamp(2.4rem, 5vw, 3.6rem) 0; }
.sp-ante-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.sp-ante-col .sp-opener { margin-bottom: 1.4rem; }
.sp-facts--one { grid-template-columns: 1fr; }
.sp-ante-note { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: clamp(2.4rem, 5vw, 3.6rem); }
@media (max-width: 720px) { .sp-ante-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EDITORIAL PHOTO FRAME — locked ratio, focal point, corner registration
   marks, discreet type label. When empty, a composed placeholder so the
   composition reads before the real photograph enters (art-direction p.21).
   ============================================================ */
.sp-figure {
  --fig-line: rgba(43, 33, 25, 0.34);
  --fig-label: rgba(43, 33, 25, 0.62);
  --fig-bg: var(--parchment);
  position: relative; display: block; margin: 0;
  aspect-ratio: var(--ar, 4 / 3);
  background: var(--fig-bg); overflow: hidden;
}
.sp-figure-media { position: absolute; inset: 0; overflow: hidden; }
.sp-figure-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); display: block; transition: transform var(--dur-img) var(--ease); }
/* four thin corner registration marks (figure = TL/BR, media = TR/BL) */
.sp-figure::before, .sp-figure::after,
.sp-figure .sp-figure-media::before, .sp-figure .sp-figure-media::after {
  content: ""; position: absolute; width: 13px; height: 13px; z-index: 3; pointer-events: none;
  border: 1px solid var(--fig-line);
}
.sp-figure::before { top: 11px; left: 11px; border-right: 0; border-bottom: 0; }
.sp-figure::after  { bottom: 11px; right: 11px; border-left: 0; border-top: 0; }
.sp-figure .sp-figure-media::before { top: 11px; right: 11px; border-left: 0; border-bottom: 0; }
.sp-figure .sp-figure-media::after  { bottom: 11px; left: 11px; border-right: 0; border-top: 0; }
.sp-figure-type { position: absolute; left: 15px; bottom: 12px; z-index: 3; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fig-label); }
.sp-figure-num { position: absolute; left: 15px; top: 12px; z-index: 3; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--fig-label); line-height: 1; }
/* filled photos: keep the marks and label barely-there so the image leads */
.sp-figure:not(.sp-figure--empty) { --fig-line: rgba(245, 241, 234, 0.32); --fig-label: rgba(245, 241, 234, 0.82); }
.sp-figure:not(.sp-figure--empty).sp-figure--light { --fig-line: rgba(43, 33, 25, 0.22); --fig-label: rgba(43, 33, 25, 0.55); }
.sp-figure:not(.sp-figure--empty) .sp-figure-type { text-shadow: 0 1px 8px rgba(20, 18, 15, 0.5); }
/* empty placeholder — composed, no reticle */
.sp-figure--empty.sp-figure--light { --fig-bg: color-mix(in srgb, var(--parchment) 88%, var(--brown) 12%); }
.sp-figure--empty.sp-figure--dark  { --fig-bg: color-mix(in srgb, var(--charcoal) 92%, var(--paper) 8%); --fig-line: rgba(196, 162, 103, 0.4); --fig-label: rgba(245, 241, 234, 0.55); }
.sp-figure--empty .sp-figure-media::after,
.sp-figure--empty .sp-figure-media::before { border-color: var(--fig-line); }
.sp-figure--dark { --fig-line: rgba(196, 162, 103, 0.42); --fig-label: rgba(245, 241, 234, 0.72); }

/* ============================================================
   VATICAN — the special chapter's own material: deep brown + gold.
   The colour alone says "another place" — never Dublin's charcoal.
   ============================================================ */
.sp-cpage--special { background: var(--brown); }
.sp-cpage--special .sp-chapter {
  background: var(--brown); color: var(--paper-warm);
  --fg: var(--paper-warm); --dim: #c6baa6; --faint: #8a7d68; --line: rgba(245, 241, 234, 0.13); --accent: var(--gold);
}
.sp-cpage--special .sp-chapter[data-tone]::before { display: none; }
.sp-cpage--special .sp-chero-veil { background: linear-gradient(to bottom, rgba(43, 33, 25, 0.5) 0, rgba(43, 33, 25, 0.05) 30%, rgba(43, 33, 25, 0.22) 62%, rgba(43, 33, 25, 0.94) 100%); }
.sp-cpage--special .sp-chero-back:hover { color: var(--gold); }
.sp-cpage--special .sp-history { background: color-mix(in srgb, var(--brown) 86%, #000); }