/* Interior pages: About, Services, Sanctuary Collective, Events, Courses, Get in Touch, 404.
   Loaded after site.css. Open layouts with rules and breathing room rather than boxed cards. */

.section { padding-block: var(--section-l); }
.section--cream { background: var(--cream); }
/* Soft pink (October 1, Amber: the Collective page had "too much cream"). Charcoal text measures 13:1 on it; accent
   words and small marks switch to raspberry here, since the brighter pink is too light on pink */
.section--blossom { background: #FADAE8; }
.section--blossom h2 em, .section--blossom .voice-feature .voice-mark, .section--blossom .definition h2 span { color: var(--raspberry); }
.section--tight { padding-block: var(--section-m); }
.lede { font-size: var(--p1); line-height: var(--p1-lh); }
.muted { color: var(--muted); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.stack > * + * { margin-top: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: var(--stack-action); }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head .lede { margin-top: var(--stack-heading); }

/* Line endings: paragraphs never end on a lone word, and short centered text splits into even lines */
main p, main li, main dd, main blockquote { text-wrap: pretty; }
.centered p, .closing p, .notfound .lede { text-wrap: balance; }

/* Split hero with a real portrait (About, Get in Touch) */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-height: min(calc(100svh - var(--header-h)), 46rem);
  background: linear-gradient(165deg, var(--ivory) 0%, #FBF0E6 48%, var(--blush) 100%);
}
.page-hero .hero-photo { position: relative; margin: 0; overflow: hidden; background: #D7B39F; }
.page-hero .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.page-hero .hero-copy {
  align-self: center;
  max-width: 46rem;
  padding: clamp(3rem, 7vh, 6rem) var(--gutter) clamp(3rem, 7vh, 6rem) clamp(2rem, 5.5vw, 6.5rem);
}
.page-hero h1 { margin: var(--stack-label) 0 var(--stack-heading); }
.page-hero .lede { max-width: 33ch; }

@media (max-width: 63.99rem) {
  .page-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-hero .hero-photo { aspect-ratio: 4 / 3; }
  .page-hero .hero-copy { max-width: 44rem; padding: 3rem var(--gutter) 4rem; }
}
@media (max-width: 47.99rem) {
  .page-hero .hero-photo { aspect-ratio: 1 / 1.04; }
  .page-hero .hero-copy { padding: 2.5rem var(--gutter) 3.5rem; }
}

/* Title block over a wide banner photo (Services, Collective, Events, Courses) */
.page-intro { padding-block: var(--section-m) var(--section-s); }
.page-intro h1 { max-width: 15ch; margin-top: 1.1rem; }
.page-intro .lede { max-width: 36ch; margin-top: 1.5rem; }
.page-banner { position: relative; margin: 0; aspect-ratio: 21 / 9; overflow: hidden; background: var(--cream); }
.page-banner img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
@media (max-width: 63.99rem) { .page-banner { aspect-ratio: 16 / 9; } }
@media (max-width: 47.99rem) { .page-banner { aspect-ratio: 4 / 3; } }

/* Image beside text */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.5rem);
}
.split--top { align-items: start; }
.split--reverse .split-media { order: 2; }
.split-media { position: relative; margin: 0; overflow: hidden; }
.split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split-media--wide img { aspect-ratio: 3 / 2; }
.split .eyebrow + h2 { margin-top: var(--stack-label); }
.split h2 + .lede, .split h2 + p, .split h2 + .prose { margin-top: var(--stack-heading); }

@media (max-width: 63.99rem) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split-media { order: 0; }
  .split-media { max-width: 36rem; }
  .split-media--wide { max-width: none; }
}

/* Open/close panels and FAQs (native details, keyboard friendly) */
.panels { margin-top: var(--stack-action); border-top: 1px solid var(--rule-strong); }
.panel { border-bottom: 1px solid var(--rule-strong); }
.panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary:hover { color: var(--raspberry); }
.panel .plus { width: 1.35rem; height: 1.35rem; flex: none; color: var(--raspberry); transition: transform .3s var(--ease); }
.panel[open] .plus { transform: rotate(45deg); }
.panel-body { max-width: var(--measure); padding: 0 0 1.5rem; }
.panel-body p + p { margin-top: 1em; }
.panel-body a { color: var(--raspberry); font-weight: 600; }

