/* PERF-01: the render-blocking @import of Google Fonts was removed from here.
The book's two voices (Cormorant Garamond + Inter) are now loaded via a
non-render-blocking emitted by the header on church pages
(sp_book_fonts_link() in includes/church/appearance.php). */
/* ============================================================
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; }
/* ============================================================
APPEARANCE PRESETS — per-module grounds, chosen in the admin (Módulos →
Aparência). Each preset is a data-tone value with a full ink/accent set;
light grounds inherit the paper grain, dark grounds override to charcoal.
============================================================ */
.sp-chapter[data-tone="pergaminho"] { background: #E5D9C5; --line: rgba(43, 33, 25, 0.17); --accent: var(--gold); }
.sp-chapter[data-tone="marfim"] { background: #F7F3EC; --line: rgba(43, 33, 25, 0.13); --accent: var(--brass); }
.sp-chapter[data-tone="missal"] { background: #EEE7DA; --line: rgba(43, 33, 25, 0.16); --accent: #b0863b; }
.sp-chapter[data-tone="marmore"] { background: #DDD4C5; --line: rgba(43, 33, 25, 0.18); --accent: var(--bronze); }
.sp-chapter[data-tone="vitral"] { background: #17130F; color: var(--paper); --fg: var(--paper); --dim: #b9b1a3; --faint: #7c7568; --line: rgba(245, 241, 234, 0.14); --accent: var(--gold); }
.sp-chapter[data-tone="sacristia"] { background: #2B2119; color: var(--paper-warm); --fg: var(--paper-warm); --dim: #c6baa6; --faint: #8a7d68; --line: rgba(245, 241, 234, 0.13); --accent: var(--gold); }
.sp-chapter[data-tone="vesperas"] { background: #191D2A; color: #DCD7C8; --fg: #DCD7C8; --dim: #a7a495; --faint: #6f7280; --line: rgba(220, 215, 200, 0.14); --accent: #CBB789; }
.sp-chapter[data-tone="basalto"] { background: #131310; color: #CFC7B5; --fg: #CFC7B5; --dim: #9b937f; --faint: #6b6555; --line: rgba(240, 235, 220, 0.12); --accent: var(--gold); }
.sp-chapter[data-tone="vitral"]::before,
.sp-chapter[data-tone="sacristia"]::before,
.sp-chapter[data-tone="vesperas"]::before,
.sp-chapter[data-tone="basalto"]::before { background-image: var(--texture-charcoal); background-size: 180px; mix-blend-mode: soft-light; }
/* FONTS — one site-wide pairing; the serif face swaps, Inter stays for labels */
.sp-page.sp-fonts-newsreader { --serif: "Newsreader", Georgia, "Times New Roman", serif; }
.sp-page.sp-fonts-eb-garamond { --serif: "EB Garamond", Georgia, "Times New Roman", serif; }
.sp-page.sp-fonts-fraunces { --serif: "Fraunces", Georgia, "Times New Roman", serif; }
.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; }
/* ---------- Header: IDÊNTICO ao do site principal ----------
O church reusa .site-header/.header-inner/.brand/.site-nav (mesmo tamanho,
espaçamento, escala e comportamento de scroll do portfólio). Só o menu muda
para o do projeto. As bandeiras EN/PT entram como último item do menu. */
.site-nav-lang { display: inline-flex; align-items: center; }
.site-nav-lang .sp-flagbtn { padding-block: 0; }
.site-nav-lang a::after { content: none; }
.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: 100vh; 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: 82vh; 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: 96vh; 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); }
/* The photograph, at rest.
It used to be position:absolute + opacity:0, revealed only on :hover at
>=861px with a mouse, and display:none under 620px — so a visited row and an
unvisited one were pixel-identical (both 84px tall) for everyone who did not
happen to hover the right 3 rows out of 195, and the photograph did not exist
at all on a phone. The archive's whole argument is the contrast between the
picture and the empty line, so the picture has to be on the page. */
.sp-row-thumb { width: 6.5rem; height: 4.4rem; object-fit: cover; display: block; align-self: center; background: var(--line); box-shadow: 0 10px 30px rgba(43,33,25,0.18); transition: transform 0.4s var(--ease); }
.sp-row--has-thumb { grid-template-columns: 3.4rem 6.5rem 1fr auto; align-items: center; padding-block: 1.5rem; }
/* the lived row carries a little more weight than the ones still waiting */
.sp-row--has-thumb .sp-row-name { font-size: clamp(1.4rem, 2.5vw, 1.95rem); }
.sp-row--has-thumb .sp-row-sub { color: var(--accent); }
@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 { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.sp-row-thumb { transition: none; }
.sp-row--has-thumb:hover .sp-row-thumb { transform: none; }
}
/* How much of a region has been lived — the count the page already had, now
with a hairline that fills. Hidden from the a11y tree: the group head carries
the same number as text. */
.sp-group-prog { height: 2px; background: var(--line); margin: 0.55rem 0 0.15rem; overflow: hidden; }
.sp-group-prog > i { display: block; height: 100%; background: var(--accent); }
.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: 96vh; min-height: 96svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--charcoal); }
.sp-chero--nomedia { min-height: 66vh; min-height: 66svh; background: var(--brown); }
.sp-chero--minimal { min-height: 72vh; 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); } }
/* foto em destaque (is_featured): uma "prancha" de largura total com a legenda
editorial centrada, marcada por um filete dourado — o detalhe que o João
quis ("gostei do teto → legenda → destaque bonito"). */
.sp-ph--feature { margin-top: clamp(1.4rem, 4vw, 3rem); margin-bottom: clamp(1.6rem, 4vw, 3.2rem); }
.sp-ph--feature .sp-ph-media { box-shadow: 0 24px 60px -32px rgba(0,0,0,0.55); }
.sp-ph-cap--feature {
display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
margin: clamp(0.9rem, 2vw, 1.4rem) auto 0; max-width: 48ch; text-align: center;
}
.sp-ph-cap--feature .sp-ph-cap-mark {
width: 1px; height: 26px; background: linear-gradient(var(--gold), transparent); opacity: 0.85;
}
.sp-ph-cap--feature .sp-ph-cap-text {
font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2.2vw, 1.18rem);
letter-spacing: 0.01em; color: var(--dim); line-height: 1.5; text-wrap: balance; text-transform: none;
}
/* 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; }
/* Grade de horários de missa (dia · horário · categoria/idioma) — igrejas visitadas e antessala */
.sp-massgrid { margin: 0.2rem 0 0.4rem; }
.sp-massrow { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.sp-massrow:last-child { border-bottom: 0; }
.sp-massrow dt { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); align-self: center; }
.sp-massrow dd { font-family: var(--serif); font-size: 1.08rem; color: var(--fg); line-height: 1.6; }
.sp-massqual { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.02em; text-transform: none; color: var(--dim); }
@media (max-width: 640px) { .sp-massrow { grid-template-columns: 5.25rem 1fr; gap: 0.7rem; } }
.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: 90vh; min-height: 90svh; } .sp-plate { min-height: 84vh; 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; }
/* On a phone the photograph SHRINKS — it used to display:none, which meant the
archive had no pictures at all for most visitors. Placed explicitly so the
state still sits under the name rather than wrapping to its own row. */
.sp-row--has-thumb { grid-template-columns: 2.6rem 4.5rem 1fr; gap: 0.9rem; padding-block: 1.1rem; align-items: start; }
.sp-row--has-thumb .sp-row-num { grid-column: 1; grid-row: 1; }
.sp-row--has-thumb .sp-row-thumb { grid-column: 2; grid-row: 1 / span 2; width: 4.5rem; height: 3rem; align-self: start; }
.sp-row--has-thumb .sp-row-main { grid-column: 3; grid-row: 1; }
.sp-row--has-thumb .sp-row-state { grid-column: 3; grid-row: 2; margin-top: 0.2rem; }
.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: 60vh; 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 LIVING MONUMENT — the 195 Sundays as a field of slender candles; the ones
already lived are lit and breathe, the rest wait as faint marks. A quiet
monument to a years-long vow, not a progress bar. */
.sp-monument { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.3rem); }
.sp-mon-count { font-family: var(--serif); line-height: 1; font-size: clamp(2.6rem, 7vw, 4.8rem); letter-spacing: 0.01em; }
.sp-mon-count .sp-mon-lit { color: var(--accent); }
.sp-mon-count .sp-mon-slash { color: color-mix(in srgb, var(--fg) 22%, transparent); margin: 0 0.26em; }
.sp-mon-count .sp-mon-tot { color: var(--dim); }
.sp-mon-field { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 6px; max-width: 640px; }
.sp-mon-mark { width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.sp-mon-h0 { height: 15px; } .sp-mon-h1 { height: 19px; } .sp-mon-h2 { height: 23px; }
.sp-mon-h3 { height: 27px; } .sp-mon-h4 { height: 31px; } .sp-mon-h5 { height: 35px; }
.sp-mon-mark.is-lit {
position: relative; min-height: 28px;
background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
box-shadow: 0 0 7px 1px color-mix(in srgb, var(--accent) 45%, transparent),
0 0 18px 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.sp-mon-mark.is-lit::after {
content: ""; position: absolute; bottom: 100%; left: 50%;
width: 4px; height: 8px;
transform: translateX(-50%); transform-origin: 50% 100%;
border-radius: 50% 50% 46% 46% / 62% 62% 40% 40%;
background: linear-gradient(to top, color-mix(in srgb, var(--accent) 35%, #fff), var(--accent) 78%);
box-shadow: 0 0 9px 2px color-mix(in srgb, var(--accent) 55%, transparent),
0 0 16px 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
/* the candle body breathes slowly … */
.sp-mon-mark.is-lit { animation: spMonBreathe 5.5s var(--ease) infinite; }
.sp-mon-mark.is-lit:nth-of-type(3n+2) { animation-delay: 1.7s; }
.sp-mon-mark.is-lit:nth-of-type(3n) { animation-delay: 3.2s; }
/* … while the flame flickers, each one out of step with the others. */
.sp-mon-mark.is-lit::after { animation: spMonFlame 1.9s ease-in-out infinite; }
.sp-mon-mark.is-lit:nth-of-type(3n+1)::after { animation-duration: 2.1s; animation-delay: -0.4s; }
.sp-mon-mark.is-lit:nth-of-type(3n+2)::after { animation-duration: 1.7s; animation-delay: -1.1s; }
.sp-mon-mark.is-lit:nth-of-type(3n)::after { animation-duration: 2.3s; animation-delay: -0.7s; }
}
@keyframes spMonBreathe { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes spMonFlame {
0% { transform: translate(-50%) scale(1, 1); opacity: .95; }
15% { transform: translate(-50%) scale(.96, 1.12); opacity: 1; }
28% { transform: translate(calc(-50% - .3px)) scale(1.05, .9); opacity: .84; }
42% { transform: translate(-50%) scale(.98, 1.08); opacity: 1; }
58% { transform: translate(calc(-50% + .3px)) scale(1.02, .95); opacity: .9; }
73% { transform: translate(-50%) scale(.95, 1.15); opacity: 1; }
86% { transform: translate(calc(-50% - .2px)) scale(1.04, .93); opacity: .87; }
100% { transform: translate(-50%) scale(1, 1); opacity: .95; }
}
/* ============================================================
IV·b · THE NEXT VISIT — "The Illuminated Leaf" (parchment)
A missal leaf, no photograph: a ruled rubric margin (folio, the cross as a
maniple, the feast day in rubric red) beside a written column opened by a
gilt versal, with the church's facts gathered into a centred colophon.
============================================================ */
/* the one new token — an aged rubric red, used only as a manuscript would:
for the day / feast. (move to the main .sp-page token block to centralise) */
.sp-page { --color-rubric: #9d3a2b; --rubric: var(--color-rubric); }
.sp-nextvisit-chapter { overflow: hidden; }
/* the leaf: rubric margin (left) + written column (right) */
.sp-nl-leaf { display: grid; grid-template-columns: minmax(188px, 232px) 1fr; gap: 0; align-items: start; }
/* --- the ruled rubric margin --- */
.sp-nl-rubric { border-right: 1px solid rgba(43, 33, 25, 0.22); padding-right: clamp(1.6rem, 2.4vw, 2.2rem); display: flex; flex-direction: column; gap: 1.5rem; }
.sp-nl-folio { font-family: var(--serif); font-style: italic; font-size: 1.2rem; letter-spacing: 0.06em; color: var(--gold); }
.sp-nl-maniple { width: 26px; height: auto; color: var(--gold); }
.sp-nl-rday { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.5; color: var(--rubric); }
.sp-nl-rday span:not(:first-child) { color: var(--faint); letter-spacing: 0.16em; }
/* --- the written column, over parchment rules --- */
.sp-nl-col { padding-left: clamp(2rem, 3.4vw, 3.4rem); position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, rgba(43, 33, 25, 0.05) 40px, rgba(43, 33, 25, 0.05) 41px); background-position: 0 4px; }
.sp-nl-col::after { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 1px; background: rgba(43, 33, 25, 0.1); }
.sp-nl-kicker { display: inline-block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--rubric); }
.sp-nl-name { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.012em; font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--fg); margin: 0.7rem 0 0.3rem; text-wrap: balance; }
.sp-nl-name a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
.sp-nl-name a:hover { color: var(--accent); }
.sp-nl-official { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--dim); margin: 0; }
/* the illuminated prose — the "reason for the choice", opened by a versal */
.sp-nl-prose { font-family: var(--serif); font-size: clamp(1.12rem, 1.7vw, 1.28rem); line-height: 1.62; color: var(--fg); text-align: justify; hyphens: auto; margin: 1.9rem 0 0; }
.sp-nl-prose::first-letter { font-family: var(--serif); font-weight: 600; font-size: 4.3em; line-height: 0.66; float: left; margin: 0.1em 0.18em 0 0; padding: 0.08em 0.16em; color: var(--gold); border: 1px solid rgba(196, 162, 103, 0.5); }
/* the colophon — the facts, centred in small caps */
.sp-nl-colophon { margin-top: 2.2rem; border-top: 1px solid rgba(43, 33, 25, 0.18); padding-top: 1.5rem; }
.sp-nl-colk { display: block; text-align: center; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--rubric); margin-bottom: 1rem; }
.sp-nl-cols { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem 2rem; margin: 0; }
.sp-nl-c { text-align: center; }
.sp-nl-c dt { font-family: var(--sans); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.25rem; }
.sp-nl-c dd { font-family: var(--serif); font-size: 1.02rem; color: var(--fg); margin: 0; }
.sp-nl-foot { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem 2rem; }
/* the invitation (sp_join_next_cta_html) falls to the foot of the column */
.sp-nl-col > .sp-join-next,
.sp-nl-col > [class*="join"] { margin-top: 1.9rem; }
/* --- mobile: a pocket breviary, in portrait --- */
@media (max-width: 720px) {
.sp-nl-leaf { grid-template-columns: 1fr; }
.sp-nl-rubric { border-right: 0; padding: 0 0 1.2rem; border-bottom: 1px solid rgba(43, 33, 25, 0.28); flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; }
.sp-nl-rubric .sp-nl-folio { order: 1; }
.sp-nl-rday { order: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.7rem; }
.sp-nl-rubric .sp-nl-maniple { order: 3; width: 18px; }
.sp-nl-col { padding-left: 0; margin-top: 1.5rem; background-position: 0 6px; }
.sp-nl-col::after { display: none; }
.sp-nl-kicker, .sp-nl-name, .sp-nl-official { display: block; text-align: center; }
.sp-nl-name { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
.sp-nl-prose { font-size: 1.04rem; line-height: 1.78; margin-top: 1.6rem; }
.sp-nl-prose::first-letter { font-size: 3.4em; }
.sp-nl-foot { justify-content: center; }
}
/* 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: 72vh; 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); }
/* ============================================================
MOBILE / iPAD — alvos de toque confortáveis (telas sem hover)
============================================================ */
@media (hover: none) {
.sp-link, .sp-inline-link, .sp-closing-lang a, .sp-vatican-coda,
.sp-nextvisit-link, .sp-index-row a, .sp-audio-btn,
.sp-langflags a, .sp-map-filter, .sp-select select, .sp-map-preview-close {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.sp-closing-nav { gap: 1rem 1.4rem; }
.sp-closing-lang { gap: 0.9rem; }
.sp-link:active, .sp-inline-link:active, .sp-closing-lang a:active { opacity: 0.55; }
}
/* ============================================================
LANGUAGE FLAGS — Brazil (PT) / United Kingdom (EN)
Coloridas mas contidas; a ativa fica nítida, a outra apagada.
============================================================ */
.sp-langflags { display: inline-flex; align-items: center; gap: 0.55rem; }
.sp-flagbtn {
display: inline-flex; line-height: 0; padding: 0; text-decoration: none; border-radius: 4px;
opacity: 0.42; filter: saturate(0.82);
transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.sp-flagbtn:hover, .sp-flagbtn:focus-visible { opacity: 0.85; }
.sp-flagbtn.is-on { opacity: 1; filter: saturate(1); outline: 1.5px solid rgba(196, 162, 103, 0.6); outline-offset: 2px; }
.sp-flag {
width: 28px; height: 20px; display: block; border-radius: 2.5px;
box-shadow: 0 1px 3px rgba(20, 18, 15, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
/* no rodapé claro, a sombra é mais leve */
.sp-closing-lang .sp-flag { box-shadow: 0 1px 3px rgba(20, 18, 15, 0.16), inset 0 0 0 1px rgba(20, 18, 15, 0.06); }
@media (hover: none) {
.sp-flagbtn { min-height: 44px; align-items: center; padding-inline: 0.2rem; }
}
/* ============================================================
BEYOND DUBLIN — capítulos especiais como cards editoriais
compactos e CENTRADOS (foto ao lado do texto + mais informação).
============================================================ */
.sp-beyond-head { text-align: center; margin-bottom: clamp(1.4rem, 4vw, 2.2rem); }
.sp-beyond-eyebrow { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent, #A98A55); margin-bottom: 0.55rem; }
.sp-beyond-title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0; color: var(--fg); }
/* coluna estreita, centrada */
.sp-chapcards { max-width: 760px; margin: 0 auto; display: grid; gap: 1.1rem; }
.sp-chapcard {
display: grid; grid-template-columns: 140px 1fr auto; gap: 1.3rem; align-items: center;
text-decoration: none; color: inherit;
background-color: #FBF8F1;
/* textura de papel (fractalNoise) — nível "mais presente" escolhido pelo João */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='cx'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23cx)' opacity='0.11'/%3E%3C/svg%3E");
background-size: 160px 160px;
border: 1px solid var(--line, rgba(43, 33, 25, 0.16)); border-radius: 6px;
padding: 1.05rem 1.5rem; box-shadow: 0 4px 16px rgba(20, 18, 15, 0.06);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sp-chapcard:hover { border-color: var(--accent, #A98A55); box-shadow: 0 10px 26px rgba(20, 18, 15, 0.12); }
.sp-chapcard:focus-visible { outline: 2px solid var(--accent, #A98A55); outline-offset: 3px; }
.sp-chapcard-media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: rgba(43, 33, 25, 0.06); }
.sp-chapcard-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 1s ease; }
.sp-chapcard:hover .sp-chapcard-media img { transform: scale(1.05); }
.sp-chapcard-body { min-width: 0; }
.sp-chapcard-place { display: block; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #A98A55); margin-bottom: 0.3rem; }
.sp-chapcard-name { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.1; color: var(--fg); }
.sp-chapcard-meta { display: block; font-family: var(--sans); font-size: 0.7rem; color: var(--dim); margin-top: 0.3rem; letter-spacing: 0.01em; }
.sp-chapcard-desc { font-family: var(--sans); font-size: 0.82rem; color: var(--dim); line-height: 1.5; margin: 0.45rem 0 0; }
/* CTA "Ver o capítulo" — à DIREITA, visível (seta num círculo dourado) */
.sp-chapcard-cta { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; flex-shrink: 0; padding-left: 0.5rem; }
.sp-chapcard-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent, #A98A55);
display: flex; align-items: center; justify-content: center; color: var(--accent, #A98A55); font-size: 1.1rem;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.sp-chapcard:hover .sp-chapcard-arrow { background: var(--accent, #A98A55); color: #FBF8F1; transform: translateX(2px); }
.sp-chapcard-ctalabel { font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #A98A55); text-align: center; line-height: 1.3; max-width: 8ch; }
@media (max-width: 620px) {
.sp-chapcard { grid-template-columns: 96px 1fr; gap: 1rem; }
.sp-chapcard-cta { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 0.6rem;
border-top: 1px solid var(--line, rgba(43, 33, 25, 0.16)); padding-top: 0.7rem; padding-left: 0; }
.sp-chapcard-ctalabel { max-width: none; }
}
.sp-beyond-foot { text-align: center; margin-top: clamp(1.4rem, 3vw, 2rem); }
.sp-seeall { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--sans); font-size: 0.62rem;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--accent, #A98A55);
padding-bottom: 0.4rem; text-decoration: none; transition: color 0.3s ease; }
.sp-seeall:hover { color: var(--accent, #A98A55); }
/* /church/chapters/ — a mesma coluna, um pouco mais larga na página dedicada */
.sp-chapters-page .sp-chapcards { max-width: 680px; }
@media (hover: none) { .sp-seeall { min-height: 44px; } }
/* ============================================================
DETALHAMENTO DE IMPRESSÃO FINA (fine editorial detailing)
Acabamento tipográfico de livro de arte — aditivo, só refino.
============================================================ */
/* corpos de leitura (tamanho de texto) → justificado + hifenização + oldstyle.
O manifesto e a memória são display (grandes) → NÃO justifica (evita "rios"). */
.sp-intention-body, .sp-cmemory-body, .sp-hist-text, .sp-essay-text,
.sp-refl-body, .sp-about-bio-body, .sp-read {
text-align: justify;
text-align-last: left;
hyphens: auto;
-webkit-hyphens: auto;
font-variant-numeric: oldstyle-nums proportional-nums;
}
/* nos textos grandes (display) só os numerais oldstyle, sem justificar */
.sp-manifesto-body, .sp-memory-body, .sp-latest-body {
font-variant-numeric: oldstyle-nums proportional-nums;
}
/* primeira linha em versalete: só nos textos de abertura (home/manifesto).
Nos capítulos de igreja o corpo fica uniforme — a 1ª linha não difere da 2ª. */
.sp-manifesto-body p:first-child::first-line,
.sp-intention-body p:first-child::first-line {
font-variant: small-caps;
letter-spacing: 0.02em;
}
/* capitular um pouco maior e mais presente */
.sp-manifesto-body p:first-child::first-letter,
.sp-intention-body p:first-child::first-letter { font-size: 3.9em; line-height: 0.62; }
.sp-cmemory-body p:first-of-type::first-letter { font-size: 2.4em; line-height: 0.72; }
/* sobrancelha do capítulo: filete dourado antes do rótulo */
.sp-opener .sp-kicker { display: inline-flex; align-items: center; gap: 0.8rem; }
.sp-opener .sp-kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); flex: none; opacity: 0.85; }
/* colophon — a marca do impressor fechando o livro */
.sp-colophon { text-align: center; margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.sp-colophon-mark { width: 15px; height: 20px; color: var(--accent); opacity: 0.8; display: inline-block; }
.sp-colophon-line { margin-top: 0.85rem; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.26em;
text-transform: uppercase; color: var(--faint); font-variant-numeric: oldstyle-nums; }
/* ============================================================
II · THE INTENTION — the altarpiece (confession · vitral · litany · coda)
A framed plate: the confession (prose) on the left; the vitral at the centre,
like an altar, with "The idea is simple." inscribed beneath it; the litany on
the right (negations · the pivot · the "To the …" ladder · the resolve); and
a coda closing the plate. The vitral is a rose window drawn in gold, or an
uploaded photograph, with a real, quiet sun living behind it.
============================================================ */
.sp-intention--altar { padding-block: clamp(3rem, 7vw, 6rem); }
.sp-intent { position: relative; z-index: 1; width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
/* the catalogue plate — a double gold rule framing the whole altarpiece */
.sp-intent-plate { border: 1px solid var(--brass);
padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1.4rem, 4vw, 3.6rem);
background: linear-gradient(180deg, rgba(255,252,245,0.4), rgba(255,252,245,0)); }
.sp-intent-plate::before { content: ""; position: absolute; inset: 9px;
border: 1px solid rgba(154,120,66,0.28); pointer-events: none; }
.sp-intent-plate > * { position: relative; z-index: 1; }
.sp-intent-head { text-align: center; margin-bottom: clamp(2.2rem, 4.6vw, 3.6rem); }
.sp-intent-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem; }
.sp-intent-eyebrow::before, .sp-intent-eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--brass); opacity: 0.6; }
.sp-intent-eyebrow .sp-kicker { color: var(--dim); }
.sp-intent-title { font-family: var(--serif); font-style: italic; font-weight: 400; line-height: 1.02;
letter-spacing: -0.012em; font-size: clamp(2rem, 5vw, 3.9rem); color: var(--fg); text-wrap: balance;
margin: clamp(0.7rem, 1.6vw, 1.1rem) auto 0; max-width: 22ch; }
/* the three panels */
.sp-intent-grid { display: grid; align-items: center; gap: 0; }
.sp-intent-grid--tri { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.sp-intent-grid--duo { grid-template-columns: minmax(0, 1fr) auto; }
.sp-intent-grid > * { padding-inline: clamp(1.1rem, 2.6vw, 2.8rem); }
.sp-intent-grid > *:first-child { padding-inline-start: 0; }
.sp-intent-grid > *:last-child { padding-inline-end: 0; }
.sp-intent-grid > * + * { border-inline-start: 1px solid var(--line); }
/* left — the confession */
.sp-intent-prose { font-family: var(--serif); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.64; color: var(--fg);
text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.sp-intent-prose p { margin: 0; }
.sp-intent-prose p + p { margin-top: 0.9em; }
.sp-intent-prose p:first-child::first-letter { font-size: 3.3em; line-height: 0.64; float: left;
margin: 0.05em 0.12em 0 0; font-weight: 500; color: var(--accent); font-family: var(--serif); }
/* right — the litany */
.sp-intent-litany { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.sp-lit-neg { display: flex; flex-direction: column; gap: 0.55em; margin-bottom: clamp(1.3rem, 2.8vw, 2.1rem);
font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); line-height: 1.4; }
.sp-lit-pivot { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1;
color: var(--brass); margin: 0 0 clamp(1.1rem, 2.6vw, 1.9rem); }
.sp-lit-affirm { display: flex; flex-direction: column; gap: clamp(0.15rem, 0.7vw, 0.42rem); margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem); }
.sp-lit-affirm .sp-lit-line { font-family: var(--serif); font-size: clamp(1.2rem, 2.5vw, 1.95rem); line-height: 1.12; color: var(--fg); }
.sp-lit-resolve { font-family: var(--serif); font-style: italic; font-size: clamp(0.92rem, 1.5vw, 1.12rem); line-height: 1.46; color: var(--dim); margin: 0 auto; max-width: 26ch; }
.sp-lit-key { font-style: italic; color: var(--brass); }
/* centre — the vitral, with "the idea" inscribed beneath it, + the sun behind */
.sp-intent-altar { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sp-intent-idea { margin-top: clamp(1.1rem, 2.4vw, 1.9rem); max-width: 30ch; }
.sp-intent-idea .i1 { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.7vw, 2.05rem); line-height: 1.04; color: var(--fg); margin: 0 0 0.42em; }
.sp-intent-idea .i2 { font-size: clamp(0.86rem, 1.35vw, 1rem); line-height: 1.5; color: var(--dim); margin: 0; }
.sp-vitral { position: relative; isolation: isolate; width: min(300px, 62vw); aspect-ratio: 1; color: var(--gold); }
.sp-rose-svg { position: relative; z-index: 2; width: 100%; height: auto; display: block; }
.sp-vitral-photo { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border-radius: 50%;
overflow: hidden; box-shadow: inset 0 0 0 1px var(--brass), inset 0 0 0 7px rgba(245,241,234,0.55); }
.sp-vitral-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-sun-glow, .sp-sun-rays, .sp-sun-core { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.sp-sun-glow { inset: -12%;
background: radial-gradient(circle at 50% 49%, rgba(226,196,140,0.55) 0%, rgba(201,162,103,0.20) 34%, rgba(201,162,103,0) 66%);
animation: sp-breathe 8s ease-in-out infinite; }
.sp-sun-rays { inset: 0; opacity: 0.34;
background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(168,138,85,0.30) 0deg 0.7deg, rgba(168,138,85,0) 0.7deg 15deg);
-webkit-mask: radial-gradient(circle at 50% 50%, transparent 13%, #000 27%, #000 58%, transparent 78%);
mask: radial-gradient(circle at 50% 50%, transparent 13%, #000 27%, #000 58%, transparent 78%);
animation: sp-spin 95s linear infinite; }
.sp-sun-core { width: 19%; height: 19%; left: 40.5%; top: 40.5%;
background: radial-gradient(circle, rgba(252,244,224,0.85) 0%, rgba(232,205,150,0.4) 46%, rgba(232,205,150,0) 72%);
animation: sp-flare 6s ease-in-out infinite; }
/* a photograph reads as glass: the sun sits behind it as a soft backlight */
.sp-vitral--photo .sp-sun-glow { inset: -18%; }
.sp-vitral--photo .sp-sun-rays,
.sp-vitral--photo .sp-sun-core { display: none; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-breathe { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes sp-flare { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
/* the coda — closing the plate */
.sp-intent-coda { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); padding-top: clamp(1.6rem, 3vw, 2.5rem);
border-top: 1px solid var(--line); text-align: center; }
.sp-intent-coda p { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem);
line-height: 1.4; color: var(--fg); max-width: 48ch; margin: 0 auto; }
.sp-intent-coda p + p { margin-top: 0.5em; }
.sp-intent-endmark { margin-top: clamp(0.9rem, 2vw, 1.5rem); color: var(--accent); opacity: 0.7; font-size: 1.1rem; }
@media (max-width: 900px) {
.sp-intent-grid--tri, .sp-intent-grid--duo { grid-template-columns: 1fr; }
.sp-intent-grid > * { padding-inline: 0; }
.sp-intent-grid > * + * { border-inline-start: 0; border-block-start: 1px solid var(--line);
padding-block-start: clamp(2rem, 6vw, 3rem); margin-block-start: clamp(2rem, 6vw, 3rem); }
.sp-vitral { width: min(240px, 66vw); }
/* the confession reads better ragged on a narrow column */
.sp-intent-prose { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
}
@media (prefers-reduced-motion: reduce) {
.sp-sun-glow, .sp-sun-rays, .sp-sun-core { animation: none; }
}
/* ============================================================
III · THE LATEST VISIT — eleven switchable styles (.sp-lv--)
classic · cinema · cinemotion · reveal · light · dust · plate · dossier ·
portrait · threshold · aperture. All reuse the .sp-figure pipeline; motion
is CSS-only and disabled under prefers-reduced-motion.
============================================================ */
/* keep the block from floating in a tall void; tighten the framed styles so the
photograph leads and the empty space around it shrinks */
.sp-latest.sp-lv { padding-block: clamp(3rem, 7vw, 6.5rem); }
.sp-lv--plate .sp-wrap, .sp-lv--dossier .sp-wrap, .sp-lv--portrait .sp-wrap,
.sp-lv--threshold .sp-wrap, .sp-lv--aperture .sp-wrap { max-width: 1080px; }
.sp-lv-stage { display: block; text-decoration: none; color: inherit; }
.sp-lv-name { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -0.012em; color: var(--fg); margin: 0.1rem 0; font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
.sp-lv-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.sp-lv-excerpt { font-family: var(--serif); font-size: clamp(0.98rem, 1.4vw, 1.14rem); line-height: 1.55; color: var(--dim); max-width: 46ch; margin: 0; }
.sp-lv-enter { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.sp-lv-cont { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.sp-lv-cont .sp-kicker, .sp-lv-plaque .sp-kicker, .sp-lv-body .sp-kicker { color: var(--accent); }
/* new styles hide the figure's built-in registration marks (they bring their own frames) */
.sp-lv-fig.sp-figure::before, .sp-lv-fig.sp-figure::after,
.sp-lv-fig .sp-figure-media::before, .sp-lv-fig .sp-figure-media::after { display: none; }
/* ---- full-bleed family (cinema · cinemotion · reveal · light · dust) ---- */
.sp-lv-fullbleed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; }
.sp-lv-fullbleed .sp-lv-media { position: absolute; inset: 0; }
.sp-lv-fullbleed .sp-lv-media .sp-figure { position: absolute; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; background: #0f0c08; }
.sp-lv-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, rgba(10,8,6,0.86), rgba(10,8,6,0.32) 46%, rgba(10,8,6,0) 74%), linear-gradient(0deg, rgba(10,8,6,0.72), transparent 52%); }
.sp-lv-fullbleed .sp-lv-cont { position: absolute; left: 0; bottom: 0; z-index: 4; padding: clamp(1.4rem, 3.5vw, 3rem); max-width: 74%; }
.sp-lv-fullbleed .sp-lv-name { font-size: clamp(1.9rem, 5vw, 3.7rem); line-height: 0.98; color: var(--paper); }
.sp-lv-ghost { position: absolute; top: -0.16em; right: 0.04em; z-index: 3; pointer-events: none;
font-family: var(--serif); font-style: italic; line-height: 0.7; color: #e9c98a; opacity: 0.09; font-size: clamp(6rem, 20vw, 15rem); }
/* reveal — the photograph develops from grain to focus (once, on scroll-in).
The dark "undeveloped" start only applies with JS, so no-JS shows the photo. */
html.js .sp-lv--reveal .sp-lv-media { filter: brightness(0.25) contrast(1.45) blur(9px) saturate(0.4); }
.sp-lv--reveal .sp-lv-stage.is-visible .sp-lv-media { animation: sp-lv-develop 2.6s ease-out forwards; }
.sp-lv-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: overlay; opacity: 0.14;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='lvn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23lvn)'/%3E%3C/svg%3E"); }
html.js .sp-lv--reveal .sp-lv-grain { opacity: 0.85; }
.sp-lv--reveal .sp-lv-stage.is-visible .sp-lv-grain { animation: sp-lv-grainfade 2.6s ease-out forwards; }
/* light — a warm shaft sweeps across, forever; the image breathes */
.sp-lv--light .sp-figure-media img, .sp-lv--dust .sp-figure-media img { animation: sp-lv-kb 18s ease-in-out infinite alternate; transform-origin: 55% 45%; }
.sp-lv-sweep { position: absolute; inset: -40% -70%; z-index: 3; pointer-events: none; mix-blend-mode: screen;
background: linear-gradient(102deg, transparent 42%, rgba(236,205,140,0.30) 50%, transparent 58%); animation: sp-lv-sweep 9s ease-in-out infinite alternate; }
/* dust — motes drift up the shaft; the shaft pulses */
.sp-lv-shaft { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
background: radial-gradient(60% 44% at 50% 26%, rgba(233,201,138,0.20), transparent 60%); animation: sp-lv-shaft 7s ease-in-out infinite; }
.sp-lv-dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sp-lv-dust i { position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
background: radial-gradient(circle, rgba(244,228,186,0.95), rgba(244,228,186,0) 70%); animation-name: sp-lv-mote; animation-timing-function: linear; animation-iteration-count: infinite; }
/* cinemotion — perpetual push-in + a one-time rack focus on scroll-in */
.sp-lv--cinemotion .sp-figure-media img { animation: sp-lv-kb 16s ease-in-out infinite alternate; transform-origin: 62% 42%; }
html.js .sp-lv--cinemotion .sp-lv-media { filter: blur(7px) brightness(0.7); }
.sp-lv--cinemotion .sp-lv-stage.is-visible .sp-lv-media { animation: sp-lv-focus 1.8s ease-out forwards; }
/* ---- arch family (threshold static · aperture opens) ---- */
.sp-lv-archwrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; position: relative; }
.sp-lv-archbox { position: relative; justify-self: center; }
.sp-lv-arch { position: relative; width: min(320px, 44vw); aspect-ratio: 3 / 4; border-radius: 160px 160px 10px 10px; overflow: hidden; }
.sp-lv-arch .sp-lv-media { position: absolute; inset: 0; }
.sp-lv-arch .sp-lv-media .sp-figure { position: absolute; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; }
.sp-lv-archframe { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid var(--brass); border-radius: 160px 160px 10px 10px; }
.sp-lv-seal { position: absolute; top: -6px; right: -6px; z-index: 4; width: 46px; height: 46px; border: 1px solid var(--brass); border-radius: 50%; display: grid; place-items: center; background: var(--charcoal); font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 0.9rem; }
.sp-lv-archwrap .sp-lv-cont { align-items: flex-start; }
html.js .sp-lv--aperture .sp-lv-media { clip-path: circle(10% at 50% 42%); }
.sp-lv--aperture .sp-lv-stage.is-visible .sp-lv-media { animation: sp-lv-iris 2.4s ease-out forwards; }
.sp-lv-bloom { position: absolute; inset: -30%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0;
background: radial-gradient(circle at 50% 42%, rgba(233,201,138,0.42), transparent 60%); }
.sp-lv--aperture .sp-lv-stage.is-visible .sp-lv-bloom { animation: sp-lv-bloom 2.4s ease-out forwards; }
/* ---- plate — framed photo + museum plaque ---- */
.sp-lv-plate { text-align: center; }
.sp-lv-frame { border: 1px solid var(--brass); padding: 10px; max-width: min(680px, 94%); margin: 0 auto; position: relative; }
.sp-lv-plaque { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); text-align: center; }
.sp-lv-plate .sp-lv-meta { justify-content: center; }
.sp-lv-plate .sp-lv-excerpt { text-align: center; max-width: 48ch; }
/* ---- dossier — photo + field-notes table ---- */
.sp-lv-dossier { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.sp-lv-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.sp-lv-table { display: flex; flex-direction: column; width: 100%; border-top: 1px solid rgba(245,241,234,0.16); margin: 0.4rem 0 0.2rem; }
.sp-lv-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(245,241,234,0.16); }
.sp-lv-row dt { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.sp-lv-row dd { margin: 0; font-family: var(--serif); font-size: 0.98rem; color: var(--fg); text-align: right; }
/* ---- portrait — vertical photo with a warm glow ---- */
.sp-lv-portrait { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.sp-lv-glowwrap { position: relative; justify-self: center; }
.sp-lv-glowwrap::before { content: ""; position: absolute; inset: -22%; pointer-events: none; background: radial-gradient(circle, rgba(233,201,138,0.20), transparent 66%); }
.sp-lv-portrait .sp-lv-media { position: relative; width: min(300px, 48vw); border: 1px solid var(--brass); box-shadow: 0 30px 60px -30px #000; }
/* ================= PREMIUM styles ================= */
.sp-lv--editorial .sp-wrap, .sp-lv--specimen .sp-wrap, .sp-lv--essay .sp-wrap { max-width: 1140px; }
/* editorial — the dossier, bigger photo + richer ficha */
.sp-lv-editorial { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
/* essay — a lead photograph + a column of supporting frames */
.sp-lv-essay { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.sp-lv-col2 { display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.4rem); }
.sp-lv-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.sp-lv-cap .sp-kicker { color: var(--accent); }
.sp-lv-cap .sp-lv-name { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
/* cover — full-bleed photograph + a magazine masthead */
.sp-lv-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; }
.sp-lv-cover .sp-lv-media { position: absolute; inset: 0; }
.sp-lv-cover .sp-lv-media .sp-figure { position: absolute; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; background: #0f0c08; }
.sp-lv--cover .sp-figure-media img { animation: sp-lv-kb 20s ease-in-out infinite alternate; transform-origin: 52% 42%; }
.sp-lv-scrim--cover { background: linear-gradient(0deg, rgba(10,8,6,0.82), rgba(10,8,6,0.12) 46%, rgba(10,8,6,0.4)); }
.sp-lv-covertop { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-between;
padding: clamp(1rem, 3vw, 2rem); font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #d9c39a; }
.sp-lv-covername { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: clamp(1.2rem, 3.4vw, 2.6rem); text-align: center; }
.sp-lv-covername .sp-kicker { color: var(--accent); display: inline-flex; justify-content: center; }
.sp-lv-covername .sp-lv-name { font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 0.96; color: var(--paper); }
.sp-lv-covername .sp-lv-meta { justify-content: center; margin-top: 0.7rem; }
/* specimen — the photograph mounted, with a museum catalogue label */
.sp-lv-specimen { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
.sp-lv-mount { background: #efe7d5; padding: clamp(10px, 1.6vw, 16px) clamp(10px, 1.6vw, 16px) 0; box-shadow: 0 30px 60px -34px #000; }
.sp-lv-mount .sp-lv-media { position: relative; }
.sp-lv-mountcap { padding: 12px 4px; text-align: center; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7a6c52; }
.sp-lv-acc { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold); margin-bottom: 0.5rem; }
.sp-lv-speclabel { border-bottom: 1px solid rgba(245, 241, 234, 0.18); }
/* contact — a hero frame over the visit's contact sheet */
.sp-lv-contact { display: block; }
.sp-lv-hero { position: relative; margin-bottom: clamp(0.6rem, 1.4vw, 0.9rem); }
.sp-lv-heronum { position: absolute; top: 12px; left: 15px; z-index: 3; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: rgba(245, 241, 234, 0.85); }
.sp-lv-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 1vw, 10px); margin-bottom: clamp(1rem, 2.4vw, 1.6rem); }
.sp-lv-cell { aspect-ratio: 1 / 1; opacity: 0.58; }
.sp-lv-cell.is-on { opacity: 1; outline: 1px solid var(--brass); outline-offset: -1px; }
.sp-lv-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
@media (max-width: 760px) {
.sp-lv-editorial, .sp-lv-essay, .sp-lv-specimen { grid-template-columns: 1fr; }
.sp-lv-strip { grid-template-columns: repeat(3, 1fr); }
.sp-lv-cover { aspect-ratio: 4 / 5; }
}
@keyframes sp-lv-develop { from { filter: brightness(0.25) contrast(1.45) blur(9px) saturate(0.4); } to { filter: none; } }
@keyframes sp-lv-grainfade { from { opacity: 0.85; } to { opacity: 0.14; } }
@keyframes sp-lv-focus { from { filter: blur(7px) brightness(0.7); } to { filter: none; } }
@keyframes sp-lv-kb { from { transform: scale(1.08); } to { transform: scale(1.18) translate(-2%, -1.5%); } }
@keyframes sp-lv-sweep { from { transform: translateX(-42%); } to { transform: translateX(42%); } }
@keyframes sp-lv-shaft { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes sp-lv-mote { 0% { opacity: 0; transform: translateY(0) translateX(0); } 12% { opacity: 0.9; } 88% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-260px) translateX(16px); } }
@keyframes sp-lv-iris { from { clip-path: circle(10% at 50% 42%); } to { clip-path: circle(78% at 50% 42%); } }
@keyframes sp-lv-bloom { 0% { opacity: 0.9; transform: scale(0.5); } 60% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.18; } }
@media (max-width: 760px) {
.sp-lv-fullbleed { aspect-ratio: 4 / 5; }
.sp-lv-fullbleed .sp-lv-cont { max-width: 100%; }
.sp-lv-archwrap, .sp-lv-dossier, .sp-lv-portrait { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2.2rem); }
.sp-lv-archwrap .sp-lv-cont, .sp-lv-body { align-items: center; text-align: center; }
.sp-lv-body .sp-lv-meta, .sp-lv-body .sp-lv-table { align-self: stretch; }
.sp-lv-portrait .sp-lv-media { width: min(220px, 62vw); }
}
@media (prefers-reduced-motion: reduce) {
.sp-lv * { animation: none !important; }
html.js .sp-lv--reveal .sp-lv-media, html.js .sp-lv--cinemotion .sp-lv-media { filter: none; }
html.js .sp-lv--reveal .sp-lv-grain { opacity: 0.14; }
html.js .sp-lv--aperture .sp-lv-media { clip-path: circle(78% at 50% 42%); }
.sp-lv--aperture .sp-lv-bloom { opacity: 0.18; }
.sp-lv .sp-figure-media img { transform: none; }
}
/* ============================================================
BEYOND DUBLIN — a switchable stage (11 styles), CSS-only.
The movement rides the page's .reveal → .is-visible system and
is fully disabled under prefers-reduced-motion (block at end).
Each style adds .sp-bd--; the stage carries .sp-bd-.
============================================================ */
.sp-bd .sp-bd-stage { max-width: 1040px; margin: 0 auto; }
.sp-bd-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bd-nocover { display: block; width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(135,106,68,0.20), rgba(135,106,68,0.05)); }
.sp-bd-passport, .sp-bd-illum, .sp-bd-board { display: flex; justify-content: center; }
@keyframes bd-draw { to { stroke-dashoffset: 0; } }
@keyframes bd-fadein { to { opacity: 1; } }
@keyframes bd-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes bd-twinkle { 0%,100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
/* ---- 07 · Passaporte — stamps that thump onto the page ---- */
.sp-pp { position: relative; width: min(760px, 100%); aspect-ratio: 16 / 9; color: var(--brown);
background: var(--parchment); background-image: var(--texture-parchment); border-radius: 4px;
box-shadow: 0 24px 50px rgba(0,0,0,0.28), inset 0 0 60px rgba(135,106,68,0.18); overflow: hidden; }
.sp-pp::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(135,106,68,0.35); border-radius: 2px; pointer-events: none; }
.sp-pp-head { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-family: var(--sans);
font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); }
.sp-pp-fold { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(135,106,68,0.22); }
.sp-pp-stamp { position: absolute; width: clamp(94px, 14vw, 136px); aspect-ratio: 1; border-radius: 50%;
border: 2px solid var(--sc); color: var(--sc); display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center; text-decoration: none; mix-blend-mode: multiply;
transform: translate(-50%, -50%) scale(1) rotate(var(--r)); }
html.js .sp-page .sp-bd-passport .sp-pp-stamp,
html.js .sp-page .sp-bd-pcards .sp-pp-stamp { opacity: 0; }
.sp-bd-passport.is-visible .sp-pp-stamp,
.sp-bd-pcards.is-visible .sp-pp-stamp { animation: bd-thump 0.55s var(--ease) both; }
@keyframes bd-thump { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(var(--r)); }
55% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.9) rotate(var(--r)); }
100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1) rotate(var(--r)); } }
.sp-pp-ring { position: absolute; inset: 9px; border: 1px dashed var(--sc); border-radius: 50%; opacity: 0.6; }
.sp-pp-pl { font-family: var(--sans); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; max-width: 11ch; line-height: 1.25; }
.sp-pp-cr { font-size: 0.72rem; margin: 0.1rem 0; }
.sp-pp-nm { font-family: var(--serif); font-weight: 500; font-size: 0.8rem; line-height: 1; max-width: 12ch; }
.sp-pp-yr { font-family: var(--serif); font-size: 1rem; margin-top: 0.12rem; }
/* ---- 07·b · Passaporte + Cartões (v2) — the passport large, above a grid that grows ----
The passport is the hero (one stamp per chapter, so it fills as new countries
are visited); the chapters read below as "tom sobre tom" cards — no fill, a
hairline rule and a brass tick — in a grid that only ever gains rows. A
cinematic layer (slow cover-zoom + a hover light-sweep + a glimmer across the
passport) is added below, only where motion is welcome. */
.sp-bd .sp-bd-pcards { max-width: 1040px; }
.sp-pb-passport { display: flex; justify-content: center; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.sp-pb-passport .sp-pp { width: min(900px, 100%); aspect-ratio: 3 / 2; }
/* the stamps ride this larger page */
.sp-bd-pcards .sp-pp-stamp { width: clamp(84px, 9vw, 122px); }
.sp-bd-pcards .sp-pp-ring { inset: 8px; }
.sp-bd-pcards .sp-pp-pl { font-size: 0.46rem; letter-spacing: 0.11em; max-width: 10ch; }
.sp-bd-pcards .sp-pp-cr { font-size: 0.64rem; }
.sp-bd-pcards .sp-pp-nm { font-size: 0.7rem; }
.sp-bd-pcards .sp-pp-yr { font-size: 0.86rem; }
.sp-pp-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }
/* the chapters — a grid of UNIFORM cards, up to three columns by screen width */
.sp-pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 284px), 1fr));
gap: clamp(1.8rem, 2.8vw, 2.6rem) clamp(1.3rem, 2.4vw, 2rem); align-items: stretch; }
/* each card is a vertical, equal-height tile: photo, words, then the same button */
.sp-pb-card { position: relative; display: flex; flex-direction: column; height: 100%;
text-decoration: none; color: inherit; }
.sp-pb-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: rgba(43, 33, 25, 0.06); }
.sp-pb-media picture { display: block; width: 100%; height: 100%; }
.sp-pb-media img { transition: transform 1.1s var(--ease); }
.sp-pb-card:hover .sp-pb-media img { transform: scale(1.05); }
.sp-pb-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
padding-top: clamp(0.95rem, 1.4vw, 1.2rem); }
.sp-pb-txt { display: block; margin-bottom: clamp(1rem, 1.7vw, 1.45rem); }
.sp-pb-pl { display: inline-flex; align-items: center; gap: 0.42rem; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.42rem; }
.sp-pb-flag { display: inline-flex; line-height: 0; flex-shrink: 0; }
.sp-pb-flag .sp-flag { width: 19px; height: 13px; border-radius: 2px;
box-shadow: 0 1px 2px rgba(20, 18, 15, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sp-pb-nm { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.28rem, 1.7vw, 1.55rem); line-height: 1.1; color: var(--fg); }
.sp-pb-yr { display: block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--dim); margin-top: 0.42rem; }
.sp-pb-desc { display: block; font-family: var(--sans); font-size: 0.8rem; line-height: 1.55; color: var(--dim); margin-top: 0.55rem; }
/* the button — standardized: identical pill, full card width, pinned to the bottom */
.sp-pb-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
padding: 0.72rem 1.05rem; border: 1px solid var(--accent); border-radius: 999px;
font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
transition: background 0.3s ease, color 0.3s ease; }
.sp-pb-card:hover .sp-pb-cta, .sp-pb-card:focus-visible .sp-pb-cta { background: var(--accent); color: var(--brown); }
.sp-pb-arw { font-size: 0.95rem; line-height: 1; transition: transform 0.3s ease; }
.sp-pb-card:hover .sp-pb-arw { transform: translateX(3px); }
.sp-pb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.sp-pb-sweep { display: none; }
/* ---- cinema — a filmmaker's touch, only where motion is welcome ---- */
@media (prefers-reduced-motion: no-preference) {
html.js .sp-page .sp-bd-pcards.is-visible .sp-pb-media img { animation: sp-pb-kenburns 17s ease-in-out infinite alternate; }
html.js .sp-page .sp-bd-pcards.is-visible .sp-pb-media::after { content: ""; position: absolute; inset: 0;
background-image: var(--texture-charcoal); background-size: 180px; opacity: 0.06; mix-blend-mode: overlay;
animation: sp-pb-grain 1.7s steps(3) infinite; pointer-events: none; z-index: 3; }
.sp-pb-sweep { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none;
background: linear-gradient(115deg, transparent 40%, rgba(255, 247, 230, 0.20) 50%, transparent 60%);
background-size: 250% 100%; background-position: 150% 0; opacity: 0; }
.sp-pb-card:hover .sp-pb-sweep { opacity: 1; animation: sp-pb-sweep 1s var(--ease); }
html.js .sp-page .sp-bd-pcards.is-visible .sp-pb-passport .sp-pp::after { content: ""; position: absolute; inset: 0;
pointer-events: none; mix-blend-mode: screen;
background: linear-gradient(115deg, transparent 40%, rgba(196, 162, 103, 0.14) 48%, rgba(245, 236, 219, 0.26) 50%, rgba(196, 162, 103, 0.14) 52%, transparent 60%);
background-size: 280% 100%; animation: sp-pb-sheen 7.5s linear infinite; }
}
@keyframes sp-pb-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes sp-pb-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
@keyframes sp-pb-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes sp-pb-sheen { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
/* ---- 08 · Iluminura Viva — one living manuscript page ---- */
.sp-ilum { position: relative; width: min(640px, 100%); padding-left: clamp(48px, 9vw, 80px); }
.sp-ilum-vine { position: absolute; left: 0; top: 0; height: 100%; width: clamp(40px, 8vw, 64px); overflow: visible; }
.sp-ilum-vine > path:first-of-type { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease) 0.2s; }
html.js .sp-page .sp-bd-illum:not(.is-visible) .sp-ilum-vine > path:first-of-type { stroke-dashoffset: 1; }
.sp-ilum-leaf { fill: var(--bronze); opacity: 0; transition: opacity 0.6s ease; }
.sp-bd-illum.is-visible .sp-ilum-leaf { opacity: 0.8; }
.sp-ilum-title { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1rem; }
.sp-ilum-row { display: flex; gap: 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid rgba(135,106,68,0.22);
text-decoration: none; color: var(--brown); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.sp-ilum-row:last-child { border-bottom: 0; }
html.js .sp-page .sp-bd-illum:not(.is-visible) .sp-ilum-row { opacity: 0; transform: translateX(-14px); }
.sp-ilum-roundel { flex: 0 0 auto; width: clamp(54px, 9vw, 68px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
border: 3px solid var(--gold); box-shadow: 0 4px 12px rgba(43,33,25,0.28); transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); }
html.js .sp-page .sp-bd-illum:not(.is-visible) .sp-ilum-roundel { transform: scale(0.4); opacity: 0; }
.sp-ilum-txt { flex: 1 1 auto; min-width: 0; }
.sp-ilum-pl { display: block; font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: #a6431f; }
.sp-ilum-nm { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.05; color: var(--brown); }
.sp-ilum-yr { display: block; font-family: var(--serif); font-size: 0.9rem; color: var(--bronze); }
.sp-ilum-arrow { flex: 0 0 auto; color: var(--gold); font-size: 1.1rem; opacity: 0.6; transition: transform 0.3s, opacity 0.3s; }
.sp-ilum-row:hover .sp-ilum-arrow { transform: translateX(4px); opacity: 1; }
/* ---- 06 · Tríptico — a row of altarpieces that open ---- */
.sp-tript-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 3vw, 2rem); max-width: 1000px; margin: 0 auto; }
.sp-tript { position: relative; aspect-ratio: 3 / 2; perspective: 1400px; display: block; text-decoration: none; }
.sp-tript-center { position: absolute; inset: 0; border-radius: 3px; overflow: hidden;
box-shadow: 0 0 0 4px #1c140d, 0 0 0 7px var(--bronze), 0 0 0 9px #1c140d, 0 18px 36px rgba(0,0,0,0.4); }
.sp-tript-center .sp-bd-cover { filter: saturate(0.95); }
.sp-tript-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 0.9rem 0.8rem;
background: linear-gradient(transparent, rgba(12,8,5,0.9)); color: var(--paper); opacity: 0; transition: opacity 0.5s 0.5s; }
.sp-bd-triptych.is-visible .sp-tript-cap { opacity: 1; }
.sp-tript-pl { display: block; font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sp-tript-nm { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.05; margin-top: 0.2rem; }
.sp-tript-yr { display: block; font-family: var(--sans); font-size: 0.68rem; color: #c3b8a2; margin-top: 0.15rem; }
.sp-tript-wing { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; backface-visibility: hidden;
background: linear-gradient(145deg, #3a2c1c, #241a10 60%, #1a120a); box-shadow: inset 0 0 30px rgba(0,0,0,0.6); }
.sp-tript-wing::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(196,162,103,0.28); }
.sp-tript-wing::after { content: ""; position: absolute; top: 34%; left: 50%; width: 26px; height: 40px; transform: translateX(-50%);
background: linear-gradient(var(--gold),var(--gold)) center / 5px 100% no-repeat, linear-gradient(var(--gold),var(--gold)) center 30% / 60% 5px no-repeat; opacity: 0.5; }
.sp-tript-wing--l { left: 0; transform-origin: left center; }
.sp-tript-wing--r { right: 0; transform-origin: right center; }
html.js .sp-page .sp-bd-triptych .sp-tript-wing { transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 0.12s); }
.sp-bd-triptych.is-visible .sp-tript-wing--l { transform: rotateY(-116deg); }
.sp-bd-triptych.is-visible .sp-tript-wing--r { transform: rotateY(116deg); }
/* ---- 09 · Carta Lacrada — sealed dispatches that open ---- */
.sp-lt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); max-width: 1000px; margin: 0 auto; }
.sp-lt { position: relative; aspect-ratio: 1 / 1.16; perspective: 1400px; display: block; text-decoration: none; }
.sp-lt-sheet { position: absolute; inset: 0; background: var(--ivory); background-image: var(--texture-parchment); color: var(--brown);
border-radius: 3px; box-shadow: 0 16px 34px rgba(0,0,0,0.28); padding: clamp(1.1rem, 3vw, 1.6rem); display: flex; flex-direction: column; }
.sp-lt-pl { font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.sp-lt-nm { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.02; color: var(--brown); margin: 0.3rem 0 0.1rem; }
.sp-lt-versal { float: left; font-family: var(--serif); font-weight: 600; font-size: 2.4em; line-height: 0.7; padding: 0.04em 0.1em 0 0; color: var(--gold); }
.sp-lt-yr { font-family: var(--serif); font-size: 0.95rem; color: var(--bronze); margin-bottom: 0.5rem; }
.sp-lt-body { font-family: var(--serif); font-size: 0.98rem; line-height: 1.45; color: #4a4034; }
.sp-lt-sign { margin-top: auto; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--bronze); text-align: right; }
.sp-lt-flap { position: absolute; top: 0; left: 0; right: 0; height: 56%; transform-origin: top center; backface-visibility: hidden; z-index: 3;
background: linear-gradient(160deg, #e7dcc6, #d8c9ac); border-radius: 3px 3px 0 0; box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.sp-lt-flap::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(135,106,68,0.4); }
html.js .sp-page .sp-bd-letter .sp-lt-flap { transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 0.12s + 0.2s); }
.sp-bd-letter.is-visible .sp-lt-flap { transform: rotateX(-172deg); }
.sp-lt-seal { position: absolute; top: calc(56% - 28px); left: 50%; transform: translateX(-50%); width: 56px; height: 56px; z-index: 5; pointer-events: none; }
.sp-lt-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; transition: transform 1s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--i) * 0.12s); }
.sp-lt-half::before { content: ""; position: absolute; top: 0; width: 56px; height: 56px; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #a33224, #6e1d14); box-shadow: inset 0 0 8px rgba(0,0,0,0.5); }
.sp-lt-half--l { left: 0; } .sp-lt-half--l::before { left: 0; }
.sp-lt-half--r { right: 0; } .sp-lt-half--r::before { right: 0; }
.sp-lt-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e9c9a0; font-family: var(--serif); font-size: 1.3rem; z-index: 2; transition: opacity 0.4s; }
.sp-bd-letter.is-visible .sp-lt-half--l { transform: translateX(-14px) rotate(-16deg); opacity: 0; }
.sp-bd-letter.is-visible .sp-lt-half--r { transform: translateX(14px) rotate(16deg); opacity: 0; }
.sp-bd-letter.is-visible .sp-lt-mono { opacity: 0; }
/* ---- 10 · Códice Acordeão (Leporello) — concertina that unfolds sideways ---- */
.sp-lep { display: flex; align-items: stretch; gap: 0; max-width: 1000px; margin: 0 auto; overflow-x: auto;
padding: clamp(0.5rem, 2vw, 1rem) 4px 1rem; perspective: 1400px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.sp-lep-panel { flex: 0 0 auto; width: clamp(150px, 22vw, 190px); aspect-ratio: 2 / 2.9; position: relative; overflow: hidden;
background: var(--parchment); background-image: var(--texture-parchment); color: var(--brown);
box-shadow: 0 12px 26px rgba(0,0,0,0.22); text-decoration: none; scroll-snap-align: center; }
.sp-lep-panel:nth-child(odd) { background: linear-gradient(90deg, #ddd0b6, #e7dcc6); }
.sp-lep-panel::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: linear-gradient(var(--gold), var(--bronze)); }
html.js .sp-page .sp-bd-leporello .sp-lep-panel { transition: transform 1.2s var(--ease), margin 1.2s var(--ease); transition-delay: calc(var(--i) * 0.05s); }
html.js .sp-page .sp-bd-leporello:not(.is-visible) .sp-lep-panel:nth-child(odd) { transform-origin: right center; transform: rotateY(56deg); margin-right: -44px; }
html.js .sp-page .sp-bd-leporello:not(.is-visible) .sp-lep-panel:nth-child(even) { transform-origin: left center; transform: rotateY(-56deg); margin-left: -44px; }
.sp-bd-leporello.is-visible .sp-lep-panel { transform: rotateY(0); margin: 0 5px; }
.sp-lep-img { display: block; height: 58%; overflow: hidden; position: relative; }
.sp-lep-img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -16px 22px -10px rgba(43,33,25,0.4); }
.sp-lep-body { padding: 0.6rem 0.7rem; }
.sp-lep-pl { display: block; font-family: var(--sans); font-size: 0.48rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
.sp-lep-nm { display: block; font-family: var(--serif); font-weight: 500; font-size: 1rem; line-height: 1.05; color: var(--brown); margin-top: 0.12rem; }
.sp-lep-yr { display: block; font-family: var(--serif); font-size: 0.8rem; color: var(--gold); margin-top: 0.25rem; }
.sp-lep-hint { display: block; text-align: right; max-width: 1000px; margin: 0.3rem auto 0; font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
/* ---- 01 · Meridiano — golden threads from Dublin ---- */
.sp-mer { max-width: 1000px; margin: 0 auto; border-radius: 8px; overflow: hidden;
background: radial-gradient(120% 120% at 20% 10%, #241c14, #120e0a); box-shadow: 0 24px 50px rgba(0,0,0,0.4); }
.sp-mer-svg { display: block; width: 100%; aspect-ratio: 1000 / 560; }
.sp-mer-grat { stroke: rgba(196,162,103,0.10); stroke-width: 1; }
.sp-mer-arc { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(196,162,103,0.5)); }
html.js .sp-page .sp-bd-meridian .sp-mer-arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-bd-meridian.is-visible .sp-mer-arc { animation: bd-draw 2.2s var(--ease) forwards; }
.sp-mer-spark { fill: #fff6df; filter: drop-shadow(0 0 6px rgba(255,240,200,0.9)); opacity: 0; }
.sp-mer-node { fill: #14100c; stroke: var(--gold); stroke-width: 1.6; opacity: 0; }
.sp-bd-meridian.is-visible .sp-mer-node { animation: bd-fadein 0.5s ease forwards; }
.sp-mer-origin { fill: #fff6df; filter: drop-shadow(0 0 8px rgba(255,240,200,0.8)); }
.sp-mer-lbl { font-family: var(--serif); font-size: 20px; fill: var(--paper); opacity: 0; }
.sp-mer-home { opacity: 1; }
.sp-bd-meridian.is-visible .sp-mer-lbl { animation: bd-fadein 0.6s ease forwards; }
.sp-mer-sub { font-family: var(--sans); font-size: 9px; letter-spacing: 0.14em; fill: var(--brass); text-transform: uppercase; opacity: 0; }
.sp-bd-meridian.is-visible .sp-mer-sub { animation: bd-fadein 0.6s ease forwards; }
/* ---- 05 · Constelação — chapters as stars ---- */
.sp-const { position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
background: linear-gradient(180deg, #0a0d16, #0e0c12 60%, #161009); box-shadow: 0 24px 50px rgba(0,0,0,0.4); }
.sp-const-dust { position: absolute; inset: 0; opacity: 0.7; background-image:
radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 12% 75%, rgba(255,255,255,0.3), transparent); }
.sp-const-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-const-line path { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.55; filter: drop-shadow(0 0 2px rgba(196,162,103,0.5)); vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 3s var(--ease) 0.4s; }
html.js .sp-page .sp-bd-constellation:not(.is-visible) .sp-const-line path { stroke-dashoffset: 1; }
.sp-star { position: absolute; transform: translate(-50%, -50%); text-decoration: none; z-index: 3; }
.sp-star-glow { display: block; width: 14px; height: 14px; border-radius: 50%; position: relative;
background: radial-gradient(circle, #fff6df, rgba(255,246,223,0) 70%); animation: bd-twinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.sp-star-glow::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.sp-star-lbl { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: 0.85rem; color: #cfc6b4; opacity: 0.75; }
.sp-star-card { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); width: 180px;
background: rgba(18,14,10,0.92); border: 1px solid rgba(196,162,103,0.35); border-radius: 6px; padding: 0.6rem 0.75rem;
opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s; }
.sp-star:hover .sp-star-card, .sp-star:focus-visible .sp-star-card { opacity: 1; transform: translateX(-50%) translateY(0); }
.sp-star-nm { display: block; font-family: var(--serif); font-size: 1.05rem; line-height: 1.1; color: var(--paper); }
.sp-star-yr { display: block; font-family: var(--sans); font-size: 0.62rem; color: #a89d89; margin-top: 0.1rem; }
/* ---- 03 · Ampliação — a slow cinema reel ---- */
.sp-bd-reel { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
background: #0c0906; display: flex; align-items: center; box-shadow: 0 24px 50px rgba(0,0,0,0.4); }
.sp-reel-track { display: flex; gap: 20px; align-items: center; padding: 0 40px; width: max-content; animation: bd-reel 44s linear infinite; }
.sp-bd-reel:hover .sp-reel-track { animation-play-state: paused; }
@keyframes bd-reel { to { transform: translateX(-50%); } }
.sp-reel-frame { position: relative; flex: 0 0 auto; width: min(46vw, 380px); aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden;
border: 1px solid rgba(196,162,103,0.3); box-shadow: 0 12px 28px rgba(0,0,0,0.5); text-decoration: none; }
.sp-reel-frame .sp-bd-cover { transform: scale(1.06); transition: transform 8s linear; }
.sp-reel-frame:hover .sp-bd-cover { transform: scale(1.16); }
.sp-reel-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1rem 0.8rem; background: linear-gradient(transparent, rgba(10,7,5,0.85)); color: var(--paper); }
.sp-reel-pl { display: block; font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sp-reel-nm { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.05; margin-top: 0.15rem; }
.sp-reel-yr { display: block; font-family: var(--sans); font-size: 0.66rem; color: #b8ad98; margin-top: 0.1rem; }
.sp-reel-vig { position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 120px 30px rgba(0,0,0,0.6); }
.sp-reel-sprk { position: absolute; left: 0; right: 0; height: 14px; z-index: 3; pointer-events: none; opacity: 0.4;
background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,0.6) 20px 26px, transparent 26px 46px); }
.sp-reel-sprk--t { top: 8px; } .sp-reel-sprk--b { bottom: 8px; }
/* ---- 02 · Painel de Partidas — the flaps turn into place ---- */
.sp-board { width: min(820px, 100%); background: linear-gradient(180deg, #181310, #0e0b08); border-radius: 8px;
padding: clamp(1.2rem, 4vw, 2.4rem); box-shadow: 0 24px 50px rgba(0,0,0,0.4); }
.sp-board-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(196,162,103,0.22); margin-bottom: 0.3rem; }
.sp-board-l { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--paper); }
.sp-board-r { font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 0.5rem; }
.sp-board-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: bd-pulse 2s infinite; }
.sp-board-row { display: grid; grid-template-columns: 1.3fr 2fr 0.6fr; gap: 1rem; align-items: center; padding: 0.8rem 0;
border-bottom: 1px solid rgba(196,162,103,0.1); text-decoration: none; }
.sp-board-row:last-child { border-bottom: 0; }
html.js .sp-page .sp-bd-board .sp-board-row { opacity: 0; transform: perspective(400px) rotateX(-90deg); transform-origin: top center; }
.sp-bd-board.is-visible .sp-board-row { animation: bd-flap 0.7s var(--ease) both; animation-delay: calc(var(--i) * 0.12s); }
@keyframes bd-flap { 0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
60% { opacity: 1; transform: perspective(400px) rotateX(12deg); }
100% { opacity: 1; transform: perspective(400px) rotateX(0); } }
.sp-board-pl { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: 0.03em; color: #f3ead6; text-transform: uppercase; font-size: clamp(0.8rem, 2vw, 1.1rem); }
.sp-board-nm { font-family: var(--serif); font-weight: 500; color: #cfc6b4; font-size: clamp(0.85rem, 2vw, 1.15rem); }
.sp-board-yr { font-family: var(--serif); font-size: 1.1rem; color: var(--gold); text-align: right; }
/* ---- 04 · A Folha — gilt leaves that turn on hover, linking through ---- */
.sp-cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1rem, 3vw, 1.8rem); max-width: 1000px; margin: 0 auto; }
.sp-cx { display: block; aspect-ratio: 3 / 4; perspective: 1200px; text-decoration: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 0.08s); }
html.js .sp-page .sp-bd-codex:not(.is-visible) .sp-cx { opacity: 0; transform: translateY(18px); }
.sp-cx-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.sp-cx:hover .sp-cx-inner, .sp-cx:focus-visible .sp-cx-inner { transform: rotateY(-168deg); }
.sp-cx-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 4px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.3); }
.sp-cx-front { background: #1c140d; }
.sp-cx-front .sp-bd-cover { filter: saturate(0.95) brightness(0.95); }
.sp-cx-front-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 0.8rem 0.8rem; background: linear-gradient(transparent, rgba(12,8,5,0.9));
color: var(--paper); font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1.05; }
.sp-cx-back { transform: rotateY(180deg); background: var(--parchment); background-image: var(--texture-parchment); color: var(--brown);
border: 1px solid var(--gold); padding: clamp(1rem, 3vw, 1.5rem); display: flex; flex-direction: column; }
.sp-cx-back::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(196,162,103,0.4); pointer-events: none; }
.sp-cx-pl { font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.sp-cx-nm { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.05; color: var(--brown); margin: 0.3rem 0 0.1rem; }
.sp-cx-yr { font-family: var(--serif); font-size: 0.9rem; color: var(--bronze); }
.sp-cx-desc { font-family: var(--serif); font-size: 0.92rem; line-height: 1.45; color: #4a4034; margin-top: 0.5rem; }
.sp-cx-read { margin-top: auto; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
/* ---- movement OFF for readers who ask for less ---- */
@media (prefers-reduced-motion: reduce) {
.sp-bd * { animation: none !important; transition: none !important; }
.sp-bd-passport .sp-pp-stamp, .sp-bd-pcards .sp-pp-stamp { opacity: 0.82 !important; }
.sp-bd-illum .sp-ilum-vine > path:first-of-type { stroke-dashoffset: 0 !important; }
.sp-bd-illum .sp-ilum-leaf { opacity: 0.8 !important; }
.sp-bd-illum .sp-ilum-row, .sp-bd-illum .sp-ilum-roundel { opacity: 1 !important; transform: none !important; }
.sp-bd-triptych .sp-tript-wing--l { transform: rotateY(-116deg) !important; }
.sp-bd-triptych .sp-tript-wing--r { transform: rotateY(116deg) !important; }
.sp-bd-triptych .sp-tript-cap { opacity: 1 !important; }
.sp-bd-letter .sp-lt-flap { transform: rotateX(-172deg) !important; }
.sp-bd-letter .sp-lt-half--l, .sp-bd-letter .sp-lt-half--r, .sp-bd-letter .sp-lt-mono { opacity: 0 !important; }
.sp-bd-leporello .sp-lep-panel { transform: none !important; margin: 0 5px !important; }
.sp-bd-meridian .sp-mer-arc { stroke-dashoffset: 0 !important; }
.sp-bd-meridian .sp-mer-node, .sp-bd-meridian .sp-mer-lbl, .sp-bd-meridian .sp-mer-sub, .sp-bd-meridian .sp-mer-spark { opacity: 1 !important; }
.sp-bd-constellation .sp-const-line path { stroke-dashoffset: 0 !important; }
.sp-bd-board .sp-board-row { opacity: 1 !important; transform: none !important; }
.sp-bd-codex .sp-cx { opacity: 1 !important; transform: none !important; }
}