/* Squarespace character, shared by the interior pages: italic accent words, pink bands, framed portrait,
   photo headers with highlighted words, charcoal feature bands, testimonial cards, two-column FAQs.
   Loaded after pages.css. */

h1 em, h2 em, .accent {
  color: var(--pink);
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-style: italic;
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-settings);
}

/* Bright pink bands. White text on #DC2878 passes 4.5:1; the lighter Squarespace pink glows only in the corners. */
.band-pink,
.closing.band-pink {
  background:
    radial-gradient(38% 60% at 5% 8%, rgba(242, 58, 135, .6), rgba(242, 58, 135, 0) 70%),
    radial-gradient(34% 56% at 96% 94%, rgba(242, 58, 135, .55), rgba(242, 58, 135, 0) 70%),
    var(--hot-pink);
  color: #FFFFFF;
}
.band-pink h1 em, .band-pink h2 em, .closing h2 em { color: #FFFFFF; }
.band-pink :focus-visible { outline-color: var(--ivory); }

.band-charcoal { background: var(--charcoal); color: var(--ivory); }
.band-charcoal :focus-visible { outline-color: var(--ivory); }
.band-charcoal .eyebrow { color: var(--on-dark-muted); }
.gold { color: var(--gold); }

.centered { text-align: center; }
.centered .lede { margin-inline: auto; }

/* About: her portrait beside the opening (the cream frame behind it was removed in Round 9; corners rounded) */
.sq-hero { padding-block: var(--section-m) var(--section-l); }
.sq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.5rem);
}
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--radius); }
.sq-hero h1 { margin: var(--stack-label) 0 var(--stack-heading); }
.sq-hero .lede { max-width: 36rem; }
/* Below 1024px her portrait runs the full width, as on phones; tablets get a wider crop so the headline stays in view */
@media (max-width: 63.99rem) {
  .sq-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 36rem) and (max-width: 63.99rem) {
  .sq-hero .portrait img { aspect-ratio: 4 / 3; object-position: 50% 2%; }
}

/* Pink band with the angled top edge */
.quote-band {
  padding: calc(var(--section-m) + 5vw) var(--gutter) var(--section-m);
  text-align: center;
  clip-path: polygon(0 0, 68% 5vw, 100% 0, 100% 100%, 0 100%);
}
/* Her statement is a full paragraph, so it is set at Heading 4 to read as one. The measure is in ems so the lines stay
   about 80 characters at every width (58rem let it run to four 910px lines at 1024px, October 2). */
.quote-band blockquote p {
  max-width: 36em;
  margin-inline: auto;
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h4);
  letter-spacing: var(--display-tracking);
  line-height: 1.5;
  text-wrap: balance;
}
.quote-band blockquote p + p { margin-top: 1em; } /* her statement runs to three paragraphs since October 4 */
/* Phones: the paragraphs run past the six lines that balance evens out, so no line is left with one word instead */
@media (max-width: 47.99rem) { .quote-band blockquote p { text-wrap: pretty; } }
.quote-band figcaption { margin-top: var(--stack-heading); font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }

/* Text beside a photo that runs to the page edge. As in the homepage's Collective section, the text block sits
   centered in its half, with equal room on both sides, so it never crowds the photo. */
.bleed-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bleed-copy {
  --pad: clamp(3rem, 8vw, 6.5rem); /* its paragraphs fill the column, so the room itself keeps the text 100px+ from the photo */
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: calc(32rem + 2 * var(--pad));
  padding: var(--section-l) var(--pad);
}
.bleed-copy h2 { margin: var(--stack-label) 0 var(--stack-heading); }
.bleed-photo { position: relative; margin: 0; min-height: clamp(28rem, 45vw, 44rem); overflow: hidden; }
.bleed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform-origin: 50% 60%; }
@media (max-width: 63.99rem) {
  .bleed-split { grid-template-columns: minmax(0, 1fr); }
  .bleed-photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .bleed-copy { justify-self: start; max-width: 44rem; padding: var(--section-m) var(--gutter) var(--section-l); }
}