.steps-inline { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps-inline li { position: relative; padding-left: 2.25rem; }
.steps-inline li + li { margin-top: .85rem; }
.steps-inline li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: .1em;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--raspberry);
  border-radius: 50%;
  color: var(--raspberry);
  font-size: var(--label);
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}

.faq { max-width: 56rem; margin-inline: auto; }
.faq .panels { margin-top: 0; }
.faq .panel summary {
  padding: 1.35rem 0;
  font-size: var(--p2);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

/* Services */
.jump {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  list-style: none;
}
.jump a {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: .5rem;
  text-align: center;
  text-decoration: none;
}
.jump img { width: 6rem; height: 6rem; transition: transform .4s var(--ease); }
.jump a:hover img { transform: translateY(-4px); }
.jump span { font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h4); line-height: var(--h4-lh); }
.jump a:hover span { color: var(--raspberry); }

.service { padding-block: var(--section-l); }
.service-icon { width: 5rem; height: 5rem; margin: 0 0 .75rem -.35rem; }
.service .lede { max-width: 32ch; }

@media (max-width: 47.99rem) {
  .jump { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: .5rem; }
  .jump li { grid-column: span 2; }
  .jump li:nth-child(4) { grid-column: 2 / span 2; }
  .jump li:nth-child(5) { grid-column: 4 / span 2; }
  .jump img { width: 4.75rem; height: 4.75rem; }
}

/* About */
.story-voice {
  max-width: 46rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 3px solid var(--raspberry);
}
.story-voice p { font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h3); line-height: 1.3; }
.story-voice figcaption { margin-top: 1.25rem; font-size: var(--label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.degrees {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.4rem;
  margin: 1.75rem 0;
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h2);
  line-height: 1.05;
}
.recognition { margin: var(--stack-action) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.recognition li { padding: 1rem 0; border-bottom: 1px solid var(--rule-strong); font-weight: 600; }

.note { max-width: 52rem; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 3px solid var(--raspberry); }
.note h2 { margin-top: 1rem; }
.note p:not(.eyebrow) { margin-top: 1.4rem; }

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.quote::before {
  content: "\201C";
  display: block;
  height: 2.25rem;
  color: var(--raspberry);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
}
.quote blockquote p { font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h4); line-height: 1.4; }
.quote figcaption { margin-top: 1.25rem; font-size: var(--label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 63.99rem) { .quotes { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }

.statement-band { padding-block: var(--section-m); background: var(--gold); color: var(--charcoal); text-align: center; }
.statement-band p {
  max-width: 21ch;
  margin-inline: auto;
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h2);
  line-height: var(--h2-lh);
  text-wrap: balance;
}

/* Sanctuary Collective */
.definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6.5rem); }
.definition { padding-top: 1.5rem; border-top: 1px solid var(--rule-strong); }
.definition h2 { font-size: var(--h2); }
.definition h2 span { margin-left: .35rem; color: var(--muted); font-family: var(--font-text); font-size: max(.38em, .875rem); font-style: italic; letter-spacing: 0; }
.definition p { margin-top: var(--stack-label); font-size: var(--p1); }
@media (max-width: 47.99rem) { .definitions { grid-template-columns: minmax(0, 1fr); } }

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: benefit;
}
.benefits li { position: relative; padding: 1.35rem 0 1.35rem 3rem; border-top: 1px solid var(--rule-strong); font-size: var(--p2); }
.benefits li::before {
  counter-increment: benefit;
  content: counter(benefit, decimal-leading-zero);
  position: absolute;
  top: 1.3rem;
  left: 0;
  color: var(--raspberry);
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h4);
}
@media (max-width: 63.99rem) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .benefits { grid-template-columns: minmax(0, 1fr); } }

.deadline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
}
.deadline-date { margin-top: .75rem; font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h1); line-height: 1; }
.deadline-label { margin-top: 1.5rem; font-size: var(--p1); font-weight: 600; }
@media (max-width: 47.99rem) { .deadline { grid-template-columns: minmax(0, 1fr); } }

