/* ============================================
   SISTERS WALKING TOGETHER
   Multi-page prototype — Editorial nonprofit

   Fonts:
   Cormorant Garamond (serif)  = H1-H3, blockquote, mission text, site title
   Source Sans Pro (sans-serif) = body, data, labels, buttons, forms, nav

   Weights:
   700 (bold)    = H1, stat numbers, phone CTA, labels, buttons
   500 (medium)  = H3 (assertive subsections)
   400 (regular) = H2, body text
   300 (light)   = H2 (intentionally thin, elegant)

   Italic:
   Blockquote + mission text only.

   Size scale (desktop max → mobile min):
   8rem  → 4rem    Stat numbers (THE HIT)
   5rem  → 3rem    H1 (THE SHOUT)
   4.5rem → 2.5rem Phone CTA (THE SCREAM)
   3rem  → 1.8rem  H2 (section headings)
   2.2rem → 1.4rem Blockquote (THE PAUSE)
   1.7rem → 1.3rem Mission text (THE DECLARATION)
   1.5rem → 1.1rem H3 (subsections)
   1.05rem         Body text
   0.72rem         Labels, buttons, nav

   Palette:
   --cream:     #F0EDEA
   --rose:      #9C5456
   --gold:      #E1C77F
   --charcoal:  #403E41
   --tan:       #BC9067
   --forest:    #2B3A35
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");

/* ---- Variables ---- */
:root {
  --cream: #f0edea;
  --charcoal: #403e41;
  --rose: #9c5456;
  --rose-deep: #7a3e44;
  --gold: #e1c77f;
  --tan: #bc9067;
  --mist: #e6e2de;
  --white: #ffffff;
  --forest: #2b3a35;
  --forest-deep: #1e2a26;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", sans-serif;

  --container-max: 1400px;
  --container-narrow: 860px;
  --section-pad: clamp(5rem, 10vw, 8rem);
  --gap: clamp(2rem, 4vw, 4rem);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0;
}

/* ---- Typography ----
   Serif 700 = H1 (the shout)
   Serif 300 = H2 (the sigh — intentionally thin, elegant)
   Serif 500 = H3 (the statement — assertive subsections)
   Serif 400i = blockquote, mission text
   Sans  700 = data, labels, buttons (functional bold)
   Sans  400 = body text (readable)
*/

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}

.label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

p {
  font-size: 1.05rem;
  line-height: 1.8;
}
p + p {
  margin-top: 1rem;
}

/* Blockquote — intimate italic serif */
blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.5;
  color: rgba(240, 237, 234, 0.9);
}
blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 2rem;
  color: var(--gold);
}
/* Blockquote on light sections — dark text (the base blockquote is light, made
   for dark backgrounds). SQS: a Quote block follows its section's colour theme. */
.section--cream blockquote,
.section--mist blockquote,
.section--white blockquote {
  color: var(--charcoal);
}
.section--cream blockquote cite,
.section--mist blockquote cite,
.section--white blockquote cite {
  color: var(--rose);
}

/* What We Do — the two-prong "ledger": each prong is a mirrored editorial row
   (name in the narrow left column, content in the wide right column). Full-width
   rule between prongs; lighter column-width rules between sub-blocks WITHIN a
   prong (the two divider scopes encode the nesting).
   SQS: per row a 2-col Fluid Engine grid; dividers are Line blocks. */
/* ══ PRONG HEADER BAND — "Treatment B", approved 2026-08-15 ══
   Each prong opens with a split band: its photo on one half at FULL strength
   (no overlay), its name + lead line on the other half on solid colour. The
   sides alternate — photo left for Support, photo right for Advocate — so the
   two prongs mirror each other while staying visually distinct.

   Why not a name-over-photo banner: both of the org's photos are candid
   interiors with busy backgrounds (wall art, a Christmas tree, mic stands).
   There is nowhere quiet for a heading to sit, so any overlay strong enough to
   make the title legible also dims the people. Splitting removes the conflict.

   SQS: a two-column section — Image block one side, heading + text the other.
   No overlay, no custom CSS. Reverse the column order for the second prong. */