/* A note in two columns on wide screens: label and heading on the left, the paragraphs beside them */
.plain-note { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.plain-note .eyebrow { grid-column: 1; }
.plain-note h2 { grid-column: 1; margin-top: var(--stack-label); }
.note-body { grid-column: 2; grid-row: 2; max-width: var(--measure); }
.note-body p + p { margin-top: 1em; }
@media (max-width: 63.99rem) {
  .plain-note { display: block; max-width: 44rem; }
  .note-body { margin-top: var(--stack-heading); }
}

/* Testimonial cards; the names line up along the bottom of the row */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--stack-head); }
.card-quote { display: flex; flex-direction: column; margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--ivory); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card-quote blockquote { flex: 1 0 auto; margin: 0; }
.card-quote:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -32px rgba(57, 52, 45, .5); }
.card-quote .qmark { display: block; height: 3.3rem; margin-left: -.1em; color: var(--pink); font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: 8rem; font-style: italic; font-weight: 400; line-height: .95; }
.card-quote blockquote p { font-size: var(--p2); line-height: 1.7; }
.card-quote figcaption { margin-top: 1.5rem; font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; text-wrap: balance; } /* never "Sanctuary" alone */
.card-quote figcaption::before { content: ""; display: block; width: 1.75rem; height: 2px; margin-bottom: .75rem; background: var(--pink); }
@media (max-width: 63.99rem) { .cards { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; } }

/* About: her story as a timeline (from the Ploy About page, Round 9). A soft pink band with a fine line runs
   across; each milestone's dot sits in a dip of the line, so the text below never meets it. The dips sit at
   1%, 36% and 71% of the width, where the three columns start at every screen size. Since Round 11 it follows
   the pink quote band, so it has the full section padding at both ends. */
.journey { --band: #FADAE8; --wave-h: clamp(8rem, 12vw, 11rem); --node: 1.125rem; padding-block: var(--section-l); }
.journey-art { position: relative; margin-top: var(--stack-head); }
.journey-line { position: absolute; top: 0; left: 0; width: 100%; height: var(--wave-h); overflow: visible; }
.journey-line path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.journey-band { stroke: var(--band); stroke-width: 26px; }
.journey-ink { stroke: var(--raspberry); stroke-width: 1.5px; }
.journey-stops { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); margin: 0; padding: 0; list-style: none; }
/* Each dot's center lands on its dip: 150, 250 and 170 of the drawing's 280 */
.journey-stops li:nth-child(1) { padding-top: calc(var(--wave-h) * .5357 - var(--node) / 2); }
.journey-stops li:nth-child(2) { padding-top: calc(var(--wave-h) * .8929 - var(--node) / 2); }
.journey-stops li:nth-child(3) { padding-top: calc(var(--wave-h) * .6071 - var(--node) / 2); }
.journey-node {
  display: block;
  width: var(--node);
  height: var(--node);
  margin-bottom: var(--stack-heading);
  border: 3px solid var(--ivory);
  border-radius: 50%;
  background: var(--hot-pink);
  box-shadow: 0 0 0 1.5px rgba(220, 40, 120, .5);
}
.journey-stops h3 { margin-top: var(--stack-label); }
.journey-stops h3 + p { margin-top: .75rem; color: var(--muted); }
/* "Read Marquisha's Full Story" is a Secondary button (Round 11); her story opens below it, in line with it.
   The Collective's "Read Our Full Mission" works the same way (Round 14). */
