/* Patron Saints — scoped editorial area (.er-patron-v1).
 *
 * Serves both /patron-saints/ and /patron-saints/{slug}/. Everything is
 * namespaced under .er-patron-v1 so it cannot leak into saint pages,
 * destination pages, or the global shell. Consumes the --er-* foundation tier
 * only: no local palette, no new token block, no legacy page CSS.
 *
 * Type never drops below --er-fs-floor (14px) except image credits, which are
 * owned by the shared photo-credits component and are not restyled here.
 *
 * Bricks core sets html{font-size:62.5%} (10px root), so every size here is in
 * absolute px, matching the token file's own rule.
 */

.er-patron-v1 {
    background: var(--er-paper);
    color: var(--er-ink);
    font-family: var(--er-sans);
    font-size: var(--er-fs-prose, 16px);
    line-height: var(--er-lh-body, 1.6);
}

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

.er-patron-v1 a { color: inherit; text-decoration: none; }
.er-patron-v1 ul,
.er-patron-v1 ol { list-style: none; margin: 0; padding: 0; }
.er-patron-v1 img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Every photographic slot is a sized box with the photograph laid into it, so
   a portrait original and a landscape original crop to the same card. */
.er-patron-v1 .erp-need-media,
.er-patron-v1 .erp-saint-media,
.er-patron-v1 .erp-place-media,
.er-patron-v1 .erp-start-media,
.er-patronage-v1 .erp-why-media,
.er-patronage-v1 .erp-visit-media,
.er-patronage-v1 .erp-plan-media,
.er-patronage-v1 .erp-related-media,
.er-patronage-v1 .erp-answer-figure,
.er-patronage-v1 .erp-phero-saint-figure {
    position: relative;
    overflow: hidden;
}
.er-patron-v1 .erp-need-media > img,
.er-patron-v1 .erp-saint-media > img,
.er-patron-v1 .erp-place-media > img,
.er-patron-v1 .erp-start-media > img,
.er-patronage-v1 .erp-why-media > img,
.er-patronage-v1 .erp-visit-media > img,
.er-patronage-v1 .erp-plan-media > img,
.er-patronage-v1 .erp-related-media > img,
.er-patronage-v1 .erp-answer-figure > img,
.er-patronage-v1 .erp-phero-saint-figure > img {
    position: absolute;
    inset: 0;
}
.er-patron-v1 :focus-visible { outline: 2px solid var(--er-clay); outline-offset: 3px; }

/* ---- Shared atoms ----------------------------------------------------- */

.er-patron-v1 .erp-sec {
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px 40px 8px;
}

.er-patron-v1 .erp-band {
    background: var(--er-limestone);
    /* A quiet paper/map texture, not an image dependency. */
    background-image:
        radial-gradient(circle at 18% 32%, rgba(110, 114, 75, 0.05) 0 38%, transparent 39%),
        radial-gradient(circle at 78% 68%, rgba(164, 130, 63, 0.05) 0 32%, transparent 33%);
    margin-top: 34px;
}

.er-patron-v1 .erp-h2 {
    margin: 0;
    font-family: var(--er-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: var(--er-lh-heading);
    letter-spacing: -0.01em;
    color: var(--er-ink);
}

.er-patron-v1 .erp-kicker {
    margin: 0 0 6px;
    font-family: var(--er-mono);
    font-size: var(--er-fs-kicker, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-patron-v1 .erp-eyebrow {
    margin: 0 0 14px;
    font-family: var(--er-mono);
    font-size: var(--er-fs-kicker, 14px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(251, 247, 236, 0.82);
}

.er-patron-v1 .erp-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.er-patron-v1 .erp-more {
    flex: none;
    font-family: var(--er-mono);
    font-size: var(--er-fs-ui, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--er-ink-3);
    white-space: nowrap;
    transition: color var(--transition-fast, .3s ease);
}
.er-patron-v1 .erp-more:hover { color: var(--er-clay-deep); }

.er-patron-v1 .erp-credits { max-width: 1360px; margin: 4px auto 0; padding: 0 40px 24px; }

/* ---- Landing hero ----------------------------------------------------- */

.er-patron-v1 .erp-hero {
    position: relative;
    min-height: 552px;
    display: flex;
    align-items: stretch;
    /* No overflow clip here: the search resolution panel hangs below the field
       and out of the hero, and a clip on this element would cut it off. The
       hero photograph is contained by .erp-hero-media instead, which is what
       actually needed clipping. */
}

.er-patron-v1 .erp-hero-media,
.er-patron-v1 .erp-phero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.er-patron-v1 .erp-hero-media img,
.er-patron-v1 .erp-phero-media img { object-position: center 42%; }

/* Readability without flattening the photograph: a strong left wedge for the
   copy column, plus a light overall veil. */
.er-patron-v1 .erp-hero-scrim,
.er-patron-v1 .erp-phero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 16, 11, .82) 0%, rgba(20, 16, 11, .66) 34%, rgba(20, 16, 11, .16) 62%, rgba(20, 16, 11, .06) 100%),
        linear-gradient(180deg, rgba(20, 16, 11, .34) 0%, rgba(20, 16, 11, 0) 34%, rgba(20, 16, 11, .30) 100%);
}

.er-patron-v1 .erp-hero-inner {
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 58px 40px 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    align-items: start;
    color: var(--er-paper);
}

.er-patron-v1 .erp-hero-copy { max-width: 712px; align-self: center; }

.er-patron-v1 .erp-hero-h1 {
    margin: 0;
    font-family: var(--er-serif);
    font-weight: 400;
    font-size: clamp(38px, 4.6vw, 63px);
    line-height: 1.06;
    letter-spacing: -0.018em;
    color: var(--er-paper);
    text-shadow: 0 1px 24px rgba(20, 16, 11, .28);
}

.er-patron-v1 .erp-hero-lede {
    margin: 20px 0 0;
    max-width: 470px;
    font-size: var(--er-fs-deck-lg, 17px);
    line-height: 1.55;
    color: rgba(251, 247, 236, .92);
}

.er-patron-v1 .erp-hero-aside {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    max-width: 250px;
    margin: 0;
    font-family: var(--er-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    text-align: right;
    color: rgba(251, 247, 236, .95);
    text-shadow: 0 1px 18px rgba(20, 16, 11, .85);
}

.er-patron-v1 .erp-hero-rule {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--er-mono);
    font-size: var(--er-fs-ui, 14px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(251, 247, 236, .86);
}
.er-patron-v1 .erp-hero-dash { width: 34px; height: 1px; background: rgba(251, 247, 236, .7); }

.er-patron-v1 .erp-hero-script {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0;
    font-family: var(--er-serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.35;
    text-align: right;
    color: rgba(251, 247, 236, .95);
    text-shadow: 0 1px 18px rgba(20, 16, 11, .8);
}

/* ---- Hero search ------------------------------------------------------ */

.er-patron-v1 .erp-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 572px);
    margin-top: 30px;
    padding: 7px 7px 7px 22px;
    background: var(--er-paper);
    border-radius: var(--er-r-pill);
    box-shadow: 0 18px 44px -26px rgba(20, 16, 11, .55);
}

.er-patron-v1 .erp-search-icon { flex: none; width: 20px; height: 20px; color: var(--er-ink-3); }
.er-patron-v1 .erp-search-icon svg { width: 100%; height: 100%; }

.er-patron-v1 .erp-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--er-sans);
    font-size: 16px;
    color: var(--er-ink);
    padding: 12px 0;
}
.er-patron-v1 .erp-search-input::placeholder { color: var(--er-ink-4); }
.er-patron-v1 .erp-search-input:focus { outline: none; }
.er-patron-v1 .erp-search:focus-within { box-shadow: 0 0 0 2px var(--er-clay), 0 18px 44px -26px rgba(20, 16, 11, .55); }

