/* ============================================================
   Garden Co — site_v4 · built from scratch on DESIGN-SYSTEM.md
   (2026-08-10). Tokens, components, rhythm and motion come from
   that doc only. Fonts load from Adobe Typekit kit vtd3blb.
   ============================================================ */

:root {
  --font-display: "helvetica-neue-lt-pro-cond", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "snell-roundhand-lt-std", "Snell Roundhand", "Apple Chancery", cursive;

  --cream: #f1ede4;
  --cream2: #e9e3d4;
  --paper: #ffffff;
  --ink: #111111;
  --black: #0a0a0a;
  --muted: #5e5a52;
  --line: #d8d2c2;
  --olive: #8b9d4b;
  --olive-deep: #4a541f;
  --yellow: #f0d752;

  --radius-card: 22px;
  --radius-img: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 6px 14px rgba(20, 18, 16, .08);

  --pad-section: clamp(3.5rem, 6vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
p + p { margin-top: 1em; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible {
  outline-color: var(--yellow);
}

/* ---- layout ---- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.wrap--narrow { max-width: 760px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--black); color: var(--cream);
  font-size: .85rem; text-decoration: none;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- type ---- */
.hl {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  text-wrap: balance;
}
.curs {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 1.35em;
  line-height: 0;
  vertical-align: -.08em;
  padding-right: .08em;
  display: inline-block;
}
.kicker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .kicker { color: rgba(241, 237, 228, .65); }

.section-head { font-size: clamp(2.4rem, 5.5vw, 4rem); margin: .35em 0 .5em; }

.pipe { color: var(--olive); padding: 0 .35em; }

/* ---- buttons (pills; hover inverts fill, never lifts) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95rem 2rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--black);
  background: var(--black);
  color: var(--cream);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: transparent; color: var(--black); }
.btn:active { background: var(--olive-deep); border-color: var(--olive-deep); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--cream); }
.btn--light { background: var(--cream); border-color: var(--cream); color: var(--black); }
.btn--light:hover { background: transparent; color: var(--cream); }
.btn--ghostlight { background: transparent; border-color: var(--cream); color: var(--cream); }
.btn--ghostlight:hover { background: var(--cream); color: var(--black); }

/* ============================================================
   site nav — folded from nav-lab M12, 2026-08-12
   Bar: logo · Home / About▾ / Get Involved▾ / Resources▾ / Give ·
   "Plan your Visit" pill · burger. Three full-width mega panels drop
   from the bar (About / Get Involved / Resources); hover-intent open,
   click toggles for touch — see assets/js/main.js.

   SEAM SPEC (Jose 2026-08-12, final): the BAR owns the frame-width
   spacing above and below its row (the same clamp as the hero's side
   gutters, ≈24px) and the hero has ZERO top padding — so when the bar
   goes sticky nothing doubles at the seam. Sides + bottom of the hero
   keep the same gutter; the card fills the rest of the first viewport
   (see the .hero block below). 41px = the logo row height, which is
   why .brand img is a fixed 150px rather than a clamp.
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241, 237, 228, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* the gaps clamp so the row never wraps between 881px (where the burger takes
   over) and 1382px; at ≥1382px they sit at the lab's 2rem / 1.9rem */
.site-header .wrap {
  display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2rem);
  padding-top: clamp(.9rem, 1.8vw, 1.5rem);
  padding-bottom: clamp(.9rem, 1.8vw, 1.5rem);
}
.brand { margin-right: auto; }
.brand img { width: 150px; height: auto; }

/* ---- bar links ---- */
.nav-desktop ul { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 1.9rem); }
.nav-desktop a {
  font-size: .92rem; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--olive-deep); }
.header-cta { padding: .6rem 1.4rem; font-size: .78rem; white-space: nowrap; }

/* ---- parent tabs (About / Get Involved / Resources) ---- */
.nav-megabtn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .92rem; font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.nav-megabtn:hover, .nav-megabtn[aria-expanded="true"] { color: var(--olive-deep); }
.nav-megabtn::after {
  content: ""; width: .5em; height: .5em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.nav-megabtn[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }

/* ---- the panels ---- */
.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.nav-panel.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* .site-header .wrap is flex — the panel grids must outrank it */
.site-header .wrap.nav-panel__grid {
  display: grid; align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: 2.2rem; padding-bottom: 2.4rem;
}
.site-header .wrap.nav-panel__grid--about {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* card-column parity (Jose 2026-08-12): the last track is sized so the card
   lands at the same width as the About panel's card (a full third of the
   panel, 343px @1440). The 4-col grids lose one more gap than the 3-col
   About grid, so 1.06/3 — not 1/3 — of the track space hits 343px. */
.site-header .wrap.nav-panel__grid--involved {
  grid-template-columns: minmax(0, .6fr) minmax(0, .6fr) minmax(0, .74fr) minmax(0, 1.06fr);
}
.site-header .wrap.nav-panel__grid--resources {
  grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, .54fr) minmax(0, 1.06fr);
}
/* one header treatment for every column — no rules, tight to content */
.nav-panel .kicker { margin-bottom: .45rem; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel ul a {
  display: block; padding: .55rem 0;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; font-size: 1.35rem;
  transition: color .25s var(--ease);
}
.nav-panel ul a:hover { color: var(--olive-deep); }
.nav-panel ul span {
  display: block;
  font-family: var(--font-body); font-weight: 400; text-transform: none;
  font-size: .88rem; color: var(--muted);
  margin-top: -.15rem; padding-bottom: .35rem;
}
/* signature arrow — appears beside the name, the text never moves */
.nav-panel ul a .ar {
  display: inline-block; margin-left: .35em;
  opacity: 0; transform: translateX(-6px);
  color: var(--olive-deep);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-panel ul a:hover .ar { opacity: 1; transform: none; }
/* mixed-weight links: the connective words sit LIGHT on their own line above
   the heavy destination — "Watch on" / "YOUTUBE →". Must outrank both
   .nav-panel ul a and .nav-panel ul span. */
.nav-panel ul a .lt {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  text-transform: none; font-size: .78rem; letter-spacing: .02em;
  line-height: 1.25;
  color: var(--muted);
  margin: 0 0 .18em; padding: 0;
  transition: color .25s var(--ease);
}
/* the link reacts as one unit — the light line follows the heavy one */
.nav-panel ul a:hover .lt { color: var(--olive-deep); }

/* section links nested under a bold page link (anchors into who-we-are) */
.nav-sub { list-style: none; margin: .45rem 0 0; padding: 0; }
/* must outrank .nav-panel ul a (the big display links) */
.nav-panel .nav-sub a {
  display: block; padding: .32rem 0;
  text-decoration: none;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  text-transform: none; color: #3d3a35;
  transition: color .25s var(--ease);
}
.nav-panel .nav-sub a:hover { color: var(--olive-deep); }
/* second bold page link under a nested sub-list (WHO WE ARE → sections →
   FAQs): needs air so the two bold links read as siblings with the sections
   nested between them, not as a tail on the sub-list */
.nav-second { margin-top: .55rem; }

/* the Three Commitments, sized for a menu */
.nav-way p {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  margin-bottom: .5rem;
}

/* "First time?" column */
.nav-facts { align-self: start; }
.nav-facts p { color: #3d3a35; font-size: .95rem; margin-bottom: .4rem; }
/* FIRST TIME? reads bolder than the other column headers */
.nav-panel .nav-facts > .kicker { font-weight: 700; color: var(--ink); }

/* the cards (Welcome Home · Garden · current series key art) */
.nav-cardlink { display: block; margin-top: 1.3rem; transition: opacity .25s var(--ease); }
.nav-cardlink:hover { opacity: .88; }
.nav-card { display: block; width: 100%; height: auto; border-radius: var(--radius-img); margin-top: 1.3rem; }
.nav-cardlink .nav-card { margin-top: 0; }

/* "All events" as a quiet text link — no pill inside a panel */
.nav-all {
  display: inline-block; margin-top: 1.1rem;
  text-decoration: none;
  font-weight: 500; font-size: .82rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.nav-all .ar { display: inline-block; color: var(--olive-deep); transition: transform .25s var(--ease); }
.nav-all:hover { color: var(--olive-deep); }
.nav-all:hover .ar { transform: translateX(5px); }

/* This Month rows inside Get Involved */
.nav-panel__grid--involved .sched li { padding: .6rem 0; grid-template-columns: auto 1fr; gap: .8rem; }
.nav-panel__grid--involved .sched li:first-child { border-top: 0; }
.nav-panel__grid--involved .sched__d { font-size: 1rem; }
.nav-panel__grid--involved .sched__t { display: none; }
.nav-panel__grid--involved .nav-facts p { margin-bottom: .35rem; }

/* Resources: tighten the heavy line so each light/heavy pair reads as one
   unit, and give the items air so the pairs separate cleanly (Connect's
   .nav-sub utility links keep their own rhythm) */
.nav-panel__grid--resources ul a:has(.lt) { line-height: 1.12; }
.nav-panel__grid--resources ul:not(.nav-sub) li + li { margin-top: .55rem; }
/* season line as an overline on the current series — deliberately NOT a second
   kicker: smaller, tighter tracking, heavier, spaced to the link below */
.nav-dates {
  font-family: var(--font-body);
  font-weight: 700; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--olive-deep);
  margin: 1rem 0 -.47rem;
}

/* one coordinated open: the columns rise in a quick stagger */
@media (prefers-reduced-motion: no-preference) {
  .nav-panel--about.open .nav-panel__grid--about > *,
  .nav-panel--involved.open .nav-panel__grid--involved > *,
  .nav-panel--resources.open .nav-panel__grid--resources > * { animation: rise .45s var(--ease) backwards; }
  .nav-panel--about.open .nav-panel__grid--about > :nth-child(2),
  .nav-panel--involved.open .nav-panel__grid--involved > :nth-child(2),
  .nav-panel--resources.open .nav-panel__grid--resources > :nth-child(2) { animation-delay: .06s; }
  .nav-panel--about.open .nav-panel__grid--about > :nth-child(3),
  .nav-panel--involved.open .nav-panel__grid--involved > :nth-child(3),
  .nav-panel--resources.open .nav-panel__grid--resources > :nth-child(3) { animation-delay: .12s; }
  .nav-panel--involved.open .nav-panel__grid--involved > :nth-child(4),
  .nav-panel--resources.open .nav-panel__grid--resources > :nth-child(4) { animation-delay: .18s; }
}

/* narrow desktop — the band between the burger (880px) and the 1440px the
   panels were designed at. The four-column grids get tight enough that a
   link's arrow wraps onto its own line and breaks the column rhythm, so the
   panel type and the column gap step down. Nothing here touches ≥1201px. */
@media (max-width: 1200px) {
  .site-header .wrap.nav-panel__grid { gap: clamp(1.5rem, 2.8vw, 2.8rem); }
  .nav-panel ul a { font-size: 1.18rem; }
}
@media (max-width: 1000px) {
  .nav-panel ul a { font-size: 1.05rem; }
}

/* ---- burger + mobile tree ---- */
.menu-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px; margin: 0 auto;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { display: none; border-top: 1px solid var(--line); }
.nav-mobile.is-open { display: block; }
.nav-mobile ul { padding: .8rem clamp(1.25rem, 4vw, 3rem) 1.4rem; }
.nav-mobile a {
  display: block; padding: .8rem 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.4rem; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.nav-mobile li:last-child a { border-bottom: 0; }
/* group headers in the mobile tree — labels, not links (the desktop panels
   collapse into About / Get Involved / Resources groups) */
.nav-mobile__label {
  padding: 1.15rem 0 .3rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- hero — "Poster" (Jose's pick, 2026-08-10): photo/video in a 22px
        card inside a cream frame, cream type on a neutral scrim ---- */
/* seam (folded from nav-lab M12, 2026-08-12): NO top padding — the sticky
   bar already carries a frame-width gutter under its row, so the frame reads
   even without doubling at the seam. 41px = the bar's logo row; the three
   gutters are the bar's top + bottom and the hero's bottom. */
.hero { padding: 0 clamp(.9rem, 1.8vw, 1.5rem) clamp(.9rem, 1.8vw, 1.5rem); }
.hero__card {
  position: relative;
  min-height: calc(100svh - 41px - 3 * clamp(.9rem, 1.8vw, 1.5rem));
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--cream);
  background: var(--black);
}
.hero__card > img, .hero__card > video, .hero__scrim { position: absolute; inset: 0; }
.hero__card > img, .hero__card > video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  background:
    linear-gradient(to right, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 60%),
    linear-gradient(to top, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .24) 52%, rgba(10, 10, 10, .18) 100%);
}
.hero__content {
  position: relative; width: 100%;
  padding: 3rem clamp(1.5rem, 4vw, 4rem) clamp(2.2rem, 4vw, 3.5rem);
}
.hero .kicker { color: rgba(241, 237, 228, .78); }
.hero__title { font-size: clamp(2.9rem, 8.5vw, 7.5rem); margin: .28em 0 .2em; }
.hero__line { display: block; white-space: nowrap; }
.hero__facts {
  font-weight: 500; font-size: .85rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(241, 237, 228, .8);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }

/* ---- secondary-page hero patterns (Jose's picks, 2026-08-10):
        "Split" and "Collage" from the hero lab — markup shape in
        _hero-lab/h2.html and h4.html until pages are built ---- */
.hero-split { display: grid; grid-template-columns: 1.15fr 1fr; min-height: calc(100svh - 74px); }
.hero-split__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4.5rem);
}
.hero-split__title { font-size: clamp(3rem, 7vw, 7rem); margin: .3em 0 .22em; }
.hero-split__title .hero__line--indent { margin-left: clamp(1.5rem, 5vw, 5rem); }
.hero-split__facts {
  font-weight: 500; font-size: .85rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--olive-deep);
}
.hero-split__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.hero-split__media { position: relative; }
.hero-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% center;
}

