/* =========================================================================
   Page compositions
   ========================================================================= */

/* ---------- Intro (MM title sequence) ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: var(--z-intro);
  display: grid; place-items: center;
  background: var(--ink); color: var(--text-inv);
  cursor: pointer;
}
.js.intro-seen .intro { display: none; }
.intro-playing, .intro-playing body { overflow: hidden; }
.intro__stage { display: grid; justify-items: center; gap: 1.1rem; padding: var(--gutter); }
.intro__the { font-family: var(--f-display); font-style: italic; font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem); color: var(--gold-soft); opacity: 0; }
.intro__line { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.5rem, 0.6rem + 8.4vw, 7.5rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.intro__m, .intro__rest { display: inline-block; opacity: 0; }
.intro__rule { display: block; width: min(70vw, 34rem); height: 1px; background: var(--gold); transform: scaleX(0); }
.intro__tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-inv-mute); opacity: 0; }
.intro__skip { position: absolute; left: 50%; bottom: max(2rem, env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-inv-mute); opacity: 0; transition: color 200ms; }
.intro:hover .intro__skip { color: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { .js .intro { display: none; } }

/* ---------- Hero: six quiet depth planes ---------- */
.hero { position: relative; min-height: clamp(720px, 100svh, 960px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; background: #141512; }
.hero-scene { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.hero-plane { position: absolute; inset: -42px; transform: translate3d(0, 0, 0); }
/* The room is a plain darkroom ground; the photograph carries the scene. */
.hero-plane--room { background: radial-gradient(ellipse 60% 75% at 74% 38%, #26241f, #141512 72%); }
.hero-plane--light { background: radial-gradient(ellipse at 72% 26%, rgba(226,197,142,.08), transparent 45%); mix-blend-mode: screen; }
.hero-plane--shadow { background: radial-gradient(ellipse 30% 60% at 100% 70%, rgba(4,6,4,.5), transparent 90%); }
.hero-plane--portrait { inset: 0; }
/* An authentic studio photograph (Pach Bros., c. 1904), printed like a toned
   silver-gelatin plate: monochrome, a little warmth, soft edges into the dark. */
.hero-plane--portrait img { position: absolute; top: -2%; right: 0; width: min(56%, 1040px); height: 104%; max-width: none; object-fit: cover; object-position: 50% 4%; filter: grayscale(1) sepia(.2) contrast(1.06) brightness(.74);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 62%, transparent 100%); mask-composite: intersect; }
.hero-plane--foreground { inset: -60px -70px; background: linear-gradient(90deg, rgba(5,7,5,.7), transparent 10%, transparent 93%, rgba(5,7,5,.72)); box-shadow: inset -30px 0 65px rgba(0,0,0,.28); }
.hero-plane--atmosphere { background: radial-gradient(ellipse 55% 14% at 75% 91%, rgba(185,153,102,.08), transparent 85%), linear-gradient(0deg, #10110e 2%, rgba(16,17,14,.82) 13%, transparent 32%); }
/* Fine, static film grain: one small tiled SVG, no animation. */
.hero-plane--atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E"); }
.hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(12,15,12,.64) 0%, rgba(12,15,12,.55) 31%, rgba(12,15,12,.36) 48%, transparent 69%), linear-gradient(180deg, rgba(10,12,9,.57), transparent 21%, transparent 76%, rgba(10,12,9,.7)); }
.hero__content { align-self: center; padding-top: calc(var(--header-h) + 3rem); padding-bottom: 4rem; }
.hero__content > .label { font-size: .7rem; letter-spacing: .19em; color: #d6c09b; }
.hero__title { font-size: clamp(3.6rem, 1.4rem + 5.1vw, 6.65rem); line-height: 1.01; letter-spacing: -.035em; margin-top: 1.8rem; max-width: 10ch; text-shadow: 0 4px 32px rgba(0,0,0,.26); }
.hero__title em { color: #d9c299; font-style: italic; }
.hero__sub { margin-top: 1.8rem; max-width: min(29rem, 44vw); font-size: clamp(1rem, .85rem + .4vw, 1.2rem); line-height: 1.75; color: #d0ccc1; }
.hero__cta { margin-top: 2rem; }
.hero__portrait-note { position: absolute; right: var(--gutter); bottom: 7.5rem; text-align: right; font-family: var(--f-display); font-size: 1rem; color: #d5c8af; }
.hero__portrait-note span { display: block; font-family: var(--f-sans); font-size: .67rem; letter-spacing: .08em; margin-top: .25rem; color: #aba693; }
.hero__portrait-note small { display: block; font-family: var(--f-sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .55rem; color: #8d887a; }
.hero__foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1.6rem 2rem; border-top: 1px solid rgba(222,206,175,.18); }
.hero__virtues { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: #c5b18e; }
.hero__facebook { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--gold-soft); font-size: .8rem; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.hero__facebook svg { flex: 0 0 20px; width: 20px; height: 20px; }
.hero__facebook:hover { color: var(--text-inv); }
.hero__scroll { display: inline-flex; align-items: center; gap: .9rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #bbb4a6; }
.hero__scroll span { width: 1px; height: 26px; background: linear-gradient(var(--gold), transparent); }
@media (max-width: 1050px) and (min-width: 761px) { .hero-plane--portrait img { width: 62%; } .hero__title { font-size: clamp(3.5rem, 7.2vw, 5rem); } .hero__sub { max-width: 43vw; } }
@media (max-width: 760px) {
  .hero { min-height: max(820px, 100svh); }
  .hero-plane--portrait img { width: 100%; height: 66%; top: 0; object-position: 50% 12%; -webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 98%); mask-image: linear-gradient(#000 0%, #000 55%, transparent 98%); }
  .hero-plane--shadow { opacity: .4; }
  .hero__scrim { background: linear-gradient(0deg, #10120f 0%, rgba(16,18,15,.95) 32%, rgba(16,18,15,.64) 50%, rgba(16,18,15,.04) 78%, rgba(16,18,15,.45) 100%); }
  .hero__content { align-self: end; padding-top: 390px; padding-bottom: 2.5rem; }
  .hero__title { font-size: clamp(2.85rem, 9.4vw, 4.5rem); margin-top: 1.1rem; }
  .hero__sub { max-width: 32rem; font-size: 1rem; line-height: 1.65; margin-top: 1.25rem; }
  .hero__cta { margin-top: 1.5rem; }
  .hero__portrait-note, .hero__scroll { display: none; }
  .hero__foot { padding-block: 1.2rem 1.5rem; }
  .hero__facebook { flex-basis: 100%; }
  .hero__virtues { font-size: .61rem; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .hero-plane { transform: none !important; } }

/* ---------- Home: statement ---------- */
.statement__text { font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.02em; }
.statement__ref { font-style: italic; color: var(--gold-ink); font-size: 0.6em; letter-spacing: 0; }
.statement__aside { grid-column: 4 / span 6; }
.statement__link { grid-column: 11 / span 2; align-self: end; justify-self: end; }
.focus { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 2.5rem; }
.focus > .label { grid-column: 1 / span 3; padding-top: 0.4rem; }
.focus__list { grid-column: 4 / span 9; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin: 0; }
.focus__list li { display: grid; gap: 0.9rem; align-content: start; }
.focus__list em { color: var(--gold-ink); }
@media (max-width: 800px) {
  .statement__aside, .statement__link { grid-column: 1 / -1; justify-self: start; }
  .statement__link { margin-top: 1.5rem; }
  .focus { display: block; }
  .focus__list { grid-template-columns: 1fr; margin-top: 1.5rem; gap: 2rem; }
}

/* ---------- Home: leadership feature ---------- */
.lead-feature { padding-block: clamp(5rem, 3rem + 8vw, 11rem); position: relative; overflow: hidden; }
.lead-feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 18% 40%, rgba(210,178,122,0.07), transparent 70%); pointer-events: none; }
.lead-feature__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; position: relative; }
.lead-feature__portrait { grid-column: 1 / span 5; }
.lead-feature__portrait .frame { aspect-ratio: 4 / 5.2; }
.lead-feature__portrait img { filter: grayscale(0.25) contrast(1.05); }
.lead-feature__body { grid-column: 7 / span 6; }
.lead-feature__title { display: grid; gap: 0.6rem; }
.lead-feature__kicker { font-style: italic; font-size: var(--step-2); color: var(--gold-soft); font-weight: 400; }
.lead-feature__name { font-size: var(--step-5); line-height: 0.95; letter-spacing: -0.03em; }
.lead-feature__quote { margin-top: 2.5rem; padding-top: 1.5rem; position: relative; max-width: 34rem; }
.lead-feature__quote::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 1px; background: var(--gold); }
.lead-feature__quote p { font-family: var(--f-display); font-style: italic; font-size: var(--step-1); line-height: 1.5; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.facts > div { border-top: 1px solid var(--line-inv); padding-top: 0.9rem; }
.facts dt { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); font-weight: 600; }
.facts dd { font-family: var(--f-display); font-size: 1.1rem; margin-top: 0.35rem; line-height: 1.3; }
@media (max-width: 900px) {
  .lead-feature__portrait, .lead-feature__body { grid-column: 1 / -1; }
  .lead-feature__portrait { margin-bottom: 3rem; max-width: 30rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts > div { padding-block: 0.9rem; }
}

/* ---------- Home: weekly gathering ---------- */
.weekly { display: grid; grid-template-columns: 7fr 5fr; min-height: min(88vh, 820px); background: var(--paper); }
.weekly__media { min-height: 420px; }
.weekly__media img { position: absolute; inset: 0; filter: grayscale(0.3) sepia(0.12) contrast(1.02); }
.weekly__panel { padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.weekly__panel .gold { color: var(--gold-ink); font-style: italic; }
.weekly__text { max-width: 30rem; }
@media (max-width: 900px) { .weekly { grid-template-columns: 1fr; } .weekly__media { min-height: 62vw; } }

/* ---------- Home: Founding Faith teaser ---------- */
.ff-teaser { background: var(--paper-2); overflow: hidden; }
.ff-teaser__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.ff-date { grid-column: 1 / span 4; display: grid; justify-items: start; border-right: 1px solid var(--line-strong); padding-right: var(--gutter); }
.ff-date__month { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); }
.ff-date__day { font-family: var(--f-display); font-variation-settings: "opsz" 20; font-size: clamp(8rem, 4rem + 12vw, 17rem); line-height: 0.82; letter-spacing: -0.05em; font-weight: 500; margin-block: 0.5rem 1rem; }
.ff-date__year { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); }
.ff-teaser__body { grid-column: 6 / span 7; }
.ff-teaser__body h2 em { color: var(--gold-ink); }
.ff-teaser__q { margin-top: 1.75rem; font-family: var(--f-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; max-width: 32ch; text-wrap: balance; }
.ff-speakers { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-top: 2rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.ff-speakers li { font-family: var(--f-display); font-size: 1.15rem; }
.ff-speakers li + li::before { content: "·"; color: var(--gold-ink); margin-inline: 0.8rem; }
.ff-teaser__meta { margin-top: 1.25rem; font-size: 0.92rem; color: var(--text-mute); line-height: 1.7; }
.is-past .ff-date__day { color: var(--text-mute); }
@media (max-width: 900px) {
  .ff-date { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line-strong); padding: 0 0 1.5rem; margin-bottom: 2.5rem; grid-template-columns: auto 1fr; align-items: end; column-gap: 1.25rem; }
  .ff-date__day { grid-row: 1 / span 2; font-size: 7rem; margin: 0; }
  .ff-teaser__body { grid-column: 1 / -1; }
}

/* ---------- Home: reading teaser ---------- */
.read-teaser { overflow: hidden; background: radial-gradient(70% 90% at 75% 45%, #2a2621 0%, var(--ink) 70%); }
.read-teaser__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: center; }
.read-teaser h2 em { color: var(--gold-soft); }
.mini-shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.4rem, 0.8vw, 0.9rem); padding: 3rem 0 2.2rem; perspective: 1200px; text-decoration: none; }
.mini-shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.4rem; height: 12px; background: linear-gradient(#3b362e, #1a1814); box-shadow: 0 22px 40px rgba(0,0,0,0.65); border-top: 1px solid rgba(210,178,122,0.4); }
.mini-shelf::before { content: ""; position: absolute; left: 20%; right: 20%; top: -10%; height: 90%; background: radial-gradient(closest-side, rgba(210,178,122,0.16), transparent); pointer-events: none; }
.mini-shelf img {
  width: clamp(76px, 8.6vw, 142px); height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  position: relative; z-index: 1; transform-origin: 50% 100%;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 800ms var(--ease-out);
}
.mini-shelf img:nth-child(1) { transform: rotateY(34deg); }
.mini-shelf img:nth-child(2) { transform: rotateY(26deg); }
.mini-shelf img:nth-child(3) { transform: rotateY(16deg); }
.mini-shelf img:nth-child(4) { transform: translateZ(80px) translateY(-8px); z-index: 2; box-shadow: 0 30px 50px rgba(0,0,0,0.7); }
.mini-shelf img:nth-child(5) { transform: rotateY(-16deg); }
.mini-shelf img:nth-child(6) { transform: rotateY(-26deg); }
.mini-shelf img:nth-child(7) { transform: rotateY(-34deg); }
@media (hover: hover) {
  .mini-shelf:hover img:nth-child(-n+3) { transform: rotateY(12deg) translateY(-4px); }
  .mini-shelf:hover img:nth-child(n+5) { transform: rotateY(-12deg) translateY(-4px); }
  .mini-shelf:hover img:nth-child(4) { transform: translateZ(110px) translateY(-16px); }
}
@media (max-width: 900px) {
  .read-teaser__grid { grid-template-columns: 1fr; }
  .mini-shelf { margin-top: 2rem; }
  .mini-shelf img:nth-child(n+6) { display: none; }
  .mini-shelf img { width: 22vw; }
}

/* ---------- Home: initiatives ---------- */
.init-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); }
.bam-card, .sitg-card { position: relative; display: flex; flex-direction: column; text-decoration: none; min-height: 460px; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); overflow: hidden; }
.bam-card { background: var(--ink); color: var(--text-inv); }
.bam-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 90% 0%, rgba(210,178,122,0.16), transparent 60%); transition: opacity 600ms var(--ease-out); opacity: 0.7; }
.bam-card > * { position: relative; }
.bam-card__ext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-inv-mute); padding-bottom: 1rem; border-bottom: 1px solid var(--line-inv); }
.bam-card__ext .label { color: var(--gold-soft); }
.bam-card__title { margin-top: auto; padding-top: 3rem; font-family: var(--f-display); font-size: clamp(3rem, 1.6rem + 4.4vw, 5.6rem); line-height: 0.92; letter-spacing: -0.03em; display: grid; justify-items: start; }
.bam-card__title em { color: var(--gold-soft); font-weight: 400; transition: transform 600ms var(--ease-out); }
.bam-card__sub { margin-top: 1.25rem; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; }
.bam-card__desc { margin-top: 0.5rem; color: var(--text-inv-mute); max-width: 32rem; }
.bam-card__cta { margin-top: 2rem; display: inline-flex; gap: 0.6rem; align-items: center; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.bam-card__cta .arrow, .sitg-card__cta .arrow { transition: transform 320ms var(--ease-out); }
@media (hover: hover) {
  .bam-card:hover::before { opacity: 1; }
  .bam-card:hover .bam-card__cta .arrow { transform: translateX(4px); }
  .bam-card:hover .bam-card__title em { transform: translateX(0.12em); }
  .sitg-card:hover .sitg-card__gap { transform: scaleX(1); }
  .sitg-card:hover .sitg-card__cta .arrow { transform: translateX(4px); }
}
.sitg-card { background: var(--paper-2); border: 1px solid var(--line); }
.sitg-card__type { margin-top: auto; font-family: var(--f-display); font-size: clamp(2.8rem, 1.6rem + 3.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; display: grid; justify-items: start; }
.sitg-card__type > span:last-child { font-style: italic; }
.sitg-card__gap { display: block; width: 100%; height: 2px; margin-block: 0.9rem; background: linear-gradient(90deg, var(--gold) 0 30%, transparent 30% 42%, var(--gold) 42%); transform: scaleX(0.3); transform-origin: left; transition: transform 900ms var(--ease-editorial); }
.sitg-card__cta { margin-top: 2rem; display: inline-flex; gap: 0.6rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 900px) { .init-grid { grid-template-columns: 1fr; } .bam-card, .sitg-card { min-height: 380px; } }

/* ---------- Home: final word ---------- */
.final { overflow: hidden; }
.final__glow { position: absolute; left: 50%; top: -30%; width: 120vw; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(210,178,122,0.13), transparent); pointer-events: none; }
.final .verse { max-width: 26ch; margin-inline: auto; }
.join { margin-top: clamp(5rem, 3rem + 6vw, 9rem); }
.join__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); padding-top: 3rem; align-items: start; }
@media (max-width: 800px) { .join__grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Portrait arrival uses the image, separate from its parallax wrapper. */
@keyframes hero-portrait-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.js .hero-plane--portrait img { animation: hero-portrait-arrive 1600ms cubic-bezier(.22, 1, .36, 1) 180ms both; }
.js.intro-playing .hero-plane--portrait img { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-plane--portrait img, .js.intro-playing .hero-plane--portrait img { animation: none; opacity: 1; transform: none; }
}