.full-story { margin-top: var(--stack-action); }
.full-story summary { list-style: none; text-wrap: balance; }
.full-story summary::-webkit-details-marker { display: none; }
.full-story .plus { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
.full-story[open] .plus { transform: rotate(45deg); }
.story-body { max-width: var(--measure); margin-top: var(--stack-heading); }
.story-body p + p { margin-top: 1em; }
/* Below 1200px the path runs down the left side instead: the milestone lines need columns about 310px wide.
   From 1024px the heading sits to its left, as in the two-column note further down the page. */
@media (max-width: 74.99rem) {
  .journey-line { display: none; }
  .journey-stops { display: block; margin-left: calc(var(--node) / 2); padding-left: 1.75rem; }
  .journey-stops::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: -1px; width: 2px; background: var(--band); transform-origin: top; }
  .journey-stops li:nth-child(n) { position: relative; padding: 0 0 var(--stack-action); }
  .journey-stops li:last-child { padding-bottom: 0; }
  .journey-node { position: absolute; top: .05rem; left: calc(-1.75rem - var(--node) / 2); margin: 0; }
}
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .journey .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 7vw, 7rem); }
  .journey-head { grid-row: 1 / span 2; }
  .journey-art, .full-story { grid-column: 2; }
  .journey-art { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The path draws itself from left to right; each dot lights up as the line reaches it, then its words rise */
  .js .journey-art .journey-line { clip-path: inset(-20% 100% -20% 0); transition: clip-path 2.4s cubic-bezier(.45, .05, .25, 1) .15s; }
  .js .journey-art.is-visible .journey-line { clip-path: inset(-20% -2% -20% 0); }
  /* When the eased line reaches each dot (measured): 1% at .3s, 36% at 1.15s, 71% at 1.55s */
  .js .journey-art .journey-stops li:nth-child(1) { --arrive: .3s; }
  .js .journey-art .journey-stops li:nth-child(2) { --arrive: 1.2s; }
  .js .journey-art .journey-stops li:nth-child(3) { --arrive: 1.6s; }
  .js .journey-art .journey-node { transform: scale(0); transition: transform .55s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--arrive); }
  .js .journey-art .journey-stops li > :not(.journey-node) { opacity: 0; transform: translateY(.75rem); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--arrive) + .25s); }
  .js .journey-art.is-visible .journey-node { transform: none; }
  .js .journey-art.is-visible .journey-stops li > :not(.journey-node) { opacity: 1; transform: none; }
  .js .journey-art .journey-stops::before { transform: scaleY(0); transition: transform 2.4s cubic-bezier(.45, .05, .25, 1) .15s; }
  .js .journey-art.is-visible .journey-stops::before { transform: none; }
}
.motion-off .journey-art .journey-line { clip-path: none !important; }
.motion-off .journey-art .journey-node,
.motion-off .journey-art .journey-stops::before,
.motion-off .journey-art .journey-stops li > * { opacity: 1 !important; transform: none !important; }

/* About: education and credentials in the Ploy layout (Round 9), beside her portrait. The text keeps to the page's
   left edge and stays 100px or so from the photo; below 1280px the photo moves above it (1200px until October 2, when
   the degrees column squeezed "Bachelor of Arts" onto three lines on iPad Pro landscape). Round 11: the photo
   takes 40% instead of a third, so it shows the room around her rather than a strip of the dress, and the
   degrees column is a little narrower than the one beside it, so that one keeps its line breaks. */
.cred { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); container-type: inline-size; }
.cred-copy { align-self: center; padding: var(--section-l) clamp(3rem, 7vw, 6.5rem) var(--section-l) max(var(--gutter), (100cqw - var(--max)) / 2); }
.cred-copy > h2 { margin-top: var(--stack-label); }
.cred-spread { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); margin-top: var(--stack-action); padding-top: var(--stack-action); border-top: 1px solid var(--rule-strong); }
.cred-academic { padding-right: clamp(1.5rem, 3vw, 3rem); }
.cred-practice { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--rule-strong); }
.degree-list { margin: var(--stack-label) 0 0; }
.degree-list div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.degree-list div:last-child { border-bottom: 0; }
.degree-list dt { font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h2); line-height: 1.05; letter-spacing: var(--display-tracking); }
.degree-list dd { margin: 0; color: var(--muted); }
.cred-practice h3 { margin-top: var(--stack-label); }
.cred-practice h3 + p { margin-top: .6rem; color: var(--muted); }
.cred-practice p + h3 { margin-top: var(--stack-action); }
.cred-recognition { margin-top: var(--stack-action); padding-top: var(--stack-heading); border-top: 1px solid var(--rule); }
.cred-recognition .eyebrow + p { margin-top: .75rem; color: var(--muted); }
.cred-recognition strong { display: inline-block; color: var(--charcoal); font-weight: 600; text-wrap: balance; } /* never "the Year" alone */
.cred-press { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 2.5rem; margin-top: var(--stack-action); padding-top: var(--stack-heading); border-top: 1px solid var(--rule-strong); }
/* The dot sits in the gap before each name; a name that starts a new line (phones) has its dot clipped off at the
   list's edge, so no dot ever hangs at the end of a line (October 2) */
