/* ==========================================================================
   pages/home.css: sections that only appear on the home page.
   ========================================================================== */

/* ---------- Hero ----------
   Two Sunday photographs side by side behind the words: the children singing
   at the front of the sanctuary on the left, the congregation in praise on
   the right, blended where they meet. The words sit centered over the seam,
   on a wine wash that is deepest behind them. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; align-items: center;
  --hero-h: clamp(560px, min(100vh - 118px, 75vw), 860px);
  min-height: var(--hero-h);
  color: #f6efe4;
  background: linear-gradient(180deg, #5c1631 0%, #400e22 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; transform-origin: 50% 0%; }
.hero-bg img { position: absolute; max-width: none; }
/* Both photographs are sized from the hero's height (cqh) and placed so the
   ceiling fan in each one lands on exactly the same spot: the fan hub sits at
   (1370, 108) in the children photo and (615, 280) in the praise photo, and
   the praise photo is drawn 1.5x larger so the two fans are the same size.
   Where they cross, the praise photo fades in over the children. */
.hero-bg .hb-left { left: -12cqh; top: 0; width: auto; height: 100cqh; }
.hero-bg .hb-right {
  left: 25.37cqh; top: -26.02cqh; width: auto; height: 126.7cqh;
  -webkit-mask-image: linear-gradient(90deg, transparent 26.6cqh, #000 66.6cqh);
          mask-image: linear-gradient(90deg, transparent 26.6cqh, #000 66.6cqh);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 62% at 50% 52%, rgba(62, 10, 30, 0.6) 0%, rgba(62, 10, 30, 0.46) 55%, rgba(62, 10, 30, 0) 100%),
    linear-gradient(90deg, rgba(62, 10, 30, 0.42) 0%, rgba(62, 10, 30, 0.22) 22%, rgba(62, 10, 30, 0.22) 78%, rgba(62, 10, 30, 0.38) 100%),
    linear-gradient(0deg, rgba(40, 6, 18, 0.5) 0%, rgba(40, 6, 18, 0) 40%);
}

/* "Greater Union Missionary Baptist Church ✝ Since 1970": heavier type, with the brass cross in
   place of a dot. */
.hero-kicker { font-weight: 700; }
.hk-since { display: inline-flex; align-items: center; gap: 0.7em; }
.kicker-cross { width: 9px; height: 12px; margin-inline: 0.1em; background: var(--cross-brass) center / contain no-repeat; }
/* Phones: the church's name on its own centered line(s), "✝ Since 1970"
   beneath it, without the bar mark. */
@media (max-width: 560px) {
  .hero-kicker { flex-direction: column; gap: 0.4rem; letter-spacing: 0.13em; font-size: 0.84rem; text-align: center; }
  .hero-kicker::before { display: none; }
}
/* The words, centered. A soft shadow under the letters keeps them crisp over
   the lighter wash. */
.hero-copy { text-shadow: 0 1px 2px rgba(30, 4, 12, 0.55), 0 2px 18px rgba(30, 4, 12, 0.5); }
.hero-copy .btn { text-shadow: none; }
.hero-inner { position: relative; padding-block: clamp(2.5rem, 5vw, 4rem); }
.hero-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.hero-copy .btn-row { justify-content: center; }
.hero-quote {
  font-size: clamp(2.6rem, 1rem + 3.9vw, 4.7rem);
  line-height: 0.98; letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  text-wrap: initial;
  color: #fbf6ee;
}
.q-line { display: block; }
/* Desktop: "There's no place, like this place," runs on one line. The two
   halves are inline blocks, so they still rise in one after the other, and on
   a narrow window they simply wrap back onto two lines. */
@media (min-width: 861px) {
  .hero-copy { max-width: 72rem; }
  .hero-quote { font-size: clamp(2.6rem, 0.6rem + 3.6vw, 4.4rem); }
  .q-lead { display: inline-block; }
}
/* Quotation marks in brass. */
.q-mark { color: var(--brass-light); }
.q-lead em { font-style: italic; color: var(--brass-light); }
.q-soft {
  margin: 0.6em 0 0.3em;
  font-family: var(--f-body); font-style: italic; font-size: 0.4em; line-height: 1.3; letter-spacing: 0;
  color: rgba(246, 239, 228, 0.82);
}
.q-close { font-size: 0.6em; line-height: 1.05; color: var(--brass-light); }
.hero-cite { margin: 0 auto 1.8rem; max-width: 100%; }
.hero-cite .hero-quote { margin-bottom: 0.9rem; }
/* The credit sits centered under the quote: a small brass cross, "Pastor" in
   small gold capitals, and his name. */
.hero .attribution {
  display: flex; justify-content: center; align-items: baseline; gap: 0.55rem;
  margin: 0;
}
.hero .attribution::before {
  /* Sits on the same baseline as "PASTOR", just a touch taller than its
     capitals, like a cross set in the type. */
  content: ""; width: 7.5px; height: 10px; margin-right: 0.15rem;
  background: var(--cross-brass) center / contain no-repeat;
}
.attr-role {
  font-family: var(--f-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem;
  color: var(--brass-light);
}
.attr-name { font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.2; color: #fbf6ee; }
.hero .lede { max-width: 31em; margin: 0 auto 2rem; color: #fffaf2; }

/* Phones and small tablets: the congregation in praise across the top, the
   children singing faintly behind the words below it. */
@media (max-width: 860px) {
  .hero { display: block; min-height: 0; }
  .hero-bg img { object-fit: cover; }
  .hero-bg .hb-right { top: 0; left: 0; width: 100%; height: min(54vw, 380px); object-position: 60% 80%; -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%); mask-image: linear-gradient(180deg, #000 65%, transparent 100%); }
  .hero-bg .hb-left { left: 0; object-position: 28% 62%; top: min(34vw, 240px); width: 100%; height: calc(100% - min(34vw, 240px)); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .hero-bg::after { background: linear-gradient(180deg, rgba(62, 10, 30, 0.15) 0%, rgba(62, 10, 30, 0.42) 35%, rgba(62, 10, 30, 0.64) 55%, rgba(62, 10, 30, 0.72) 100%); }
  .hero-inner { padding-block: min(30vw, 210px) 3.5rem; }
  .hero-copy { max-width: none; }
  .hero-quote { font-size: clamp(2.2rem, 0.6rem + 7.4vw, 3.4rem); }
  .q-soft { font-size: 0.48em; }
}

/* ---------- Hymn board ("This Week at Greater Union") ----------
   Modeled on the wooden number boards that hang in sanctuaries. Rows share
   one grid (subgrid) so the times right-align, the AM/PM plates stack in a
   column, and every event name starts at the same edge. */
.split--board { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 860px) { .split--board { grid-template-columns: minmax(0, 1fr); } }

.hymn-board {
  --notch: 34px;
  position: relative;
  display: grid; grid-template-columns: 3.6rem max-content minmax(0, 1fr); column-gap: 0.8rem;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.025) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 23px),
    linear-gradient(160deg, var(--walnut-2), var(--walnut) 55%, #2a170e);
  color: #f5ecdc;
  padding: calc(var(--notch) + 2.4rem) clamp(1.1rem, 3vw, 2rem) 2rem;
  clip-path: polygon(50% 0, 100% var(--notch), 100% 100%, 0 100%, 0 var(--notch));
  box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.22);
  filter: drop-shadow(0 26px 34px rgba(36, 22, 27, 0.35));
}
.hymn-board::before {
  /* inner carved line */
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(232, 200, 115, 0.35);
  clip-path: inherit;
  pointer-events: none;
}
.hymn-board h3 {
  text-align: center; font-family: var(--f-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.32em; font-size: 0.95rem; color: var(--brass-light);
  margin-bottom: 1.4rem;
}
.hymn-board h3 small { display: block; font-family: var(--f-display); text-transform: none; letter-spacing: 0; font-size: 1.7rem; color: #f5ecdc; margin-top: 0.35rem; }
.hymn-board > h3, .hymn-board > .hb-foot { grid-column: 1 / -1; }
.hb-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: center;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.hb-day {
  font-family: var(--f-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 0.85rem; color: var(--brass-light);
}
.hb-row.is-today .hb-day::after {
  content: "Today"; display: block; margin-top: 4px;
  font-size: 0.68rem; letter-spacing: 0.14em; color: var(--crimson-night);
  background: var(--brass-light); padding: 1px 6px; width: max-content; border-radius: 2px;
}
.hb-cards { display: flex; gap: 4px; justify-content: flex-end; align-items: stretch; }
.hb-card {
  background: linear-gradient(#1a1213, #0e0a0b);
  color: #fff;
  font-family: var(--f-label); font-weight: 700;
  font-size: clamp(1.45rem, 1.15rem + 0.8vw, 1.8rem);
  line-height: 1;
  width: 1.3em; padding: 0.22em 0 0.18em;
  text-align: center;
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.hb-card.sep { width: 0.55em; background: none; box-shadow: none; padding-inline: 0; }
/* AM / PM: a small brass plate slotted beside the number cards. */
.hb-ampm {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; padding: 0 0.5em; min-width: 2.6em;
  font-family: var(--f-label); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em;
  color: var(--crimson-night);
  background: linear-gradient(180deg, #ffdc78 0%, #f0c04a 55%, #d9a22c 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(0, 0, 0, 0.45);
}
.hb-what { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.1; }
.hb-what span { display: block; font-family: var(--f-label); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 236, 220, 0.65); margin-top: 3px; }
.hb-foot {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(232, 200, 115, 0.35);
  font-family: var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.86rem; text-align: center; color: rgba(245, 236, 220, 0.85);
}
.hb-foot strong { color: var(--brass-light); font-weight: 700; }
.hb-foot [data-next-communion] { letter-spacing: 0.1em; }
/* Phones: each row becomes two clean lines.
   Line 1: day (+ Today tag) on the left, the time pinned right.
   Line 2: the event name and its note, full width. */
@media (max-width: 560px) {
  .hymn-board { display: block; }
  .hb-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "day time" "what what";
    align-items: center; gap: 0.55rem 0.75rem;
    padding: 0.95rem 0;
  }
  .hb-day { grid-area: day; display: flex; align-items: center; gap: 0.55rem; }
  .hb-row.is-today .hb-day::after { margin-top: 0; }
  .hb-cards { grid-area: time; gap: 3px; }
  .hb-card { font-size: 1.3rem; }
  .hb-ampm { font-size: 0.82rem; min-width: 2.4em; margin-left: 3px; }
  .hb-what { grid-area: what; font-size: 1.3rem; }
  .hb-what span { margin-top: 4px; }
  .hb-foot { font-size: 0.8rem; line-height: 1.6; }
}

/* ---------- From the Pastor's Pen ----------
   The wording is kept word for word, so the length is handled by layout. The
   tall portrait stays in view beside the letter while it's read. */
.letter--pen { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.letter--pen .portrait { align-self: start; position: sticky; top: 110px; margin: 0.5rem 1.4rem 1.4rem 0; }
.letter--pen .portrait img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 18%; }
.letter-text { max-width: 38rem; }
.letter-text p { font-size: 1.06rem; line-height: 1.75; color: var(--ink); margin: 0 0 1em; }
.letter-text .dropcap::first-letter {
  font-family: var(--f-display); float: left; font-size: 3.9em; line-height: 0.8; padding: 0.08em 0.12em 0 0; color: var(--crimson);
}

/* The Leadership-page message continues the same reading column as an inset
   card, marked by a crimson quote mark, with the signature aligned to the
   text edge. */
.pen-note {
  position: relative;
  max-width: 38rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 2.5vw, 1.8rem);
  background: #fbf6ec;
  border: 1px solid var(--line); border-top: 3px solid var(--crimson);
  border-radius: 2px;
  box-shadow: 0 14px 30px rgba(36, 22, 27, 0.07);
}
.pen-note-mark {
  position: absolute; top: -0.42em; right: 1.1rem;
  font-family: var(--f-display); font-size: 5.5rem; line-height: 1; color: var(--crimson);
  pointer-events: none;
}
.pen-note .kicker { margin-bottom: 0.9rem; }
.pen-note-text { font-size: 1.06rem; line-height: 1.75; color: var(--ink); margin: 0 0 0.6rem; }
/* Pull the script back so the first stroke lines up with the text edge,
   and keep it snug against the names underneath. */
.pen-note .signature { margin: 0 0 -0.15em -0.36em; }
.pen-note-names { margin: 0; }

@media (max-width: 680px) {
  .letter--pen { grid-template-columns: minmax(0, 1fr); }
  .letter--pen .portrait { max-width: 360px; margin: 0 1.4rem 1.4rem 0; position: relative; top: 0; }
}

/* ---------- 2026 theme band ("What to Do in Dark Times?") ---------- */
.midnight {
  position: relative;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff 99%, transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, 0.8) 99%, transparent),
    radial-gradient(1.5px 1.5px at 44% 14%, #fff 99%, transparent),
    radial-gradient(1px 1px at 61% 40%, rgba(255, 255, 255, 0.7) 99%, transparent),
    radial-gradient(1px 1px at 78% 12%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 89% 56%, rgba(255, 255, 255, 0.9) 99%, transparent),
    radial-gradient(1px 1px at 7% 84%, rgba(255, 255, 255, 0.6) 99%, transparent),
    radial-gradient(1px 1px at 53% 88%, rgba(255, 255, 255, 0.5) 99%, transparent),
    radial-gradient(1px 1px at 36% 36%, rgba(255, 255, 255, 0.6) 99%, transparent),
    radial-gradient(ellipse at 75% 110%, rgba(198, 154, 59, 0.28), transparent 55%),
    linear-gradient(180deg, #08040d, var(--midnight) 50%, #22091a);
  color: #f6eee2;
  overflow: hidden;
}
.midnight-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.midnight h2 { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); }
.midnight h2 em { color: var(--brass-light); }
.midnight blockquote {
  margin: 1.6rem 0 0; padding-left: 1.4rem; border-left: 3px solid var(--brass);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); font-style: italic; color: rgba(246, 238, 226, 0.9);
}
/* The sanctuary at night, its slit windows glowing. */
.night-church { display: block; width: 100%; max-width: 440px; margin-inline: auto; }
.night-church .glow rect { fill: var(--brass-light); animation: flicker 5s ease-in-out infinite; }
.night-church .glow rect:nth-child(3n) { animation-delay: -1.7s; }
.night-church .glow rect:nth-child(4n+1) { animation-delay: -3.1s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.72; } 60% { opacity: 0.95; } }
@media (max-width: 860px) { .midnight-grid { grid-template-columns: 1fr; } .night-church { max-width: 240px; } }

/* ---------- "Look for the white steeple" strip ---------- */
.visit-strip { display: grid; grid-template-columns: 1.1fr 0.9fr; background: var(--crimson-deep); color: #fbf6ee; }
.visit-strip .photo { min-height: 360px; position: relative; }
.visit-strip .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.visit-strip .copy { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); }
@media (max-width: 860px) { .visit-strip { grid-template-columns: 1fr; } .visit-strip .photo { min-height: 280px; } }