/* -----------------------------------------------------------------------------
   saint-v1.css
   Phase 4 prototype — St. Benedict editorial saint-detail layout.

   All rules are scoped under .er-saint-v1 so this file cannot affect any
   other saint page. Uses the Phase 1 design tokens from variables.css and
   the .er-* primitives from global.css. Composition follows the 03B
   saint-v1 Claude Design reference screens — typography, primitive shapes,
   and editorial rhythm.
   -------------------------------------------------------------------------- */

.er-saint-v1 {
    background-color: var(--er-paper);
    color: var(--er-ink);
    font-family: var(--er-sans);
    font-size: 16px;
    line-height: 1.62;

    --er-saint-v1-container: 1240px;
    --er-saint-v1-editorial-container: 1088px;
    --er-saint-v1-wide-container: 1160px;
    --er-saint-v1-fs-title:  clamp(3.25rem, 6.4vw, 5.75rem);
    --er-saint-v1-fs-head:   clamp(1.875rem, 3.4vw, 2.625rem);
    --er-saint-v1-fs-quote:  clamp(1.625rem, 2.6vw, 2.25rem);
    --er-saint-v1-fs-h3:     1.0625rem;
    --er-saint-v1-fs-lede:   clamp(1.0625rem, 1.3vw, 1.1875rem);
    --er-saint-v1-fs-body:   16px;
    --er-saint-v1-fs-meta:   14px;
    --er-saint-v1-fs-meta-sm:14px;
    --er-saint-v1-tr-meta:   0.08em;
    --er-saint-v1-tr-eye:    0.12em;

    /* Restrained dark grey-green / teal editorial accent. Local to the saint
       page so it cannot affect other surfaces; used as a single confident
       moment (portrait backing, quote panel) rather than scattered patches. */
    --er-saint-v1-teal:        #2C4A48;
    --er-saint-v1-teal-deep:   #1E3736;
    --er-saint-v1-teal-soft:   rgba(44, 74, 72, 0.10);
    --er-saint-v1-teal-ink:    #EAF1EE;
}

@media (min-width: 1100px) {
    .er-saint-v1 {
        --er-saint-v1-fs-body: 17px;
    }
}

.er-saint-v1 *,
.er-saint-v1 *::before,
.er-saint-v1 *::after {
    box-sizing: border-box;
}

.er-saint-v1 a {
    color: var(--er-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--er-rule);
    transition: color 160ms ease, border-color 160ms ease;
}

.er-saint-v1 a:hover,
.er-saint-v1 a:focus-visible {
    color: var(--er-clay-deep);
    border-bottom-color: var(--er-clay-deep);
}

.er-saint-v1 h1,
.er-saint-v1 h2,
.er-saint-v1 h3 {
    font-family: var(--er-serif);
    color: var(--er-ink);
    font-weight: 400;
    margin: 0;
}

.er-saint-v1 p,
.er-saint-v1 dl,
.er-saint-v1 ol,
.er-saint-v1 ul {
    margin: 0;
}

.er-saint-v1 ol,
.er-saint-v1 ul {
    padding: 0;
    list-style: none;
}

/* --- Shared layout --------------------------------------------------- */

.er-saint-v1__container {
    width: 100%;
    max-width: var(--er-saint-v1-container);
    margin: 0 auto;
    padding: 0 var(--er-space-32);
}

.er-saint-v1__section {
    padding: clamp(64px, 7vw, 112px) 0;
    border-top: 1px solid var(--er-rule-soft);
}

.er-saint-v1__section > .er-saint-v1__container {
    max-width: var(--er-saint-v1-editorial-container);
}

.er-saint-v1__places-section > .er-saint-v1__container,
.er-saint-v1__closing-section > .er-saint-v1__container,
.er-saint-v1__visit-section > .er-saint-v1__container {
    max-width: var(--er-saint-v1-wide-container);
}

.er-saint-v1__section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--er-space-24);
    margin-bottom: clamp(var(--er-space-24), 3vw, var(--er-space-32));
    flex-wrap: wrap;
}

.er-saint-v1__section-head-left {
    min-width: 0;
    flex: 1 1 520px;
}

.er-saint-v1__section-head-meta {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    align-self: flex-end;
    max-width: 22ch;
    text-align: right;
}

.er-saint-v1__section-head-meta--quiet {
    color: var(--er-ink-4);
}

.er-saint-v1__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--er-ink-3);
}

.er-saint-v1__eyebrow-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--er-clay);
    transform: translateY(-1px);
}

.er-saint-v1__eyebrow-status {
    color: var(--er-ink-3);
    opacity: 0.85;
    margin-left: 4px;
}

.er-saint-v1__headline {
    font-family: var(--er-serif);
    font-weight: 400;
    font-size: var(--er-saint-v1-fs-head);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: var(--er-ink);
    max-width: min(32ch, 100%);
}

.er-saint-v1__body {
    font-family: var(--er-sans);
    font-size: var(--er-saint-v1-fs-body);
    line-height: 1.68;
    color: var(--er-ink-2);
    max-width: 62ch;
}

.er-saint-v1__body + .er-saint-v1__body {
    margin-top: 22px;
}

/* --- Image surfaces -------------------------------------------------- */

.er-saint-v1__img {
    position: relative;
    overflow: hidden;
    border-radius: var(--er-r-md);
    background:
        repeating-linear-gradient(135deg,
            rgba(31, 27, 20, 0.045) 0 1px,
            transparent 1px 12px),
        linear-gradient(180deg, #d8ceb6 0%, #c4b899 100%);
    color: var(--er-ink-2);
}

.er-saint-v1__img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.er-saint-v1__img--portrait {
    aspect-ratio: 4 / 5;
}

.er-saint-v1__img--wide {
    aspect-ratio: 16 / 9;
}

.er-saint-v1__img--warm {
    background:
        repeating-linear-gradient(135deg, rgba(31, 27, 20, 0.05) 0 1px, transparent 1px 12px),
        linear-gradient(180deg, #d6a779 0%, #aa6a3c 100%);
    color: #fffaf0;
}

.er-saint-v1__img--stone {
    background:
        repeating-linear-gradient(135deg, rgba(31, 27, 20, 0.05) 0 1px, transparent 1px 12px),
        linear-gradient(180deg, #d8d3c5 0%, #aaa48f 100%);
}

/* --- HERO ------------------------------------------------------------ */

.er-saint-v1__hero {
    padding: clamp(32px, 4vw, 56px) 0 clamp(32px, 4vw, 52px);
    background:
        radial-gradient(ellipse at top right, rgba(164, 130, 63, 0.06), transparent 60%),
        var(--er-paper);
    /* Hard guarantee against horizontal overflow from the portrait mat's
       lower-left reveal at any viewport — clips x only, leaves the sticky
       subnav (a sibling, not a descendant) untouched. */
    overflow-x: clip;
}

.er-saint-v1__hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: clamp(28px, 3.5vw, 44px);
    padding-bottom: 0;
}

.er-saint-v1__review {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.er-saint-v1__review-suggest {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-clay-deep);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.er-saint-v1__review-suggest:hover,
.er-saint-v1__review-suggest:focus-visible {
    color: var(--er-ink);
    border-bottom-color: var(--er-ink);
}

.er-saint-v1__hero-top-lead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.er-saint-v1__hero-context {
    margin: 0;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-4);
}

.er-saint-v1__review {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-saint-v1__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 33vw, 480px);
    gap: clamp(var(--er-space-32), 4vw, 64px);
    align-items: center;
}

.er-saint-v1--no-hero-image .er-saint-v1__hero {
    padding-bottom: clamp(28px, 3vw, 42px);
}

.er-saint-v1--no-hero-image .er-saint-v1__hero-grid {
    grid-template-columns: minmax(0, 860px);
}

.er-saint-v1--no-hero-image .er-saint-v1__hero-aside {
    max-width: 320px;
}

@media (max-width: 900px) {
    .er-saint-v1__hero-grid {
        grid-template-columns: 1fr;
    }
    .er-saint-v1__hero-aside {
        order: -1;
        max-width: 380px;
    }
}

.er-saint-v1__hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.er-saint-v1__hero-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.er-saint-v1__title {
    font-family: var(--er-serif);
    font-size: var(--er-saint-v1-fs-title);
    line-height: 0.98;
    letter-spacing: -0.022em;
    margin: 0 0 6px;
}

.er-saint-v1__title-main,
.er-saint-v1__title-suffix {
    display: block;
}

.er-saint-v1__title-suffix {
    font-style: italic;
    color: var(--er-ink-2);
}

.er-saint-v1__hero-dek {
    font-family: var(--er-serif);
    font-size: var(--er-saint-v1-fs-lede);
    line-height: 1.45;
    color: var(--er-ink-2);
    margin: 14px 0 0;
    max-width: 56ch;
}

/* Portrait sits on a deep grey-green mat that reveals only on the lower-left —
   the page's single confident teal moment. The mat's right edge is flush with
   the portrait (inset right: 0) so it can never extend past the hero column and
   off the viewport, and the reveal falls into the grid gutter and the hero's
   own bottom padding. A faint paper texture plus a soft shadow under the frame
   keep it reading as an integrated editorial mat, not a flat pasted slab. */
.er-saint-v1__hero-figure {
    position: relative;
    margin: 0;
    width: 100%;
    isolation: isolate;
}

.er-saint-v1__hero-figure::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset:
        clamp(12px, 1.8vw, 22px)
        0
        calc(-1 * clamp(10px, 1.4vw, 18px))
        calc(-1 * clamp(10px, 1.4vw, 18px));
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 11px),
        linear-gradient(160deg, var(--er-saint-v1-teal) 0%, var(--er-saint-v1-teal-deep) 100%);
    border-radius: var(--er-r-md);
}

