/* Static-backup fixes: Squarespace's own minified theme CSS relies on JS
   (BlogImageLoader, masonry layout controller) that never runs in this
   offline copy. These overrides restore layout that depended on it. */
.blog-basic-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 100px 50px !important;
}
@media screen and (max-width: 900px) {
  .blog-basic-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}
.blog-basic-grid--container {
  position: relative !important;
}
/* Knowledge Hub "Load More": each hidden batch is wrapped in a plain <div>
   (knowledge_hub_loadmore.py) so it can be revealed as one unit. That div is
   itself a direct child of the grid, so without this it becomes a single
   grid cell and its cards stack in one column instead of joining the
   3-column layout. display:contents makes the wrapper transparent to grid
   layout once revealed, while :not([hidden]) keeps the [hidden] attribute's
   own display:none in charge while a batch is still hidden. */
.kh-more-batch:not([hidden]) {
  display: contents;
}

/* Self-scaling headline text (Squarespace's "sqsrte-scaled-text" feature):
   the JS that measures the container and computes the right font-size never
   runs offline, so it's left at an absurd default (~200px) that overflows
   invisibly. Replace with a viewport-responsive size instead. */
.sqsrte-scaled-text-container .sqsrte-scaled-text {
  font-size: clamp(2rem, 6vw, 4.5rem) !important;
  line-height: 1.15 !important;
}

/* Contact panel: static replacement for the non-functional Squarespace form
   (its fields only ever rendered via a live JS/API call). ".offline-contact-card"
   is a floating white card for sections with a colored (sage green)
   background; ".offline-contact-row" is the same content with no box, for
   sections whose background is already white/cream, where a white-on-white
   card would just look like a redundant outline. */
.offline-contact-card,
.offline-contact-row {
  max-width: 380px;
}
.offline-contact-card {
  background: #faf8f2;
  border-radius: 14px;
  padding: 3rem 2.75rem;
  box-shadow: 0 18px 40px rgba(30, 30, 30, 0.16);
}
.offline-contact-card h3,
.offline-contact-row h3 {
  font-family: "Playfair Display SC", serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0 0 1.5rem;
}
.offline-contact-card p,
.offline-contact-row p {
  font-family: "Open Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1e1e1e;
  margin: 0 0 0.9rem;
}
.offline-contact-card p:last-child,
.offline-contact-row p:last-child {
  margin-bottom: 0;
}
.offline-contact-card .offline-contact-label,
.offline-contact-row .offline-contact-label {
  font-weight: 600;
}
.offline-contact-card a,
.offline-contact-row a {
  color: #1e1e1e;
  text-decoration: none;
  border-bottom: 1px solid #e2b395;
  transition: border-color 0.2s ease;
}
.offline-contact-card a:hover,
.offline-contact-row a:hover {
  border-bottom-color: #1e1e1e;
}
@media screen and (max-width: 767px) {
  .offline-contact-card,
  .offline-contact-row {
    max-width: 100%;
  }
  .offline-contact-card {
    padding: 2.25rem 1.75rem;
  }
}

/* Squarespace pill/button elements site-wide: their padding rule lives in a
   per-component stylesheet that was never fetched (only color/font-size/
   border-radius made it into the downloaded CSS), so buttons render with
   partial or no padding -- text runs edge-to-edge or touches the pill top
   and bottom. Covers the Button Block component, List Section item buttons,
   and List Section "view more" buttons alike. */
.sqs-block-button-element {
  padding: 0.75em 1.5em !important;
  display: inline-block !important;
}

/* "Stretched" button variant (buttons set to fill their block's full height):
   Squarespace's own rule -- .fluid-engine [data-definition-name=
   "website.components.button"] .sqs-stretched .sqs-block-button-element --
   forces height:100% and zero vertical padding so the button fills whatever
   height its Fluid Engine grid cell was authored with. That's normally fine
   because the live site's editor keeps that cell sized to the button's
   content; here it renders as an oversized oval because nothing recalculates
   the cell height. Match that selector's specificity so this wins and give
   stretched buttons the same compact, well-proportioned pill as every other
   button instead. */
.fluid-engine .sqs-block-button-container.sqs-stretched .sqs-block-button-element {
  height: auto !important;
  flex: none !important;
  padding: 0.75em 1.5em !important;
}
.fluid-engine .sqs-block-button-container.sqs-stretched {
  height: auto !important;
  flex: none !important;
}

/* Native video embed (Events page): Squarespace streams these from
   video.squarespace-cdn.com and builds the actual <video> element via JS at
   runtime -- no video file was ever part of the original scrape (video
   wasn't in the crawled asset types), so there's nothing to serve locally.
   A static placeholder image (offline-video-placeholder.py) fills the same
   16:9 slot instead of leaving a blank gap. */
.native-video-player {
  overflow: hidden;
}
.native-video-player img.offline-video-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}