/* Private visual proposal v0.2.0. Shared reading styles remain in style.css. */
:root { --scene-ease: cubic-bezier(.16, 1, .3, 1); }
.review-bar { position: relative; z-index: 12; min-height: 34px; }
.site-header { min-height: 108px; padding-block: 22px; position: relative; z-index: 9; }
.page-index .site-header { position: absolute; top: 34px; left: 0; right: 0; background: transparent; }
.brand span { font-size: 1.28rem; }
.header-shortcuts { display: flex; gap: 32px; margin-left: auto; }
.header-shortcuts a { font-size: 0.75rem; text-decoration: none; padding-block: 12px; }
.header-shortcuts a:hover { color: var(--gold); }
.header-tools { display: flex; align-items: center; gap: 24px; }
.menu-trigger { min-height: 46px; background: var(--gold); color: var(--navy); border: none; display: inline-flex; align-items: center; gap: 20px; padding: 10px 17px; font-size: 0.75rem; }
.menu-trigger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.motion-control { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--white); background: none; border: none; font-size: 0.75rem; padding: 4px 0; }
.motion-control svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.navigation-panel { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 38px var(--gutter) 60px; color: var(--white); background: var(--navy); }
.navigation-panel::backdrop { background: #061420aa; }
.navigation-panel[open] { animation: menu-arrive 360ms var(--scene-ease); }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 34px; border-bottom: 1px solid #647480; }
.menu-top p { margin: 0; font-size: 0.8125rem; }
.menu-top button { background: var(--gold); color: var(--navy); min-height: 44px; border: 0; padding: 8px 20px; display: flex; align-items: center; gap: 24px; }
.menu-top span { font-size: 1.625rem; }
.menu-grid { display: grid; grid-template-columns: 40% 1fr; gap: 10%; padding-top: 50px; }
.menu-image { position: relative; align-self: stretch; min-height: 420px; }
.menu-image img { width: 100%; height: 100%; position: absolute; object-fit: cover; filter: brightness(.48); }
.menu-image p { position: absolute; bottom: 20px; left: 28px; right: 28px; font-family: var(--serif); font-size: clamp(1.6rem, 2.5vw, 2.8rem); line-height: 1.3; }
.menu-image em { color: var(--gold); }
.menu-grid nav { display: grid; min-width: 0; }
.menu-grid nav > a .arrow { flex-shrink: 0; }
.menu-grid nav > a { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.4; padding-block: 9px; border-bottom: 1px solid #647480; text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.menu-grid nav > a:hover, .menu-grid nav > a[aria-current] { color: var(--gold); }
.navigation-panel :focus-visible { outline-color: var(--gold); }
.cinematic-hero { position: relative; min-height: 790px; height: calc(100svh - 34px); max-height: 1100px; background: #302b26; color: var(--white); isolation: isolate; overflow: clip; }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { z-index: -3; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; animation: image-settle 1100ms var(--scene-ease) both; }
.hero-shade { z-index: -2; background: linear-gradient(90deg, #05101db3 0%, #06142169 60%, #0717263d 100%), linear-gradient(0deg, #051523bf 0%, transparent 60%, #05152380 100%); }
.hero-stage { height: 100%; min-height: 790px; display: flex; flex-direction: column; justify-content: end; padding-block: 172px 78px; position: relative; }
.hero-stage h1 { font-size: clamp(4.5rem, 6.5vw, 7rem); line-height: 1.11; letter-spacing: -.04em; max-width: none; margin-bottom: 60px; }
.headline-line { display: block; animation: type-settle 750ms var(--scene-ease) both; }
.headline-line:nth-child(2) { color: #f4d34f; animation-duration: 900ms; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.hero-bottom p { font-size: 0.875rem; line-height: 1.75; color: #edf0f2; max-width: 50ch; margin: 0; }
.explore-cue { display: flex; align-items: center; gap: 24px; color: var(--white); font-size: 0.75rem; text-decoration: none; min-height: 48px; }
.explore-cue svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 1.2; transition: transform 350ms var(--scene-ease); }
.explore-cue:hover svg { transform: translateY(5px); }
.image-review { position: absolute; right: 14px; bottom: 8px; color: #fff; background: #0b2033b3; font-size: 0.75rem; padding: 5px 9px; line-height: 1.4; }
.visual-pathways { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 44px; background: var(--paper); }
.visual-pathways > a { position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 24px; padding: 12px 32px; text-decoration: none; border-inline-end: 1px solid var(--rule); }
.visual-pathways > a:first-child { padding-left: 0; }
.visual-pathways > a:last-child { padding-right: 0; border: none; }
.visual-pathways strong { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1.15; font-weight: 400; }
.visual-pathways small { display: block; font-size: 0.75rem; line-height: 1.7; color: var(--ink-soft); margin-top: 18px; max-width: 26ch; }
.visual-pathways .arrow { position: absolute; right: 30px; top: 12px; width: 21px; height: 21px; }
.visual-pathways > a:last-child .arrow { right: 0; }
.visual-pathways .motion-icon { width: 44px; height: 44px; margin: 0; color: #856600; }
.motion-icon { display: block; width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 28px; }
.motion-icon path { stroke-dasharray: 200; stroke-dashoffset: 0; }
.motion-icon.icon-animate path { animation: icon-trace 1100ms var(--scene-ease) both; }
.mission-statement { display: grid; grid-template-columns: 1.1fr 1fr; gap: 11%; padding-block: 126px; background: var(--navy); color: var(--white); width: 100%; max-width: none; }
.mission-statement h2 { font-size: clamp(3rem, 5.1vw, 5.5rem); line-height: 1.06; }
.mission-statement h2 em { color: var(--gold); }
.statement-heading { position: relative; }
.statement-seal { width: 100px; height: 100px; margin-top: 40px; opacity: .7; }
.statement-copy { align-self: center; }
.statement-copy .large-copy { font-size: 2rem; line-height: 1.5; }
.statement-copy > p:not(.large-copy) { color: #c4cfd7; font-size: 0.875rem; }
.statement-copy .text-link:hover { color: var(--gold); }
.prayer-scene { min-height: 700px; position: relative; isolation: isolate; overflow: clip; color: var(--white); background: var(--navy); }
.scene-image { position: absolute; inset: 0; z-index: -3; clip-path: inset(0 calc(var(--scene-inset, 0) * 1%)); }
.scene-image img { width: 100%; height: calc(100% + 60px); object-fit: cover; object-position: center; transform: translateY(var(--scene-y, -30px)); }
.scene-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #1d1416d9, #101c2980 65%, #10243473); }
.scene-copy { min-height: 700px; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; padding-block: 90px; }
.scene-copy .motion-icon { color: var(--gold); }
.scene-copy h2 { font-size: clamp(3.6rem, 6vw, 6.5rem); line-height: 1.06; }
.scene-copy h2 em { color: #f1d887; }
.scene-copy > div:last-child { max-width: 45ch; align-self: end; padding-bottom: 20px; }
.scene-copy p { font-family: var(--serif); font-size: 2rem; line-height: 1.5; }
.scene-copy .text-link { display: flex; width: fit-content; margin-top: 22px; }
.scene-copy .text-link:hover { color: var(--gold); }
.button-light { background: #fcfaf5; color: var(--navy); border-color: #fcfaf5; }
.button-light:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); }
.button-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.button-gold:hover:not(:disabled) { background: #ebc43a; border-color: #ebc43a; }
.sacrament-interlude { display: grid; grid-template-columns: 1.1fr 1fr; gap: 11%; padding-block: 110px; }
.sacrament-interlude h2 { font-size: clamp(3rem, 5.1vw, 5.5rem); }
.sacrament-interlude h2 em { color: #75654d; }
.sacrament-interlude p { max-width: 37ch; color: var(--ink-soft); }
.sacrament-index > a { font-family: var(--serif); font-size: 1.75rem; text-decoration: none; border-bottom: 1px solid var(--rule); padding: 13px 0; display: flex; justify-content: space-between; align-items: center; }
.sacrament-index > a:hover { color: #816200; }
.vocation-feature { display: grid; grid-template-columns: 62% 38%; min-height: 720px; background: var(--navy); color: var(--white); }
.vocation-image { position: relative; min-height: 720px; overflow: clip; }
.vocation-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.vocation-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 70px clamp(28px, 4vw, 65px) 28px; }
.vocation-copy .motion-icon { color: var(--gold); }
.vocation-copy h2 { font-size: clamp(3rem, 4.4vw, 4.8rem); }
.vocation-copy h2 em { color: var(--gold); }
.vocation-copy p { color: #c6d0d8; font-size: 0.875rem; margin-bottom: 30px; }
.vocation-copy small { display: block; font-size: 0.75rem; line-height: 1.6; color: #b9c6d0; margin-top: 42px; }
.ministry-story { display: grid; grid-template-columns: 35% 1fr; gap: 13%; padding-block: 126px; align-items: center; }
.ministry-story figure img { max-height: 610px; width: 100%; object-fit: cover; }
.ministry-story figcaption { font-size: 0.75rem; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
.ministry-story h2 { font-size: clamp(2.9rem, 4.5vw, 4.7rem); }
.ministry-story h2 em { color: #75654d; }
.ministry-story .large-copy { font-size: 1.8rem; }
.ministry-story p:not(.large-copy) { font-size: 0.875rem; }
.welcome-close { background: #e8dfcd; padding-block: 90px; }
.welcome-close > div { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: center; }
.welcome-close h2 { font-size: clamp(3.2rem, 5.5vw, 6rem); margin: 0; }
.welcome-close h2 em { color: #796140; }
.welcome-close p { max-width: 46ch; }
.photographic-heading { position: relative; isolation: isolate; overflow: clip; width: 100%; max-width: none; padding-block: 56px 66px; min-height: 535px; color: var(--white); border: none; }
.heading-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; z-index: -3; animation: image-settle 900ms var(--scene-ease) both; }
.heading-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #071c2ee6 0%, #102234b3 50%, #11213040 100%); }
.heading-content { max-width: 980px; position: relative; }
.photographic-heading .lede { color: #e6ebef; max-width: 52ch; font-size: 1.15rem; }
.photographic-heading h1 { font-size: clamp(3.5rem, 6vw, 6rem); }
.photographic-heading .button { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.photographic-heading .button:hover { background: #ebc43a; }
.photographic-heading a:focus-visible { outline-color: var(--gold); }
.photographic-heading .text-link:hover { color: var(--gold); }
.page-vocations .heading-background { object-position: center 58%; }
.page-vocations .heading-shade { background: linear-gradient(90deg, #221b12de, #2a25169c 60%, #15243350); }
.page-pastoral-care .heading-shade { background: linear-gradient(90deg, #201723de, #26202bab 60%, #15243350); }
.page-documents .heading-shade { background: linear-gradient(90deg, #0b2033eb, #1024379e 60%, #15243350); }
.site-footer { padding-top: 66px; }
@keyframes image-settle { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes type-settle { from { clip-path: inset(0 0 24%); transform: translateY(10px); } to { clip-path: inset(0); transform: translateY(0); } }
@keyframes menu-arrive { from { clip-path: inset(0 0 35%); transform: translateY(-15px); } to { clip-path: inset(0); transform: translateY(0); } }
@keyframes icon-trace { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@media (max-width: 1100px) {
	.header-shortcuts { gap: 20px; }
	.header-tools { gap: 16px; }
	.motion-control span { display: none; }
	.visual-pathways > a { gap: 16px; padding-inline: 20px; grid-template-columns: 35px 1fr; }
	.visual-pathways .motion-icon { width: 34px; }
	.visual-pathways .arrow { right: 16px; }
	.visual-pathways strong { font-size: 1.8rem; }
	.vocation-feature { grid-template-columns: 55% 45%; }
	.hero-stage h1 { font-size: clamp(4rem, 7vw, 5.9rem); }
}
@media (max-width: 760px) {
	.review-bar { min-height: 50px; }
	.page-index .site-header { top: 50px; }
	.site-header { min-height: 94px; padding: 18px 22px; gap: 12px; }
	.brand span { font-size: 1.05rem; }
	.brand img { width: 42px; height: 42px; }
	.header-shortcuts { display: none; }
	.header-tools { gap: 14px; }
	.menu-trigger { gap: 10px; padding-inline: 11px; font-size: 0.75rem; }
	.menu-trigger svg { width: 18px; }
	.motion-control { display: none; }
	.cinematic-hero { height: calc(100svh - 50px); min-height: 730px; max-height: 950px; }
	.hero-stage { min-height: 730px; padding: 132px 24px 54px; justify-content: end; }
	.hero-stage h1 { font-size: clamp(3.2rem, 13vw, 4.6rem); line-height: 1.08; letter-spacing: -.04em; margin-bottom: 40px; max-width: 13ch; }
	.hero-stage h1 em { margin-top: 10px; }
	.hero-image img { object-position: 54% center; }
	.hero-shade { background: linear-gradient(90deg, #091521ba, #101a246b), linear-gradient(0deg, #061523c2, transparent 70%, #06152391); }
	.hero-bottom { display: grid; gap: 26px; }
	.hero-bottom p { font-size: 0.75rem; max-width: 33ch; }
	.hero-bottom p br { display: none; }
	.explore-cue { font-size: 0.75rem; gap: 20px; justify-content: space-between; }
	.explore-cue svg { width: 40px; height: 40px; }
	.visual-pathways { grid-template-columns: 1fr; padding-block: 12px; }
	.visual-pathways > a, .visual-pathways > a:first-child, .visual-pathways > a:last-child { padding: 28px 0; grid-template-columns: 44px 1fr; border: none; border-bottom: 1px solid var(--rule); gap: 22px; }
	.visual-pathways > a:last-child { border-bottom: 0; }
	.visual-pathways strong { font-size: 1.8rem; }
	.visual-pathways strong br { display: none; }
	.visual-pathways small { max-width: none; margin-top: 10px; font-size: 0.75rem; }
	.visual-pathways .arrow, .visual-pathways > a:last-child .arrow { right: 0; top: 30px; width: 18px; height: 18px; }
	.visual-pathways .motion-icon { width: 42px; height: 42px; }
	.visual-pathways > a > span { padding-right: 25px; }
	.mission-statement { grid-template-columns: 1fr; gap: 34px; padding-block: 66px; }
	.mission-statement h2 { font-size: 3.4rem; margin: 0; }
	.statement-seal { width: 64px; height: 64px; position: absolute; right: 0; bottom: 0; margin: 0; opacity: .4; }
	.statement-copy .large-copy { font-size: 1.55rem; }
	.prayer-scene { min-height: 680px; }
	.scene-copy { min-height: 680px; grid-template-columns: 1fr; padding-block: 60px; gap: 60px; }
	.scene-copy h2 { font-size: 4.2rem; margin: 0; }
	.scene-copy p { font-size: 1.65rem; }
	.scene-copy > div:last-child { padding: 0; }
	.scene-image img { object-position: 64% center; }
	.sacrament-interlude { grid-template-columns: 1fr; padding-block: 66px; gap: 30px; }
	.sacrament-interlude h2 { font-size: 3.4rem; }
	.sacrament-index a { font-size: 1.55rem; padding-block: 16px; }
	.vocation-feature { grid-template-columns: 1fr; }
	.vocation-image { min-height: 365px; }
	.vocation-copy { padding: 42px 24px 26px; }
	.vocation-copy h2 { font-size: 3.8rem; }
	.vocation-copy h2 br { display: none; }
	.vocation-copy .motion-icon { width: 48px; height: 48px; margin-bottom: 22px; }
	.ministry-story { grid-template-columns: 1fr; padding-block: 66px; gap: 38px; }
	.ministry-story figure { max-width: 290px; }
	.ministry-story figure img { max-height: 400px; }
	.ministry-story h2 { font-size: 3rem; }
	.ministry-story .large-copy { font-size: 1.5rem; }
	.welcome-close { padding-block: 66px; }
	.welcome-close > div { grid-template-columns: 1fr; gap: 30px; }
	.welcome-close h2 { font-size: 3.5rem; }
	.photographic-heading { min-height: 520px; padding-block: 30px 52px; }
	.photographic-heading h1 { font-size: 3.3rem; }
	.photographic-heading .lede { font-size: 1rem; max-width: 34ch; }
	.photographic-heading .heading-shade { background: #071d30be; }
	.page-vocations .heading-shade { background: #211b15ba; }
	.navigation-panel { padding: 20px 24px 40px; }
	.menu-top { padding-bottom: 24px; gap: 24px; }
	.menu-top p { font-size: 0.75rem; max-width: 16ch; }
	.menu-top button { font-size: 0.75rem; gap: 14px; }
	.menu-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 22px; }
	.menu-image { order: 2; min-height: 170px; }
	.menu-image img { object-position: center 68%; }
	.menu-image p { font-size: 1.65rem; left: 18px; bottom: 10px; margin-bottom: 0; }
	.menu-grid nav > a { font-size: 2rem; padding-block: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-image img, .heading-background, .headline-line, .navigation-panel[open], .motion-icon.icon-animate path { animation: none !important; }
	.scene-image { clip-path: none; }
	.scene-image img { transform: none; height: 100%; }
}
html[data-reduced-motion] .hero-image img, html[data-reduced-motion] .heading-background, html[data-reduced-motion] .headline-line { transform: none; clip-path: none; }
html[data-reduced-motion] .scene-image { clip-path: none; }
html[data-reduced-motion] .scene-image img { transform: none; height: 100%; }
html[data-reduced-motion] .motion-icon path { stroke-dashoffset: 0; }
@media print { .cinematic-hero, .hero-stage { min-height: auto; height: auto; } .header-tools, .image-review { display: none; } }