/* =============================================================================
   FOR GENERATIONS — Rock site chrome
   Header, primary nav, footer, and page scaffolding for the ForGenerations
   theme. Plain CSS, loaded after for-generations.css. Everything here reads
   the brand's semantic variables (--fg-ink, --fg-line, --fg-accent, ...) so it
   follows whatever palette is active on <html> or <body>.
   ============================================================================= */

/* --- Root font size ---------------------------------------------------------- */
/* Bootstrap 3 sets html { font-size: 10px } so its own px-based type is
   unaffected by rem. The brand system is rem-based (1rem = 16px), so without
   this every fg-* size renders at 62.5%. Restoring 16px is safe for Rock's
   external blocks, which are sized in px. This file loads after the compiled
   theme.css, so it wins. */
html { font-size: 16px; scroll-padding-top: 4.75rem; }   /* sticky header height, so #anchors land below it */

/* --- Skip link --------------------------------------------------------------- */
.fg-skip-link {
  position: absolute;
  top: -100%;
  left: var(--fg-space-4);
  z-index: 1000;
  padding: var(--fg-space-2) var(--fg-space-4);
  background: var(--fg-dark);
  color: var(--fg-cream);
  font-size: var(--fg-text-sm);
  text-decoration: none;
}
.fg-skip-link:focus { top: var(--fg-space-4); outline: 2px solid var(--fg-cream); }

/* --- Site header ------------------------------------------------------------- */
.fg-site-header {
  position: sticky;   /* prototype nav stays pinned; anchors are offset via scroll-padding-top on html */
  top: 0;
  z-index: 20;
  background-color: var(--fg-surface);
  color: var(--fg-ink);
  border-bottom: var(--fg-hairline) solid var(--fg-line);
}
.fg-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fg-space-5);
  min-height: 4.5rem;
}
.fg-site-header__brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg-ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.fg-site-header__wordmark {
  /* 2026-09-22 handoff: the tree + wordmark lockup at 40px, not the 20px text-only mark */
  --fg-logo-size: 2.5rem;
  --fg-logo-ratio: 1.638;
  --fg-logo-src: url("../Assets/Images/logo-secondary.svg");
}

/* Primary nav — markup comes from Assets/Lava/PageNav.lava via the Page Menu block */
.fg-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--fg-space-6);
}
.fg-nav {
  display: flex;
  align-items: center;
  gap: var(--fg-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fg-nav__item > a {
  display: inline-block;
  padding: var(--fg-space-2) 0;
  font-family: var(--fg-font-body);
  font-size: var(--fg-text-xs);
  font-weight: var(--fg-weight-medium);
  letter-spacing: var(--fg-tracking-wide);
  text-transform: uppercase;
  color: var(--fg-ink);
  text-decoration: none;
  border-bottom: var(--fg-hairline) solid transparent;
  transition: border-color var(--fg-duration-2) var(--fg-ease);
}
.fg-nav__item > a:hover,
.fg-nav__item > a:focus-visible { border-bottom-color: var(--fg-accent); }
.fg-nav__item.is-current > a  { border-bottom-color: var(--fg-ink); }

/* Login zone: keep Rock's Login Status block quiet and small */
.fg-site-header__login { font-size: var(--fg-text-xs); }
.fg-site-header__login .navbar-nav,
.fg-site-header__login .nav { margin: 0; }
.fg-site-header__login .navbar-nav > li { float: none; }
.fg-site-header__login .navbar-nav > li > a {
  padding: var(--fg-space-2) 0;
  color: var(--fg-ink-muted);
  letter-spacing: var(--fg-tracking-wide);
  text-transform: uppercase;
  font-size: var(--fg-text-xs);
}
.fg-site-header__login .navbar-nav > li > a:hover { background: transparent; color: var(--fg-ink); }
.fg-site-header__login .dropdown-menu {
  border-radius: 0;
  border: var(--fg-hairline) solid var(--fg-line);
  box-shadow: var(--fg-shadow-card);
  background: var(--fg-cream);
  color: var(--fg-charcoal);
}

/* Mobile toggle */
.fg-site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: var(--fg-hairline) solid var(--fg-line);
  color: var(--fg-ink);
  font-size: 1.375rem;
  cursor: pointer;
}
@media (max-width: 47.999rem) {
  .fg-site-header__toggle { display: inline-flex; }
  .fg-site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--fg-space-4) var(--fg-gutter) var(--fg-space-6);
    background-color: var(--fg-surface);
    border-bottom: var(--fg-hairline) solid var(--fg-line);
  }
  .fg-site-header.is-open .fg-site-header__nav { display: flex; }
  .fg-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .fg-nav__item > a {
    display: block;
    padding: var(--fg-space-3) 0;
    border-bottom: var(--fg-hairline) solid var(--fg-line);
    font-size: var(--fg-text-sm);
  }
  .fg-nav__item.is-current > a { border-bottom-color: var(--fg-line); color: var(--fg-accent); }
  .fg-site-header__login { padding-top: var(--fg-space-4); }
}

/* --- Dark header (Site.Master puts fg-surface-dark on .fg-site-header) -------- */
/* Olive bar with Cream wordmark and links, as the prototype. Links sit at 66%
   opacity and come to full on hover instead of the underline; the page titled
   "Commit" gets is-cta from PageNav.lava and renders as the Cream pill. The
   mobile panel has to be explicitly dark: fg-surface-dark sets the ink but not
   --fg-surface, which the panel background reads. */
.fg-site-header.fg-surface-dark {
  /* .fg-site-header above sets background-color: var(--fg-surface) and this file loads
     after the brand layer, so at equal specificity it would beat .fg-surface-dark.
     Restate the dark ground here at (0,2,0). */
  background-color: var(--fg-dark);
  color: var(--fg-cream);
  border-bottom: 0;
}
.fg-site-header.fg-surface-dark .fg-nav__item > a { color: var(--fg-cream); opacity: 0.66; border-bottom-color: transparent; transition: opacity var(--fg-duration-2) var(--fg-ease); }
.fg-site-header.fg-surface-dark .fg-nav__item > a:hover,
.fg-site-header.fg-surface-dark .fg-nav__item > a:focus-visible,
.fg-site-header.fg-surface-dark .fg-nav__item.is-current > a { opacity: 1; border-bottom-color: transparent; }
.fg-site-header.fg-surface-dark .fg-nav__item.is-cta > a {
  opacity: 1;
  padding: 0.5625rem 1.125rem;
  border: 0;
  border-radius: var(--fg-radius-pill);   /* pill is the one radius the brand allows, for buttons/tags */
  background-color: var(--fg-cream);
  color: var(--fg-dark);
  letter-spacing: var(--fg-tracking-wide);
  line-height: 1;
}
.fg-site-header.fg-surface-dark .fg-nav__item.is-cta > a:hover { background-color: var(--fg-linen); }
.fg-site-header.fg-surface-dark .fg-site-header__toggle { border-color: var(--fg-line); color: var(--fg-cream); }
.fg-site-header.fg-surface-dark .fg-site-header__login .navbar-nav > li > a { color: var(--fg-ink-muted); }
@media (max-width: 47.999rem) {
  .fg-site-header.fg-surface-dark .fg-site-header__nav { background-color: var(--fg-dark); border-bottom: var(--fg-hairline) solid var(--fg-line); }
  .fg-site-header.fg-surface-dark .fg-nav__item > a { opacity: 0.85; border-bottom-color: var(--fg-line); }
  .fg-site-header.fg-surface-dark .fg-nav__item.is-current:not(.is-cta) > a { color: var(--fg-cream); }   /* the Commit pill keeps its Olive text when it is the current page (review 2026-09-25) */
  .fg-site-header.fg-surface-dark .fg-nav__item.is-cta { padding-top: var(--fg-space-4); }
  .fg-site-header.fg-surface-dark .fg-nav__item.is-cta > a { display: inline-block; }
}

