/* -----------------------------------------------------------------------------
   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-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:   12.5px;
    --er-saint-v1-fs-meta-sm:12px;
    --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-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 auto;
}

.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: 22ch;
}

.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: 14px;
}

/* --- 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__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    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__breadcrumb a {
    color: var(--er-ink-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

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

.er-saint-v1__breadcrumb-current {
    color: var(--er-ink);
}

.er-saint-v1__breadcrumb-sep {
    color: var(--er-ink-4);
    opacity: 0.6;
}

.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: 46ch;
}

/* 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: 1.0625rem;
    line-height: 1.25;
    color: var(--er-ink);
}

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

/* --- SUB-NAV --------------------------------------------------------- */

.er-saint-v1__subnav {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--er-paper);
    border-top: 1px solid var(--er-ink);
    border-bottom: 1px solid var(--er-rule);
}

/* A real navigation rail: a single horizontal row that never wraps a lone
   item ("Notes & Sources") onto a broken second line. If the labels exceed the
   width they scroll horizontally (scrollbar hidden) rather than stacking. */
.er-saint-v1__subnav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.er-saint-v1__subnav-list::-webkit-scrollbar { display: none; }

.er-saint-v1__subnav-list li {
    padding-right: 0;
    flex: 0 0 auto;
}

.er-saint-v1__subnav-list a {
    display: inline-block;
    white-space: nowrap;
    padding: 16px 22px 14px;
    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);
    border-bottom: 2px solid transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

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

/* --- 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: 24px;
    align-items: start;
    margin: 8px 0 22px;
    max-width: 1000px;
}

@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: 32ch;
    overflow-wrap: break-word;
}

.er-saint-v1__quote-source {
    margin-left: 104px;
    padding-top: 16px;
    border-top: 1px solid var(--er-rule);
    max-width: 42ch;
    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: 760px;
    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: 46ch;
}

.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: 13.5px;
    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: 13.5px;
    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(260px, 320px) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    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: 13.5px;
    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;
}

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

.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: 0.875rem;
    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: 1.0625rem;
    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: 440px;
    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, 1fr));
    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;
    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 / 10;
    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: 1.375rem;
    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;
}

.er-saint-v1__relic-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    margin-bottom: clamp(32px, 4vw, 56px);
}

@media (max-width: 800px) {
    .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 > .er-confidence {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--er-rule);
}

/* --- 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 {
    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: 13.5px;
    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;
}

/* 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: 13px;
    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: 13.5px;
    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;
    }
    .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;
    }
}

/* --- 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: baseline;
    gap: 10px;
    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__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, 1fr));
}

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

@media (max-width: 900px) {
    .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: 1.0625rem;
    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);
}

.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);
}

/* 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). */
.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: 1.375rem;
    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: 13.5px;
    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: 1.15rem;
    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: 12.5px;
    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: 1.25rem;
    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;
    }
}

/* --- Subnav: keep horizontally scrollable on small screens so all of the
   conditional sections stay reachable instead of wrapping into a stack. */
@media (max-width: 720px) {
    .er-saint-v1__subnav-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .er-saint-v1__subnav-list::-webkit-scrollbar { display: none; }
    .er-saint-v1__subnav-list a {
        white-space: nowrap;
        padding: 14px 16px 12px;
    }
}

@media (max-width: 480px) {
    .er-saint-v1__subnav-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
        scrollbar-width: auto;
    }
    .er-saint-v1__subnav-list::-webkit-scrollbar {
        display: initial;
    }
    .er-saint-v1__subnav-list a {
        display: block;
        white-space: normal;
        line-height: 1.35;
        padding: 12px 10px 10px;
        overflow-wrap: anywhere;
    }
}