/** Shopify CDN: Minification failed

Line 373:0 Expected "}" to go with "{"

**/
/* Blog article template (article--blog-post-26): editorial typography + layout helpers.
   Headings and copy structure still come from the rich text editor (H2, H3, blockquotes, etc.). */

/* Montserrat is already loaded by the theme font picker (settings.type_base_font_family /
   type_header_font_family) via snippets/font-face.liquid with font-display: swap, served from
   fonts.shopifycdn.com. The previous @import url('https://fonts.googleapis.com/css2?family=Montserrat...')
   here made that Google Fonts request render-blocking on every page, so it was removed. */

.article .article__body.rte.rte--indented-images {
  background: #fff;
  padding: 30px 40px;
  border-radius: 20px;
}
.article__body img {
    max-width: min(480px, 100%) !important;
    margin: 0 auto;
border-radius: 20px;
}
@media only screen and (min-width: 590px) {
  .article .article__pre-hero {
    padding-top: 0;
  }
}
.article__hero-header .section-header__title{
    color: #faebd7 !important;
  }
@media only screen and (min-width: 769px){
  .section-header__title{
    font-size: 68px;
  }
  .article__hero-inner{
    align-items: center !important;
    margin-bottom: 0;
  }
  .article__hero-inner .section-header{
    margin-bottom: 0;
  }
}

