/* ============================================================
   SUNDAY PILGRIMAGE — v4 components (language, cross, sound, weather,
   Google Maps). Loaded after pilgrimage.css on the project pages only.
   Uses the same material tokens (defined on .sp-page).
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- language selector (discreet, inside the project only) ---- */
.sp-langbar {
  position: fixed; top: 1rem; right: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(43,33,25,0.12);
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.sp-langbar a { color: var(--sp-on-paper-dim, var(--dim, currentColor)); text-decoration: none; padding: 0.1rem 0; }
.sp-langbar a[aria-current="true"] { color: var(--brown); }
.sp-langbar a:hover { color: var(--bronze); }
.sp-langbar .sp-lang-sep { color: rgba(43,33,25,0.28); }
@media (max-width: 620px) { .sp-langbar { top: auto; bottom: 1rem; right: 1rem; } }

/* ============================================================
   PROJECT MASTHEAD (v5) — the discreet internal navigation.
   A quiet, book-like top bar: the portfolio wordmark (a way back), the four
   sections of the project, and a clearly legible language toggle. It has its
   own soft paper backdrop so it reads over a dark hero AND over paper pages.
   ============================================================ */
.sp-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: color-mix(in srgb, var(--color-paper) 68%, transparent);
  backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08);
  border-bottom: 1px solid rgba(43, 33, 25, 0.08);
}
.sp-topbar-inner {
  width: min(var(--maxw), calc(100% - var(--gutter)));
  margin-inline: auto; display: flex; align-items: center; gap: 0.8rem 1.6rem;
  padding-block: 0.72rem;
}
.sp-topbar-mark {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap;
  font-family: var(--serif); font-size: 1.02rem; letter-spacing: 0.01em; color: var(--brown);
}
.sp-topbar-mark span { transition: color 0.3s var(--ease); }
.sp-topbar-mark:hover span { color: var(--bronze); }
.sp-topbar-cross { display: inline-block; width: 0.58em; height: 0.78em; color: var(--brass); }
.sp-topbar-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); margin-inline: auto; }
.sp-topbar-nav a {
  position: relative; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(43, 33, 25, 0.52); text-decoration: none;
  padding-block: 0.35rem; transition: color 0.3s var(--ease);
}
.sp-topbar-nav a:hover { color: var(--brown); }
.sp-topbar-nav a[aria-current="page"] { color: var(--brown); }
.sp-topbar-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass);
}
/* language toggle — clearly visible, unmistakable active state (fixes the faded icon) */
.sp-topbar-lang { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em; }
.sp-topbar-lang a {
  color: rgba(43, 33, 25, 0.5); text-decoration: none; padding: 0.25rem 0.2rem; min-height: 1.6rem;
  display: inline-flex; align-items: center; transition: color 0.3s var(--ease);
}
.sp-topbar-lang a:hover, .sp-topbar-lang a:focus-visible { color: var(--bronze); }
.sp-topbar-lang a[aria-current="true"] { color: var(--brown); font-weight: 600; }
.sp-topbar-lang-sep { width: 1px; height: 0.82em; background: rgba(43, 33, 25, 0.28); }
/* clear the fixed masthead on pages that don't open with a full-bleed hero */
.sp-archive-body .sp-archive-page,
.sp-chapters-body .sp-chapters-page,
.sp-antechamber-body .sp-antechamber-page { padding-top: clamp(6rem, 9vw, 9.5rem); }
@media (max-width: 640px) {
  .sp-topbar-inner { flex-wrap: wrap; row-gap: 0.15rem; padding-block: 0.55rem; }
  .sp-topbar-mark { order: 1; font-size: 0.95rem; }
  .sp-topbar-lang { order: 2; margin-left: auto; }
  .sp-topbar-nav { order: 3; flex-basis: 100%; margin-inline: 0; justify-content: center;
    gap: 1.15rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 0.3rem;
    scrollbar-width: none; }
  .sp-topbar-nav::-webkit-scrollbar { display: none; }
  .sp-topbar-nav a { font-size: 0.6rem; letter-spacing: 0.14em; white-space: nowrap; }
}