.er-saint-v1__hero-frame {
    box-shadow: 0 14px 30px -22px rgba(30, 55, 54, 0.55);
}

@media (max-width: 540px) {
    .er-saint-v1__hero-figure::before {
        inset: 10px 0 -10px -8px;
    }
}

/* Hero frame uses object-fit: contain inside a warm editorial frame so the
   full portrait composition is preserved (no aggressive face crop). The
   frame ratio matches the 2:3 portrait renderings so the image fills the
   frame without warm-clay side bands. */
.er-saint-v1__hero-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--er-r-md);
    aspect-ratio: 2 / 3;
    background:
        repeating-linear-gradient(135deg, rgba(31, 27, 20, 0.05) 0 1px, transparent 1px 12px),
        linear-gradient(180deg, #e6cdb0 0%, #c89370 100%);
    padding: clamp(10px, 1.2vw, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.er-saint-v1__hero-frame::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(31, 27, 20, 0.12);
    border-radius: calc(var(--er-r-md) - 2px);
    pointer-events: none;
    z-index: 1;
}

.er-saint-v1__hero-frame > img {
    position: relative;
    z-index: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: calc(var(--er-r-md) - 4px);
}

/* Four-column hero meta — lives inside the left text column under the title.
   Spans the column width and butts up against an ink hairline so it reads as
   the structural footing of the title block rather than a separate strip. */
.er-saint-v1__hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px 8px;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: 20px;
    border-top: 1px solid var(--er-ink);
    /* Hold the facts in a contained block under the title rather than letting
       them stretch the full width of a wide hero column, which read as thin,
       spread-out tokens floating in empty space. */
    max-width: 41rem;
}

@media (max-width: 760px) {
    .er-saint-v1__hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }
}

.er-saint-v1__hero-meta-col {
    padding-right: 16px;
    min-width: 0;
}

.er-saint-v1__hero-meta dt {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    margin-bottom: 8px;
}

.er-saint-v1__hero-meta dd {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.er-saint-v1__hero-meta-value {
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    line-height: 1.25;
    color: var(--er-ink);
}

.er-saint-v1__hero-meta-sub {
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.45;
    color: var(--er-ink-3);
}

/* --- Quote ----------------------------------------------------------- */

.er-saint-v1__quote-section {
    background: var(--er-paper);
    border-top: 0;
}

.er-saint-v1__quote-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: start;
    margin: 10px 0 28px;
    max-width: 1080px;
}

@media (max-width: 640px) {
    .er-saint-v1__quote-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.er-saint-v1__quote-mark {
    font-family: var(--er-serif);
    font-size: clamp(4rem, 8vw, 6rem);
    line-height: 0.85;
    color: var(--er-clay);
    text-align: right;
}

.er-saint-v1__quote {
    margin: 0;
}

.er-saint-v1__quote-text {
    font-family: var(--er-serif);
    font-style: italic;
    font-size: var(--er-saint-v1-fs-quote);
    line-height: 1.28;
    letter-spacing: -0.005em;
    color: var(--er-ink);
    margin: 0;
    max-width: 42ch;
    overflow-wrap: break-word;
}

.er-saint-v1__quote-source {
    margin-left: 104px;
    padding-top: 18px;
    border-top: 1px solid var(--er-rule);
    max-width: 54ch;
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.45;
    color: var(--er-ink-3);
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .er-saint-v1__quote-source {
        margin-left: 0;
    }
}

/* Content-aware quote sizing. A short line is set as a centered editorial band
   — larger, deliberate, occupying the natural width of the page rather than
   clumping in the left column — so a single scriptural line reads as an
   intentional moment. Long passages keep the roomier left-aligned default. */
.er-saint-v1__quote-section--short {
    padding-top: clamp(48px, 5vw, 76px);
    padding-bottom: clamp(48px, 5vw, 76px);
}

.er-saint-v1__quote-section--short .er-saint-v1__quote-row {
    grid-template-columns: 1fr;
    max-width: 820px;
    margin: 0 auto 14px;
    justify-items: center;
    text-align: center;
    gap: 2px;
}

.er-saint-v1__quote-section--short .er-saint-v1__quote-mark {
    text-align: center;
    font-size: clamp(2.75rem, 4vw, 3.75rem);
    line-height: 0.6;
    color: var(--er-clay);
}

.er-saint-v1__quote-section--short .er-saint-v1__quote-text {
    font-size: clamp(2rem, 3.4vw, 2.875rem);
    line-height: 1.16;
    max-width: 22ch;
    text-align: center;
}

.er-saint-v1__quote-section--short .er-saint-v1__quote-source {
    margin: 0 auto;
    max-width: 52ch;
    border-top: 0;
    padding-top: 12px;
    text-align: center;
}

.er-saint-v1__quote-section--long .er-saint-v1__quote-text {
    font-size: clamp(1.5rem, 2.1vw, 1.875rem);
    line-height: 1.34;
    max-width: 40ch;
}

/* Paragraph-length quotes/witness text (medium + long) read as a balanced,
   centered content block rather than a column shoved to the left of an empty
   gutter. The block is centered; the text itself stays left-aligned (centred
   prose at this length goes ragged). Only the genuine one-line `--short` case
   uses centered text. */
.er-saint-v1__quote-section--medium .er-saint-v1__quote-row,
.er-saint-v1__quote-section--long .er-saint-v1__quote-row {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.er-saint-v1__quote-section--medium .er-saint-v1__quote-text,
.er-saint-v1__quote-section--long .er-saint-v1__quote-text {
    max-width: 52ch;
}

.er-saint-v1__quote-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--er-rule);
    align-items: start;
}

@media (max-width: 880px) {
    .er-saint-v1__quote-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
}