/* --- Page scaffolding -------------------------------------------------------- */
.fg-page { background-color: var(--fg-surface); }

/* Page title band. Hidden entirely when Rock renders an empty <h1> (Show Title off). */
.fg-page-title { padding-top: clamp(2.5rem, 6vw, 5rem); }
.fg-page-title:has(h1.pagetitle:empty) { display: none; }
.fg-page-title .breadcrumb {
  padding: 0;
  margin: calc(var(--fg-space-6) * -1) 0 var(--fg-space-6);
  background: transparent;
  font-size: var(--fg-text-xs);
  letter-spacing: var(--fg-tracking-wide);
  text-transform: uppercase;
  color: var(--fg-ink-muted);
}
.fg-page-title .breadcrumb > li + li:before { color: var(--fg-line); }

/* Section B/C/D grid: only takes space when at least one zone has a block */
.fg-section-grid:not(:has(.zone-content > *)) { display: none; }
.fg-section-grid { padding-block: clamp(2rem, 5vw, 4rem); }
.fg-section-grid .zone-content:empty { display: none; }

/* Rock's Feature zone is used for full-bleed heroes; make sure nothing pads it */
.zone-instance > .zone-content { min-width: 0; }

/* A ready-made hero band for HTML blocks in the Feature zone:
   <section class="fg-hero fg-surface-dark fg-texture fg-texture--treerings"> … </section> */
.fg-hero {
  position: relative;
  padding-block: clamp(4rem, 12vw, 10rem);
  overflow: hidden;
}
.fg-hero--media { padding: 0; }
.fg-hero--media .fg-media { min-height: clamp(24rem, 70vh, 44rem); }
.fg-hero--media .fg-media__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* --- Site footer ------------------------------------------------------------- */
/* Prototype footer. Grid 1.4fr / 1fr: brand column (logo, then the "Footer" zone: the
   Athens Church mark and address) and the "Footer Links" zone (vertical list). One ring
   watermark bled off the top-right corner. Logo is the tagline-less primary mark. */
.fg-site-footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem;
}
.fg-site-footer .fg-ring-mark { z-index: 0; }
.fg-site-footer > .fg-container { z-index: 1; }
.fg-site-footer__grid {
  display: grid;
  gap: var(--fg-space-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 52rem) {
  .fg-site-footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); }
}
.fg-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--fg-space-2);
  align-items: flex-start;
}
.fg-site-footer__logo {
  /* tree + wordmark only, as the prototype footer; the tagline rule is not repeated here */
  --fg-logo-src: url("../Assets/Images/logo-primary-notagline.svg");
  width: min(260px, 100%);
  height: auto;
  aspect-ratio: 1.668;
  color: var(--fg-cream);
}
.fg-site-footer__brand p { max-width: none; }
.fg-site-footer__links { font-size: var(--fg-text-sm); }
.fg-footer-links { list-style: none; margin: var(--fg-space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--fg-space-3); }
.fg-footer-links a { color: var(--fg-ink-muted); text-decoration: none; transition: color var(--fg-duration-2) var(--fg-ease); }
.fg-footer-links a:hover, .fg-footer-links a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--fg-line); }
.fg-site-footer .fg-rule { margin-block: clamp(2.5rem, 4vw, 3.5rem) var(--fg-space-4); }
.fg-site-footer__fineprint { margin: 0; max-width: none; font-size: var(--fg-text-xs); letter-spacing: 0.06em; color: var(--fg-ink-muted); }
.fg-site-footer__fineprint a { color: inherit; }
.fg-site-footer__fineprint p { margin: 0; max-width: none; font: inherit; letter-spacing: inherit; color: inherit; }   /* block content */
/* Kept for any interior page still using the older footer idiom */
.fg-site-footer__content { font-size: var(--fg-text-sm); }
.fg-site-footer__content a { color: inherit; }

/* --- Rock block content without fg- classes ---------------------------------- */
/* The brand layer zeroes heading margins so .fg-* layouts control rhythm. Stock
   Rock output (Workflow Entry, Registration, HTML blocks written without classes)
   needs the rhythm back. Class-less headings only, so fg- layouts are untouched. */
.fg-root :is(h1, h2, h3, h4, h5, h6):not([class]) { margin-bottom: 0.5em; }
.fg-root :is(h1, h2, h3, h4, h5, h6):not([class]) + p { margin-top: 0; }
.fg-root label { font-weight: var(--fg-weight-medium); }
.fg-root .form-group { margin-bottom: var(--fg-space-5); }
.fg-root .help-block { color: var(--fg-ink-muted); font-size: var(--fg-text-xs); }

/* --- Rock admin compatibility ------------------------------------------------ */
/* The brand's paragraph measure should not squeeze Rock's block-config dialogs
   or the admin footer, which render inside body.fg-root. */
#cms-admin-footer p,
.modal p,
.rock-modal p,
.block-configuration p { max-width: none; }
#cms-admin-footer,
#cms-admin-footer * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Rock's page-zone editor outlines use position: relative on zones; harmless.
   Keep the fg-titled bleed from pushing the body wider than the viewport. */
.fg-page { overflow-x: clip; }

/* --- Home page components ---------------------------------------------------- */
/* Used by content/home/*.html. Generic enough to reuse on interior pages. */
.fg-mt-6 { margin-top: var(--fg-space-6); }

/* Hero over photography */
/* The photo is pinned so the hero's height comes from min-height alone,
   not from the image's intrinsic aspect ratio. */
.fg-hero__media { min-height: clamp(28rem, 72vh, 44rem); }
.fg-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(var(--fg-image-saturate)); }
.fg-hero__copy { max-width: 42rem; display: grid; gap: var(--fg-space-5); padding-bottom: clamp(1rem, 4vw, 3rem); }
.fg-hero__copy .fg-display { max-width: 14ch; }
/* Script as the second line of a display headline (booklet cover treatment).
   Sized to the serif above it; De Lionist has a small x-height, so it runs larger. */