.press-list { display: flex; flex-wrap: wrap; column-gap: 1.75rem; margin: 0; padding: 0; overflow: hidden; color: var(--muted); list-style: none; }
.press-list li { position: relative; }
.press-list li + li::before { content: "·"; position: absolute; left: -1.75rem; width: 1.75rem; color: var(--pink-text); text-align: center; }
/* Each feature that has a page online links to it (October 4); the soft pink underline marks the links */
.press-list a { text-decoration-color: rgba(220, 40, 120, .55); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.press-list a:hover { color: var(--raspberry); text-decoration-color: currentColor; }
.cred-photo { position: relative; margin: 0; overflow: hidden; }
/* Her full-length floral portrait (October 4): placed near the top, so the wide crops below 1280px keep her face */
.cred-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform-origin: 50% 60%; }
@media (max-width: 79.99rem) {
  .cred { grid-template-columns: minmax(0, 1fr); }
  .cred-photo { order: -1; aspect-ratio: 3 / 2; }
  .cred-copy { padding: var(--section-m) var(--gutter) var(--section-l); }
}
@media (max-width: 47.99rem) {
  .cred-photo { aspect-ratio: 4 / 3; }
  .cred-spread { grid-template-columns: minmax(0, 1fr); }
  .cred-academic { padding-right: 0; }
  .cred-practice { margin-top: var(--stack-heading); padding: var(--stack-action) 0 0; border-top: 1px solid var(--rule-strong); border-left: 0; }
  .degree-list div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* Photo header with the title set on the image */
.image-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 38vw, 34rem);
  overflow: hidden;
  color: var(--ivory);
  text-align: center;
}
.image-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.image-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 72% 52% at 50% 52%, rgba(35, 25, 20, .56), rgba(35, 25, 20, .2) 76%), linear-gradient(180deg, rgba(35, 25, 20, .12), rgba(35, 25, 20, .3)); }
.image-hero-copy { padding: 3rem var(--gutter); }
.image-hero .eyebrow { color: var(--ivory); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.image-hero h1 { max-width: 24ch; margin: 0 auto; text-shadow: 0 2px 28px rgba(0, 0, 0, .3); }
/* Highlighted words are square blocks, as on Squarespace (Amber, Round 13); only tags keep the 8px corners */
.hl { padding: 0 .14em; background: var(--pink); color: #FFFFFF; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h1 em.hl { color: #FFFFFF; }
.hl--gold, h1 em.hl--gold { background: var(--gold); color: var(--charcoal); }

/* Centered title on the warm gradient (Events) */
.center-hero { padding: var(--section-m) var(--gutter); background: linear-gradient(180deg, var(--ivory), var(--blush)); text-align: center; }
.center-hero h1 { max-width: 24ch; margin: 0 auto; }

/* Collective sections */
.definitions-band .definition { padding-top: 0; border-top: 0; }
.definitions-band .definition h2 { padding-bottom: .75rem; border-bottom: 1px solid var(--rule-strong); }
.definitions-band .definition h2 span { color: var(--raspberry); font-style: normal; }
.definitions-band .definition p { text-wrap: balance; } /* no line starts with "+ worship." */
.centered-head { max-width: 50rem; margin-inline: auto; text-align: center; }
.centered-head h2 { margin-top: var(--stack-label); }
.dash-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.75rem; margin: 0; padding: 0; list-style: none; }
.dash-list li { position: relative; padding-left: 1.4rem; font-size: var(--p2); }
/* 2px, not 1.5px: a line of one and a half pixels rounds to 1 or 2 pixels by position, so half the dashes looked faded */
.dash-list li::before { content: ""; position: absolute; top: calc(.825em - 1px); left: 0; width: .7rem; height: 2px; background: var(--pink); }
@media (max-width: 47.99rem) { .dash-list { grid-template-columns: minmax(0, 1fr); } }

/* Round 14: the middle of the Ploy Collective page in Ploy's wording (the mission, life inside the Collective,
   membership), redrawn in this site's type and tokens. */
/* The mission: heading on the left, the text and "Read Our Full Mission" beside it, as in About's two-column note */
.mission-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.mission-split h2 { margin-top: var(--stack-label); }
/* The text starts level with the heading, below the label */
.mission-copy { max-width: var(--measure); margin-top: calc(var(--label) * 1.35 + var(--stack-label)); }
.mission-copy .lede + p { margin-top: var(--stack-heading); }
/* Up to 1200px the heading takes half the width: at 5 to 7 it broke into "Home. Hope. / Healing." below 1088px */
@media (max-width: 74.99rem) { .mission-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 63.99rem) {
  .mission-split { display: block; max-width: 44rem; }
  .mission-copy { margin-top: var(--stack-heading); }
}

/* Life inside the Collective: the real group photo and its caption, then three columns divided by fine rules */
.group-photo { margin: var(--stack-head) 0 0; }
.group-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius); }
.group-photo figcaption { margin-top: 1rem; color: var(--muted); font-size: var(--p3); line-height: var(--p3-lh); }
/* Phones show the whole photo in its own 3:2 shape, so every member stays in the frame and faces stay larger */
@media (max-width: 47.99rem) { .group-photo img { aspect-ratio: 3 / 2; } }
.belong-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--stack-head); }
.belong-cols article { padding-inline: clamp(1.5rem, 3vw, 3rem); }
.belong-cols article:first-child { padding-left: 0; }
.belong-cols article:last-child { padding-right: 0; }
.belong-cols article + article { border-left: 1px solid var(--rule-strong); }
.belong-cols h3 + p { margin-top: .75rem; color: var(--muted); }
.belong-cols .dash-list { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: var(--stack-heading); }
.belong-note { margin-top: var(--stack-heading); color: var(--muted); font-size: var(--p3); line-height: var(--p3-lh); }
/* Short lines split evenly, so none ends on a lone word ("development", "community.") */
.mission-copy .lede, .group-photo figcaption, .belong-cols p, .belong-cols li, .membership-note { text-wrap: balance; }
/* Three columns (1200px up) share their rows, so the three lists start level however long each line above them runs
   (October 4: Marquisha's new lines run three and four lines) */
