html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

:root {
  color: var(--st-color-text);
  background: var(--st-color-background);
  font-family: var(--st-font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

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

body {
  min-width: 320px;
  margin: 0;
  background: var(--st-color-background);
}

a {
  color: inherit;
}

.st-site {
  min-height: 100vh;
}

.st-site__inner {
  width: min(100% - 2rem, 76rem);
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

.st-block {
  min-width: 0;
  margin: 0 auto var(--st-section-spacing);
}

.st-site__inner > .st-block:last-child {
  margin-bottom: 0;
}

.st-eyebrow {
  margin: 0 0 1.2rem;
  color: var(--st-color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.st-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: min(47rem, 78vh);
  align-items: center;
  justify-items: center;
  padding: clamp(4rem, 10vw, 9rem) clamp(1.5rem, 8vw, 7rem);
  background: var(--st-color-surface);
  text-align: center;
}

.st-image-surface {
  position: relative;
}

.st-hero > * {
  min-width: 0;
  max-width: 100%;
}

.st-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}

.st-image-surface__image {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 38rem);
  min-width: 0;
  max-width: 100%;
  max-height: 24rem;
  height: auto;
  margin: 0 auto;
  border-radius: var(--st-radius-surface);
  object-fit: cover;
}

.st-hero__image {
  margin-bottom: 2rem;
}

.st-image-surface--framed,
.st-image-surface--full-bleed {
  isolation: isolate;
  overflow: hidden;
}

.st-image-surface--framed .st-image-surface__image,
.st-image-surface--full-bleed .st-image-surface__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: inherit;
}

/* Framed: the photo fills a frame inset inside the card, whatever the card's
   shape. Form cards inset it by half their padding, so the fields sit inside
   the photo with an even margin all round. */
.st-image-surface--framed {
  --st-frame-inset: clamp(1rem, 4vw, 3rem);
}

.st-rsvp__form.st-image-surface--framed,
.st-contact__form.st-image-surface--framed {
  --st-frame-inset: calc(var(--st-content-spacing) / 2);
}

.st-image-surface--framed .st-image-surface__image {
  inset: var(--st-frame-inset);
  width: calc(100% - 2 * var(--st-frame-inset));
  height: calc(100% - 2 * var(--st-frame-inset));
  border-radius: var(--st-radius-surface);
  object-fit: cover;
}

.st-image-surface--full-bleed .st-image-surface__image {
  object-fit: cover;
}

.st-image-surface--framed::before,
.st-image-surface--full-bleed::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.st-image-surface--framed::before {
  content: "";
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--st-color-surface) 94%, transparent) 0%,
    color-mix(in srgb, var(--st-color-surface) 76%, transparent) 58%,
    transparent 100%
  );
}

.st-image-surface--full-bleed::before {
  content: "";
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--st-color-surface) 54%, transparent),
    color-mix(in srgb, var(--st-color-surface) 80%, transparent)
  );
}

.st-image-surface--framed .st-image-surface__content,
.st-image-surface--full-bleed .st-image-surface__content {
  z-index: 2;
}