.fg-hero__script { display: block; white-space: nowrap; max-width: none; font-size: 0.9em; line-height: 1.2; margin: -0.05em 0 0.4em; letter-spacing: 0.01em; padding: 0 0.15em 0 0.06em; }  /* De Lionist descenders are long swashes; line-height reserves room */
/* Script replacing one word inside a running headline, e.g. The *Story* of Athens Church.
   Kept at the heading's own line-height so it never collides with the next line. */
.fg-h2 .fg-script, .fg-h1 .fg-script { display: inline-block; font-size: 1.15em; line-height: 1.1; vertical-align: -0.05em; margin-bottom: 0.35em; padding: 0 0.1em; }
.fg-hero__copy .fg-eyebrow { color: var(--fg-ink-muted); }
.fg-hero__btn-primary { background-color: var(--fg-cream); border-color: var(--fg-cream); color: var(--fg-charcoal); }
.fg-hero__btn-primary:hover { background-color: var(--fg-linen); border-color: var(--fg-linen); }
.fg-hero--media .fg-ring-mark { z-index: 2; }

/* Bulleted goals inside an inset */
.fg-goal-list { margin: var(--fg-space-3) 0 0; padding-left: 1.1rem; display: grid; gap: var(--fg-space-3); font-size: var(--fg-text-sm); }
.fg-goal-list li::marker { color: var(--fg-accent); }

/* Impact pillars */
.fg-impact-grid { gap: var(--fg-space-6); align-items: start; }
.fg-impact { display: grid; gap: var(--fg-space-5); padding: 0; border: 0; border-top: var(--fg-hairline) solid var(--fg-ink); padding-top: var(--fg-space-5); background: transparent; }
.fg-impact__stats { margin: 0; display: grid; gap: var(--fg-space-4); }
.fg-impact__stats dt { font-family: var(--fg-font-display); font-size: var(--fg-text-h1); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fg-impact__stats dt sup { font-size: 0.4em; vertical-align: super; letter-spacing: 0; }
.fg-impact__stats dd { margin: var(--fg-space-1) 0 0; font-size: var(--fg-text-sm); color: var(--fg-ink-muted); max-width: 30ch; }

/* Six Sundays */
.fg-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); border-top: var(--fg-hairline) solid var(--fg-line); }
.fg-weeks li { display: grid; gap: var(--fg-space-2); padding: var(--fg-space-4) var(--fg-space-4) var(--fg-space-4) 0; border-bottom: var(--fg-hairline) solid var(--fg-line); align-content: start; }
.fg-weeks__n { font-size: var(--fg-text-xs); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; color: var(--fg-ink-muted); }
.fg-weeks time { font-family: var(--fg-font-display); font-size: var(--fg-text-h3); line-height: 1.1; }
.fg-weeks .fg-badge { justify-self: start; }
.fg-weeks li.is-commitment { border-bottom-color: var(--fg-ink); }

/* Giving pathway */
.fg-pathway { list-style: none; margin: 0; padding: 0; }
.fg-pathway li { display: grid; gap: var(--fg-space-2); }
.fg-pathway__n { font-family: var(--fg-font-display); font-size: var(--fg-text-xs); letter-spacing: var(--fg-tracking-lockup); color: var(--fg-ink-muted); }
.fg-pathway .fg-card__title { margin: 0; }

/* Story + FAQ pair */
.fg-story-faq > * { display: grid; gap: var(--fg-space-4); align-content: start; }
@media (min-width: 48rem) {
  .fg-story-faq > * + * { border-left: var(--fg-hairline) solid var(--fg-line); padding-left: clamp(1.5rem, 4vw, 3.5rem); }
  .fg-story-faq > *:first-child { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
}
.fg-timeline-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fg-space-2); font-size: var(--fg-text-sm); }
.fg-timeline-mini li { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--fg-space-3); padding-bottom: var(--fg-space-2); border-bottom: var(--fg-hairline) solid var(--fg-line); }
.fg-timeline-mini b { font-family: var(--fg-font-display); font-weight: 400; font-size: var(--fg-text-lg); line-height: 1.2; }

/* =============================================================================
   HOME PAGE v2 — port of the Claude Design prototype (2026-09-21)
   Components the prototype needed that the brand layer did not have. All of
   them read the semantic tokens (--fg-ink, --fg-line, --fg-dark, --fg-accent),
   so a palette wrapper on the section (fg-palette-harbor for the Navy bands)
   recolors them without any per-component color. Used by content/home/*.html.
   ============================================================================= */

/* --- Neutral light surfaces -------------------------------------------------- */
/* Guide p.5: "the best light neutrals are Cream, Linen, and Mist." Cream already
   has a universal surface class; these give Linen and Mist the same standing so a
   section can sit on them without swapping palette (buttons stay the palette
   dark). Muted ink is mixed against the surface at the smallest Charcoal share
   that clears WCAG AA: Linen 84% -> 5.9:1, Mist 90% -> 5.6:1. */
.fg-surface-linen {
  background-color: var(--fg-linen); color: var(--fg-charcoal);
  --fg-ink: var(--fg-charcoal);
  --fg-ink-muted: color-mix(in srgb, var(--fg-charcoal) 84%, var(--fg-linen));
  --fg-line: color-mix(in srgb, var(--fg-charcoal) 30%, transparent);
}
.fg-surface-mist {
  background-color: var(--fg-mist); color: var(--fg-charcoal);
  --fg-ink: var(--fg-charcoal);
  --fg-ink-muted: color-mix(in srgb, var(--fg-charcoal) 90%, var(--fg-mist));
  --fg-line: color-mix(in srgb, var(--fg-charcoal) 34%, transparent);
}

/* --- Ink utilities ------------------------------------------------------------- */
.fg-ink-dark  { color: var(--fg-dark); }       /* the palette's dark tone as text */
/* Poppy is the brand's one warm accent. Cream/Poppy fails AA at body size, so this
   is for display type only (>= 24px). The prototype uses it once, on the question
   "God, what are You asking me to do?" */
.fg-ink-poppy { color: var(--fg-poppy-red); }
.fg-measure-pull { max-width: 26ch; }          /* pull-quote measure */

/* --- Sections with decorative stones --------------------------------------------- */
/* Prototype pattern: one textured stone (Assets/Images/shapes/stone-a..e.png) bled
   off a section edge at low opacity, behind the content. Position with inline
   right/left/top/bottom/width/rotate, exactly as the prototype did. */
.fg-has-stone { position: relative; overflow: hidden; }
.fg-has-stone > .fg-container { position: relative; z-index: 1; }
.fg-stone { position: absolute; z-index: 0; height: auto; opacity: 0.16; pointer-events: none; }
@media (max-width: 51.999rem) { .fg-stone { display: none; } }