.hero-collage { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem); overflow: clip; }
.hero-collage__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero-collage__title { font-size: clamp(3rem, 6.5vw, 6.5rem); margin: .3em 0 .22em; }
.hero-collage__title .hero__line--indent { margin-left: clamp(1.5rem, 4vw, 4rem); }
/* sub-line under the title (first used on who-we-are) */
.hero-collage__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: #3d3a35;
  max-width: 34ch;
  margin-bottom: 1.5rem;
}
.hero-collage__facts {
  font-weight: 500; font-size: .85rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--olive-deep);
}
.hero-collage__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.hero-collage__media { position: relative; padding: 0 0 clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.hero-collage__dome {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-bottom-left-radius: var(--radius-img);
  border-bottom-right-radius: var(--radius-img);
}
.hero-collage__dome img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage__inset {
  position: absolute; left: 0; bottom: 0;
  width: 58%;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-collage__inset img { width: 100%; height: auto; }

/* ---- framed band cards — the dark bands share the hero's framed-card language (2026-08-10) ---- */
.rhythm, .closer {
  border-radius: var(--radius-card);
  overflow: clip;
}
.rhythm { margin: 0 clamp(.9rem, 1.8vw, 1.5rem); }
.closer { margin: 0 clamp(.9rem, 1.8vw, 1.5rem) clamp(.9rem, 1.8vw, 1.5rem); }

/* ---- mission statement ---- */
.mission { padding: var(--pad-section) 0; }
.mission__text {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.45;
  font-weight: 400;
  max-width: 30em;
  margin-top: 1.4rem;
}
.mission__text em { color: var(--olive-deep); }

/* ---- schedule rows (design-system component; first used on events.html) ---- */
.sched { list-style: none; margin: 0; padding: 0; }
.sched li {
  display: grid; grid-template-columns: 11.5rem 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
}
.sched li:last-child { border-bottom: 1px solid var(--line); }
.sched__d {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: 1.35rem;
}
.sched__e { font-size: 1.05rem; }
.sched__e strong { font-weight: 700; }
.sched__t {
  font-size: .82rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.on-dark .sched li { border-color: rgba(241, 237, 228, .22); }
.on-dark .sched__t { color: rgba(241, 237, 228, .7); }

/* ---- events page ---- */
.hero-split--short { min-height: min(62svh, 560px); }
/* ---- event cards (2026-09-16): one card per event — photo or slide, when,
   the title with the script first letter, a line, where, and the next step
   (the whole card is the link; drop-in events are plain articles). Used on
   events.html (On the Calendar, every event) and index.html (Featured
   Events, a selection) — keep the two in step. ---- */
.ev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.5vw, 2.8rem) clamp(1rem, 2.4vw, 2rem); margin-top: 1.4rem; }
.ev-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.ev-card__media { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-img); overflow: hidden; background: var(--cream2); }
.ev-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ev-card__when { display: block; margin-top: 1rem; font-weight: 500; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-deep); }
.ev-card__title { display: block; margin-top: .45rem; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1; transition: color .25s var(--ease); }
.ev-card__title .curs { padding-right: .12em; }
.ev-card__desc { display: block; margin-top: .7rem; color: #3d3a35; font-size: .98rem; }
.ev-card__meta { display: block; margin-top: .4rem; color: var(--muted); font-size: .88rem; }
.ev-card__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.ev-card__cta .ar { display: inline-block; color: var(--olive-deep); transition: transform .25s var(--ease); }
a.ev-card:hover .ev-card__media img { transform: scale(1.04); }
a.ev-card:hover .ev-card__title { color: var(--olive-deep); }
a.ev-card:hover .ev-card__cta .ar { transform: translateX(6px); }
@media (max-width: 880px) { .ev-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ev-cards { grid-template-columns: 1fr; } }
/* home "Featured Events" section (2026-08-12) — reuses the events page's
   slide grid + sched rows; cream band between visiting (cream2) and the
   olive closer */
.home-events { padding: var(--pad-section) 0; }
.home-events__foot { margin-top: 2.6rem; }
/* ---- events page — "Calendar First" (Jose's pick 2026-09-16, L1 from the
   events page lab): typographic title + black Next-up date block, the event
   cards right away, an "A Sunday at Garden Co." schedule table, a slim series
   strip, then Church Center ---- */
.evt-head { padding: clamp(2.6rem, 6vw, 4.8rem) 0 clamp(1rem, 2vw, 1.6rem); }
.evt-head__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.evt-title { font-size: clamp(3rem, 8.2vw, 7.6rem); margin: .35em 0 .3em; }
.evt-title .curs { padding-right: .2em; } /* Snell's cap W crowds the H at .08em */
.evt-lede { color: #3d3a35; font-size: 1.1rem; max-width: 44ch; }
.evt-next { display: grid; grid-template-columns: auto auto; gap: .2rem 1.4rem; align-items: end; padding: 1.4rem 1.6rem; border-radius: var(--radius-card); background: var(--black); color: var(--cream); text-decoration: none; min-width: 18rem; }
.evt-next__k { grid-column: 1 / -1; font-weight: 500; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); }
.evt-next__date { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .86; font-size: clamp(3rem, 5.5vw, 4.6rem); }
.evt-next__t { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; padding-bottom: .3rem; }
.evt-next__t .ar { display: inline-block; transition: transform .25s var(--ease); }
.evt-next:hover .evt-next__t .ar { transform: translateX(5px); }
.evt-cards-sec { padding: clamp(1.6rem, 3vw, 2.4rem) 0 var(--pad-section); }
.evt-sunday { padding: 0 0 var(--pad-section); }
.evt-sunday__table { border-top: 1px solid var(--line); margin-top: 1.6rem; }
.evt-sunday__row { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .4rem 1.6rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.evt-sunday__time { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.evt-sunday__what { color: #3d3a35; }
.evt-sunday__what strong { font-weight: 700; color: var(--ink); }
.evt-k { font-weight: 500; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-deep); }
.evt-go { display: inline-block; font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.evt-go .ar { display: inline-block; color: var(--olive-deep); transition: transform .25s var(--ease); }
.evt-go:hover .ar { transform: translateX(5px); }
.evt-season { padding: 0 0 var(--pad-section); }
.evt-series { display: grid; grid-template-columns: clamp(150px, 20vw, 260px) 1fr auto; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; background: var(--cream2); border-radius: var(--radius-card); padding: clamp(.9rem, 1.6vw, 1.2rem); color: inherit; text-decoration: none; }
.evt-series img { width: 100%; height: auto; border-radius: var(--radius-img); }
.evt-series__t { display: block; margin-top: .4rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.evt-series__d { display: block; margin-top: .5rem; color: #3d3a35; max-width: 46ch; }
.evt-series__go { padding-right: clamp(.4rem, 2vw, 1.6rem); font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; color: var(--olive-deep); transition: transform .25s var(--ease); }
.evt-series:hover .evt-series__go { transform: translateX(6px); }
@media (max-width: 880px) {
  .evt-head__grid { grid-template-columns: 1fr; }
  .evt-next { justify-self: start; min-width: 0; }
  .evt-sunday__row { grid-template-columns: 1fr; }
  .evt-series { grid-template-columns: 1fr; }
  .evt-series__go { display: none; }
}
.events-cc { background: var(--cream2); padding: clamp(3.5rem, 6vw, 6rem) 0; }
.events-cc__head { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .6rem; }
.events-cc p { color: #3d3a35; max-width: 52ch; margin-bottom: 1.8rem; }

/* ---- series promo band — born as the Consecrated campaign band (Aug 2026,
   from consecrated-2026-08/home-promo-snippet.html); since 2026-09-15 it
   carries the current sermon series (Journey Through Acts → acts.html).
   Not used on any page since 2026-09-16 (home uses the .series inline band,
   events.html moved to the Calendar First layout); kept as a documented
   component for a future series promo.
   Whole band clicks through. ---- */
.promo {
  background: var(--black);
  border-radius: var(--radius-card);
  overflow: clip;
  margin: 0 clamp(.9rem, 1.8vw, 1.5rem);
}
.promo__link {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  color: var(--cream);
  text-decoration: none;
}
.promo__body {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(2.6rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.promo__title { font-size: clamp(2.6rem, 5.5vw, 5rem); white-space: nowrap; }
.promo__title .curs { padding-right: .14em; } /* Snell cap A needs room before the C */
/* events.html: the band follows the split hero's flush photo — give it the
   gutter above so it reads as a framed card, not a continuation */
.promo--events { margin-top: clamp(.9rem, 1.8vw, 1.5rem); }
.promo__sub { font-size: 1.02rem; color: rgba(241, 237, 228, .85); max-width: 40ch; }
.promo__btn { margin-top: .4rem; gap: .6rem; }
.promo__arrow { transition: transform .25s var(--ease); }
.promo__link:hover .promo__btn { background: var(--cream); color: var(--black); }
.promo__link:hover .promo__arrow { transform: translateX(5px); }
.promo__media { position: relative; overflow: hidden; min-height: 300px; }
/* campaign slides are text-bearing: bias the crop toward the text side */
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }

/* ---- series inline band (home 2b, 2026-09-15) — the current sermon series
   as a typographic moment: pill photo chips cut from the series photography
   set inside the headline. Jose picked it from the Acts hero lab (A7) and
   asked for it here in place of the black promo band. For each new series:
   swap the pill photos, the title rows, the verse and the links. ---- */
.series { padding: clamp(.5rem, 2vw, 1.5rem) 0 var(--pad-section); text-align: center; overflow: clip; }
.series__h { margin: clamp(1rem, 2.5vw, 1.8rem) 0 0; }
.series__row { display: block; white-space: nowrap; line-height: 1; }
.series__row--sm { font-size: clamp(2.2rem, 6.6vw, 6.6rem); }
.series__row--lg { font-size: clamp(3.6rem, 12vw, 11.5rem); line-height: .92; }
.series__row--lg .curs { padding-right: .14em; } /* Snell cap A needs room before the C */
.series__pill {
  display: inline-block; vertical-align: -.02em;
  height: .74em; width: 1.75em;
  border-radius: 999px; overflow: hidden;
  margin: 0 .08em;
}
.series__row--lg .series__pill { width: 1.3em; height: .7em; vertical-align: .02em; }
.series__pill img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .series__pill img { transition: transform .9s var(--ease); }
  .series__pill:hover img { transform: scale(1.12); }
}
.series__foot {
  display: grid; grid-template-columns: 1fr 1.4fr auto;
  align-items: center; gap: clamp(1.2rem, 3vw, 3rem);
  text-align: left;
  border-top: 1px solid var(--line);
  margin-top: clamp(1.8rem, 3.5vw, 3rem); padding-top: 1.6rem;
}
.series__date {
  font-weight: 500; font-size: .8rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--olive-deep); white-space: nowrap;
}
.series__verse { font-style: italic; color: #3d3a35; }
.series__verse cite {
  font-style: normal; font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
  margin-left: .4em; white-space: nowrap;
}
.series__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }
@media (max-width: 880px) {
  .series__foot { grid-template-columns: 1fr; text-align: center; }
  .series__cta { justify-content: center; }
}
@media (max-width: 560px) {
  .series__row--lg .series__pill:last-child { display: none; }
  .series__row--sm { font-size: clamp(1.9rem, 9vw, 3rem); }
  .series__row--lg { font-size: clamp(2.8rem, 16.5vw, 5rem); }
}

/* ---- sundays (cream2 band, dome photo columns) ---- */
.sundays { background: var(--cream2); padding: var(--pad-section) 0 clamp(4rem, 7vw, 6.5rem); }
.sundays__intro { max-width: 56ch; color: #3d3a35; margin-bottom: 2.8rem; }
.sundays__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.2vw, 3.2rem);
  align-items: start;
}
.dome {
  overflow: hidden;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-bottom-left-radius: var(--radius-img);
  border-bottom-right-radius: var(--radius-img);
}
.dome img { width: 100%; height: 100%; object-fit: cover; }

/* blob — photo mask (Sundays; continues v3's .morph motif). Rests as a circle
   (square box, 50% radius — Jose's call 2026-08-11: not ovals); hovering an item
   morphs it into its irregular blob and back on leave. Radii stay in the 42–58%
   range: organic, never wild. Each item gets a distinct blob so the three don't
   read as copies. Permanent circle under prefers-reduced-motion. */
.blob {
  overflow: hidden;
  border-radius: 50%;
}
.blob img { width: 100%; height: 100%; object-fit: cover; }
.sundays__item .blob { aspect-ratio: 1 / 1; width: 90%; }
/* all three Sunday photos are pre-cropped square sources (sermon + kids
   replaced 2026-09-15 with Jose's new selects), so no object-position offsets */
@media (prefers-reduced-motion: no-preference) {
  .blob { transition: border-radius .8s var(--ease); }
  .sundays__item:nth-child(1):hover .blob { border-radius: 64% 36% 56% 44% / 44% 62% 38% 56%; }
  .sundays__item:nth-child(2):hover .blob { border-radius: 38% 62% 46% 54% / 58% 40% 60% 42%; }
  .sundays__item:nth-child(3):hover .blob { border-radius: 56% 44% 36% 64% / 40% 56% 44% 60%; }
}
/* listen row — current series art + the Spotify link under the Sunday
   columns (Acts key art since 2026-09-15; swap with each new series) */
.sundays__listen {
  display: grid; grid-template-columns: minmax(220px, 320px) 1fr auto;
  gap: clamp(1.4rem, 3vw, 2.5rem); align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding-top: 2.2rem;
}
.sundays__listen img { display: block; width: 100%; height: auto; border-radius: var(--radius-img); }
.sundays__listen p { color: #3d3a35; max-width: 40ch; }
.sundays__item h3 {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 1.1rem 0 .35rem;
}
.sundays__item p { color: #3d3a35; font-size: .98rem; max-width: 34ch; }

/* ---- rhythm: Temple + Table (the black layout event).
   "Mondays" staging — Jose's pick 2026-08-11 from the rhythm lab
   (R11 = R4 statement head × R10 column grid + chip strip) ---- */
.rhythm { background: var(--black); color: var(--cream); padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.rhythm__statement { margin: .8rem 0 clamp(2.6rem, 5vw, 4rem); }
.rhythm__quiet {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  color: rgba(241, 237, 228, .55);
}
.rhythm__loud {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .98;
  font-size: clamp(2.7rem, 7.5vw, 6rem);
  margin-top: .18em;
}
.rhythm__leadcols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: 2.8rem;
}
.rhythm__leadcols p { color: rgba(241, 237, 228, .8); max-width: 52ch; }
.rhythm__leadcols strong { color: var(--cream); font-weight: 500; }
.rhythm__strip { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(241, 237, 228, .22); }
.rhythm__cell {
  display: grid; grid-template-columns: clamp(130px, 13vw, 185px) 1fr;
  gap: clamp(1.4rem, 2vw, 1.9rem); align-items: center;
  padding: 1.9rem 2.5rem 1.9rem 0;
}
.rhythm__cell + .rhythm__cell { border-left: 1px solid rgba(241, 237, 228, .22); padding-left: 2.5rem; padding-right: 0; }
.rhythm__chip { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.rhythm__chip img { width: 100%; height: 100%; object-fit: cover; }
.rhythm__cell h3 {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: .3rem;
}
.rhythm__cell p { color: rgba(241, 237, 228, .8); font-size: .95rem; max-width: 40ch; }
.rhythm__cell .rhythm__when { margin-top: .45rem; }
.rhythm__when {
  display: block; margin-top: 1.3rem;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241, 237, 228, .6);
}
.rhythm__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  margin-top: 3.2rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(241, 237, 228, .22);
}
.rhythm__motto {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .95rem; color: rgba(241, 237, 228, .72);
  margin-right: auto;
}
.rhythm__foot .btn { flex-shrink: 0; }

/* ---- the way (cream, hairline rows) ---- */
.the-way { padding: var(--pad-section) 0; }
.the-way__intro { max-width: 46ch; color: #3d3a35; margin: 1rem 0 2.4rem; }
.the-way__list { border-top: 1px solid var(--line); }
.the-way__row {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: 1rem 2rem;
  align-items: baseline;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
}
.the-way__step {
  font-size: .82rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--olive-deep);
}
.the-way__line {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
/* sanctioned full-word script: the mission accent words with/like/what */
.the-way__accent {
  font-family: var(--font-script);
  font-style: italic; font-weight: 400; text-transform: none;
  font-size: 1.18em; line-height: 0;
  vertical-align: -.06em;
  color: var(--olive-deep);
  padding: 0 .06em;
  display: inline-block;
}
.the-way__note { grid-column: 2; color: var(--muted); font-size: .95rem; max-width: 52ch; }
/* split staging (Jose's pick 2026-09-16, T5 from the home section lab): a
   tall rounded garden photo beside the head, intro and rows */
.the-way__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.the-way__photo { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 540px; }
.the-way__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 70%; }
.the-way__body { display: flex; flex-direction: column; justify-content: center; }
.the-way__body .section-head { margin: 0 0 .7rem; }
.the-way__body .the-way__intro { margin: 0 0 1.8rem; }
.the-way__grid .the-way__row { grid-template-columns: 8rem 1fr; }
@media (max-width: 880px) {
  .the-way__grid { grid-template-columns: 1fr; }
  .the-way__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .the-way__grid .the-way__row { grid-template-columns: 1fr; }
}

/* ---- visiting (cream2). "Strip" staging — Jose's pick 2026-08-11 from the
   visiting lab (V5): intro pair → wide rounded photo band → 4-cell hairline
   fact strip → CTA ---- */
.visiting { background: var(--cream2); padding: var(--pad-section) 0; }
.visiting__head { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: 1.1rem; }
.visiting__copy { max-width: 52ch; color: #3d3a35; }
.visiting__intro { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin: .4rem 0 2rem; }
.visiting__intro .visiting__head { margin-bottom: 0; }
.visiting__intro .visiting__copy { max-width: 46ch; margin-bottom: .3rem; }
.visiting__band { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 21 / 8; }
.visiting__band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.visiting__strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 2rem;
}
.visiting__cell {
  padding: 1.3rem 1.6rem 1.3rem 0;
  font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; font-size: .85rem;
}
.visiting__cell + .visiting__cell { border-left: 1px solid var(--line); padding-left: 1.6rem; }
.visiting__foot { margin-top: 2.4rem; }

/* ---- closer (olive-deep) ---- */
.closer {
  background: var(--olive-deep); color: var(--cream);
  text-align: center;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
}
.closer__head { font-size: clamp(2.9rem, 9vw, 7.5rem); white-space: nowrap; margin-bottom: 1.4rem; }
.closer__facts {
  font-weight: 500; font-size: .85rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(241, 237, 228, .75);
  margin-bottom: 2.4rem;
}
.closer__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ---- footer — black, no hairlines (Jose's pick 2026-09-16: F6 from
   footer lab 2, "f1 with no hairlines"; replaces the cream2 "Mega" footer
   of 2026-08-12). Full-bleed black: white logo + mission, three link
   columns + a "First time?" column, the legal row — spacing alone
   separates the groups; the social icons are soft filled circles. The
   rail still carries NO "Plan your Visit" pill (on home it would sit right
   under the closer's identical CTA). Column class stays .footer-nav:
   main.js sets aria-current off `.footer-nav a`. ---- */
.site-footer {
  background: var(--black); color: var(--cream);
  padding: clamp(3.5rem, 6vw, 5rem) 0 0;
}
.footer-masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; padding-bottom: .6rem; }
.footer-masthead img { width: 150px; height: auto; }
.footer-masthead p { color: rgba(241, 237, 228, .72); font-size: .95rem; max-width: 46ch; }
/* three link columns + the "First time?" column */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: 2rem;
  padding: 2.4rem 0 1.2rem;
}
.site-footer h4 {
  font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241, 237, 228, .55);
  margin-bottom: .9rem;
}
/* second group heading inside a footer column (Resources under About) */
.footer-nav ul + h4 { margin-top: 1.7rem; }
.footer-nav a {
  display: inline-block; padding: .28rem 0;
  color: var(--cream); text-decoration: none; font-size: .98rem;
  transition: color .25s var(--ease);
}
.footer-nav a:hover { color: var(--olive); }
.footer-rail p { font-size: .98rem; color: rgba(241, 237, 228, .72); }
.footer-rail h4 + p { color: var(--cream); }
.socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.socials a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(241, 237, 228, .1); color: var(--cream);
  transition: background .25s var(--ease);
}
.socials a:hover { background: rgba(241, 237, 228, .2); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 2.2rem 0 1.8rem;
  font-size: .85rem; color: rgba(241, 237, 228, .55);
}

/* ---- accordion (design-system component). Promoted to styles.css
   2026-08-12 when who-we-are.html needed it for the 16 Core Beliefs —
   the values are lifted verbatim from faq.html's page-scoped block, which
   was the third hand-rolled copy of the same thing (consecrated's "How to
   Fast" is the first). Native <details>, no JS. ---- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .2rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  font-size: 1.25rem;
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--olive-deep);
  transition: transform .25s var(--ease);
}
.acc__item[open] summary::after { transform: rotate(45deg); }
.acc__item summary:hover { color: var(--olive-deep); }
.acc__body { padding: 0 .2rem 1.5rem; max-width: 66ch; color: #3d3a35; }
/* the index number reads as a quiet marker, not part of the title */
.acc__n {
  font-weight: 400;
  color: var(--muted);
  margin-right: .8em;
  letter-spacing: .1em;
}

/* ============================================================
   Motion — one coordinated hero reveal on load + quiet scroll-ins.
   transform/opacity only, brand easing. Scroll-in hidden states
   apply only under html.js (progressive enhancement) and inside
   prefers-reduced-motion: no-preference.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  .hero__content > *, .hero-split__text > *, .hero-collage__copy > * { animation: rise .75s var(--ease) backwards; }
  .hero__content > :nth-child(1), .hero-split__text > :nth-child(1), .hero-collage__copy > :nth-child(1) { animation-delay: .05s; }
  .hero__content > :nth-child(2), .hero-split__text > :nth-child(2), .hero-collage__copy > :nth-child(2) { animation-delay: .15s; }
  .hero__content > :nth-child(3), .hero-split__text > :nth-child(3), .hero-collage__copy > :nth-child(3) { animation-delay: .28s; }
  .hero__content > :nth-child(4), .hero-split__text > :nth-child(4), .hero-collage__copy > :nth-child(4) { animation-delay: .4s; }

  /* accordion body fades up on open (part of the .acc component; the
     `rise` keyframe above is identical to the one faq.html used) */
  .acc__item[open] .acc__body { animation: rise .4s var(--ease) backwards; }

  html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
  html.js .rv.in { opacity: 1; transform: translateY(0); }
  html.js .rv.d1 { transition-delay: .1s; }
  html.js .rv.d2 { transition-delay: .22s; }
  html.js .rv.d3 { transition-delay: .34s; }
}

/* ---- responsive ---- */
@media (max-width: 960px) {
  /* footer: two columns */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* footer: the masthead wraps on its own (flex); columns stay two-up */
  .footer-grid { gap: 1.8rem 1.4rem; }
}

@media (max-width: 880px) {
  .promo__link { grid-template-columns: 1fr; }
  .promo__media { order: -1; min-height: 0; }
  .promo__media img { position: static; height: auto; }
  .promo__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }

  .visiting__intro { grid-template-columns: 1fr; gap: 1rem; }
  .visiting__band { aspect-ratio: 16 / 9; }
  .visiting__strip { grid-template-columns: 1fr; border-bottom: 0; }
  .visiting__cell { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .visiting__cell + .visiting__cell { border-left: 0; padding-left: 0; }
}

@media (max-width: 880px) {
  .nav-desktop, .header-cta { display: none; }
  /* the mega panels are desktop-only — the burger tree carries the same
     structure as a grouped list (see the .nav-mobile markup) */
  .nav-panel, .nav-megabtn { display: none; }
  .menu-toggle { display: flex; }
  .brand img { width: 132px; }

  .hero__card { min-height: 74svh; }

  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__media { height: 54vh; }
  .hero-split__media img { position: static; height: 100%; }

  .hero-collage__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-collage__media { max-width: 460px; }

}

@media (max-width: 760px) {

  .hero__title { font-size: clamp(2.7rem, 12.5vw, 3.4rem); }
  .hero__facts { letter-spacing: .2em; }
  .hero__cta .btn { padding: .85rem 1.6rem; }

  .sundays__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .sundays__item .blob { width: 100%; }
  .sundays__item p { max-width: 60ch; }

  .the-way__row { grid-template-columns: 1fr; gap: .3rem; padding: 1.4rem 0; }
  .the-way__note { grid-column: 1; }

  .sched li { grid-template-columns: 1fr; gap: .15rem; padding: .95rem 0; }
  .sundays__listen { grid-template-columns: 1fr; }
  .sundays__listen img { max-width: 340px; }

  .rhythm__loud { font-size: clamp(2.4rem, 10.5vw, 3.2rem); }
  .rhythm__leadcols { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
  .rhythm__strip { grid-template-columns: 1fr; }
  .rhythm__cell { grid-template-columns: 116px 1fr; padding: 1.7rem 0; }
  .rhythm__cell + .rhythm__cell { border-left: 0; border-top: 1px solid rgba(241, 237, 228, .22); padding-left: 0; }
  .rhythm__foot { flex-direction: column; align-items: flex-start; }
  .rhythm__motto { margin-right: 0; }

  .closer__head { white-space: normal; }

  .acc__item summary { font-size: 1.1rem; padding: 1rem .1rem; }
  .acc__body { padding: 0 .1rem 1.3rem; }
}

/* ============================================================
   Garden Co — site_v4 · acts.html — the SERIES page (2026-09-15).
   Journey Through Acts replaces the retired consecrated.html. It started
   as a 1:1 consecrated re-map, then Jose redesigned it section by
   section in home-page language (five variants a round, his pick each
   time). Reusable for EVERY future sermon series: swap the art, copy,
   links and playlist ID; keep the sr- classes.
   Signature move (no other page has it): the podcast cards — the
   latest three episodes, rewritten from the playlist feed by
   tools/update-podcast.py (the dark photo band that held this role
   was retired 2026-09-15).
   ============================================================ */

/* ---- hero: home's "Poster" pattern, shortened (Jose's pick 2026-09-15 —
   A9 from the Acts hero lab). Uses home's .hero / .hero__card / .hero__scrim
   / .hero__content; .sr-poster only shortens the card (~two-thirds of the
   screen) and sets the series lockup: JOURNEY THROUGH over the giant
   script-letter word. The ceremonial centered stack and the key-art band
   under it were retired the same day. ---- */
.sr-poster .hero__card { min-height: min(66svh, 620px); }
.sr-poster .hero__card > img { object-position: 60% 50%; }
.sr-poster .hero__content { padding-top: 2.2rem; }
.sr-poster__pre {
  display: block; margin-top: 1rem;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(1rem, 1.9vw, 1.55rem); line-height: 1.15;
}
.sr-poster__title {
  display: block; white-space: nowrap;
  font-size: clamp(3.6rem, 10vw, 9.5rem); line-height: .9;
  margin: .04em 0 .16em;
}
.sr-poster__title .curs { padding-right: .14em; } /* Snell cap A needs room before the C */

/* ---- why — home's Mondays statement, on cream (Jose's pick 2026-09-15,
   W2 from the Acts section lab): a quiet line over a loud one, then the
   story in two columns under a hairline ---- */
.sr-why { padding: var(--pad-section) 0; }
.sr-why__quiet {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--muted);
}
.sr-why__loud {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .98;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  margin-top: .18em; text-wrap: balance;
}
.sr-why__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2.2rem, 4vw, 3.4rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.sr-why__cols p { color: #3d3a35; max-width: 52ch; }
.sr-why__cols strong { color: var(--ink); font-weight: 500; }
@media (max-width: 880px) {
  .sr-why__cols { grid-template-columns: 1fr; gap: 1rem; }
}

/* section heads (read along, resources) */
.sr-head { font-size: clamp(2.4rem, 5.5vw, 4rem); margin-bottom: 1.2rem; }

/* ---- the podcast (Jose's pick 2026-09-15, P2 from the Acts section lab):
   the latest three episodes as thumbnail cards. The cards themselves are
   generated from the playlist feed by tools/update-podcast.py. ---- */
.sr-pod { padding: var(--pad-section) 0; }
.sr-pod__top { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: 2.2rem; }
.sr-pod__top .sr-head { margin-bottom: 0; }
.sr-pod__intro { color: #3d3a35; max-width: 44ch; margin-bottom: .45rem; }
.sr-pod__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.sr-pod__card { display: block; text-decoration: none; }
.sr-pod__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-img); overflow: hidden; background: var(--black); }
.sr-pod__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.sr-pod__play {
  position: absolute; left: 50%; top: 50%;
  width: 52px; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--cream);
  transition: transform .35s var(--ease);
}
.sr-pod__play::before {
  content: ""; position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--black);
}
.sr-pod__card:hover .sr-pod__thumb img { transform: scale(1.04); }
.sr-pod__card:hover .sr-pod__play { transform: translate(-50%, -50%) scale(1.08); }
.sr-pod__ch {
  display: block; margin-top: 1rem;
  font-weight: 500; font-size: .76rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--olive-deep);
}
.sr-pod__title { display: block; margin-top: .45rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1; transition: color .25s var(--ease); }
.sr-pod__title .curs { padding-right: .12em; } /* Snell caps (W, A) need room */
.sr-pod__card:hover .sr-pod__title { color: var(--olive-deep); }
.sr-pod__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.sr-pod__sunday { font-size: .92rem; color: var(--muted); }
.sr-pod__sunday a { color: var(--ink); }
@media (max-width: 880px) {
  .sr-pod__top { grid-template-columns: 1fr; gap: .8rem; }
  .sr-pod__grid { grid-template-columns: 1fr; }
}