@media (min-width: 75rem) {
  .belong-cols article { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .belong-cols .dash-list { align-content: start; } /* a shorter list keeps its own spacing instead of spreading out */
}
/* Below 1200px, one row per column with its heading and line beside the list: three columns there were under
   300px wide and broke "Personalized plans for / growth and / development" */
@media (max-width: 74.99rem) {
  .belong-cols { grid-template-columns: minmax(0, 1fr); }
  .belong-cols article {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    align-items: start;
    padding: var(--stack-heading) 0;
    border-top: 1px solid var(--rule-strong);
  }
  .belong-cols article + article { border-left: 0; }
  .belong-cols article > h3, .belong-cols article > h3 + p { grid-column: 1; }
  .belong-cols article > .dash-list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .belong-cols article > .belong-note { grid-column: 2; }
}
@media (max-width: 47.99rem) {
  .belong-cols article { display: block; }
  .belong-cols article > .dash-list { margin-top: var(--stack-heading); }
}

/* Membership: the text beside a card with the price and the facts (cream on the ivory section, as About's
   testimonial cards are ivory on cream) */
.membership { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--stack-head) clamp(3rem, 8vw, 8rem); }
.membership-copy h2 { margin: var(--stack-label) 0 var(--stack-heading); }
.membership-copy .lede { max-width: 30ch; }
.membership-term { margin-top: var(--stack-action); }
.membership-card { padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius); background: #FADAE8; } /* soft pink since October 1 */
.membership-price {
  margin-top: var(--stack-label);
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h1);
  letter-spacing: var(--display-tracking);
  line-height: 1;
}
.membership-price span { color: var(--muted); font-family: var(--font-text); font-size: var(--p2); letter-spacing: 0; word-spacing: normal; }
.membership-price + p { margin-top: .75rem; }
.membership-facts { margin: var(--stack-heading) 0 0; padding: 0; border-top: 1px solid var(--rule-strong); list-style: none; }
.membership-facts li { padding: .85rem 0; border-bottom: 1px solid var(--rule-strong); text-wrap: balance; }
.membership-card .actions { margin-top: var(--stack-heading); }
.membership-note { margin-top: var(--stack-heading); color: var(--muted); font-size: var(--p3); line-height: var(--p3-lh); }
@media (max-width: 63.99rem) { .membership { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }

.cohort { padding-block: var(--section-m); text-align: center; }
.cohort .cohort-label { font-weight: 700; }
.cohort .cohort-deadline { margin-top: var(--stack-label); font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h3); }
.cohort .deadline-date { margin-top: .5rem; color: var(--gold); }
.cohort .lede { max-width: 42ch; margin: var(--stack-heading) auto 0; text-wrap: balance; }
.cohort .actions { justify-content: center; }