/* --- Two columns split by a hairline ("spread") ---------------------------------- */
/* The prototype's letter/what/engagement layout: two equal columns with a vertical
   hairline between them. Collapses to one column below 52rem. Generalizes the
   .fg-story-faq rule above. */
.fg-spread { display: grid; grid-template-columns: 1fr; gap: var(--fg-space-6); align-items: start; }
@media (min-width: 52rem) {
  .fg-spread { grid-template-columns: 1fr 1fr; gap: 0; }
  .fg-spread--wide { grid-template-columns: 1.05fr 0.85fr; }
  .fg-spread > *:first-child { padding-right: clamp(1.75rem, 4vw, 3.5rem); }
  .fg-spread > * + * { border-left: var(--fg-hairline) solid var(--fg-line); padding-left: clamp(1.75rem, 4vw, 3.5rem); }
  .fg-spread--open > * + * { border-left: 0; }   /* same grid, no rule (join section) */
}

/* --- Scripture set in the display face ---------------------------------------------- */
/* Prototype treats Psalm 78 as a display pull-quote, not body copy. Modifier on
   .fg-scripture; the reference keeps .fg-scripture__ref. */
.fg-scripture--display { font-family: var(--fg-font-display); font-size: var(--fg-text-h4); line-height: 1.55; max-width: 40ch; }
.fg-scripture--display p { font: inherit; max-width: none; margin: 0; }
.fg-scripture--display p + p { margin-top: var(--fg-space-4); }
.fg-scripture--display .fg-scripture__ref { letter-spacing: 0.06em; }

/* --- Hero with animated canopy (prototype hero) ---------------------------------------- */
/* Two blurred foliage layers drifting slowly under a palette-dark scrim; copy on
   the left, the "future faith begins now" script art on the right. The art column
   drops below 52rem, as in the prototype. */
.fg-hero--canopy { padding: 0; min-height: clamp(30rem, 78vh, 46rem); display: grid; isolation: isolate; }
/* The two hero columns sit inside a container-width grid so the copy's left edge lines up
   with the header wordmark and every section below (the prototype had no max-width, so on
   wide screens its copy drifted to the viewport edge). */
.fg-hero__grid { position: relative; z-index: 2; width: 100%; max-width: var(--fg-container); margin-inline: auto; display: grid; grid-template-columns: 1.05fr 0.82fr; min-height: inherit; }
.fg-canopy { position: absolute; inset: -6% -4%; overflow: hidden; z-index: 0; }
.fg-canopy > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(var(--fg-image-saturate)); transform-origin: 52% 38%; will-change: transform; }
.fg-canopy__a { opacity: 0.45; animation: fg-sway-a 23s ease-in-out infinite; }
.fg-canopy__b { opacity: 0.22; animation: fg-sway-b 31s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes fg-sway-a { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1.04); } 33% { transform: translate3d(-1.1%,0.5%,0) rotate(-0.5deg) scale(1.06); } 66% { transform: translate3d(0.9%,-0.4%,0) rotate(0.45deg) scale(1.05); } }
@keyframes fg-sway-b { 0%,100% { transform: translate3d(0,0,0) rotate(0.4deg) scale(1.08); } 40% { transform: translate3d(1.4%,-0.7%,0) rotate(-0.35deg) scale(1.05); } 75% { transform: translate3d(-0.8%,0.6%,0) rotate(0.5deg) scale(1.09); } }
.fg-hero__scrim { position: absolute; inset: 0; z-index: 1; background-color: color-mix(in srgb, var(--fg-dark) 62%, transparent); pointer-events: none; }
.fg-hero--canopy .fg-ring-mark { z-index: 1; }
.fg-hero__col { position: relative; z-index: 2; padding: clamp(3.5rem, 8vw, 6.5rem) var(--fg-gutter); display: flex; flex-direction: column; justify-content: center; gap: var(--fg-space-5); color: var(--fg-cream); }
.fg-hero__col .fg-eyebrow { color: var(--fg-ink-muted); }
.fg-hero__wordmark { margin: 0; line-height: 0; }
.fg-hero__wordmark .fg-logo-mark { --fg-logo-src: url("../Assets/Images/logo-wordmark.svg"); width: min(560px, 100%); height: auto; aspect-ratio: 4.473; color: var(--fg-cream); }
.fg-hero__lede { font-size: var(--fg-text-lg); max-width: 42ch; opacity: 0.92; margin: 0; }
.fg-hero__art { position: relative; z-index: 2; display: grid; place-items: center; padding: var(--fg-space-7); }
.fg-hero__art-inner { position: relative; display: grid; place-items: center; width: 100%; min-height: 32rem; }
.fg-hero__tree { position: absolute; top: 0; right: 0; --fg-logo-size: 6.5rem; --fg-logo-ratio: 1.543; --fg-logo-src: url("../Assets/Images/icon-tree.svg"); color: var(--fg-cream); opacity: 0.55; }
.fg-hero__script-img { width: min(78%, 400px); height: auto; display: block; opacity: 0.95; filter: brightness(1.18); }
@media (max-width: 51.999rem) {
  .fg-hero__grid { grid-template-columns: 1fr; }
  .fg-hero__art { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fg-canopy__a, .fg-canopy__b { animation: none; } }

/* --- Framed video ----------------------------------------------------------------------- */
/* .fg-frame--outline already draws the guide's thick frame in the palette accent.
   The p.9 frame and the prototype are both Almond, so this modifier pins it. */
.fg-frame--almond { --fg-accent: var(--fg-almond); }
.fg-video { position: relative; background-color: var(--fg-dark); color: var(--fg-cream); display: grid; place-items: center; }
.fg-video > iframe, .fg-video > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fg-video__ph { text-align: center; padding: var(--fg-space-5); --fg-ink: var(--fg-cream); --fg-ink-muted: color-mix(in srgb, var(--fg-cream) 72%, var(--fg-dark)); }
.fg-video__ph p { max-width: none; }

/* --- Goal cards with rotating photo montage --------------------------------------------- */
.fg-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.6vw, 2rem); margin-top: var(--fg-space-8); }
@media (max-width: 56.249rem) { .fg-goals { grid-template-columns: 1fr; } }   /* 900px, as the prototype */
.fg-goal { display: flex; flex-direction: column; border: var(--fg-hairline) solid var(--fg-line); background-color: color-mix(in srgb, var(--fg-cream) 6%, transparent); }
.fg-goal__body { padding: clamp(1.375rem, 2.4vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.fg-goal__num { font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); font-weight: var(--fg-weight-medium); color: var(--fg-ink-muted); }
.fg-goal__title { font-size: var(--fg-text-h3); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; margin-top: var(--fg-space-3); }
.fg-goal .fg-rule { margin: var(--fg-space-4) 0; }
.fg-goal__list { margin: var(--fg-space-4) 0 0; padding-left: 1.1rem; display: grid; gap: var(--fg-space-3); font-size: var(--fg-text-sm); }
.fg-goal__list li::marker { color: var(--fg-accent); }
.fg-goal__close { margin: auto 0 0; padding-top: var(--fg-space-5); font-size: var(--fg-text-sm); font-style: italic; color: var(--fg-ink-muted); max-width: none; }

/* Photo rotator: stacked frames, one visible, slow Ken Burns on the live frame.
   Per-frame focal point via --fg-focus (vertical object-position). Driven by the
   script at the end of content/home/09-goals.html. */
.fg-photo-rot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--fg-dark); border-bottom: var(--fg-hairline) solid var(--fg-line); isolation: isolate; }
.fg-photo-rot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--fg-focus, 38%); opacity: 0; filter: saturate(0.96); transition: opacity 1100ms var(--fg-ease); will-change: opacity, transform; }
.fg-photo-rot > img.is-on { opacity: 1; }
.fg-photo-rot > img.is-zoom { animation: fg-kenburns 8800ms linear forwards; }
@keyframes fg-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.fg-photo-rot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--fg-dark) 58%, transparent) 0%, color-mix(in srgb, var(--fg-dark) 12%, transparent) 64%); }
@media (prefers-reduced-motion: reduce) { .fg-photo-rot > img { transition: none; } .fg-photo-rot > img.is-zoom { animation: none; } }