/* Body copy: Montserrat, fixed rhythm */
.article  {
  font-family: 'Montserrat', var(--typeBaseFallback, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--colorTextBody, #1c1d1d);
}

.article  > p,
.article  p {
  margin-top: 0;
  margin-bottom: 1.125rem;
}

/* Heading hierarchy — only RTE body (not comments / hero) */
.article .article__body.rte h2 {
  font-family: 'WoodlandBold', serif !important;
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
  font-weight: 700;
  line-height: 1.18;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  color: var(--colorTextBody, #1c1d1d);
}

.article .article__body.rte h2:first-of-type {
  margin-top: 0;
}

.article .article__body-lead-meta {
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--colorTextBody, #1c1d1d);
  opacity: 0.88;
  text-align: center;
}

.article .article__body-lead-meta-date,
.article .article__body-lead-meta-by {
  display: inline;
}

.article .article__body.rte h3 {
  font-family: 'WoodlandBold', serif !important;
  font-size: clamp(1.45rem, 1.25rem + 0.65vw, 1.75rem);
  font-weight: 700;
  line-height: 1.22;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--colorTextBody, #1c1d1d);
}

.article .article__body.rte h4 {
  font-family: 'WoodlandBold', serif !important;
  font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.28;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--colorTextBody, #1c1d1d);
}

.article .article__body.rte h5 {
  font-family: 'Montserrat', var(--typeBaseFallback, sans-serif);
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin-top: 1.35rem;
  margin-bottom: 0.45rem;
  color: var(--colorTextBody, #1c1d1d);
}

.article .article__body.rte h6 {
  font-family: 'Montserrat', var(--typeBaseFallback, sans-serif);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  color: var(--colorTextBody, #1c1d1d);
  opacity: 0.92;
}

.article  hr {
  border: none;
  border-top: 1px solid var(--colorBorder, rgba(28, 29, 29, 0.15));
  margin: 2rem 0;
}

/* Links in article body → brand / button color */
.article  a:not(.btn) {
  color: var(--colorBtnPrimary, var(--colorLink, #1c1d1d));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.article  a:not(.btn):hover {
  opacity: 0.88;
}

/* Images: cancel theme full-bleed; optional manual classes on <img> in the RTE HTML 
.article .article__body.rte--indented-images {
  overflow-x: hidden;
}

.article .article__body.rte--indented-images img:not(.rte__no-indent):not(figure img):not(.article__brand-logo):not(.img-h):not(.img-v),
.article .article__body.rte--indented-images img[style*='float: none']:not(.rte__no-indent):not(figure img):not(.article__brand-logo):not(.img-h):not(.img-v) {
  display: block;
  margin: 1.25rem 0 !important;
  max-width: 100% !important;
  width: auto;
  height: auto;
  box-sizing: border-box;
}
 */
@media only screen and (min-width: 590px) {
  /*
  .article .article__body.rte--indented-images img:not(.rte__no-indent):not(figure img):not(.article__brand-logo):not(.img-h):not(.img-v),
  .article .article__body.rte--indented-images img[style*='float: none']:not(.rte__no-indent):not(figure img):not(.article__brand-logo):not(.img-h):not(.img-v) {
    margin: 1.25rem 0 !important;
    max-width: 100% !important;
  }
}
*/
/* Manual: horizontal = full width of the article column 
.article .article__body.rte--indented-images img.img-h:not(.article__brand-logo) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.25rem 0 !important;
  border-radius: 20px;
  box-sizing: border-box;
}*/

/* Manual: vertical = intrinsic / HTML width & height, centered (never wider than column)
   Do NOT use width:auto !important — it overrides HTML width="" and huge files fill the column.
   !important on max-width/margin beats theme .rte--indented-images img:not([style]) bleed. 
.article .article__body.rte--indented-images img.img-v:not(.article__brand-logo) {
  display: block !important;
  max-width: 100% !important;
  margin: 1.25rem auto !important;
  border-radius: 20px;
  box-sizing: border-box;
  height: auto;
}*/
/*
.article .article__body.rte--indented-images figure:has(img.img-h) {
  max-width: 100% !important;
  margin: 1.25rem 0 !important;
}

.article .article__body.rte--indented-images figure:has(img.img-v) {
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto !important;
}

.article .article__body.rte--indented-images figure:has(img.img-v) img {
  max-width: 100%;
  height: auto;
}

.article .article__body.rte--indented-images figure {
  margin: 1.25rem 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.article .article__body.rte--indented-images figure img:not(.img-h):not(.img-v) {
  margin: 0 !important;
  max-width: 100%;
  width: 100%;
  height: auto;
}*/

/*.article .article__body.rte--indented-images p[style] img:not(.img-h):not(.img-v) {
  margin: 1.25rem 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
  .article .article__body.rte--indented-images figure img.img-h {
  width: 100% !important;
}

.article__body img:not(.article__brand-logo):not(.img-h):not(.img-v) {
  border-radius: 20px;
  margin: 40px 20px;
}
*/
.article  .rte__video-wrapper {
  display: block;
  max-width: 100%;
  margin: 1.25rem 0;
  padding: 20px;
  box-sizing: border-box;
}

.article  figcaption {
  font-size: 0.875rem;
  line-height: 1.45;
  margin-top: 0.5rem;
  color: var(--colorTextBody, #1c1d1d);
  opacity: 0.7;
  font-style: italic;
}

/* Pull quotes / callouts */
.article  blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--colorBtnPrimary, #a26b25);
  background: var(--colorBodyAlpha05, rgba(28, 29, 29, 0.05));
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
}

.article  blockquote p:last-child {
  margin-bottom: 0;
}

.article  ul,
.article  ol {
  margin: 0 0 1.125rem 1.25rem;
  padding: 0;
}

.article  li {
  margin-bottom: 0.35rem;
}

.article .article__meta-row a {
  color: var(--colorBtnPrimary, var(--colorLink));
  text-decoration: none;
}

.article .article__meta-row a:hover {
  text-decoration: underline;
}

.article__title {
  font-family: WoodlandBold,serif;
  font-size: 21px;
  line-height: 22px;
}

@media (max-width: 768px) {
  .article .article__hero--extra_small {
    min-height: 320px;
  }
  .article .section-header__title {
    font-size: 29px;
  }
  .article .article__hero-inner{
    align-items: center;
  }
  .page-width.page-width--narrow.article__pre-hero {
    padding: 0;
  }
  .article .article__body.rte--indented-images p[style] img {
    padding: 0;
    border-radius: 30px;
  }
  .article__body img:not(.article__brand-logo):not(.img-h):not(.img-v) {
    border-radius: 20px;
    margin: 30px 0;
  }
}

@media only screen and (max-width: 589px) {
  .article  {
    font-size: 0.9375rem;
  }

  .article .article__body.rte.rte--indented-images {
    padding: 20px 18px;
  }
}

/* =========================================================================
   Performance — scroll animations (AOS) & off-screen rendering
   ========================================================================= */

/* AOS (animate-on-scroll) is disabled on small viewports and for users who
   prefer reduced motion (see assets/theme.js → AOS.init({ disable: ... })).
   The base theme leaves every <image-element> at opacity:0 until AOS adds the
   .aos-animate class, and other elements get their hidden state from [data-aos]
   rules — so when AOS is off we force everything back to its visible state.
   Visuals just appear without the fade/slide, which is the desired behaviour
   on phones and with reduced-motion. */
@media (max-width: 589px), (prefers-reduced-motion: reduce) {
  .image-element { opacity: 1 !important; animation: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* Skip layout/paint of the home page's below-the-fold sections until they're
   near the viewport. Targets the dynamic (JSON template) section wrappers that
   `main#MainContent` renders; the hero-video / slideshow at the top are left
   out (nth-child(n+6) starts well below the fold) so the LCP isn't touched.
   `contain-intrinsic-size: auto <fallback>` lets the browser remember each
   section's real height after first render, which keeps scrolling stable. */
body.template-index #MainContent > [id^="shopify-section-template--"]:nth-child(n+6) {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* =========================================================================
   Accessibility — colour contrast on the salmon (#e38b89) background
   ========================================================================= */

/* The announcement bar text (#f9f4e2 cream on #e38b89 salmon) was only 2.29:1;
   WCAG AA needs 4.5:1. Use the theme's body-text brown #481706 instead → ~5.9:1,
   keeping the salmon brand colour. css-variables.liquid sets --colorAnnouncementText
   in a <style> block rendered after this file, so !important is required. */
:root { --colorAnnouncementText: #481706 !important; }

/* The scrolling-text marquee gets its colours from per-section custom_css
   (background-color/color: #e38b89 / #f9f4e2) — not from the var above — so it
   needs its own override. #481706 on #e38b89 ≈ 5.9:1. */
.scrolling-text__inner { color: #481706 !important; }