/* ============================================================
   MOSS & FOG — CUSTOM STYLES
   ============================================================ */

/* === 1. TOP POSTS SIDEBAR WIDGET FIXES === */

/* Fix: Remove 50% opacity that washed out text */
.widgets-list-layout span { opacity: 1 !important; }

/* Fix: Flexbox alignment for thumbnail + text */
.widgets-list-layout a.bump-view {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  position: static !important;
}
.widgets-list-layout .widgets-list-layout-blavatar {
  float: none !important;
  flex-shrink: 0 !important;
  width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 3px;
}
.widgets-list-layout-links {
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  color: #1a1a1a !important;
  font-size: 13px;
  line-height: 1.4;
}
/* Remove the dark gradient title overlay on hover */
.widget_top-posts a.bump-view::after { display: none !important; }
.widgets-list-layout li { margin-bottom: 14px !important; }
.widgets-list-layout a.bump-view:hover .widgets-list-layout-links { color: #555 !important; }


/* === 2. IN MOTION SECTION — HERO TITLES === */
/* Fix: titles over full-bleed images must be white */
.mf-im h2,
.mf-im .heading,
.mf-im a h2,
.mf-im a .heading {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}


/* === 3. EXCERPT TEXT — READABLE, MEDIUM WEIGHT === */
section.blog .excerpt,
section.blog .post-excerpt,
.news-block .excerpt,
.highlights-block .excerpt,
.posts-large .excerpt {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2e2e2e !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}


/* === 4. POST META (dates, categories) — subtle but legible === */
.post-meta,
article .meta,
.meta-wrap {
  font-size: 11px !important;
  color: #999 !important;
  letter-spacing: 0.04em !important;
}
.post-meta a,
article .meta a {
  color: #888 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.post-meta a:hover,
article .meta a:hover { color: #333 !important; }


/* === 5. SECTION HEADINGS — clean, editorial === */
/* Fix the -40px negative margin that caused section label bleed */
.block-head {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #ebebeb !important;
}
.block-head h4.title,
.block-head h4.title a,
.block-head h2,
.block-head .title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #111 !important;
  text-decoration: none !important;
}


/* === 6. SECTION BREATHING ROOM === */
section.cf.block.blog,
section.cf.block.news-block,
section.cf.block.highlights-block {
  padding-bottom: 44px !important;
}

/* === 7. WP-BLOCK-GROUP top padding === */
.wp-block-group { padding-top: 4px !important; }

/* === 8. BOLD SLIDER / COMMON SLIDER — hero overlay titles must be white === */
.bold-slider .heading h2,
.bold-slider h2.heading,
.common-slider .heading h2,
.common-slider h2.heading,
.bold-slider .heading,
.bold-slider h2 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* === 9. HEADER LOGO — constrain to appropriate compact size === */
.main-head .title .logo-image,
.main-head .title a img {
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
}

/* === 10. ARTICLE PAGE — hero title must be white over full-bleed image === */
h1.is-title,
h1.post-title,
h1.is-title.post-title {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure .post-meta color rule doesn't bleed into heading children */
.post-meta h1,
.post-meta h2,
.post-meta h3,
.post-meta .is-title,
article .meta h1,
article .meta h2 {
  color: #fff !important;
}

/* === 11. FONT OVERRIDE — Replace Lato with Montserrat === */
:root {
  --body-font: 'Montserrat', Arial, sans-serif;
}

/* === MOSS & FOG MEDIA PAGE — FULL WIDTH === */
.page-id-153183 .col-8.main-content {
  width: 100% !important;
  max-width: 100% !important;
}

.page-id-153183 .the-post {
  max-width: 1200px;
	  width: 100% !important;
  margin: 0 auto;
}

/* Hide the page title since the hero has its own */
.page-id-153183 .page-title {
  display: none;
}

/* Ensure Gutenberg columns don't break on desktop */
.page-id-153183 .wp-block-columns {
  flex-wrap: nowrap !important;
}

/* Mobile: stack columns vertically */
@media (max-width: 768px) {
  .page-id-153183 .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .page-id-153183 .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* === FIX: Override Gutenberg inner block width constraint === */
.page-id-153183 .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	  max-width: 100% !important;
}

.page-id-153183 .wp-block-group__inner-container {
	  max-width: 100% !important;
}

.page-id-153183 .entry-content > * {
	  max-width: 100% !important;
}

/* Let the content breathe with nice padding */
.page-id-153183 .the-post .post-content {
	  padding: 0 20px;
}
}
}
}
}

/* === 13. EMPTY CUSTOM HTML SIDEBAR WIDGET — hide blank boxed widget === */
.sidebar .widget_custom_html:has(.textwidget:empty) {
    display: none !important;
}

/* === 14. COMMENT AREA — reduce excess whitespace before footer === */
.comments-area,
#respond {
    margin-top: 24px !important;
    padding-top: 0 !important;
}