/* ---- read along — the devotional as a framed dark promo card (Jose's pick
   2026-09-15, R3 from the Acts section lab; home's former banner language):
   type left, the cover floating over the series photo right, the whole
   card is one link ---- */
.sr-dev {
  background: var(--black); color: var(--cream);
  border-radius: var(--radius-card); overflow: clip;
  margin: 0 clamp(.9rem, 1.8vw, 1.5rem) clamp(.9rem, 1.8vw, 1.5rem);
}
.sr-dev__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); color: inherit; text-decoration: none; }
.sr-dev__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; padding: clamp(2.8rem, 5.5vw, 5rem) clamp(1.5rem, 4vw, 4rem); }
.sr-dev__kicker { font-weight: 500; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }
.sr-dev__title { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.sr-dev__sub { color: rgba(241, 237, 228, .85); max-width: 40ch; }
.sr-dev__price { font-weight: 500; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(241, 237, 228, .65); }
.sr-dev__btn { margin-top: .4rem; gap: .6rem; }
.sr-dev__link:hover .sr-dev__btn { background: var(--cream); color: var(--black); }
.sr-dev__media { position: relative; min-height: 420px; overflow: hidden; }
.sr-dev__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.sr-dev__media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .28); }
.sr-dev__cover {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: min(42%, 230px); height: auto; border-radius: 4px;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7);
  transition: transform .6s var(--ease);
}
.sr-dev__link:hover .sr-dev__cover { transform: translate(-50%, calc(-50% - 6px)); }
@media (max-width: 880px) {
  .sr-dev__link { grid-template-columns: 1fr; }
  .sr-dev__media { order: -1; min-height: 320px; }
}

/* ---- resources — a photo circle per resource (Jose's pick 2026-09-15, S3
   from the Acts section lab): home's Sunday circles, morphing into blobs
   on hover ---- */
.sr-res { padding: var(--pad-section) 0; }
.sr-res__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem); margin-top: 1.6rem; }
.sr-res__item { display: grid; grid-template-columns: clamp(84px, 8vw, 112px) 1fr; gap: 1.2rem; align-items: center; color: inherit; text-decoration: none; }
.sr-res__chip { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.sr-res__chip img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .sr-res__chip { transition: border-radius .8s var(--ease); }
  .sr-res__item:nth-child(odd):hover .sr-res__chip { border-radius: 64% 36% 56% 44% / 44% 62% 38% 56%; }
  .sr-res__item:nth-child(even):hover .sr-res__chip { border-radius: 38% 62% 46% 54% / 58% 40% 60% 42%; }
}
.sr-res__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.02; transition: color .25s var(--ease); }
.sr-res__name .ar { display: inline-block; color: var(--olive-deep); transition: transform .25s var(--ease); }
/* keep the last word and its arrow together (an inline-block arrow is a
   break opportunity even after &nbsp;) */