.er-patron-v1 .erp-search-go {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--er-clay);
    color: var(--er-paper);
    cursor: pointer;
    transition: background var(--transition-fast, .3s ease);
}
.er-patron-v1 .erp-search-go:hover { background: var(--er-clay-deep); }
.er-patron-v1 .erp-search-go svg { width: 20px; height: 20px; }

/* ---- Search resolution panel ------------------------------------------ */
/* The panel shows how Eternal Roam read the query before the visitor commits
   to it. Same paper, type and clay accent as the field it hangs from; nothing
   here borrows a SaaS command-palette idiom. */

.er-patron-v1 .erp-search-wrap { width: min(100%, 572px); }
.er-patron-v1 .erp-search-wrap .erp-search { margin-top: 30px; width: 100%; }

.er-patron-v1 .erp-search-note {
    margin: 12px 0 0;
    padding-left: 22px;
    font-family: var(--er-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--er-paper);
    opacity: .74;
}

.er-patron-v1 .erp-search-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--er-paper);
    border-radius: 18px;
    box-shadow: 0 26px 60px -28px rgba(20, 16, 11, .62);
    overflow: hidden;
    text-align: left;
}

.er-patron-v1 .erp-sp-head {
    margin: 0;
    padding: 14px 22px 10px;
    font-family: var(--er-sans);
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-patron-v1 .erp-sp-list { margin: 0; padding: 0; list-style: none; }

.er-patron-v1 .erp-sp-item {
    display: block;
    padding: 11px 22px;
    cursor: pointer;
    border-top: 1px solid var(--er-rule);
}
.er-patron-v1 .erp-sp-item.is-active { background: rgba(20, 16, 11, .05); }

.er-patron-v1 .erp-sp-label {
    display: block;
    font-family: var(--er-serif);
    font-size: 17px;
    line-height: 1.3;
    color: var(--er-ink);
}

.er-patron-v1 .erp-sp-sub {
    display: block;
    margin-top: 3px;
    font-family: var(--er-sans);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--er-ink-3);
}

.er-patron-v1 .erp-sp-flag {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: var(--er-r-pill);
    background: rgba(20, 16, 11, .06);
    font-family: var(--er-sans);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--er-ink-3);
}

.er-patron-v1 .erp-sp-foot {
    margin: 0;
    padding: 10px 22px 14px;
    border-top: 1px solid var(--er-rule);
    font-family: var(--er-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--er-ink-4);
}

@media (max-width: 640px) {
    .er-patron-v1 .erp-search-panel { border-radius: 14px; }
    .er-patron-v1 .erp-sp-item { padding: 13px 18px; }
    .er-patron-v1 .erp-sp-head,
    .er-patron-v1 .erp-sp-foot { padding-left: 18px; padding-right: 18px; }
    .er-patron-v1 .erp-search-note { padding-left: 18px; }
}

/* ---- Crisis support state --------------------------------------------- */
/* Same panel, same paper, same type. What marks it as different is a single
   clay rule down the left edge and more room to breathe — not colour, not an
   icon, not a border that shouts. Nothing here is red, nothing is a warning
   triangle, and nothing looks like an error. A person reading this is already
   alarmed; the page should not add to it. The one deliberate emphasis is the
   heading, set in the serif at reading size rather than as a UI label. */

.er-patron-v1 .erp-cs {
    padding: 20px 24px 18px;
    border-left: 3px solid var(--er-clay);
}

.er-patron-v1 .erp-cs-eyebrow {
    margin: 0 0 8px;
    font-family: var(--er-sans);
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--er-clay-deep);
}

