/* Static replica overrides — restore visibility for elements that the
 * Squarespace runtime would reveal at runtime (scroll animations, lazy
 * image loaders, list block hydrators, lightbox helpers).
 */

/* Squarespace's auto-hide-on-scroll header. runtime.js sets the inline
 * transform on scroll-down/up; here we just establish the fixed positioning
 * and the transition timing.
 */
header.header,
header#header,
.header.header--theme {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 20;
  transition: background 0.14s ease-in-out 0.14s,
              transform 0.14s ease-in-out;
  will-change: transform;
}

/* Push first page-section down so the fixed header doesn't hide its
 * heading. Only the very first section needs this — subsequent sections
 * scroll naturally below. The header is ~150-180px depending on viewport;
 * use clamp() for fluid responsiveness.
 */
body { padding-top: 0 !important; }
section.page-section:first-of-type,
[data-test="page-section"]:first-of-type,
main > section:first-child,
main > article:first-child > section:first-child {
  scroll-margin-top: clamp(120px, 12vw, 180px);
}

/* ============================================================
 * Mobile menu: open the slide-in nav on burger click
 * Squarespace's CSS only enables the visible state inside a media query
 * (touch + max 1024px, OR max 799px). Without JS that flips a runtime
 * class, our manual body.header--menu-open toggle needs an explicit rule
 * that fires regardless of viewport.
 * ============================================================ */
body.header--menu-open .header-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  background: #f6f5ea !important;
  /* Lock to viewport even if a parent creates a containing block. */
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  overflow-y: auto !important;
}
body.header--menu-open .header-menu .header-menu-nav-list,
body.header--menu-open .header-menu .header-menu-actions,
body.header--menu-open .header-menu .header-menu-cta {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Center the nav stack. The Squarespace markup wraps the items in
 * .header-menu-nav > .header-menu-nav-list > .header-menu-nav-folder >
 * .header-menu-nav-folder-content > .header-menu-nav-wrapper > items.
 * With the outer .header-menu set to flex-direction: column +
 * align-items: center, every intermediate wrapper collapses to its
 * content width unless we force them to fill the viewport. We also lift
 * the nav above the .header-menu-bg layer so taps reach the links. */
body.header--menu-open .header-menu-nav,
body.header--menu-open .header-menu-nav-list,
body.header--menu-open .header-menu-nav-folder,
body.header--menu-open .header-menu-nav-folder-content,
body.header--menu-open .header-menu-nav-wrapper {
  width: 100% !important;
  max-width: 100vw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 3.2vw, 22px) !important;
  position: relative !important;
  z-index: 2 !important;
}
body.header--menu-open .header-menu-bg {
  z-index: 0 !important;
}
body.header--menu-open .header-menu-nav-item {
  width: auto !important;
  text-align: center !important;
}
body.header--menu-open .header-menu-nav-item a {
  font-family: 'Cousine', monospace !important;
  font-size: clamp(1.6rem, 5.4vw, 2.2rem) !important;
  line-height: 1.4 !important;
  color: #2d2a1f !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 4px 8px !important;
}
/* Close-icon: when menu is open, hide the original burger lines and draw
 * a clean X with two pseudo-elements on the button. Pseudo-elements are
 * easier to position correctly than fighting Squarespace's bun transforms. */
body.header--menu-open .header-burger-btn .burger-box .burger-inner > * {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.header--menu-open .header-burger-btn {
  position: relative !important;
}
body.header--menu-open .header-burger-btn::before,
body.header--menu-open .header-burger-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 26px !important;
  height: 2px !important;
  background-color: #2d2a1f !important;
  border-radius: 2px !important;
  pointer-events: none !important;
}
body.header--menu-open .header-burger-btn::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
body.header--menu-open .header-burger-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
/* Header stays visible above the menu overlay so logo + X remain tappable.
 * The burger and logo live inside .header-announcement-bar-wrapper which
 * Squarespace ships at z-index:2 — below the .header-menu (z:30). Bump the
 * wrapper's stacking context above the menu when open so the X is hittable. */