@media (max-width: 520px) {
    .er-saint-v1__quote-meta {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__quote-meta-label {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    margin-bottom: 10px;
}

.er-saint-v1__quote-meta-main {
    font-family: var(--er-sans);
    font-size: var(--er-saint-v1-fs-body);
    line-height: 1.35;
    color: var(--er-ink);
}

.er-saint-v1__quote-meta-sub {
    margin-top: 4px;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor);
    color: var(--er-ink-3);
    line-height: 1.4;
}

.er-saint-v1__quote-meta-col--cta {
    justify-self: end;
}

.er-saint-v1__quote-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--er-ink);
    border-radius: var(--er-r-pill);
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink);
    background: var(--er-paper);
}

.er-saint-v1__quote-link:hover {
    background: var(--er-ink);
    color: var(--er-paper);
    border-bottom-color: var(--er-ink);
}

/* Rating panel */
.er-saint-v1__rating-panel {
    margin-top: 56px;
    padding: 28px 32px;
    background: var(--er-ivory);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
}

.er-saint-v1__rating-panel-label {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    margin-bottom: 18px;
}

.er-saint-v1__rating-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 880px) {
    .er-saint-v1__rating-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 520px) {
    .er-saint-v1__rating-grid {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__rating-bars {
    display: inline-flex;
    gap: 3px;
    margin-bottom: 10px;
}

.er-saint-v1__rating-bar {
    width: 14px;
    height: 8px;
    background: var(--er-rule);
    border-radius: 2px;
}

.er-saint-v1__rating-bar.is-on {
    background: var(--er-clay);
}

.er-saint-v1__rating-title {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink);
    font-weight: 600;
    margin-bottom: 8px;
}

.er-saint-v1__rating-cell p {
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor);
    line-height: 1.55;
    color: var(--er-ink-2);
    margin: 0;
}

/* --- Why Follow (two-column with Key Facts aside) ------------------- */

.er-saint-v1__story-grid {
    display: grid;
    grid-template-columns: minmax(248px, 300px) minmax(0, 68ch);
    justify-content: center;
    gap: clamp(36px, 4.5vw, 60px);
    align-items: start;
}

@media (max-width: 900px) {
    .er-saint-v1__story-grid {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__keyfacts-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 64px;
}

@media (max-width: 900px) {
    .er-saint-v1__keyfacts-aside {
        position: static;
    }
}

.er-saint-v1__keyfacts {
    padding: 26px 28px;
    background: var(--er-ivory);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
}

.er-saint-v1__keyfacts-label {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    margin-bottom: 18px;
}

.er-saint-v1__keyfacts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.er-saint-v1__keyfact-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--er-rule-soft);
    align-items: start;
}

.er-saint-v1__keyfact-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.er-saint-v1__keyfact-row:last-child {
    padding-bottom: 0;
}

.er-saint-v1__keyfact-row dt {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    line-height: 1.4;
    margin: 2px 0 0;
}

.er-saint-v1__keyfact-row dd {
    margin: 0;
    min-width: 0;
}

.er-saint-v1__keyfact-main {
    font-family: var(--er-sans);
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--er-ink);
    overflow-wrap: break-word;
}

.er-saint-v1__keyfact-sub {
    margin-top: 4px;
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--er-ink-3);
    overflow-wrap: break-word;
}

.er-saint-v1__story .er-saint-v1__headline {
    margin-bottom: 28px;
    max-width: 22ch;
    font-size: clamp(1.875rem, 3.2vw, 2.5rem);
    line-height: 1.1;
}

.er-saint-v1__story .er-saint-v1__body {
    max-width: 66ch;
}

.er-saint-v1__story .er-saint-v1__body em,
.er-saint-v1__story .er-saint-v1__body i {
    font-family: var(--er-serif);
    font-style: italic;
}

/* --- A Life in Time (horizontal rows) ------------------------------- */

.er-saint-v1__timeline-section .er-saint-v1__section-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--er-ink);
    padding-bottom: 14px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.er-saint-v1__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 980px;
    margin: 0 auto;
}

.er-saint-v1__timeline-head,
.er-saint-v1__timeline-row {
    display: grid;
    grid-template-columns: 96px 72px minmax(0, 1.2fr) minmax(0, 2fr);
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--er-rule-soft);
    align-items: baseline;
}

.er-saint-v1__timeline-head {
    padding: 10px 0 12px;
    border-top: 1px solid var(--er-ink);
    border-bottom: 1px solid var(--er-ink);
}

.er-saint-v1__timeline-head-cell {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    font-weight: 500;
}

@media (max-width: 800px) {
    .er-saint-v1__timeline-head {
        grid-template-columns: 72px 60px minmax(0, 1fr);
    }
    .er-saint-v1__timeline-head-cell:nth-child(4) {
        display: none;
    }
}

@media (max-width: 800px) {
    .er-saint-v1__timeline-row {
        grid-template-columns: 72px 60px minmax(0, 1fr);
        gap: 8px 14px;
    }
    .er-saint-v1__timeline-desc {
        grid-column: 1 / -1;
        padding-top: 4px;
        max-width: 100%;
    }
}

.er-saint-v1__timeline-year {
    font-family: var(--er-serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--er-ink);
    letter-spacing: -0.012em;
}

/* Descriptive / relative markers in the year column ("Shortly after",
   "2nd–3rd century", "Date unknown") are not clean years and look oversized at
   the display size. A quieter, smaller label keeps the column consistent. */
.er-saint-v1__timeline-year--text {
    font-size: var(--er-fs-floor);
    line-height: 1.3;
    font-style: italic;
    color: var(--er-ink-3);
    letter-spacing: 0;
}

.er-saint-v1__timeline-title {
    font-family: var(--er-serif);
    font-size: var(--er-fs-card);
    line-height: 1.3;
    color: var(--er-ink);
}

.er-saint-v1__timeline-desc {
    font-family: var(--er-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--er-ink-2);
    max-width: 60ch;
}

/* "Legacy after death" divider — separates life/death events from the
   posthumous record so the chronology reads as one stream without ever
   letting an "After death" row sit among the living years. */
.er-saint-v1__timeline-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 0 6px;
}

.er-saint-v1__timeline-divider span {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-saint-v1-teal);
    flex: 0 0 auto;
}

.er-saint-v1__timeline-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--er-rule);
}

.er-saint-v1__timeline-row.is-posthumous .er-saint-v1__timeline-year,
.er-saint-v1__timeline-row.is-posthumous .er-saint-v1__timeline-age {
    color: var(--er-ink-3);
}

/* --- Sourced media band (life-section slot) ------------------------- */

.er-saint-v1__media-section {
    background: var(--er-paper);
}

.er-saint-v1__media {
    margin: 0;
}

.er-saint-v1__media-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--er-r-md);
    aspect-ratio: 16 / 7;
    background: var(--er-saint-v1-teal-deep);
}

.er-saint-v1__media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.er-saint-v1__media-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 14px;
}

.er-saint-v1__media-caption-text {
    font-family: var(--er-serif);
    font-style: italic;
    font-size: var(--er-saint-v1-fs-lede);
    line-height: 1.4;
    color: var(--er-ink-2);
    max-width: 60ch;
}

.er-saint-v1__media-credit {
    font-family: var(--er-sans);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--er-ink-4);
    align-self: flex-end;
}

/* Portrait artwork plate — a tall painting set as a contained, centered plate
   so object-fit: cover does not crop the figure inside the wide landscape band. */
.er-saint-v1__media--portrait .er-saint-v1__media-frame {
    aspect-ratio: 4 / 5;
    max-width: 360px;
    max-height: min(560px, 70vh);
    margin-left: auto;
    margin-right: auto;
}