/* ---- the cross (signature, sparingly) ---- */
.sp-cross-mark { display: inline-block; width: 0.62em; height: 0.83em; vertical-align: baseline; color: var(--gold); opacity: 0.9; }
.sp-open .sp-cross-mark { color: var(--gold); margin-right: 0.5rem; width: 0.5em; height: 0.66em; opacity: 0.85; }
.sp-folio-cross { display: inline-block; width: 12px; height: 16px; color: var(--accent); }
.sp-close-cross { display: block; width: 16px; height: 21px; margin: 0 auto 1.6rem; color: var(--accent); opacity: 0.85; }
.sp-map-cartouche .sp-cross-mark { width: 0.5em; height: 0.66em; color: var(--bronze); margin-right: 0.35rem; }
/* visited mark in the index gets a whisper of a cross */
.sp-row--visited .sp-row-state::after { content: ""; display: inline-block; width: 7px; height: 9px; margin-left: 0.5rem; vertical-align: baseline;
  background-color: var(--accent); -webkit-mask: url("../icons/cross.svg") center/contain no-repeat; mask: url("../icons/cross.svg") center/contain no-repeat; opacity: 0.7; }

/* ---- experience line (date · weather · light · mass · times) ----
   Mesma família serif do corpo, em VERSAL (maiúsculas), lida como legenda
   editorial. Itens separados por um ponto médio consistente → distribuição
   organizada, sem os vãos irregulares de antes. ---- */
.sp-exp-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0; font-family: var(--serif); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); line-height: 1.5; font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1, "onum" 0; }
.sp-exp-line > span { display: inline-flex; align-items: baseline; }
.sp-exp-line > span:not(:last-child)::after { content: "·"; margin: 0 0.7rem; color: var(--faint); font-weight: 400; align-self: baseline; }
.sp-exp-line .sp-exp-weather { display: inline-flex; align-items: center; gap: 0.4rem; }
.sp-wx { width: 1.2em; height: 1.2em; color: var(--accent); flex: 0 0 auto; }
.sp-exp-line--times { margin-top: 0.5rem; }
@media (max-width: 560px) { .sp-exp-line { gap: 0.25rem 0; } .sp-exp-line > span:not(:last-child)::after { margin: 0 0.5rem; } }
.sp-exp-line--after { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
/* respiro entre a legenda de metadados e o texto (citação/corpo) que a segue */
.sp-exp-line + .sp-cmemory-quote,
.sp-exp-line + .sp-cmemory-body { margin-top: clamp(2rem, 4.5vw, 3.2rem); }
.sp-journey-line { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--dim); margin-top: 0.8rem; }

/* ---- memory block (a small remembered instant) ---- */
.sp-memory { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.sp-memory-kicker { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.9rem; }
.sp-memory-body { font-family: var(--serif); font-style: italic; font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.55; color: var(--fg); }

/* ---- sound fragments ("Listen") ---- */
.sp-audio-group { margin-top: clamp(2rem, 4vw, 3rem); }
.sp-audio-kicker { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; }
.sp-audio { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.sp-audio:first-of-type { border-top: 0; }
.sp-audio-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); background: none; border: 0; cursor: pointer; }
.sp-audio-ico { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--accent); position: relative; transition: background 0.3s var(--ease); }
.sp-audio-ico::before { content: ""; position: absolute; left: 4.5px; top: 3px; border-style: solid; border-width: 3.5px 0 3.5px 5px; border-color: transparent transparent transparent var(--accent); transition: opacity 0.2s; }
.sp-audio.is-playing .sp-audio-ico::before { border-width: 3px; border-color: var(--paper); border-left-width: 0; opacity: 0; }
.sp-audio.is-playing .sp-audio-ico { background: var(--accent); }
.sp-audio.is-playing .sp-audio-ico::after { content: ""; position: absolute; inset: 4px; border-left: 1.5px solid var(--paper); border-right: 1.5px solid var(--paper); }
.sp-audio-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.sp-audio-title { font-family: var(--serif); font-size: 1.05rem; color: var(--fg); }
.sp-audio-time { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--faint); }

/* ---- Google Maps section (real map) ---- */
.sp-gmaps { position: relative; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.sp-gmaps-canvas { width: 100%; aspect-ratio: 16 / 9; background: var(--parchment); border: 1px solid var(--line); }
.sp-gmaps-load { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; align-self: center;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown);
  background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--accent); padding: 0.7rem 1.4rem; cursor: pointer; }