/* --- Allocation rows ($50M breakdown) --------------------------------------------------- */
.fg-alloc__rows { margin-top: var(--fg-space-4); border-top: var(--fg-hairline) solid var(--fg-line); }
.fg-alloc__row { display: grid; grid-template-columns: 1fr auto; gap: var(--fg-space-5); align-items: baseline; padding: var(--fg-space-4) 0; border-bottom: var(--fg-hairline) solid var(--fg-line); }
.fg-alloc__row span { font-size: var(--fg-text-sm); line-height: 1.45; color: var(--fg-ink); }
.fg-alloc__row b { font-family: var(--fg-font-display); font-weight: 400; font-size: var(--fg-text-h3); line-height: 1; color: var(--fg-ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fg-alloc__row--total { border-bottom: 0; }
.fg-alloc__row--total span { font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-ink-muted); }
.fg-alloc__row--total b { color: var(--fg-ink); font-size: var(--fg-text-h2); }

/* --- Today / By 2030 ledger --------------------------------------------------------------- */
.fg-ledger { margin-top: var(--fg-space-7); border-top: var(--fg-hairline) solid var(--fg-line); }
.fg-ledger__head, .fg-ledger__row { display: grid; grid-template-columns: 1.25fr 1fr 2.75rem 1fr; gap: 0; border-bottom: var(--fg-hairline) solid var(--fg-line); }
.fg-ledger__head { padding: var(--fg-space-4) 0 var(--fg-space-3); }
.fg-ledger__head span { font-size: var(--fg-text-sm); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-ink-muted); text-align: center; }
.fg-ledger__head span:first-child { text-align: left; }
.fg-ledger__head span:nth-child(4) { color: var(--fg-accent); }
.fg-ledger__row { align-items: baseline; padding: var(--fg-space-5) 0; }
.fg-ledger__metric { font-size: var(--fg-text-base); line-height: 1.4; }
.fg-ledger__metric small { display: block; margin-top: var(--fg-space-1); font-size: var(--fg-text-xs); color: var(--fg-ink-muted); }
.fg-ledger__fig { font-family: var(--fg-font-display); font-size: var(--fg-text-h2); line-height: 1; color: var(--fg-ink-muted); font-variant-numeric: tabular-nums; text-align: center; }
.fg-ledger__fig--to { color: var(--fg-ink); }
.fg-ledger__arrow { font-family: var(--fg-font-body); font-size: 1.1875rem; line-height: 1; color: var(--fg-accent); text-align: center; align-self: center; }
.fg-ledger__delta { display: block; margin-top: var(--fg-space-2); font-family: var(--fg-font-body); font-size: var(--fg-text-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--fg-weight-semi); color: var(--fg-accent); }
@media (max-width: 47.999rem) {
  .fg-ledger__head { display: none; }
  .fg-ledger__row { grid-template-columns: 1fr 2.125rem 1fr; row-gap: var(--fg-space-3); }
  .fg-ledger__metric { grid-column: 1 / -1; }
  .fg-ledger__fig { font-size: 1.875rem; }
  .fg-ledger__arrow { font-size: 1.0625rem; }
}

/* --- Key dates grid ------------------------------------------------------------------------- */
.fg-dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fg-hairline); background-color: var(--fg-line); border: var(--fg-hairline) solid var(--fg-line); margin-top: var(--fg-space-7); }
.fg-date { background-color: var(--fg-dark); padding: clamp(1.5rem, 2.6vw, 2.125rem); display: flex; flex-direction: column; gap: var(--fg-space-3); }
.fg-date__when { font-family: var(--fg-font-display); font-size: var(--fg-text-h3); line-height: 1.05; color: var(--fg-ink); }
.fg-date__what { font-size: var(--fg-text-sm); line-height: 1.45; color: var(--fg-ink-muted); }
@media (max-width: 61.249rem) { .fg-dates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 37.499rem) { .fg-dates { grid-template-columns: 1fr; } }

/* --- Join / commit ------------------------------------------------------------------------- */
.fg-join__photo { position: sticky; top: 6rem; }
@media (max-width: 51.999rem) { .fg-join__photo { position: static; } .fg-join__photo .fg-ratio-4x5 { aspect-ratio: 3 / 2; } }
.fg-join__watermark { position: absolute; right: 2%; bottom: 0.5rem; z-index: 0; font-size: clamp(4rem, 11vw, 11.875rem); line-height: 0.85; color: var(--fg-dark); opacity: 0.13; pointer-events: none; }
.fg-join__question { font-size: var(--fg-text-h3); line-height: 1.38; color: var(--fg-dark); max-width: 26ch; margin-top: var(--fg-space-5); }

/* --- Scroll reveal ----------------------------------------------------------------------------- */
/* Armed and released by the script at the end of content/home/01-feature-hero.html.
   Without JS (or with reduced motion) everything is simply visible. */
.fg-reveal { transition: opacity 720ms var(--fg-ease), transform 720ms var(--fg-ease); }
.fg-reveal.is-armed { opacity: 0; transform: translateY(12px); }
.fg-reveal.is-armed.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fg-reveal.is-armed { opacity: 1; transform: none; transition: none; } }