.sr-res__nw { white-space: nowrap; }
.sr-res__desc { display: block; font-size: .92rem; color: var(--muted); margin-top: .35rem; }
.sr-res__item:hover .sr-res__name { color: var(--olive-deep); }
.sr-res__item:hover .ar { transform: translateX(6px); }
@media (max-width: 880px) { .sr-res__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sr-res__grid { grid-template-columns: 1fr; } }

/* ---- closer — "Poster" (Jose's pick 2026-09-15, C5 from the Acts section
   lab): the framed olive band, SEE YOU SUNDAY. edge to edge and
   left-aligned, the verse / note / buttons on a hairline foot (the home
   series band's foot) ---- */
.sr-close {
  background: var(--olive-deep); color: var(--cream);
  border-radius: var(--radius-card); overflow: clip;
  margin: 0 clamp(.9rem, 1.8vw, 1.5rem) clamp(.9rem, 1.8vw, 1.5rem);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
.sr-close__kicker { font-weight: 500; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(241, 237, 228, .7); }
.sr-close__head { font-size: clamp(3rem, 10.5vw, 10rem); white-space: nowrap; line-height: .9; margin-top: .9rem; }
.sr-close__foot {
  display: grid; grid-template-columns: 1.3fr 1fr auto;
  gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(241, 237, 228, .22);
}
.sr-close__quote { font-style: italic; font-size: 1.12rem; color: rgba(241, 237, 228, .85); max-width: 44ch; }
.sr-close__quote cite {
  display: block; margin-top: .55rem; font-style: normal;
  font-weight: 500; font-size: .76rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(241, 237, 228, .6);
}
.sr-close__note { font-size: .95rem; color: rgba(241, 237, 228, .65); }
.sr-close__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 880px) { .sr-close__foot { grid-template-columns: 1fr; } }

/* ============================================================
   kids.html — Garden Co Kids (2026-09-16). "Pink Split": Jose's pick (K5)
   from the kids page lab (archived in
   ../_retired-assets/site_v4/kids-lab-2026-09-16/).
   Kids is its own sub-brand inside the site shell (the header and footer
   stay Garden Co), taken from Drive: Garden Co Creative/03_assets/
   brand_kit/kids:
   - Droog display type with a thin ink outline, Omnes caps for small type
   - six colors plus ink, and the paper texture
   - tilted sticker labels (rect, oval, cat)
   Fonts: Droog (900) + Omnes Pro (400/700) are in the site kit vtd3blb
   (Jose added them 2026-09-16).
   Avoid ? and ! in Droog; those glyphs look like numerals.
   ============================================================ */
.kd {
  --kd-cream: #fdf0e0;
  --kd-yellow: #fec81e;
  --kd-red: #ef313d;
  --kd-pink: #f06397;
  --kd-blue: #0496d1;
  --kd-green: #05a75b;
  --kd-ink: #110e09;
  --kd-display: "droog", "omnes-pro", var(--font-display);
  --kd-body: "omnes-pro", var(--font-body);
  --kd-gutter: clamp(.9rem, 1.8vw, 1.5rem);
  display: block;
  color: var(--kd-ink);
  font-family: var(--kd-body);
  overflow-x: clip;
}
.kd--paper { background-color: var(--kd-cream); padding-bottom: .01px; }
.kd--paper, .kd-paper {
  background-image: url(../images/kids/paper.webp);
  background-size: 620px auto;
  background-blend-mode: multiply;
}
.kd-bg-cream { background-color: var(--kd-cream); }
.kd-bg-yellow { background-color: var(--kd-yellow); }
.kd-bg-red { background-color: var(--kd-red); }
.kd-bg-pink { background-color: var(--kd-pink); }
.kd-bg-blue { background-color: var(--kd-blue); }
.kd-bg-green { background-color: var(--kd-green); }
.kd-c-cream { color: var(--kd-cream); }
.kd-c-yellow { color: var(--kd-yellow); }
.kd-c-red { color: var(--kd-red); }
.kd-c-pink { color: var(--kd-pink); }
.kd-c-blue { color: var(--kd-blue); }
.kd-c-green { color: var(--kd-green); }