/* Events */
.event-list { border-bottom: 1px solid var(--rule-strong); }
.event {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-strong);
}
.event-media { margin: 0; overflow: hidden; }
.event-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.event:hover .event-media img { transform: scale(1.03); }
.event-when { display: flex; align-items: baseline; gap: .9rem; }
.event-day { font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h1); line-height: .9; }
.event h3 { margin-top: .85rem; }
.event h3 a { text-decoration: none; }
.event h3 a:hover { color: var(--raspberry); }
.event-meta { margin-top: .6rem; color: var(--muted); font-weight: 600; }
.event-text { max-width: 38rem; margin-top: var(--stack-heading); }
.event .actions { margin-top: 1.5rem; }
/* Calendar links sit together on their own line, under the event's button */
.cal-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-top: var(--stack-heading); }
.tag {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.tag--next { color: var(--raspberry); }
.tag--past { color: var(--muted); }
@media (max-width: 47.99rem) { .event { grid-template-columns: minmax(0, 1fr); } }

/* Event facts: two by two, one column on small phones */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-heading) var(--gap);
  margin: var(--stack-action) 0 0;
  padding: var(--stack-heading) 0;
  border-block: 1px solid var(--rule-strong);
}
@media (max-width: 29.99rem) { .facts { grid-template-columns: minmax(0, 1fr); } }
.facts dt { font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.facts dd { margin: .4rem 0 0; font-size: var(--p2); }
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; }
.back-link:hover { color: var(--raspberry); }
.back-link svg { width: 1.1em; height: 1.1em; }
.page-event .back-row + .eyebrow { margin-top: var(--stack-action); }
.page-hero .tag { margin-top: var(--stack-heading); }

/* Previous and next events; the first and last event point back to all events instead */
.event-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.event-nav a { display: block; padding-top: var(--stack-heading); border-top: 1px solid var(--rule-strong); text-decoration: none; }
.event-nav a:last-child { text-align: right; }
.event-nav .eyebrow { display: block; }
.event-nav strong {
  display: flex;
  align-items: center;
  gap: .45em;
  text-wrap: balance; /* a long title never leaves one word alone ("Power!") */
  margin-top: var(--stack-label);
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.event-nav a:last-child strong { justify-content: flex-end; }
.event-nav svg { width: .75em; height: .75em; flex: none; transition: transform .3s var(--ease); }
.event-nav .to-next svg { transform: scaleX(-1); }
.event-nav a:hover strong { color: var(--raspberry); }
.event-nav .to-prev:hover svg { transform: translateX(-.15em); }
.event-nav .to-next:hover svg { transform: scaleX(-1) translateX(-.15em); }
.event-question { margin-top: var(--stack-action); text-align: center; }
@media (max-width: 47.99rem) {
  .event-nav { grid-template-columns: minmax(0, 1fr); }
  .event-nav a:last-child { text-align: left; }
  .event-nav a:last-child strong { justify-content: flex-start; }
  .event-question { text-align: left; }
}

/* Courses (October 2, 2026, from Amber's course-page reference): the photo header carries the page's one line of
   introduction and leaves room at its foot for a soft pink panel that rises out of the photo: The Makings of Me on
   the left, its words and "Get the Workbook" on the right (Amber, same day: the book on its own looked wrong against
   the busy photo, so the panel gives it a calm field). The four courses are plan cards in a row: a strip in the
   course's own tint, the name, the tagline, one line, who it's for, the lesson outline as a numbered hairline list,
   the planned takeaway and Join at the foot. Cards in a row share the tallest card's height, and Join sits at the foot
   of each, so the buttons line up (October 2 technical pass; before, each card kept its own height and Reclaiming
   You's caution pushed its button lower). Then "Simple, and finishable." and the members' words on soft pink.
   The tints are the soft pink, peach, blush and gold from Round 16; the white cards sit on cream. */
.page-courses { --lift: clamp(4rem, 9vw, 8.5rem); }
.page-courses .image-hero { min-height: calc(clamp(22rem, 38vw, 34rem) + var(--lift) * .5); padding-bottom: var(--lift); }
.page-courses .image-hero-copy { max-width: 50rem; }
/* A little more shade than the other photo headers, since this photo is bright where the description sits */
.page-courses .image-hero::after { background: radial-gradient(ellipse 74% 56% at 50% 46%, rgba(35, 25, 20, .64), rgba(35, 25, 20, .26) 76%), linear-gradient(180deg, rgba(35, 25, 20, .14), rgba(35, 25, 20, .34)); }
.page-courses .image-hero .lede { max-width: 40ch; margin: var(--stack-heading) auto 0; color: var(--ivory); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); text-wrap: balance; }
/* The panel paints above the photo header (both are positioned; later wins) */
.lift { position: relative; z-index: 1; padding-block: 0 var(--section-l); }
.lift-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  margin-top: calc(-1 * var(--lift));
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem);
  border-radius: var(--radius);
  background: #FADAE8;
  box-shadow: 0 34px 60px -44px rgba(57, 52, 45, .45);
}
.lift-media { margin: 0; }
.lift-media img { display: block; width: 100%; max-width: 28rem; height: auto; margin-inline: auto; filter: drop-shadow(0 18px 26px rgba(57, 52, 45, .24)); }
.lift-copy h2 { margin-top: var(--stack-label); }
.lift-copy .lede { max-width: var(--measure); margin-top: var(--stack-heading); }
@media (max-width: 63.99rem) {
  .lift-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--stack-action); }
  .lift-media img { max-width: 22rem; }
}
@media (max-width: 47.99rem) {
  .lift-media img { max-width: min(17rem, 64vw); }
}