.er-saint-v1__media--portrait .er-saint-v1__media-caption {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.er-saint-v1__media--portrait .er-saint-v1__media-credit {
    align-self: center;
}

@media (max-width: 700px) {
    .er-saint-v1__media-frame {
        aspect-ratio: 4 / 3;
    }
}

/* --- Where to Go (image-led place grid) ----------------------------- */

.er-saint-v1__places-section {
    background: var(--er-ivory);
    border-top: 1px solid var(--er-rule);
}

.er-saint-v1__places-section .er-saint-v1__section-head {
    border-bottom: 1px solid var(--er-ink);
    padding-bottom: 14px;
}

.er-saint-v1__places {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: center;
    gap: 28px;
}

@media (max-width: 900px) {
    .er-saint-v1__places {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .er-saint-v1__places {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__place-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
    overflow: hidden;
}

.er-saint-v1__place-img {
    aspect-ratio: 16 / 9;
    max-height: 260px;
    border-radius: 0;
}

.er-saint-v1__place-card-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.er-saint-v1__place-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.er-saint-v1__place-card-label {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-clay-deep);
    font-weight: 500;
}

.er-saint-v1__place-card-year {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    text-align: right;
}

.er-saint-v1__place-card-title {
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    line-height: 1.18;
    margin: 0;
}

.er-saint-v1__place-card-title a {
    border-bottom-color: transparent;
}

.er-saint-v1__place-card-title a:hover {
    border-bottom-color: var(--er-clay-deep);
}

.er-saint-v1__place-card-loc {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    color: var(--er-ink-3);
}

.er-saint-v1__place-card-note {
    margin-top: 8px;
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--er-ink-2);
}

/* --- Tomb & Relics -------------------------------------------------- */

.er-saint-v1__relics-section .er-saint-v1__section-head {
    border-bottom: 1px solid var(--er-ink);
    padding-bottom: 14px;
}

.saint-page .er-saint-v1__relic-intro,
.er-saint-v1__relic-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    justify-content: center;
    gap: clamp(24px, 2.5vw, 34px);
    align-items: start;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(32px, 4vw, 56px);
}

@media (max-width: 800px) {
    /* Match the base rule's specificity (.saint-page .er-saint-v1__relic-intro)
       so this override actually wins instead of losing to the two-column
       desktop layout on mobile. */
    .saint-page .er-saint-v1__relic-intro,
    .er-saint-v1__relic-intro {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__relic-notes {
    font-family: var(--er-serif);
    font-style: italic;
    font-size: var(--er-saint-v1-fs-lede);
    line-height: 1.55;
    color: var(--er-ink-2);
    margin: 0;
    padding: 24px 28px;
    background: var(--er-ivory);
    border-left: 2px solid var(--er-clay);
    border-radius: 0 var(--er-r-md) var(--er-r-md) 0;
}

.er-saint-v1__relic-intro > .er-confidence {
    padding: 22px 24px;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
}

.er-saint-v1__relics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--er-space-32);
}

.er-saint-v1__relic {
    padding: 30px;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.er-saint-v1__relic-label {
    display: inline-block;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-clay-deep);
    margin-bottom: 10px;
}

.er-saint-v1__relic-title {
    font-family: var(--er-serif);
    font-size: 1.625rem;
    line-height: 1.18;
    letter-spacing: -0.008em;
    margin: 0;
}

.er-saint-v1__relic-loc {
    margin-top: 8px;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: 0.04em;
    color: var(--er-ink-3);
}

.er-saint-v1__relic-summary {
    font-family: var(--er-sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--er-ink-2);
}

.er-saint-v1__relic-list li {
    padding: 8px 0;
    border-top: 1px solid var(--er-rule-soft);
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--er-ink-2);
}

.er-saint-v1__relic-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.er-saint-v1__relic-pilgrim {
    padding: 16px 18px;
    background: var(--er-limestone);
    border-radius: var(--er-r-sm);
}

.er-saint-v1__relic-pilgrim-label {
    display: block;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    margin-bottom: 6px;
}

.er-saint-v1__relic-pilgrim p {
    font-family: var(--er-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--er-ink-2);
}

.er-saint-v1__relic-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.er-saint-v1__relic-body > .er-confidence {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--er-rule);
}

/* Tomb & Relics imagery.
   A restrained editorial image-and-text composition: the photo lives INSIDE the
   relic record (never a destination card, no CTA, no pills). A fixed
   aspect-ratio frame keeps every record's proportions consistent so nothing
   stretches or over-crops, and a record with no approved image simply omits the
   frame — no empty box, no lopsided row beside an imaged sibling. */
.er-saint-v1__relic-media {
    margin: 0;
}

.er-saint-v1__relic-media-link,
.er-saint-v1__relic-media-frame {
    display: block;
    text-decoration: none;
}

.er-saint-v1__relic-media-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--er-limestone);
    border-radius: var(--er-r-sm);
}

.er-saint-v1__relic-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.er-saint-v1__relic-media-link:hover .er-saint-v1__relic-media-frame img,
.er-saint-v1__relic-media-link:focus-visible .er-saint-v1__relic-media-frame img {
    transform: scale(1.03);
}

/* Non-quiet card: the framed image caps the card, the record flows beneath. */
.er-saint-v1__relic--has-media .er-saint-v1__relic-media-frame {
    aspect-ratio: 16 / 10;
}

/* Quiet Tomb & Relics.
   On Sacred-Connections-owned saints the curated module owns place discovery and
   pilgrimage interpretation, so this section steps back to a factual, devotional
   record: no destination-card chrome, no side-by-side discovery grid. The entries
   stack as a marked record — the relic facts and certainty stay, the "visit this"
   framing does not. */
.er-saint-v1__relics--quiet {
    display: block;
    max-width: 720px;
}

.er-saint-v1__relic--quiet {
    padding: 0 0 0 22px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--er-rule);
    border-radius: 0;
    gap: 12px;
}

.er-saint-v1__relics--quiet .er-saint-v1__relic + .er-saint-v1__relic {
    margin-top: var(--er-space-32);
}

