/* The approved Beliefs direction, scoped to these five editorial pages. */
.story-page { --story-gold: #b88b4c; }
.story-page .grain { opacity: .035; animation: none; }
.story-page .header { background: var(--paper); }
.story-page .header.menu-open { background: transparent; }
.story-page :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.s-skip { position: fixed; z-index: 10000; top: 1rem; left: 1rem; padding: .8rem 1.2rem; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.s-skip:focus { transform: none; }
.s-icon { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; color: var(--blue); }
.s-eyebrow, .story-page .eyebrow, .story-page .label-tag, .story-page .min-item__num { display: flex; align-items: center; gap: .75rem; font: 500 .72rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.s-eyebrow .s-icon { width: 1.7rem; height: 1.7rem; }
.story-page .label-tag { width: fit-content; padding: 0; border: 0; background: none; border-radius: 0; }
.s-hero { padding-top: clamp(8rem, 12vw, 10.5rem); }
.s-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.s-hero h1 { margin-block: 1.6rem; font: 400 clamp(3rem, 5.6vw, 5.2rem)/1.08 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.s-hero h1 em { color: var(--blue); }
.s-hero__lede { max-width: 29rem; font-size: .98rem; color: var(--ink-soft); line-height: 1.8; }
.s-hero__button { margin-top: 1.75rem; }
.s-photo { position: relative; margin: 0; padding-right: 1rem; }
.s-photo::before { content: ""; position: absolute; inset: -1rem 0 3.5rem 1rem; border: 1px solid var(--story-gold); border-radius: 42% 0 0 0 / 30% 0 0 0; }
.s-photo__frame { position: relative; aspect-ratio: 4/4.5; overflow: hidden; background: var(--paper-soft); border-radius: 42% 0 0 0 / 30% 0 0 0; }
.s-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.s-photo figcaption { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; color: var(--ink-soft); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; }
.s-photo figcaption .s-icon { width: 1.25rem; height: 1.25rem; }
.story-page--history .s-photo img { object-position: 70% center; }
.story-page--missions .s-photo img { object-position: center 60%; }
.story-page--team .s-photo__frame { aspect-ratio: 1; }
.story-page--team .s-photo img { object-position: 63% center; }
.story-page--team .s-hero h1 { font-size: clamp(2.8rem, 5vw, 4.7rem); }
.story-page--celebrate-recovery .s-photo img { object-position: 47% center; }
.s-index { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 3.5rem; padding-block: 1.1rem; border-block: 1px solid var(--line); }
.s-index a { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; font-size: .75rem; }
.s-index a:hover { color: var(--blue); }
.s-index .s-icon { width: 1.7rem; height: 1.7rem; }
.story-page .section, .s-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.story-page .section--flush-top { padding-top: 0; }
.story-page main [id] { scroll-margin-top: 1.25rem; }
.s-group-head { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 3rem; }
/* Shared stained glass, static texture and six restrained pools of color. */
.s-glass { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--paper); }
.s-glass__art { position: absolute; z-index: -2; inset: 0; background: url("assets/stained-glass-cross-window.jpg") 80% 45%/cover; opacity: .23; }
.s-glass::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--dark), rgba(8,27,43,.4)); pointer-events: none; }
.s-glass::after { content: ""; position: absolute; z-index: 1; inset: 0; opacity: .16; background: url("assets/mission-glass-grain.svg") repeat; background-size: 180px; pointer-events: none; }
.s-glass > .section__inner, .s-glass > .min-item__body, .s-glass > .min-item__media { position: relative; z-index: 2; }
.s-glass .s-icon, .story-page .s-glass .label-tag { color: #c3aa80; }
.s-lights { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s-lights i { position: absolute; width: clamp(20rem, 44vw, 40rem); aspect-ratio: 1; background: radial-gradient(circle, rgba(var(--light), .18), rgba(var(--light), .07) 35%, transparent 70%); animation: story-light var(--cycle) ease-in-out infinite alternate; animation-play-state: paused; }
.s-lights i:nth-child(1) { --light: 248,176,72; --cycle: 21s; top: -20%; left: 35%; }
.s-lights i:nth-child(2) { --light: 48,174,235; --cycle: 24s; top: 15%; right: -10%; animation-delay: -8s; }
.s-lights i:nth-child(3) { --light: 34,201,182; --cycle: 19s; top: 35%; left: 10%; animation-delay: -5s; }
.s-lights i:nth-child(4) { --light: 111,186,78; --cycle: 26s; bottom: -10%; right: 25%; animation-delay: -10s; }
.s-lights i:nth-child(5) { --light: 221,71,64; --cycle: 23s; top: -15%; right: -15%; animation-delay: -15s; }
.s-lights i:nth-child(6) { --light: 135,101,216; --cycle: 28s; bottom: 0; left: 45%; animation-delay: -12s; }
.s-glass.is-in-view .s-lights i { animation-play-state: running; }
@keyframes story-light { 0% { transform: translate3d(-15%, -8%, 0) scale(.9); } 50% { transform: translate3d(20%, 20%, 0) scale(1.1); } 100% { transform: translate3d(-5%, 40%, 0) scale(.96); } }
/* Missions keeps every partner logo and destination. */
.s-commission .railsec { grid-template-columns: 1fr 2fr; gap: 4rem; }
.s-commission .rail { position: static; }
.s-commission .rail > .s-icon { margin-bottom: 1.4rem; }
.s-commission .rail__lede { color: #d0d5d9; }
.s-commission .verse-quote { border: 0; padding: 0; max-width: none; }
.s-commission .verse-quote p { font: 400 clamp(1.5rem, 2.5vw, 2.2rem)/1.5 var(--font-display); }
.s-commission .verse-quote cite { color: #c3aa80; font-size: .72rem; margin-top: 1.5rem; }
.s-commission .s-lights i { animation-duration: calc(var(--cycle) / 1.1); }
.s-commission .s-lights i:first-child { animation-delay: -4s; }
.s-commission .commission-meridians { transform-origin: 32px 32px; }
.s-commission .s-accent.is-animating > .s-icon { animation: none; }
.s-commission .is-animating .commission-meridians { animation: commission-globe-turn 1.8s ease-in-out; }
@keyframes commission-globe-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.story-page .partners__head { max-width: 52rem; }
.story-page .partners__title { font-weight: 400; letter-spacing: -.03em; }
.story-page .partners__title em { color: var(--blue); }
.story-page .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.story-page .partner__link { border-radius: .4rem; box-shadow: none; background: rgba(255,255,255,.4); }
.story-page .partner__link:hover { transform: none; border-color: var(--blue); }
.story-page .partner__media { aspect-ratio: 2 / 1; }
/* Portraits are left intact; the layout adds editorial spacing around them. */
.story-page--team .s-hero + .section { padding-top: 4rem; }
.story-page--team .group + .group { padding-top: 3.5rem; margin-top: 3.5rem; border-top: 1px solid var(--line); }
.s-group-head { align-items: center; gap: 1rem; margin-bottom: 2rem; }
.story-page .group-title { font: 400 2.5rem/1.1 var(--font-display); color: var(--ink); margin: 0; }
.story-page .team-grid { gap: 3rem; }
.story-page .tcard { border: 0; background: none; border-radius: 0; }
.story-page .tcard > .tcard__photo, .story-page .tcard > div:first-child:not(.tcard__body) { border-radius: 2rem .3rem .3rem .3rem; overflow: hidden; }
.story-page .tcard__body { padding: 1.5rem 0 0; }
.story-page .tcard__name { font: 400 clamp(1.45rem, 2.1vw, 2rem)/1.2 var(--font-display); letter-spacing: -.02em; }
.story-page .tcard__role { font-size: .7rem; letter-spacing: .12em; margin-top: .7rem; }
.story-page .tcard__sub { font-size: .95rem; }
/* Ministries: an illuminated recovery feature, then alternating quiet rows. */
.story-page .ministry-rows { display: block; }
.story-page .min-item { gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: 3.5rem; border-bottom: 1px solid var(--line); }
.story-page .min-item:last-child { border-bottom: 0; }
.story-page .min-item__media img { aspect-ratio: 4/4.2; border-radius: 2.5rem .3rem .3rem .3rem; }
.story-page .min-item:nth-child(even) .min-item__media img { border-radius: .3rem 2.5rem .3rem .3rem; }
.story-page .min-item__num { margin-bottom: 1.2rem; color: var(--ink-soft); }
.story-page .min-item__num .s-icon { width: 2.5rem; height: 2.5rem; }
.story-page .min-item__body h2 { font: 400 clamp(2rem, 3.3vw, 3rem)/1.12 var(--font-display); letter-spacing: -.03em; }
.story-page .min-item__body p:not(.min-item__when) { font-size: .95rem; line-height: 1.85; }
.story-page .min-item__body .btn { margin-right: .3rem; }
.story-page .s-glass .btn--solid { background: var(--blue); color: #fff; }
.story-page .s-glass .btn--solid:hover { background: var(--paper); color: var(--ink); }
.story-page .s-glass .btn--outline { color: var(--paper); border-color: var(--line-light); }
.story-page .s-glass .btn--outline:hover { background: var(--paper); color: var(--ink); }
/* Recovery: make Friday's practical details easy to scan. */
.story-page .cr-video { padding-block: 4rem; }
.story-page .cr-video > .section__inner { display: grid; grid-template-columns: .85fr 1.2fr; gap: 3rem; align-items: center; }
.story-page .cr-video__head { margin: 0; }
.story-page .cr-video__title { margin-top: 1rem; font-weight: 400; }
.story-page .yt { border-radius: .5rem; box-shadow: none; }
.story-page .yt__play { font-size: .85rem; gap: .6rem; }
.story-page .watch__play svg { width: 1rem; height: 1rem; }
.story-page .yt__cap { font-size: .6875rem; letter-spacing: .07em; left: 1rem; bottom: .8rem; }
.story-page .cr-title, .story-page .faq__title { font-weight: 400; font-size: clamp(2rem, 3.7vw, 3.25rem); letter-spacing: -.03em; }
.story-page .cr-title em { color: var(--blue); }
.story-page .cr-head { margin-bottom: 2.25rem; }
.story-page .cr-head .eyebrow { margin-bottom: 1.25rem; }
.story-page .cr-head .s-icon { width: 2.5rem; height: 2.5rem; }
.story-page .cr-night { grid-template-columns: 1fr; gap: 2rem; }
.story-page .cr-night .weekly-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.story-page .cr-night .witem { display: block; padding: 1.75rem 1.5rem 1.75rem 0; border: 0; }
.story-page .cr-night .witem + .witem { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.story-page .witem__when { display: block; margin-bottom: 1.1rem; color: var(--blue); font-size: .85rem; }
.story-page .witem h3 { font: 400 1.5rem/1.2 var(--font-display); }
.story-page .witem p { font-size: .95rem; line-height: 1.8; }
.story-page .cr-stats { gap: 1.5rem; }
.story-page .faq { grid-template-columns: 1fr 1.6fr; }
.story-page .faq__q { font-family: var(--font-body); font-size: .95rem; line-height: 1.5; }
.story-page .faq__side .btn { margin-right: .4rem; }
.story-page .s-invitation { text-align: left; padding-block: 2.75rem; background: var(--paper-soft); border-top: 1px solid var(--line); }
.s-invitation .section__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.story-page .s-invitation h2 { color: var(--ink); font: 400 clamp(2rem, 3.4vw, 3rem)/1.13 var(--font-display); letter-spacing: -.03em; margin: 0; max-width: 23ch; }
.s-invitation h2 em { color: var(--blue); }
.s-invitation .btn { flex-shrink: 0; margin: 0; }
.s-invitation__actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }
/* Progressive enhancement keeps every paragraph visible without JS. */
.story-motion .s-reveal { opacity: 0; transform: translateY(var(--reveal-dist)); transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); transition-delay: var(--s-delay, 0ms); }
.story-motion .s-reveal.is-revealed { opacity: 1; transform: none; }
.s-accent > .s-icon { transform-origin: center; }
.s-accent.is-animating > .s-icon { animation: story-accent 1.8s ease-in-out; }
.s-rays { opacity: 0; }
.s-accent.is-animating .s-rays { animation: story-rays 1.8s ease-in-out; }
@keyframes story-accent { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes story-rays { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }
@media (max-width: 800px) {
  .s-hero__grid { gap: 2rem; }
  .s-index a { flex-direction: column; text-align: center; gap: .5rem; flex: 1; }
  .story-page .cr-video > .section__inner { grid-template-columns: 1fr; gap: 2rem; }
  .story-page .faq { grid-template-columns: 1fr; }
  .story-page .faq__side { position: static; }
  .story-page .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-commission .railsec { gap: 2rem; }
}
@media (max-width: 700px) {
  .story-page .section__inner, .story-page .header__inner, .story-page .footer__inner { width: calc(100% - 2.5rem); }
  .s-hero { padding-top: 7rem; }
  .s-hero__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .s-hero h1, .story-page--team .s-hero h1 { font-size: clamp(2.55rem, 11.5vw, 4rem); }
  .s-hero__lede { font-size: .95rem; }
  .s-photo { width: min(100%, 27rem); margin-inline: auto; }
  .s-photo__frame { aspect-ratio: 4/4.2; }
  .s-index { margin-top: 2.5rem; gap: .8rem; }
  .s-index a { font-size: .68rem; min-height: 4.5rem; justify-content: flex-start; padding-top: .6rem; }
  .story-page--ministries .s-index { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
  .story-page--ministries .s-index a { grid-column: span 2; }
  .story-page--ministries .s-index a:nth-child(4) { grid-column: 2 / span 2; }
  .story-page--celebrate-recovery .s-index { display: grid; grid-template-columns: 1fr 1fr; }
  .story-page .section, .s-section { padding-block: 3rem; }
  .story-page .section--flush-top { padding-top: 0; }
  .story-page .group-title, .story-page .min-item__body h2, .story-page .cr-title, .story-page .faq__title, .story-page .partners__title, .story-page .cr-video__title { font-size: 2rem; }
  .s-commission .railsec { grid-template-columns: 1fr; gap: 2rem; }
  .s-commission .verse-quote p { font-size: 1.5rem; }
  .story-page .partner-grid { gap: .75rem; }
  .story-page--team .s-hero + .section { padding-top: 3rem; }
  .story-page .team-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .story-page--team .group + .group { padding-top: 2.5rem; margin-top: 2.5rem; }
  .story-page .min-item { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem; }
  .story-page .min-item:nth-child(even) .min-item__media { order: 0; }
  .story-page .min-item__media img { aspect-ratio: 4/3; }
  .story-page .min-item__num .s-icon { width: 2rem; height: 2rem; }
  .story-page .min-item__body .btn { margin-top: 1rem; }
  .story-page .min-item__body h2 { overflow-wrap: normal; }
  .story-page .cr-video { padding-block: 3rem; }
  .story-page .yt__cap { display: none; }
  .story-page .cr-night .weekly-list { grid-template-columns: 1fr; }
  .story-page .cr-night .witem, .story-page .cr-night .witem + .witem { border-left: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
  .story-page .witem__when { margin-bottom: .7rem; }
  .story-page .faq__q { gap: 1rem; }
  .story-page .s-invitation { padding-block: 2rem; }
  .s-invitation .section__inner { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .story-page .s-invitation h2 { font-size: 2rem; max-width: 22ch; }
}
@media (max-width: 359px) {
  .story-page .header__logo { gap: .4rem; }
  .story-page .logo-text { font-size: .85rem; }
  .story-page .header__inner, .story-page .header__actions { gap: .4rem; }
  .story-page .partner-grid { grid-template-columns: 1fr; }
  .story-page .btn { white-space: normal; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .s-commission .is-animating .commission-meridians { animation: none; }
  .story-motion .s-reveal { opacity: 1; transform: none; transition: none; }
  .s-lights i, .s-accent.is-animating > .s-icon, .s-accent.is-animating .s-rays { animation: none; }
}

/* Hero type scale parity. History, Ministries and Celebrate Recovery don't load
   vision-hero.css (and the first two skip light-heroes.css), so their hero
   heading and eyebrow ran a size larger than every other page. Same values. */
.story-page .s-hero .s-eyebrow { font-size: .75rem; line-height: 1.4; letter-spacing: .16em; }
.story-page .s-hero h1 { letter-spacing: -.045em; line-height: 1.06; }
@media (min-width: 901px) {
  .story-page .s-hero h1 { font-size: clamp(3rem, min(5vw, 8.5svh), 4.8rem); line-height: 1.08; }
}
@media (max-width: 900px) {
  .story-page .s-hero h1 { font-size: clamp(3rem, 6.2vw, 4rem); }
}
@media (max-width: 640px) {
  .story-page .s-hero h1 { font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
}