[data-gmaps].is-loading .sp-gmaps-load, [data-gmaps].is-ready .sp-gmaps-load { display: none; }
.sp-gmaps.sp-gmaps-error .sp-gmaps-canvas::after { content: "—"; }
.sp-gmaps-preview { top: auto; bottom: 1rem; right: 1rem; }
.sp-gmaps-fallback { margin-top: 1.5rem; }
.sp-gmaps-note { font-family: var(--serif); font-size: 1.1rem; color: var(--dim); margin-bottom: 0.8rem; }
/* custom markers are drawn by google; the preview reuses .sp-map-preview */
@media (max-width: 620px) { .sp-gmaps-canvas { aspect-ratio: 4 / 5; } }

/* ============================================================
   MAP — shared detail panel (used by the Home epilogue and /explore)
   ============================================================ */
.sp-map-detail { position: absolute; z-index: 40; background: var(--paper); border: 1px solid rgba(43,33,25,0.18);
  box-shadow: 0 22px 60px rgba(43,33,25,0.22); width: min(340px, 42vw); opacity: 0; transform: translateY(12px);
  pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1); }
[data-gmaps].is-detail .sp-map-detail { opacity: 1; transform: none; pointer-events: auto; }
.sp-map-detail-close { position: absolute; top: 0.5rem; right: 0.6rem; z-index: 2; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(43,33,25,0.55); background: color-mix(in srgb, var(--paper) 80%, transparent); border: 0; padding: 0.25rem 0.4rem; cursor: pointer; }
.sp-map-detail-media { aspect-ratio: 4 / 3; background: var(--stone); overflow: hidden; }
.sp-map-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-map-detail-body { padding: 1rem 1.15rem 1.2rem; }
.sp-md-kicker { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.sp-md-name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.02; color: var(--brown); margin: 0.3rem 0 0.55rem; }
.sp-md-meta { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.04em; color: rgba(43,33,25,0.6); line-height: 1.5; }
.sp-md-summary { font-family: var(--serif); font-size: 1.04rem; line-height: 1.5; color: #6b6152; margin-top: 0.7rem; }
.sp-md-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.1rem; }

/* ---- Home MAP EPILOGUE (after the closing) ---- */
.sp-epilogue { border-top: 1px solid rgba(43,33,25,0.14); }
.sp-epilogue-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.sp-epilogue-intro { font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--dim); max-width: 40ch; margin-top: 0.5rem; }
.sp-gmaps--epilogue { position: relative; height: clamp(340px, 54vh, 560px); border: 1px solid var(--line); overflow: hidden; margin-top: 0; }
.sp-gmaps--epilogue .sp-gmaps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
.sp-gmaps--epilogue .sp-map-detail { left: 1rem; bottom: 1rem; }
.sp-epilogue-fallback { padding: 1.5rem 0; }

/* ---- Home movement V — the Google map in place of the authorial SVG ---- */
.sp-gmaps--home { position: relative; width: 100%; aspect-ratio: 16 / 11; border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(43,33,25,0.2), inset 0 0 0 6px var(--parchment), inset 0 0 0 7px rgba(43,33,25,0.12); overflow: hidden; margin-top: 0; }
.sp-gmaps--home .sp-gmaps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; background: var(--parchment); }
.sp-gmaps--home .sp-map-detail { left: 0.8rem; bottom: 0.8rem; width: min(300px, 74%); }
@media (max-width: 860px) { .sp-gmaps--home { aspect-ratio: 1 / 1; } }

/* ---- church page "Where" — a small Google map zoomed to the church ---- */
.sp-gmaps--single { position: relative; }
.sp-gmaps--single .sp-gmaps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; background: var(--parchment); }