/* === 15. PERFORMANCE: image aspect ratios prevent layout shift (CLS) === */
/* Locking aspect ratio means the browser reserves space before images load */
.ts-post-image {
    overflow: hidden;
    position: relative;
}
.ts-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === 16. PERFORMANCE: lazy-loaded hero image — reduce gray placeholder flash === */
.mf-im .post-image-wrap,
.ts-featured-post .post-image-wrap {
    background-color: #f0f0f0;
    min-height: 420px;
}

/* === 17. PERFORMANCE: contain card layout — reduce repaint scope === */
.ts-post-wrap,
.post-listing .ts-col-4 {
    contain: layout;
}

/* === 18. MOBILE: hide prev/next post edge arrows on small screens === */
@media (max-width: 768px) {
    .ts-prev-link,
    .ts-next-link,
    #prev-link,
    #next-link,
    .ts-post-prev-next {
        display: none !important;
    }
}
/* === 12. NEWSLETTER SIDEBAR WIDGET - tame oversized heading === */
.sidebar .widget_convertkit_form .formkit-header h2 {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
    font-weight: 700 !important;
}


/* === KIT SUBSCRIBE FORM: ATLAS STYLE === */
.formkit-form[data-uid]{max-width:640px !important;margin:88px auto 16px !important;border:1px solid #e6e2da !important;border-radius:14px !important;box-shadow:none !important;background:#fdfcfa !important;}
.formkit-form[data-uid] [data-style]{padding:44px 44px 36px !important;}
.formkit-form[data-uid] img,.formkit-form[data-uid] .formkit-image,.formkit-form[data-uid] .formkit-background{display:none !important;}
.formkit-form[data-uid] h1,.formkit-form[data-uid] h2,.formkit-form[data-uid] .formkit-header h1,.formkit-form[data-uid] .formkit-header h2{font-family:'Montserrat',-apple-system,sans-serif !important;font-weight:300 !important;font-size:1.9rem !important;line-height:1.2 !important;letter-spacing:-.01em !important;color:#18130c !important;}
.formkit-form[data-uid] p,.formkit-form[data-uid] .formkit-subheader{font-weight:300 !important;color:#6b6559 !important;font-size:.95rem !important;line-height:1.6 !important;}
.formkit-form[data-uid] .formkit-input{border:1px solid #d8d2c6 !important;border-radius:8px !important;background:#fff !important;font-weight:300 !important;}
.formkit-form[data-uid] .formkit-submit,.formkit-form[data-uid] button{background:#18130c !important;color:#d4b47a !important;border-radius:8px !important;font-family:'Montserrat',-apple-system,sans-serif !important;font-weight:300 !important;letter-spacing:.22em !important;text-transform:uppercase !important;font-size:11px !important;box-shadow:none !important;}
.formkit-form[data-uid] .formkit-submit:hover,.formkit-form[data-uid] button:hover{background:#2a2114 !important;}
.formkit-form[data-uid] .formkit-guarantee{font-size:11px !important;color:#a39b8b !important;letter-spacing:.04em !important;}

/* === GUIDES MEGA MENU: IMAGE TILES === */
#menu-item-160312 .mega-menu .column.sub-cats{width:100% !important;float:none !important;border:none !important;}
#menu-item-160312 .mega-menu .column:not(.sub-cats){display:none !important;}
#menu-item-160312 .mega-menu ol.sub-nav{display:flex;gap:14px;padding:24px !important;}
#menu-item-160312 .mega-menu ol.sub-nav li{flex:1;border:none !important;margin:0 !important;padding:0 !important;}
#menu-item-160312 .mega-menu ol.sub-nav li a{display:flex !important;align-items:flex-end;height:220px;border-radius:10px;overflow:hidden;background-color:#18130c;background-size:cover;background-position:center;color:#fff !important;font-weight:300 !important;letter-spacing:.03em;font-size:15px !important;line-height:1.3 !important;padding:16px !important;box-shadow:inset 0 -110px 70px -40px rgba(0,0,0,.72);transition:transform .3s ease;}
#menu-item-160312 .mega-menu ol.sub-nav li a:hover{transform:translateY(-5px);color:#d4b47a !important;}
#menu-item-160312 li.menu-item-160307 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/01/night-aurora-moss-and-fog-2.jpg?w=640&quality=77);}
#menu-item-160312 li.menu-item-160308 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/07/photography-elliot-mcgucken-feature.jpg?w=640&quality=77);}
#menu-item-160312 li.menu-item-160309 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/05/atacama1.jpg.webp?w=640&quality=77);}
#menu-item-160312 li.menu-item-160310 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/06/85-19-2.webp?w=640&quality=77);}
@media(max-width:991px){#menu-item-160312 .mega-menu ol.sub-nav{flex-direction:column;}#menu-item-160312 .mega-menu ol.sub-nav li a{height:64px;}}

/* === NAV: FIT ON ONE LINE === */
@media(min-width:992px){#menu-main-mf-menu > li > a{padding:0 11px !important;font-size:11px !important;letter-spacing:.04em !important;}}
@media(min-width:992px) and (max-width:1350px){#menu-main-mf-menu > li > a{padding:0 8px !important;font-size:10.5px !important;}}

/* === RETROFUTURISM MEGA MENU TILE === */
#menu-item-160312 li.menu-item-160397 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2025/04/winter2019-dreamscapes-A.jpg?w=640&quality=77);}

/* === KIT FORM: BUTTON TEXT FLOW FIX === */
.formkit-form[data-uid] .formkit-submit,.formkit-form[data-uid] button{letter-spacing:.12em !important;width:100% !important;word-break:keep-all !important;line-height:1.5 !important;padding:14px 12px !important;}
.formkit-form[data-uid] .formkit-input{width:100% !important;min-width:0 !important;}
.formkit-form[data-uid] .formkit-field{min-width:0 !important;}

/* ============================================================
   MOSS & FOG — HOMEPAGE SPACING & POLISH  (added Aug 2026)
   Scoped to body.home only. Safe to delete this whole block.
   ============================================================ */

/* 1. Breathing room under the in-content ad so it never touches the post grid */
.home .mf-homepage-main > .wp-block-column > ins.adsbygoogle { margin-bottom: 48px; }

/* Collapse ad slots that come back unfilled instead of leaving a blank hole */
.home ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* 2. Even vertical rhythm between stacked homepage sections */
.home .mf-homepage-main > .wp-block-column > section.block + section.block { margin-top: 30px; }

/* 3. Close the dead zone between the In Motion block and the newsletter */
.home .the-page > .wp-block-spacer { height: 56px !important; }
.home .the-page form.seva-form { margin-top: 0 !important; }

/* 4. Homepage doesn't need the post-style share / like blocks */
.home .the-page .sharedaddy { display: none !important; }

/* 5. Sidebar follows the reader instead of leaving a tall empty gutter */
@media (min-width: 992px) {
  .home .mf-homepage-main > .wp-block-column:last-child {
    align-self: flex-start;
    position: sticky;
    top: 76px;
    margin-top: -24px;
    padding-top: 24px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
  }
}

/* 6. Mobile: same rhythm, tighter numbers */
@media (max-width: 767px) {
  .home .mf-homepage-main > .wp-block-column > ins.adsbygoogle { margin-bottom: 32px; }
  .home .mf-homepage-main > .wp-block-column > section.block + section.block { margin-top: 22px; }
  .home .the-page > .wp-block-spacer { height: 36px !important; }
}

/* 7. Newsletter form spans the content width instead of floating narrow */
@media (min-width: 768px) {
  .home .the-page form.seva-form { max-width: 100% !important; width: 100% !important; }
  .home .the-page form.seva-form > div { padding-left: 64px !important; padding-right: 64px !important; align-items: center !important; }
  .home .the-page form.seva-form .formkit-column { background-color: transparent !important; }
}
/* ============ end Moss & Fog homepage spacing block ============ */


/* ============================================================
   FOOTER — COMPACT "WHAT PEOPLE ARE READING" (Aug 2026)
   Two-up post grid + tightened rows + vertical link list.
   ============================================================ */

@media (min-width: 941px) {
  .main-footer .upper-footer { padding-top: 46px; padding-bottom: 30px; }
  .main-footer .upper-footer .widgets { align-items: flex-start; }
  .main-footer .upper-footer .widget.column.col-4 { width: auto; }
  .main-footer #bunyad-widget-about-2 { width: 26%; }
  .main-footer #bunyad-posts-widget-5 { width: 53%; }
  .main-footer #custom_html-11 { width: 21%; }

  .main-footer #bunyad-posts-widget-5 ul.posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

.main-footer .upper-footer .widget-title { margin-bottom: 20px !important; }

.main-footer #bunyad-posts-widget-5 ul.posts > li.post {
  margin-bottom: 0;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.main-footer #bunyad-posts-widget-5 ul.posts > li.post:nth-last-child(-n+2) { border-bottom: 0; }

.main-footer #bunyad-posts-widget-5 .post-thumb {
  width: 44px;
  flex: 0 0 44px;
  margin-right: 14px;
}
.main-footer #bunyad-posts-widget-5 .post-title { margin-bottom: 2px !important; }
.main-footer #bunyad-posts-widget-5 .post-title a {
  font-size: 13.5px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-footer #bunyad-posts-widget-5 .meta-below .post-cat a {
  font-size: 9.5px;
  letter-spacing: .1em;
  opacity: .6;
}

.main-footer #custom_html-11 .textwidget::before {
  content: "More to Explore";
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .68px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 20px;
}
.main-footer #custom_html-11 .mf-utility-nav {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
}
.main-footer #custom_html-11 .mf-utility-nav > span { display: none !important; }
.main-footer #custom_html-11 .mf-utility-nav > a {
  display: block;
  padding: 6px 0;
  line-height: 1.3;
}

@media (max-width: 940px) {
  .main-footer #bunyad-posts-widget-5 ul.posts > li.post:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .main-footer #bunyad-posts-widget-5 ul.posts > li.post:last-child { border-bottom: 0; }
}


/* ============================================================
   SIDEBAR — "THE GUIDES" WIDGET (Aug 2026)
   Uppercase Montserrat rows with a teal left rule that fills on hover.
   Scoped to the widget instance #custom_html-16.
   ============================================================ */

#custom_html-16 .textwidget br { display: none; }

#custom_html-16 .textwidget a {
  display: block;
  margin-bottom: 6px;
  padding: 13px 10px 13px 18px;
  border-left: 3px solid rgba(1,102,102,.18);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #1d2b2b;
  text-decoration: none;
  background: transparent;
  transition: border-color .2s ease, color .2s ease, padding-left .2s ease, background-color .2s ease;
}

#custom_html-16 .textwidget a:last-child { margin-bottom: 0; }

#custom_html-16 .textwidget a:hover {
  border-left-color: #016666;
  color: #016666;
  padding-left: 24px;
  background-color: rgba(1,102,102,.045);
}


/* ------------------------------------------------------------
   Hide the empty box drawn by the script-only sidebar widget.
   custom_html-2 holds the slider / carousel / AdSense injector
   JS. It outputs nothing visible, but the boxed widget wrapper
   still renders a bordered empty card. DO NOT DELETE THE WIDGET.
   ------------------------------------------------------------ */
#custom_html-2 { display: none !important; }


/* ============================================================
   HOMEPAGE MASTHEAD (Aug 2026)
   The site's one-line self-definition + the page's only H1.
   Block: core/group.mf-masthead at the top of page 153734.
   ============================================================ */

.mf-masthead {
  text-align: center;
  margin: 4px 0 46px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(29,43,43,.10);
}

.mf-masthead::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 0 auto 24px;
  background: #4aa99a;
}

.mf-masthead .mf-masthead-h1 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.004em;
  color: #1d2b2b;
}

.mf-masthead .mf-masthead-sub {
  max-width: 520px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #6a7676;
}

@media (max-width: 767px) {
  .mf-masthead { margin-bottom: 34px; padding-bottom: 26px; }
  .mf-masthead::before { margin-bottom: 18px; }
  .mf-masthead .mf-masthead-h1 { font-size: 22px; }
  .mf-masthead .mf-masthead-sub { font-size: 13.5px; }
}


/* ============================================================
   GOOD GOOD GOOD / GOODNEWSPAPER AFFILIATE PROMO
   Used by the synced pattern "Goodnewspaper Promo".
   Content-width, compact, rounded.
   ============================================================ */

.mf-ggg {
  margin: 38px 0;
  padding: 26px 28px 24px;
  background: #FAF7F2;
  border: 1px solid rgba(29,43,43,.13);
  border-radius: 14px;
}

.mf-ggg .mf-ggg-eyebrow {
  margin: 0 0 10px !important;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #e65614;
}

.mf-ggg .mf-ggg-title {
  margin: 0 0 10px !important;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: #1d2b2b;
}

.mf-ggg .mf-ggg-body {
  margin: 0 0 18px !important;
  font-size: 15px;
  line-height: 1.62;
  color: #3d4a4a;
}

.mf-ggg .wp-block-buttons { margin: 0 0 12px; }

.mf-ggg .mf-ggg-cta .wp-block-button__link {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 100px;
  background: #e65614;
  color: #fff;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.mf-ggg .mf-ggg-cta .wp-block-button__link:hover {
  background: #c8480f;
  transform: translateY(-1px);
  color: #fff;
}

.mf-ggg .mf-ggg-disclosure {
  margin: 0 !important;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: #7c8888;
}

@media (max-width: 600px) {
  .mf-ggg { padding: 22px 20px 20px; border-radius: 12px; margin: 30px 0; }
  .mf-ggg .mf-ggg-title { font-size: 19px; }
  .mf-ggg .mf-ggg-body { font-size: 14.5px; }
  .mf-ggg .mf-ggg-cta .wp-block-button__link { display: block; text-align: center; }
}


/* Goodnewspaper promo: image + text side by side */
.mf-ggg .mf-ggg-cols { gap: 24px; margin: 0 !important; align-items: center; }
.mf-ggg .wp-block-column { margin: 0; }
.mf-ggg figure.mf-ggg-img { margin: 0 !important; }
.mf-ggg figure.mf-ggg-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.mf-ggg figure.mf-ggg-img a { display: block; line-height: 0; }
@media (max-width: 781px) {
  .mf-ggg .mf-ggg-cols { gap: 18px; }
  .mf-ggg .wp-block-column { flex-basis: 100% !important; }
}


/* ============================================================
   EDITORIAL TYPE SCALE (Sept 2026)
   Body copy is 18px / 1.85. Headings step up on a ~1.25 ratio so
   every level reads as a level. Title (H1) stays at the theme's 46px.
   ============================================================ */
.entry-content h2, .entry-content h3, .entry-content h4,
.entry-content h5, .entry-content h6 {
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 700;
  color: #1f2622;
  text-wrap: balance;
}
.entry-content h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; margin: 2.2em 0 0.6em; }
.entry-content h3 { font-size: 23px; line-height: 1.25; letter-spacing: -0.01em; margin: 1.8em 0 0.5em; }
.entry-content h4 { font-size: 19px; line-height: 1.35; letter-spacing: 0; margin: 1.6em 0 0.4em; }
.entry-content h5 { font-size: 16px; line-height: 1.4; letter-spacing: 0.02em; margin: 1.5em 0 0.4em; }
.entry-content h6 { font-size: 13px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: #4a8d80; margin: 1.5em 0 0.4em; }
/* A heading that directly follows another heading sits closer to it. */
.entry-content h2 + h3, .entry-content h3 + h4 { margin-top: 0.6em; }
/* The first heading in a post does not need the big top margin. */
.entry-content > h2:first-child, .entry-content > h3:first-child { margin-top: 0.4em; }

/* ===== Quick facts card (className: mf-quickfacts) — Sept 2026 v2 ===== */
.entry-content .mf-quickfacts {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #f5f8f5 0%, #eef3ef 100%);
  border: 1px solid rgba(43, 38, 32, 0.12);
  border-left: 4px solid #4a8d80;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31, 38, 34, 0.04), 0 10px 30px -18px rgba(31, 38, 34, 0.25);
  padding: 24px 28px 16px;
  margin: 1.8em 0 2.2em;
}
/* Faded ampersand watermark — the "drop cap that fades into the background" */
.entry-content .mf-quickfacts::before {
  content: "&";
  position: absolute;
  right: -0.06em;
  top: -0.32em;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 200px;
  line-height: 1;
  color: #4a8d80;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.entry-content .mf-quickfacts h3 {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a8d80;
  margin: 0 0 14px;
}
.entry-content .mf-quickfacts ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.entry-content .mf-quickfacts li {
  position: relative;
  padding-left: 1.15em;
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0 0 8px;
}
/* Custom dot (renders in share captures, unlike ::marker) */
.entry-content .mf-quickfacts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a8d80;
}
.entry-content .mf-quickfacts li:last-child {
  margin-bottom: 0;
}
/* Footer: mini M&F icon + wordmark + share button (injected by JS) */
.mf-qf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(43, 38, 32, 0.1);
}
.mf-qf-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Montserrat", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b736e;
  text-decoration: none !important;
  box-shadow: none !important;
}
.mf-qf-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4a8d80;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  flex: 0 0 24px;
}
.mf-qf-brand span small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: none;
  color: #8a918d;
  margin-top: 1px;
}
.mf-qf-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Montserrat", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a8d80;
  background: #fff;
  border: 1px solid rgba(74, 141, 128, 0.4);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mf-qf-share:hover { background: #4a8d80; color: #fff; border-color: #4a8d80; }
.mf-qf-share svg { width: 13px; height: 13px; }
/* Capture mode: hide the button, show the post title line */
.mf-quickfacts.mf-qf-capturing .mf-qf-share { visibility: hidden; }
.mf-qf-title {
  display: none;
  font-family: "Montserrat", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6b736e;
  margin: 12px 0 0;
  line-height: 1.4;
}
.mf-quickfacts.mf-qf-capturing .mf-qf-title { display: block; }
@media (max-width: 680px) {
  .entry-content .mf-quickfacts { padding: 20px 20px 14px; }
  .entry-content .mf-quickfacts::before { font-size: 150px; }
  .mf-qf-share span { display: none; }
  .mf-qf-share { padding: 8px 10px; }
}
@media (max-width: 680px) {
  .entry-content h2 { font-size: 26px; }
  .entry-content h3 { font-size: 21px; }
  .entry-content h4 { font-size: 18px; }
}

/* ===== "NEW" badge on the Shop menu item (Sept 2026) =====
   Targets menu item 162154 in both the main nav and the mobile nav.
   Remove this block when the badge has done its job. */
.menu-item-162154 > a::after {
  content: "NEW";
  display: inline-block;
  margin-left: 6px;
  padding: 3px 5px 2px;
  font-family: "Montserrat", -apple-system, sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
  background: #e4573d;
  border-radius: 4px;
  vertical-align: 2px;
  text-transform: uppercase;
}
.mobile-menu .menu-item-162154 > a::after {
  font-size: 9.5px;
  padding: 3px 6px 2px;
  margin-left: 8px;
  vertical-align: 1px;
}
/* =========================================================================
   NEW FUTURISM PILLAR (Sept 2026): v3, on-brand
   Append to Customizer > Additional CSS, below the EDITORIAL TYPE SCALE
   block. Do not replace existing CSS.

   Scoped entirely to .nf- classes, which exist only on this post.
   None of this reaches Jetpack emails, RSS, or Google's text rendering.

   BRAND: Montserrat everywhere (already loaded sitewide), brand teal
   #016666, text #333, body 18px / 1.85 per the site type scale.
   ========================================================================= */

.nf-lead,
[class*="nf-"]{
  --nf-ease:cubic-bezier(.22,1,.36,1);
  --nf-fast:420ms;
  --nf-mid:760ms;
  --nf-teal:#016666;
  --nf-hair:#d8dcd9;
  --nf-quiet:#6f7570;
  --nf-font:"Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Wider measure than the draft had. Montserrat is a wide face, so 40rem
   at 18px lands near 70 characters, which is the target. */
.nf-lead,
.nf-name,
.nf-section,
.nf-specs,
.nf-era dd{max-width:40rem}

.nf-lead{font-size:1.28rem; line-height:1.6; font-weight:500; letter-spacing:-.005em}

/* ---------- THE CROP SYSTEM ---------- */
.nf-crop-aperture img,
.nf-crop-horizon img,
.nf-crop-column img,
.nf-crop-lens img{display:block; width:100%; height:100%; object-fit:cover}

.nf-crop-aperture,
.nf-crop-horizon,
.nf-crop-column{margin:3.4rem 0 1.2rem}

/* 1. Aperture. The oculus. Opens as it scrolls into view. */
.nf-crop-aperture img{
  aspect-ratio:4/5;
  border-radius:50% 50% 3px 3px / 42% 42% 3px 3px;
  clip-path:inset(0 round 50% 50% 3px 3px / 42% 42% 3px 3px);
  animation:nfAperture linear both;
  animation-timeline:view();
  animation-range:entry 5% cover 40%;
}
@keyframes nfAperture{
  from{clip-path:inset(13% 21% 0 21% round 50% 50% 3px 3px / 60% 60% 3px 3px)}
  to{clip-path:inset(0 round 50% 50% 3px 3px / 42% 42% 3px 3px)}
}

/* 2. Horizon. Extreme letterbox, bleeding past both screen edges. */
.nf-crop-horizon{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
.nf-crop-horizon img{aspect-ratio:24/7; border-radius:2px}
.nf-crop-horizon figcaption{max-width:40rem; margin:0 auto; padding:0 6vw}

/* 3. Column. A tall slot with a curved foot. */
.nf-crop-column img{
  aspect-ratio:5/8; max-width:36rem;
  border-radius:3px 3px 46% 46% / 3px 3px 16% 16%;
}

/* 4. Lens. FIXED. It previously used a negative top margin and collided
   with the paragraph above it. It now sits clear and only bleeds sideways
   into the right margin. */
.nf-crop-lens{
  width:min(17rem,46%);
  margin:2.8rem -6rem 2.8rem auto;
  clear:both;
}
.nf-crop-lens img{aspect-ratio:1/1; border-radius:44% / 40%}
@media (max-width:1100px){.nf-crop-lens{margin-right:0}}
@media (max-width:820px){.nf-crop-lens{width:60%; margin:2.2rem 0 2.2rem auto}}

/* ---------- NAMEPLATE ----------
   Montserrat has no width axis, so the morph is weight plus tracking
   rather than width. Same idea, brand face, no second typeface. */
.nf-name{
  font-family:var(--nf-font);
  font-size:clamp(1.5rem,3.2vw,2.25rem);
  line-height:1.14;
  border-top:2px solid var(--nf-teal);
  padding-top:1.5rem; margin-top:2.8rem; margin-bottom:.4rem;
  font-weight:300; letter-spacing:.15em;
  font-variation-settings:"wght" 300;
  transition:font-variation-settings var(--nf-mid) var(--nf-ease),
             letter-spacing var(--nf-mid) var(--nf-ease),
             color var(--nf-mid) var(--nf-ease);
}
.nf-name:hover{
  font-variation-settings:"wght" 800;
  letter-spacing:-.022em;
  color:var(--nf-teal);
}

.nf-section{
  font-family:var(--nf-font); font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.35rem); line-height:1.16;
  letter-spacing:-.02em; margin-top:3.6rem;
}

/* ---------- LOGO AS A SECTION MARK ----------
   The touchstone. Two hairlines and the stacked wordmark, at the two
   major turns in the piece and nowhere else. */
.nf-mark{
  display:flex; align-items:center; gap:1.6rem;
  max-width:40rem; margin:5rem auto 3.5rem;
}
.nf-mark::before,
.nf-mark::after{content:""; flex:1; height:1px; background:var(--nf-hair)}
.nf-mark img{width:74px; height:auto; opacity:.9; display:block; margin:0}
.nf-mark figcaption{display:none}

/* ---------- SPEC LIST ----------
   Collapsed on the web unless hovered. Never display:none, so it always
   reads correctly in email, RSS and search. */
.nf-specs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height var(--nf-mid) var(--nf-ease),
             opacity var(--nf-fast) var(--nf-ease),
             margin var(--nf-mid) var(--nf-ease);
}
.nf-name:hover + .nf-specs,
.nf-specs:hover,
.nf-specs:focus-within{max-height:16rem; opacity:1; margin:1.5rem 0 2rem}
.nf-specs li{margin:0; font-size:.95rem; line-height:1.45; font-weight:500}
.nf-specs li strong{
  display:block; font-size:.66rem; letter-spacing:.11em; color:var(--nf-teal);
  font-weight:700; margin-bottom:.3rem;
}
@media (hover:none),(max-width:760px){
  .nf-specs{max-height:none; opacity:1; margin:1.3rem 0 1.8rem; grid-template-columns:repeat(2,1fr)}
}

/* ---------- COMPARE: icon vs. room. No JavaScript. ---------- */
.nf-compare{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:3px; margin:2.6rem 0 1rem;
}
.nf-compare figure{margin:0; position:absolute; inset:0}
.nf-compare img{width:100%; height:100%; object-fit:cover; display:block}
.nf-compare .nf-compare-b{z-index:1}
.nf-compare .nf-compare-a{
  z-index:2; overflow:hidden; resize:horizontal;
  width:54%; min-width:3rem; max-width:100%;
  border-right:2px solid var(--nf-teal);
}
.nf-compare .nf-compare-a img{width:78vw; max-width:none}
.nf-compare figcaption{
  position:absolute; bottom:1rem; z-index:3; font-family:var(--nf-font);
  font-size:.66rem; letter-spacing:.11em; font-weight:700; color:var(--nf-teal);
  background:#fff; padding:.4rem .65rem; border-radius:2px;
}
.nf-compare .nf-compare-a figcaption{left:1rem}
.nf-compare .nf-compare-b figcaption{right:1rem}
.nf-compare::after{
  content:"\25E2"; position:absolute; right:.35rem; bottom:.2rem; z-index:4;
  color:var(--nf-teal); font-size:.9rem; pointer-events:none;
}
@media (max-width:600px){
  .nf-compare{aspect-ratio:auto; height:auto}
  .nf-compare figure{position:static; width:100% !important; resize:none; border:0}
  .nf-compare figcaption{position:static; display:inline-block; margin:.4rem 0 1.4rem}
  .nf-compare::after{display:none}
}

/* ---------- ERAS ---------- */
.nf-eras dl{margin:2rem 0; max-width:40rem}
.nf-era{border-top:1px solid var(--nf-hair); padding:1.3rem 0}
.nf-era dt{
  font-family:var(--nf-font); font-size:2.3rem; line-height:1;
  font-weight:300; letter-spacing:.07em; margin-bottom:.5rem; color:var(--nf-teal);
}
.nf-era dd{margin:0}

.nf-eras.is-live dl{position:relative; border:0; margin:1.5rem 0 0; min-height:15rem}
.nf-eras.is-live .nf-era{
  border:0; padding:0; position:absolute; top:0; left:0; right:0;
  opacity:0; pointer-events:none;
  transition:opacity var(--nf-fast) var(--nf-ease);
}
.nf-eras.is-live .nf-era.is-on{opacity:1; position:relative; pointer-events:auto}
.nf-eras.is-live .nf-era dt{
  font-size:clamp(3rem,12vw,8.5rem); line-height:.88;
  transition:font-variation-settings var(--nf-fast) var(--nf-ease),
             letter-spacing var(--nf-fast) var(--nf-ease);
}
.nf-eras input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; max-width:40rem;
  background:transparent; cursor:ew-resize; margin:1.6rem 0 0; display:block;
}
.nf-eras input[type=range]::-webkit-slider-runnable-track{height:1px; background:#333}
.nf-eras input[type=range]::-moz-range-track{height:1px; background:#333}
.nf-eras input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:3px; height:2.9rem; background:var(--nf-teal);
  margin-top:-1.45rem; border:0; border-radius:0;
}
.nf-eras input[type=range]::-moz-range-thumb{width:3px; height:2.9rem; background:var(--nf-teal); border:0; border-radius:0}
.nf-eras input[type=range]:focus-visible{outline:2px solid var(--nf-teal); outline-offset:8px}
.nf-eras .nf-ticks{
  display:flex; justify-content:space-between; max-width:40rem;
  margin-top:.7rem; color:var(--nf-quiet); font-family:var(--nf-font);
  font-size:.66rem; letter-spacing:.09em; font-weight:600;
}

@media (prefers-reduced-motion:reduce){
  [class*="nf-"],[class*="nf-"] *{animation:none !important; transition-duration:.01ms !important}
  .nf-crop-aperture img{clip-path:inset(0 round 50% 50% 3px 3px / 42% 42% 3px 3px)}
}

/* =========================================================================
   MOBILE: the nameplate morph, on scroll instead of on hover.
   Touch devices never fire :hover, so the signature interaction was simply
   absent on phones. This runs the same morph as the heading enters view.
   ========================================================================= */
@media (hover:none){
  @supports (animation-timeline:view()){
    .nf-name{
      animation:nfNameIn linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 85%;
    }
    @keyframes nfNameIn{
      from{font-variation-settings:"wght" 250; letter-spacing:.22em; color:var(--nf-quiet)}
      to{font-variation-settings:"wght" 800; letter-spacing:-.022em; color:var(--nf-teal)}
    }
  }
}

/* =========================================================================
   THE FINALE
   A horizon opens from a single hairline into a full letterbox, the closing
   line resolves out of wide tracking into tight bold, and the mark fades up
   underneath. Same vocabulary as the rest of the page, used once, at the end.
   ========================================================================= */
.nf-finale{
  width:100vw; margin:6rem 0 5rem calc(50% - 50vw);
  padding:0 0 1rem; text-align:center;
}
.nf-finale-plate{margin:0; overflow:hidden}
.nf-finale-plate img{
  display:block; width:100%; height:auto; aspect-ratio:24/8; object-fit:cover;
}
.nf-finale-line{
  font-family:var(--nf-font);
  font-size:clamp(1.15rem,3.4vw,2rem); line-height:1.3;
  font-weight:700; letter-spacing:-.02em; color:var(--nf-teal);
  max-width:34rem; margin:3rem auto 0; padding:0 6vw;
}
.nf-finale-mark{margin:2.2rem auto 0}
.nf-finale-mark img{width:88px; height:auto; display:block; margin:0 auto; opacity:.9}

@supports (animation-timeline:view()){
  .nf-finale-plate img{
    clip-path:inset(0 0 0 0);
    animation:nfHorizon linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 45%;
  }
  @keyframes nfHorizon{
    from{clip-path:inset(49.7% 34% 49.7% 34%)}
    45%{clip-path:inset(46% 0 46% 0)}
    to{clip-path:inset(0 0 0 0)}
  }
  .nf-finale-line{
    animation:nfResolve linear both;
    animation-timeline:view();
    animation-range:entry 25% cover 55%;
  }
  @keyframes nfResolve{
    from{font-variation-settings:"wght" 200; letter-spacing:.34em; opacity:.25}
    to{font-variation-settings:"wght" 700; letter-spacing:-.02em; opacity:1}
  }
  .nf-finale-mark img{
    animation:nfMarkUp linear both;
    animation-timeline:view();
    animation-range:entry 40% cover 60%;
  }
  @keyframes nfMarkUp{
    from{opacity:0; transform:translateY(1.2rem)}
    to{opacity:.9; transform:none}
  }
}

@media (prefers-reduced-motion:reduce){
  .nf-finale-plate img{clip-path:none}
  .nf-finale-line{opacity:1; letter-spacing:-.02em}
  .nf-finale-mark img{opacity:.9; transform:none}
}

/* =========================================================================
   SISTER SITE CARD
   Sits at the very end, after the FAQ. Deep teal panel with an arched top,
   echoing the curved foot of the column crop. The site name uses the same
   weight-and-tracking morph as the nameplates, so it reads as part of the
   page rather than a bolted-on promo box.

   Degrades to a plain sentence with a link in Jetpack email and RSS.
   ========================================================================= */
.nf-sister{
  display:block; max-width:40rem; margin:5rem auto 2rem;
  padding:2.6rem 2.4rem 2.4rem;
  background:var(--nf-teal); color:#fff;
  border-radius:44% 44% 4px 4px / 22% 22% 4px 4px;
  text-decoration:none;
  position:relative; overflow:hidden;
  transition:background var(--nf-mid) var(--nf-ease);
}
/* The arch stays on hover. Only the color and the type respond, so the
   shape reads as a fixed object rather than a button that deforms. */
.nf-sister:hover{background:#014f4f}

.nf-sister-line{
  display:block; font-family:var(--nf-font);
  font-size:clamp(1.02rem,2.3vw,1.24rem); line-height:1.5;
  font-weight:500; color:#fff; text-align:center;
  max-width:26rem; margin:0 auto;
}
.nf-sister-name{
  display:inline-block; font-weight:300; letter-spacing:.13em;
  font-variation-settings:"wght" 300;
  transition:font-variation-settings var(--nf-mid) var(--nf-ease),
             letter-spacing var(--nf-mid) var(--nf-ease);
}
.nf-sister:hover .nf-sister-name{font-variation-settings:"wght" 800; letter-spacing:-.01em}

/* Arrow is CSS-only, so it never shows up in an email as a stray character. */
.nf-sister-line::after{
  content:"\2192"; display:block; margin-top:1.1rem;
  font-size:1.15rem; opacity:.65;
  transition:transform var(--nf-mid) var(--nf-ease), opacity var(--nf-mid) var(--nf-ease);
}
.nf-sister:hover .nf-sister-line::after{transform:translateX(.5rem); opacity:1}
.nf-sister:focus-visible{outline:3px solid var(--nf-teal); outline-offset:4px}

@media (max-width:600px){
  .nf-sister{padding:2.2rem 1.5rem 2rem; border-radius:26% 26% 4px 4px / 9% 9% 4px 4px}
}
@media (prefers-reduced-motion:reduce){
  .nf-sister-line::after{transform:none}
}