.plans-head { max-width: var(--max-text); margin-inline: auto; text-align: center; }
.plans-head h2 { margin-top: var(--stack-label); }
.plans-head .lede { margin-top: var(--stack-heading); color: var(--muted); text-wrap: balance; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--gap); margin-top: var(--stack-head); }
.plan {
  --tint: #F5C7D9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: #FFFFFF;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.plan--peach { --tint: #F6D8BF; }
.plan--blush { --tint: #F9E1E9; }
.plan--gold { --tint: #F2E6C6; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -32px rgba(57, 52, 45, .5); }
.plan-strip { padding: .95rem 1.5rem; background: var(--tint); text-align: center; }
.plan-body { display: flex; flex: 1; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.plan-name { font-size: var(--h3); line-height: var(--h3-lh); }
.plan-name .nowrap { white-space: normal; } /* "Balance & Becoming." is wider than a card in the row of four */
.plan-tagline { margin-top: .6rem; color: var(--raspberry-deep); font-family: var(--font-display); word-spacing: var(--display-word-spacing); font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--display-tracking); }
.plan-text { margin-top: var(--stack-heading); }
.plan-for { margin-top: .9em; color: var(--muted); font-style: italic; }
.plan-text, .plan-for, .plan-caution, .plan-status, .plan-lessons li { font-size: var(--p3); line-height: var(--p3-lh); }
.plan .label { color: var(--muted); }
.plan-lessons-label { margin-top: var(--stack-action); }
.plan-lessons { margin: .5rem 0 0; padding: 0; list-style: none; counter-reset: lesson; border-bottom: 1px solid var(--rule-strong); }
.plan-lessons li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--rule-strong); counter-increment: lesson; text-wrap: pretty; }
.plan-lessons li::before { content: counter(lesson, decimal-leading-zero); color: var(--raspberry-deep); font-family: var(--font-display); font-size: var(--p2); }
.plan-takeaway-label { margin-top: var(--stack-heading); }
.plan-takeaway { margin-top: .35rem; font-family: var(--font-display); word-spacing: var(--display-word-spacing); font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--display-tracking); text-wrap: balance; }
.plan-caution { margin-top: var(--stack-heading); color: var(--muted); }
.plan-join { display: grid; justify-items: center; gap: .6rem; margin-top: auto; padding-top: var(--stack-action); text-align: center; }
.plan-join .btn { width: 100%; max-width: 22rem; }
.plan-status { color: var(--muted); }
@media (min-width: 48rem) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80rem) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.75rem); }
  .plan-name { font-size: 1.75rem; }
}