.faq-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 clamp(2rem, 4vw, 3.5rem); margin-top: var(--stack-head); }
.faq-2col .panels { margin-top: 0; }
/* FAQ questions read as plain sentences, as on Squarespace */
.panel summary { text-wrap: pretty; } /* a question never ends on one word alone ("service?") */
.faq-2col .panel summary { padding: 1.3rem 0; font-size: var(--p2); font-weight: 500; letter-spacing: 0; line-height: 1.45; text-transform: none; }
/* Service panel titles are set in the headline serif, as on Squarespace */
.service .panel summary { padding: 1rem 0; font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h4); font-weight: var(--display-weight); font-variation-settings: var(--display-settings); letter-spacing: .04em; line-height: 1.3; }
@media (max-width: 63.99rem) { .faq-2col { grid-template-columns: minmax(0, 1fr); } .faq-2col .panels + .panels { border-top: 0; } }

/* Events. Every event has a status label above its title (Next up, Also on the calendar, Recently), and its facts
   stack in one order: date, time, place (Round 15). */
.next-up h2 { margin: var(--stack-label) 0 .4rem; }
.next-up .event-date-gold { color: var(--gold); font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h3); }
.next-up .event-meta { margin-top: .75rem; color: var(--on-dark-muted); }
.next-up .event-meta + .event-meta, .event-row .event-meta + .event-meta { margin-top: .25rem; }
.event-rows { display: grid; gap: var(--stack-head); }
/* 100px between photo and text on desktop, as in the site's other splits */
.event-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--gap) clamp(2rem, 8vw, 6.25rem); }
.event-row figure { margin: 0; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.event-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-row h3 { margin-top: 0; }
.event-row .eyebrow + h3 { margin-top: var(--stack-label); }
.event-row h3 a { text-decoration: none; }
.event-row h3 a:hover { color: var(--raspberry); }
.event-row .event-meta { margin-top: .5rem; }
@media (max-width: 47.99rem) { .event-row { grid-template-columns: minmax(0, 1fr); } }
/* From 768 up each photo is at least 3:2 and as tall as the text beside it, so it never floats as a thumbnail */
@media (min-width: 48rem) {
  .event-row { align-items: stretch; }
  .event-row > div { align-self: center; }
  .event-row img { height: 100%; }
}
/* From 1024 to 1199 the Next up text takes 7 of 12 columns, so "Leading on Purpose." keeps to one line */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .next-up { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .next-up .bleed-copy { --pad: 3.5rem; }
}

/* Courses: the workbook moved up under the photo header on October 2 (pages.css, .lift) */
.step-label { font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }

/* Get in Touch: details beside the form */
.contact-sq { padding-block: var(--section-m) var(--section-l); }
.contact-sq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7rem); }
.contact-sq h1 { margin: var(--stack-label) 0 var(--stack-heading); }
@media (max-width: 63.99rem) { .contact-sq-grid { grid-template-columns: minmax(0, 1fr); } }
.cohort h2.cohort-label { font-family: var(--font-text); font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); line-height: 1.35; text-transform: uppercase; }
.steps h3.step-label { font-family: var(--font-text); line-height: 1.35; }