.prong-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 52vh;
  padding: 0; /* the photo runs edge-to-edge; section padding would float it */
}
.prong-split.interstitial {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  margin-bottom: 50px;
}
/* .prong-split.allies {
  display: grid;
  grid-template-columns:
    minmax(100px, max-content)
    repeat(auto-fill, 200px) 20%;
  margin-bottom: 50px;
} */

.prong-split-media {
  position: relative;
  overflow: hidden;
  min-height: 44vh;
}
.prong-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* focal points are PER PHOTO — see the "Image cropping" note in the build
     guide. In SQS this is the image block's focal dot, not a CSS value. */
  object-position: center 28%;
}
.prong-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}
.prong-split-text > * {
  max-width: 32ch;
}
.prong-split-title {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}
.prong-split-lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 600;
  margin: 0.9rem 0 0;
}
.prong-split--light {
  background: var(--cream);
}
.prong-split--light .prong-split-title {
  color: var(--rose);
}
.prong-split--light .prong-split-lead {
  color: var(--charcoal);
}
.prong-split--light .prong-split-media img {
  object-position: center 62%;
}
.prong-split--dark {
  background: var(--charcoal);
}
.prong-split--dark .prong-split-title {
  color: var(--cream);
}
.prong-split--dark .prong-split-lead {
  color: rgba(240, 237, 234, 0.85);
}
@media (max-width: 768px) {
  .prong-split {
    grid-template-columns: 1fr;
  }
  .prong-split-media {
    min-height: 34vh;
    order: -1;
  } /* photo always first on mobile */
}

/* Advocate's body runs on charcoal, so the palette inverts exactly as the
   design system already specifies: rose→gold for accents, charcoal→cream for
   text. Nothing new is invented. SQS: a section with the Dark colour theme. */
.section--dark .advocacy-stat-number {
  color: var(--gold);
}
.section--dark .trc-call-num {
  color: var(--gold);
}
.section--dark .trc-call-text {
  color: rgba(240, 237, 234, 0.88);
}
.section--dark .prong-body .sub-rule {
  background: rgba(240, 237, 234, 0.16);
}
.section--dark .prong-body h3 a {
  color: var(--cream);
}