.er-patron-v1 .erp-cs-head {
    margin: 0;
    font-family: var(--er-serif);
    font-size: 20px;
    line-height: 1.3;
    color: var(--er-ink);
}

.er-patron-v1 .erp-cs-urgent {
    margin: 8px 0 0;
    font-family: var(--er-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--er-ink-2);
}

.er-patron-v1 .erp-cs-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--er-rule);
}

.er-patron-v1 .erp-cs-res {
    padding: 11px 0;
    border-bottom: 1px solid var(--er-rule-soft);
}
.er-patron-v1 .erp-cs-res:last-child { border-bottom: 0; }

/* A resource with a number to call is a link; one that says "call your local
   emergency number" is not, because there is no number this site can dial for
   someone whose country it does not know. The two are set alike so the list
   reads as one list, and only the underline distinguishes them. */
.er-patron-v1 .erp-cs-link,
.er-patron-v1 .erp-cs-plain {
    display: block;
    font-family: var(--er-sans);
    font-size: 15px;
    line-height: 1.45;
    color: var(--er-ink);
}

.er-patron-v1 .erp-cs-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--er-clay);
    text-decoration-thickness: 1px;
}
.er-patron-v1 .erp-cs-link:hover,
.er-patron-v1 .erp-cs-link:focus-visible { color: var(--er-clay-deep); }

.er-patron-v1 .erp-cs-note {
    display: block;
    margin-top: 3px;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor, 14px);
    line-height: 1.5;
    color: var(--er-ink-3);
}

.er-patron-v1 .erp-cs-spiritual {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--er-rule);
    font-family: var(--er-serif);
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.55;
    color: var(--er-ink-2);
}

.er-patron-v1 .erp-cs-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 16px;
}

.er-patron-v1 .erp-cs-browse {
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor, 14px);
    color: var(--er-ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.er-patron-v1 .erp-cs-browse:hover,
.er-patron-v1 .erp-cs-browse:focus-visible { color: var(--er-ink); }

.er-patron-v1 .erp-cs-dismiss {
    margin-left: auto;
    padding: 5px 14px;
    border: 1px solid var(--er-rule-hair);
    border-radius: var(--er-r-pill);
    background: transparent;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor, 14px);
    color: var(--er-ink-3);
    cursor: pointer;
}
.er-patron-v1 .erp-cs-dismiss:hover,
.er-patron-v1 .erp-cs-dismiss:focus-visible {
    border-color: var(--er-ink-4);
    color: var(--er-ink);
}

.er-patron-v1 .erp-cs-privacy {
    margin: 12px 0 0;
    font-family: var(--er-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--er-ink-4);
}

@media (max-width: 640px) {
    .er-patron-v1 .erp-cs { padding: 18px 18px 16px; }
    .er-patron-v1 .erp-cs-head { font-size: 19px; }
    /* The dismiss control keeps its own line rather than crowding the browse
       link at a width where both would wrap mid-phrase. */
    .er-patron-v1 .erp-cs-dismiss { margin-left: 0; }
}

/* ---- Browse by Need --------------------------------------------------- */

.er-patron-v1 .erp-need-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 12px;
}

.er-patron-v1 .erp-need-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), transform var(--transition-fast, .3s ease);
}
.er-patron-v1 .erp-need-link:hover { border-color: var(--er-stone); transform: translateY(-2px); }

.er-patron-v1 .erp-need-media {
    display: block;
    aspect-ratio: 5 / 4;
    /* The comp's tiles are tight detail crops, not wide destination photos.
       Each tile below sets its own crop window (--erp-pos, --erp-zoom) and a
       tonal lift (--erp-lift) derived from measuring the rendered luminance of
       all nine tiles. The sources run from a night crowd to a white sky, so
       crop alone measured 21-247 and could only reach 39-246; the lift closes
       the rest. It is a presentation layer, applied by the same rule to every
       tile, and it never alters a source file. */
    --erp-pos: 50% 50%;
    --erp-zoom: 1;
    --erp-lift: 1;
    filter: saturate(.9) contrast(1.02) brightness(var(--erp-lift));
}

.er-patron-v1 .erp-need-media > img {
    object-position: var(--erp-pos);
    transform: scale(var(--erp-zoom));
    transform-origin: var(--erp-pos);
}

.er-patron-v1 .erp-need[data-need="lost-things"]       .erp-need-media { --erp-pos: 25% 100%; --erp-zoom: 1.25; --erp-lift: 1.02; }
.er-patron-v1 .erp-need[data-need="impossible-causes"] .erp-need-media { --erp-pos: 75% 100%; --erp-zoom: 1.8;  --erp-lift: 1.34; }
.er-patron-v1 .erp-need[data-need="travelers"]         .erp-need-media { --erp-pos: 50% 40%;                    --erp-lift: 0.86; }
.er-patron-v1 .erp-need[data-need="students"]          .erp-need-media { --erp-pos: 75% 30%;                    --erp-lift: 1;    }
.er-patron-v1 .erp-need[data-need="families"]          .erp-need-media { --erp-pos: 50% 100%; --erp-zoom: 1.3;  --erp-lift: 0.8;  }
.er-patron-v1 .erp-need[data-need="illness-and-healing"] .erp-need-media { --erp-pos: 50% 55%; --erp-zoom: 1.2; --erp-lift: 1.38; }
.er-patron-v1 .erp-need[data-need="workers"]           .erp-need-media { --erp-pos: 100% 75%; --erp-zoom: 1.6;  --erp-lift: 1.2;  }
.er-patron-v1 .erp-need[data-need="musicians"]         .erp-need-media { --erp-pos: 0% 50%;   --erp-zoom: 1.6;  --erp-lift: 1.02; }
.er-patron-v1 .erp-need[data-need="protection"]        .erp-need-media { --erp-pos: 50% 60%;  --erp-zoom: 1.15; --erp-lift: 0.98; }