.er-saint-v1__relic--quiet .er-saint-v1__relic-body > .er-confidence {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

/* Quiet Tomb & Relics with imagery.
   The quiet record has room the auto-fit cards lack, so the photo sits beside
   the factual record: a restrained image column and the text alongside. This is
   what lets Agnes's tomb-and-body vs skull-and-martyrdom, and Cecilia's present
   tomb vs first-burial memory, read as a clear visual distinction while staying
   quieter than the Sacred Connections module above. */
.er-saint-v1__relic--quiet.er-saint-v1__relic--has-media {
    display: grid;
    grid-template-columns: minmax(0, 240px) 1fr;
    gap: 24px;
    align-items: start;
}

.er-saint-v1__relic--quiet .er-saint-v1__relic-media-frame {
    aspect-ratio: 4 / 3;
}

/* A single relic location gets a stronger image (the "one place" reading);
   paired locations keep the balanced, consistent proportion. */
.er-saint-v1__relics--quiet .er-saint-v1__relic--has-media:only-child {
    grid-template-columns: minmax(0, 300px) 1fr;
}

/* --- Route at a Glance (ordered) ------------------------------------ */

.er-saint-v1__path-section .er-saint-v1__section-head {
    border-bottom: 1px solid var(--er-ink);
    padding-bottom: 14px;
}

.er-saint-v1__path {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.er-saint-v1__path-stop {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--er-space-32);
    padding: clamp(28px, 3.4vw, 44px) 0;
    border-bottom: 1px solid var(--er-rule);
}

.er-saint-v1__path-stop:last-child {
    border-bottom: 0;
}

@media (max-width: 720px) {
    .er-saint-v1__path-stop {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.er-saint-v1__path-index {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.er-saint-v1__path-index-num {
    font-family: var(--er-serif);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--er-clay-deep);
    letter-spacing: -0.02em;
}

.er-saint-v1__path-index-type {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-saint-v1__path-title {
    font-family: var(--er-serif);
    font-size: 1.625rem;
    line-height: 1.18;
    letter-spacing: -0.008em;
    margin: 0;
}

.er-saint-v1__path-loc {
    margin-top: 6px;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: 0.04em;
    color: var(--er-ink-3);
}

.er-saint-v1__path-note {
    margin-top: 14px;
    font-family: var(--er-sans);
    font-size: var(--er-saint-v1-fs-body);
    line-height: 1.65;
    color: var(--er-ink-2);
    max-width: 60ch;
}

/* --- Notes & Sources ------------------------------------------------ */

.er-saint-v1__sources-section {
    background: var(--er-ivory);
    border-top: 1px solid var(--er-rule);
}

.er-saint-v1__sources-section .er-saint-v1__section-head {
    border-bottom: 1px solid var(--er-ink);
    padding-bottom: 14px;
}

.er-saint-v1__sources-disclosure {
    border-top: 1px solid var(--er-ink);
}

.er-saint-v1__sources-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--er-space-24);
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
}

.er-saint-v1__sources-summary::-webkit-details-marker {
    display: none;
}

.er-saint-v1__sources-summary:focus-visible {
    outline: 2px solid var(--er-clay);
    outline-offset: 6px;
}

.er-saint-v1__sources-summary .er-saint-v1__eyebrow {
    display: flex;
    margin-bottom: 10px;
}

.er-saint-v1__sources-summary .er-saint-v1__headline {
    display: block;
}

.er-saint-v1__sources-toggle {
    flex: 0 0 auto;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-clay-deep);
}

.er-saint-v1__sources-disclosure[open] .er-saint-v1__sources-toggle::before {
    content: "Close";
}

.er-saint-v1__sources-disclosure[open] .er-saint-v1__sources-toggle {
    /* Hides the toggle's own text node (the "Show Sources" label) so only the
       ::before "Close" replacement renders. Not a readability violation. */
    font-size: 0;
}

.er-saint-v1__sources-disclosure[open] .er-saint-v1__sources-toggle::before {
    font-size: var(--er-saint-v1-fs-meta);
}

.er-saint-v1__sources-content {
    padding-top: clamp(8px, 1.5vw, 18px);
}

.er-saint-v1__sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
}

.er-saint-v1__source-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: clamp(28px, 3vw, 40px);
}

@media (max-width: 860px) {
    .er-saint-v1__source-notes {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__source-notes p {
    padding: 18px 20px;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--er-ink-2);
}

.er-saint-v1__sources-group-title {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--er-rule);
    font-weight: 500;
}

.er-saint-v1__sources-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.er-saint-v1__source {
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--er-ink-2);
}

.er-saint-v1__source > a,
.er-saint-v1__source > span {
    display: block;
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--er-ink);
    border-bottom-color: transparent;
}

.er-saint-v1__source > a:hover {
    color: var(--er-clay-deep);
}

.er-saint-v1__source-note {
    margin-top: 4px;
    font-size: var(--er-fs-floor);
    color: var(--er-ink-3);
    line-height: 1.5;
}

.er-saint-v1__image-note {
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: 16px;
    border-top: 1px solid var(--er-rule-soft);
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: 0.03em;
    color: var(--er-ink-4);
}

/* --- Place cards with real images ----------------------------------- */

.er-saint-v1__place-card.has-image .er-saint-v1__place-img {
    background-image: none;
    background-color: var(--er-limestone);
}

.er-saint-v1__place-img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.er-saint-v1__place-card .er-saint-v1__place-img {
    position: relative;
}

/* --- Text-first place card (no sourced photo) ----------------------- */
/* When a connected place has no real image, the card leads with its
   relationship label under a clay accent rule rather than a decorative
   gradient swatch standing in for a photo. */
.er-saint-v1__place-card--text {
    border-top: 3px solid var(--er-clay-deep);
}

.er-saint-v1__place-card--text .er-saint-v1__place-card-body {
    padding-top: 22px;
}

/* Timeline age — a short token (`~18`, `About 60`, `Birth`, `After death`).
   Never break inside a word: an over-tight column once dropped the final "n"
   of "unknown" onto its own line. word-break:keep-all + overflow-wrap:normal
   keep each word whole; multi-word tokens ("After death") still wrap at the
   space. */
.er-saint-v1__timeline-age {
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor);
    letter-spacing: 0.04em;
    color: var(--er-clay-deep);
    align-self: baseline;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.er-saint-v1__timeline-footnote {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--er-rule-soft);
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor);
    line-height: 1.6;
    color: var(--er-ink-3);
    max-width: 70ch;
}

.er-saint-v1__timeline-footnote em {
    font-family: var(--er-serif);
    font-style: italic;
    color: var(--er-ink-2);
}

/* --- Section background rhythm --------------------------------------
   Editorial cadence: paper → ivory → paper → limestone → paper → ivory → ivory
   Gives quote, places, sources their own surfaces without becoming stripey.
   ------------------------------------------------------------------- */

.er-saint-v1__quote-section {
    background: var(--er-ivory);
}

.er-saint-v1__story-section {
    background: var(--er-paper);
}

.er-saint-v1__timeline-section {
    background: var(--er-paper);
}

.er-saint-v1__places-section {
    background: var(--er-limestone);
}

.er-saint-v1__relics-section {
    background: var(--er-paper);
}

.er-saint-v1__path-section {
    background: var(--er-ivory);
}

.er-saint-v1__sources-section {
    background: var(--er-ivory);
    border-top-color: var(--er-rule);
}

/* Calmer: in the limestone places section, lift cards to paper so they
   read clearly against the surface. */
.er-saint-v1__places-section .er-saint-v1__place-card {
    background: var(--er-paper);
}

/* In ivory sections, lift keyfacts/relic surfaces to paper for hierarchy */
.er-saint-v1__quote-section .er-saint-v1__rating-panel {
    background: var(--er-paper);
}

/* --- Responsive trimming -------------------------------------------- */

@media (max-width: 640px) {
    .er-saint-v1__container {
        padding: 0 var(--er-space-24);
    }
    .er-saint-v1__relic {
        padding: 24px;
    }
    /* Stack image over record on mobile: no side-by-side crush, no overflow. */
    .er-saint-v1__relic--quiet.er-saint-v1__relic--has-media,
    .er-saint-v1__relics--quiet .er-saint-v1__relic--has-media:only-child {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .er-saint-v1__relic--quiet .er-saint-v1__relic-media-frame,
    .er-saint-v1__relic--has-media .er-saint-v1__relic-media-frame {
        aspect-ratio: 16 / 10;
    }
    .er-saint-v1__hero-meta-col {
        padding-right: 0;
    }
}

/* ============================================================================
   Hero actions — save to journey + optional walk-the-path anchor.
   Scoped under .er-saint-v1; uses custom .er-saint-v1__cta classes so the
   global .add-to-journey rules elsewhere are unaffected.
   ============================================================================ */

.er-saint-v1__hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.er-saint-v1 .er-saint-v1__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--er-r-pill);
    border: 1px solid var(--er-ink);
    line-height: 1;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    width: auto;
    align-self: flex-start;
}

/* Inside the hero aside (max 360px column) the CTAs sit on their own lines
   but stay editorial — natural pill widths, not stretched checkout bars. */
.er-saint-v1__hero-actions .er-saint-v1__cta {
    width: auto;
    align-self: stretch;
    max-width: 240px;
}

.er-saint-v1 .er-saint-v1__cta--solid {
    background: var(--er-ink);
    color: var(--er-paper);
}