/* --- Small utilities the home blocks use ------------------------------------------------- */
.fg-section--tight-top    { padding-top:    clamp(2.5rem, 5vw, 4rem); }
.fg-section--tight-bottom { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.fg-hairline-y { border-top: var(--fg-hairline) solid var(--fg-line); border-bottom: var(--fg-hairline) solid var(--fg-line); }

/* Footer: the "Athens Church / athenschurch.com" mark from the prototype (Footer zone block) */
.fg-site-footer__ac { display: inline-flex; flex-direction: column; gap: var(--fg-space-1); margin-top: var(--fg-space-6); padding-top: var(--fg-space-5); border-top: var(--fg-hairline) solid var(--fg-line); color: inherit; text-decoration: none; }
.fg-site-footer__ac:hover .fg-site-footer__ac-name { color: #fff; }
.fg-site-footer__ac-name { font-family: var(--fg-font-display); font-size: var(--fg-text-h3); line-height: 1; }
.fg-site-footer__ac-sub  { font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-ink-muted); }

/* =============================================================================
   FAQ PAGE — port of the prototype FAQ.html (2026-09-21). Used by content/faq/*.html.
   ============================================================================= */
/* Canopy header band: the home hero's two-layer canopy, one column, no art column.
   Add to .fg-hero.fg-hero--canopy; the block puts eyebrow / h1 / lede in a .fg-container. */
.fg-hero--band { display: block; min-height: 0; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.fg-hero--band > .fg-container { position: relative; z-index: 2; color: var(--fg-cream); }
.fg-hero--band .fg-eyebrow { color: var(--fg-ink-muted); }
.fg-hero--band .fg-lede { font-size: var(--fg-text-lg); max-width: 52ch; opacity: 0.9; margin: var(--fg-space-5) 0 0; }

/* Accordion: native <details>, display-face question, + / − in the palette accent. */
.fg-faq-list { border-top: var(--fg-hairline) solid var(--fg-line); margin-top: var(--fg-space-7); }
.fg-faq { border-bottom: var(--fg-hairline) solid var(--fg-line); }
.fg-faq > summary { list-style: none; cursor: pointer; position: relative; padding: var(--fg-space-5) 2.75rem var(--fg-space-5) 0; font-family: var(--fg-font-display); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5625rem); line-height: 1.28; color: var(--fg-ink); text-wrap: balance; }
.fg-faq > summary::-webkit-details-marker { display: none; }
.fg-faq > summary::after { content: "+"; position: absolute; right: 0.25rem; top: var(--fg-space-5); font-family: var(--fg-font-body); font-size: 1.375rem; line-height: 1.28; color: var(--fg-accent); }
.fg-faq[open] > summary::after { content: "\2212"; }
.fg-faq__a { padding: 0 0 var(--fg-space-6); max-width: 74ch; color: var(--fg-ink-muted); }
.fg-faq__a p { margin: 0 0 var(--fg-space-4); max-width: none; }
.fg-faq__a p:last-child { margin-bottom: 0; }

/* Centered call-to-action band */
.fg-cta-band { text-align: center; }
.fg-cta-band .fg-h3 { max-width: 34ch; margin-inline: auto; color: var(--fg-dark); line-height: 1.3; }
.fg-cta-band .fg-btn { margin-top: var(--fg-space-6); }

/* =============================================================================
   STORIES PAGE — port of the prototype Stories.html (2026-09-22). Used by content/stories/*.html.
   ============================================================================= */
/* Featured story: video beside its copy, 1.25fr / .85fr like the prototype; stacks under 900px. */
.fg-feature { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(1.75rem, 4vw, 3.75rem); align-items: center; }
@media (max-width: 56.249rem) { .fg-feature { grid-template-columns: 1fr; } }
.fg-feature__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); line-height: 1.14; margin: 0; }
.fg-feature__rule { width: 50%; margin: var(--fg-space-4) 0; }
.fg-story__slot { color: var(--fg-ink-muted); margin: 0; }
/* Titles with no story behind them yet sit back, as in the prototype's placeholder slots. */
.fg-feature__title.is-placeholder, .fg-story__title.is-placeholder { opacity: 0.55; }

/* Video with a hairline frame in the surface's line color (dark: cream line, linen: charcoal line). */
.fg-video--framed { border: var(--fg-hairline) solid var(--fg-line); }

/* Story grid: 3 → 2 (under 980px) → 1 (under 640px) columns. */
.fg-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.375rem, 2.8vw, 2.5rem); margin-top: clamp(2.5rem, 4vw, 3.25rem); }
@media (max-width: 61.249rem) { .fg-story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 39.999rem) { .fg-story-grid { grid-template-columns: 1fr; } }
.fg-story__title { font-size: 1.5625rem; line-height: 1.2; color: var(--fg-dark); margin: var(--fg-space-4) 0 var(--fg-space-2); text-wrap: pretty; }
.fg-story-grid__note { margin: clamp(2rem, 3vw, 2.125rem) 0 0; }

/* CTA band, extended: an eyebrow above and body copy below the display-face line. */
.fg-cta-band .fg-eyebrow { margin-bottom: var(--fg-space-4); }
.fg-cta-band .fg-body { max-width: 52ch; margin: var(--fg-space-5) auto 0; }

/* =============================================================================
   HOME PAGE v3 — 2026-09-22 handoff revisions. Used by content/home/*.html and the interior headers.
   ============================================================================= */
/* Interior header bands: the small wordmark replaces the "For Generations" eyebrow text. */
.fg-band-wordmark { --fg-logo-size: 1.25rem; --fg-logo-ratio: 4.473; --fg-logo-src: url("../Assets/Images/logo-wordmark.svg"); color: var(--fg-cream); margin: 0 0 var(--fg-space-4); }

/* Centered hero: one column, copy centered, the script line as a faint watermark along the
   bottom, ring mark top-left, and a wider/faster canopy sway than the interior bands keep. */
.fg-hero--centered .fg-hero__grid { grid-template-columns: 1fr; place-items: center; }
.fg-hero--centered .fg-hero__col { align-items: center; text-align: center; width: 100%; padding: clamp(4.5rem, 10vw, 8rem) var(--fg-gutter) clamp(7.5rem, 16vw, 12.5rem); }
.fg-hero--centered .fg-hero__wordmark { width: 100%; max-width: 560px; }   /* a centered flex item shrinks to content; the mask needs a real width */
.fg-hero--centered .fg-hero__wordmark .fg-logo-mark { margin-inline: auto; }
.fg-hero--centered .fg-hero__lede { margin-inline: auto; }
.fg-hero__watermark { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: min(82%, 900px); height: auto; opacity: 0.22; filter: brightness(1.2); pointer-events: none; z-index: 1; }
.fg-hero--centered .fg-canopy__a { animation: fg-sway-a3 19s ease-in-out infinite; }
.fg-hero--centered .fg-canopy__b { animation: fg-sway-b3 26s ease-in-out infinite; }
@keyframes fg-sway-a3 { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1.06); } 25% { transform: translate3d(-2.2%,1.1%,0) rotate(-1.1deg) scale(1.09); } 50% { transform: translate3d(0.8%,-1.4%,0) rotate(0.7deg) scale(1.11); } 75% { transform: translate3d(2.1%,0.9%,0) rotate(1.15deg) scale(1.08); } }
@keyframes fg-sway-b3 { 0%,100% { transform: translate3d(0,0,0) rotate(0.9deg) scale(1.1); } 30% { transform: translate3d(2.8%,-1.6%,0) rotate(-0.9deg) scale(1.07); } 60% { transform: translate3d(-1.7%,1.5%,0) rotate(1.2deg) scale(1.13); } }
@media (prefers-reduced-motion: reduce) { .fg-hero--centered .fg-canopy__a, .fg-hero--centered .fg-canopy__b { animation: none; } }