/* Members' words on the Courses page: the About page's ivory quote cards, on soft pink, two across on tablets */
.voices .cards { margin-top: var(--stack-head); padding: 0; list-style: none; }
.voices .card-quote { background: var(--ivory); }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .voices .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin: var(--stack-head) 0 0;
  padding: 0;
  list-style: none;
}
.steps li { padding-top: var(--stack-heading); border-top: 1px solid var(--rule-strong); }
/* Step numerals in the headline serif, pink like the accent words (large text, 3.5:1 on ivory) */
.step-number { display: block; color: var(--pink); font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h2); line-height: 1; }
.steps h3 { margin-top: var(--stack-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 p { margin-top: .75rem; }
@media (max-width: 47.99rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Blog (October 2, 2026, from Amber's blog reference): the posts as a grid of cards, three across from 1024px and
   two from 768px, each with its picture, title, a few lines, Read the Post and the date; the newsletter sits in the
   grid after the fourth post on soft pink. Each post opens with its picture under the title, then the words at the
   reading width, with the older and newer posts below. Pictures are her own blog images (October 1 approval). */
.blog-hero .eyebrow + h1 { margin-top: var(--stack-label); }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 3.5rem) var(--gap); margin: 0; padding: 0; list-style: none; }
.post-card article { display: flex; flex-direction: column; height: 100%; }
.post-media { display: block; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.post-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .post-media img { transform: scale(1.03); }
.post-card .post-title { margin-top: 1.25rem; font-size: var(--h4); line-height: var(--h4-lh); text-wrap: balance; }
.post-title a { text-decoration: none; }
.post-card:hover .post-title a, .post-title a:hover { color: var(--raspberry); }
.post-excerpt { margin-top: .75rem; color: var(--muted); font-size: var(--p3); line-height: var(--p3-lh); }
.post-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-top: auto; padding-top: 1.1rem; }
/* Read the Post and the date share a line only on cards wide enough for the longest date (September); narrower cards
   all put the date under the link, so a row's links stay level whatever the dates (October 2) */
.post-card { container-type: inline-size; }
@container (max-width: 22.99rem) {
  .post-foot { flex-direction: column; align-items: flex-start; gap: .35rem; }
}
.post-date { color: var(--muted); font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.post-signup { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--radius); background: #FADAE8; }
.post-signup h2 { margin-top: var(--stack-label); font-size: var(--h3); line-height: var(--h3-lh); text-wrap: balance; }
.post-signup .newsletter-form { flex-wrap: wrap; max-width: 30rem; margin-top: var(--stack-heading); }
.post-signup .newsletter-form input { min-width: 12rem; border-color: #FFFFFF; background: #FFFFFF; }
.post-signup .form-status { color: var(--muted); }
/* Two cards a row from 720px, so an iPad mini held upright (744px) doesn't get one photo-wide card at a time */
@media (min-width: 45rem) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-signup { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.post-head, .post-body, .post-cover { width: min(100% - 2 * var(--gutter), var(--measure)); }
.post-head .eyebrow { display: block; margin-top: var(--stack-action); color: var(--muted); }
.post-head h1 { margin-top: var(--stack-label); font-size: var(--h2); line-height: var(--h2-lh); text-wrap: balance; }
.post-cover { margin: var(--stack-head) auto 0; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.post-cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-body { margin-top: var(--stack-head); font-size: var(--p2); line-height: 1.75; }
.post-cover + .post-body { margin-top: var(--stack-action); }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2, .post-body h3, .post-body h4 { margin-top: 1.8em; font-size: var(--h4); line-height: var(--h4-lh); }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: .6em; }
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body li + li { margin-top: .45em; }
.post-body a { color: var(--raspberry); font-weight: 600; }
.post-body blockquote { padding-left: 1.25rem; border-left: 2px solid var(--pink); font-family: var(--font-display); font-size: var(--h4); line-height: var(--h4-lh); }
.post-body hr { width: 3.5rem; margin-block: 2em; border: 0; border-top: 2px solid var(--pink); }
/* Her pictures inside a post; two pages of one document sit side by side from 768px */
.post-figure { margin: 0; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.post-figure img { width: 100%; height: auto; }
.post-body > .post-figure, .post-body > .post-figures { margin-block: 1.8em; }
.post-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 47.99rem) { .post-figures { grid-template-columns: minmax(0, 1fr); } }

/* Get in Touch */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(3rem, 7vw, 7rem); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stack-heading) var(--gap); margin-top: var(--stack-heading); }
.form-intro { margin-top: var(--stack-label); }
.field { display: grid; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--p2); font-weight: 600; }
.field .hint { color: var(--muted); font-size: var(--p3); }
/* Fields as on the style guide: white, a soft warm border (3.3:1 on white, 3.1:1 on ivory) and the 12px button corners */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: .85rem 1.1rem;
  border: 1.5px solid #968D83;
  border-radius: var(--button-radius);
  background: #FFFFFF;
  color: var(--charcoal);
  font: 500 1rem/1.5 var(--font-text);
  transition: border-color .25s var(--ease);
}
.field select {
  appearance: none;
  padding-right: 3rem;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2339342D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.25rem;
  cursor: pointer;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--charcoal); }