.prong-ledger {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.prong-row {
  display: grid;
  grid-template-columns: minmax(190px, 285px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.prong-row .prong-head h2 {
  color: var(--rose);
  margin-bottom: 1rem;
}
.prong-body {
  max-width: 660px;
}
.prong-divide {
  border: 0;
  height: 1px;
  background: rgba(64, 62, 65, 0.16);
  margin: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.prong-body .sub-rule {
  border: 0;
  height: 1px;
  background: rgba(64, 62, 65, 0.11);
  margin: clamp(2.25rem, 5vw, 3.5rem) 0;
}
/* the client's "RED colour" line opening each prong column (client 2026-07-31):
   body font and size unchanged, rose + bold for emphasis. SQS: a text block
   with the bold toggle and a colour override — no custom CSS needed. */
.prong-lead {
  color: var(--rose);
  font-weight: 700;
  /* Client 2026-08-02: "visually compelling support/advocacy — increase font
     size". The real fault was hierarchy, not scale: this line states the whole
     prong, yet sat at body size — typographically identical to the bullets
     under it. Lifting it above the H3 sub-heads gives each column one clear
     thesis. Order is now H2 name (3rem, light) > lead (1.8rem, bold rose)
     > sub-head (1.5rem, medium charcoal) > body, with weight and colour
     reinforcing size rather than size carrying the hierarchy alone. */
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  /* NO per-block line-height here on purpose: this rides the SQS Paragraph
     slot, and the build guide's slot map notes line-height is not adjustable
     per block — it comes from the slot (~1.8, shared with all body copy).
     Setting it here would look right locally and be unbuildable in SQS. */
  margin-bottom: 2rem;
}
/* Ledger body a step above the global 1.05rem — this is the densest reading
   on the site. 660px measure keeps it at ~70ch, inside the comfortable range.
   .fact-list li carries its own size, so it needs lifting explicitly; scoping
   to .prong-body leaves the identical lists on other pages untouched. */
.prong-body {
  font-size: 1.12rem;
}
/* global `p` and `.fact-list li` both set an explicit 1.05rem, so inheritance
   alone can't lift them. `> p` deliberately: the stat rows and TRC quotes are
   nested and keep their own sizes — only the prong's own prose moves.
   `:not(.prong-lead)` because the lead is itself a direct child <p> — without
   the exclusion this rule outranks .prong-lead and flattens it back to body
   size, undoing the hierarchy above. */
.prong-body > p:not(.prong-lead),
.prong-body .fact-list li {
  font-size: 1.18rem;
}
/* Sub-heads carry the hierarchy now. The prong's lead line moved up into the
   header band (2026-08-15), so the sub-head is the top of the body — which
   frees it to grow. It was 1.45rem against 1.12rem body: a 1.29x step, near
   enough to the body that the eye read one undifferentiated stream, which is
   the real reason this section felt flat. At 1.9rem against 1.18rem the step
   is 1.61x and the structure is visible at a glance, without touching H2 or
   inflating anything past the site's scale. */
.prong-body h3 {
  color: var(--charcoal);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin-bottom: 0.85rem;
}
/* A sub-head's continuation line. The client wrote these as single sentences
   and bolded the opening clause ("Educating & bringing awareness to BC
   residents / regarding the realities inside for incarcerated women"). The
   tail was being set as a one-item bulleted list, which is not a list — it's a
   dangling fragment wearing a bullet. Set as a plain line tucked under its
   head, the sentence reads as one statement again. */
.prong-statement {
  margin-top: -0.15rem;
  max-width: 46ch;
}
/* More air between sub-blocks: the blocks are fewer and heavier now, so the
   rules need room to read as separators rather than as texture. */
.prong-body .sub-rule {
  margin: clamp(2.75rem, 6vw, 4.25rem) 0;
}
/* a linked sub-head keeps the H3 type treatment exactly (font/size/weight/colour
   all inherit); only an underline is added so it still reads as clickable.
   SQS: heading block with a hyperlink — links underline by default. */
.prong-body h3 a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* A photo inside a prong column. Spans the column measure and takes the same
   vertical breathing room as a sub-rule, so it reads as its own block rather
   than as decoration attached to the paragraph above.
   SQS: an Image block in the row's right-hand column — no custom CSS needed. */
.prong-figure {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
}
.prong-figure img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .prong-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* TRC Calls to Action — citation grammar. The inverse of the stats rows:
   quiet serif number, speaking italic-serif quoted text, one shared source
   line in the site's cite style. SQS: 2-col rows (number + text blocks),
   same build pattern as the stats. */
.trc-calls {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.1rem, 2.5vw, 1.6rem);
  row-gap: clamp(1.4rem, 3vw, 2rem);
  align-items: baseline;
}
.trc-call-num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rose);
}
.trc-call-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500; /* rides the H3 slot in SQS (Cormorant 500) — prototype matches */
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  margin: 0;
}
.trc-cite {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rose);
  margin-top: 1.75rem;
}
/* the attribution links to the official TRC document (SQS: text-block link,
   "open in new window" on) */
.trc-cite a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.allies {
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 4rem);
  text-align: center;
}

.allies h2 {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.allies__logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
}

.allies__logos > div {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
}

.allies__logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.allies__logos a:hover {
  opacity: 0.7;
  transform: scale(1.03);
}

.allies__logos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 900px) {
  .allies__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 3rem);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .allies__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
}

@media (max-width: 600px) {
  .allies__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }

  .allies__logos > div {
    height: 80px;
  }
}