body.header--menu-open header.header,
body.header--menu-open .header.header--theme {
  background: transparent !important;
  transform: none !important;
  will-change: auto !important;
  z-index: 50 !important;
}
body.header--menu-open .header-announcement-bar-wrapper {
  z-index: 60 !important;
  position: relative !important;
}
body.header--menu-open .header-burger,
body.header--menu-open .header-burger-btn,
body.header--menu-open .header-title {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
/* Logo image stays visible with default ink color. */
body.header--menu-open .header-title-text a,
body.header--menu-open .header-title-logo img {
  color: #2d2a1f !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Belt-and-suspenders: on small viewports, force-hide the desktop nav and
 * show the mobile burger. Squarespace's media query already does this
 * but we override aggressively in case some inline style or higher-
 * specificity rule fights it. */
@media only screen and (max-width: 1024px) {
  .header-display-desktop {
    display: none !important;
  }
  .header-display-mobile {
    display: flex !important;
  }
  .header-burger {
    display: flex !important;
  }
  .header-nav,
  .header-actions {
    display: none !important;
  }
}
/* For non-hero first sections (no background image set), pad them down so
 * heading clears the fixed header. The header is ~80px mobile, ~160px
 * desktop. Scope to MAIN only — otherwise this rule also matches the
 * first <section> inside <footer> and bloats the footer top padding. */
main section.page-section:first-of-type:not(.has-background) {
  padding-top: clamp(96px, 11vw, 175px) !important;
}
main section.page-section:first-of-type:not(.has-background) > .content-wrapper {
  padding-top: 0 !important;
}
/* Reset any earlier first-of-type rule that may have already padded the
 * footer's section before the more specific rule above takes effect. */
footer section.page-section:first-of-type {
  padding-top: 0 !important;
}
/* The Squarespace footer often has an empty section before the contact
 * info section that just exists to host a section-background image.
 * On mobile this empty section can render as ~300-800px of dead cream
 * space. Collapse it. */
footer section.page-section:not(:has(.fluid-engine .fe-block)),
footer section.page-section:empty,
footer .page-section[data-section-id]:not(:has(.fluid-engine)) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

/* Footer styling — original uses Cousine monospace for consistency, and is
 * constrained in width on desktop so it doesn't sprawl edge-to-edge. */
footer.sections,
section[data-section-id="footer"],
section.footer-sections,
[data-fluid-engine-section] .footer,
.Footer {
  font-family: 'Cousine', monospace;
}
footer.sections p,
footer.sections a,
footer.sections span,
[data-section-id="footer"] p,
[data-section-id="footer"] a,
[data-section-id="footer"] span,
footer p,
footer a,
footer span {
  font-family: 'Cousine', monospace !important;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* Constrain footer content width — the original Squarespace footer
 * isn't full-bleed; it caps at ~1100px and centers. Squarespace marks the
 * footer section as `content-width--wide` which lets the fluid-engine
 * sprawl, so target it directly. */
footer .fluid-engine,
footer .content-wrapper > .fluid-engine,
footer.sections .fluid-engine {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile footer: stack columns so long values (email) don't overflow. */
@media only screen and (max-width: 768px) {
  footer .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 32px 24px 36px !important;
  }
  footer .fluid-engine [data-fluid-engine-grid-area],
  footer .fluid-engine .fe-block {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }
  footer p, footer a, footer span {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

/* Prevent the gallery-grid (Featured Properties) from overflowing the
 * viewport. The wrapper had 4vw padding plus minmax(0,1fr) columns but the
 * intrinsic content widths still pushed it past 100vw. Lock to viewport. */
html, body { overflow-x: hidden; }
.gallery-grid--layout-grid .gallery-grid-wrapper,
.gallery-grid--layout-grid {
  max-width: 100%;
  box-sizing: border-box;
}

/* Empty section-background placeholders should not collapse to nothing —
 * leave their natural height alone but ensure they don't trap content. */
.section-background:empty { display: block; }

/* Sections with a background image — Squarespace's runtime makes the
 * section-border transparent so the image (inside section-background) shows
 * through. Without JS the section-theme color (often white) covers the
 * image. Override: when the section has a background, make the border
 * transparent.
 */
.has-background > .section-border {
  background-color: transparent !important;
}

/* Section background images should fill the section. The img inside
 * .section-background is rendered as a block image; force it to cover. */
.section-background > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
}
.section-background {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden;
}
.section-background-overlay {
  position: absolute !important;
  inset: 0 !important;
}

/* Gallery grid items — show all immediately, no scroll animations */
.gallery-grid-item-wrapper,
.gallery-strips-item-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

/* Gallery grid columns — Squarespace JS normally sets grid-template-columns
 * inline based on the data-columns attribute. We restore that statically.
 * The original uses a generous gap (data-gutter="114" → ~88px computed) so
 * items appear smaller and breathier; replicate. */
.gallery-grid--layout-grid .gallery-grid-wrapper {
  display: grid;
  gap: clamp(32px, 6vw, 88px);
  padding: 0 4vw;
}
.gallery-grid--layout-grid[data-columns="1"] .gallery-grid-wrapper { grid-template-columns: minmax(0, 1fr); }
.gallery-grid--layout-grid[data-columns="2"] .gallery-grid-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-grid--layout-grid[data-columns="3"] .gallery-grid-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid--layout-grid[data-columns="4"] .gallery-grid-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-grid--layout-grid[data-columns="5"] .gallery-grid-wrapper { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .gallery-grid--layout-grid[data-columns] .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* Item wrapper aspect ratio defaults handled by inline padding-bottom from
 * Squarespace, but image needs to fill the wrapper. */
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item-wrapper {
  position: relative;
  width: 100%;
}
.gallery-grid-item img,
.gallery-grid-image-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gallery-grid-item img {
  object-fit: cover;
}

/* Caption */
.gallery-grid-item-caption-wrapper,
.gallery-caption {
  margin-top: 12px;
  font-family: 'Cousine', monospace;
  font-size: 0.85rem;
}

[data-animation="scale-up"] .gallery-grid-item-wrapper,
[data-animation="scale-up"] .gallery-strips-item-wrapper,
[data-animation] .gallery-grid-item-wrapper,
[data-animation] .gallery-strips-item-wrapper {
  opacity: 1 !important;
  transform: matrix(1, 0, 0, 1, 0, 0) !important;
  animation: none !important;
}

/* Captions hidden by default — show them */
.gallery-grid-item-caption {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Lazy-loaded images — show even if data-load=false */
img[data-load="false"],
img[data-loader="sqs"]:not([data-loaded]),
.sqs-image:not([data-loaded]),
[data-sqsp-image-block-image]:not([data-loaded]) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide lightbox-only duplicates that have inline display:none */
img[elementtiming="nbf-gallery-lightbox-item"] {
  display: none !important;
}

/* ============================================================
 * Article detail body (rendered from markdown)
 * ============================================================ */
.ar-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 4vw 6vw;
  font-family: 'Cousine', monospace;
  color: #1a1a1a;
}
.ar-article__header {
  margin-bottom: 32px;
}
.ar-article__byline {
  font-family: 'Cousine', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin: 0 0 24px;
  text-transform: uppercase;
}
.ar-article__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.005em;
}
.ar-article__subtitle {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #fff;
}
.ar-article__date {
  font-family: 'Cousine', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 8px;
  color: #fff;
}
.ar-article__body {
  font-size: 1rem;
  line-height: 1.7;
  color: #fff;
}
.ar-article__body h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  margin: 48px 0 16px;
}
.ar-article__body h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 32px 0 12px;
}
.ar-article__body p {
  margin: 0 0 16px;
}
.ar-article__body strong { font-weight: 700; }
.ar-article__body em { font-style: italic; }
.ar-article__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ar-article__body .article-image {
  margin: 32px 0;
}
.ar-article__body .article-image img {
  width: 100%;
  height: auto;
  display: block;
}
.ar-article__body .article-rule {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.3;
  margin: 32px 0;
}
@media (max-width: 768px) {
  .ar-article {
    padding: 8vw 6vw;
  }
}

/* ============================================================
 * Featured Buildings carousel (Squarespace UserItemsListCarousel)
 * ============================================================ */
.ar-carousel {
  position: relative;
  margin: 32px 0;
  padding: 0;
}
.ar-carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* ~15% peek on each side so adjacent slides show partially. */
  padding: 0 12vw;
  scroll-padding-left: 12vw;
  scroll-padding-right: 12vw;
}
.ar-carousel__track::-webkit-scrollbar { display: none; }
.ar-carousel__slide {
  flex: 0 0 calc((100vw - 24vw - 48px) / 3);
  max-width: calc((100vw - 24vw - 48px) / 3);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ar-carousel__slide-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e8e6df;
}
.ar-carousel__slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ar-carousel__slide-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
}
.ar-carousel__btn {
  position: absolute;
  top: calc(50% - 32px);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease;
  backdrop-filter: blur(2px);
}
.ar-carousel__btn:hover { background: rgba(0, 0, 0, 0.55); }
.ar-carousel__btn:disabled { opacity: 0.3; cursor: default; }
.ar-carousel__btn--prev { left: 4vw; }
.ar-carousel__btn--next { right: 4vw; }
@media (max-width: 768px) {
  .ar-carousel__track { padding: 0 8vw; gap: 16px; }
  .ar-carousel__slide {
    flex: 0 0 calc(100vw - 16vw);
    max-width: calc(100vw - 16vw);
  }
  .ar-carousel__btn--prev { left: 2vw; }
  .ar-carousel__btn--next { right: 2vw; }
}