/* Verse band: scripture beside a tall tinted photo. */
.fg-verse-grid { display: grid; grid-template-columns: 1fr 0.68fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; max-width: 1100px; }
.fg-verse-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: var(--fg-hairline) solid var(--fg-line); position: relative; }
.fg-verse-photo::after { content: ""; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--fg-dark) 58%, transparent); pointer-events: none; }
.fg-verse-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 46%; filter: saturate(0.78) brightness(0.88); }
@media (max-width: 53.749rem) { .fg-verse-grid { grid-template-columns: 1fr; max-width: 820px; } .fg-verse-photo { aspect-ratio: 3 / 2; } }

/* Letter interlude: no longer a Mist band — a quiet pull quote with a left rule. */
.fg-letter-break { padding: clamp(0.375rem, 1vw, 1rem) 0 clamp(0.625rem, 1.4vw, 1.375rem); }
.fg-pull-quote { position: relative; max-width: 30ch; padding-left: clamp(1.125rem, 2.6vw, 2.125rem); border-left: var(--fg-hairline) solid var(--fg-line); line-height: 1.28; }

/* Letter sign-off: photo with caption beside the signature and typed name. */
.fg-signoff { display: flex; align-items: flex-end; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; margin-top: 2.25rem; }
.fg-signoff__photo { width: 190px; max-width: 100%; height: auto; display: block; border: var(--fg-hairline) solid var(--fg-line); }
.fg-signoff__sig { width: 150px; height: auto; display: block; margin-bottom: 0.375rem; }
.fg-signoff .fg-eyebrow { margin: var(--fg-space-2) 0 0; }

/* Single-column measure for sections that used to be a spread. */
.fg-measure-wide { max-width: 820px; }
.fg-alloc__title { margin-bottom: var(--fg-space-3); }

/* =============================================================================
   RESOURCES PAGE — port of the prototype Resources.html (2026-09-22). Used by content/resources/*.html.
   (The Navy "Teaching Series" band is a Content Channel Item block, styled separately when it is built.)
   ============================================================================= */
/* Header band extras: a row of anchor links and a cream button on the dark ground. */
.fg-hero-band__links { display: flex; flex-wrap: wrap; gap: clamp(0.875rem, 2.2vw, 1.875rem); margin-top: var(--fg-space-6); }
.fg-hero-band__links a { color: var(--fg-cream); text-decoration: none; margin: 0; opacity: 0.85; }
.fg-hero-band__links a:hover, .fg-hero-band__links a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
.fg-hero--band .fg-btn { margin-top: var(--fg-space-6); }
.fg-btn--cream { background-color: var(--fg-cream); border-color: var(--fg-cream); color: var(--fg-dark); }
.fg-btn--cream:hover, .fg-btn--cream:focus-visible { background-color: #fff; border-color: #fff; color: var(--fg-dark); }

/* Commitment / generosity card stand-in: almond frame, raised cream face, title top, prompt bottom. */
.fg-commit-card { border: 8px solid var(--fg-almond); background-color: #F5F2EF; aspect-ratio: 5 / 3.2; display: flex; flex-direction: column; justify-content: space-between; padding: var(--fg-space-5); color: var(--fg-charcoal); }
.fg-commit-card__who { font-family: var(--fg-font-display); font-size: 1.625rem; line-height: 1.1; color: var(--fg-olive); }
.fg-commit-card .fg-rule { margin: 0 0 var(--fg-space-3); }
.fg-commit-card .fg-eyebrow { margin: 0; color: var(--fg-ink-muted); }
.fg-commit-card__note { margin-top: var(--fg-space-4); }
.fg-fineprint { font-size: var(--fg-text-sm); color: var(--fg-ink-muted); margin-top: var(--fg-space-4); }

/* =============================================================================
   TEACHING SERIES — Content Channel View block on the Resources page (content/resources/02-series.lava).
   Sits in a Navy band (fg-palette-harbor fg-surface-dark), so --fg-ink is Cream and --fg-line is a Cream hairline.
   ============================================================================= */
.fg-weektabs { display: flex; flex-wrap: wrap; gap: var(--fg-space-6); border-bottom: var(--fg-hairline) solid var(--fg-line); margin-top: var(--fg-space-7); }
.fg-weektabs button { background: none; border: 0; padding: 0 0 0.875rem; margin: 0; font-family: var(--fg-font-body); font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-ink-muted); cursor: pointer; transition: color var(--fg-duration-2) var(--fg-ease); }
.fg-weektabs button:hover, .fg-weektabs button:focus-visible { color: var(--fg-ink); outline: none; }
.fg-weektabs button[aria-selected="true"] { color: var(--fg-ink); box-shadow: inset 0 -1px 0 0 var(--fg-ink); }
.fg-week { margin-top: 2.5rem; }
.fg-week[hidden] { display: none; }
.fg-wk { max-width: 760px; }
.fg-wk__title { margin: var(--fg-space-3) 0 0; }
.fg-sermon { margin-top: var(--fg-space-5); background-color: color-mix(in srgb, var(--fg-cream) 6%, var(--fg-dark)); }
.fg-msg-desc { margin-top: 1.125rem; max-width: 62ch; color: var(--fg-ink-muted); }
.fg-msg-desc p { max-width: none; }
.fg-msg-desc p:last-child { margin-bottom: 0; }
/* Collapsible scripture / discussion-questions rows */
.fg-scrip { margin-top: 1.375rem; border-top: var(--fg-hairline) solid var(--fg-line); border-bottom: var(--fg-hairline) solid var(--fg-line); }
.fg-scrip + .fg-scrip { margin-top: 0; border-top: 0; }
.fg-scrip > summary { list-style: none; cursor: pointer; position: relative; padding: 0.9375rem 2.125rem 0.9375rem 0; font-family: var(--fg-font-body); font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-ink); }
.fg-scrip > summary::-webkit-details-marker { display: none; }
.fg-scrip > summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.75rem; font-size: 1.25rem; line-height: 1; color: var(--fg-ink-muted); }
.fg-scrip[open] > summary::after { content: "\2212"; }
.fg-scrip__a { padding: 0 0 1.5rem; }
.fg-scrip__a h5, .fg-scrip__a .fg-scrip__sub { margin: 0 0 0.875rem; font-family: var(--fg-font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-ink-muted); }
.fg-scrip__a .fg-scrip__sub { display: block; margin-top: 1.375rem; font-size: 1.125rem; }
.fg-scrip__a p { font-size: 0.96875rem; line-height: 1.7; color: var(--fg-ink); opacity: 0.9; margin: 0 0 0.75rem; max-width: none; }
.fg-scrip__a ul, .fg-scrip__a ol { margin: 0 0 0.75rem; padding-left: 1.25rem; font-size: 0.96875rem; line-height: 1.7; opacity: 0.9; }
.fg-scrip__a sup { font-size: 0.65625rem; letter-spacing: 0.04em; color: var(--fg-thyme); margin-right: 3px; }
/* Five-day devotional grid: the item's Content supplies the .fg-devo cards */
.fg-week__devo-label { display: block; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0; }
.fg-devos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 1rem; border: var(--fg-hairline) solid var(--fg-line); }
.fg-devo { padding: 1.5rem 1.375rem 1.75rem; border-left: var(--fg-hairline) solid var(--fg-line); }
.fg-devo:first-child { border-left: 0; }
.fg-devo__day { display: block; font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-mist); }
.fg-devo__read { font-family: var(--fg-font-display); font-size: 1.375rem; line-height: 1.2; color: var(--fg-ink); margin: 0.75rem 0 0.875rem; max-width: none; }
.fg-devo p:not(.fg-devo__read) { font-size: 0.875rem; line-height: 1.6; color: var(--fg-ink); opacity: 0.9; margin: 0; max-width: none; }
@media (max-width: 61.249rem) { .fg-devos { grid-template-columns: repeat(2, 1fr); } .fg-devo { border-top: var(--fg-hairline) solid var(--fg-line); } .fg-devo:nth-child(-n+2) { border-top: 0; } .fg-devo:nth-child(odd) { border-left: 0; } }
@media (max-width: 39.999rem) { .fg-devos { grid-template-columns: 1fr; } .fg-devo { border-left: 0; } .fg-devo:nth-child(2) { border-top: var(--fg-hairline) solid var(--fg-line); } }