.grid {
  display: grid;
  gap: var(--gap);
}
.grid--2 {
  grid-template-columns: 1fr 1fr;
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--2-1 {
  grid-template-columns: 5fr 3fr;
}
.grid--1-2 {
  grid-template-columns: 3fr 5fr;
}

/* ---- Sections ---- */
section {
  padding: var(--section-pad) 0;
  position: relative;
  scroll-margin-top: 84px; /* clears the fixed header on anchor-link jumps */
}

/* Hero — logo-forward, centered. A large logo over the mission statement,
   both sized to sit above the fold on load. Clean cream background (no
   landscape) so the logo's Coast Salish detail reads clearly. The logo is
   capped by viewport height (50vh) so the mission stays above the fold — a
   literal 4x square logo would push the mission below it on a laptop.
   Used on the home page (body.page-home). */
.section--hero {
  padding: clamp(4rem, 5.5vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
/* Coastal backdrop behind the logo-forward hero — a faint atmospheric wash so
   the logo's detail and the mission text stay crisp. Even cream overlay
   (SQS: background image + cream colour overlay at ~80% opacity). */
.section--hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section--hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(240, 237, 234, 0.8);
}
.section--hero .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  position: relative;
  z-index: 1;
}
/* 46vh -> 42vh: the longer client mission line (2026-08-02) added a wrap and
   pushed the buttons ~32px below the fold. The build guide's prescribed remedy
   for this exact case is "shrink the logo if anything clips" — an image-block
   height in SQS, no custom CSS. */
.section--hero .hero-logo {
  width: auto;
  height: clamp(240px, 42vh, 520px);
  max-width: 86vw;
  display: block;
}
.section--hero .hero-mission {
  font-family: var(--font-heading);
  font-weight: 500;
  /* max 34px matches the build guide's slot recipe for this element
     (H3 slot, size up to ~34px) and buys back fold space. */
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--rose);
  /* max-width: 48ch; */
  margin: 0 auto;
}
.section--hero .btn-group {
  justify-content: center;
  margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .section--hero {
    min-height: 90vh;
  }
  .section--hero .hero-logo {
    height: clamp(200px, 34vh, 320px);
    max-width: 78vw;
  }
  .section--hero .hero-mission {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  }
}

/* Equal-weight section banners — the "Who We Are" / "What We Do" act dividers
   on the About page. Both use .section--image-bg; .page-banner gives them an
   identical height and heading size so they read as equal siblings. */
.page-banner {
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(6rem, 11vw, 9rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-banner .banner-title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.04;
}
@media (max-width: 768px) {
  .page-banner {
    min-height: 42vh;
  }
}

/* Section themes */
.section--dark {
  background: var(--charcoal);
  color: var(--cream);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark p,
.section--dark li,
.section--dark .label {
  color: var(--cream);
}
.section--dark a:not(.btn) {
  color: var(--gold);
}

.faith-callout {
  margin: 2rem 0;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-left: 4px solid var(--gold);
  background: rgba(225, 199, 127, 0.12);
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
}

.jesus-intro {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
  margin: 1.25rem 0 0.5rem;
}

.stat-sources {
  border-top: 1px solid rgba(240, 237, 234, 0.18);
  color: rgba(240, 237, 234, 0.68);
  font-size: 0.85rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.stat-sources p {
  margin: 0.4rem 0;
}

.section--rose {
  background: var(--rose);
  color: var(--cream);
}
.section--rose h1,
.section--rose h2,
.section--rose h3,
.section--rose p,
.section--rose .label {
  color: var(--cream);
}

.section--mist {
  background: var(--mist);
}
.section--cream {
  background: var(--cream);
}
.section--white {
  background: var(--white);
}

/* Forest green — the Pacific Northwest accent */
.section--forest {
  background: var(--forest);
  color: var(--cream);
}
.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest p,
.section--forest li,
.section--forest .label {
  color: var(--cream);
}
.section--forest a:not(.btn) {
  color: var(--gold);
}

/* Mission statement — serif italic, the declaration */
.mission-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 700px;
  color: var(--rose);
}
.section--forest .mission-text {
  color: var(--gold);
}

/* Land breather — full-viewport image, no content overlay */
.section--land {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: 45vh;
  min-height: 300px;
}
.section--land .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section--land .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rose section with image underneath */
.section--rose-image {
  position: relative;
  overflow: hidden;
  background: var(--rose);
  color: var(--cream);
}
.section--rose-image .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section--rose-image .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--rose-image .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(156, 84, 86, 0.82);
}
.section--rose-image .container,
.section--rose-image .container--narrow {
  position: relative;
  z-index: 1;
}
.section--rose-image h1,
.section--rose-image h2,
.section--rose-image h3,
.section--rose-image p,
.section--rose-image .label {
  color: var(--cream);
}

/* Stats with faint image underneath */
.section--stats .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section--stats .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
}
.section--stats .container {
  position: relative;
  z-index: 1;
}