/* The message box is three lines (rows="3") and can be pulled taller. Its minimum used to be 9rem, which held it at
   five lines whatever the rows said; at 1440x900 the Send button now sits above the fold (October 2, 2026). */
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--raspberry); outline: 2px solid var(--raspberry); outline-offset: 1px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: var(--stack-action); }
.form-foot .form-status { margin: 0; font-weight: 600; }
.form-note { margin-top: var(--stack-label); color: var(--muted); font-size: var(--p3); }
.contact-details { margin: var(--stack-action) 0 0; }
.contact-details dt { font-size: var(--label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.contact-details dd { margin: .45rem 0 var(--stack-heading); font-size: var(--p2); }
.contact-details a { color: var(--raspberry); font-weight: 600; }
.welcome { padding: 1.25rem 0; border-block: 1px solid var(--rule-strong); font-family: var(--font-display); word-spacing: var(--display-word-spacing, normal); font-size: var(--h4); line-height: var(--h4-lh); }
@media (max-width: 63.99rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.notfound {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(calc(100svh - var(--header-h)), 44rem);
  overflow: hidden;
  padding: var(--section-l) var(--gutter);
  text-align: center;
}
/* The ampersand sits in the lower right, as on the closing bands, clear of the text. It is offset by its own
   height, not the section's, so about two thirds of it shows on tall phone screens too. */
.notfound .closing-mark { right: -6%; bottom: 0; width: clamp(14rem, 40vw, 34rem); opacity: .6; transform: translateY(35%); }
@media (max-width: 22.49rem) { .notfound .closing-mark { width: 10rem; } }
.notfound h1 { max-width: 16ch; margin: var(--stack-label) auto var(--stack-heading); }
.notfound .lede { max-width: 34ch; margin-inline: auto; }
.notfound .actions { justify-content: center; }

/* Groups rise in one item after another (site.js adds the classes) */
@media (prefers-reduced-motion: no-preference) {
  [data-stagger].is-ready > * {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--n, 0) * .1s);
  }
  [data-stagger].is-in > * { opacity: 1; transform: none; }
}

/* Event pages use landscape photos in the split hero */
.page-event .page-hero .hero-photo img { object-position: 50% 50%; }
/* Size check, October 2. Event photos stay landscape below 1200px, so the Collective's group photo keeps everyone in
   frame on phones (it was cut square, losing a member's head). From 1024 to 1199 the event hero stacks as on tablets
   held upright: beside the words, the photo became a narrow strip and the dates broke ("Friday, October / 2, 2026"). */
@media (max-width: 74.99rem) {
  .page-event .page-hero .hero-photo { aspect-ratio: 4 / 3; }
}
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .page-event .page-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-event .page-hero .hero-photo { aspect-ratio: 16 / 9; }
  .page-event .page-hero .hero-copy { max-width: 44rem; padding: 3rem var(--gutter) 4rem; }
}
/* Wherever the group photo is cut narrower than it is (beside the words), the crop sits right of center, so its edges
   fall between faces: the woman in red stays whole and the member lying front left leaves the frame below her
   shoulders instead of at her neck */
.page-event .page-hero .hero-photo img.photo-group { object-position: 64% 50%; }
.next-up .bleed-photo img.photo-group { object-position: 64% 28%; }

/* Full-width photo inside a section */
.wide-photo { margin: var(--stack-head) 0 0; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.wide-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 47.99rem) { .wide-photo img { aspect-ratio: 4 / 3; } }
.deadline-note { margin-top: 1.25rem; }

/* A heading styled as a small label keeps the label size wherever it sits */
main h2.eyebrow { margin-top: 0; font-size: var(--label); line-height: 1.35; }