{"id":275,"date":"2026-08-25T19:00:08","date_gmt":"2026-08-25T19:00:08","guid":{"rendered":"https:\/\/demowebdesign.live\/christiana\/?page_id=275"},"modified":"2026-08-25T19:58:21","modified_gmt":"2026-08-25T19:58:21","slug":"the-story-trail","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/christiana\/the-story-trail\/","title":{"rendered":"The Story Trail"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"275\" class=\"elementor elementor-275\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c56597c e-con-full e-flex e-con e-parent\" data-id=\"c56597c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da23eb1 elementor-widget elementor-widget-html\" data-id=\"da23eb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <meta name=\"description\" content=\"Explore stories, adventures, ideas, and discoveries from Christiana Jones Marzett \u2014 author of That One Puppy.\">\r\n\r\n  <!-- Google Fonts -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@500;600;700&family=Cinzel:wght@600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    \/* ==========================================================================\r\n       DESIGN SYSTEM & GLOBAL VARIABLES (Luxury Storybook Theme)\r\n       ========================================================================== *\/\r\n    :root {\r\n      --bg-cream: #FAF6F0;\r\n      --bg-paper: #F5EEE6;\r\n      --bg-paper-light: #FDFBF7;\r\n      --bg-dark: #14110F;\r\n      --bg-dark-card: #1E1A17;\r\n      \r\n      --terracotta: #D9531E;\r\n      --terracotta-dark: #B54013;\r\n      --terracotta-light: #F8EBE4;\r\n      --terracotta-glow: rgba(217, 83, 30, 0.25);\r\n      \r\n      --gold: #D4AF37;\r\n      --gold-light: #F9F2D8;\r\n      --gold-glow: rgba(212, 175, 55, 0.35);\r\n      \r\n      --text-dark: #1A1614;\r\n      --text-body: #4A443F;\r\n      --text-muted: #7A7067;\r\n      --text-light: #F4ECE1;\r\n      \r\n      --border-light: #E8DFD5;\r\n      --border-accent: #D8C9B7;\r\n      \r\n      --font-heading: 'Cinzel', serif;\r\n      --font-serif: 'Playfair Display', serif;\r\n      --font-body: 'Plus Jakarta Sans', sans-serif;\r\n      --font-handwriting: 'Caveat', cursive;\r\n      \r\n      --shadow-sm: 0 4px 14px rgba(20, 17, 15, 0.05);\r\n      --shadow-md: 0 12px 32px rgba(20, 17, 15, 0.09);\r\n      --shadow-lg: 0 22px 50px rgba(20, 17, 15, 0.15);\r\n      --shadow-terracotta: 0 14px 35px rgba(217, 83, 30, 0.3);\r\n      \r\n      --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    \/* CSS Reset *\/\r\n    *, *::before, *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n      font-size: 16px;\r\n    }\r\n\r\n    body {\r\n      background-color: var(--bg-cream);\r\n      color: var(--text-body);\r\n      font-family: var(--font-body);\r\n      line-height: 1.7;\r\n      overflow-x: hidden;\r\n      -webkit-font-smoothing: antialiased;\r\n    }\r\n\r\n    img {\r\n      max-width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    a {\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n\r\n    ::selection {\r\n      background-color: var(--terracotta);\r\n      color: #FFFFFF;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1240px;\r\n      margin: 0 auto;\r\n      padding: 0 24px;\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .section-eyebrow {\r\n      font-family: var(--font-body);\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: var(--terracotta);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .section-eyebrow::before {\r\n      content: '\u2726';\r\n      color: var(--gold);\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(2.3rem, 4.5vw, 3.8rem);\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      line-height: 1.18;\r\n      margin-bottom: 22px;\r\n      letter-spacing: -0.01em;\r\n    }\r\n\r\n    .btn-primary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      padding: 16px 36px;\r\n      border-radius: 50px;\r\n      font-weight: 700;\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      box-shadow: var(--shadow-terracotta);\r\n      transition: all 0.4s var(--transition-smooth);\r\n      border: 2px solid transparent;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background: var(--terracotta-dark);\r\n      transform: translateY(-4px) scale(1.02);\r\n      box-shadow: 0 18px 40px rgba(217, 83, 30, 0.38);\r\n      color: white !important;\r\n    }\r\n\r\n    \/* Keyframes *\/\r\n    @keyframes floatSoft {\r\n      0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n      50% { transform: translateY(-12px) rotate(3deg); }\r\n    }\r\n\r\n    @keyframes rotateCompass {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    \/* Alternating Paw Animation Keyframes *\/\r\n    @keyframes pawStepLeft {\r\n      0% { opacity: 0; transform: translate(-20px, 10px) scale(0.8); }\r\n      50% { opacity: 0.85; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.2; transform: translate(15px, -10px) scale(0.9); }\r\n    }\r\n\r\n    @keyframes pawStepRight {\r\n      0% { opacity: 0; transform: translate(20px, 10px) scale(0.8); }\r\n      50% { opacity: 0.85; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.2; transform: translate(-15px, -10px) scale(0.9); }\r\n    }\r\n\r\n    \/* Alternating Paw Trails Containers *\/\r\n    .paw-trail-left {\r\n      position: absolute;\r\n      left: 25px;\r\n      top: 8%;\r\n      bottom: 8%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-around;\r\n      pointer-events: none;\r\n      z-index: 3;\r\n    }\r\n\r\n    .paw-trail-right {\r\n      position: absolute;\r\n      right: 25px;\r\n      top: 8%;\r\n      bottom: 8%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-around;\r\n      pointer-events: none;\r\n      z-index: 3;\r\n    }\r\n\r\n    .paw-icon {\r\n      width: 34px;\r\n      height: 34px;\r\n      fill: var(--terracotta);\r\n      opacity: 0.45;\r\n      filter: drop-shadow(0 2px 5px rgba(217, 83, 30, 0.25));\r\n    }\r\n\r\n    .paw-trail-left .paw-icon {\r\n      animation: pawStepLeft 4.5s ease-in-out infinite alternate;\r\n    }\r\n\r\n    .paw-trail-right .paw-icon {\r\n      animation: pawStepRight 4.5s ease-in-out infinite alternate;\r\n      fill: var(--gold);\r\n    }\r\n\r\n    .paw-trail-left .paw-icon:nth-child(1) { animation-delay: 0s; transform: rotate(-15deg); }\r\n    .paw-trail-left .paw-icon:nth-child(2) { animation-delay: 0.9s; transform: rotate(10deg) translateX(15px); }\r\n    .paw-trail-left .paw-icon:nth-child(3) { animation-delay: 1.8s; transform: rotate(-20deg); }\r\n    .paw-trail-left .paw-icon:nth-child(4) { animation-delay: 2.7s; transform: rotate(15deg) translateX(20px); }\r\n\r\n    .paw-trail-right .paw-icon:nth-child(1) { animation-delay: 0.4s; transform: rotate(20deg); }\r\n    .paw-trail-right .paw-icon:nth-child(2) { animation-delay: 1.2s; transform: rotate(-10deg) translateX(-15px); }\r\n    .paw-trail-right .paw-icon:nth-child(3) { animation-delay: 2.0s; transform: rotate(25deg); }\r\n    .paw-trail-right .paw-icon:nth-child(4) { animation-delay: 2.8s; transform: rotate(-15deg) translateX(-20px); }\r\n\r\n    .reveal-on-scroll {\r\n      opacity: 0;\r\n      transform: translateY(35px);\r\n      transition: opacity 0.85s var(--transition-smooth), transform 0.85s var(--transition-smooth);\r\n    }\r\n\r\n    .reveal-on-scroll.visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 01 \u2014 BLOG HERO (The Story Trail)\r\n       ========================================================================== *\/\r\n    .blog-hero-section {\r\n      min-height: 90vh;\r\n      position: relative;\r\n      padding: 90px 0 110px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      background: radial-gradient(circle at 10% 20%, rgba(249, 242, 216, 0.6) 0%, rgba(250, 246, 240, 1) 75%);\r\n      border-bottom: 1px solid var(--border-light);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .blog-hero-grid {\r\n      display: grid;\r\n      grid-template-columns: 1.1fr 0.9fr;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .blog-hero-content {\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .blog-hero-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(3.5rem, 6vw, 5.5rem);\r\n      font-weight: 900;\r\n      color: var(--text-dark);\r\n      line-height: 1.05;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .blog-hero-subtext {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.45rem;\r\n      color: var(--text-body);\r\n      line-height: 1.6;\r\n      margin-bottom: 24px;\r\n      border-left: 4px solid var(--gold);\r\n      padding-left: 20px;\r\n      font-style: italic;\r\n    }\r\n\r\n    .decorative-trail-line {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: rgba(217, 83, 30, 0.08);\r\n      border: 1px solid rgba(217, 83, 30, 0.2);\r\n      padding: 8px 22px;\r\n      border-radius: 30px;\r\n      font-size: 0.75rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.18em;\r\n      color: var(--terracotta);\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    \/* Desk Stage Visual *\/\r\n    .desk-hero-stage {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .open-journal-card {\r\n      position: relative;\r\n      width: 100%;\r\n      max-width: 440px;\r\n      background: #FFFDF8;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 20px;\r\n      padding: 35px 35px 65px 35px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(2deg);\r\n      background-image: repeating-linear-gradient(#FFFDF8, #FFFDF8 31px, #EADFCE 32px);\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .open-journal-card:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n    }\r\n\r\n    .journal-handwritten-quote {\r\n      font-family: var(--font-handwriting);\r\n      font-size: 2.2rem;\r\n      color: var(--terracotta);\r\n      line-height: 1.4;\r\n      text-align: center;\r\n      margin-top: 20px;\r\n    }\r\n\r\n    \/* Explorer Desk Floating Items *\/\r\n    .desk-item {\r\n      position: absolute;\r\n      z-index: 6;\r\n      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1));\r\n    }\r\n\r\n    .desk-compass {\r\n      top: -30px;\r\n      right: -20px;\r\n      width: 70px;\r\n      height: 70px;\r\n      animation: rotateCompass 35s linear infinite;\r\n    }\r\n\r\n    .desk-map {\r\n      bottom: -30px;\r\n      left: -40px;\r\n      width: 90px;\r\n      transform: rotate(-15deg);\r\n      animation: floatSoft 6s ease-in-out infinite;\r\n    }\r\n\r\n    .desk-airplane {\r\n      top: 40%;\r\n      right: -45px;\r\n      width: 60px;\r\n      animation: floatSoft 7s ease-in-out infinite 1s;\r\n    }\r\n\r\n    \/* Floating Camera Icon in Section 01 *\/\r\n    .desk-camera-icon {\r\n      top: -20px;\r\n      left: 10px;\r\n      width: 45px;\r\n      height: 45px;\r\n      animation: floatSoft 5s ease-in-out infinite 0.5s;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 02 \u2014 FEATURED STORY (70\/30 Asymmetrical Split)\r\n       ========================================================================== *\/\r\n    .section-featured-story {\r\n      padding: 120px 0;\r\n      background: var(--bg-paper-light);\r\n      position: relative;\r\n      border-bottom: 1px solid var(--border-light);\r\n    }\r\n\r\n    .featured-grid {\r\n      display: grid;\r\n      grid-template-columns: 70% 30%;\r\n      gap: 50px;\r\n      align-items: center;\r\n    }\r\n\r\n    .featured-img-wrapper {\r\n      position: relative;\r\n      border-radius: 24px;\r\n      overflow: hidden;\r\n      box-shadow: var(--shadow-lg);\r\n      border: 1px solid var(--border-accent);\r\n      height: 480px;\r\n    }\r\n\r\n    .featured-img-wrapper img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.7s ease;\r\n    }\r\n\r\n    .featured-img-wrapper:hover img {\r\n      transform: scale(1.04);\r\n    }\r\n\r\n    .gold-page-corner {\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      width: 0;\r\n      height: 0;\r\n      border-top: 60px solid var(--gold);\r\n      border-left: 60px solid transparent;\r\n      box-shadow: -4px 4px 10px rgba(0,0,0,0.15);\r\n      z-index: 5;\r\n    }\r\n\r\n    .featured-content-box {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 24px;\r\n      padding: 40px;\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    .featured-excerpt {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.15rem;\r\n      color: var(--text-body);\r\n      line-height: 1.75;\r\n      margin-bottom: 28px;\r\n      font-style: italic;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 04 \u2014 \"CHOOSE YOUR TRAIL\" (Filter Trail Markers)\r\n       ========================================================================== *\/\r\n    .section-choose-trail {\r\n      padding: 70px 0 30px 0;\r\n      background: var(--bg-cream);\r\n      text-align: center;\r\n      position: relative;\r\n    }\r\n\r\n    .trail-filters-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 14px;\r\n      flex-wrap: wrap;\r\n      margin-top: 25px;\r\n    }\r\n\r\n    .trail-marker-pill {\r\n      background: #FFFFFF;\r\n      border: 1.5px solid var(--border-accent);\r\n      padding: 12px 24px;\r\n      border-radius: 50px;\r\n      font-family: var(--font-body);\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.12em;\r\n      color: var(--text-dark);\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      box-shadow: var(--shadow-sm);\r\n    }\r\n\r\n    .trail-marker-pill .star-accent {\r\n      color: var(--gold);\r\n      font-size: 0.85rem;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .trail-marker-pill:hover,\r\n    .trail-marker-pill.active {\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      border-color: var(--terracotta);\r\n      box-shadow: var(--shadow-terracotta);\r\n      transform: translateY(-3px);\r\n    }\r\n\r\n    .trail-marker-pill:hover .star-accent,\r\n    .trail-marker-pill.active .star-accent {\r\n      color: #FFFFFF;\r\n      transform: rotate(45deg);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 03 \u2014 EXPANDABLE BLOG CARDS (Full Length Rich Accordion)\r\n       ========================================================================== *\/\r\n    .section-expandable-cards {\r\n      padding: 40px 0 130px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n    }\r\n\r\n    .cards-accordion-container {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 24px;\r\n    }\r\n\r\n    .expandable-blog-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 24px;\r\n      overflow: hidden;\r\n      box-shadow: var(--shadow-md);\r\n      transition: all 0.5s var(--transition-smooth);\r\n      cursor: pointer;\r\n      position: relative;\r\n    }\r\n\r\n    \/* Collapsed Header Bar *\/\r\n    .card-collapsed-header {\r\n      padding: 28px 36px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 20px;\r\n      background: #FFFDF8;\r\n      transition: background 0.3s ease;\r\n    }\r\n\r\n    .card-header-left {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 24px;\r\n    }\r\n\r\n    .card-thumb-mini {\r\n      width: 90px;\r\n      height: 70px;\r\n      border-radius: 12px;\r\n      object-fit: cover;\r\n      box-shadow: var(--shadow-sm);\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .expandable-blog-card:hover .card-thumb-mini {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .card-meta-category {\r\n      font-size: 0.75rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.2em;\r\n      color: var(--terracotta);\r\n      text-transform: uppercase;\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    .card-meta-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.4rem;\r\n      font-weight: 800;\r\n      color: var(--text-dark);\r\n      line-height: 1.25;\r\n    }\r\n\r\n    .card-toggle-btn {\r\n      width: 48px;\r\n      height: 48px;\r\n      border-radius: 50%;\r\n      background: var(--terracotta-light);\r\n      color: var(--terracotta);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.6rem;\r\n      font-weight: 700;\r\n      transition: all 0.4s ease;\r\n      border: 1px solid rgba(217, 83, 30, 0.2);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .expandable-blog-card:hover .card-toggle-btn {\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      transform: rotate(90deg);\r\n    }\r\n\r\n    \/* Expanded Content Drawer *\/\r\n    .card-expanded-body {\r\n      max-height: 0;\r\n      opacity: 0;\r\n      overflow: hidden;\r\n      transition: max-height 0.8s var(--transition-smooth), opacity 0.6s ease, padding 0.5s ease;\r\n      padding: 0 45px;\r\n      background: #FFFFFF;\r\n      border-top: 1px solid var(--border-light);\r\n    }\r\n\r\n    .expandable-blog-card.is-expanded {\r\n      border-color: var(--terracotta);\r\n      box-shadow: 0 24px 50px var(--terracotta-glow);\r\n    }\r\n\r\n    .expandable-blog-card.is-expanded .card-expanded-body {\r\n      max-height: 3000px;\r\n      opacity: 1;\r\n      padding: 40px 45px 55px 45px;\r\n    }\r\n\r\n    .expandable-blog-card.is-expanded .card-toggle-btn {\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      transform: rotate(45deg);\r\n    }\r\n\r\n    .expanded-main-img {\r\n      width: 100%;\r\n      height: 420px;\r\n      object-fit: cover;\r\n      border-radius: 20px;\r\n      margin-bottom: 35px;\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    .blog-article-content {\r\n      max-width: 100%;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .article-subtitle {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.8rem;\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      margin: 28px 0 16px 0;\r\n      line-height: 1.3;\r\n    }\r\n\r\n    .article-paragraph {\r\n      font-size: 1.15rem;\r\n      color: var(--text-body);\r\n      line-height: 1.85;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .article-pull-quote {\r\n      background: var(--bg-paper-light);\r\n      border-left: 4px solid var(--terracotta);\r\n      padding: 24px 30px;\r\n      border-radius: 0 16px 16px 0;\r\n      font-family: var(--font-serif);\r\n      font-size: 1.3rem;\r\n      color: var(--terracotta-dark);\r\n      font-style: italic;\r\n      margin: 35px 0;\r\n      box-shadow: var(--shadow-sm);\r\n    }\r\n\r\n    \/* Responsive Queries *\/\r\n    @media (max-width: 1024px) {\r\n      .blog-hero-grid, .featured-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .card-collapsed-header {\r\n        padding: 20px;\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n      }\r\n\r\n      .card-header-left {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n      }\r\n\r\n      .card-expanded-body {\r\n        padding: 0 20px;\r\n      }\r\n\r\n      .expandable-blog-card.is-expanded .card-expanded-body {\r\n        padding: 25px 20px 35px 20px;\r\n      }\r\n\r\n      .blog-hero-title {\r\n        font-size: 3rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <main>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 01 \u2014 BLOG HERO (The Story Trail)\r\n         ========================================================================== -->\r\n    <section id=\"blog-hero\" class=\"blog-hero-section\">\r\n      \r\n      <!-- Alternating Paw Trail (Right Side) -->\r\n      <div class=\"paw-trail-right\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        <div class=\"blog-hero-grid\">\r\n          \r\n          <!-- Left Content -->\r\n          <div class=\"blog-hero-content reveal-on-scroll visible\">\r\n            <h1 class=\"blog-hero-title\">\r\n              THE STORY<br>\r\n              <span style=\"color: var(--terracotta); font-family: var(--font-serif); font-style: italic;\">TRAIL<\/span>\r\n            <\/h1>\r\n\r\n            <div class=\"blog-hero-subtext\">\r\n              Stories, adventures, ideas, and little discoveries from along the way.\r\n            <\/div>\r\n\r\n            <div class=\"decorative-trail-line\">\r\n              \u2726 STORIES \u00b7 ADVENTURES \u00b7 DISCOVERIES \u2726\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right Visual Stage: Open Explorer's Journal -->\r\n          <div class=\"desk-hero-stage reveal-on-scroll visible\" style=\"transition-delay: 0.2s;\">\r\n            \r\n            <!-- Compass SVG -->\r\n            <div class=\"desk-item desk-compass\">\r\n              <svg viewBox=\"0 0 100 100\" fill=\"none\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"44\" stroke=\"#D4AF37\" stroke-width=\"4\"\/>\r\n                <path d=\"M50 12 L50 88 M12 50 L88 50\" stroke=\"#D4AF37\" stroke-width=\"2\" stroke-dasharray=\"3 3\"\/>\r\n                <polygon points=\"50,18 58,50 50,44 42,50\" fill=\"#D9531E\"\/>\r\n                <polygon points=\"50,82 58,50 50,56 42,50\" fill=\"#1C1917\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Folded Map SVG -->\r\n            <div class=\"desk-item desk-map\">\r\n              <svg viewBox=\"0 0 80 80\" fill=\"none\">\r\n                <polygon points=\"10,15 30,20 50,15 70,20 70,65 50,60 30,65 10,60\" fill=\"#FAF2E4\" stroke=\"#D8C9B7\" stroke-width=\"2\"\/>\r\n                <path d=\"M30 20 V65 M50 15 V60\" stroke=\"#D8C9B7\" stroke-width=\"2\" stroke-dasharray=\"2 2\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Paper Airplane SVG -->\r\n            <div class=\"desk-item desk-airplane\">\r\n              <svg viewBox=\"0 0 60 60\" fill=\"none\">\r\n                <path d=\"M10 30 L50 10 L30 50 L25 35 Z\" fill=\"#D9531E\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Camera SVG -->\r\n            <div class=\"desk-item desk-camera-icon\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"var(--terracotta)\"><path d=\"M4 4h3l2-2h6l2 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 3a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z\"\/><\/svg>\r\n            <\/div>\r\n\r\n            <!-- Open Journal Card -->\r\n            <div class=\"open-journal-card\">\r\n              <div style=\"font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; color: var(--terracotta); text-transform: uppercase; text-align: center;\">\r\n                EXPLORER'S JOURNAL\r\n              <\/div>\r\n              <div class=\"journal-handwritten-quote\">\r\n                \"Every adventure leaves a story behind.\" \ud83d\udc3e\r\n              <\/div>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 02 \u2014 FEATURED STORY (70\/30 Split)\r\n         ========================================================================== -->\r\n    <section id=\"featured-story\" class=\"section-featured-story\">\r\n      \r\n      <!-- Alternating Paw Trail (Left Side) -->\r\n      <div class=\"paw-trail-left\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"featured-grid\">\r\n          \r\n          <!-- Left 70%: Cinematic Image -->\r\n          <div class=\"featured-img-wrapper reveal-on-scroll\">\r\n            <div class=\"gold-page-corner\"><\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/trail-2_converted.png\" alt=\"Featured Story Explorer Scene\">\r\n          <\/div>\r\n\r\n          <!-- Right 30%: Content Box -->\r\n          <div class=\"featured-content-box reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-eyebrow\">ADVENTURE JOURNAL<\/div>\r\n            <h2 class=\"section-title\" style=\"font-size: 2.2rem; margin-bottom: 18px;\">THE WORLD IS FULL OF STORIES<\/h2>\r\n\r\n            <p class=\"featured-excerpt\">\r\n              Some stories begin on a page. Others begin with a place, a person, or a moment you never expected.\r\n            <\/p>\r\n\r\n            <div>\r\n              <a href=\"#choose-trail\" class=\"btn-primary\">\r\n                OPEN THE STORY \u2192\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 04 \u2014 \"CHOOSE YOUR TRAIL\" (Filter Trail Markers)\r\n         ========================================================================== -->\r\n    <section id=\"choose-trail\" class=\"section-choose-trail\">\r\n      \r\n      <!-- Alternating Paw Trail (Right Side) -->\r\n      <div class=\"paw-trail-right\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"section-eyebrow\">EXPLORE BY CATEGORY<\/div>\r\n        <h2 class=\"section-title\">CHOOSE YOUR TRAIL<\/h2>\r\n\r\n        <div class=\"trail-filters-wrapper reveal-on-scroll\">\r\n          <button class=\"trail-marker-pill active\" data-filter=\"all\">\r\n            <span class=\"star-accent\">\u2726<\/span> ALL STORIES\r\n          <\/button>\r\n          <button class=\"trail-marker-pill\" data-filter=\"adventure\">\r\n            <span class=\"star-accent\">\u2726<\/span> ADVENTURE\r\n          <\/button>\r\n          <button class=\"trail-marker-pill\" data-filter=\"storytelling\">\r\n            <span class=\"star-accent\">\u2726<\/span> STORYTELLING\r\n          <\/button>\r\n          <button class=\"trail-marker-pill\" data-filter=\"culture\">\r\n            <span class=\"star-accent\">\u2726<\/span> CULTURE\r\n          <\/button>\r\n          <button class=\"trail-marker-pill\" data-filter=\"writing\">\r\n            <span class=\"star-accent\">\u2726<\/span> WRITING\r\n          <\/button>\r\n          <button class=\"trail-marker-pill\" data-filter=\"books\">\r\n            <span class=\"star-accent\">\u2726<\/span> BOOKS\r\n          <\/button>\r\n          <button class=\"trail-marker-pill\" data-filter=\"inspiration\">\r\n            <span class=\"star-accent\">\u2726<\/span> INSPIRATION\r\n          <\/button>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 03 \u2014 EXPANDABLE BLOG CARDS (Rich Full Length Blogs)\r\n         ========================================================================== -->\r\n    <section id=\"blog-cards\" class=\"section-expandable-cards\">\r\n      \r\n      <!-- Alternating Paw Trail (Left Side) -->\r\n      <div class=\"paw-trail-left\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"cards-accordion-container\">\r\n          \r\n          <!-- CARD 01 \u2014 ADVENTURE -->\r\n          <div class=\"expandable-blog-card reveal-on-scroll\" data-category=\"adventure\">\r\n            \r\n            <div class=\"card-collapsed-header\">\r\n              <div class=\"card-header-left\">\r\n                <img decoding=\"async\" class=\"card-thumb-mini\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/trail-1_converted.png\" alt=\"Adventure\">\r\n                <div>\r\n                  <div class=\"card-meta-category\">ADVENTURE<\/div>\r\n                  <h3 class=\"card-meta-title\">WHERE THE NEXT ADVENTURE BEGINS<\/h3>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"card-toggle-btn\">+<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"card-expanded-body\">\r\n              <img decoding=\"async\" class=\"expanded-main-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/trail-1_converted.png\" alt=\"Child Explorer Backpack\">\r\n              \r\n              <div class=\"blog-article-content\">\r\n                <p class=\"article-paragraph\">\r\n                  Traveling across borders and stepping outside familiar boundaries has always been at the heart of Christiana's creative journey. Every new landscape carries a quiet magic waiting to be unlocked by an open mind and a curious heart.\r\n                <\/p>\r\n\r\n                <h4 class=\"article-subtitle\">Stepping Into the Unknown<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  Whether spending meaningful time with Indigenous communities in Central America, hiking through lush green rainforest trails, or standing before centuries-old Mayan ruins, every step teaches us how vast, interconnected, and breathtaking our world truly is.\r\n                <\/p>\r\n\r\n                <div class=\"article-pull-quote\">\r\n                  \"Adventures aren't just about reaching a destination; they are about opening your eyes to the beauty hidden in everyday moments.\"\r\n                <\/div>\r\n\r\n                <h4 class=\"article-subtitle\">How Nature Inspires Storytelling<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  When children and young readers explore nature, their imaginations come alive. A rustling leaf becomes a secret message, a winding path becomes a quest, and a small lost puppy like Nico becomes a symbol of courage and resilience. Every adventure leaves a story behind for those willing to listen.\r\n                <\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <!-- CARD 02 \u2014 STORYTELLING -->\r\n          <div class=\"expandable-blog-card reveal-on-scroll\" data-category=\"storytelling\" style=\"transition-delay: 0.1s;\">\r\n            \r\n            <div class=\"card-collapsed-header\">\r\n              <div class=\"card-header-left\">\r\n                <img decoding=\"async\" class=\"card-thumb-mini\" src=\"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=400&q=80\" alt=\"Storytelling\">\r\n                <div>\r\n                  <div class=\"card-meta-category\">STORYTELLING<\/div>\r\n                  <h3 class=\"card-meta-title\">WHY EVERYONE HAS A STORY<\/h3>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"card-toggle-btn\">+<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"card-expanded-body\">\r\n              <img decoding=\"async\" class=\"expanded-main-img\" src=\"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1000&q=80\" alt=\"Story Fragments\">\r\n              \r\n              <div class=\"blog-article-content\">\r\n                <p class=\"article-paragraph\">\r\n                  \"I've always loved stories. Stories from strangers, friends, travelers, and people I've met along the way. Some make you laugh. Some break your heart. Some inspire you. Everyone has a story worth hearing.\"\r\n                <\/p>\r\n\r\n                <h4 class=\"article-subtitle\">The Power of Listening<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  In a fast-paced world, sitting down to listen to someone else's journey is one of the most profound acts of connection. Strangers we meet in coffee shops, vendors on street corners, and fellow travelers all hold wisdom that reshapes our perspective.\r\n                <\/p>\r\n\r\n                <div class=\"article-pull-quote\">\r\n                  \"No person is an island. Our lives are woven together by the stories we choose to share.\"\r\n                <\/div>\r\n\r\n                <h4 class=\"article-subtitle\">Building Empathy Through Narratives<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  Books like *That One Puppy* serve as gentle mirrors and windows. They allow young readers to see themselves in characters who feel lost, while teaching them empathy for those going through lonely seasons. Storytelling remains the greatest tool we have to bring hearts closer together.\r\n                <\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <!-- CARD 03 \u2014 CULTURE -->\r\n          <div class=\"expandable-blog-card reveal-on-scroll\" data-category=\"culture\" style=\"transition-delay: 0.2s;\">\r\n            \r\n            <div class=\"card-collapsed-header\">\r\n              <div class=\"card-header-left\">\r\n                <img decoding=\"async\" class=\"card-thumb-mini\" src=\"https:\/\/images.unsplash.com\/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=400&q=80\" alt=\"Culture\">\r\n                <div>\r\n                  <div class=\"card-meta-category\">CULTURE<\/div>\r\n                  <h3 class=\"card-meta-title\">A WORLD FULL OF DIFFERENT STORIES<\/h3>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"card-toggle-btn\">+<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"card-expanded-body\">\r\n              <img decoding=\"async\" class=\"expanded-main-img\" src=\"https:\/\/images.unsplash.com\/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=1000&q=80\" alt=\"World Map Culture\">\r\n              \r\n              <div class=\"blog-article-content\">\r\n                <p class=\"article-paragraph\">\r\n                  Culture is the colorful tapestry of human experience. As a dual-language learner in English and Spanish, and someone who studies Korean for fun, Christiana believes that learning new languages opens secret doorways into different ways of thinking and feeling.\r\n                <\/p>\r\n\r\n                <h4 class=\"article-subtitle\">Languages as Bridges<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  When you learn another language, you don't just memorize words; you learn how another community perceives warmth, joy, and hope. It allows us to honor different backgrounds without judgment or stereotypes.\r\n                <\/p>\r\n\r\n                <div class=\"article-pull-quote\">\r\n                  \"Understanding another language is like discovering a second soul within yourself.\"\r\n                <\/div>\r\n\r\n                <h4 class=\"article-subtitle\">Global Wisdom for Young Minds<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  Sharing global perspectives with children builds a generation of open-minded thinkers. Through stories that celebrate diversity, kids discover that despite our different languages, foods, and customs, we all share the same human desire for love, belonging, and friendship.\r\n                <\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <!-- CARD 04 \u2014 WRITING -->\r\n          <div class=\"expandable-blog-card reveal-on-scroll\" data-category=\"writing\" style=\"transition-delay: 0.3s;\">\r\n            \r\n            <div class=\"card-collapsed-header\">\r\n              <div class=\"card-header-left\">\r\n                <img decoding=\"async\" class=\"card-thumb-mini\" src=\"https:\/\/images.unsplash.com\/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=400&q=80\" alt=\"Writing Desk\">\r\n                <div>\r\n                  <div class=\"card-meta-category\">WRITING<\/div>\r\n                  <h3 class=\"card-meta-title\">WHERE DO STORIES COME FROM?<\/h3>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"card-toggle-btn\">+<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"card-expanded-body\">\r\n              <img decoding=\"async\" class=\"expanded-main-img\" src=\"https:\/\/images.unsplash.com\/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=1000&q=80\" alt=\"Writing Desk Notebook Pencil\">\r\n              \r\n              <div class=\"blog-article-content\">\r\n                <p class=\"article-paragraph\">\r\n                  People often ask authors: *\"Where do your stories come from?\"* The truth is, stories don't usually appear out of thin air. They grow out of small observations, quiet memories, and real emotional experiences.\r\n                <\/p>\r\n\r\n                <h4 class=\"article-subtitle\">The Spark Behind \"That One Puppy\"<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  A simple moment\u2014seeing a lost puppy following the mouth-watering scent of hot dogs down a busy city avenue\u2014became the foundation for Nico's entire adventure. What started as a fleeting thought turned into notebook sketches, character ideas, and eventually a full picture book manuscript.\r\n                <\/p>\r\n\r\n                <div class=\"article-pull-quote\">\r\n                  \"Inspiration is everywhere if you train your eyes to see the extraordinary inside the ordinary.\"\r\n                <\/div>\r\n\r\n                <h4 class=\"article-subtitle\">Advice for Young Writers<\/h4>\r\n                <p class=\"article-paragraph\">\r\n                  If you want to write stories, carry a small notebook wherever you go. Write down funny quotes you hear, doodle interesting animals, and never be afraid of messy first drafts. Every great manuscript starts with a single written word.\r\n                <\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/main>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      \/\/ Scroll Reveal Observer\r\n      const observerOptions = {\r\n        root: null,\r\n        rootMargin: '0px',\r\n        threshold: 0.15\r\n      };\r\n\r\n      const revealObserver = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('visible');\r\n          }\r\n        });\r\n      }, observerOptions);\r\n\r\n      document.querySelectorAll('.reveal-on-scroll').forEach(el => {\r\n        revealObserver.observe(el);\r\n      });\r\n\r\n      \/\/ Expandable Accordion Card Logic\r\n      const cards = document.querySelectorAll('.expandable-blog-card');\r\n\r\n      cards.forEach(card => {\r\n        const header = card.querySelector('.card-collapsed-header');\r\n        \r\n        header.addEventListener('click', () => {\r\n          const isCurrentlyExpanded = card.classList.contains('is-expanded');\r\n\r\n          \/\/ Close all other cards first\r\n          cards.forEach(c => {\r\n            if (c !== card) {\r\n              c.classList.remove('is-expanded');\r\n            }\r\n          });\r\n\r\n          \/\/ Toggle current card\r\n          if (isCurrentlyExpanded) {\r\n            card.classList.remove('is-expanded');\r\n          } else {\r\n            card.classList.add('is-expanded');\r\n          }\r\n        });\r\n      });\r\n\r\n      \/\/ Category Trail Filtering Logic\r\n      const filterPills = document.querySelectorAll('.trail-marker-pill');\r\n\r\n      filterPills.forEach(pill => {\r\n        pill.addEventListener('click', () => {\r\n          filterPills.forEach(p => p.classList.remove('active'));\r\n          pill.classList.add('active');\r\n\r\n          const filterCategory = pill.getAttribute('data-filter');\r\n\r\n          cards.forEach(card => {\r\n            const cardCategory = card.getAttribute('data-category');\r\n\r\n            if (filterCategory === 'all' || cardCategory === filterCategory) {\r\n              card.style.display = 'block';\r\n              setTimeout(() => {\r\n                card.style.opacity = '1';\r\n                card.style.transform = 'translateY(0)';\r\n              }, 50);\r\n            } else {\r\n              card.style.opacity = '0';\r\n              card.style.transform = 'translateY(20px)';\r\n              setTimeout(() => {\r\n                card.style.display = 'none';\r\n              }, 300);\r\n            }\r\n          });\r\n        });\r\n      });\r\n\r\n      \/\/ Smooth scroll for anchor links\r\n      document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n        anchor.addEventListener('click', function(e) {\r\n          e.preventDefault();\r\n          const targetId = this.getAttribute('href');\r\n          if (targetId === '#') return;\r\n          const targetElement = document.querySelector(targetId);\r\n          if (targetElement) {\r\n            targetElement.scrollIntoView({\r\n              behavior: 'smooth',\r\n              block: 'start'\r\n            });\r\n          }\r\n        });\r\n      });\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>THE STORY TRAIL Stories, adventures, ideas, and little discoveries from along the way. \u2726 STORIES \u00b7 ADVENTURES \u00b7 DISCOVERIES \u2726 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-275","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":16,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/275\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/275\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/media?parent=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}