/* Footer uses --forest-deep bg color
   SQS: Set footer to darkest color theme with custom dark green */

/* Image-bg sections — tall, immersive */
.section--image-bg {
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 14vw, 12rem) 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.section--image-bg .section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section--image-bg .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--image-bg .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.78);
}
.section--image-bg .container,
.section--image-bg .container--narrow {
  position: relative;
  z-index: 1;
  color: var(--cream);
}
.section--image-bg h1,
.section--image-bg h2,
.section--image-bg h3,
.section--image-bg p,
.section--image-bg li,
.section--image-bg blockquote,
.section--image-bg .label {
  color: var(--cream);
}

/* ---- Header ---- */
/* Transparent over the first section, solid charcoal once scrolled — exactly
   what SQS's "fixed + transparent header" produces. No scrim/blur/shadow:
   those aren't SQS-achievable, so the prototype doesn't get them either. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.4s ease;
}
header.header--scrolled {
  background: var(--charcoal);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.5rem, 4vw, 3rem);
  max-width: var(--container-max);
  margin: 0 auto;
}
.site-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.site-mark {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
header nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
header nav a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(240, 237, 234, 0.55);
  transition: color 0.25s;
}
header nav a:hover {
  color: var(--cream);
}
header nav a.nav-cta {
  background: var(--rose);
  color: var(--cream);
  padding: 0.55rem 1.4rem;
  font-weight: 700;
  transition: background 0.25s;
}
header nav a.nav-cta:hover {
  background: var(--rose-deep);
}

/* Home page (paper hero) — header adapts: transparent over cream with charcoal
   text by default, charcoal solid with cream text once scrolled. Other pages
   keep their default photo-hero behavior. */
body.page-home header {
  background: transparent;
}
body.page-home .site-title {
  color: var(--charcoal);
}
body.page-home header.header--scrolled {
  background: rgba(64, 62, 65, 0.97);
}
body.page-home header.header--scrolled .site-title {
  color: var(--cream);
}

/* The home page's nav-LINK colours are a desktop-only concern: they describe
   links sitting in a transparent bar over the cream hero. Below 769px those
   same <a>s are the fullscreen mobile overlay's links on a near-black panel,
   where charcoal is invisible. Media queries add no specificity, so unscoped
   these (0,1,4) rules beat the mobile (0,0,3) rule and blanked the open menu.
   Scoping to desktop removes the collision rather than out-specifying it. */
@media (min-width: 769px) {
  body.page-home header nav a {
    color: rgba(64, 62, 65, 0.6);
  }
  body.page-home header nav a:hover {
    color: var(--charcoal);
  }
  body.page-home header.header--scrolled nav a {
    color: rgba(240, 237, 234, 0.55);
  }
  body.page-home header.header--scrolled nav a:hover {
    color: var(--cream);
  }
}

