{"id":285,"date":"2026-08-25T19:13:36","date_gmt":"2026-08-25T19:13:36","guid":{"rendered":"https:\/\/demowebdesign.live\/christiana\/?page_id=285"},"modified":"2026-08-26T17:57:34","modified_gmt":"2026-08-26T17:57:34","slug":"see-the-adventure","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/christiana\/see-the-adventure\/","title":{"rendered":"See The Adventure"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"285\" class=\"elementor elementor-285\">\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 the visual album and video stories of Christiana Jones Marzett \u2014 author of That One Puppy. Discover travel photos, book readings, and behind-the-scenes moments.\">\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(2rem, 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      text-align: center;\r\n      white-space: nowrap;\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    }\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 \u2014 decorative only, hidden below tablet *\/\r\n    .paw-trail-left {\r\n      position: absolute;\r\n      left: 25px;\r\n      top: 10%;\r\n      bottom: 10%;\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: 10%;\r\n      bottom: 10%;\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 HERO (See The Adventure)\r\n       ========================================================================== *\/\r\n    .gallery-hero-section {\r\n      min-height: 90vh;\r\n      position: relative;\r\n      padding: 100px 0 120px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      background: radial-gradient(circle at 10% 20%, rgba(249, 242, 216, 0.65) 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    .gallery-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    .gallery-hero-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(2.6rem, 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: 22px;\r\n    }\r\n\r\n    .gallery-hero-subtext {\r\n      font-family: var(--font-serif);\r\n      font-size: clamp(1.1rem, 2vw, 1.45rem);\r\n      color: var(--text-body);\r\n      line-height: 1.6;\r\n      margin-bottom: 30px;\r\n      border-left: 4px solid var(--gold);\r\n      padding-left: 20px;\r\n      font-style: italic;\r\n    }\r\n\r\n    \/* Hero Collage Stage *\/\r\n    .hero-collage-stage {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n    }\r\n\r\n    .collage-main-card {\r\n      position: relative;\r\n      width: 100%;\r\n      max-width: 420px;\r\n      height: 480px;\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    }\r\n\r\n    .collage-main-card img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n    }\r\n\r\n    .collage-polaroid-overlap {\r\n      position: absolute;\r\n      bottom: -30px;\r\n      left: -40px;\r\n      width: 210px;\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      padding: 12px 12px 28px 12px;\r\n      border-radius: 12px;\r\n      box-shadow: var(--shadow-md);\r\n      transform: rotate(-10deg);\r\n      animation: floatSoft 6s ease-in-out infinite;\r\n      z-index: 5;\r\n    }\r\n\r\n    .collage-polaroid-overlap img {\r\n      width: 100%;\r\n      height: 140px;\r\n      object-fit: cover;\r\n      border-radius: 6px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .collage-polaroid-caption {\r\n      font-family: var(--font-handwriting);\r\n      font-size: 1.25rem;\r\n      color: var(--text-dark);\r\n      text-align: center;\r\n    }\r\n\r\n    \/* Floating Hero SVGs *\/\r\n    .hero-svg-compass {\r\n      position: absolute;\r\n      top: -35px;\r\n      right: -25px;\r\n      width: 75px;\r\n      height: 75px;\r\n      animation: rotateCompass 35s linear infinite;\r\n      z-index: 6;\r\n    }\r\n\r\n    .hero-svg-airplane {\r\n      position: absolute;\r\n      top: 35%;\r\n      right: -45px;\r\n      width: 60px;\r\n      animation: floatSoft 7s ease-in-out infinite 1s;\r\n      z-index: 6;\r\n    }\r\n\r\n    .hero-svg-camera {\r\n      position: absolute;\r\n      bottom: -20px;\r\n      right: 20px;\r\n      width: 55px;\r\n      height: 55px;\r\n      animation: floatSoft 6.5s ease-in-out infinite 0.5s;\r\n      z-index: 6;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 02 \u2014 THE WORLD BEYOND THE PAGES (60\/40 Asymmetrical Split)\r\n       ========================================================================== *\/\r\n    .section-world-beyond {\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    .world-beyond-grid {\r\n      display: grid;\r\n      grid-template-columns: 60% 40%;\r\n      gap: 50px;\r\n      align-items: center;\r\n    }\r\n\r\n    .world-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    .world-img-wrapper img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n    }\r\n\r\n    .gold-corner-accent {\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    .world-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    .world-pills-row {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 12px;\r\n      margin-top: 24px;\r\n    }\r\n\r\n    .world-pill-tag {\r\n      background: var(--terracotta-light);\r\n      color: var(--terracotta);\r\n      border: 1px solid rgba(217, 83, 30, 0.2);\r\n      padding: 6px 18px;\r\n      border-radius: 30px;\r\n      font-size: 0.75rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.15em;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 03 \u2014 MOMENTS ALONG THE WAY (FULL-WIDTH INFINITE LOOP SLIDER)\r\n       ========================================================================== *\/\r\n    .section-moments-gallery {\r\n      padding: 120px 0 100px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* Infinite Ticker Slider Wrappers *\/\r\n    .infinite-slider-track-container {\r\n      width: 100vw;\r\n      position: relative;\r\n      left: 50%;\r\n      right: 50%;\r\n      margin-left: -50vw;\r\n      margin-right: -50vw;\r\n      overflow: hidden;\r\n      padding: 30px 0;\r\n    }\r\n\r\n    .infinite-slider-track {\r\n      display: flex;\r\n      gap: 30px;\r\n      width: max-content;\r\n      animation: infiniteMarquee 32s linear infinite;\r\n    }\r\n\r\n    .infinite-slider-track:hover {\r\n      animation-play-state: paused;\r\n    }\r\n\r\n    @keyframes infiniteMarquee {\r\n      0% { transform: translateX(0); }\r\n      100% { transform: translateX(-50%); }\r\n    }\r\n\r\n    \/* Full Width Slider Cards *\/\r\n    .gallery-slider-card {\r\n      flex: 0 0 380px;\r\n      width: 380px;\r\n      height: 440px;\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      position: relative;\r\n      cursor: pointer;\r\n      transition: all 0.4s var(--transition-smooth);\r\n    }\r\n\r\n    .gallery-slider-card:hover {\r\n      transform: translateY(-10px) scale(1.03);\r\n      border-color: var(--terracotta);\r\n      box-shadow: 0 24px 50px var(--terracotta-glow);\r\n    }\r\n\r\n    .gallery-slider-img-box {\r\n      width: 100%;\r\n      height: 100%;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .gallery-slider-img-box img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.6s ease;\r\n    }\r\n\r\n    .gallery-slider-card:hover .gallery-slider-img-box img {\r\n      transform: scale(1.08);\r\n    }\r\n\r\n    .gallery-slider-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(to top, rgba(20, 17, 15, 0.85) 0%, transparent 60%);\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: flex-end;\r\n      padding: 24px;\r\n      opacity: 0;\r\n      transition: opacity 0.4s ease;\r\n    }\r\n\r\n    .gallery-slider-card:hover .gallery-slider-overlay {\r\n      opacity: 1;\r\n    }\r\n\r\n    \/* On touch devices there's no hover \u2014 always show the overlay so the caption is reachable *\/\r\n    @media (hover: none) {\r\n      .gallery-slider-overlay {\r\n        opacity: 1;\r\n        background: linear-gradient(to top, rgba(20, 17, 15, 0.75) 0%, transparent 70%);\r\n      }\r\n    }\r\n\r\n    \/* Lightbox Modal *\/\r\n    .gallery-lightbox-modal {\r\n      position: fixed;\r\n      inset: 0;\r\n      background: rgba(20, 17, 15, 0.94);\r\n      backdrop-filter: blur(10px);\r\n      z-index: 1000;\r\n      display: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 30px;\r\n    }\r\n\r\n    .lightbox-content-container {\r\n      position: relative;\r\n      max-width: 950px;\r\n      width: 100%;\r\n      max-height: 90vh;\r\n      background: var(--bg-dark-card);\r\n      border: 1px solid rgba(212, 175, 55, 0.4);\r\n      border-radius: 24px;\r\n      overflow: hidden;\r\n      box-shadow: 0 35px 80px rgba(0,0,0,0.8);\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .lightbox-close-btn {\r\n      position: absolute;\r\n      top: 20px;\r\n      right: 20px;\r\n      width: 44px;\r\n      height: 44px;\r\n      border-radius: 50%;\r\n      background: rgba(255,255,255,0.15);\r\n      color: #FFFFFF;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.5rem;\r\n      cursor: pointer;\r\n      transition: background 0.3s ease;\r\n      z-index: 10;\r\n    }\r\n\r\n    .lightbox-close-btn:hover {\r\n      background: var(--terracotta);\r\n    }\r\n\r\n    .lightbox-img-stage {\r\n      width: 100%;\r\n      height: 520px;\r\n      max-height: 60vh;\r\n      object-fit: contain;\r\n      background: #0D0B0A;\r\n    }\r\n\r\n    .lightbox-bottom-bar {\r\n      padding: 20px 30px;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 12px;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      border-top: 1px solid rgba(255,255,255,0.1);\r\n      color: var(--text-light);\r\n    }\r\n\r\n    .lightbox-nav-btn {\r\n      background: rgba(255,255,255,0.1);\r\n      color: #FFFFFF;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      border-radius: 30px;\r\n      cursor: pointer;\r\n      font-weight: 700;\r\n      transition: background 0.3s ease;\r\n    }\r\n\r\n    .lightbox-nav-btn:hover {\r\n      background: var(--terracotta);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 05 \u2014 FROM THE ADVENTURE ALBUM (Polaroid Timeline)\r\n       ========================================================================== *\/\r\n    .section-album-strip {\r\n      padding: 120px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n    }\r\n\r\n    .polaroid-strip-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 25px;\r\n      margin-top: 50px;\r\n    }\r\n\r\n    .polaroid-timeline-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 16px;\r\n      padding: 14px 14px 28px 14px;\r\n      box-shadow: var(--shadow-md);\r\n      text-align: center;\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .polaroid-timeline-card:hover {\r\n      transform: rotate(2deg) scale(1.03);\r\n    }\r\n\r\n    .polaroid-timeline-card img {\r\n      width: 100%;\r\n      height: 200px;\r\n      object-fit: cover;\r\n      border-radius: 8px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       RESPONSIVE BREAKPOINTS\r\n       ========================================================================== *\/\r\n\r\n    \/* Large tablets \/ small laptops *\/\r\n    @media (max-width: 1200px) {\r\n      .polaroid-strip-grid {\r\n        grid-template-columns: repeat(3, 1fr);\r\n      }\r\n    }\r\n\r\n    \/* Tablets \u2014 stack hero + world grids, start trimming decorative elements *\/\r\n    @media (max-width: 1024px) {\r\n      .gallery-hero-section {\r\n        padding: 80px 0 90px 0;\r\n        min-height: auto;\r\n      }\r\n\r\n      .gallery-hero-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 60px;\r\n      }\r\n\r\n      .hero-collage-stage {\r\n        max-width: 420px;\r\n        margin: 0 auto;\r\n      }\r\n\r\n      .world-beyond-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 40px;\r\n      }\r\n\r\n      .world-img-wrapper {\r\n        height: 380px;\r\n      }\r\n\r\n      .world-content-box {\r\n        padding: 32px;\r\n      }\r\n\r\n      .polaroid-strip-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      .gallery-slider-card {\r\n        flex: 0 0 320px;\r\n        width: 320px;\r\n        height: 380px;\r\n      }\r\n\r\n      \/* Decorative floating icons start crowding the layout once it's single-column *\/\r\n      .paw-trail-left,\r\n      .paw-trail-right {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    \/* Small tablets \/ large phones *\/\r\n    @media (max-width: 768px) {\r\n      .section-world-beyond,\r\n      .section-moments-gallery,\r\n      .section-album-strip {\r\n        padding: 80px 0;\r\n      }\r\n\r\n      .world-img-wrapper {\r\n        height: 300px;\r\n      }\r\n\r\n      .gold-corner-accent {\r\n        border-top-width: 44px;\r\n        border-left-width: 44px;\r\n      }\r\n\r\n      .world-content-box {\r\n        padding: 26px;\r\n      }\r\n\r\n      .collage-main-card {\r\n        height: 400px;\r\n      }\r\n\r\n      .collage-polaroid-overlap {\r\n        width: 160px;\r\n        left: -20px;\r\n        bottom: -25px;\r\n        padding: 10px 10px 22px 10px;\r\n      }\r\n\r\n      .collage-polaroid-overlap img {\r\n        height: 100px;\r\n      }\r\n\r\n      .collage-polaroid-caption {\r\n        font-size: 1.05rem;\r\n      }\r\n\r\n      \/* Prevent the floating SVGs from causing horizontal scroll *\/\r\n      .hero-svg-compass {\r\n        right: 0;\r\n        top: -20px;\r\n        width: 55px;\r\n        height: 55px;\r\n      }\r\n\r\n      .hero-svg-airplane {\r\n        right: -10px;\r\n        width: 46px;\r\n      }\r\n\r\n      .hero-svg-camera {\r\n        right: 10px;\r\n        bottom: -10px;\r\n        width: 44px;\r\n        height: 44px;\r\n      }\r\n\r\n      .gallery-slider-card {\r\n        flex: 0 0 280px;\r\n        width: 280px;\r\n        height: 340px;\r\n      }\r\n\r\n      .lightbox-content-container {\r\n        border-radius: 16px;\r\n      }\r\n\r\n      .lightbox-img-stage {\r\n        max-height: 45vh;\r\n      }\r\n\r\n      .lightbox-bottom-bar {\r\n        padding: 16px 20px;\r\n        justify-content: center;\r\n        text-align: center;\r\n      }\r\n    }\r\n\r\n    \/* Phones *\/\r\n    @media (max-width: 640px) {\r\n      .container {\r\n        padding: 0 18px;\r\n      }\r\n\r\n      .gallery-hero-title {\r\n        font-size: 2.4rem;\r\n      }\r\n\r\n      .gallery-hero-subtext {\r\n        font-size: 1.05rem;\r\n        padding-left: 16px;\r\n      }\r\n\r\n      .btn-primary {\r\n        width: 100%;\r\n        justify-content: center;\r\n        padding: 15px 28px;\r\n      }\r\n\r\n      .polaroid-strip-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 16px;\r\n        margin-top: 36px;\r\n      }\r\n\r\n      .polaroid-timeline-card img {\r\n        height: 140px;\r\n      }\r\n\r\n      .world-pills-row {\r\n        gap: 8px;\r\n      }\r\n\r\n      .world-pill-tag {\r\n        font-size: 0.7rem;\r\n        padding: 5px 14px;\r\n      }\r\n\r\n      .gallery-slider-card {\r\n        flex: 0 0 250px;\r\n        width: 250px;\r\n        height: 300px;\r\n      }\r\n\r\n      .infinite-slider-track {\r\n        gap: 20px;\r\n      }\r\n\r\n      .gallery-lightbox-modal {\r\n        padding: 14px;\r\n      }\r\n\r\n      .lightbox-close-btn {\r\n        width: 36px;\r\n        height: 36px;\r\n        font-size: 1.2rem;\r\n        top: 12px;\r\n        right: 12px;\r\n      }\r\n    }\r\n\r\n    \/* Very small phones *\/\r\n    @media (max-width: 420px) {\r\n      .collage-main-card {\r\n        height: 320px;\r\n      }\r\n\r\n      .collage-polaroid-overlap {\r\n        width: 130px;\r\n        left: -12px;\r\n        bottom: -18px;\r\n      }\r\n\r\n      .collage-polaroid-overlap img {\r\n        height: 80px;\r\n        margin-bottom: 6px;\r\n      }\r\n\r\n      .polaroid-strip-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      .polaroid-timeline-card img {\r\n        height: 180px;\r\n      }\r\n\r\n      .world-img-wrapper {\r\n        height: 240px;\r\n      }\r\n\r\n      .section-title {\r\n        font-size: 1.9rem;\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 HERO (See The Adventure)\r\n         ========================================================================== -->\r\n    <section id=\"gallery-hero\" class=\"gallery-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=\"gallery-hero-grid\">\r\n          \r\n          <!-- Left Content -->\r\n          <div class=\"reveal-on-scroll visible\">\r\n            <div class=\"section-eyebrow\">THE ADVENTURE ALBUM<\/div>\r\n            <h1 class=\"gallery-hero-title\">\r\n              SEE THE<br>\r\n              <span style=\"color: var(--terracotta); font-family: var(--font-serif); font-style: italic;\">ADVENTURE<\/span>\r\n            <\/h1>\r\n\r\n            <div class=\"gallery-hero-subtext\">\r\n              Step beyond the pages and discover the places, moments, memories, and stories that bring Christiana's world to life.\r\n            <\/div>\r\n\r\n            <div>\r\n              <a href=\"#moments-gallery\" class=\"btn-primary\">\r\n                EXPLORE THE ALBUM \u2193\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right Layered Collage Stage -->\r\n          <div class=\"hero-collage-stage reveal-on-scroll visible\" style=\"transition-delay: 0.2s;\">\r\n            \r\n            <!-- Animated Compass SVG -->\r\n            <div class=\"hero-svg-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            <!-- Paper Airplane SVG -->\r\n            <div class=\"hero-svg-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            <!-- Tiny Camera SVG -->\r\n            <div class=\"hero-svg-camera\">\r\n              <svg viewBox=\"0 0 60 60\" fill=\"none\">\r\n                <rect x=\"10\" y=\"20\" width=\"40\" height=\"28\" rx=\"6\" fill=\"#1A1614\" stroke=\"#D4AF37\" stroke-width=\"2\"\/>\r\n                <circle cx=\"30\" cy=\"34\" r=\"9\" fill=\"#D9531E\"\/>\r\n                <path d=\"M22 20 L26 14 H34 L38 20 Z\" fill=\"#D4AF37\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Main Collage Image -->\r\n            <div class=\"collage-main-card\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/adventure_converted.png\" alt=\"Explorer Scene Collage\">\r\n            <\/div>\r\n\r\n            <!-- Overlapping Polaroid -->\r\n            <div class=\"collage-polaroid-overlap\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/author.png\" alt=\"Christiana Storyteller\">\r\n              <div class=\"collage-polaroid-caption\">Memories \ud83d\udc3e<\/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 THE WORLD BEYOND THE PAGES (60\/40 Split)\r\n         ========================================================================== -->\r\n    <section id=\"world-beyond\" class=\"section-world-beyond\">\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=\"world-beyond-grid\">\r\n          \r\n          <!-- Left 60%: Large Travel Image -->\r\n          <div class=\"world-img-wrapper reveal-on-scroll\">\r\n            <div class=\"gold-corner-accent\"><\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=1200&q=80\" alt=\"World Travel Landscape\">\r\n          <\/div>\r\n\r\n          <!-- Right 40%: Text & Concept -->\r\n          <div class=\"world-content-box reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-eyebrow\">REAL WORLD INSPIRATION<\/div>\r\n            <h2 class=\"section-title\" style=\"font-size: 2.2rem; margin-bottom: 18px;\">THE WORLD BEYOND THE PAGES<\/h2>\r\n\r\n            <p style=\"font-size: 1.1rem; color: var(--text-body); line-height: 1.8;\">\r\n              Stories don't always begin with a blank page. Sometimes they begin with a place, a journey, a new culture, or a moment that stays with you forever.\r\n            <\/p>\r\n\r\n            <div class=\"world-pills-row\">\r\n              <div class=\"world-pill-tag\">EXPLORE<\/div>\r\n              <div class=\"world-pill-tag\">DISCOVER<\/div>\r\n              <div class=\"world-pill-tag\">IMAGINE<\/div>\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 03 \u2014 MOMENTS ALONG THE WAY (FULL-WIDTH INFINITE LOOP SLIDER)\r\n         ========================================================================== -->\r\n    <section id=\"moments-gallery\" class=\"section-moments-gallery\">\r\n      <div class=\"container\">\r\n        \r\n        <div style=\"text-align: center; max-width: 800px; margin: 0 auto 50px auto;\" class=\"reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\">PHOTO SCRAPBOOK<\/div>\r\n          <h2 class=\"section-title\">MOMENTS ALONG THE WAY<\/h2>\r\n          <p style=\"font-size: 1.15rem; color: var(--text-body);\">\r\n            A continuous gallery of places, people, adventures, and little moments worth remembering.\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Full-Width Infinite Marquee Slider -->\r\n      <div class=\"infinite-slider-track-container\">\r\n        <div class=\"infinite-slider-track\">\r\n          \r\n          <!-- SET 1 -->\r\n          <div class=\"gallery-slider-card\" data-category=\"adventures\" data-caption=\"Rainforest Trail Hike in Central America\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/adventure_converted-1.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/adventure_converted-1.png\" alt=\"Rainforest Hike\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"travel\" data-caption=\"Casco Viejo Streets, Panama\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-2.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-2.png\" alt=\"Casco Viejo Panama\">\r\n             \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"nico\" data-caption=\"The Real Hot Dog Stand Inspiration\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-3.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-3.png\" alt=\"Nico Hot Dog Stand\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"events\" data-caption=\"Live Story Reading at the Library\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-4.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-4.png\" alt=\"Library Event\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"behind-the-scenes\" data-caption=\"Writing Desk Journal & Pencil Sketches\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-5.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-5.png\" alt=\"Writing Desk Sketches\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SET 2 (DUPLICATE FOR SEAMLESS INFINITE LOOP) -->\r\n          <div class=\"gallery-slider-card\" data-category=\"adventures\" data-caption=\"Rainforest Trail Hike in Central America\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/adventure_converted-1.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/adventure_converted-1.png\" alt=\"Rainforest Hike\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"travel\" data-caption=\"Casco Viejo Streets, Panama\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-2.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-2.png\" alt=\"Casco Viejo Panama\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"nico\" data-caption=\"The Real Hot Dog Stand Inspiration\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-3.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-3.png\" alt=\"Nico Hot Dog Stand\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"events\" data-caption=\"Live Story Reading at the Library\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-4.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-4.png\" alt=\"Library Event\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gallery-slider-card\" data-category=\"behind-the-scenes\" data-caption=\"Writing Desk Journal & Pencil Sketches\" data-img=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-5.png\">\r\n            <div class=\"gallery-slider-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-5.png\" alt=\"Writing Desk Sketches\">\r\n              \r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/section>\r\n\r\n    <!-- Global Gallery Lightbox Modal -->\r\n    <div id=\"gallery-lightbox\" class=\"gallery-lightbox-modal\">\r\n      <div class=\"lightbox-content-container\">\r\n        <div id=\"lightbox-close\" class=\"lightbox-close-btn\">\u00d7<\/div>\r\n        <img decoding=\"async\" id=\"lightbox-main-img\" class=\"lightbox-img-stage\" src=\"\" alt=\"Full Screen Lightbox View\">\r\n        <div class=\"lightbox-bottom-bar\">\r\n          <div>\r\n            <div id=\"lightbox-category\" style=\"font-size: 0.75rem; font-weight: 800; color: var(--gold); letter-spacing: 0.15em;\">CATEGORY<\/div>\r\n            <div id=\"lightbox-caption\" style=\"font-family: var(--font-serif); font-size: 1.2rem; color: #FFFFFF;\">Caption text goes here...<\/div>\r\n          <\/div>\r\n          <div style=\"display: flex; gap: 12px; align-items: center;\">\r\n            <button id=\"lightbox-prev\" class=\"lightbox-nav-btn\">\u2190 PREV<\/button>\r\n            <span id=\"lightbox-counter\" style=\"font-size: 0.9rem; color: var(--text-light); font-weight: 700;\">01 \/ 05<\/span>\r\n            <button id=\"lightbox-next\" class=\"lightbox-nav-btn\">NEXT \u2192<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 05 \u2014 FROM THE ADVENTURE ALBUM (Polaroid Timeline)\r\n         ========================================================================== -->\r\n    <section id=\"album-timeline\" class=\"section-album-strip\">\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      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div style=\"text-align: center; max-width: 800px; margin: 0 auto;\" class=\"reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\">POLAROID TIMELINE<\/div>\r\n          <h2 class=\"section-title\">FROM THE ADVENTURE ALBUM<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"polaroid-strip-grid\">\r\n          \r\n          <div class=\"polaroid-timeline-card reveal-on-scroll\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 0.85rem; color: var(--terracotta); font-weight: 800; margin-bottom: 8px;\">01<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/explore.jpg\" alt=\"Polaroid 01\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-dark); font-weight: 800;\">EXPLORE<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"polaroid-timeline-card reveal-on-scroll\" style=\"transition-delay: 0.15s;\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 0.85rem; color: var(--terracotta); font-weight: 800; margin-bottom: 8px;\">02<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/discover.jpg\" alt=\"Polaroid 02\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-dark); font-weight: 800;\">DISCOVER<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"polaroid-timeline-card reveal-on-scroll\" style=\"transition-delay: 0.3s;\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 0.85rem; color: var(--terracotta); font-weight: 800; margin-bottom: 8px;\">03<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/create.jpg\" alt=\"Polaroid 03\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-dark); font-weight: 800;\">CREATE<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"polaroid-timeline-card reveal-on-scroll\" style=\"transition-delay: 0.45s;\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 0.85rem; color: var(--terracotta); font-weight: 800; margin-bottom: 8px;\">04<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/share.jpg\" alt=\"Polaroid 04\">\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-dark); font-weight: 800;\">SHARE<\/div>\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      \/\/ Lightbox Logic for Infinite Slider Cards\r\n      const lightboxModal = document.getElementById('gallery-lightbox');\r\n      const lightboxImg = document.getElementById('lightbox-main-img');\r\n      const lightboxCategory = document.getElementById('lightbox-category');\r\n      const lightboxCaption = document.getElementById('lightbox-caption');\r\n      const lightboxCounter = document.getElementById('lightbox-counter');\r\n      const lightboxClose = document.getElementById('lightbox-close');\r\n      const lightboxPrev = document.getElementById('lightbox-prev');\r\n      const lightboxNext = document.getElementById('lightbox-next');\r\n\r\n      const sliderCards = Array.from(document.querySelectorAll('.gallery-slider-card'));\r\n      let currentLightBoxIndex = 0;\r\n\r\n      function openLightbox(index) {\r\n        if (sliderCards.length === 0) return;\r\n\r\n        currentLightBoxIndex = index % 5; \/\/ Normalize across duplicate set\r\n        const card = sliderCards[currentLightBoxIndex];\r\n\r\n        lightboxImg.src = card.getAttribute('data-img');\r\n        lightboxCategory.textContent = (card.getAttribute('data-category') || 'GALLERY').toUpperCase();\r\n        lightboxCaption.textContent = card.getAttribute('data-caption') || '';\r\n        lightboxCounter.textContent = `${currentLightBoxIndex + 1} \/ 5`;\r\n\r\n        lightboxModal.style.display = 'flex';\r\n      }\r\n\r\n      sliderCards.forEach((card, idx) => {\r\n        card.addEventListener('click', () => {\r\n          openLightbox(idx);\r\n        });\r\n      });\r\n\r\n      lightboxClose.addEventListener('click', () => {\r\n        lightboxModal.style.display = 'none';\r\n      });\r\n\r\n      lightboxPrev.addEventListener('click', () => {\r\n        currentLightBoxIndex = (currentLightBoxIndex - 1 + 5) % 5;\r\n        openLightbox(currentLightBoxIndex);\r\n      });\r\n\r\n      lightboxNext.addEventListener('click', () => {\r\n        currentLightBoxIndex = (currentLightBoxIndex + 1) % 5;\r\n        openLightbox(currentLightBoxIndex);\r\n      });\r\n\r\n      \/\/ Keyboard Controls\r\n      document.addEventListener('keydown', (e) => {\r\n        if (lightboxModal.style.display === 'flex') {\r\n          if (e.key === 'Escape') lightboxModal.style.display = 'none';\r\n          if (e.key === 'ArrowLeft') lightboxPrev.click();\r\n          if (e.key === 'ArrowRight') lightboxNext.click();\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 ADVENTURE ALBUM SEE THE ADVENTURE Step beyond the pages and discover the places, moments, memories, and stories that bring [&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-285","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/285","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=285"}],"version-history":[{"count":31,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/285\/revisions"}],"predecessor-version":[{"id":497,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/285\/revisions\/497"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}