/* ============================================================
 * Accordion (Resources page) — collapsed by default; runtime.js manages
 * the .accordion-item__dropdown wrapper's display + max-height.
 * ============================================================ */
.accordion-item__click-target {
  cursor: pointer;
}
.accordion-icon-container {
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.accordion-item.is-open .accordion-icon-container {
  transform: rotate(45deg);
}

/* ============================================================
 * Contact form
 * ============================================================ */
.ar-contact-form {
  display: grid;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 0;
  font-family: 'Cousine', monospace;
}
.ar-form-name-group {
  display: grid;
  gap: 8px;
}
.ar-form-name-group__label {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.ar-form-row { display: grid; gap: 20px; }
.ar-form-row--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .ar-form-row--two { grid-template-columns: 1fr; }
}
.ar-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ar-form-label {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.ar-form-req {
  opacity: 0.6;
  font-size: 0.75rem;
}
.ar-form-field input,
.ar-form-field textarea {
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: #ffffff;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  width: 100%;
  outline: none;
  transition: border-color 200ms ease;
  box-sizing: border-box;
}
.ar-form-field input:focus,
.ar-form-field textarea:focus {
  border-color: #605B27;
}
.ar-form-field textarea {
  resize: vertical;
  min-height: 140px;
}
.ar-form-submit {
  margin-top: 8px;
  padding: 14px 32px;
  border: 1px solid currentColor;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  align-self: start;
  transition: background 200ms ease, color 200ms ease;
}
.ar-form-submit:hover {
  background: currentColor;
}
.ar-form-submit:hover {
  color: #f6f5ea;
}

/* Make gallery-grid clickthrough links cover the whole image */
.gallery-grid-image-link,
.gallery-grid-lightbox-link {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 2;
  cursor: pointer;
}

/* Squarespace's "shape" block (rectangle, used for the translucent card on
 * /resources/) — runtime sets the absolute fill via inline styles, but
 * without JS the .sqs-shape collapses to 0x0. Stretch it inside its
 * data-stretched-to-fill container.
 */
.sqs-shape-block-container[data-stretched-to-fill] .sqs-shape,
.sqs-shape-block-container.hidden-stretch-block .sqs-shape {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* List block (UserItemsListSimple / UserItemsListCarousel) statically
 * rendered fallback. The Squarespace runtime would render slides; we
 * replace the inner content with a static grid styled below.
 */
.static-list-block {
  display: grid;
  gap: 32px;
  margin: 32px 0;
}
.static-list-block.cols-2 { grid-template-columns: repeat(2, 1fr); }
.static-list-block.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .static-list-block { grid-template-columns: 1fr !important; }
}

.static-list-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.static-list-item__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e8e6df;
}
.static-list-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.static-list-item__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.6rem;
  margin: 0;
  font-weight: 400;
}
.static-list-item__desc {
  font-family: 'Cousine', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  color: inherit;
}
.static-list-item__desc p { margin: 0; }
.static-list-item__btn {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 24px;
  border: 1px solid currentColor;
  font-family: 'Cousine', monospace;
  font-size: 0.85rem;
  text-decoration: none;
  color: inherit;
  align-self: flex-start;
  background: transparent;
  cursor: pointer;
}
.static-list-item__btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Carousel-style: horizontal scroll on mobile, grid on desktop */
.static-list-block--carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* Footer link color reset */
footer a, .sqs-footer a {
  color: inherit;
}