.er-saint-v1 .er-saint-v1__cta--solid:hover,
.er-saint-v1 .er-saint-v1__cta--solid:focus-visible {
    background: var(--er-paper);
    color: var(--er-ink);
}

.er-saint-v1 .er-saint-v1__cta--ghost {
    background: var(--er-paper);
    color: var(--er-ink);
}

.er-saint-v1 .er-saint-v1__cta--ghost:hover,
.er-saint-v1 .er-saint-v1__cta--ghost:focus-visible {
    background: var(--er-ink);
    color: var(--er-paper);
}

.er-saint-v1 .er-saint-v1__cta:focus-visible {
    outline: 2px solid var(--er-clay);
    outline-offset: 2px;
}

.er-saint-v1 .er-saint-v1__cta--solid::after {
    content: "\2192";
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
}

.er-saint-v1 .er-saint-v1__cta--solid.is-saved::after,
.er-saint-v1 .er-saint-v1__cta--solid.added::after {
    content: "\2713";
}

.er-saint-v1 .er-saint-v1__cta[disabled],
.er-saint-v1 .er-saint-v1__cta[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .er-saint-v1 .er-saint-v1__cta {
        justify-content: center;
    }
}

/* ============================================================
   SAINT HERO v2 — editorial opening spread.
   Shared by saint-v1 and saint-v2 detail templates.
   ============================================================ */

.er-shero {
    box-sizing: border-box;
    color: var(--er-ink);
    background:
        radial-gradient(ellipse at top right, rgba(179, 106, 69, 0.06), transparent 58%),
        var(--er-paper);
    padding: 22px 22px 36px;
    overflow-x: clip;
}

.er-shero *,
.er-shero *::before,
.er-shero *::after {
    box-sizing: border-box;
}

.er-shero__grid {
    display: grid;
    gap: 30px;
}

.er-shero__left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.er-shero__right {
    display: block;
    min-width: 0;
}

.er-shero__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.er-shero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    font-style: italic;
    font-weight: 400;
    color: var(--er-ink-2);
}

.er-shero__eyebrow .dot {
    color: var(--er-clay);
    font-style: normal;
}

.er-shero__eyebrow .is-wide-only,
.er-shero__eyebrow .dot {
    display: none;
}

.er-saint-v1 .er-shero__name {
    margin: 18px 0 0;
    font-family: var(--er-serif);
    font-size: 3.1rem;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--er-ink);
}

.er-shero__name em {
    font-style: italic;
    font-weight: 300;
}

.er-saint-v1 .er-shero__dek {
    margin: 24px 0 26px;
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    line-height: 1.5;
    font-weight: 300;
    color: var(--er-ink-2);
}

.er-shero__plate {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 1024 / 1536;
    border-radius: 0;
    background: var(--er-parchment);
    box-shadow: 0 14px 40px -30px rgba(31, 27, 20, 0.42);
    overflow: hidden;
}

.er-shero__plate.er-img.stone {
    background:
        repeating-linear-gradient(135deg, rgba(31, 27, 20, 0.055) 0 1px, transparent 1px 12px),
        linear-gradient(180deg, var(--er-limestone) 0%, var(--er-stone) 100%);
}

.er-shero__plate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.er-shero__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--er-ink);
}

.er-shero__meta .cell {
    min-width: 0;
}

.er-shero__meta .k {
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--er-ink-2);
}

.er-shero__meta .v {
    margin-top: 7px;
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    font-weight: 400;
    line-height: 1.25;
    color: var(--er-ink);
    overflow-wrap: anywhere;
}

.er-shero__meta .v small {
    display: block;
    margin-top: 5px;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor);
    font-weight: 400;
    line-height: 1.4;
    color: var(--er-ink-3);
}

.er-shero__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}

.er-shero .er-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
    padding: 16px;
    border-radius: var(--er-r-sm);
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
}

/* The save action is interface copy, not an editorial eyebrow. Keep its
   typography aligned with the Journey controls and avoid utility-style
   tracking that made the label resemble debug text. */
.er-shero .er-btn.er-shero__journey-button {
    font-family: var(--er-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.er-shero .er-btn.clay {
    border: 1px solid var(--er-clay-deep);
    background: var(--er-clay-deep);
    color: var(--er-paper);
}

.er-shero .er-btn.clay:hover,
.er-shero .er-btn.clay:focus-visible {
    border-color: var(--er-clay);
    background: var(--er-clay);
    color: var(--er-paper);
}

.er-shero .er-btn.ghost {
    border: 1px solid var(--er-rule-hair);
    background: transparent;
    color: var(--er-ink);
}

.er-shero .er-btn.ghost:hover,
.er-shero .er-btn.ghost:focus-visible {
    border-color: var(--er-clay-deep);
    color: var(--er-clay-deep);
}

.er-shero .er-btn:focus-visible {
    outline: 2px solid var(--er-clay);
    outline-offset: 3px;
}

.er-shero .er-btn.clay::after {
    content: "\2192";
    margin-left: 8px;
    line-height: 1;
}

.er-shero .er-btn.clay.is-saved::after,
.er-shero .er-btn.clay.added::after {
    content: "\2713";
}

.er-shero__quote {
    margin: 30px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--er-rule-hair);
}

.er-shero__quote p {
    margin: 0;
    font-family: var(--er-serif);
    font-size: 1.4375rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.34;
    color: var(--er-ink-2);
}

.er-shero__attr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor);
    letter-spacing: 0.01em;
    color: var(--er-ink-3);
}

.er-shero__attr .src {
    color: var(--er-ink-2);
}

.er-shero__attr .sep {
    color: var(--er-ink-4);
}

.er-shero__attr .conf {
    color: var(--er-olive);
}

@media (min-width: 768px) {
    .er-shero {
        padding: 34px max(72px, calc((100vw - 1280px) / 2 + 56px)) 60px max(92px, calc((100vw - 1280px) / 2 + 56px));
    }

    .er-shero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: clamp(38px, 4vw, 56px);
        align-items: stretch;
    }

    .er-shero__left,
    .er-shero__body {
        grid-column: 1;
        padding-left: clamp(18px, 2.8vw, 42px);
    }

    .er-shero__right {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .er-shero__eyebrow .is-wide-only,
    .er-shero__eyebrow .dot {
        display: inline;
    }

    .er-shero__eyebrow {
        font-size: var(--er-fs-floor);
    }

    .er-saint-v1 .er-shero__name {
        margin-top: 26px;
        font-size: clamp(4.8rem, 5vw, 7.2rem);
        line-height: 1.06;
    }

    .er-saint-v1 .er-shero__dek {
        max-width: 48ch;
        margin-top: 30px;
        margin-bottom: 0;
        font-size: 1.5625rem;
    }

    .er-shero__meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 38px;
        margin-top: 48px;
        padding-top: 26px;
    }

    .er-shero__meta .k {
        font-size: var(--er-fs-floor);
    }

    .er-shero__meta .v {
        margin-top: 10px;
        font-size: var(--er-fs-floor);
    }

    .er-shero__meta .v small {
        font-size: var(--er-fs-floor);
    }

    .er-shero__cta {
        flex-direction: row;
        margin-top: 42px;
    }

    .er-shero .er-btn {
        width: auto;
        min-height: 48px;
        padding: 15px 24px;
        font-size: var(--er-fs-floor);
    }

    .er-shero__quote {
        margin-top: auto;
        padding-top: 40px;
    }

    .er-shero__quote p {
        max-width: 34ch;
        font-size: 1.875rem;
        line-height: 1.3;
    }

    .er-shero__attr {
        margin-top: 22px;
    }

    .er-shero__plate {
        max-width: none;
    }
}