/* ---- Mobile Navigation ---- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}
.nav-toggle span + span {
  margin-top: 6px;
}
body.nav-open .nav-toggle span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 1rem 2.6rem;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}
.btn--primary {
  background: var(--rose);
  color: var(--cream);
}
.btn--primary:hover {
  background: var(--rose-deep);
}
.btn--outline {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(240, 237, 234, 0.4);
}
.btn--outline:hover {
  background: var(--cream);
  color: var(--charcoal);
  border-color: var(--cream);
}
.btn--outline-dark {
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid rgba(64, 62, 65, 0.3);
}
.btn--outline-dark:hover {
  background: var(--charcoal);
  color: var(--cream);
}
.btn--gold {
  background: var(--tan);
  color: var(--white);
}
.btn--gold:hover {
  background: #a87d55;
}
.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Stats section — THE CRISIS, massive space ---- */
.section--stats {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: #1a1a1a; /* near-black — SQS: Darkest theme */
  position: relative;
  overflow: hidden;
}

/* Stat numbers — sans bold, gold, THE HIT */
.stat-card {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-number {
  font-family: var(--font-body);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1rem;
}
.stat-label {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(240, 237, 234, 0.75);
  max-width: 280px;
  margin: 0 auto;
}

/* Advocacy stats — the incarceration figures, all moved out of the home page
   into the About "Advocate" section. Impactful numbers, but sized to sit within
   the section (under the heading), not as standalone hero stats. Two-column grid
   so the numbers and their text align across rows.
   SQS: a Fluid Engine grid — large number text + body text, one row per stat. */
.advocacy-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.25rem, 3vw, 2rem);
  row-gap: clamp(1.5rem, 3.5vw, 2.25rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 680px;
}
.advocacy-stat-number {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(
    2.4rem,
    5vw,
    2.8rem
  ); /* impactful, but kept under the "Advocate" heading */
  line-height: 0.95;
  color: var(--rose);
}
.advocacy-stat-text {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}
/* On a dark / image background (the Advocate section now carries the trc-art
   image) the stat numbers go gold for contrast and impact. */
.section--image-bg .advocacy-stat-number,
.section--dark .advocacy-stat-number {
  color: var(--gold);
}

/* Team grid — scalable roster of members; smaller portraits than the old
   single spotlight. Top-aligned so bios of different lengths sit cleanly.
   SQS: a gallery / repeated Fluid Engine card (square image + name + bio). */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.team-photo,
.team-photo-ph {
  width: clamp(120px, 16vw, 160px);
  height: clamp(120px, 16vw, 160px);
  margin-bottom: 1.1rem;
}
.team-photo {
  object-fit: cover;
  object-position: top center;
  display: block;
}
.team-photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 237, 234, 0.05);
  border: 1px dashed rgba(240, 237, 234, 0.25);
}
.team-photo-ph span {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 237, 234, 0.4);
}
/* Portrait above a story heading. Kept intentionally compact so the video is
   the focal point of Martha's section.
   SQS: a centred image block, cropped square with the focal point on Martha's
   face and a circular image design — all native image-block controls. */
