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

html {
  height: 100%;
}

body.body {
  height: 100vh;
  margin: 0;
  background-color: #fffaf4;
  color: #333;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

/* ── Layout ────────────────────────────────────────────── */

.desktop-home-section {
  background-color: #fffaf4;
  width: 100vw;
  height: 100vh;
  padding: 0 80px 40px;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* The whole column scrolls (title + content together), exactly like the
   original. The dashed dividers live on .column-content, so they scroll with
   the cards — but as a continuous uniform line the motion is imperceptible. */
.column-master {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.column-master::-webkit-scrollbar {
  display: none;
}

.column-master {
  scrollbar-width: none;
}

.column-title {
  text-align: center;
}

.column-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 24px 56px;
  border-left: 1px dashed #bbb;
  border-right: 1px dashed #bbb;
}

/* ── Column headings ───────────────────────────────────── */

.title {
  margin-top: 40px;
  margin-bottom: 8px;
  font-family: 'La Belle Aurore', sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
}

/* ── Events column ─────────────────────────────────────── */

.events-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.events-card.past {
  opacity: 0.32;
}

.new-event-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.events-date-sq {
  background-color: #fcb5be;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  flex-shrink: 0;
}

.event-location-wrapper {
  display: flex;
  flex-direction: row;
}

.event-location {
  color: #555;
  font-size: 14px;
}

.date-time-wrapper {
  display: flex;
  gap: 4px;
  font-size: 14px;
  color: #555;
}

.event-title {
  color: #333;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.tags-wrapper {
  display: flex;
  gap: 8px;
}

.events-date {
  background-color: #ede8f0;
  border-radius: 4px;
  padding: 4px 12px;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  display: inline-flex;
}

.events-date.cost {
  background-color: #00a22b29;
}

.rt, .event-content {
  font-size: 14px;
  line-height: 20px;
}

/* The rule and its padding belong on each paragraph, not the container, as on
   the original site: consecutive paragraphs are then separated by their own
   4px of vertical padding while the dividing line stays continuous. With the
   padding on the container instead, multi-paragraph copy ran together. */
.rt p, .event-content p {
  border-left: 1px solid #eee;
  padding: 4px 0 4px 16px;
  margin-bottom: 0;
}

/* Links inside editable copy. These had no colour rule at all, so they fell
   back to the browser default blue; the original styles every link in the
   columns with this salmon, including on the tinted partner card. */
.rt a,
.event-content a,
.community-body a,
.shop-rt a,
.column-pinned_rt a {
  color: #cc6d7c;
  text-decoration: underline;
}

.event-link {
  color: #5d6ebe;
  font-size: 15px;
}

.event-link:hover {
  text-decoration: underline;
}

/* ── Community column ──────────────────────────────────── */

.column-pinned {
  background-color: #da7a8029;
  border-radius: 8px;
  padding: 24px;
  position: relative;
}

.column-pinned_title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 400;
}

.bookmark {
  width: 16px;
  position: absolute;
  top: -1px;
  right: 8%;
}

.community-post {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.community-date {
  color: #888;
  font-size: 15px;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.community-title {
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

.community-body {
  font-size: 14px;
  line-height: 20px;
}

.community-body p {
  margin-bottom: 8px;
}

.community-figure {
  margin: 0 0 16px;
  width: 100%;
}

.community-figure img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.column-image {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

/* Webflow rich text figure (from imported HTML) */
.w-richtext-figure-type-image {
  margin: 0 0 16px;
  width: 100%;
}

.w-richtext-figure-type-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  max-height: 400px;
}

/* ── Shop column ───────────────────────────────────────── */

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-link {
  color: #333;
  text-decoration: none;
  width: 100%;
}

.shop-link:hover .shop-title {
  text-decoration: underline;
}

.shop-image_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 16px;
  position: relative;
}

.shop-image_in-stock_wrapper {
  color: #222;
  background-color: #ddebd5;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  display: flex;
  position: absolute;
  bottom: 16px;
  right: 16px;
  box-shadow: 0 2px 24px #0003;
}

.shop-image_in-stock_wrapper-out {
  color: #222;
  background-color: #fcb5be;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  display: flex;
  position: absolute;
  bottom: 16px;
  right: 16px;
  box-shadow: 0 2px 24px #0003;
}

.shop-image_in-stock_wrapper-soon {
  background-color: #ede8f0;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  display: flex;
  position: absolute;
  bottom: 16px;
  right: 16px;
  box-shadow: 0 2px 24px #0003;
}

.shop-image_price_wrapper {
  color: #222;
  background-color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 16px;
  box-shadow: 0 2px 24px #0003;
}

.shop-title {
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

.shop-rt {
  font-size: 14px;
  line-height: 20px;
}

.shop-rt p {
  border-left: 1px solid #eee;
  padding: 4px 0 4px 16px;
  margin-bottom: 0;
}

/* ── Footer bar ────────────────────────────────────────── */

.psuedo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 56px;
  padding-left: 24px;
  padding-right: 24px;
  background-image: linear-gradient(90deg, #5d6ebe, #df7a7d);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  text-decoration: none;
}

.footer-title {
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
}

.click-here {
  opacity: 0.64;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 0.5px solid #fff;
  border-radius: 4px;
  margin-left: 12px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  user-select: none;
}

.click-here:hover {
  opacity: 1;
}

/* ── About page (/about) ───────────────────────────────── */

body.about-page-body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background-color: #fffaf4;
  color: #fff;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 14px;
}

/* Full-screen gradient card. On direct load it is simply present;
   the home-page sweep matches this gradient for a seamless hand-off. */
.about-card {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-image: linear-gradient(#5c6fbd, #de7a7d);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* The card is a fixed full-screen panel, so content taller than the viewport
     has to scroll here rather than on the body. See .about-grid for why the
     stack is centred with auto margins instead of justify-content. */
  overflow-y: auto;
  padding: 80px;
  transition: transform 0.45s cubic-bezier(0.55, 0, 0.78, 0);
  will-change: transform;
}

.about-card.sliding-down {
  transform: translateY(100%);
}

.about-grid {
  display: grid;
  /* Two tracks rather than a third given over to a span: the body column is
     pulled in from a straight two thirds (~80px at full width) to keep the
     measure readable, and the heading column absorbs what it gives up. The
     ratio is proportional so the pull-in scales with the viewport. */
  grid-template-columns: 1fr 1.58fr;
  /* Row gap unchanged; the column gap is wider so the heading column and the
     body column read as two distinct areas now the right one carries more. */
  gap: 40px 56px;
  place-items: start center;
  width: 100%;
  max-width: 1200px;
  /* Auto margins centre the grid when there is room and collapse to zero when
     there isn't, so tall content stays scrollable from the top rather than
     being clipped at both ends the way centring would. */
  margin: auto;
  transition: opacity 0.35s ease;
}

/* On close, the content fades out while the gradient card stays put, so the
   handoff to the homepage curtain is pure gradient (no flash of the page). */
.about-card.leaving .about-grid,
.about-card.leaving .about-partners {
  opacity: 0;
}

/* Partners & funders logo banner. The source logos are all different colours,
   so they are flattened to white here rather than by hand — brightness(0)
   crushes every colour to black and invert(1) lifts it to white, which keeps
   any transparent background intact. */
.about-partners {
  width: 100%;
  margin-top: 44px;
  transition: opacity 0.35s ease;
}

.about-partners_label {
  margin: 0 0 18px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

.about-partners_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-partners_list img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Portrait-format marks need extra height to read at the same optical weight. */
.about-partners_list img.is-tall {
  height: 52px;
}

.about-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Heading + mailing list occupy the narrow column; the rich text, logo banner
   and Close button occupy the wide one. Track sizing does the work, so this
   only needs to mark which column is which. */
.about-column--wide {
  grid-column: 2;
}

.about-heading {
  margin-top: 0;
  margin-bottom: 40px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
}

/* Cap the measure at 34em of body copy — about 87 characters a line. Cormorant
   is a narrow face (~0.39em per character), so this runs longer than the usual
   em-to-character rule of thumb suggests. Expressed against the 18px the
   paragraphs actually render at, since the container itself inherits the
   page's 14px. The logo banner and Close button are siblings and keep the
   column's full width. */
.about-rt {
  max-width: calc(34 * 18px);
}

.about-rt p {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.about-rt p:last-child {
  margin-bottom: 0;
}

.about-close {
  margin-top: 40px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
}

.about-close:hover {
  opacity: 1;
}

/* Mailing list form */
.field-label {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  display: block;
}

.mailing-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mailing-list_field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 4px;
}

.maiiling-list_input {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 4px 0;
  font-size: 16px;
  font-family: inherit;
  flex: 1;
  outline: none;
}

.maiiling-list_input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.mailing-list_submit {
  color: #fff;
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
  white-space: nowrap;
}

.mailing-list_submit:hover {
  opacity: 1;
}

/* Content fades in only when arriving via the home-page sweep. */
@keyframes aboutFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

html.from-sweep .reveal {
  opacity: 0;
  animation: aboutFadeIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

html.from-sweep .about-heading.reveal { animation-delay: 0.05s; }
html.from-sweep .mailing-list.reveal   { animation-delay: 0.15s; }
html.from-sweep .about-rt.reveal        { animation-delay: 0.12s; }
html.from-sweep .about-close.reveal     { animation-delay: 0.25s; }
html.from-sweep .about-partners.reveal  { animation-delay: 0.32s; }

/* ── Home-page sweep overlay ────────────────────────────── */

.sweep-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-image: linear-gradient(#5c6fbd, #de7a7d);
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  will-change: transform;
}

.sweep-overlay.active {
  transform: translateY(0);
}

/* Returning from About: the curtain is already covering at first paint
   (set via a class on <html> before the body renders), then it fades away
   to reveal the homepage content underneath — no flash, no content pop. */
html.returning .sweep-overlay {
  transform: translateY(0);
}

.sweep-overlay.dismissing {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Instantly park the curtain off-screen after the dissolve (no transition,
   so there is no visible movement) ready for a later forward sweep. */
.sweep-overlay.reset {
  transition: none;
  transform: translateY(100%);
  opacity: 1;
}

/* ── Mobile layout ─────────────────────────────────────── */

.mobile-home-section {
  display: none;
}

/* ── Responsive ────────────────────────────────────────── */

@media screen and (max-width: 991px) {
  .desktop-home-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .column-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .column-pinned {
    padding: 16px;
  }

  .about-card {
    padding: 40px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .about-column--wide {
    grid-column: auto;
  }

  .about-partners {
    margin-top: 36px;
  }

  .about-partners_list {
    gap: 28px;
  }

  .about-partners_list img {
    height: 26px;
  }

  .about-partners_list img.is-tall {
    height: 40px;
  }
}

@media screen and (max-width: 767px) {
  .desktop-home-section {
    display: none;
  }

  .psuedo-footer,
  .sweep-overlay {
    display: none;
  }

  body.body {
    overflow: hidden;
    background: transparent;
    height: 100vh;
    height: 100dvh;
  }

  .mobile-home-section {
    display: block;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
  }

  /* Animated gradient landing card (matches live site) */
  .mobile-card {
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #5d6ebe, #df7a7d, #5d6ebe, #df7a7d);
    background-size: 400% 400%;
    animation: gradientShift 8s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 1;
  }

  .mobile-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
  }

  @keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .mobile-content-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-logo-link {
    display: block;
    line-height: 0;
  }

  .mobile-logo {
    width: 48px;
    opacity: 0.64;
  }

  .mobile-nav-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: auto;
  }

  .mobile-navigation {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: 'La Belle Aurore', sans-serif;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 24px;
    padding: 0;
    text-decoration: none;
  }

  .mobile-navigation.last {
    margin-bottom: 0;
  }

  .mobile-desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-top: 52px;
    margin-bottom: auto;
  }

  .mobile-desc-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .mobile-banner_title {
    opacity: 0.64;
    color: #fff;
    text-align: center;
    max-width: 240px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
  }

  .mobile-banner_title.cursive {
    font-family: 'La Belle Aurore', sans-serif;
  }

  /* Content panels slide in over the landing */
  .mobile-panel {
    position: absolute;
    inset: 0;
    background: #fffaf4;
    color: #333;
    overflow-y: auto;
    padding: 24px 24px calc(80px + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
  }

  .mobile-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .mobile-back-btn {
    background: none;
    border: none;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #222;
    cursor: pointer;
    /* Vertical padding is invisible on a borderless text button but roughly
       doubles the tap target; the reduced margin keeps the original spacing. */
    padding: 6px 6px 6px 0;
    margin-bottom: 18px;
    display: block;
  }

  .mobile-panel-title {
    font-family: 'La Belle Aurore', sans-serif;
    font-weight: 400;
    font-size: 34px;
    margin-bottom: 32px;
  }

  /* Mobile about page. The card is a column flex box, so the stack is anchored
     to the bottom by the grid's auto top margin rather than by align-items. */
  .about-card {
    padding: 24px 24px 40px;
    align-items: center;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 0;
  }

  .about-heading {
    font-size: 26px;
    margin-bottom: 24px;
  }

  .about-partners {
    margin-top: 32px;
  }

  .about-partners_label {
    margin-bottom: 14px;
  }

  .about-partners_list {
    gap: 20px 24px;
  }

  .about-partners_list img {
    height: 22px;
  }

  .about-partners_list img.is-tall {
    height: 34px;
  }
}