.er-patron-v1 .erp-need-label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 11px 10px 13px;
    font-size: var(--er-fs-floor, 14px);
    line-height: 1.3;
    color: var(--er-ink-2);
}

/* ---- Popular Patron Saints -------------------------------------------- */

.er-patron-v1 .erp-saint-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.er-patron-v1 .erp-saint-link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patron-v1 .erp-saint-link:hover { border-color: var(--er-stone); box-shadow: var(--er-shadow-card); }

.er-patron-v1 .erp-saint-media { display: block; aspect-ratio: var(--er-ratio-saint, 4 / 5); }
.er-patron-v1 .erp-saint-media img { object-position: center 22%; }

.er-patron-v1 .erp-saint-body { display: block; padding: 12px 14px 34px; }
.er-patron-v1 .erp-saint-name { display: block; font-family: var(--er-serif); font-size: 17px; line-height: 1.25; color: var(--er-ink); }
.er-patron-v1 .erp-saint-cue { display: block; margin-top: 4px; font-size: var(--er-fs-floor, 14px); color: var(--er-ink-3); }

.er-patron-v1 .erp-saint-go,
.er-patron-v1 .erp-place-go,
.er-patron-v1 .erp-visit-go,
.er-patron-v1 .erp-plan-go,
.er-patron-v1 .erp-related-go,
.er-patron-v1 .erp-start-go {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 18px;
    height: 18px;
    color: var(--er-ink-3);
}
.er-patron-v1 .erp-saint-go svg,
.er-patron-v1 .erp-place-go svg,
.er-patron-v1 .erp-visit-go svg,
.er-patron-v1 .erp-plan-go svg,
.er-patron-v1 .erp-related-go svg,
.er-patron-v1 .erp-start-go svg { width: 100%; height: 100%; }

/* ---- From question to pilgrimage -------------------------------------- */

.er-patron-v1 .erp-path-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 46px 40px 50px;
    text-align: center;
}
.er-patron-v1 .erp-path-h { font-size: clamp(28px, 2.8vw, 36px); }
.er-patron-v1 .erp-path-sub {
    margin: 8px 0 0;
    font-family: var(--er-mono);
    font-size: var(--er-fs-ui, 14px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-patron-v1 .erp-path-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 40px;
}
.er-patron-v1 .erp-step { position: relative; padding: 0 10px; }

.er-patron-v1 .erp-step-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--er-paper);
    color: var(--er-ink-2);
    box-shadow: inset 0 0 0 1px var(--er-rule-soft);
}
.er-patron-v1 .erp-step-icon svg { width: 34px; height: 34px; }

.er-patron-v1 .erp-step-title { margin: 0; font-family: var(--er-serif); font-size: 19px; color: var(--er-ink); }
.er-patron-v1 .erp-step-body { margin: 6px auto 0; max-width: 210px; font-size: var(--er-fs-floor, 14px); line-height: 1.5; color: var(--er-ink-3); }

.er-patron-v1 .erp-step-arrow {
    position: absolute;
    top: 40px;
    right: -8px;
    font-size: 20px;
    color: var(--er-ink-4);
}

/* ---- Featured Places -------------------------------------------------- */

.er-patron-v1 .erp-place-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.er-patron-v1 .erp-place-link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patron-v1 .erp-place-link:hover { border-color: var(--er-stone); box-shadow: var(--er-shadow-card); }

.er-patron-v1 .erp-place-media { display: block; aspect-ratio: 16 / 9; }
.er-patron-v1 .erp-place-body { display: block; padding: 12px 14px 30px; }
.er-patron-v1 .erp-place-name { display: block; font-family: var(--er-serif); font-size: 17px; color: var(--er-ink); }
.er-patron-v1 .erp-place-cue { display: block; margin-top: 3px; font-size: var(--er-fs-floor, 14px); color: var(--er-ink-3); }

/* ---- Start Here ------------------------------------------------------- */

.er-patron-v1 .erp-start { padding-bottom: 20px; }
.er-patron-v1 .erp-start .erp-h2 { margin-bottom: 20px; }

.er-patron-v1 .erp-start-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.er-patron-v1 .erp-start-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    min-height: 182px;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patron-v1 .erp-start-link:hover { border-color: var(--er-stone); box-shadow: var(--er-shadow-card); }

.er-patron-v1 .erp-start-copy { display: block; padding: 20px 18px 34px 20px; }
.er-patron-v1 .erp-start-title { display: block; font-family: var(--er-serif); font-size: 21px; line-height: 1.22; color: var(--er-ink); }
.er-patron-v1 .erp-start-body { display: block; margin-top: 10px; font-size: var(--er-fs-floor, 14px); line-height: 1.5; color: var(--er-ink-3); }
.er-patron-v1 .erp-start-media { display: block; }
.er-patron-v1 .erp-start-go { right: auto; left: 20px; bottom: 14px; }

/* ======================================================================
   PATRONAGE DETAIL
   ====================================================================== */

/* One hero height across all four patronage pages: intro length differed by up
   to 48px between them. */
.er-patronage-v1 .erp-phero {
    position: relative;
    min-height: 588px;
    display: flex;
    overflow: hidden;
}

.er-patronage-v1 .erp-phero-inner {
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 52px 40px 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: center;
    color: var(--er-paper);
}

.er-patronage-v1 .erp-phero-copy { max-width: 620px; }