/* ---- custom zoom control (small, rounded, on-brand) for every Google map ---- */
.sp-mapzoom { display: flex; flex-direction: column; gap: 5px; margin: 9px; }
.sp-mapzoom-btn { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(43,33,25,0.25);
  background: color-mix(in srgb, var(--color-paper, #F5F1EA) 92%, transparent); color: var(--bronze, #876A44);
  font-family: var(--sans); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(43,33,25,0.16); transition: background 0.2s, color 0.2s; }
.sp-mapzoom-btn:hover { background: var(--color-paper, #F5F1EA); color: var(--brown, #2B2119); }

/* ---- /explore — full-screen cartography ---- */
body.sp-explore-fullscreen .site-header,
body.sp-explore-fullscreen .site-footer { display: none !important; }
body.sp-explore-fullscreen .page { padding: 0; margin: 0; min-height: 0; }
body.sp-explore-fullscreen { overflow: hidden; }
.sp-explore { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; background: var(--paper); overflow: hidden;
  /* the material tone vars were undefined here → text rendered invisible */
  --fg: var(--brown); --dim: #6b6152; --faint: #9a8f7b; --line: rgba(43, 33, 25, 0.18); --accent: var(--brass); color: var(--brown); }
.sp-explore-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid rgba(43,33,25,0.12); background: color-mix(in srgb, var(--paper) 94%, transparent); position: relative; z-index: 30; }
.sp-explore-back { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.sp-explore-back:hover { color: var(--bronze); }
.sp-explore-cross-mark { display: inline-block; width: 0.6em; height: 0.8em; color: var(--bronze); }
.sp-explore-heading { text-align: center; }
.sp-explore-heading h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1; color: var(--brown); }
.sp-explore-sub { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.sp-langbar--inline { position: static; background: none; border: 0; padding: 0; backdrop-filter: none; }
.sp-explore-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.sp-explore .sp-gmaps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; background: var(--parchment); }
.sp-explore-nomap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; padding: 2rem; background: var(--parchment); }
.sp-explore-nomap .sp-explore-cross { width: 22px; height: 29px; color: var(--bronze); opacity: 0.8; }
.sp-explore-nomap p { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--dim); max-width: 30ch; }
.sp-explore-legend { position: absolute; left: 1rem; bottom: 1rem; z-index: 15; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; padding: 0.5rem 0.85rem; background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--line); font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sp-explore-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
/* the side panel (desktop) */
.sp-explore-panel { position: absolute; top: 1rem; right: 1rem; bottom: 1rem; width: min(360px, 33vw); z-index: 20; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid rgba(43,33,25,0.22); box-shadow: 0 20px 60px rgba(43,33,25,0.18); }
.sp-explore-tools { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
.sp-explore-tools .sp-search { flex: 1 1 160px; }
.sp-explore-tools .sp-search input { font-size: 1.05rem; }
/* NB: `.sp-map-list` is also the authorial-map's mobile list (display:none on
   desktop) — scope the explore list so it always shows. */
.sp-explore .sp-map-list { display: flex; flex-direction: column; }
.sp-map-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; }
.sp-map-list-group { padding: 0.9rem 1rem 0.25rem; position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(4px); }
.sp-map-list-district { font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.sp-xrow { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: 0.55rem 1rem; cursor: pointer; }
.sp-xrow:hover, .sp-xrow.is-sel { background: color-mix(in srgb, var(--brass) 13%, transparent); }
.sp-xrow.is-sel { box-shadow: inset 3px 0 0 var(--brass); }
.sp-xrow.is-hidden { display: none; }
.sp-xrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bronze); }
.sp-xrow--next .sp-xrow-dot { background: none; border: 1.5px solid var(--brass); }
.sp-xrow--planned .sp-xrow-dot { background: none; border: 1.5px dashed var(--brass); }
.sp-xrow--unvisited .sp-xrow-dot { width: 7px; height: 7px; background: none; border: 1px solid var(--faint); }
.sp-xrow-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sp-xrow-name { font-family: var(--serif); font-size: 1.04rem; line-height: 1.08; color: var(--fg); }
.sp-xrow-meta { font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sp-xrow-state { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--faint); white-space: nowrap; }
.sp-xrow--visited .sp-xrow-state, .sp-xrow--next .sp-xrow-state { color: var(--accent); }
.sp-map-empty { padding: 2rem 1rem; font-family: var(--serif); font-style: italic; color: var(--dim); }
.sp-explore-note { flex: 0 0 auto; padding: 0.7rem 1rem; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--faint); line-height: 1.5; }
/* the selected-church detail: a panel on the LEFT, with room for the cover photo */
.sp-explore .sp-map-detail { left: 1rem; top: 1rem; right: auto; bottom: auto; width: min(360px, 30vw); max-height: calc(100% - 2rem); overflow: auto; }
.sp-map-detail-media { display: block; }
.sp-map-detail-media--empty { display: flex; align-items: center; justify-content: center; }
.sp-map-detail-media--empty::after { content: ""; width: 26px; height: 34px; opacity: 0.28;
  background: var(--bronze); -webkit-mask: url("../icons/cross.svg") center/contain no-repeat; mask: url("../icons/cross.svg") center/contain no-repeat; }