/* Droog display, outlined like the brand art (stroke painted under the fill) */
.kd-d {
  font-family: var(--kd-display);
  font-weight: 900; font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .8;
  -webkit-text-stroke: max(1.5px, .02em) var(--kd-ink);
  paint-order: stroke fill;
}
/* Omnes caps — the brand's small type */
.kd-cap {
  font-family: var(--kd-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
  font-size: .84rem;
}
.kd p { font-size: 1.05rem; line-height: 1.55; }
.kd p.kd-cap { font-size: .84rem; line-height: 1.2; }
.kd-dot { padding: 0 .45em; }
.kd a:focus-visible { outline-color: var(--kd-ink); }

.kd-card {
  position: relative;
  margin: 0 var(--kd-gutter) var(--kd-gutter);
  border-radius: var(--radius-card);
  overflow: clip;
}

/* stickers: rect · oval · cat · tri, 2px ink outline, tilted. Decorative
   (aria-hidden); --bg sets the fill, --r the tilt. Add .kd-stk--sm-hide to
   drop a sticker on phones when it would cover type. */
.kd-stk {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  text-align: center;
  font-family: var(--kd-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(.56rem, .95vw, .84rem); line-height: 1.02;
  color: var(--kd-ink);
  -webkit-text-stroke: 0;
  transform: rotate(var(--r, -6deg));
  pointer-events: none;
  white-space: nowrap;
}
.kd-stk__t { position: relative; }
.kd-stk--rect { padding: .62em 1.05em .56em; border: 2px solid var(--kd-ink); border-radius: .55em; background: var(--bg); }
.kd-stk--oval { width: 9.4em; height: 6.4em; border: 2px solid var(--kd-ink); border-radius: 50%; background: var(--bg); }
.kd-stk--cat { width: 8.6em; height: 6.6em; }
.kd-stk--cat .kd-stk__t { padding-top: 1.2em; }
.kd-stk--tri { width: 7.6em; height: 7.2em; }
.kd-stk--tri .kd-stk__t { padding-top: 2.6em; }
.kd-stk svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kd-stk svg path { fill: var(--bg); stroke: var(--kd-ink); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* buttons: the site's pill geometry (hover inverts, never lifts), in Omnes caps */
.kd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .92rem 1.9rem .86rem;
  border-radius: 999px;
  border: 2px solid var(--kd-ink);
  background: var(--kd-ink); color: var(--kd-cream);
  font-family: var(--kd-body); font-weight: 700;
  font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.kd-btn:hover { background: transparent; color: var(--kd-ink); }
.kd-btn--ghost { background: transparent; color: var(--kd-ink); }
.kd-btn--ghost:hover { background: var(--kd-ink); color: var(--kd-cream); }
.kd-btn--yellow { background: var(--kd-yellow); color: var(--kd-ink); }
.kd-btn--yellow:hover { background: var(--kd-ink); color: var(--kd-yellow); }

/* hero: pink framed card, split — title + lede left, photo in the brand's triangle right */
.kd-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: min(86svh, 800px); }
.kd-hero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 2.2rem; padding: clamp(2.4rem, 5vw, 4.5rem) clamp(1.4rem, 4vw, 4rem); }
.kd-title { font-size: min(9.6vw, 8.4rem); color: var(--kd-cream); position: relative; z-index: 1; }
.kd-title span { display: block; white-space: nowrap; }
.kd p.kd-lede { font-size: clamp(.95rem, 1.45vw, 1.2rem); max-width: 34ch; }
.kd p.kd-facts { margin-top: 1rem; opacity: .75; }
.kd-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.kd-cta--c { justify-content: center; }
.kd-hero__media { position: relative; min-height: 22rem; }
.kd-tri { position: absolute; left: -4%; right: -10%; bottom: -12%; width: 114%; height: 108%; transform: rotate(-9deg); transform-origin: 50% 70%; overflow: visible; }
.kd-tri__line { fill: none; stroke: var(--kd-ink); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* lower-third strip (the brand's lower-third graphic) */
.kd-strip { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.kd-strip__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) 17rem; gap: clamp(1.4rem, 4vw, 3.6rem); align-items: center; }
.kd .kd-strip__t { font-size: clamp(2.4rem, 5.2vw, 4.8rem); line-height: .8; color: var(--kd-pink); }
.kd-strip__t span { display: block; white-space: nowrap; }
.kd p.kd-strip__m { font-size: clamp(.9rem, 1.3vw, 1.05rem); max-width: 40ch; }
.kd-strip__stk { position: relative; height: 10rem; }
.kd-strip__stk .kd-stk { font-size: .72rem; }

/* Discover / Learn / Build as three giant stickers */
.kd-trio { padding: 0 0 var(--pad-section); }
.kd-trio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.6rem); align-items: center; }
.kd-badge { position: relative; display: grid; place-items: center; aspect-ratio: 1.25; padding: 1.4rem; text-align: center; transform: rotate(var(--r)); }
.kd-badge--rect { border: 2px solid var(--kd-ink); border-radius: 28px; }
.kd-badge--oval { border: 2px solid var(--kd-ink); border-radius: 50%; }
.kd-badge--cat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kd-badge--cat svg path { fill: var(--kd-green); stroke: var(--kd-ink); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kd-badge > span { position: relative; }
.kd-badge--cat > span { padding-top: 12%; }
.kd-badge .kd-d { display: block; font-size: clamp(1.8rem, 3.2vw, 3rem); color: var(--kd-cream); }
.kd-badge .kd-cap { display: block; margin-top: .6rem; font-size: clamp(.8rem, 1.3vw, 1.08rem); }

/* ages: one framed card split blue (Nursery) / green (Kids) */
.kd-ages { display: grid; grid-template-columns: 1fr 1fr; }
.kd-age { display: flex; flex-direction: column; justify-content: flex-end; min-height: 25rem; padding: clamp(2.2rem, 5vw, 4.2rem) clamp(1.4rem, 4vw, 4rem); }
.kd-age .kd-d { font-size: clamp(3rem, 6vw, 5.6rem); color: var(--kd-cream); margin: .3em 0 .25em; }
.kd-age p:last-child { max-width: 36ch; }

/* your first Sunday: head + copy beside numbered rows */
.kd-first { padding: var(--pad-section) 0; }
.kd-first__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kd-first__h { font-size: clamp(2.8rem, 6.2vw, 5.8rem); line-height: .84; }
.kd p.kd-first__p { margin-top: 1.4rem; max-width: 38ch; }
.kd-steps { list-style: none; }
.kd-steps li { display: grid; grid-template-columns: 4.8rem 1fr; gap: .2rem 1.4rem; align-items: center; padding: 1.3rem 0; border-top: 2px solid var(--kd-ink); }
.kd-steps li:last-child { border-bottom: 2px solid var(--kd-ink); }
.kd-num { grid-row: span 2; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border: 2px solid var(--kd-ink); border-radius: 50%; font-size: 2.8rem; line-height: 1; padding-top: .1em; color: var(--kd-cream); }
.kd-steps h3 { font-weight: 700; text-transform: uppercase; font-size: 1.2rem; align-self: end; }
.kd .kd-steps p { align-self: start; }

/* closer: blue framed card, SEE YOU SUNDAY in three colors */
.kd-close { text-align: center; padding: clamp(3.8rem, 8vw, 7rem) clamp(1.2rem, 4vw, 3rem); }
.kd-close .kd-d { font-size: min(12vw, 10rem); line-height: .86; }
.kd p.kd-close__facts { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; }

@media (max-width: 880px) {
  .kd-hero, .kd-strip__grid, .kd-trio__grid, .kd-ages, .kd-first__grid { grid-template-columns: 1fr; }
  .kd-title { font-size: 16vw; }
  .kd-hero__media { min-height: 0; aspect-ratio: 1; margin: 0 1.2rem; }
  .kd-tri { left: 4%; width: 92%; height: 100%; bottom: -8%; }
  .kd-strip__stk { height: 9rem; max-width: 18rem; }
  .kd-trio__grid { max-width: 19rem; margin: 0 auto; }
  .kd-age { min-height: 16rem; }
}
@media (max-width: 560px) {
  .kd-stk { font-size: .56rem; }
  .kd-stk--sm-hide { display: none; }
}


/* ============================================================
   youth.html — Garden Youth (2026-09-16). "Brackets":
   Jose's pick (Y3) from the youth page lab (archived in
   ../_retired-assets/site_v4/youth-lab-2026-09-16/). Garden Youth sub-brand
   inside the site shell, from Drive brand_kit/youth/garden_co_youth:
   - Quokka glitch display (+ Quokka for the brackets), Neue Haas Grotesk Text
   - blue #188bcc, pink #f3547a, white, ink; the kit's paper + noise grain
   - bracket devices, pink highlight tags, the stepped pink glitch bar
   Fonts: quokka-glitch-left 700, quokka 700, neue-haas-grotesk-text 400/700,
   all in the site kit vtd3blb (added 2026-09-16).
   ============================================================ */
/* ---- Youth brand tokens (PSD fill + type layers, palette sheet) ---- */
.yt {
  --yt-blue: #188bcc;      /* screen / lower-third BG fill */
  --yt-blue-deep: #0e7dc7; /* post 3 BG fill */
  --yt-pink: #f3547a;      /* palette + tags */
  --yt-green: #1c944e;     /* palette (unused in the kit's graphics) */
  --yt-ink: #0a0a0a;
  --yt-glitch: "quokka-glitch-left", "quokka", var(--font-display);
  --yt-block: "quokka", var(--font-display);
  --yt-body: "neue-haas-grotesk-text", var(--font-body);
  --yt-gutter: clamp(.9rem, 1.8vw, 1.5rem);
  --yt-grain: url(../images/youth/grain.webp);
  display: flow-root;
  color: var(--yt-ink);
  font-family: var(--yt-body);
  font-weight: 400;
  overflow-x: clip;
}
.yt--white { background: #fff; padding-block: .01px; }
.yt-bg-blue { background-color: var(--yt-blue); }
.yt-bg-pink { background-color: var(--yt-pink); }
.yt-grain { background-image: var(--yt-grain); background-size: 480px auto; background-blend-mode: overlay; }
/* type */
.yt-g { font-family: var(--yt-glitch); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: .78; }
.yt-h { font-family: var(--yt-body); font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: .9; }
.yt h1, .yt h2, .yt h3 { font-weight: 700; }
.yt-g > span, .yt-h > span { display: block; white-space: nowrap; }
/* pink highlight tag — stacked lines like the kit's address labels */
.yt-tag {
  display: inline; background: var(--yt-pink); color: #fff;
  font-family: var(--yt-body); font-weight: 700; letter-spacing: -.02em; text-transform: none;
  font-size: clamp(.92rem, 1.3vw, 1.12rem); line-height: 1.32;
  padding: .06em .34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-align: center;
}
/* framed card + photo fill (grain over the photo, as in the kit) */
.yt-card { position: relative; margin: 0 var(--yt-gutter) var(--yt-gutter); border-radius: var(--radius-card); overflow: clip; }
.yt-photo { position: relative; overflow: clip; }
.yt-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10, 10, 10, .2); pointer-events: none; }
.yt-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--yt-grain) 0 0 / 480px auto; mix-blend-mode: overlay; opacity: .8; pointer-events: none; }
/* buttons: the site's pill geometry in Neue Haas caps */
.yt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .92rem 1.9rem .88rem; border-radius: 999px;
  border: 2px solid #fff; background: #fff; color: var(--yt-ink);
  font-family: var(--yt-body); font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.yt-btn:hover { background: transparent; color: #fff; }
.yt-btn--ghost { background: transparent; color: #fff; }
.yt-btn--ghost:hover { background: #fff; color: var(--yt-ink); }
.yt-btn--ink { background: var(--yt-ink); border-color: var(--yt-ink); color: #fff; }
.yt-btn--ink:hover { background: transparent; color: var(--yt-ink); }
.yt-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.yt-cta--c { justify-content: center; }
.yt-link { display: inline-block; margin-top: 1rem; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; }
.yt a:focus-visible { outline-color: var(--yt-pink); }
/* stepped pink glitch bar down a photo's left edge */
.yt-bar { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: clamp(16px, 3vw, 46px); background: var(--yt-pink); font-size: 0; clip-path: polygon(0 0, 100% 0, 100% 24%, 62% 24%, 62% 31%, 100% 31%, 100% 58%, 55% 58%, 55% 66%, 100% 66%, 100% 100%, 0 100%); }
.yt-hero { display: grid; place-items: center; min-height: min(90svh, 860px); color: #fff; text-align: center; }
.yt-hero > img { object-position: 62% 40%; }
.yt-hero__in, .yt-close > * { position: relative; z-index: 2; }
.yt-hero__in { padding: 3rem 1.2rem; }
.yt-title { display: flex; align-items: center; justify-content: center; gap: .08em; font-size: min(12vw, 10rem); margin-bottom: .2em; }
.yt-br { font-family: var(--yt-block); font-weight: 700; font-size: 2.3em; line-height: .7; }
.yt-title__w { text-align: center; }
.yt-when { text-wrap: balance; margin: clamp(1.2rem, 2.5vw, 2rem) 0 2rem; font-size: clamp(1.3rem, 3vw, 2.6rem); }
.yt-intro { padding: var(--pad-section) 0 clamp(2rem, 4vw, 3rem); }
.yt-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: end; }
.yt-intro__t { font-size: clamp(3.2rem, 8.6vw, 8.2rem); line-height: .84; color: var(--yt-blue); }
.yt-intro__p { max-width: 30ch; font-weight: 700; font-size: 1.3rem; line-height: 1.35; }
.yt-intro__tag { margin-top: 1.2rem; }
.yt-index { padding: clamp(1rem, 2vw, 2rem) 0 var(--pad-section); }
.yt-index__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--yt-ink); }
.yt-cell { padding: 1.8rem clamp(1rem, 2.4vw, 2rem) 0 0; }
.yt-cell + .yt-cell { padding-left: clamp(1rem, 2.4vw, 2rem); border-left: 2px solid var(--yt-ink); }
.yt-cell p.yt-cell__k { max-width: none; margin: 0; display: flex; align-items: center; gap: .06em; font-size: clamp(2.2rem, 4.4vw, 4rem); color: var(--yt-blue); }
.yt-cell__k .yt-br { font-size: 1.35em; }
.yt-cell h3 { margin-top: 1.2rem; font-size: 1.5rem; }
.yt-cell p { max-width: 30ch; margin-top: .5rem; font-size: 1.05rem; }
.yt-pair { display: grid; grid-template-columns: 1fr 1fr; min-height: min(80svh, 760px); }
.yt-pair__p { position: relative; }
.yt-pair__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-pair__p:nth-child(2) img { object-position: 70% 40%; }
.yt-pair__box { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: min(24rem, 64%); aspect-ratio: 4 / 5; padding: 1.6rem; color: #fff; }
.yt-pair__box .yt-g { display: block; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .96; text-align: center; transform: skewX(-10deg); }
.yt-serve { padding: var(--pad-section) 0; }
.yt-serve__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem clamp(1.6rem, 4vw, 4rem); align-items: center; padding-block: 2rem; border-top: 2px solid var(--yt-ink); border-bottom: 2px solid var(--yt-ink); }
.yt-serve .yt-h { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.yt-serve p { max-width: 36ch; font-size: 1.1rem; }
.yt-close { padding: clamp(3.5rem, 7vw, 6rem) 1.2rem; color: #fff; text-align: center; }
.yt-title--sm { font-size: min(10vw, 8.6rem); }
.yt-hero .yt-when, .yt-close .yt-when { margin-top: clamp(2.2rem, 4vw, 3.4rem); } /* clear the brackets' feet */
@media (max-width: 880px) {
  .yt-intro__grid, .yt-index__grid, .yt-serve__grid { grid-template-columns: 1fr; }
  .yt-cell, .yt-cell + .yt-cell { padding: 1.6rem 0; border-left: 0; }
  .yt-cell + .yt-cell { border-top: 2px solid var(--yt-ink); }
  .yt-pair { grid-template-columns: 1fr; min-height: 0; }
  .yt-pair__p { aspect-ratio: 4 / 5; }
  .yt-serve .yt-btn { justify-self: start; }
  .yt-hero .yt-title { font-size: 16vw; }
}
@media (max-width: 560px) {
  .yt-tag { font-size: .88rem; }
}


/* ============================================================
   young-adults.html — Garden Co Young Adults (2026-09-16). "Split Screen":
   Jose's pick (A3) from the young adults page lab (archived in
   ../_retired-assets/site_v4/ya-lab-2026-09-16/). YA sub-brand inside the
   site shell, from Drive brand_kit/youth/garden_co_ya:
   - Latino Gothic Variable wordmark set as Wide Black Italic (variation
     settings), Articulat CF 500/700, Freight Big Pro 400
   - cream #ecebdf, olive #5b5926, black #0f0f0f; the kit's 35mm grain
   - the thin ellipse ring around the wordmark
   Fonts: all in the site kit vtd3blb (added 2026-09-16).
   ============================================================ */
main.ya {
  --ya-black: #0f0f0f;
  --ya-cream: #ecebdf;
  --ya-olive: #5b5926;
  --ya-display: "latino-gothic-variable", var(--font-display);
  --ya-sans: "articulat-cf", var(--font-body);
  --ya-serif-f: "freight-big-pro", Georgia, serif;
  --ya-gutter: clamp(.9rem, 1.8vw, 1.5rem);
  --ya-line: rgba(236, 235, 223, .24);
  display: block;
  font-family: var(--ya-sans);
  font-weight: 500;
  overflow-x: clip;
}
main.ya--dark { background: var(--ya-black); color: var(--ya-cream); padding: .01px 0; }
main.ya a:focus-visible { outline-color: currentColor; }
/* type */
main.ya .ya-d {
  font-family: var(--ya-display);
  font-weight: 100; font-style: normal;
  /* Latino Gothic Variable as the kit's Wide Black Italic: Adobe serves its
     axes as 1–100, so all three at max = black, wide, slanted */
  font-variation-settings: "wght" 100, "wdth" 100, "slnt" 100;
  letter-spacing: -.02em; line-height: .86;
  text-transform: none;
  margin: 0;
}
main.ya .ya-in { padding-left: .55em; }
main.ya .ya-cap {
  font-family: var(--ya-sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: .8rem; line-height: 1.2;
}
main.ya .ya-capm {
  font-family: var(--ya-sans); font-weight: 500;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: .8rem; line-height: 1.12;
}
main.ya .ya-serif {
  font-family: var(--ya-serif-f); font-weight: 400; font-style: normal;
  letter-spacing: -.01em; line-height: 1.02;
  text-transform: none;
}
main.ya .ya-copy { font-size: 1.08rem; line-height: 1.55; max-width: 44ch; }
/* framed card in the gutter */
main.ya .ya-card {
  position: relative; isolation: isolate;
  margin: 0 var(--ya-gutter) var(--ya-gutter);
  border-radius: var(--radius-card);
  overflow: clip;
}
/* 35mm grain (the kit's film filter), laid over the whole block */
main.ya .ya-grain { position: relative; }
main.ya .ya-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 6;
  background: url(../images/ya/grain.webp) 0 0 / 320px;
  mix-blend-mode: overlay; opacity: .32;
  pointer-events: none; border-radius: inherit;
}
/* the thin ellipse ring around the wordmark */
main.ya .ya-ring { position: relative; display: inline-block; padding: .5em .8em .55em 1em; margin: 0; }
main.ya .ya-ring > span { display: block; white-space: nowrap; }
main.ya .ya-ring::before {
  content: ""; position: absolute; inset: 0 .4em 0 -.1em;
  border: max(1.5px, .014em) solid currentColor; border-radius: 50%;
  transform: rotate(-2deg);
  pointer-events: none;
}
/* buttons: the site's pill geometry, Articulat caps */
main.ya .ya-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .95rem 1.9rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--ya-cream);
  background: var(--ya-cream); color: var(--ya-black);
  font-family: var(--ya-sans); font-weight: 700;
  font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
main.ya .ya-btn:hover { background: transparent; color: var(--ya-cream); }
main.ya .ya-btn--ghost { background: transparent; color: var(--ya-cream); }
main.ya .ya-btn--ghost:hover { background: var(--ya-cream); color: var(--ya-black); }
main.ya .ya-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
main.ya .ya-cta--c { justify-content: center; }
main.ya .ya-hero { display: grid; grid-template-columns: 1fr 1fr; height: min(90svh, 840px); margin-top: var(--ya-gutter); }
main.ya .ya-hero__ph { position: relative; }
main.ya .ya-hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
main.ya .ya-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 15, .55), rgba(15, 15, 15, 0) 45%); z-index: 1; }
main.ya .ya-title { position: absolute; left: 3.5%; top: 47%; transform: translateY(-50%); z-index: 3; font-size: min(12.6vw, 11.4rem); }
main.ya .ya-title span { display: block; white-space: nowrap; }
main.ya .ya-title__y { color: var(--ya-cream); }
main.ya .ya-title__a { color: var(--ya-olive); padding-left: 1.05em; margin-top: -.08em; }
main.ya .ya-deco { position: absolute; z-index: 4; margin: 0; color: var(--ya-cream); font-size: clamp(.7rem, 1.05vw, .95rem); }
main.ya .ya-deco--purpose { top: 8%; left: 31%; }
main.ya .ya-deco--faith { top: 64%; left: 7%; }
main.ya .ya-deco--more { bottom: 7%; right: 3.5%; text-align: right; }
main.ya .ya-deco--when { top: 8%; right: 3.5%; text-align: right; } /* over the sky, clear of faces */
main.ya .ya-hero__cta { position: absolute; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 5; }
main.ya .ya-purpose { padding: clamp(3.2rem, 7vw, 6rem) clamp(1.4rem, 4.5vw, 4.5rem); background: var(--ya-olive); color: var(--ya-cream); }
main.ya .ya-purpose__t { font-size: min(6.4vw, 6rem); }
main.ya .ya-purpose__t span { display: block; white-space: nowrap; }
main.ya .ya-purpose__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 3rem; align-items: baseline; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid rgba(236, 235, 223, .35); }
main.ya .ya-strip { padding: var(--pad-section) 0; }
main.ya .ya-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); }
main.ya .ya-frame { margin: 0; }
main.ya .ya-frame img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-img); }
main.ya .ya-frame figcaption { margin-top: .8rem; }
main.ya .ya-frame figcaption span { opacity: .55; margin-right: .6em; }
main.ya .ya-steps { padding: 0 0 var(--pad-section); }
main.ya .ya-steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2vw, 1.4rem); }
main.ya .ya-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: clamp(2rem, 4vw, 3.2rem); border: 1px solid var(--ya-line); border-radius: var(--radius-card); overflow: clip; }
main.ya .ya-step--olive { background: var(--ya-olive); border-color: var(--ya-olive); }
main.ya .ya-step__t { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 14em; margin-bottom: .6rem; }
main.ya .ya-close { padding: 0 0 calc(var(--pad-section) + var(--ya-gutter)); text-align: center; }
main.ya .ya-close__t { font-size: clamp(2.6rem, 5.8vw, 5.6rem); line-height: .98; max-width: 11em; margin: 0 auto; }
main.ya .ya-close__ring { font-size: clamp(2.4rem, 4.6vw, 4.2rem); margin-top: clamp(2rem, 4vw, 3rem); text-align: left; }
main.ya .ya-close__ring > span:last-child { color: var(--ya-olive); }
@media (max-width: 880px) {
  main.ya .ya-steps__grid { grid-template-columns: minmax(0, 1fr); }
  main.ya .ya-hero { height: 130vw; }
  main.ya .ya-title { font-size: 13vw; top: 44%; }
  main.ya .ya-deco--purpose { top: 6%; left: 52%; }
  main.ya .ya-deco--faith { display: none; }
  main.ya .ya-deco--when { top: auto; bottom: 16%; right: 4%; text-align: right; }
  main.ya .ya-deco--more { display: none; }
  main.ya .ya-purpose__t { font-size: 8.4vw; }
  main.ya .ya-purpose__t span { white-space: normal; }
  main.ya .ya-purpose__foot { grid-template-columns: minmax(0, 1fr); }
  main.ya .ya-strip__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main.ya .ya-frame:last-child { display: none; }
}
@media (max-width: 560px) {
  main.ya .ya-btn { padding: .9rem 1.5rem .85rem; }
}

/* ============================================================
   women.html + men.html — ministry pages in the MAIN Garden Co style
   (2026-09-16). "Gallery": Jose's pick W4 / M4 from the ministry lab
   (archived in _retired-assets/site_v4/ministry-lab-2026-09-16/).
   He rejected themed sub-brand directions for these two (no theme
   concepts, no line decorations), so the pages are built from the site's
   own components — the short poster hero (.sr-poster), event cards, the
   black statement band (.rhythm), the olive closer. BOTH PAGES WERE REBUILT
   2026-09-22/23 from home-page moves (men = ml-hero/ml-row/ml-band/ml-end,
   women = the wl- block below); the Gallery-era rules are archived in
   _retired-assets/site_v4/{men,women}-gallery-2026-09-16/. main still carries
   .ml (+ .ml-women / .ml-men) for the shared Snell-air rules.
   ============================================================ */