.er-patronage-v1 .erp-phero-h1 {
    margin: 0;
    max-width: 16ch;
    font-family: var(--er-serif);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: var(--er-paper);
    text-shadow: 0 1px 24px rgba(20, 16, 11, .28);
}

.er-patronage-v1 .erp-phero-saint {
    margin: 14px 0 0;
    font-family: var(--er-serif);
    font-size: clamp(20px, 1.8vw, 25px);
    color: rgba(251, 247, 236, .94);
}

.er-patronage-v1 .erp-phero-intro {
    margin: 16px 0 0;
    max-width: 480px;
    font-size: var(--er-fs-deck, 16px);
    line-height: 1.58;
    color: rgba(251, 247, 236, .9);
}

.er-patronage-v1 .erp-phero-quote { margin: 22px 0 0; max-width: 440px; }
.er-patronage-v1 .erp-phero-quote blockquote {
    margin: 0;
    font-family: var(--er-serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
    color: rgba(251, 247, 236, .94);
}
.er-patronage-v1 .erp-phero-quote figcaption {
    margin-top: 8px;
    max-width: 42ch;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor, 14px);
    letter-spacing: 0.01em;
    line-height: 1.45;
    text-align: left;
    color: rgba(251, 247, 236, .78);
}
.er-patronage-v1 .erp-phero-quote blockquote { text-align: left; }

/* Seated in the hero rather than floating over it: a wide soft cast instead of
   a card drop shadow, and a hairline rim in the same ivory as the type. */
.er-patronage-v1 .erp-phero-saint-figure {
    margin: 0;
    align-self: center;
    aspect-ratio: var(--er-ratio-saint, 4 / 5);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(251, 247, 236, .16),
        0 48px 90px -46px rgba(20, 16, 11, .92),
        0 8px 30px -18px rgba(20, 16, 11, .5);
}
.er-patronage-v1 .erp-phero-saint-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 16, 11, 0) 62%, rgba(20, 16, 11, .22) 100%);
    pointer-events: none;
}

/* ---- Quick facts bar --------------------------------------------------- */

.er-patronage-v1 .erp-facts-sec { padding-top: 26px; }

.er-patronage-v1 .erp-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--er-ivory);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
}

/* A one-line and a two-line fact value must not change the bar's height. */
.er-patronage-v1 .erp-fact {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 138px;
    padding: 20px 22px;
    border-left: 1px solid var(--er-rule-soft);
}
.er-patronage-v1 .erp-fact:first-child { border-left: 0; }

.er-patronage-v1 .erp-fact-icon { flex: none; width: 30px; height: 30px; color: var(--er-clay); }
.er-patronage-v1 .erp-fact-icon svg { width: 100%; height: 100%; }

.er-patronage-v1 .erp-fact-label {
    display: block;
    font-family: var(--er-mono);
    font-size: var(--er-fs-floor, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--er-ink-3);
}
.er-patronage-v1 .erp-fact-value {
    display: block;
    margin-top: 3px;
    font-family: var(--er-serif);
    font-size: 18px;
    line-height: 1.3;
    color: var(--er-ink);
}
.er-patronage-v1 .erp-fact-value--link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--er-stone); }
.er-patronage-v1 .erp-fact-value--link:hover { color: var(--er-clay-deep); }

/* ---- Why cards --------------------------------------------------------- */

.er-patronage-v1 .erp-why .erp-h2 { margin-bottom: 20px; }

.er-patronage-v1 .erp-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.er-patronage-v1 .erp-why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: visible;
}

.er-patronage-v1 .erp-why-media {
    display: block;
    aspect-ratio: 2 / 1;
    border-radius: var(--er-r-sm) var(--er-r-sm) 0 0;
    overflow: hidden;
}

.er-patronage-v1 .erp-why-media { overflow: visible; }
.er-patronage-v1 .erp-why-media > img { border-radius: var(--er-r-sm) var(--er-r-sm) 0 0; }

.er-patronage-v1 .erp-why-badge {
    position: absolute;
    left: 16px;
    bottom: -26px;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--er-ivory);
    color: var(--er-clay);
    box-shadow: inset 0 0 0 1px var(--er-rule-soft);
}
.er-patronage-v1 .erp-why-badge svg { width: 24px; height: 24px; }

.er-patronage-v1 .erp-why-body { display: block; min-height: 190px; padding: 34px 16px 18px; }
.er-patronage-v1 .erp-why-title { display: block; font-family: var(--er-serif); font-size: 18px; line-height: 1.25; color: var(--er-ink); }
.er-patronage-v1 .erp-why-text { display: block; margin-top: 8px; font-size: var(--er-fs-floor, 14px); line-height: 1.5; color: var(--er-ink-3); }

/* ---- Start with the answer --------------------------------------------- */

.er-patronage-v1 .erp-answer-inner { max-width: 1360px; margin: 0 auto; padding: 54px 40px 58px; }
.er-patronage-v1 .erp-answer-q {
    margin: 10px 0 32px;
    font-family: var(--er-mono);
    font-size: var(--er-fs-ui, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-patronage-v1 .erp-answer-grid {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr) 330px;
    gap: 46px;
    align-items: start;
}

.er-patronage-v1 .erp-answer-figure {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--er-r-sm);
    overflow: hidden;
}

/* The prose ran to roughly 84 characters a line, which reads as a compressed
   article rather than an editorial page. Narrowed to the house measure and
   stepped up a size, with more air between paragraphs. */
.er-patronage-v1 .erp-answer-prose {
    max-width: 66ch;
    font-size: var(--er-fs-prose-lg, 17px);
    line-height: 1.72;
    color: var(--er-ink-2);
}
.er-patronage-v1 .erp-answer-prose p { margin: 0 0 20px; }
.er-patronage-v1 .erp-answer-lede {
    font-family: var(--er-serif);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 24px;
    color: var(--er-ink);
}