@media (max-width: 820px) {
  .sp-explore-heading { display: none; }
  .sp-explore-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 44vh; border: 0; border-top: 1px solid rgba(43,33,25,0.2); box-shadow: 0 -14px 40px rgba(43,33,25,0.16); }
  .sp-explore-legend { left: 0.7rem; bottom: calc(44vh + 0.7rem); }
  .sp-explore .sp-map-detail, .sp-gmaps--epilogue .sp-map-detail { left: 0.7rem; right: 0.7rem; bottom: calc(44vh + 0.7rem); width: auto; }
}

/* ---- Explore top-bar: internal nav + inline language toggle ---- */
.sp-explore-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.7rem); }
.sp-explore-nav a { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.3s var(--ease); }
.sp-explore-nav a:hover, .sp-explore-nav a[aria-current="page"] { color: var(--brown); }
.sp-topbar-lang--inline { position: static; background: none; border: 0; padding: 0; }
@media (max-width: 820px) { .sp-explore-nav { display: none; } }

/* ============================================================
   ABOUT ME (v5) — the author's page: editorial, cinematic, spacious.
   ============================================================ */
/* The opening is a dark diptych: his portrait is black and white and it fought
   the paper tone. The name steps down and the CLAIM becomes the largest thing —
   the page has to answer "who is this?" before the long note begins. */
.sp-about-hero { position: relative; overflow: hidden; padding-top: clamp(5rem, 10vw, 8rem); }
.sp-about-hero-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
.sp-about-hero--nomedia .sp-about-hero-grid { grid-template-columns: 1fr; max-width: 60ch; }
.sp-about-portrait .sp-figure { aspect-ratio: 2 / 3; --fig-bg: #231f1b; }
.sp-about-intro .sp-kicker { color: var(--accent); opacity: 0.8; }
.sp-about-name { font-family: var(--serif); font-weight: 300; line-height: 1; letter-spacing: -0.01em; font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--fg); margin: 0.9rem 0 0.35rem; }
.sp-about-role { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
/* the claim */
.sp-about-lede { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.1vw, 2.4rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--fg); margin-top: clamp(1.1rem, 2.2vw, 1.7rem); max-width: 22ch; text-wrap: balance; }
/* the short answer under it */
.sp-about-who { font-family: var(--serif); font-size: 1rem; line-height: 1.75; color: var(--dim); margin-top: 1.1rem; max-width: 46ch; }
/* the contact facts — the same settings the footer reads */
.sp-about-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.2rem; margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sp-about-facts dt { font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); padding-top: 0.2rem; }
.sp-about-facts dd { margin: 0; font-family: var(--serif); font-size: 0.95rem; color: var(--fg); }

/* Formosa, in gold, behind everything.
   Real OpenStreetMap geometry, inlined so the strokes inherit currentColor and
   the gold is the site's own. The mask lifts the map away from the text column,
   so the city stays at the edges and never competes with the reading.
   No transition on this opacity: transitioning a value that comes from a var()
   sticks in Chromium (the transition never restarts) — and it is a fixed value
   anyway. */