/* Snell caps that crowd the next letter */
.ml .curs { padding-right: .14em; }
.ml .ml-curs-w { padding-right: .22em; }
.ml .ml-curs-m { padding-right: .16em; }
/* hero = the site's split hero (N1, 2026-09-22) */
.ml-hero .hero-split__media img { object-position: 55% 45%; }
.ml .ml-curs-fcl { padding-right: .12em; }
.ml .ml-curs-a { padding-right: .2em; }
.nw { white-space: nowrap; }
/* photo row (B3, 2026-09-22): head + facts, three framed portraits, the line + pills. No lines. */
.ml-row { padding: var(--pad-section) 0; }
.ml-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.ml-row__title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.ml-row__facts { font-weight: 500; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--olive-deep); }
.ml-row__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.4rem); }
.ml-row__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; }
.ml-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.ml-row__foot { display: grid; grid-template-columns: 1.3fr auto; gap: 1.5rem 3rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
.ml-row__line { margin-top: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.ml-row__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 880px) { .ml-row__foot { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ml-row__grid { grid-template-columns: 1fr 1fr; } .ml-row__grid .ml-row__photo:last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }
/* the band = home's framed card split in two: black panel + photo (R5, 2026-09-22). No lines. */
.ml-band { padding: 0 clamp(.9rem, 1.8vw, 1.5rem) clamp(.9rem, 1.8vw, 1.5rem); }
.ml-band .hero__card { min-height: min(70svh, 620px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); justify-content: initial; }
.ml-band__panel { padding: clamp(2.6rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: flex-end; }
.ml-band__title { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.ml-band__line { color: rgba(241, 237, 228, .85); max-width: 40ch; margin: 0 0 1.2rem; }
.ml-band__media { position: relative; min-height: 0; }
.ml-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 880px) {
  .ml-band .hero__card { grid-template-columns: 1fr; min-height: 0; }
  .ml-band__media { aspect-ratio: 4 / 3; order: -1; }
}
/* the ending: cream statement, no olive, no lines (E3, 2026-09-22) */
.ml .ml-curs-y { padding-right: .22em; }
.ml-end { padding: clamp(5rem, 9vw, 8rem) 0 clamp(4.5rem, 8vw, 7rem); text-align: center; }
.ml-end__h { font-size: clamp(2.9rem, 9vw, 7.5rem); white-space: nowrap; margin-bottom: 1.2rem; }
.ml-end__facts { font-weight: 500; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--olive-deep); margin-bottom: 2.2rem; }
.ml-end__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
@media (max-width: 560px) { .ml-end__h { font-size: 9.2vw; } } /* one line, so the script Y's tail can't hit a second line */

/* ---- women.html rebuild (Women section lab, 2026-09-22) — the wl- block. No lines. ---- */
.wl-facts { font-weight: 500; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--olive-deep); }
.wl-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
/* hero = a type column + two tall frames, bottoms aligned (H2) */
.wl-hero { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0 var(--pad-section); }
.wl-hero__grid { display: grid; grid-template-columns: 1.15fr .8fr .8fr; gap: clamp(1rem, 2.4vw, 2rem); align-items: end; }
.wl-hero__text { padding-bottom: clamp(1rem, 3vw, 2.5rem); }
.wl-hero__title { font-size: clamp(3rem, 6.8vw, 6.4rem); margin: .3em 0 .22em; }
.wl-hero__title .hero__line:last-child { margin-left: clamp(1.5rem, 4vw, 4rem); }
.wl-hero__photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 5; }
.wl-hero__photo--tall { aspect-ratio: 3 / 4.6; }
.wl-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .wl-hero__grid { grid-template-columns: 1fr 1fr; } .wl-hero__text { grid-column: 1 / -1; padding-bottom: 0; } }
@media (max-width: 560px) { .wl-hero__grid { grid-template-columns: 1fr; } .wl-hero__photo, .wl-hero__photo--tall { aspect-ratio: 4 / 3; } }
.ml .ml-curs-f, .ml .ml-curs-b { padding-right: .12em; }
.ml .ml-curs-a { padding-right: .2em; }
/* values = three square frames with the word + line beneath (P6, 2026-09-23). No lines. */
.wl-values { padding: var(--pad-section) 0; }
.wl-values__line { margin-top: 0; max-width: 34em; }
.wl-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.wl-values__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; }
.wl-values__photo img { width: 100%; height: 100%; object-fit: cover; }
.wl-values__word { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 1.1rem 0 .35rem; }
.wl-values__note { color: #3d3a35; max-width: 32ch; }
.wl-values__cta { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 560px) { .wl-values__grid { grid-template-columns: 1fr; } .wl-values__photo { aspect-ratio: 4 / 3; } }
/* the band = home's visiting staging on cream2 without its lines (Q2, 2026-09-23) */
.wl-band__head { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.wl-band .visiting__copy { max-width: 46ch; }
.wl-band__photo { aspect-ratio: 21 / 9; }
.wl-band__photo img { object-position: 50% 40%; }
.wl-band__facts { display: flex; flex-wrap: wrap; gap: .6rem 2.6rem; margin-top: 2rem; }
.wl-band__facts div { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
@media (max-width: 880px) { .wl-band__photo { aspect-ratio: 16 / 10; } }
/* the ending: a quiet split on cream, no olive, no lines (E5, 2026-09-23) */
.wl-end { padding: var(--pad-section) 0 clamp(4.5rem, 8vw, 7rem); }
.wl-end__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.wl-end__h { font-size: clamp(2.6rem, 6.5vw, 5.6rem); margin: 0 0 1rem; }
.wl-end__photo { aspect-ratio: 1 / 1; width: min(100%, 460px); justify-self: end; border-radius: var(--radius-card); overflow: hidden; }
.wl-end__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .wl-end__grid { grid-template-columns: 1fr; } .wl-end__photo { justify-self: start; } }

/* gallery: a large photo pair above the centered statement + CTAs */

/* the three threads as photo cards (event-card anatomy, not links) */

/* black statement band — no linework, a gutter before the closer, both
   lead columns start on the same line (Jose's spacing pass) */

/* olive closer — long heads balance-wrap on desktop */

@media (max-width: 560px) {
 /* one line, so the script Y's tail can't hit a second line */
}


/* ============================================================
   give.html — "Ways Cards" (2026-09-16): Jose's pick (G4) from the give
   page lab (archived in _retired-assets/site_v4/give-lab-2026-09-16/). MAIN
   Garden Co style, built from the site's own components: short poster hero
   (.sr-poster) · three ways-to-give cards · Why Give photo split
   (.the-way--split) · where-giving-goes event cards · the black scripture
   band (.rhythm) · the olive closer. This block strips their line
   decorations and adds the gl- pieces. main carries .gl.
   ============================================================ */
/* photos stay natural */
/* ---- spacing: stacked framed cards keep the gutter between them ---- */
.gl .rhythm { margin-bottom: clamp(.9rem, 1.8vw, 1.5rem); }
.gl .rhythm__loud { line-height: 1.02; }
/* Snell caps get room before the next letter */
.gl .curs { padding-right: .14em; }
/* ---- shared bits ---- */
/* hero = home's Poster at full height (G1, 2026-09-21); Snell S/G need air */
.gl-hero .hero__title .curs { padding-right: .16em; }
.gl-hero .hero__title .gl-hero__s { padding-right: .2em; }
/* under the hero: home's Mission statement (W1, 2026-09-21); the Why split follows it closely, like home's series band follows the mission */
.gl-mission .curs { padding-right: .14em; }
.gl-mission + .gl-why { padding-top: clamp(.5rem, 2vw, 1.5rem); }
/* where it goes: home's Sunday circles on cream2 (D2, 2026-09-21) */
.gl-where .section-head .curs { padding-right: .14em; }
.gl-where .sundays__intro { max-width: 58ch; }
.gl-where .sundays__item h3 .curs { padding-right: .14em; }
.gl-where__h { padding-right: .2em !important; }
/* a word from Scripture: home's Three Commitments split, mirrored (S6, 2026-09-21) */
.gl-word { padding: var(--pad-section) 0; }
.gl-word .the-way__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.gl-word .the-way__photo { order: 2; min-height: 560px; }
.gl-word .the-way__photo img { object-position: 50% 50%; }
.gl-word__loud { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: .98; margin: .6rem 0 1.2rem; }
.gl-word__loud .curs { padding-right: .14em; }
.gl-word__text { font-style: italic; color: #3d3a35; max-width: 52ch; line-height: 1.65; }
@media (max-width: 880px) {
  .gl-word .the-way__grid { grid-template-columns: 1fr; }
  .gl-word .the-way__photo { order: 0; min-height: 0; aspect-ratio: 4 / 3; }
}
/* the ending: home's series band on cream — no olive, no hairline (C9, 2026-09-22) */
.gl-end { padding: var(--pad-section) 0 clamp(4.5rem, 8vw, 7rem); }
.gl-end .series__row--sm { font-size: clamp(1.6rem, 4.2vw, 4.2rem); font-weight: 400; letter-spacing: .02em; }
.gl-end .series__row--lg { font-size: clamp(3rem, 11vw, 10.5rem); }
.gl-end .series__foot { border-top: 0; padding-top: .4rem; margin-top: clamp(2.2rem, 4vw, 3.4rem); }
@media (max-width: 560px) {
  .gl-end .series__row--sm { font-size: clamp(1.3rem, 6vw, 2rem); }
  .gl-end .series__row--lg { font-size: clamp(2.2rem, 11.5vw, 4rem); }
}
/* why paragraphs beside a photo */
.gl-why { padding: var(--pad-section) 0; }
.gl-why__sub { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.15; color: var(--olive-deep); margin: 0 0 1.4rem; }
.gl-why__paras p { color: #3d3a35; max-width: 52ch; }
/* black band scripture text */
/* ---- closer extras ---- */
/* ---- G4: ways-to-give cards ---- */


/* ============================================================
   who-we-are.html — "A New Humanity" (2026-09-17): Jose's pick of take C
   (a manifesto, one idea per screen), plus the Lead Pastors section from take A
   and the photo ending from take B. All three takes are saved in
   _library/who-we-are-takes-2026-09-17/ (the lab is archived in
   _retired-assets/site_v4/wwa2-lab-2026-09-17/). A ONE-OF-A-KIND page: bespoke
   wc- CSS, with none of the site's shared section components (Jose, 2026-09-17:
   the last pages were "following a template"). main carries .wc.
   ============================================================ */
.wc {
  --wc-vh: 100svh;                                     /* one screen */
  --wc-head: clamp(69px, calc(41px + 3.6vw), 89px);   /* sticky site header */
  --wc-pad: clamp(1.25rem, 4vw, 3.25rem);
  --wc-soft: rgba(241, 237, 228, .72);
  --wc-sec: clamp(5rem, 10vw, 9rem);          /* one vertical rhythm for every section (spacing pass 2026-09-17) */
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}
.wc [id] { scroll-margin-top: calc(var(--wc-head) + .75rem); }
.wc-frame { max-width: 1480px; margin-inline: auto; padding-inline: var(--wc-pad); }
/* type */
.wc-label {
  font-family: var(--font-body); font-weight: 500;
  font-size: .8rem; letter-spacing: .26em; line-height: 1.5;
  text-transform: uppercase; color: var(--muted);
}
.wc-disp {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em;
  line-height: .92; text-wrap: balance;
}
.wc .curs { padding-right: .14em; }
.wc-nw { white-space: nowrap; }
.wc p + p { margin-top: 0; }
/* ---- 1 · hero: the essay's first sentence as the page's first screen ---- */
.wc-hero { background: var(--black); color: var(--cream); }
.wc-hero__in {
  min-height: calc(var(--wc-vh) - var(--wc-head));
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-block: clamp(1.8rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.6rem);
}
.wc-hero .wc-label { color: rgba(241, 237, 228, .6); }
/* statement + photo (Jose 2026-09-17): the TEXT is the statement piece. Four
   big lines; the photo tucks into the space to the right of "sub-culture. /
   We are a new / humanity." and hugs the text. Grid: line 1 spans the full
   width; lines 2–4 sit in an auto column, and the photo fills the rest of those
   three rows (width = what's left, height = three lines). Font cap 9.4rem keeps
   "We are not another" on one row inside the 1480px frame. */
.wc-hero__statement {
  align-self: center;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 2.2rem);
  font-size: clamp(2.8rem, 9vw, 9.4rem); line-height: .9;
}
.wc-hero__row { display: block; grid-column: 1; }
.wc-hero__row--1 { grid-column: 1 / -1; }
.wc-hero__olive { color: var(--olive); }
.wc .wc-curs-h { padding-right: .2em; } /* Snell's capital H flourish needs room before the U */
.wc-hero__row--3 { margin-top: .1em; }
.wc-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.wc-hero__photo { grid-column: 2; grid-row: 2 / span 3; margin: .08em 0 .06em; min-height: 0; border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 561px) { .wc-hero__row { white-space: nowrap; } }
.wc-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* ---- 2 · mission, then vision: one sentence per screen ---- */
.wc-mv { display: grid; align-content: center; min-height: calc(var(--wc-vh) * .78 - var(--wc-head)); padding-block: var(--wc-sec); }
.wc-mv--vision { background: var(--cream2); }
.wc-mv__text { margin-top: clamp(1.2rem, 2.4vw, 2rem); font-size: clamp(2.3rem, 6vw, 6.6rem); line-height: .96; max-width: 15.5em; }
.wc-mv__text em { font-style: normal; color: var(--olive-deep); }
/* ---- 3 · the essay as a numbered sequence ---- */
/* no bottom padding: the Way lines below bring their own space (fixes the ~440px hole) */
.wc-essay { padding-block: var(--wc-sec) 0; }
.wc-essay__list { list-style: none; margin-top: clamp(2.6rem, 5vw, 4.4rem); }
.wc-essay__row { display: grid; grid-template-columns: clamp(6rem, 17vw, 16rem) minmax(0, 1fr); gap: 0 clamp(1.4rem, 3vw, 3rem); align-items: start; }
.wc-essay__list > li + li { margin-top: clamp(3rem, 6vw, 5.5rem); }
.wc-essay__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.8rem, 9.4vw, 9rem); line-height: .78; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--olive);
}
.wc-essay__row p { max-width: 36em; padding-top: .2em; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; color: #2a2723; text-wrap: pretty; }
.wc-essay__photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 21 / 9; }
.wc-essay__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* ---- 4 · the way: three screens, stacking as you scroll ---- */
.wc-way__screen {
  display: grid; place-items: center; text-align: center;
  /* taller screens so the sticky stack reads (Jose 2026-09-17: "a little taller to have the right affect");
     the essay above has no bottom padding, so this doesn't reopen the old gap */
  min-height: calc(var(--wc-vh) * .75 - var(--wc-head));
  padding: var(--wc-sec) var(--wc-pad);
  background: var(--cream);
}
.wc-way__screen:nth-child(2) { background: var(--cream2); }
.wc-way__line { font-size: clamp(3rem, 9.2vw, 10.4rem); line-height: .92; max-width: 11em; }
.wc-accent {
  display: inline-block;
  font-family: var(--font-script); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  font-size: 1.12em; line-height: 0; vertical-align: -.04em;
  padding: 0 .1em; color: var(--olive-deep);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 881px) {
  .wc-way__screen { position: sticky; top: var(--wc-head); }
}
/* ---- 5 · four convictions, one full-width row each, on black ---- */
.wc-conv { position: relative; background: var(--black); color: var(--cream); padding-block: var(--wc-sec); }
.wc-conv .wc-label { color: rgba(241, 237, 228, .6); }
.wc-conv__head { margin-top: 1rem; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.wc-conv__sub { margin-top: .7rem; font-size: 1.1rem; color: var(--wc-soft); }
.wc-conv__list { list-style: none; margin-top: clamp(3.4rem, 7vw, 6rem); }
.wc-conv__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  grid-template-areas: "name name photo" "lead body photo";
  gap: clamp(1.2rem, 2.4vw, 2rem) clamp(1.8rem, 4vw, 4rem);
  align-items: start;
}
.wc-conv__row + .wc-conv__row { margin-top: clamp(4rem, 8vw, 7rem); }
.wc-conv__name { grid-area: name; font-size: clamp(3rem, 9vw, 9.2rem); line-height: .84; padding-left: .06em; margin-bottom: .14em; }
.wc-conv__name .curs { font-size: 1.16em; vertical-align: -.03em; }
/* a giant Snell cap's tail stays clear of the line below */
.wc-conv__lead { grid-area: lead; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.02; letter-spacing: -.01em; }
.wc-conv__body { grid-area: body; padding-top: .35rem; }
.wc-conv__claim { font-weight: 500; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.wc-conv__rest { margin-top: .7rem; color: var(--wc-soft); font-size: 1.02rem; line-height: 1.6; max-width: 34em; }
.wc-conv__vs { margin-top: .9rem; font-style: italic; color: rgba(241, 237, 228, .56); font-size: .95rem; line-height: 1.55; max-width: 34em; }
.wc-conv__photo { grid-area: photo; align-self: center; width: clamp(6.5rem, 11vw, 10.5rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.wc-conv__photo img { width: 100%; height: 100%; object-fit: cover; }
/* label above the names, so the script J's tail hangs into open space */
/* ---- 7 · the confluence: the two dates, held together ---- */
.wc-conf { padding-block: var(--wc-sec); }
.wc-conf__head { margin-top: 1rem; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.wc-conf__years { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0 clamp(.7rem, 2vw, 2rem); margin-top: clamp(2.2rem, 4.5vw, 3.6rem); }
.wc-conf__yr { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
.wc-conf__num { font-size: clamp(3.6rem, 15vw, 15.5rem); line-height: .8; letter-spacing: -.04em; }
.wc-conf__plus { color: var(--olive); }
.wc-conf__cap .pipe { padding: 0 .3em; }
.wc-conf__body { columns: 2; column-gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 6vw, 4.6rem); }
.wc-conf__body p { orphans: 3; widows: 3; margin-bottom: 1.1em; font-size: 1.08rem; line-height: 1.68; color: #2f2c27; text-wrap: pretty; }
.wc-conf__vs { margin: clamp(2.4rem, 5vw, 4rem) 0 0; }
.wc-conf__vs p { font-style: italic; font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.18; max-width: 22em; text-indent: -.42em; text-wrap: balance; }
.wc-conf__vs cite { display: block; margin-top: 1rem; font-style: normal; }
/* ---- 8 · core beliefs: open/close, spacing only ---- */
.wc-beliefs { background: var(--cream2); padding-block: var(--wc-sec); }
.wc-beliefs__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; }
.wc-beliefs__head { margin-top: 1rem; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.wc-beliefs__sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #3d3a35; max-width: 30em; padding-bottom: .4rem; }
/* Core Beliefs — refined dropdowns (Jose picked option 1, 2026-09-17).
   Each belief: title + one-line preview + a plus/minus icon; opening lays a soft
   cream card behind it (a filled shape, no lines), eases open (JS in
   assets/js/who-we-are-beliefs.js, which also keeps the tapped title from jumping,
   gives each belief a link like who-we-are#gospel, and runs Open all). Without JS
   these are plain native <details>. */
.wc-beliefs [hidden] { display: none !important; }
.wc-beliefs__bar { display: flex; justify-content: flex-end; margin-top: clamp(1.8rem, 4vw, 3rem); }
.wc-beliefs__all {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .72rem 1.15rem .72rem .8rem; border: 0; border-radius: 999px;
  background: rgba(10, 10, 10, .06); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  transition: background .25s var(--ease);
}
.wc-beliefs__all:hover { background: rgba(10, 10, 10, .11); }
.wc-beliefs__all-icon { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--black); }
.wc-beliefs__all-icon::before, .wc-beliefs__all-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .62rem; height: 1.5px; margin: -.75px 0 0 -.31rem;
  background: var(--cream); border-radius: 2px; transition: transform .4s var(--ease);
}
.wc-beliefs__all-icon::after { transform: rotate(90deg); }
.wc-beliefs__all.is-on .wc-beliefs__all-icon::after { transform: rotate(0deg); }

.wc-beliefs__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(1.2rem, 3vw, 3rem); align-items: start; margin-top: 1rem; }
.wc-beliefs__cols > div { display: grid; gap: .3rem; }
.wc-belief { border-radius: 18px; transition: background-color .4s var(--ease); }
.wc-belief:hover { background: rgba(241, 237, 228, .5); }
.wc-belief[open]:not(.is-closing) { background: var(--cream); }
.wc-belief__sum {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center;
  padding: 1.05rem 1.25rem; border-radius: 18px;
}
.wc-belief__sum::-webkit-details-marker { display: none; }
.wc-belief__sum:focus-visible { outline: 2px solid var(--olive-deep); outline-offset: 2px; }
.wc-belief__title {
  display: block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.05; letter-spacing: -.01em;
  transition: color .3s var(--ease);
}
.wc-belief[open]:not(.is-closing) .wc-belief__title, .wc-belief__sum:hover .wc-belief__title { color: var(--olive-deep); }
/* preview line: collapses away as the belief opens (its sentence starts the full text) */
.wc-belief__peek { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease); }
.wc-belief__peek-in { overflow: hidden; min-height: 0; }
.wc-belief__peek-txt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  padding-top: .4rem; font-size: .95rem; line-height: 1.45; color: var(--muted); max-width: 52ch;
  min-height: calc(.4rem + 2.9em); /* always two lines tall, so rows line up across the two columns */
}
.wc-belief[open]:not(.is-closing) .wc-belief__peek { grid-template-rows: 0fr; opacity: 0; }
/* plus → minus */
.wc-belief__icon { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(10, 10, 10, .07); transition: background-color .35s var(--ease); }
.wc-belief__icon::before, .wc-belief__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: 2px; margin: -1px 0 0 -.45rem;
  border-radius: 2px; background: var(--ink); transition: transform .45s var(--ease), background-color .35s var(--ease);
}
.wc-belief__icon::after { transform: rotate(90deg); }
.wc-belief__sum:hover .wc-belief__icon { background: rgba(10, 10, 10, .12); }
.wc-belief[open]:not(.is-closing) .wc-belief__icon { background: var(--olive-deep); }
.wc-belief[open]:not(.is-closing) .wc-belief__icon::before, .wc-belief[open]:not(.is-closing) .wc-belief__icon::after { background: var(--cream); }
.wc-belief[open]:not(.is-closing) .wc-belief__icon::after { transform: rotate(0deg); }
/* the open reading area */
.wc-belief__body { padding: 0 1.25rem 1.5rem; }
.wc-belief__text p { font-size: 1.03rem; line-height: 1.72; color: #3d3a35; max-width: 62ch; text-wrap: pretty; }
.wc .wc-belief__text p + p { margin-top: .95em; }
.wc-belief__text strong { font-weight: 700; color: var(--ink); }
.wc-belief__refs { margin-top: 1.3rem; }
.wc .wc-belief__refs-k { font-weight: 500; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--olive-deep); }
.wc-belief__chips { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wc-belief__chips li { padding: .38rem .75rem .36rem; border-radius: 999px; background: var(--cream2); font-size: .82rem; line-height: 1.2; color: #3d3a35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wc .wc-belief__tools { margin-top: 1.1rem; }
.wc-belief__copy {
  appearance: none; border: 0; background: none; padding: .3rem 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  transition: color .25s var(--ease);
}
.wc-belief__copy:hover { color: var(--olive-deep); }
.wc-belief__copy.is-done { color: var(--olive-deep); }
@media (max-width: 560px) {
  .wc-belief__sum { padding: .95rem 1rem; gap: .9rem; }
  .wc-belief__body { padding: 0 1rem 1.3rem; }
  .wc-belief__icon { width: 2.2rem; height: 2.2rem; }
  .wc-beliefs__bar { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-belief, .wc-belief__peek, .wc-belief__icon, .wc-belief__icon::before, .wc-belief__icon::after, .wc-beliefs__all-icon::after { transition: none; }
}
@media (max-width: 880px) {
  .wc-essay__row { grid-template-columns: 1fr; }
  .wc-essay__num { font-size: 3.6rem; margin-bottom: .7rem; }
  .wc-essay__photo { aspect-ratio: 4 / 3; }
  .wc-way__screen { min-height: calc(var(--wc-vh) * .55); }
  .wc-conv__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name photo" "lead lead" "body body"; }
  .wc-conv__name { font-size: min(8.6vw, 4.8rem); white-space: nowrap; align-self: center; }
  .wc-conv__photo { width: clamp(4.6rem, 16vw, 7rem); }
  .wc-beliefs__top, .wc-beliefs__cols { grid-template-columns: 1fr; }
  .wc-beliefs__cols { row-gap: .3rem; }
  .wc-conf__body { columns: 1; }
}
@media (max-width: 560px) {
  .wc-hero__statement { font-size: 12.4vw; grid-template-columns: minmax(0, 1fr); }
  .wc-hero__photo { grid-column: 1; grid-row: auto; width: 100%; aspect-ratio: 4 / 3; margin: 1.6rem 0 0; }
  .wc-mv__text { font-size: 10.6vw; }
  .wc-way__line { font-size: 13.4vw; }
  .wc-conf__num { font-size: 16.5vw; }
  .wc-conf__cap { font-size: .66rem; letter-spacing: .12em; }
  .wc-conf__vs p { text-indent: 0; }
}
/* ---- LEAD PASTORS — from take A (portrait beside the quote). Take A set it on
   black; here it follows the black Convictions, so it sits on cream2 to keep
   the two sections from reading as one black mass ---- */
.wc-lead { background: var(--cream2); color: var(--ink); padding-block: var(--wc-sec); }
.wc-lead__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2.2rem, 6vw, 6.5rem); align-items: center; }
.wc-lead__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.wc .wc-lead__label {
  font-family: var(--font-body); font-weight: 500;
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--olive-deep);
}
.wc .wc-lead__q {
  margin: 1.4rem 0 clamp(1.8rem, 3vw, 2.4rem);
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.55rem, 3vw, 2.8rem); line-height: 1.22; letter-spacing: -.016em;
  color: var(--ink); text-wrap: pretty;
}
.wc .wc-lead__name { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1; white-space: nowrap; }
.wc .wc-curs-j { padding-right: .14em; }
.wc .wc-lead__role {
  margin-top: .6rem;
  font-weight: 500; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
/* ---- ENDING — from take B: a last photograph with subtitle captions ---- */
.wc-finale__frame { position: relative; height: max(min(56.25vw, 92svh), 460px); overflow: hidden; background: #0a0a0a; }
.wc-finale__frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wc-finale__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .36) 40%, rgba(0, 0, 0, 0) 64%); pointer-events: none; }
.wc-finale__in { position: absolute; left: 50%; bottom: clamp(1.4rem, 3.2vw, 3rem); transform: translateX(-50%); width: min(90%, 52rem); text-align: center; }
.wc .wc-finale__head, .wc .wc-finale__sub {
  font-family: var(--font-body); font-weight: 500; text-transform: none;
  color: #fff; text-wrap: balance; margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 0, 0, .25);
}
.wc .wc-finale__head { font-size: clamp(2.2rem, 4.8vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: .35em; }
.wc .wc-finale__sub { font-size: clamp(1.02rem, 1.55vw, 1.35rem); line-height: 1.4; letter-spacing: -.005em; }
.wc .wc-finale__facts { margin-top: 1.2rem; font-weight: 500; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.wc-finale__slash { color: rgba(255, 255, 255, .55); padding: 0 .45em; }
.wc-finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 1.6rem; }
@media (max-width: 880px) {
  .wc-lead__grid { grid-template-columns: 1fr; }
  .wc-lead__photo { max-width: 26rem; }
}
@media (max-width: 560px) {
  .wc .wc-lead__name { font-size: 6.4vw; }
  .wc-finale__grad { display: none; }
  .wc-finale__frame { height: auto; }
  .wc-finale__frame > img { position: static; height: 104vw; }
  .wc-finale__in { position: static; transform: none; width: auto; padding: 2rem 1.25rem 3.4rem; }
  .wc .wc-finale__head { font-size: 2.3rem; }
  /* the captions sit under the photo on phones; on black they merged with the
     black footer, so the panel is cream with dark type and dark buttons */
  .wc-finale__frame { background: var(--cream); }
  .wc .wc-finale__head, .wc .wc-finale__sub { color: var(--ink); text-shadow: none; }
  .wc .wc-finale__facts { color: var(--muted); }
  .wc-finale__slash { color: var(--olive); }
  .wc-finale .btn--light { background: var(--black); border-color: var(--black); color: var(--cream); }
  .wc-finale .btn--light:hover { background: transparent; color: var(--black); }
  .wc-finale .btn--ghostlight { border-color: var(--black); color: var(--black); }
  .wc-finale .btn--ghostlight:hover { background: var(--black); color: var(--cream); }
}


/* ============================================================
   tables.html — "A Table Full" (2026-09-17): Jose's pick (take B) from the
   tables2 lab (archived in _retired-assets/site_v4/tables2-lab-2026-09-17/).
   A ONE-OF-A-KIND page: the whole page is one composed mosaic — photo tiles
   and text tiles sharing a 12-column grid — so it reads as a room full of
   people. Bespoke tb- CSS; none of the site's shared section components, no
   lines, no themes (Jose 2026-09-17: the pages were "following a template").
   One olive Temple + Table moment is the page's only color band, and it ends
   back in photographs instead of the olive closer card. main carries .tb.
   ============================================================ */
.tb {
  --tb2-gap: clamp(.5rem, .9vw, .85rem);          /* tight mosaic joints */
  --tb2-pad: clamp(1.25rem, 3.2vw, 2.6rem);       /* page side padding */
  --tb2-sec: clamp(3.6rem, 7vw, 6.5rem);          /* one vertical rhythm */
  --tb2-max: 1560px;
  --tb2-ink2: #3d3a35;
  display: block;
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}
.tb [id] { scroll-margin-top: 6rem; }
.tb-frame { max-width: var(--tb2-max); margin-inline: auto; padding-inline: var(--tb2-pad); }
.tb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--tb2-gap); }
/* ---- tiles ---- */
.tb-tile { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--cream2); }
.tb-tile img { width: 100%; height: 100%; object-fit: cover; }
.tb-say { display: flex; flex-direction: column; justify-content: center; }
/* ---- type ---- */
.tb .curs { padding-right: .12em; }
.tb .tb-t { padding-right: .16em; }
/* Snell T */
.tb .tb-w { padding-right: .2em; }
/* Snell W */
.tb .tb-f { padding-right: .14em; }
/* Snell F */
.tb .tb-p { padding-right: .16em; }
/* Snell P */
.tb-h1 { font-size: clamp(3.4rem, 8.6vw, 8.8rem); line-height: .86; margin: .2em 0 .28em; }
.tb-h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: .95; }
.tb-h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.05; }
.tb-lead { font-size: clamp(1.12rem, 1.55vw, 1.42rem); line-height: 1.6; color: var(--tb2-ink2); text-wrap: pretty; }
.tb-body { font-size: 1.02rem; line-height: 1.65; color: var(--tb2-ink2); text-wrap: pretty; }
.tb-sub { font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--tb2-ink2); max-width: 34ch; }
.tb-note { font-weight: 500; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-deep); }
.tb-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.tb .pipe { color: var(--olive); padding: 0 .4em; }
.tb-open { padding-block: clamp(1rem, 2.4vw, 2rem) 0; }
.tb-open__grid { height: min(76svh, 720px); min-height: 470px; grid-template-rows: 1.1fr .9fr; }
.tb-open__say { grid-column: 1 / 6; grid-row: 1 / 3; padding-right: clamp(1rem, 2.4vw, 2.4rem); }
.tb-open__facts { margin-bottom: 1.6rem; font-weight: 500; font-size: .84rem; letter-spacing: .22em; text-transform: uppercase; }
.tb-open__launch { margin-top: 1.4rem; }
.tb-open__a { grid-column: 6 / 13; grid-row: 1; }
.tb-open__b { grid-column: 6 / 9; grid-row: 2; }
.tb-open__c { grid-column: 9 / 13; grid-row: 2; }
/* ---- the room continues: a four-tile strip under the fold ---- */
.tb-room { padding-block: var(--tb2-gap) 0; }
.tb-room__a { grid-column: 1 / 5; aspect-ratio: 4 / 3; }
.tb-room__b { grid-column: 5 / 8; aspect-ratio: 4 / 5; }
.tb-room__c { grid-column: 8 / 11; aspect-ratio: 3 / 4; }
.tb-room__d { grid-column: 11 / 13; aspect-ratio: 2 / 3; }
.tb-facts { padding-block: var(--tb2-sec); }
.tb-facts__i { grid-column: span 4; }
.tb-facts__k { display: block; font-weight: 500; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--olive-deep); }
.tb-facts__v { display: block; margin-top: .5rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.5rem, 2.8vw, 2.6rem); line-height: 1; }
.tb-what { padding-block: 0 var(--tb2-sec); }
.tb-what__say { grid-column: 1 / 7; padding-right: clamp(1rem, 3vw, 3rem); }
.tb-what__lead { margin: 1.4rem 0 1.6rem; }
.tb-what__photo { grid-column: 7 / 13; aspect-ratio: 5 / 4; }
.tb-menu { padding-block: 0 var(--tb2-sec); }
.tb-menu__top { max-width: 44ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.tb-menu__intro { margin-top: .9rem; }
.tb-menu__grid { align-items: start; }
.tb-item { grid-column: span 3; }
.tb-item:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.4rem); }
/* the stagger that makes it a mosaic */
.tb-item:nth-child(4) { margin-top: clamp(1.5rem, 4vw, 3.4rem); }
.tb-item__pic { display: block; border-radius: var(--radius-card); overflow: hidden; background: var(--cream2); }
.tb-item:nth-child(odd) .tb-item__pic { aspect-ratio: 3 / 4; }
.tb-item:nth-child(even) .tb-item__pic { aspect-ratio: 4 / 5; }
.tb-item__pic img { width: 100%; height: 100%; object-fit: cover; }
.tb-item h3 { margin: 1.1rem 0 .4rem; }
.tb-item p { font-size: .98rem; line-height: 1.6; color: var(--tb2-ink2); }
.tb-rhythm { background: var(--olive-deep); color: var(--cream); padding-block: var(--tb2-sec); }
.tb-rhythm .kicker { color: rgba(241, 237, 228, .7); }
.tb-rhythm__top { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.tb-rhythm__quiet { display: block; max-width: 46ch; margin-top: .9rem; font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.5; color: rgba(241, 237, 228, .82); }
.tb-rhythm__loud { display: block; margin-top: .9rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; font-size: clamp(2.2rem, 4.6vw, 4.2rem); text-wrap: balance; }
.tb-rhythm__pair { grid-column: span 6; }
.tb-rhythm__pic { display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 10; background: rgba(241, 237, 228, .12); }
.tb-rhythm__pic img { width: 100%; height: 100%; object-fit: cover; }
.tb-rhythm__pair h3 { margin: 1.2rem 0 .5rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; }
.tb-rhythm__pair p { color: rgba(241, 237, 228, .85); max-width: 40ch; }
.tb-rhythm__when { display: block; margin-top: .8rem; font-weight: 500; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(241, 237, 228, .6); }
.tb-rhythm__foot { margin-top: clamp(2rem, 4vw, 3rem); }
.tb-hosts { background: var(--cream2); padding-block: var(--tb2-sec); }
.tb-hosts__photo { grid-column: 1 / 5; aspect-ratio: 4 / 5; }
.tb-hosts__say { grid-column: 6 / 13; }
.tb-hosts__body { margin: 1.3rem 0 1.7rem; max-width: 56ch; }
.tb-why { padding-block: var(--tb2-sec); }
.tb-why__say { grid-column: 1 / 8; padding-right: clamp(1rem, 3vw, 3rem); }
.tb-why__quiet { display: block; margin-top: .9rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--tb2-ink2); max-width: 34ch; }
.tb-why__loud { display: block; margin-top: .8rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .94; font-size: clamp(2.2rem, 4.4vw, 4rem); }
.tb-why__photo { grid-column: 8 / 13; align-self: stretch; min-height: 22rem; }
.tb-claims { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.tb-claim { grid-column: span 4; }
.tb-claim h3 { min-height: 2.1em; }
/* three claims, one baseline for the bodies */
.tb-claim p { margin-top: .5rem; font-size: .98rem; line-height: 1.6; color: var(--tb2-ink2); }
.tb-end { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.tb-end__grid { grid-template-rows: auto auto; }
.tb-end__a { grid-column: 1 / 8; aspect-ratio: 3 / 2; }
.tb-end__b { grid-column: 8 / 13; aspect-ratio: 5 / 4; }
.tb-end__say { grid-column: 1 / 7; grid-row: 2; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem) 0 0; }
.tb-end__head { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .92; }
.tb-end__sub { margin: 1rem 0 .6rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--tb2-ink2); }
.tb-end__facts { margin-bottom: 1.6rem; font-weight: 500; font-size: .76rem; line-height: 1.9; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tb-end__facts span { white-space: nowrap; }
/* break between the phrases, never inside one */
.tb-end__c { grid-column: 7 / 10; grid-row: 2; aspect-ratio: 3 / 4; }
.tb-end__d { grid-column: 10 / 13; grid-row: 2; aspect-ratio: 3 / 4; }
@media (max-width: 880px) {
  .tb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tb-open__grid { height: auto; min-height: 0; grid-template-rows: auto auto auto; }
  .tb-open__say { grid-column: 1 / -1; grid-row: 1; padding: 0 0 clamp(1.2rem, 3vw, 2rem); }
  .tb-open__a { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 3 / 2; }
  .tb-open__b { grid-column: 1 / 4; grid-row: 3; aspect-ratio: 3 / 4; }
  .tb-open__c { grid-column: 4 / 7; grid-row: 3; aspect-ratio: 3 / 4; }
  .tb-room__a { grid-column: 1 / 4; aspect-ratio: 1; }
  .tb-room__b { grid-column: 4 / 7; aspect-ratio: 1; }
  .tb-room__c { grid-column: 1 / 4; aspect-ratio: 3 / 4; }
  .tb-room__d { grid-column: 4 / 7; aspect-ratio: 3 / 4; }
  .tb-facts__i { grid-column: 1 / -1; }
  .tb-facts__i + .tb-facts__i { margin-top: 1.4rem; }
  .tb-what__say, .tb-hosts__say, .tb-why__say { grid-column: 1 / -1; padding-right: 0; }
  .tb-what__photo { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-top: clamp(1.4rem, 3vw, 2rem); }
  .tb-item { grid-column: span 3; }
  .tb-item:nth-child(2), .tb-item:nth-child(4) { margin-top: 0; }
  .tb-item:nth-child(n+3) { margin-top: clamp(1.4rem, 4vw, 2.2rem); }
  .tb-rhythm__pair { grid-column: 1 / -1; }
  .tb-rhythm__pair + .tb-rhythm__pair { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
  .tb-hosts__photo { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
  .tb-why__photo { grid-column: 1 / -1; min-height: 0; aspect-ratio: 3 / 2; margin-top: clamp(1.4rem, 3vw, 2rem); }
  .tb-claim { grid-column: 1 / -1; }
  .tb-claim h3 { min-height: 0; }
  .tb-claim + .tb-claim { margin-top: 1.6rem; }
  .tb-end__grid { grid-template-rows: none; }
  .tb-end__a { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 3 / 2; }
  .tb-end__say { grid-column: 1 / -1; grid-row: 2; padding: clamp(1.6rem, 4vw, 2.4rem) 0 clamp(1.4rem, 3vw, 2rem); }
  .tb-end__b { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 3 / 4; }
  .tb-end__c { grid-column: 3 / 5; grid-row: 3; aspect-ratio: 3 / 4; }
  .tb-end__d { grid-column: 5 / 7; grid-row: 3; aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
  .tb-item { grid-column: 1 / -1; }
  .tb-item:nth-child(n+2) { margin-top: clamp(1.6rem, 5vw, 2.2rem); }
  .tb-item:nth-child(odd) .tb-item__pic, .tb-item:nth-child(even) .tb-item__pic { aspect-ratio: 4 / 3; }
  .tb-open__facts { font-size: .78rem; letter-spacing: .18em; }
  .tb-end__b { grid-column: 1 / 4; }
  .tb-end__c { grid-column: 4 / 7; }
  .tb-end__d { grid-column: 1 / -1; grid-row: 4; aspect-ratio: 3 / 2; }
}
/* ---- small spacing hooks used by the markup ---- */
.tb-open__sub { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.tb-what__h { margin-top: .9rem; }
.tb-what__note { margin-bottom: 1.1rem; }
.tb-menu__top .tb-h2 { margin-top: .9rem; }
.tb-hosts__say .tb-h2 { margin-top: .9rem; }


/* ============================================================
   plan-your-visit.html — "At a Glance" (2026-09-17): Jose's pick (take B) from
   the visit2 lab (archived in _retired-assets/site_v4/visit2-lab-2026-09-17/).
   A ONE-OF-A-KIND page: information design. The service times are the largest
   type on the page and every practical fact lands in the first screen; the FAQ
   answers sit open in two columns (no dropdowns — who-we-are owns those).
   Held together by weight, alignment and flat color fields: no borders, rules
   or underlines anywhere. The ending stays on cream2 on purpose — a black
   ending band merged into the black footer. main carries .vl.
   ============================================================ */
.vl {
  --vb-sec: clamp(4.2rem, 8vw, 7rem);
  --vb-ink: var(--ink);
  --vb-ink2: #3d3a35;
  --vb-key: var(--olive-deep);
  display: block;
  background: var(--cream);
  color: var(--vb-ink);
  overflow-x: clip;
}
.vl .curs { padding-right: .14em; }
.vl .vl-c-y { padding-right: .2em; }
.vl .vl-c-s { padding-right: .14em; }
.vl .vl-c-c { padding-right: .13em; }
.vl .vl-c-n { padding-right: .1em; }
.vl .vl-c-w { padding-right: .22em; }
.vl .vl-c-k { padding-right: .1em; }
/* opening = the times huge + one large circle (N3, 2026-09-23). No lines. */
.vl-hero { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0 var(--pad-section); }
.vl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.vl-hero__time { font-size: clamp(3.6rem, 9vw, 8.6rem); line-height: .92; margin: .3rem 0 .8rem; }
.vl-hero__time .curs { padding: 0 .1em; color: var(--olive); }
.vl-hero__m { font-size: .3em; letter-spacing: .01em; margin-left: .3em; }
.vl-hero__sun { font-weight: 500; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--olive-deep); margin: 0 0 1.2rem; }
.vl-hero__wear { color: #3d3a35; max-width: 40ch; margin: 0; }
.vl-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.vl-hero__blob { aspect-ratio: 1 / 1; width: min(100%, 520px); justify-self: end; border-radius: 50%; overflow: hidden; }
.vl-hero__blob img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .vl-hero__blob { transition: border-radius .8s var(--ease); } .vl-hero__blob:hover { border-radius: 64% 36% 56% 44% / 44% 62% 38% 56%; } }
@media (max-width: 880px) { .vl-hero__grid { grid-template-columns: 1fr; } .vl-hero__blob { justify-self: center; width: min(100%, 400px); } }
@media (max-width: 560px) { .vl-hero__time { font-size: clamp(2.8rem, 15vw, 4.2rem); } }
/* come as you are = the hug beside the paragraph (R3, 2026-09-23). No lines. */
.vl-note { padding: var(--pad-section) 0; }
.vl-note__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.vl-note__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; }
.vl-note__photo img { width: 100%; height: 100%; object-fit: cover; }
.vl-note__p { margin: 0; }
@media (max-width: 880px) { .vl-note__grid { grid-template-columns: 1fr; } }
/* sundays = three posters, the word + line over the photo (S4, 2026-09-24). No lines. */
.vl-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.vl-poster { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--black); }
.vl-poster img { width: 100%; height: 100%; object-fit: cover; }
.vl-poster__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .1) 55%, rgba(10, 10, 10, 0) 70%); }
.vl-poster__cap { position: absolute; left: clamp(1.2rem, 2.4vw, 2rem); right: clamp(1.2rem, 2.4vw, 2rem); bottom: clamp(1.2rem, 2.4vw, 2rem); color: var(--cream); }
.vl-poster__word { display: block; font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: .4rem; }
.vl-poster__line { display: block; font-size: .95rem; line-height: 1.5; color: rgba(241, 237, 228, .9); }
@media (max-width: 880px) { .vl-posters { grid-template-columns: 1fr; } .vl-poster { aspect-ratio: 4 / 3; } }
/* next steps = home's Temple + Table pairing without its lines (X3, 2026-09-24) */
.vl .vl-c-g { padding-right: .14em; }
.vl .vl-c-j { padding-right: .12em; }
.vl-next__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.vl-next__cell { display: grid; grid-template-columns: clamp(120px, 12vw, 170px) 1fr; gap: clamp(1.2rem, 2.4vw, 2rem); align-items: center; }
.vl-next__chip { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.vl-next__chip img { width: 100%; height: 100%; object-fit: cover; }
.vl-next__k { display: block; font-weight: 500; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--olive-deep); }
.vl-next__t { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: .3rem 0 .4rem; }
.vl-next__d { color: #3d3a35; font-size: .98rem; margin: 0 0 1rem; max-width: 36ch; }
@media (max-width: 880px) { .vl-next__pair { grid-template-columns: 1fr; } }
/* section heads — one size for the three interior sections so the page
   reads as one document rather than a stack of separate pages */
.vl-head {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: .98;
  margin: 0;
}
/* ---------- 1. the essentials ---------- */
/* the times are the loudest thing on the page — that is the whole idea */
/* ---------- 2. come as you are ---------- */
/* ---------- 3. the answers ---------- */
.vl-answers { padding-block: var(--vb-sec); }
.vl-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3.8vw, 3.2rem) clamp(2.4rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.vl-q {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.14;
  letter-spacing: -.004em;
  margin: 0 0 .55rem;
  color: var(--vb-ink);
}
.vl-a {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--vb-ink2);
  max-width: 46ch;
  text-wrap: pretty;
}
/* ---------- 4. what a Sunday holds ---------- */
.vl-sunday {
  background: var(--cream2);
  padding-block: var(--vb-sec);
}
.vl-sunday__intro {
  margin: .9rem 0 0;
  max-width: 50ch;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--vb-ink2);
}
/* ---------- 5. next steps ---------- */
.vl-next { padding-block: var(--vb-sec); }
/* ---------- 6. the facts, one more time ---------- */
.vl-end {
  background: var(--cream2);
  color: var(--vb-ink);
  padding-block: clamp(3.6rem, 6.5vw, 5.8rem);
}
.vl-end__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
.vl-end__h {
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  line-height: .96;
  margin: 0;
}
.vl-end__facts {
  margin: 1rem 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vb-key);
}
.vl-end__facts .vl-sep { color: var(--olive); margin: 0 .25em; }
.vl-end__facts .vl-f { white-space: nowrap; }
.vl-end__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 980px) {
  .vl-qa { grid-template-columns: 1fr; }
  .vl-a { max-width: 58ch; }
  .vl-end__grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .vl { --vb-sec: clamp(3.4rem, 11vw, 4.4rem); }
  .vl-end__cta .btn { flex: 1 1 100%; text-align: center; }
}