.er-patronage-v1 .erp-answer-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.er-patronage-v1 .erp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--er-r-pill);
    font-size: var(--er-fs-ui, 14px);
    letter-spacing: 0.02em;
    transition: background var(--transition-fast, .3s ease), color var(--transition-fast, .3s ease);
}
.er-patronage-v1 .erp-btn--primary { background: var(--er-olive); color: var(--er-paper); }
.er-patronage-v1 .erp-btn--primary:hover { background: var(--er-ink-2); }
.er-patronage-v1 .erp-btn--quiet { color: var(--er-ink-2); box-shadow: inset 0 0 0 1px var(--er-rule); }
.er-patronage-v1 .erp-btn--quiet:hover { color: var(--er-clay-deep); }

.er-patronage-v1 .erp-answer-quote { margin: 0; padding-left: 30px; border-left: 1px solid var(--er-rule); }
.er-patronage-v1 .erp-answer-quote blockquote {
    margin: 0;
    font-family: var(--er-serif);
    font-style: italic;
    font-size: 21px;
    line-height: 1.42;
    color: var(--er-ink-2);
}
.er-patronage-v1 .erp-answer-quote figcaption {
    margin-top: 14px;
    font-family: var(--er-sans);
    font-size: var(--er-fs-floor, 14px);
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-align: left;
    color: var(--er-ink-3);
}
.er-patronage-v1 .erp-answer-quote blockquote { text-align: left; }

/* ---- Visit ------------------------------------------------------------- */

.er-patronage-v1 .erp-visit-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.er-patronage-v1 .erp-visit-link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patronage-v1 .erp-visit-link:hover { border-color: var(--er-stone); box-shadow: var(--er-shadow-card); }

.er-patronage-v1 .erp-visit-media { display: block; aspect-ratio: 16 / 9; }
.er-patronage-v1 .erp-visit-body { display: block; padding: 14px 16px 34px; }
.er-patronage-v1 .erp-visit-title { display: block; font-family: var(--er-serif); font-size: 19px; color: var(--er-ink); }
.er-patronage-v1 .erp-visit-text { display: block; margin-top: 6px; font-size: var(--er-fs-floor, 14px); line-height: 1.5; color: var(--er-ink-3); }

/* ---- Plan a pilgrimage -------------------------------------------------- */

.er-patronage-v1 .erp-plan-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.er-patronage-v1 .erp-plan-link {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 136px;
    height: 100%;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patronage-v1 .erp-plan-link:hover { border-color: var(--er-stone); box-shadow: var(--er-shadow-card); }

.er-patronage-v1 .erp-plan-media { position: relative; display: block; }
.er-patronage-v1 .erp-plan-num {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--er-clay);
    color: var(--er-paper);
    font-family: var(--er-serif);
    font-size: 15px;
}

.er-patronage-v1 .erp-plan-body { display: block; padding: 14px 16px 30px; }
.er-patronage-v1 .erp-plan-title { display: block; font-family: var(--er-serif); font-size: 17px; line-height: 1.25; color: var(--er-ink); }
.er-patronage-v1 .erp-plan-text { display: block; margin-top: 6px; font-size: var(--er-fs-floor, 14px); line-height: 1.5; color: var(--er-ink-3); }

/* ---- Related saints ----------------------------------------------------- */

.er-patronage-v1 .erp-related-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.er-patronage-v1 .erp-related-link {
    position: relative;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    min-height: 126px;
    height: 100%;
    background: var(--er-paper);
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patronage-v1 .erp-related-link:hover { border-color: var(--er-stone); box-shadow: var(--er-shadow-card); }

.er-patronage-v1 .erp-related-media { display: block; }
.er-patronage-v1 .erp-related-media img { object-position: center 20%; }
.er-patronage-v1 .erp-related-body { display: block; padding: 16px 16px 30px; }
.er-patronage-v1 .erp-related-name { display: block; font-family: var(--er-serif); font-size: 17px; line-height: 1.25; color: var(--er-ink); }
.er-patronage-v1 .erp-related-cue { display: block; margin-top: 5px; font-size: var(--er-fs-floor, 14px); line-height: 1.45; color: var(--er-ink-3); }

/* ======================================================================
   RESPONSIVE
   Hierarchy is preserved rather than stacked: the hero stays photographic,
   Browse by Need becomes a tactile horizontal scroll, and the editorial rows
   step down in column count instead of collapsing to one long list.
   ====================================================================== */

@media (max-width: 1180px) {
    .er-patron-v1 .erp-need-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .er-patron-v1 .erp-saint-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .er-patronage-v1 .erp-answer-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
    .er-patronage-v1 .erp-answer-quote { grid-column: 1 / -1; padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--er-rule); }
}