.sp-about-map { position: absolute; inset: 0; pointer-events: none; overflow: hidden; color: var(--accent); opacity: 0.12;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 50%, transparent 12%, #000 62%);
          mask-image: radial-gradient(120% 90% at 78% 50%, transparent 12%, #000 62%); }
.sp-about-map svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 118%; height: auto; }
.sp-about-map .mp-cat { opacity: 0.55; }
.sp-about-colophon { position: relative; display: flex; justify-content: space-between; gap: 0.8rem 1.4rem; flex-wrap: wrap;
  width: min(var(--wrap), calc(100% - clamp(2.5rem, 6vw, 7rem))); margin: clamp(1.8rem, 3vw, 2.6rem) auto 0; padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.sp-about-colophon a { color: var(--faint); text-decoration: none; border-bottom: 1px solid transparent; }
.sp-about-colophon a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sp-about-bio-body { font-family: var(--serif); font-size: clamp(1.16rem, 1.9vw, 1.34rem); line-height: 1.62; color: var(--fg); }
.sp-about-bio-body p + p { margin-top: 0.85em; }
.sp-about-bio-body p:first-child::first-letter { font-size: 3.3em; line-height: 0.68; float: left; margin: 0.05em 0.12em 0 0; color: var(--accent); font-weight: 500; font-family: var(--serif); }
.sp-about-gallery .sp-opener { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sp-about-links { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sp-about-links-row { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; }
@media (max-width: 860px) {
  .sp-about-hero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .sp-about-portrait { max-width: 22rem; }
  /* Stacked, the text sits under the portrait rather than beside it, so the
     mask's hole (aimed at the right-hand column) would land on nothing. Fade
     from the top instead, and pull the map back — the city is a texture here,
     not a backdrop. */
  .sp-about-map {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
            mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
    opacity: 0.09;
  }
  .sp-about-map svg { width: 150%; }
  .sp-about-lede { max-width: 26ch; }
}

/* ============================================================
   MOBILE / iPAD — alvos de toque confortáveis (telas sem hover)
   ============================================================ */
@media (hover: none) {
  .sp-topbar-nav a, .sp-topbar-lang a, .sp-topbar-mark,
  .sp-link, .sp-inline-link, .sp-map-detail-close,
  .sp-explore-nav a, .sp-gmaps-load, .sp-langbar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sp-topbar-nav { gap: clamp(0.85rem, 4vw, 1.6rem); }
  .sp-topbar-inner { row-gap: 0.3rem; }
  .sp-topbar-nav a:active, .sp-topbar-lang a:active,
  .sp-link:active, .sp-inline-link:active { opacity: 0.55; }
}

/* ============================================================
   THE CLOSING EMBLEM — the camera that becomes the cathedral.
   A line-drawing morph that closes the book: the instrument
   becomes what it seeks. Additive; scoped under .sp-close-emblem.
   ============================================================ */
.sp-close-emblem{width:clamp(180px,26vw,280px);height:auto;overflow:visible;display:block;margin:0 auto clamp(1.4rem,3vw,2.4rem)}
.sp-close-emblem .ce-ink{fill:none;stroke:#6d5030;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sp-close-emblem .ce-hair{fill:none;stroke:#9a7a49;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sp-close-emblem .ce-hair2{fill:none;stroke:#9a7a49;stroke-width:.7;opacity:.85;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sp-close-emblem .ce-gold{stroke:#B0862f !important}
.sp-close-emblem .ce-reddot{fill:#9e2f28;stroke:#B0862f;stroke-width:1.2;vector-effect:non-scaling-stroke}
.sp-close-emblem .ce-frame{fill:none;stroke:#9a7a49;stroke-width:1;opacity:.12;vector-effect:non-scaling-stroke}

#sp-ce-cam{animation:spCeCam 13s cubic-bezier(0.62,0,0.30,1) infinite}
#sp-ce-church{animation:spCeChurch 13s cubic-bezier(0.62,0,0.30,1) infinite}
#sp-ce-lens{animation:spCeLens 13s cubic-bezier(0.62,0,0.30,1) infinite}
#sp-ce-tower{transform-box:fill-box;transform-origin:50% 100%;animation:spCeGrow 13s cubic-bezier(0.62,0,0.30,1) infinite}
#sp-ce-pinn{transform-box:fill-box;transform-origin:50% 100%;animation:spCeGrow 13s cubic-bezier(0.62,0,0.30,1) infinite}
#sp-ce-door{transform-box:fill-box;transform-origin:50% 100%;animation:spCeGrow 13s cubic-bezier(0.62,0,0.30,1) infinite}
@keyframes spCeCam{0%{opacity:0}5%{opacity:1}32%{opacity:1}46%{opacity:0}100%{opacity:0}}
@keyframes spCeChurch{0%,32%{opacity:0}52%{opacity:1}90%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes spCeLens{0%{opacity:0}5%{opacity:1}94%{opacity:1}98%{opacity:0}100%{opacity:0}}
@keyframes spCeGrow{0%,32%{transform:scaleY(0.02)}56%{transform:scaleY(1)}100%{transform:scaleY(1)}}

.sp-close-emblem .ce-draw{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .sp-close-emblem .ce-draw{stroke-dashoffset:1;animation:spCeDraw 13s cubic-bezier(0.62,0,0.30,1) infinite}
}
@keyframes spCeDraw{0%,34%{stroke-dashoffset:1}58%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  #sp-ce-cam,#sp-ce-church,#sp-ce-lens,#sp-ce-tower,#sp-ce-pinn,#sp-ce-door,.sp-close-emblem .ce-draw{animation:none}
  #sp-ce-cam{opacity:0}#sp-ce-church,#sp-ce-lens{opacity:1}
  #sp-ce-tower,#sp-ce-pinn,#sp-ce-door{transform:none}.sp-close-emblem .ce-draw{stroke-dashoffset:0}
}

/* =====================================================================
   MOVING IMAGE — the church's videos (sp_video → public).
   Editorial rhythm matching the photo essay: proportion-aware frames, a
   quiet gold play affordance, a discreet "Vídeo" tag, responsive & anti-CLS.
   Behaviour lives in assets/church/js/video.js.
   ===================================================================== */
.sp-cvideos { }
.sp-vwrap { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sp-vgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.sp-vgrid--single { grid-template-columns: 1fr; max-width: 60rem; margin-inline: auto; }
@media (max-width: 760px) { .sp-vgrid { grid-template-columns: 1fr; gap: clamp(1.2rem, 5vw, 1.8rem); } }

.sp-vid { margin: 0; padding: 0; }
.sp-vid-frame {
  position: relative;
  aspect-ratio: var(--ar, 1.7778);
  background: var(--charcoal, #17130f);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 50px -34px rgba(0,0,0,0.6);
}
.sp-vid-frame:focus-within { outline: 2px solid var(--brass, #A9833E); outline-offset: 3px; }

/* poster layer (a responsive <picture> or a quiet placeholder) */
.sp-vid-poster { position: absolute; inset: 0; z-index: 2; transition: opacity 0.45s var(--ease, ease); }
.sp-vid-poster picture, .sp-vid-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-vid-poster--empty {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(169,131,62,0.16), transparent 60%),
    linear-gradient(160deg, #2b2119 0%, #17130f 100%);
}
.sp-vid-poster--empty::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(245,241,234,0.05) 1px, transparent 1px);
  background-size: 4px 4px; opacity: 0.5;
}

/* the media element — hidden until it plays/previews, then it rises above */
.sp-vid-el {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  background: #000; opacity: 0; transition: opacity 0.4s var(--ease, ease);
}
.sp-vid.is-preview .sp-vid-el,
.sp-vid.is-playing .sp-vid-el { opacity: 1; z-index: 4; }
.sp-vid.is-preview .sp-vid-poster,
.sp-vid.is-playing .sp-vid-poster { opacity: 0; }
.sp-vid.is-playing .sp-vid-el { object-fit: contain; } /* never crop during real playback */

/* Vimeo facade iframe */
.sp-vid-iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }

/* legibility veil behind the badge (fades on hover) */
.sp-vid-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(20,18,15,0.42) 0%, rgba(20,18,15,0) 34%);
  transition: opacity 0.4s var(--ease, ease);
}
.sp-vid.is-preview .sp-vid-veil,
.sp-vid.is-playing .sp-vid-veil { opacity: 0; }

/* play affordance */
.sp-vid-play {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(52px, 7vw, 66px); height: clamp(52px, 7vw, 66px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal, #17130f);
  background: color-mix(in srgb, var(--paper, #f5f1ea) 92%, transparent);
  border: 1px solid rgba(169,131,62,0.55);
  box-shadow: 0 10px 30px rgba(20,18,15,0.32); cursor: pointer;
  transition: transform 0.25s var(--ease, ease), background 0.25s var(--ease, ease), opacity 0.3s var(--ease, ease);
  -webkit-appearance: none; appearance: none;
}
.sp-vid-play svg { margin-left: 3px; }
@media (hover: hover) { .sp-vid-frame:hover .sp-vid-play { transform: translate(-50%, -50%) scale(1.06); background: var(--paper, #f5f1ea); } }
.sp-vid-play:focus-visible { outline: 2px solid var(--brass, #A9833E); outline-offset: 3px; }
.sp-vid.is-playing .sp-vid-play { opacity: 0; pointer-events: none; }

/* the small "Vídeo · 1:23" tag */
.sp-vid-badge {
  position: absolute; z-index: 5; left: clamp(0.7rem, 2vw, 1rem); bottom: clamp(0.7rem, 2vw, 1rem);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans, sans-serif); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,234,0.92); padding: 0.32rem 0.6rem;
  background: rgba(20,18,15,0.34); backdrop-filter: blur(3px);
  transition: opacity 0.3s var(--ease, ease);
}
.sp-vid-badge-ic {
  width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--gold, #A9833E);
}
.sp-vid-badge-dur { color: rgba(245,241,234,0.7); font-variant-numeric: tabular-nums; }
.sp-vid.is-playing .sp-vid-badge { opacity: 0; pointer-events: none; }

/* loading hint (shown by JS while a preview/playback buffers) */
.sp-vid-load { position: absolute; z-index: 5; }

/* caption, same voice as the photo captions */
.sp-vid-cap {
  margin-top: 0.6rem; font-family: var(--sans, sans-serif); font-size: 0.66rem;
  letter-spacing: 0.09em; color: var(--dim, #6b6152); line-height: 1.55;
}
.sp-vid.sp-vid--portrait .sp-vid-frame { max-height: 82vh; }

@media (prefers-reduced-motion: reduce) {
  .sp-vid-poster, .sp-vid-el, .sp-vid-veil, .sp-vid-play, .sp-vid-badge { transition: none; }
  @media (hover: hover) { .sp-vid-frame:hover .sp-vid-play { transform: translate(-50%, -50%); } }
}

/* ===== Community notes (research-imported: sp_church_note) ============ */
.sp-cnotes .sp-opener { margin-bottom: 1.2rem; }
.sp-cnotes .sp-cnotes-lede { font-family: var(--serif); font-style: italic; font-size: 1.06rem; color: var(--faint); margin: 0.3rem 0 2.5rem; max-width: 46ch; }

/* story / curiosity — pages of a kept book */
.sp-note { position: relative; padding: 1.55rem 1.6rem 1.4rem 1.75rem; margin: 0 0 1.1rem;
  background: color-mix(in srgb, var(--paper, #f5f1ea) 52%, transparent);
  border: 1px solid var(--line, rgba(43,33,25,0.12));
  border-left: 2px solid var(--accent, var(--gold, #A9833E)); }
.sp-note-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.14rem, 2.2vw, 1.44rem); line-height: 1.22; margin: 0 0 0.55rem; }
.sp-note-title::before { content: "\00A7"; color: var(--accent, var(--gold, #A9833E)); font-weight: 400; margin-right: 0.5rem; opacity: 0.72; }
.sp-note-body { line-height: 1.75; }
.sp-note-body p { margin: 0 0 0.7rem; }
.sp-note-body p:last-child { margin-bottom: 0; }
.sp-note-src { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0.9rem 0 0; }
.sp-note-src a { color: var(--faint); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--faint) 42%, transparent); }
.sp-note-src a:hover { color: var(--accent, var(--gold, #A9833E)); border-bottom-color: currentColor; }

/* group headings */
.sp-note-group { margin-top: 2.7rem; }
.sp-note-grouph { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin: 0 0 1.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line, rgba(43,33,25,0.14)); }

/* timeline — a gold thread with nodes; year column, then a clear gutter */
.sp-note-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sp-note-timeline::before { content: ""; position: absolute; left: 3.9rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: color-mix(in srgb, var(--accent, var(--gold, #A9833E)) 45%, transparent); }
.sp-note-timeline li { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.9rem; padding: 0.65rem 0; }
.sp-note-timeline li::before { content: ""; position: absolute; left: 3.9rem; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--gold, #A9833E)); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--paper, #f5f1ea); }
.sp-note-yr { font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--accent, var(--gold, #A9833E)); text-align: right; padding-top: 0.22rem; white-space: nowrap; }
.sp-note-ev { line-height: 1.5; }
.sp-note-ev b { display: block; font-weight: 600; color: var(--brown, #2b2119); }
.sp-note-ev span { display: block; margin-top: 0.15rem; color: var(--dim, #6b6152); font-size: 0.93rem; }

/* people */
.sp-note-people { list-style: none; margin: 0; padding: 0; }
.sp-note-people li { padding: 0.75rem 0; border-top: 1px solid var(--line, rgba(43,33,25,0.10)); }
.sp-note-people li:first-child { border-top: 0; }
.sp-note-name { display: block; font-family: var(--serif); font-size: 1.06rem; color: var(--brown, #2b2119); }
.sp-note-name em { color: var(--faint); font-size: 0.82em; font-style: italic; }
.sp-note-role { display: block; color: var(--dim, #6b6152); font-size: 0.93rem; line-height: 1.55; margin-top: 0.2rem; }

.sp-note-more { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.05em; color: var(--faint); margin-top: 1rem; font-style: italic; }
.sp-note-aka { margin-top: 2.4rem; font-family: var(--serif); font-style: italic; color: var(--dim, #6b6152); text-align: center; }
.sp-note-akalabel { display: block; font-family: var(--sans); font-style: normal; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.3rem; }
@media (max-width: 560px) {
  .sp-note { padding: 1.2rem 1.1rem 1.1rem 1.3rem; }
  .sp-note-timeline::before, .sp-note-timeline li::before { left: 3.3rem; }
  .sp-note-timeline li { grid-template-columns: 2.6rem 1fr; gap: 1.5rem; }
}