/* Squarespace's runtime computes section min-height from
 * customSectionHeight at runtime. Without JS, section-height--small defaults
 * to 33vh which is too tall for short content. Collapse min-height so
 * headings sit closer to the section above.
 */
section.page-section.section-height--small {
  min-height: auto !important;
}
section.page-section.section-height--small > .content-wrapper {
  padding-top: 2vmax !important;
  padding-bottom: 2vmax !important;
}

/* Tagline blocks (e.g. "Helping Clients Find Thoughtfully Designed Homes...")
 * should center their text. Squarespace applies text-align:center via inline
 * styles which our build pipeline preserves, but be defensive in case of
 * stripped wrapper styles.
 */
.sqs-html-content p[style*="text-align: center"],
.sqs-html-content h1[style*="text-align: center"],
.sqs-html-content h2[style*="text-align: center"],
.sqs-html-content h3[style*="text-align: center"] {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* Article detail body: ensure full content shows even if the entry has
 * .entry { opacity: 0; position: absolute; } from the side-by-side blog
 * stylesheet (shared with the index list).
 */
.blog-item article.hentry,
article.hentry.blog-item-wrapper,
.blog-item-wrapper {
  position: relative !important;
  opacity: 1 !important;
  display: block !important;
}

/* Blog list — articles are positioned absolutely and faded in by JS. Make
 * them flow normally and visible without the runtime. */
.blog-side-by-side .entry,
.blog-list .entry,
article.hentry {
  position: relative !important;
  opacity: 1 !important;
}
.blog-side-by-side-wrapper {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
.blog-side-by-side .blog-image-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
}
.blog-side-by-side .blog-image-wrapper .image-wrapper {
  width: 100%;
  display: block;
  padding-bottom: 75%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.blog-side-by-side .blog-image-wrapper img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.blog-side-by-side .blog-basic-grid--text-wrapper,
.blog-side-by-side .blog-content-wrapper {
  padding-top: 16px;
}
.blog-side-by-side .blog-title,
.blog-side-by-side .entry-title,
.blog-side-by-side h1.entry-title,
.blog-side-by-side h1,
.blog-side-by-side h2.entry-title,
.blog-basic-grid .entry-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 20px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
}
.blog-side-by-side .blog-more-link {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  font-family: 'Cousine', monospace;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .blog-side-by-side article.hentry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
  }
}

/* Force any element marked as scroll-animated to be visible */
[data-animation-role]:not([data-active]),
.sqs-block-content [data-animation-role]:not([data-active]) {
  opacity: 1 !important;
  transform: none !important;
}