.story-portrait {
  width: clamp(76px, 9vw, 108px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1rem;
}
/* PHOTO TILES — a photo in a fixed-ratio grid cell (moments grid, community
   grid). A fixed ratio always crops, and a centred crop cuts heads off: in
   almost every candid the faces sit in the upper third, so the half the crop
   discards is the half that matters. Biasing the crop upward keeps them in
   frame. 30% rather than `top` so a little headroom survives too.
   Per-photo tuning: add object-position inline on the one image that needs it.
   SQS: this is the image FOCAL POINT — the draggable dot in the image editor,
   set per image onto the faces. Native control, no custom CSS. */
.photo-tile {
  overflow: hidden;
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.team-name {
  margin-bottom: 0.2rem;
}
.team-role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.team-bio {
  font-size: 0.98rem;
}
.team-card--ph .team-name,
.team-card--ph .team-role,
.team-card--ph .team-bio {
  opacity: 0.45;
}
@media (max-width: 680px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Fact list ---- */
.fact-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1.4rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.4;
}

/* ---- Video ---- */
.video-feature {
  max-width: 1100px;
  margin: 0 auto;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; /* no shadow — SQS video blocks don't have one */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-caption {
  margin-top: 1.5rem;
  text-align: center;
}

/* ---- Cards ---- */
.card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
}
.card h3 {
  color: var(--rose);
  margin-bottom: 1rem;
}
.card p {
  font-size: 1rem;
}

/* Phone CTA — sans bold, gold, THE SCREAM */
.contact-alt,
.phone-cta,
.section--rose .phone-cta,
.section--rose-image .phone-cta {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--gold);
}
/* The email alternative under the phone CTA (client 2026-08-02: "email font
   closer to phone number"). It was 0.95rem under a 4.5rem number — a ~4.7x
   drop that read as a footnote. Sized to the same contact scale the support
   page already uses for its phone/email pair, so the two pages agree and the
   email reads as a real second route; the phone still clearly leads.
   SQS: per-block font size + colour on the text block — native toolbar, no
   custom CSS. */
.contact-alt {
  font-size: clamp(2.5rem, 6vw, 2.5rem);
  color: rgba(240, 237, 234, 0.85);
}
.contact-alt a {
  color: var(--gold);
}

/* ---- Forms ---- */
.form-group {
  margin-bottom: 1.4rem;
}
.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  color: var(--charcoal);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--mist);
  background: var(--white);
  color: var(--charcoal);
  transition: border-color 0.25s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--rose);
}
.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* ---- Donation ---- */
.donation-amounts {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.donation-amounts button {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  background: transparent;
  border: 1.5px solid rgba(240, 237, 234, 0.25);
  color: var(--cream);
  cursor: pointer;
  transition: all 0.25s;
  min-width: 85px;
}
.donation-amounts button:hover,
.donation-amounts button.active {
  background: var(--cream);
  color: var(--charcoal);
  border-color: var(--cream);
}
.donation-amounts input {
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  background: transparent;
  border: 1.5px solid rgba(240, 237, 234, 0.25);
  color: var(--cream);
  width: 130px;
}
.donation-amounts input:focus {
  outline: none;
  border-color: var(--gold);
}
.donation-amounts input::placeholder {
  color: rgba(240, 237, 234, 0.25);
}

/* ---- Social Icons ---- */
.social-links {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(240, 237, 234, 0.12);
  transition:
    border-color 0.25s,
    background 0.25s;
}
.social-links a:hover {
  border-color: var(--gold);
  background: rgba(225, 199, 127, 0.08);
}
.social-links a svg {
  width: 14px;
  height: 14px;
  fill: rgba(240, 237, 234, 0.4);
  transition: fill 0.25s;
}
.social-links a:hover svg {
  fill: var(--gold);
}
.social-links--footer {
  margin-top: 1.5rem;
}

/* ---- Footer ---- */
footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
footer h3 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1.2rem;
  color: rgba(240, 237, 234, 0.4);
}
footer p {
  color: rgba(240, 237, 234, 0.5);
  font-size: 0.88rem;
  line-height: 1.75;
}
footer a:not(.btn) {
  color: var(--gold);
  transition: color 0.25s;
}
footer a:not(.btn):hover {
  color: var(--cream);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: 3rem;
}
.footer-contact-item {
  margin-bottom: 0.6rem;
}
.footer-contact-item a {
  font-size: 0.9rem;
}
.footer-contact-label {
  color: rgba(240, 237, 234, 0.3);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.15rem;
}

.footer-bottom {
  border-top: 1px solid rgba(240, 237, 234, 0.06);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(240, 237, 234, 0.25);
}

/* ---- Utility ---- */
.text-center {
  text-align: center;
}
.text-center p {
  margin-left: auto;
  margin-right: auto;
}
.text-gold {
  color: var(--gold);
}
.text-rose {
  color: var(--rose);
}
.text-cream {
  color: var(--cream);
}