/* Services, in the Squarespace rhythm: text beside a smaller portrait photo. Its header is the centered photo
   header shared with the Collective and Courses (Amber, Round 9). */
.svc-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.svc-split .svc-media { order: 2; margin: 0; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.svc-split--reverse { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.svc-split--reverse .svc-media { order: -1; }
.svc-split .svc-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc-split .lede { max-width: 30ch; margin-top: var(--stack-heading); }
/* Even lines from tablet width up (Round 12). On small phones, where .nowrap is off, balancing split "one-on-one". */
@media (min-width: 48rem) { .svc-split .lede { text-wrap: balance; } }
/* The hyphenated words here (one-on-one, trauma-informed, well-being) are short, so they stay whole even on
   320px phones, where site.css lets .nowrap wrap */
.svc-split .nowrap { white-space: nowrap; }
/* Round 12: tablets keep the photo beside the text (stacked, it sat 416px wide beside an empty strip and the page
   ran 3,000px longer than on desktop). Phones stack it above, full width, with a wider crop from 576px that
   keeps heads in view. */
@media (max-width: 63.99rem) {
  .svc-split { gap: clamp(2.5rem, 6vw, 4rem); }
}
@media (max-width: 47.99rem) {
  .svc-split, .svc-split--reverse { grid-template-columns: minmax(0, 1fr); }
  .svc-split .svc-media { order: -1; }
}
@media (min-width: 36rem) and (max-width: 47.99rem) {
  .svc-split .svc-media img { aspect-ratio: 4 / 3; object-position: 50% 20%; }
}

/* Round 12: the homepage's two paths, "For you" and "For your organization", as a row of links under the header */
.svc-jump { border-bottom: 1px solid var(--rule); }
.svc-jump-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(2.5rem, 6vw, 4rem); padding-block: var(--section-s); }
.svc-jump-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.svc-jump .eyebrow { margin: 0; }
.svc-jump ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 47.99rem) {
  .svc-jump-row { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .svc-jump-group { display: block; }
  .svc-jump ul { margin-top: .6rem; gap: .6rem 1.1rem; }
}
/* Narrow phones: one link per line, so "Retreats" never wraps onto a line of its own */
@media (max-width: 29.99rem) {
  .svc-jump ul { flex-direction: column; gap: .55rem; }
}

/* Members' words (Sanctuary Collective): one featured quote, then three short ones in a row */
.member-voices .centered-head { margin-bottom: var(--stack-head); }
.voice-feature { max-width: 56rem; margin: 0 auto; text-align: center; }
.voice-feature .voice-mark {
  display: block;
  height: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  color: var(--pink);
  font-family: var(--font-display);
  font-size: clamp(6rem, 4.5rem + 5vw, 9rem);
  font-style: italic;
  line-height: .9;
}
.voice-feature blockquote p {
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h3);
  letter-spacing: var(--display-tracking);
  line-height: 1.3;
  text-wrap: balance;
}
.member-voices figcaption {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: var(--stack-heading);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  line-height: 1.35;
  text-transform: uppercase;
}
.member-voices figcaption::before { content: ""; flex: none; width: 1.75rem; height: 2px; background: var(--pink); }
.voice-feature figcaption { justify-content: center; }
.voice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stack-action) clamp(2rem, 4vw, 4rem);
  margin: var(--stack-head) 0 0;
  padding: var(--stack-head) 0 0;
  border-top: 1px solid var(--rule-strong);
  list-style: none;
}
.voice-row figure { margin: 0; }
.voice-row blockquote { quotes: "“" "”"; }
.voice-row blockquote p { font-size: var(--p1); line-height: var(--p1-lh); }
.voice-row blockquote p::before { content: open-quote; }
.voice-row blockquote p::after { content: close-quote; }
@media (max-width: 63.99rem) {
  .voice-row { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
}

/* The board (October 1, Amber chose four equal portraits): photo, name, title, one line and Read Her Bio, which opens
   the whole bio in a dialog. Soft pink, between The Mission (ivory) and Life Inside the Collective (cream). Cards in a
   row share one height, so every Read Her Bio sits on one line. Tablets and phones put the photo beside the words,
   so the small photos from Marquisha's document are never enlarged. */
.board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--stack-action) var(--gap);
  margin: var(--stack-head) 0 0;
  padding: 0;
  list-style: none;
}
.board-card { display: flex; flex-direction: column; }
.board-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.board-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.board-card .board-name { margin-top: 1.5rem; }
.board-role { margin-top: .55rem; color: var(--raspberry); }
.board-line { margin: 1rem 0 1.25rem; color: var(--muted); text-wrap: pretty; }
.bio-open { margin-top: auto; padding: 0; border: 0; background: none; font-family: var(--font-text); cursor: pointer; }
.bio-open .plus { width: 1em; height: 1em; flex: none; }
/* In the row of four the cards share their rows, so a name that wraps (MaKayla Fountain on an iPad Pro held upright)
   moves every title and line down together; names sit on their last line, right above the title (October 2). */