.st-hero__title,
.st-hero-list__title,
.st-section-title {
  margin: 0;
  color: var(--st-color-text);
  font-weight: 400;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.st-hero__title {
  font-size: clamp(2.75rem, 12vw, 9.5rem);
  line-height: 0.87;
}

.st-hero__description {
  max-width: 31rem;
  margin: 2rem auto 0;
  color: var(--st-color-text-muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 1.25rem 2rem;
  width: min(100%, 40rem);
  min-width: 0;
  margin: 2.2rem auto 0;
  padding: 1.4rem clamp(1rem, 2vw, 2rem) 0;
  border-top: 1px solid var(--st-color-border);
}

.st-hero__meta-item {
  min-width: 0;
}

.st-hero__meta-item dt {
  margin: 0 0 0.35rem;
  color: var(--st-color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.st-hero__meta-item dd {
  margin: 0;
  color: var(--st-color-text);
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.st-button {
  max-width: 100%;
}

.st-hero .st-button {
  margin-top: 2.4rem;
}

/* Formatted text fields (bodies and intros), rendered from the closed set in
   stitchable/rich-text.ts: paragraphs, bulleted lists, bold and links. Each
   Block sets the wrapper's size, colour and spacing; these rules only space
   the parts. Single line breaks inside a paragraph are kept. */
.st-rich-text > :is(p, ul) {
  margin: 0;
}

.st-rich-text > :is(p, ul) + :is(p, ul) {
  margin-top: var(--st-rich-text-gap, 0.9em);
}

.st-rich-text p {
  white-space: pre-line;
}

.st-rich-text ul {
  padding-left: 1.25em;
  list-style: disc;
}

.st-rich-text li + li {
  margin-top: 0.3em;
}

.st-rich-text li::marker {
  color: var(--st-color-accent);
}

.st-rich-text strong {
  color: var(--st-color-text);
  font-weight: 650;
}

/* Lists in the centred Text block shrink to their content and sit centred,
   with their own lines left-aligned. */
.st-text:not(.st-text--notice) .st-rich-text ul {
  display: table;
  margin-inline: auto;
  text-align: left;
}

.st-text {
  padding: 0 var(--st-content-spacing);
  text-align: center;
}

.st-text__body {
  max-width: 39rem;
  margin: 1.7rem auto 0;
  color: var(--st-color-text-muted);
  font-size: 1.08rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/* Callout: a contained card that reads as an aside, not a new section. */
.st-text--notice {
  max-width: 44rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-surface);
  background: var(--st-color-surface-subtle);
  text-align: left;
}

.st-text--notice .st-eyebrow {
  margin-bottom: 0.75rem;
}

.st-text--notice .st-section-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.st-text--notice .st-text__body {
  max-width: none;
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.75;
}

.st-schedule {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 8vw, 7rem);
  padding: 2rem 0;
}

.st-schedule__heading,
.st-schedule__list,
.st-schedule__event > div {
  min-width: 0;
}

.st-schedule__heading {
  padding-top: 0.6rem;
}

.st-schedule__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-schedule__event {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 1.5rem;
  min-width: 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--st-color-border);
}

.st-schedule__event time {
  min-width: 0;
  max-width: 100%;
  padding-top: 0.2rem;
  color: var(--st-color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.st-schedule__event-title {
  margin: 0;
  font-family: var(--st-font-heading);
  font-size: 1.65rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.st-schedule__event p {
  margin: 0.5rem 0 0;
  color: var(--st-color-text-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.st-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 8vw, 7rem);
  padding: 2rem 0;
}

.st-faq__heading,
.st-faq__items {
  min-width: 0;
}

.st-faq__heading {
  padding-top: 0.6rem;
}

.st-faq .st-section-title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
}

.st-faq__intro {
  max-width: 24rem;
  margin: 1.2rem 0 0;
  color: var(--st-color-text-muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-faq__item {
  border-top: 1px solid var(--st-color-border);
}

.st-faq__item:last-child {
  border-bottom: 1px solid var(--st-color-border);
}

.st-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  color: var(--st-color-text);
  font-family: var(--st-font-heading);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.st-faq__question::-webkit-details-marker {
  display: none;
}

.st-faq__question::after {
  flex: 0 0 auto;
  color: var(--st-color-accent);
  content: "+";
  font-family: var(--st-font-body);
  font-size: 1.25rem;
  line-height: 1.5;
}

.st-faq__item[open] .st-faq__question::after {
  content: "−";
}

.st-faq__question:focus-visible {
  outline: 2px solid var(--st-color-accent);
  outline-offset: 4px;
}

.st-faq__answer {
  max-width: 42rem;
  padding: 0 2.5rem 1.25rem 0;
  color: var(--st-color-text-muted);
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Image & text. The copy is first in the document; the image column is
   placed visually. The image fills its column: at least square, and taller
   when the copy is longer, cropped with object-fit rather than letterboxed.
   Square keeps two thirds of a landscape venue shot and three quarters of a
   portrait; the crop leans upward because faces sit in the upper half. */
.st-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: 2rem 0;
}

/* Without an image the copy keeps its own reading width (the body's
   max-width); the section itself still fills the page line. */
.st-split--no-image {
  grid-template-columns: minmax(0, 1fr);
}

.st-split__copy,
.st-split__media {
  min-width: 0;
}

.st-split--image-left .st-split__media {
  order: -1;
}

.st-split__body {
  --st-rich-text-gap: 1.1rem;
  max-width: 36rem;
  margin: 1.5rem 0 0;
  color: var(--st-color-text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.st-split .st-section-title {
  overflow-wrap: anywhere;
}

.st-split__action {
  margin-top: 2rem;
}

.st-split__media {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--st-radius-surface);
  background: var(--st-color-surface-subtle);
}

.st-split__media::before {
  display: block;
  padding-top: 100%;
  content: "";
}

.st-split__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.st-banner {
  position: relative;
  display: grid;
  min-height: 15rem;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-surface);
  background: linear-gradient(110deg, var(--st-color-accent), var(--st-color-text));
  box-shadow: var(--st-shadow-surface);
}

.st-banner::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
    105deg,
    var(--st-overlay-strong) 0%,
    var(--st-overlay-medium) 43%,
    var(--st-overlay-faint) 100%
  );
  content: "";
}

.st-banner__image {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.st-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.st-banner__copy {
  width: min(100%, 32rem);
  min-width: 0;
}

.st-banner__title,
.st-banner__description {
  color: var(--st-overlay-text);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.st-banner__title {
  margin: 0;
  font-family: var(--st-font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.st-banner__description {
  max-width: 28rem;
  margin: 0.8rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

.st-banner__action {
  flex: 0 0 auto;
  align-self: flex-end;
  max-width: 100%;
}

.st-rsvp {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 8vw, 7rem);
  padding: 2rem 0;
}

.st-rsvp__heading,
.st-rsvp__form {
  min-width: 0;
}

.st-rsvp__heading .st-rich-text {
  max-width: 24rem;
  margin: 1.2rem 0 0;
  color: var(--st-color-text-muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-surface {
  background: var(--st-color-surface);
}

.st-rsvp__form {
  display: grid;
  gap: 1.25rem;
  padding: var(--st-content-spacing);
}

.st-rsvp__form-content {
  display: grid;
  gap: 1.25rem;
}

.st-field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.st-choice-field {
  display: block;
}

/* Labels come from the Mantine theme (getMantineTheme); only layout here. */
.st-choice-group {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0.75rem;
  min-width: 0;
}

.st-rsvp__form:has(input[name="attendance"][value="no"]:checked)
  [data-stitchable-guest-count-field] {
  display: none;
}

.st-rsvp__form .st-button {
  justify-self: start;
  margin-top: 0.5rem;
  border: 0;
  cursor: pointer;
}

.st-rsvp__status {
  margin: 0;
  color: var(--st-color-accent);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

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

/* Bot protection (Cloudflare Turnstile). The form runtime adds this before
   the submit button; it stays empty unless the visitor must interact. */
.st-bot-protection {
  max-width: 100%;
  overflow: hidden;
}

.st-bot-protection:empty {
  display: none;
}

/* Contact form: heading and details beside the form card, like RSVP. */
.st-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 8vw, 7rem);
  padding: 2rem 0;
}

.st-contact__info {
  display: grid;
  align-content: start;
  min-width: 0;
}

.st-contact__info .st-rich-text {
  max-width: 24rem;
  margin: 1.2rem 0 0;
  color: var(--st-color-text-muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-contact__details {
  display: grid;
  gap: 1.25rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.st-contact__detail {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.st-contact__icon {
  display: inline-grid;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--st-radius-control);
  background: color-mix(in srgb, var(--st-color-accent) 12%, transparent);
  color: var(--st-color-accent);
}

.st-contact__label {
  display: block;
  color: var(--st-color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.st-contact__value {
  display: block;
  color: var(--st-color-text);
  overflow-wrap: anywhere;
  text-decoration: none;
}

a.st-contact__value:hover {
  color: var(--st-color-accent);
}

.st-contact__form {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  padding: var(--st-content-spacing);
}

.st-contact__form-content {
  display: grid;
  gap: 1.25rem;
}

.st-contact__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.st-contact__submit {
  justify-self: start;
  margin-top: 0.5rem;
  border: 0;
  cursor: pointer;
}

.st-contact__status {
  margin: 0;
  color: var(--st-color-accent);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Features: centred heading over a grid of points. Icons sit in the same
   tinted tile as the contact details; "cards" puts each point on a Paper. */
.st-features {
  padding: 2rem 0;
}

.st-features__heading {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.st-features .st-section-title {
  overflow-wrap: anywhere;
}

.st-features__intro {
  margin: 1.2rem auto 0;
  color: var(--st-color-text-muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.st-features__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st-features__item {
  min-width: 0;
}

.st-features--cards .st-features__grid {
  gap: 1.25rem;
}

/* Cards are Mantine Paper (border, radius, shadow from the theme). */
.st-features--cards .st-features__item {
  padding: var(--st-content-spacing);
}

.st-features__icon {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--st-radius-control);
  background: color-mix(in srgb, var(--st-color-accent) 12%, transparent);
  color: var(--st-color-accent);
}

.st-features__item-title {
  margin: 1.1rem 0 0;
  font-family: var(--st-font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.st-features__item-description {
  margin: 0.5rem 0 0;
  color: var(--st-color-text-muted);
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Projects: centred heading over a grid of project cards (Mantine Paper, as
   Features cards). The image is cropped to one shape so a row of cards stays
   even; the body is a column so each card's button sits at its foot. */
.st-projects {
  padding: 2rem 0;
}

.st-projects__heading {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.st-projects .st-section-title {
  overflow-wrap: anywhere;
}

.st-projects__intro {
  margin: 1.2rem auto 0;
  color: var(--st-color-text-muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.st-projects__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st-projects__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}

.st-projects__media {
  position: relative;
  overflow: hidden;
  background: var(--st-color-surface-subtle);
}

.st-projects__media::before {
  display: block;
  padding-top: 62.5%;
  content: "";
}

.st-projects__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.st-projects__media--placeholder {
  background: color-mix(in srgb, var(--st-color-accent) 12%, var(--st-color-surface-subtle));
}

.st-projects__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--st-color-accent);
  font-family: var(--st-font-heading);
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
  opacity: 0.7;
}

.st-projects__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--st-content-spacing);
}

.st-projects__tag {
  margin: 0 0 0.6rem;
  color: var(--st-color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.st-projects__title {
  margin: 0;
  font-family: var(--st-font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.st-projects__description {
  margin: 0.5rem 0 0;
  color: var(--st-color-text-muted);
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.st-projects__action {
  margin-top: auto;
}

/* Keep a gap between the copy and the button; the button's margin-top: auto
   still pushes it to the card's foot when a neighbouring card is taller. */
.st-projects__body > :has(+ .st-projects__action) {
  margin-bottom: 1.5rem;
}

.st-projects__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* Hero with list: copy and checklist beside one photograph, laid out and
   cropped like Image & text. The title is hero-scaled for a half column. */
.st-hero-list {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2rem, 6vw, 4rem) 0;
}

.st-hero-list--no-image {
  grid-template-columns: minmax(0, 1fr);
}

.st-hero-list__copy,
.st-hero-list__media {
  min-width: 0;
}

.st-hero-list--image-left {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.st-hero-list--image-left .st-hero-list__media {
  order: -1;
}

.st-hero-list__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.98;
}

.st-hero-list__description {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: var(--st-color-text-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.st-hero-list__items {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.st-hero-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  color: var(--st-color-text-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.st-hero-list__item strong {
  color: var(--st-color-text);
  font-weight: 600;
}

.st-hero-list__check {
  display: inline-grid;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  place-items: center;
  border-radius: 999px;
  background: var(--st-color-accent);
  color: var(--st-color-on-accent);
}

.st-hero-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.st-hero-list__media {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--st-radius-surface);
  background: var(--st-color-surface-subtle);
}

.st-hero-list__media::before {
  display: block;
  padding-top: 110%;
  content: "";
}

.st-hero-list__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Cut-out side image (Image & text, Hero with list): the whole image at its
   own shape, with no frame, background or crop, for transparent PNGs, logos
   and illustrations. The Photo style above stays the default. */
.st-side-image--cutout .st-split__media,
.st-side-image--cutout .st-hero-list__media {
  display: grid;
  align-self: center;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  background: none;
}

.st-side-image--cutout .st-split__media::before,
.st-side-image--cutout .st-hero-list__media::before {
  content: none;
}

.st-side-image--cutout .st-split__image,
.st-side-image--cutout .st-hero-list__image {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 36rem;
  object-fit: contain;
}

.st-header {
  position: relative;
  z-index: 2;
  color: var(--st-color-text);
  background: var(--st-color-background);
}

.st-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  width: min(100% - 2rem, 76rem);
  margin: 0 auto;
  padding: 1.25rem 0 0.75rem;
}

.st-header--centered .st-header__inner {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.st-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  font-family: var(--st-font-heading);
  font-size: 1.35rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
}

/* Renderer-owned size: any upload sits at header height, keeping its shape. */
.st-header__logo {
  display: block;
  flex: none;
  width: auto;
  max-width: 12rem;
  height: 2.5rem;
  object-fit: contain;
}

.st-header__name {
  min-width: 0;
}

.st-header__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-header--centered .st-header__links {
  justify-content: center;
}

/* Split header: the brand gives way (its name wraps) before the menu moves to
   a second row, and a menu that still has to wrap stays on the right edge of
   the page line. */
.st-header--split .st-header__brand {
  flex: 1 1 14rem;
}

.st-header--split .st-header__nav {
  margin-left: auto;
}

.st-header--split .st-header__links {
  justify-content: flex-end;
}

.st-header__link {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--st-color-text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  text-underline-offset: 0.45em;
}

.st-header__link:hover,
.st-header__link[aria-current="page"] {
  color: var(--st-color-text);
  text-decoration: underline;
  text-decoration-color: var(--st-color-accent);
  text-decoration-thickness: 1px;
}

.st-header__brand:focus-visible,
.st-header__link:focus-visible,
.st-header__toggle:focus-visible {
  outline: 2px solid var(--st-color-accent);
  outline-offset: 3px;
}

.st-header__disclosure {
  display: none;
}

.st-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-button);
  color: var(--st-color-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.st-header__toggle::-webkit-details-marker {
  display: none;
}

.st-header__toggle-icon,
.st-header__toggle-icon::before,
.st-header__toggle-icon::after {
  display: block;
  width: 0.9rem;
  height: 1px;
  background: currentColor;
}

.st-header__toggle-icon {
  position: relative;
}

.st-header__toggle-icon::before,
.st-header__toggle-icon::after {
  position: absolute;
  left: 0;
  content: "";
}

.st-header__toggle-icon::before {
  top: -0.3rem;
}

.st-header__toggle-icon::after {
  top: 0.3rem;
}

.st-header__disclosure[open] .st-header__toggle-icon {
  background: transparent;
}

.st-header__disclosure[open] .st-header__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.st-header__disclosure[open] .st-header__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.st-footer {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  color: var(--st-color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}

/* Analytics consent notice: fixed to the bottom of the screen, on the page
   line. Shown only by the consent runtime; Accept and Decline look alike so
   declining is as easy as accepting. */
.st-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  padding-bottom: 1rem;
  pointer-events: none;
}

.st-consent[hidden],
.st-footer__consent[hidden] {
  display: none;
}

.st-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  box-sizing: border-box;
  width: min(100% - 2rem, 76rem);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-surface);
  background: var(--st-color-surface);
  box-shadow: var(--st-shadow-surface);
  color: var(--st-color-text);
  pointer-events: auto;
}

.st-consent__text {
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.st-consent__actions {
  display: flex;
  flex: none;
  gap: 0.75rem;
}

.st-consent__button {
  min-width: 6.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--st-color-text);
  border-radius: var(--st-radius-button);
  background: transparent;
  color: var(--st-color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.st-consent__button:hover {
  background: var(--st-color-text);
  color: var(--st-color-surface);
}

.st-consent__button:focus-visible,
.st-footer__consent:focus-visible {
  outline: 2px solid var(--st-color-accent);
  outline-offset: 3px;
}

.st-footer__consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-transform: inherit;
  cursor: pointer;
}

@media (max-width: 700px) {
  /* Phones keep the one page gutter (1rem, from .st-site__inner and
     .st-header__inner): sections add no side padding of their own, so the
     logo, section copy, cards and banners all start on the same line. */
  .st-header__inner {
    padding-top: 0.75rem;
  }

  .st-header__links--wide {
    display: none;
  }

  .st-header__disclosure {
    display: block;
  }

  .st-header--centered .st-header__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Phones: the brand and the menu button always share one row, with the
     button on the right edge of the page line; a long name wraps instead. */
  .st-header__inner {
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .st-header__brand,
  .st-header--split .st-header__brand {
    flex: 1 1 auto;
  }

  .st-header__nav {
    flex: none;
    margin-left: auto;
  }

  .st-header__links--narrow {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 1rem 0.75rem;
    background: var(--st-color-background);
    box-shadow: var(--st-shadow-surface);
    text-align: left;
  }

  .st-header__links--narrow li + li {
    border-top: 1px solid var(--st-color-border);
  }

  .st-header__links--narrow .st-header__link {
    display: block;
    padding: 0.85rem 0.25rem;
  }

  .st-site__inner {
    padding-top: 0.5rem;
  }

  .st-hero {
    min-height: auto;
    padding: clamp(3rem, 12vw, 6rem) clamp(1rem, 6vw, 2.5rem);
  }

  .st-hero__title {
    font-size: clamp(2.75rem, 14vw, 6rem);
  }

  .st-hero__meta {
    grid-template-columns: 1fr;
    padding-inline: 0;
  }

  .st-schedule {
    display: block;
  }

  .st-schedule__heading {
    margin-bottom: 2rem;
  }

  .st-schedule__event {
    grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr);
    gap: 0.75rem;
  }

  .st-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .st-faq__heading {
    padding-top: 0;
  }

  .st-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  /* Phones: the photo always leads, whichever side it sits on when wide. */
  .st-split__media {
    order: -1;
  }

  .st-split__media::before {
    padding-top: 75%;
  }

  .st-banner {
    min-height: 18rem;
  }

  .st-banner__content {
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem;
  }

  .st-banner__action {
    align-self: flex-start;
  }

  .st-rsvp {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .st-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .st-contact__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-hero-list,
  .st-hero-list--image-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .st-side-image--cutout .st-split__image,
  .st-side-image--cutout .st-hero-list__image {
    max-height: 18rem;
  }

  /* Phones: the photo leads, as in Image & text. */
  .st-hero-list__media {
    order: -1;
  }

  .st-hero-list__media::before {
    padding-top: 75%;
  }


  .st-features__grid,
  .st-features__grid--2,
  .st-projects__grid,
  .st-projects__grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-footer {
    flex-wrap: wrap;
  }

  .st-consent__actions {
    flex: 1 1 100%;
  }

  .st-consent__button {
    flex: 1 1 0;
  }
}

@media (max-width: 36em) {
  .st-header__logo {
    max-width: 9rem;
    height: 2rem;
  }

  /* Beside the name, a wide logo leaves the name too little room next to
     the menu button; keep it smaller and break the name only between words. */
  .st-header__brand {
    font-size: 1.15rem;
    overflow-wrap: break-word;
  }

  .st-header__brand:has(.st-header__name) .st-header__logo {
    max-width: 5.5rem;
    height: 1.75rem;
  }
}

/* iOS Safari zooms the page into any focused field whose text is smaller
   than 16px, and Mantine inputs default to 14px. Phones get 16px fields so
   guests filling in an RSVP are not zoomed in; pinch-zoom stays available
   (no maximum-scale in the viewport). */
@media (max-width: 700px) {
  .st-site :is(input, textarea, select),
  .st-site .mantine-Input-input {
    font-size: 16px;
  }
}