.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}
.mb-4 {
  margin-bottom: 2rem;
}
.mb-6 {
  margin-bottom: 3rem;
}
.mb-8 {
  margin-bottom: 4rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 2rem;
}
.mt-6 {
  margin-top: 3rem;
}
.spacer {
  height: 2rem;
}
.spacer--lg {
  height: 4rem;
}

/* Gold accent line — a ritual pause between moments */
.gold-rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 2rem auto;
  opacity: 0.6;
}
.gold-rule--left {
  margin-left: 0;
}
.gold-rule--wide {
  width: 100px;
}

.placeholder-note {
  display: inline-block;
  background: rgba(225, 199, 127, 0.15);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.5rem;
}
.section--dark .placeholder-note,
.section--image-bg .placeholder-note {
  background: rgba(225, 199, 127, 0.2);
}

/* Photo placeholders — prototype scaffolding for photos the org will supply.
   Each slot names the shot and the words it pairs with, so the photo direction
   is unambiguous when building in Squarespace (replace with an Image block). */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
  background: rgba(64, 62, 65, 0.045);
  border: 1px dashed rgba(64, 62, 65, 0.3);
  overflow: hidden;
}
.photo-placeholder .ph-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rose);
}
.photo-placeholder .ph-desc {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.3;
  color: var(--charcoal);
  max-width: 24ch;
}
.photo-placeholder .ph-src {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(64, 62, 65, 0.5);
  max-width: 32ch;
}

/* ---- Scroll animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > .reveal:nth-child(1) {
  transition-delay: 0s;
}
.stagger > .reveal:nth-child(2) {
  transition-delay: 0.12s;
}
.stagger > .reveal:nth-child(3) {
  transition-delay: 0.24s;
}
.stagger > .reveal:nth-child(4) {
  transition-delay: 0.36s;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--2-1,
  .grid--1-2 {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .section--hero {
    min-height: 90vh;
  }
  .section--image-bg {
    min-height: 50vh;
  }
  .section--land {
    height: 35vh;
    min-height: 220px;
  }

  .nav-toggle {
    display: block;
  }
  /* The bars must contrast with whatever is behind the header. Default cream
     suits the dark headers on inner pages; the home header is transparent over
     the cream hero, so there the bars go charcoal — and flip back to cream once
     the header turns solid or the dark menu overlay opens. This mirrors how SQS
     applies a separate colour theme to the open mobile menu. */
  body.page-home .nav-toggle span {
    background: var(--charcoal);
  }
  body.page-home header.header--scrolled .nav-toggle span,
  body.nav-open .nav-toggle span {
    background: var(--cream);
  }
  header nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(
      46,
      44,
      46,
      0.98
    ); /* solid-ish overlay; SQS's native mobile menu has no blur */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 99;
  }
  body.nav-open header nav {
    opacity: 1;
    pointer-events: all;
  }
  body.nav-open {
    overflow: hidden;
  }
  /* Full cream, not the desktop bar's muted 55%: this is a fullscreen overlay,
     where the links are the only content and need to read clearly. */
  header nav a {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: var(--cream);
  }
  header nav a:hover {
    color: var(--cream);
  }
  header nav a.nav-cta {
    padding: 0.85rem 2rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }

  .stat-card {
    padding: 1.5rem 1rem;
  }
  .stat-number {
    font-size: clamp(3.5rem, 14vw, 6rem);
  }
  .phone-cta {
    font-size: clamp(2rem, 7vw, 3.5rem);
  }
  .video-feature {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .header-inner {
    padding: 0.85rem 1.2rem;
  }
  .btn-group {
    flex-direction: column;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
  .donation-amounts {
    flex-direction: column;
  }
  .donation-amounts button,
  .donation-amounts input {
    width: 100%;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  h1 {
    font-size: clamp(2.6rem, 8vw, 4rem);
  }
}