@media (max-width: 1024px) {
    .er-patron-v1 .erp-sec,
    .er-patron-v1 .erp-hero-inner,
    .er-patronage-v1 .erp-phero-inner,
    .er-patronage-v1 .erp-answer-inner,
    .er-patron-v1 .erp-path-inner,
    .er-patron-v1 .erp-credits { padding-left: 28px; padding-right: 28px; }

    .er-patron-v1 .erp-place-row,
    .er-patron-v1 .erp-start-row,
    .er-patronage-v1 .erp-why-grid,
    .er-patronage-v1 .erp-visit-row,
    .er-patronage-v1 .erp-plan-row,
    .er-patronage-v1 .erp-related-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .er-patronage-v1 .erp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .er-patronage-v1 .erp-fact { min-height: 108px; }
    .er-patronage-v1 .erp-fact:nth-child(odd) { border-left: 0; }
    .er-patronage-v1 .erp-fact:nth-child(n+3) { border-top: 1px solid var(--er-rule-soft); }

    .er-patron-v1 .erp-hero-aside { display: none; }
    .er-patronage-v1 .erp-phero-inner { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 900px) {
    .er-patron-v1 .erp-path-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .er-patron-v1 .erp-step-arrow { display: none; }
    .er-patronage-v1 .erp-phero-inner { grid-template-columns: minmax(0, 1fr); }
    .er-patronage-v1 .erp-phero-saint-figure { display: none; }
    .er-patronage-v1 .erp-phero-h1 { max-width: none; }
}

@media (max-width: 720px) {
    .er-patron-v1 .erp-sec { padding: 34px 20px 6px; }
    .er-patron-v1 .erp-hero-inner,
    .er-patronage-v1 .erp-phero-inner,
    .er-patronage-v1 .erp-answer-inner,
    .er-patron-v1 .erp-path-inner,
    .er-patron-v1 .erp-credits { padding-left: 20px; padding-right: 20px; }

    .er-patron-v1 .erp-hero { min-height: 486px; }
    .er-patron-v1 .erp-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto auto;
    }
    .er-patron-v1 .erp-hero-rule { grid-row: 2; }
    .er-patron-v1 .erp-hero-script {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        text-align: left;
        margin-top: 14px;
        font-size: 18px;
    }
    .er-patron-v1 .erp-hero-rule { font-size: var(--er-fs-floor, 14px); letter-spacing: 0.14em; }
    .er-patron-v1 .erp-search { width: 100%; padding-left: 16px; }

    /* Tactile horizontal scroll rather than a stacked dump. */
    .er-patron-v1 .erp-need-grid,
    .er-patron-v1 .erp-saint-row,
    .er-patron-v1 .erp-place-row,
    .er-patronage-v1 .erp-visit-row,
    .er-patronage-v1 .erp-why-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .er-patron-v1 .erp-need-grid::-webkit-scrollbar,
    .er-patron-v1 .erp-saint-row::-webkit-scrollbar,
    .er-patron-v1 .erp-place-row::-webkit-scrollbar,
    .er-patronage-v1 .erp-visit-row::-webkit-scrollbar,
    .er-patronage-v1 .erp-why-grid::-webkit-scrollbar { display: none; }

    .er-patron-v1 .erp-need { flex: 0 0 132px; scroll-snap-align: start; }
    .er-patron-v1 .erp-saint { flex: 0 0 168px; scroll-snap-align: start; }
    .er-patron-v1 .erp-place { flex: 0 0 74vw; scroll-snap-align: start; }
    .er-patronage-v1 .erp-visit-card { flex: 0 0 74vw; scroll-snap-align: start; }
    .er-patronage-v1 .erp-why-card { flex: 0 0 68vw; scroll-snap-align: start; }

    .er-patron-v1 .erp-start-row,
    .er-patronage-v1 .erp-plan-row,
    .er-patronage-v1 .erp-related-row { grid-template-columns: minmax(0, 1fr); }

    .er-patronage-v1 .erp-facts { grid-template-columns: minmax(0, 1fr); }
    .er-patronage-v1 .erp-fact { min-height: 0; border-left: 0; }
    .er-patronage-v1 .erp-fact:nth-child(n+2) { border-top: 1px solid var(--er-rule-soft); }

    .er-patronage-v1 .erp-answer-grid { grid-template-columns: minmax(0, 1fr); }
    .er-patronage-v1 .erp-answer-figure { max-width: 220px; }
    .er-patronage-v1 .erp-answer-prose { max-width: none; }
    .er-patronage-v1 .erp-why-body { min-height: 0; }

    .er-patron-v1 .erp-sechead { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .er-patron-v1 * { transition: none !important; }
    .er-patron-v1 .erp-need-link:hover { transform: none; }
}

/* ---- Browse by need: /patron-saints/all/ (.er-patron-all-v1) ----------
 *
 * The "View all" destination. Same tokens, same rhythm and the same section
 * furniture as the rest of the area; the only new shapes are a light compact
 * hero (this page has no photographic hero by design, so the eyebrow moves off
 * the dark-hero color) and a card that pairs a saint portrait with the need it
 * answers. No new tokens and no new components.
 */

.er-patron-all-v1 .erp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--er-r-pill);
    font-size: var(--er-fs-ui, 14px);
    letter-spacing: 0.02em;
    transition: background var(--transition-fast, .3s ease), color var(--transition-fast, .3s ease);
}
.er-patron-all-v1 .erp-btn--quiet { color: var(--er-ink-2); box-shadow: inset 0 0 0 1px var(--er-rule); }
.er-patron-all-v1 .erp-btn--quiet:hover { color: var(--er-clay-deep); }

.er-patron-all-v1 .erp-ahero {
    background: var(--er-limestone);
    border-bottom: 1px solid var(--er-rule-soft);
}
.er-patron-all-v1 .erp-ahero-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px 40px 44px;
}
.er-patron-all-v1 .erp-ahero .erp-eyebrow { color: var(--er-ink-3); margin-bottom: 10px; }
.er-patron-all-v1 .erp-ahero-h1 {
    margin: 0;
    font-family: var(--er-serif);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 52px);
    line-height: var(--er-lh-heading);
    letter-spacing: -0.015em;
    color: var(--er-ink);
}
.er-patron-all-v1 .erp-ahero-lede {
    max-width: 620px;
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.68;
    color: var(--er-ink-2);
}