@media (min-width: 64rem) {
  .board-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .board-text { display: contents; }
  .board-card .board-name { align-self: end; }
}
@media (max-width: 63.99rem) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; margin-inline: auto; gap: 2.5rem clamp(1.5rem, 5vw, 3rem); }
  .board-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .board-card .board-text { align-self: stretch; } /* the words fill the card, so both Read Her Bio links in a row share a line */
  .board-card .board-name { margin-top: 0; font-size: var(--h4); line-height: var(--h4-lh); }
  .board-line { margin: .6rem 0 .9rem; font-size: var(--p3); line-height: var(--p3-lh); }
}
@media (max-width: 47.99rem) {
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .board-card { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* A board member's bio: photo beside the words, the words scroll under a Close button that stays put */
.bio-dialog {
  width: min(100% - 2rem, 60rem);
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--ivory);
  color: var(--charcoal);
  box-shadow: 0 30px 80px -30px rgba(57, 52, 45, .55);
  overflow: hidden;
}
.bio-dialog::backdrop { background: rgba(57, 52, 45, .55); }
.bio-dialog .dialog-close { z-index: 2; background: var(--ivory); }
.bio-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  max-height: calc(100dvh - 3rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bio-photo { position: sticky; top: 0; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.bio-text { padding-top: .5rem; }
.bio-dialog .board-name { font-size: var(--h2); line-height: var(--h2-lh); }
.bio-dialog .board-role { margin-top: .6rem; }
.bio-body { margin-top: var(--stack-heading); }
.bio-body p + p { margin-top: 1em; }
@media (max-width: 47.99rem) {
  .bio-inner { grid-template-columns: minmax(0, 1fr); padding-top: 1.25rem; }
  .bio-photo { position: static; width: 9rem; aspect-ratio: 1; object-position: 50% 20%; }
  .bio-dialog .board-name { font-size: var(--h3); line-height: var(--h3-lh); }
}