/* =============================================================================
   COMMIT PAGE — port of the prototype Commit.html (2026-09-23). Used by content/commit/*.html.
   (The commitment form band is a Rock Workflow Entry block, built separately.)
   ============================================================================= */
/* Three steps: hairline cards, numbered in the palette mid tone */
.fg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.6vw, 2.125rem); margin-top: clamp(2.25rem, 4vw, 2.75rem); }
.fg-step { border: var(--fg-hairline) solid var(--fg-line); padding: clamp(1.375rem, 2.4vw, 2rem); background-color: var(--fg-cream); }
.fg-step__n { display: block; font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-mid); }
.fg-step__title { font-size: 1.625rem; line-height: 1.15; color: var(--fg-dark); margin: var(--fg-space-3) 0 var(--fg-space-2); }
.fg-step p { color: var(--fg-ink-muted); font-size: 0.96875rem; margin: 0; max-width: none; }
@media (max-width: 56.249rem) { .fg-steps { grid-template-columns: 1fr; } }
/* Card artwork pair (gift chart + commitment card) */
.fg-card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.6vw, 2.25rem); align-items: start; margin-top: clamp(2.25rem, 4vw, 2.75rem); }
.fg-card-shot { margin: 0; border: var(--fg-hairline) solid var(--fg-line); background-color: color-mix(in srgb, var(--fg-cream) 6%, transparent); padding: 0.625rem; }
.fg-card-shot img { display: block; width: 100%; height: auto; }
.fg-card-shot figcaption { font-size: var(--fg-text-eyebrow); letter-spacing: var(--fg-tracking-wide); text-transform: uppercase; font-weight: var(--fg-weight-medium); color: var(--fg-ink-muted); padding: 0.75rem 0.25rem 0.25rem; }
@media (max-width: 51.249rem) { .fg-card-pair { grid-template-columns: 1fr; } }

/* =============================================================================
   WEB REVIEW 2026-09-25 (For Gen Web Review doc) — site-wide adjustments
   ============================================================================= */
/* 1. Body copy reads small on desktop: one step up from 52rem (16 → 17px, large 18 → 19px, lede too). */
@media (min-width: 52rem) {
  .fg-body, .fg-page p.fg-body { font-size: 1.0625rem; }
  .fg-body.fg-body--lg, .fg-page p.fg-body--lg { font-size: 1.1875rem; }   /* specificity must beat the .fg-page p.fg-body line above */
  .fg-body.fg-body--sm, .fg-page p.fg-body--sm { font-size: 0.9375rem; }
  .fg-lede, .fg-hero__lede { font-size: 1.1875rem; }
}
/* 3. Stacked spreads: the two columns' paragraphs should read as one flow, not two blocks with a gap. */
@media (max-width: 51.999rem) { .fg-spread { gap: 0; } }
/* 7. Resources header links stack on phones. */
@media (max-width: 40rem) { .fg-hero-band__links { flex-direction: column; gap: var(--fg-space-3); } }

/* ==========================================================================================
   SAME-COLOR NEIGHBOURS 2026-09-27 — when two adjacent sections share a surface colour the
   full padding on both sides reads as a gap. These halve one side (base is clamp(3rem,8vw,7rem)).
   Home 03 (Vision video) -> Home 04 (Letter); FAQ 02 (video) -> FAQ 03 (questions, top already 0).
   ========================================================================================== */
.fg-section--half-top    { padding-top:    clamp(1.5rem, 4vw, 3.5rem); }
.fg-section--half-bottom { padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }

/* ==========================================================================================
   HOME 05 · LETTER INTERLUDE v2 2026-09-29 — desktop: half-tree + rule + quote centered as one
   lockup (per Garrison's reference jpeg). Below 52rem the tree is gone and the quote sits
   left-aligned exactly as before. The tree is icon-tree.svg used as a CSS mask so it takes the
   Navy ink colour; the box is 53% of the tree's width, which crops it at the trunk.
   ========================================================================================== */
.fg-quote-lockup { display: block; }
.fg-quote-tree { display: none; }
@media (min-width: 52rem) {
  .fg-letter-break { padding: clamp(1.25rem, 2.5vw, 2.25rem) 0; }
  .fg-quote-lockup { display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
  .fg-quote-tree {
    display: block; flex: none; height: clamp(6.5rem, 9vw, 8.5rem);
    background-color: var(--fg-dark); /* Navy via the Harbor palette wrapper */
    -webkit-mask: url(../Assets/Images/icon-tree.svg) no-repeat left center;
            mask: url(../Assets/Images/icon-tree.svg) no-repeat left center;
    /* mask keeps the full tree height; the box is only 53% of the tree's width, so the right half is cropped at the trunk */
    -webkit-mask-size: auto 100%; mask-size: auto 100%;
    width: calc(clamp(6.5rem, 9vw, 8.5rem) * 1.5425 * 0.53);
  }
  .fg-pull-quote { max-width: 24ch; }
}