@media (min-width: 768px) and (max-width: 1120px) {
    .er-shero {
        padding-left: 42px;
        padding-right: 42px;
    }

    .er-shero__grid {
        gap: 34px;
    }

    .er-shero__left,
    .er-shero__body {
        padding-left: clamp(12px, 2vw, 24px);
    }
}

@media (max-width: 380px) {
    .er-shero {
        padding-left: 18px;
        padding-right: 18px;
    }

    .er-saint-v1 .er-shero__name {
        font-size: 2.9rem;
    }
}

/* --- Place card foot + unlinked treatment --------------------------- */

.er-saint-v1__place-card-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--er-rule-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: 0.04em;
    color: var(--er-ink-4);
    text-transform: uppercase;
}

.er-saint-v1 .er-saint-v1__place-save {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--er-clay-deep);
    border-radius: 999px;
    background: transparent;
    color: var(--er-clay-deep);
    font: 600 var(--er-fs-floor)/1.2 var(--er-sans);
    letter-spacing: 0.01em;
    text-transform: none;
}

.er-saint-v1__relic-actions {
    margin-top: 16px;
}

.er-saint-v1__place-card-link {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-clay-deep);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.er-saint-v1__place-card-link:hover,
.er-saint-v1__place-card-link:focus-visible {
    color: var(--er-ink);
    border-bottom-color: var(--er-ink);
}

.er-saint-v1__place-card-pending {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    color: var(--er-ink-4);
}

.er-saint-v1__place-card-credit {
    margin-top: 0;
    font-family: var(--er-sans);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--er-ink-4);
    opacity: 0.85;
}

/* Hide the warm tinted placeholder pattern on cards that have no real image
   but DO have rich editorial context (Norcia, Fleury). Keep the stone tint
   so the card still has a visual anchor but tone it down. */
.er-saint-v1__place-card.is-unlinked .er-saint-v1__place-card-pending::before {
    content: "•";
    margin-right: 6px;
    color: var(--er-clay);
}

/* Places grid sizing variants — keep four-card sets in a 2×2 grid so the
   layout never lies about how many real records exist. */
.er-saint-v1__places--n2 {
    grid-template-columns: repeat(2, minmax(0, 420px));
}

.er-saint-v1__places--n1 {
    grid-template-columns: minmax(0, 560px);
}

.er-saint-v1__places--n4 {
    grid-template-columns: repeat(2, minmax(0, 420px));
}

@media (max-width: 900px) {
    .er-saint-v1__places--n1,
    .er-saint-v1__places--n2,
    .er-saint-v1__places--n4 {
        grid-template-columns: 1fr;
    }
}

/* --- How to Encounter (dark band) ----------------------------------- */

.er-saint-v1__visit-section {
    background:
        radial-gradient(ellipse at top right, rgba(255, 220, 180, 0.06), transparent 65%),
        linear-gradient(180deg, #2c1f15 0%, #3a2718 100%);
    color: #f3e9d7;
    border-top: 0;
    padding: clamp(72px, 8vw, 112px) 0;
}

.er-saint-v1__visit-section a {
    color: #f3e9d7;
    border-bottom-color: rgba(243, 233, 215, 0.4);
}

.er-saint-v1__visit-section a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.er-saint-v1__visit-head {
    max-width: 56ch;
    margin-bottom: clamp(40px, 5vw, 56px);
}

.er-saint-v1__eyebrow--dark {
    color: rgba(243, 233, 215, 0.7);
}

.er-saint-v1__eyebrow--dark .er-saint-v1__eyebrow-dot {
    background-color: #d99064;
}

.er-saint-v1 .er-saint-v1__visit-headline {
    font-family: var(--er-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.012em;
    color: #fbf5e8;
    margin: 14px 0 0;
    max-width: 24ch;
}

.er-saint-v1__visit-lede {
    margin-top: 18px;
    font-family: var(--er-serif);
    font-style: italic;
    font-size: var(--er-fs-deck);
    line-height: 1.6;
    color: rgba(243, 233, 215, 0.82);
    max-width: 62ch;
}

.er-saint-v1__visit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
}

@media (max-width: 1000px) {
    .er-saint-v1__visit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .er-saint-v1__visit-grid {
        grid-template-columns: 1fr;
    }
}

.er-saint-v1__visit-block {
    padding-top: 18px;
    border-top: 1px solid rgba(243, 233, 215, 0.18);
}

.er-saint-v1__visit-block-label {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: #d99064;
    margin-bottom: 12px;
    font-weight: 500;
}

.er-saint-v1__visit-block-text {
    font-family: var(--er-sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(243, 233, 215, 0.88);
    margin: 0;
}

/* --- Related saints and route spread -------------------------------- */

.er-saint-v1__closing-section {
    background: var(--er-paper);
    padding: clamp(72px, 8vw, 112px) 0;
}

/* Kindred and route now stack full-width so neither is trapped in a narrow
   column when the other is absent (Paul has no route panel). */
.er-saint-v1__closing-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 80px);
}

/* A route is the practical next step after the saint's places and relics;
   present it before the related-saints discovery module on every v1 page.
   The template's section registry uses this same order for numbering/subnav. */
.er-saint-v1__closing-stack > .er-saint-v1__path-panel {
    order: -1;
}

.er-saint-v1__closing-title {
    font-family: var(--er-serif);
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
    margin: 0;
    color: var(--er-ink);
}

/* Connected Saints now renders through the shared .er-relation primitive
   (cards mode). Restore the breathing room the old kindred grid carried
   between the panel title and the first card. */
.er-saint-v1__kindred-panel .er-relation--cards {
    margin-top: clamp(24px, 3vw, 36px);
    justify-content: center;
}

/* A single kindred card centered in the full section width reads as a stray,
   orphaned element next to the left-aligned heading above it. Align it back
   under the heading instead. */
.er-saint-v1__kindred-panel .er-relation--cards.er-relation--n1 {
    grid-template-columns: minmax(0, 320px);
    justify-content: start;
}

.er-saint-v1__kindred-panel .er-relation--cards.er-relation--n2 {
    grid-template-columns: repeat(2, minmax(0, 280px));
}

.er-saint-v1__kindred-panel .er-relation--cards.er-relation--n3 {
    grid-template-columns: repeat(3, minmax(0, 270px));
}

.er-saint-v1__kindred-panel .er-relation--cards.er-relation--n4 {
    grid-template-columns: repeat(4, minmax(0, 250px));
}

.er-saint-v1__kindred-panel .er-relation__plate {
    max-height: 300px;
    background: var(--er-ivory);
}

.er-saint-v1__kindred-panel .er-relation__plate img {
    object-fit: contain;
}

.er-saint-v1__kindred-panel .er-relation__note {
    line-height: 1.58;
}

.er-saint-v1__kindred-panel .er-relation--cards .er-relation__meta {
    gap: 8px;
}

/* Sacred Geography is a standalone component. When Saint v1 hosts it, align its
   measure and gutters with the rest of the Saint v1 sections. */
.er-saint-v1 #saint-v1-geography .er-sacred-geo__container {
    max-width: var(--er-saint-v1-container);
    padding: 0 var(--er-space-32);
}

@media (max-width: 640px) {
    .er-saint-v1 #saint-v1-geography .er-sacred-geo__container {
        padding: 0 var(--er-space-24);
    }

    .er-saint-v1__sources-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .er-saint-v1__kindred-panel .er-relation--cards.er-relation--n1,
    .er-saint-v1__kindred-panel .er-relation--cards.er-relation--n2,
    .er-saint-v1__kindred-panel .er-relation--cards.er-relation--n3,
    .er-saint-v1__kindred-panel .er-relation--cards.er-relation--n4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .er-saint-v1 .er-relation--cards .er-relation__meta-row {
        grid-template-columns: minmax(3.75rem, max-content) minmax(0, 1fr);
        gap: 8px;
    }
}