.er-patron-all-v1 .erp-crumb {
    margin-bottom: 16px;
    font-family: var(--er-mono);
    font-size: var(--er-fs-kicker, 14px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--er-ink-3);
}
.er-patron-all-v1 .erp-crumb a { color: var(--er-ink-3); }
.er-patron-all-v1 .erp-crumb a:hover { color: var(--er-clay-deep); }
.er-patron-all-v1 .erp-crumb span { margin: 0 8px; }
.er-patron-all-v1 .erp-crumb span[aria-current] { margin-right: 0; color: var(--er-ink-2); }

.er-patron-all-v1 .erp-allsec-lede {
    margin: 6px 0 0;
    font-size: var(--er-fs-prose, 16px);
    color: var(--er-ink-3);
}

.er-patron-all-v1 .erp-all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
    gap: 16px;
}
.er-patron-all-v1 .erp-all-card {
    background: var(--er-paper);
    border: 1px solid var(--er-rule-soft);
    border-radius: var(--er-r-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast, .3s ease), box-shadow var(--transition-fast, .3s ease);
}
.er-patron-all-v1 .erp-all-card:hover {
    border-color: var(--er-rule);
    box-shadow: 0 10px 28px rgba(31, 29, 24, 0.07);
}
.er-patron-all-v1 .erp-all-link {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
    min-height: 108px;
}
.er-patron-all-v1 .erp-all-media { position: relative; overflow: hidden; background: var(--er-limestone); }
.er-patron-all-v1 .erp-all-media > img { position: absolute; inset: 0; }
.er-patron-all-v1 .erp-all-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 16px 40px 16px 18px;
}
.er-patron-all-v1 .erp-all-need {
    font-family: var(--er-serif);
    font-size: 20px;
    line-height: 1.25;
    color: var(--er-ink);
}
.er-patron-all-v1 .erp-all-saint {
    font-size: var(--er-fs-ui, 14px);
    color: var(--er-ink-3);
}
.er-patron-all-v1 .erp-all-go {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 18px;
    height: 18px;
    color: var(--er-ink-3);
    transition: transform var(--transition-fast, .3s ease), color var(--transition-fast, .3s ease);
}
.er-patron-all-v1 .erp-all-go > svg { width: 100%; height: 100%; }
.er-patron-all-v1 .erp-all-card:hover .erp-all-go { transform: translateX(3px); color: var(--er-clay-deep); }

.er-patron-all-v1 .erp-allmore { margin-top: 40px; }
.er-patron-all-v1 .erp-allmore-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 44px 40px 48px;
}
.er-patron-all-v1 .erp-allmore-lede {
    max-width: 640px;
    margin: 12px 0 24px;
    font-size: 17px;
    line-height: 1.68;
    color: var(--er-ink-2);
}
.er-patron-all-v1 .erp-allmore-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.er-patron-all-v1 .erp-allmore-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: var(--er-r-pill);
    background: var(--er-paper);
    box-shadow: inset 0 0 0 1px var(--er-rule-soft);
    font-size: var(--er-fs-ui, 14px);
    color: var(--er-ink-2);
    transition: box-shadow var(--transition-fast, .3s ease), color var(--transition-fast, .3s ease);
}
.er-patron-all-v1 .erp-allmore-chip:hover {
    box-shadow: inset 0 0 0 1px var(--er-clay);
    color: var(--er-clay-deep);
}

@media (max-width: 1024px) {
    .er-patron-all-v1 .erp-ahero-inner,
    .er-patron-all-v1 .erp-allmore-inner { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 720px) {
    .er-patron-all-v1 .erp-ahero-inner { padding: 30px 20px 32px; }
    .er-patron-all-v1 .erp-allmore-inner { padding: 34px 20px 38px; }
    .er-patron-all-v1 .erp-all-grid { grid-template-columns: minmax(0, 1fr); }
    .er-patron-all-v1 .erp-all-link { grid-template-columns: 84px minmax(0, 1fr); min-height: 96px; }
    .er-patron-all-v1 .erp-ahero-lede,
    .er-patron-all-v1 .erp-allmore-lede { font-size: 16px; }
}

/* ---- A saint who knew this (companion) --------------------------------- */
/* Deliberately not styled like "Related saints". Those cards read as
   patronage; this block must not, because the whole claim is that the saint
   is NOT a patron of this need. One photograph, one column of prose, and a
   quiet rule carrying the disclaiming note from the canonical saint record. */

.er-patronage-v1 .erp-companion-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 54px 40px 58px;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 46px;
    align-items: start;
}

.er-patronage-v1 .erp-companion-figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--er-r-sm);
}

.er-patronage-v1 .erp-companion-figure > img {
    position: absolute;
    inset: 0;
}

.er-patronage-v1 .erp-companion-prose {
    max-width: 66ch;
    font-size: var(--er-fs-prose-lg, 17px);
    line-height: 1.72;
    color: var(--er-ink-2);
}

.er-patronage-v1 .erp-companion-prose p { margin: 20px 0 0; }

/* The note is authored on the saint record, not here, and it is the sentence
   that refuses the patronage reading. Give it the weight of a correction. */
.er-patronage-v1 .erp-companion-note {
    margin-top: 26px;
    padding-left: 22px;
    border-left: 1px solid var(--er-rule);
    font-family: var(--er-mono);
    font-size: var(--er-fs-ui, 14px);
    line-height: 1.62;
    color: var(--er-ink-3);
}

@media (max-width: 1024px) {
    .er-patronage-v1 .erp-companion-inner { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 900px) {
    .er-patronage-v1 .erp-companion-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
}

@media (max-width: 720px) {
    .er-patronage-v1 .erp-companion-inner { padding: 34px 20px 38px; }
    .er-patronage-v1 .erp-companion-prose { font-size: 16px; }
}