/* Image-forward relationship grid. Card count drives the column count so the
   layout feels composed for 1 (feature), 2 (side by side), 3, or 4 (2x2).
   Superseded by .er-relation; retained pending a deliberate cleanup pass. */
.er-saint-v1__kindred-grid {
    margin-top: clamp(24px, 3vw, 36px);
    display: grid;
    gap: clamp(20px, 2.4vw, 32px);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.er-saint-v1__kindred-grid--n1 {
    grid-template-columns: minmax(0, 560px);
}

.er-saint-v1__kindred-grid--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.er-saint-v1__kindred-grid--n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.er-saint-v1__kindred-grid--n4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.er-saint-v1__kindred-card {
    display: flex;
    flex-direction: column;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
    overflow: hidden;
}

/* The single feature card (n1) lays out as image beside copy. */
.er-saint-v1__kindred-grid--n1 .er-saint-v1__kindred-card {
    flex-direction: row;
}

.er-saint-v1__kindred-card-portrait {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background:
        repeating-linear-gradient(135deg, rgba(31, 27, 20, 0.05) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, #d8d3c5 0%, #aaa48f 100%);
}

.er-saint-v1__kindred-grid--n1 .er-saint-v1__kindred-card-portrait {
    flex: 0 0 44%;
    aspect-ratio: auto;
}

.er-saint-v1__kindred-card-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.er-saint-v1__kindred-card-monogram {
    font-family: var(--er-serif);
    font-size: clamp(2.5rem, 4vw, 3.75rem);
    line-height: 1;
    color: rgba(255, 250, 240, 0.9);
}

.er-saint-v1__kindred-card.is-placeholder .er-saint-v1__kindred-card-portrait {
    background: var(--er-saint-v1-teal-deep);
}

.er-saint-v1__kindred-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(18px, 1.6vw, 24px);
    min-width: 0;
    flex: 1 1 auto;
}

.er-saint-v1__kindred-card-label {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-saint-v1-teal);
}

.er-saint-v1__kindred-card-name {
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    line-height: 1.14;
    margin: 0;
}

.er-saint-v1__kindred-card-name a {
    border-bottom-color: transparent;
}

.er-saint-v1__kindred-card-name a:hover,
.er-saint-v1__kindred-card-name a:focus-visible {
    border-bottom-color: var(--er-clay-deep);
}

.er-saint-v1__kindred-card-desc {
    font-family: var(--er-sans);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--er-ink-2);
}

/* Deliberate labelled metadata rows (Place / Feast) instead of loose all-caps
   tokens ("Rome  FEAST · 29 JUNE"). A quiet mono label column sets the value
   in the body sans, so the card reads as designed, not as token soup. */
.er-saint-v1__kindred-card-foot {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--er-rule-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.er-saint-v1__kindred-card-meta {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
}

.er-saint-v1__kindred-card-meta dt {
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-4);
}

.er-saint-v1__kindred-card-meta dd {
    margin: 0;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor);
    line-height: 1.35;
    color: var(--er-ink-2);
}

.er-saint-v1__path-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.er-saint-v1 .er-saint-v1__path-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--er-r-pill);
    border: 1px solid var(--er-ink);
    background: var(--er-ink);
    color: var(--er-paper);
    font-family: var(--er-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}

.er-saint-v1 .er-saint-v1__path-button::after {
    content: "\2192";
    font-size: 1.05em;
    line-height: 1;
}

.er-saint-v1 .er-saint-v1__path-button:hover,
.er-saint-v1 .er-saint-v1__path-button:focus-visible {
    background: var(--er-clay-deep);
    border-color: var(--er-clay-deep);
    color: var(--er-paper);
}

.er-saint-v1__path-card {
    position: relative;
    overflow: visible;
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
    background: var(--er-paper);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

.er-saint-v1__route-intro {
    padding: 18px 0 0;
    border-top: 1px solid var(--er-ink);
}

.er-saint-v1__route-kicker {
    margin-bottom: 10px;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-clay-deep);
    font-weight: 500;
}

.er-saint-v1__route-intro p {
    font-family: var(--er-serif);
    font-style: italic;
    font-size: var(--er-fs-deck);
    line-height: 1.45;
    color: var(--er-ink-2);
}

.er-saint-v1__path-days {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--er-ink);
}

.er-saint-v1__path-day {
    display: grid;
    grid-template-columns: 98px 1fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--er-rule);
}

.er-saint-v1__path-day:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.er-saint-v1__path-day-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--er-sans);
}

.er-saint-v1__path-day-label span {
    font-family: var(--er-serif);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--er-clay-deep);
    letter-spacing: 0;
}

.er-saint-v1__path-day-label b {
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor);
    letter-spacing: var(--er-saint-v1-tr-eye);
    text-transform: uppercase;
    color: var(--er-ink-3);
    font-weight: 500;
    line-height: 1.25;
}

.er-saint-v1__path-day-copy {
    min-width: 0;
}

.er-saint-v1__path-title {
    font-family: var(--er-serif);
    font-size: var(--er-fs-floor);
    line-height: 1.18;
    letter-spacing: 0;
    margin: 0;
}

.er-saint-v1__path-title a {
    border-bottom-color: transparent;
}

.er-saint-v1__path-title a:hover,
.er-saint-v1__path-title a:focus-visible {
    border-bottom-color: var(--er-clay-deep);
}

.er-saint-v1__path-note {
    margin-top: 8px;
    font-family: var(--er-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--er-ink-2);
    max-width: 62ch;
}

.er-saint-v1__path-loc {
    margin-top: 5px;
    font-family: var(--er-mono);
    font-size: var(--er-saint-v1-fs-meta-sm);
    letter-spacing: 0.04em;
    color: var(--er-ink-3);
}

@media (max-width: 980px) {
    .er-saint-v1__kindred-grid--n3,
    .er-saint-v1__kindred-grid--n4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .er-saint-v1__path-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .er-saint-v1 .er-saint-v1__path-button {
        width: 100%;
    }
    .er-saint-v1__kindred-grid,
    .er-saint-v1__kindred-grid--n1,
    .er-saint-v1__kindred-grid--n2,
    .er-saint-v1__kindred-grid--n3,
    .er-saint-v1__kindred-grid--n4 {
        grid-template-columns: 1fr;
    }
    .er-saint-v1__kindred-grid--n1 .er-saint-v1__kindred-card {
        flex-direction: column;
    }
    .er-saint-v1__kindred-grid--n1 .er-saint-v1__kindred-card-portrait {
        flex-basis: auto;
        aspect-ratio: 16 / 10;
    }
    .er-saint-v1__path-day {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .er-saint-v1__path-card {
        grid-template-columns: 1fr;
    }
    .er-saint-v1__path-day-label {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }
}

/* --- FEAST & DEVOTION ------------------------------------------------- */
.er-saint-v1__feast-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.er-saint-v1__feast-note {
    margin-top: 14px;
    padding-left: 16px;
    border-left: 2px solid var(--er-saint-v1-teal);
    font-family: var(--er-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--er-ink-2);
}

.er-saint-v1__feast-practices {
    padding: 22px 24px;
    background: var(--er-saint-v1-teal-soft);
    border-radius: var(--er-r-md);
}

.er-saint-v1__feast-practices-label {
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--er-saint-v1-teal);
    margin-bottom: 12px;
}

.er-saint-v1__feast-practices-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.er-saint-v1__feast-practices-list li {
    position: relative;
    padding-left: 18px;
    font-family: var(--er-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--er-ink-2);
}

.er-saint-v1__feast-practices-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--er-saint-v1-teal);
}

@media (max-width: 768px) {
    .er-saint-v1__feast-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}