{"id":253,"date":"2026-08-25T18:19:08","date_gmt":"2026-08-25T18:19:08","guid":{"rendered":"https:\/\/demowebdesign.live\/christiana\/?page_id=253"},"modified":"2026-08-26T21:46:01","modified_gmt":"2026-08-26T21:46:01","slug":"meet-the-storyteller","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/christiana\/meet-the-storyteller\/","title":{"rendered":"Meet The StoryTeller"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"253\" class=\"elementor elementor-253\">\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=\"Discover Christiana Jones Marzett's world \u2014 author of That One Puppy. Learn about her travels, inspirations, dual language learning, and how Nico's story began.\">\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&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    \/* ==========================================================================\r\n       DESIGN SYSTEM & GLOBAL VARIABLES (Homepage Matching Palette)\r\n       ========================================================================== *\/\r\n    :root {\r\n      --bg-cream: #FAF6F0;\r\n      --bg-paper: #F4ECE1;\r\n      --bg-paper-light: #FBF8F4;\r\n      --bg-card: #FFFFFF;\r\n      --bg-dark: #1A1614;\r\n      --bg-dark-card: #26211E;\r\n      \r\n      --terracotta: #D9531E;\r\n      --terracotta-dark: #B54013;\r\n      --terracotta-light: #F7EAE3;\r\n      --terracotta-glow: rgba(217, 83, 30, 0.22);\r\n      \r\n      --gold: #D4AF37;\r\n      --gold-light: #F9F2D8;\r\n      --gold-glow: rgba(212, 175, 55, 0.3);\r\n      \r\n      --text-dark: #1C1917;\r\n      --text-body: #4A443F;\r\n      --text-muted: #786F66;\r\n      --text-light: #F4ECE1;\r\n      \r\n      --border-light: #E8DFD5;\r\n      --border-accent: #D6C7B7;\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 12px rgba(28, 25, 23, 0.04);\r\n      --shadow-md: 0 10px 30px rgba(28, 25, 23, 0.08);\r\n      --shadow-lg: 0 20px 45px rgba(28, 25, 23, 0.12);\r\n      --shadow-terracotta: 0 12px 30px rgba(217, 83, 30, 0.25);\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    }\r\n\r\n    .section-tag {\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: 12px;\r\n    }\r\n\r\n    .section-tag::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.2rem, 4.2vw, 3.6rem);\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      line-height: 1.2;\r\n      margin-bottom: 20px;\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 16px 36px rgba(217, 83, 30, 0.35);\r\n    }\r\n\r\n    \/* Tape Effect for Scrapbook vibe *\/\r\n    .tape-effect {\r\n      position: absolute;\r\n      top: -14px;\r\n      left: 50%;\r\n      transform: translateX(-50%) rotate(-2deg);\r\n      width: 90px;\r\n      height: 28px;\r\n      background: rgba(240, 230, 210, 0.85);\r\n      border-left: 2px dashed rgba(200, 190, 170, 0.6);\r\n      border-right: 2px dashed rgba(200, 190, 170, 0.6);\r\n      box-shadow: 0 2px 6px rgba(0,0,0,0.06);\r\n      z-index: 5;\r\n      backdrop-filter: blur(4px);\r\n    }\r\n\r\n    \/* Floating Keyframes *\/\r\n    @keyframes floatSoft {\r\n      0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n      50% { transform: translateY(-12px) rotate(2deg); }\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.8; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.15; 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.8; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.15; 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: 20px;\r\n      top: 15%;\r\n      bottom: 15%;\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: 20px;\r\n      top: 15%;\r\n      bottom: 15%;\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: 32px;\r\n      height: 32px;\r\n      fill: var(--terracotta);\r\n      opacity: 0.4;\r\n      filter: drop-shadow(0 2px 4px rgba(217, 83, 30, 0.2));\r\n    }\r\n\r\n    .paw-trail-left .paw-icon {\r\n      animation: pawStepLeft 4s ease-in-out infinite alternate;\r\n    }\r\n\r\n    .paw-trail-right .paw-icon {\r\n      animation: pawStepRight 4s 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.8s; transform: rotate(10deg) translateX(15px); }\r\n    .paw-trail-left .paw-icon:nth-child(3) { animation-delay: 1.6s; transform: rotate(-20deg); }\r\n    .paw-trail-left .paw-icon:nth-child(4) { animation-delay: 2.4s; transform: rotate(15deg) translateX(20px); }\r\n\r\n    .paw-trail-right .paw-icon:nth-child(1) { animation-delay: 0.3s; transform: rotate(20deg); }\r\n    .paw-trail-right .paw-icon:nth-child(2) { animation-delay: 1.1s; transform: rotate(-10deg) translateX(-15px); }\r\n    .paw-trail-right .paw-icon:nth-child(3) { animation-delay: 1.9s; transform: rotate(25deg); }\r\n    .paw-trail-right .paw-icon:nth-child(4) { animation-delay: 2.7s; transform: rotate(-15deg) translateX(-20px); }\r\n\r\n    .sparkle-particle {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      animation: floatSoft 6s ease-in-out infinite;\r\n    }\r\n\r\n    .reveal-on-scroll {\r\n      opacity: 0;\r\n      transform: translateY(30px);\r\n      transition: opacity 0.8s var(--transition-smooth), transform 0.8s 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 STORYBOOK HERO\r\n       ========================================================================== *\/\r\n    .hero-section {\r\n      min-height: 90vh;\r\n      position: relative;\r\n      padding: 80px 0 100px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      background: radial-gradient(circle at 10% 20%, rgba(249, 242, 216, 0.5) 0%, rgba(250, 246, 240, 1) 70%);\r\n      overflow: hidden;\r\n      border-bottom: 1px solid var(--border-light);\r\n    }\r\n\r\n    .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    .hero-content {\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .hero-subtitle-box {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: rgba(217, 83, 30, 0.08);\r\n      border: 1px solid rgba(217, 83, 30, 0.2);\r\n      padding: 6px 18px;\r\n      border-radius: 30px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .hero-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(3.2rem, 5.5vw, 5rem);\r\n      font-weight: 800;\r\n      color: var(--text-dark);\r\n      line-height: 1.08;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .hero-title span {\r\n      display: block;\r\n      color: var(--terracotta);\r\n      font-family: var(--font-serif);\r\n      font-style: italic;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .hero-quote {\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: 28px;\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-author-name {\r\n      font-family: var(--font-body);\r\n      font-size: 1.1rem;\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      letter-spacing: 0.08em;\r\n      margin-bottom: 36px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n    }\r\n\r\n    .hero-author-name::after {\r\n      content: '';\r\n      height: 2px;\r\n      width: 50px;\r\n      background: var(--terracotta);\r\n      display: inline-block;\r\n    }\r\n\r\n    .hero-visual-wrapper {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .portrait-frame-container {\r\n      position: relative;\r\n      width: 100%;\r\n      max-width: 440px;\r\n      background: #FFFFFF;\r\n      padding: 20px 20px 75px 20px;\r\n      border-radius: 18px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(2.5deg);\r\n      transition: transform 0.5s var(--transition-smooth), box-shadow 0.5s ease;\r\n      border: 1px solid var(--border-light);\r\n    }\r\n\r\n    .portrait-frame-container:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n      box-shadow: 0 30px 65px rgba(28, 25, 23, 0.16);\r\n    }\r\n\r\n    .portrait-img-box {\r\n      width: 100%;\r\n      height: 480px;\r\n      border-radius: 12px;\r\n      overflow: hidden;\r\n      position: relative;\r\n      background: linear-gradient(135deg, #E6DDD0 0%, #D8CCA8 100%);\r\n    }\r\n\r\n    .portrait-img-box 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    .portrait-frame-container:hover .portrait-img-box img {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .polaroid-caption {\r\n      position: absolute;\r\n      bottom: 22px;\r\n      left: 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      font-family: var(--font-handwriting);\r\n      font-size: 1.9rem;\r\n      color: var(--text-dark);\r\n    }\r\n\r\n    .floating-element {\r\n      position: absolute;\r\n      z-index: 10;\r\n      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.08));\r\n    }\r\n\r\n    .el-compass {\r\n      top: -30px;\r\n      right: -20px;\r\n      width: 80px;\r\n      height: 80px;\r\n      animation: rotateCompass 30s linear infinite;\r\n    }\r\n\r\n    .el-storybook {\r\n      bottom: 40px;\r\n      left: -40px;\r\n      width: 90px;\r\n      animation: floatSoft 5s ease-in-out infinite;\r\n    }\r\n\r\n    .el-pencil {\r\n      top: 40%;\r\n      left: -45px;\r\n      width: 70px;\r\n      transform: rotate(-25deg);\r\n      animation: floatSoft 7s ease-in-out infinite 1s;\r\n    }\r\n\r\n    .el-stamp {\r\n      bottom: -20px;\r\n      right: -10px;\r\n      background: #FFFFFF;\r\n      border: 2px dashed var(--terracotta);\r\n      padding: 12px;\r\n      border-radius: 50%;\r\n      transform: rotate(12deg);\r\n      font-family: var(--font-heading);\r\n      font-size: 0.7rem;\r\n      font-weight: 800;\r\n      color: var(--terracotta);\r\n      text-align: center;\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    .handwritten-arrow-svg {\r\n      position: absolute;\r\n      top: -50px;\r\n      left: -80px;\r\n      width: 120px;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 02 \u2014 THE GIRL BEHIND THE STORIES\r\n       ========================================================================== *\/\r\n    .section-girl-behind {\r\n      padding: 120px 0;\r\n      position: relative;\r\n      background-color: var(--bg-paper-light);\r\n      background-image: \r\n        linear-gradient(rgba(214, 199, 183, 0.25) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(214, 199, 183, 0.25) 1px, transparent 1px);\r\n      background-size: 32px 32px;\r\n      border-bottom: 1px solid var(--border-light);\r\n    }\r\n\r\n    .split-layout {\r\n      display: grid;\r\n      grid-template-columns: 45% 55%;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .lifestyle-image-stack {\r\n      position: relative;\r\n    }\r\n\r\n    .photo-card-main {\r\n      background: #FFFFFF;\r\n      padding: 16px 16px 50px 16px;\r\n      border-radius: 14px;\r\n      box-shadow: var(--shadow-md);\r\n      transform: rotate(-3deg);\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .photo-card-main img {\r\n      width: 100%;\r\n      height: 420px;\r\n      object-fit: cover;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .photo-card-secondary {\r\n      position: absolute;\r\n      bottom: -30px;\r\n      right: -30px;\r\n      width: 230px;\r\n      background: #FFFFFF;\r\n      padding: 12px 12px 40px 12px;\r\n      border-radius: 12px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(6deg);\r\n      z-index: 3;\r\n    }\r\n\r\n    .photo-card-secondary img {\r\n      width: 100%;\r\n      height: 165px;\r\n      object-fit: cover;\r\n      border-radius: 6px;\r\n    }\r\n\r\n    .manuscript-content {\r\n      position: relative;\r\n    }\r\n\r\n    .manuscript-text {\r\n      font-size: 1.15rem;\r\n      color: var(--text-dark);\r\n      line-height: 1.8;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .manuscript-highlight {\r\n      background: linear-gradient(120deg, rgba(249, 242, 216, 0.85) 0%, rgba(249, 242, 216, 0.85) 100%);\r\n      padding: 2px 6px;\r\n      border-radius: 4px;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .editorial-stats-row {\r\n      margin-top: 40px;\r\n      display: flex;\r\n      gap: 20px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .stat-pill {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      padding: 14px 24px;\r\n      border-radius: 50px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      box-shadow: var(--shadow-sm);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .stat-pill:hover {\r\n      border-color: var(--terracotta);\r\n      transform: translateY(-3px);\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    .stat-number {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.4rem;\r\n      font-weight: 800;\r\n      color: var(--terracotta);\r\n    }\r\n\r\n    .stat-label {\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      color: var(--text-dark);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 03 \u2014 A WORLD FULL OF STORIES (Professional Editorial Layout)\r\n       ========================================================================== *\/\r\n    .section-world-stories {\r\n      padding: 120px 0;\r\n      position: relative;\r\n      background: var(--bg-cream);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .map-header {\r\n      text-align: center;\r\n      max-width: 800px;\r\n      margin: 0 auto 50px auto;\r\n    }\r\n\r\n    .map-subheading {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.35rem;\r\n      color: var(--text-muted);\r\n      font-style: italic;\r\n    }\r\n\r\n    .map-wrapper-card {\r\n      background: #FFFDF9;\r\n      border: 2px solid var(--border-accent);\r\n      border-radius: 28px;\r\n      padding: 40px;\r\n      box-shadow: var(--shadow-lg);\r\n      position: relative;\r\n    }\r\n\r\n    \/* Top Route Connector Banner *\/\r\n    .route-banner-container {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100px;\r\n      background: radial-gradient(ellipse at 50% 0%, #FAF2E4 0%, #FFFDF9 80%);\r\n      border-radius: 18px;\r\n      border: 1px solid var(--border-light);\r\n      margin-bottom: 30px;\r\n      overflow: hidden;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .route-banner-svg {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .animated-flight-line {\r\n      stroke-dasharray: 10, 8;\r\n      animation: dashMove 20s linear infinite;\r\n    }\r\n\r\n    @keyframes dashMove {\r\n      to { stroke-dashoffset: -600; }\r\n    }\r\n\r\n    \/* 5 Location Cards Grid *\/\r\n    .map-locations-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(5, 1fr);\r\n      gap: 18px;\r\n      position: relative;\r\n      z-index: 5;\r\n    }\r\n\r\n    .location-pin-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 18px;\r\n      padding: 26px 18px;\r\n      text-align: center;\r\n      box-shadow: var(--shadow-md);\r\n      transition: all 0.4s var(--transition-smooth);\r\n      cursor: pointer;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      min-height: 265px;\r\n    }\r\n\r\n    .location-pin-card:hover {\r\n      transform: translateY(-8px);\r\n      border-color: var(--terracotta);\r\n      box-shadow: 0 20px 40px var(--terracotta-glow);\r\n    }\r\n\r\n    .pin-tag {\r\n      font-size: 0.65rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.15em;\r\n      color: var(--terracotta);\r\n      text-transform: uppercase;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .pin-icon-badge {\r\n      width: 60px;\r\n      height: 60px;\r\n      background: var(--terracotta-light);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-bottom: 16px;\r\n      transition: all 0.3s ease;\r\n      border: 1.5px solid rgba(217, 83, 30, 0.25);\r\n    }\r\n\r\n    .pin-icon-badge svg {\r\n      width: 28px;\r\n      height: 28px;\r\n      fill: none;\r\n      stroke: var(--terracotta);\r\n      stroke-width: 2;\r\n      stroke-linecap: round;\r\n      stroke-linejoin: round;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .location-pin-card:hover .pin-icon-badge {\r\n      background: var(--terracotta);\r\n      border-color: var(--terracotta);\r\n      transform: scale(1.12);\r\n    }\r\n\r\n    .location-pin-card:hover .pin-icon-badge svg {\r\n      stroke: #FFFFFF;\r\n      transform: scale(1.08);\r\n    }\r\n\r\n    .pin-country-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 0.95rem;\r\n      font-weight: 800;\r\n      color: var(--text-dark);\r\n      margin-bottom: 8px;\r\n      letter-spacing: 0.03em;\r\n    }\r\n\r\n    .pin-story-snippet {\r\n      font-size: 0.85rem;\r\n      color: var(--text-body);\r\n      line-height: 1.5;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 04 \u2014 ADVENTURE IS PART OF THE STORY (Scrapbook Cards)\r\n       ========================================================================== *\/\r\n    .section-adventure-cards {\r\n      padding: 120px 0;\r\n      background: var(--bg-paper-light);\r\n      position: relative;\r\n    }\r\n\r\n    .adventure-header {\r\n      text-align: center;\r\n      max-width: 760px;\r\n      margin: 0 auto 70px auto;\r\n    }\r\n\r\n    .adventure-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(5, 1fr);\r\n      gap: 20px;\r\n    }\r\n\r\n    .scrapbook-card {\r\n      background: #FFFFFF;\r\n      border-radius: 18px;\r\n      padding: 34px 20px;\r\n      text-align: center;\r\n      position: relative;\r\n      box-shadow: var(--shadow-md);\r\n      border: 1px solid var(--border-light);\r\n      transition: all 0.4s var(--transition-smooth);\r\n      cursor: pointer;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      min-height: 290px;\r\n    }\r\n\r\n    .scrapbook-card:nth-child(1) { transform: rotate(-2.5deg); }\r\n    .scrapbook-card:nth-child(2) { transform: rotate(1.8deg); }\r\n    .scrapbook-card:nth-child(3) { transform: rotate(-1.2deg); }\r\n    .scrapbook-card:nth-child(4) { transform: rotate(2.5deg); }\r\n    .scrapbook-card:nth-child(5) { transform: rotate(-2deg); }\r\n\r\n    .scrapbook-card:hover {\r\n      transform: rotate(0deg) translateY(-12px) scale(1.03);\r\n      box-shadow: 0 24px 48px rgba(28, 25, 23, 0.12);\r\n      border-color: var(--terracotta);\r\n      z-index: 10;\r\n    }\r\n\r\n    .card-category {\r\n      font-family: var(--font-body);\r\n      font-size: 0.75rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.2em;\r\n      text-transform: uppercase;\r\n      color: var(--terracotta);\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .card-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.4rem;\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .card-icon-wrapper {\r\n      width: 70px;\r\n      height: 70px;\r\n      background: var(--bg-cream);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin: 12px 0;\r\n      transition: all 0.3s ease;\r\n      border: 1px dashed var(--border-accent);\r\n    }\r\n\r\n    .card-icon-wrapper svg {\r\n      width: 34px;\r\n      height: 34px;\r\n      fill: var(--terracotta);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .scrapbook-card:hover .card-icon-wrapper {\r\n      background: var(--terracotta-light);\r\n      border-color: var(--terracotta);\r\n    }\r\n\r\n    .scrapbook-card:hover .card-icon-wrapper svg {\r\n      transform: scale(1.15) rotate(5deg);\r\n    }\r\n\r\n    .card-doodle-text {\r\n      font-family: var(--font-handwriting);\r\n      font-size: 1.3rem;\r\n      color: var(--text-muted);\r\n      margin-top: 10px;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 05 \u2014 WHERE NICO BEGAN (Dark Cinematic Section)\r\n       ========================================================================== *\/\r\n    .section-nico-began {\r\n      background: var(--bg-dark);\r\n      color: var(--text-light);\r\n      padding: 140px 0;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .nico-grid {\r\n      display: grid;\r\n      grid-template-columns: 0.9fr 1.1fr;\r\n      gap: 70px;\r\n      align-items: center;\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .nico-visual-card {\r\n      position: relative;\r\n      background: var(--bg-dark-card);\r\n      border: 1px solid rgba(255, 255, 255, 0.12);\r\n      padding: 24px;\r\n      border-radius: 22px;\r\n      box-shadow: 0 30px 60px rgba(0,0,0,0.5);\r\n      transform: rotate(-2deg);\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .nico-visual-card:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n    }\r\n\r\n    .nico-img-box {\r\n      width: 100%;\r\n      height: 460px;\r\n      border-radius: 14px;\r\n      overflow: hidden;\r\n      position: relative;\r\n      background: linear-gradient(135deg, #2D2723 0%, #151311 100%);\r\n    }\r\n\r\n    .nico-img-box img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n    }\r\n\r\n    .nico-gold-tag {\r\n      position: absolute;\r\n      top: 20px;\r\n      right: 20px;\r\n      background: var(--gold);\r\n      color: var(--bg-dark);\r\n      font-family: var(--font-heading);\r\n      font-size: 0.75rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.1em;\r\n      padding: 6px 16px;\r\n      border-radius: 30px;\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    .nico-content .section-tag {\r\n      color: var(--gold);\r\n    }\r\n\r\n    .nico-content .section-title {\r\n      color: #FFFFFF;\r\n    }\r\n\r\n    .nico-manuscript-quote {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.65rem;\r\n      line-height: 1.5;\r\n      color: var(--gold-light);\r\n      margin-bottom: 28px;\r\n      font-style: italic;\r\n    }\r\n\r\n    .nico-paragraph {\r\n      font-size: 1.1rem;\r\n      color: rgba(244, 236, 225, 0.88);\r\n      line-height: 1.85;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 08 \u2014 A NOTE FROM CHRISTIANA (Handwritten Journal Page Section)\r\n       ========================================================================== *\/\r\n    .section-note-christiana {\r\n      background: #151210;\r\n      padding: 130px 0;\r\n      position: relative;\r\n      overflow: hidden;\r\n      border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n    }\r\n\r\n    .note-paper-card {\r\n      background: #FFFDF8;\r\n      border: 1px solid var(--border-accent);\r\n      max-width: 860px;\r\n      margin: 0 auto;\r\n      padding: 60px 65px;\r\n      border-radius: 24px;\r\n      box-shadow: 0 25px 65px rgba(0, 0, 0, 0.5);\r\n      position: relative;\r\n      background-image: repeating-linear-gradient(#FFFDF8, #FFFDF8 31px, #EADFCE 32px);\r\n      transform: rotate(-0.8deg);\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .note-paper-card:hover {\r\n      transform: rotate(0deg) scale(1.01);\r\n    }\r\n\r\n    .note-heading-tag {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.6rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      color: var(--terracotta);\r\n      text-align: center;\r\n      margin-bottom: 28px;\r\n    }\r\n\r\n    .note-main-quote {\r\n      font-family: var(--font-handwriting);\r\n      font-size: clamp(2rem, 3.5vw, 2.6rem);\r\n      color: var(--text-dark);\r\n      line-height: 1.5;\r\n      text-align: center;\r\n      margin-bottom: 20px;\r\n      position: relative;\r\n    }\r\n\r\n    .pencil-underline-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n      margin-bottom: 35px;\r\n    }\r\n\r\n    .pencil-underline-svg {\r\n      width: 320px;\r\n      height: 20px;\r\n    }\r\n\r\n    .pencil-path {\r\n      stroke-dasharray: 400;\r\n      stroke-dashoffset: 400;\r\n      transition: stroke-dashoffset 2.5s ease-in-out 0.3s;\r\n    }\r\n\r\n    .reveal-on-scroll.visible .pencil-path {\r\n      stroke-dashoffset: 0;\r\n    }\r\n\r\n    .note-body-paragraph {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.25rem;\r\n      color: var(--text-body);\r\n      line-height: 1.85;\r\n      text-align: center;\r\n      font-style: italic;\r\n      margin-bottom: 40px;\r\n      max-width: 720px;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .note-signature {\r\n      font-family: var(--font-handwriting);\r\n      font-size: 2.3rem;\r\n      font-weight: 700;\r\n      color: var(--terracotta);\r\n      text-align: center;\r\n    }\r\n\r\n    \/* Responsive Queries *\/\r\n    @media (max-width: 1024px) {\r\n      .hero-grid, .split-layout, .nico-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n      }\r\n\r\n      .map-locations-grid {\r\n        grid-template-columns: repeat(3, 1fr);\r\n      }\r\n\r\n      .adventure-grid {\r\n        grid-template-columns: repeat(3, 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .map-locations-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      .adventure-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      .hero-title {\r\n        font-size: 2.8rem;\r\n      }\r\n\r\n      .note-paper-card {\r\n        padding: 40px 28px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .map-locations-grid, .adventure-grid {\r\n        grid-template-columns: 1fr;\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 STORYBOOK HERO\r\n         ========================================================================== -->\r\n    <section id=\"hero\" class=\"hero-section\">\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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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      <svg class=\"sparkle-particle\" style=\"top: 12%; left: 10%; width: 24px;\" viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><path d=\"M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z\"\/><\/svg>\r\n      <svg class=\"sparkle-particle\" style=\"top: 80%; left: 45%; width: 18px; animation-delay: 2s;\" viewBox=\"0 0 24 24\" fill=\"#D9531E\"><path d=\"M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z\"\/><\/svg>\r\n\r\n      <div class=\"container\">\r\n        <div class=\"hero-grid\">\r\n          \r\n          <div class=\"hero-content reveal-on-scroll visible\">\r\n            <div class=\"hero-subtitle-box\">\r\n              <span style=\"color: var(--terracotta); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.15em;\">AUTHOR BIO & JOURNAL<\/span>\r\n            <\/div>\r\n\r\n            <h1 class=\"hero-title\">\r\n              MEET THE<br>\r\n              <span>STORYTELLER<\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"hero-quote\">\r\n              \"Every adventure begins with a curious mind and a story waiting to be told.\"\r\n            <\/p>\r\n\r\n            <div class=\"hero-author-name\">\r\n              CHRISTIANA JONES MARZETT\r\n            <\/div>\r\n\r\n            <div>\r\n              <a href=\"#girl-behind\" class=\"btn-primary\">\r\n                EXPLORE HER WORLD \u2193\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"hero-visual-wrapper reveal-on-scroll visible\" style=\"transition-delay: 0.2s;\">\r\n\r\n            <svg class=\"handwritten-arrow-svg\" viewBox=\"0 0 100 60\" fill=\"none\" stroke=\"#D9531E\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n              <path d=\"M10,50 Q40,10 85,25\" stroke-dasharray=\"4 4\"\/>\r\n              <polyline points=\"75,28 88,25 82,15\"\/>\r\n            <\/svg>\r\n\r\n            <div class=\"floating-element el-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            <div class=\"floating-element el-storybook\">\r\n              <svg viewBox=\"0 0 80 80\" fill=\"none\">\r\n                <rect x=\"10\" y=\"15\" width=\"60\" height=\"50\" rx=\"6\" fill=\"#FFFDF9\" stroke=\"#D9531E\" stroke-width=\"3\"\/>\r\n                <line x1=\"40\" y1=\"15\" x2=\"40\" y2=\"65\" stroke=\"#D9531E\" stroke-width=\"3\"\/>\r\n                <path d=\"M18 28 H32 M18 38 H32 M48 28 H62 M48 38 H62\" stroke=\"#D4AF37\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"floating-element el-pencil\">\r\n              <svg viewBox=\"0 0 60 60\" fill=\"none\">\r\n                <path d=\"M10 50 L18 15 L28 20 L20 55 Z\" fill=\"#D9531E\"\/>\r\n                <polygon points=\"10,50 5,55 12,56\" fill=\"#1C1917\"\/>\r\n                <rect x=\"23\" y=\"10\" width=\"12\" height=\"8\" rx=\"2\" fill=\"#D4AF37\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"floating-element el-stamp\">\r\n              PASSPORT<br>STORYTELLER<br>\u2726 2026 \u2726\r\n            <\/div>\r\n\r\n            <div class=\"portrait-frame-container\">\r\n              <div class=\"tape-effect\"><\/div>\r\n              <div class=\"portrait-img-box\">\r\n                <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/author.png\" alt=\"Christiana Jones Marzett Portrait\">\r\n              <\/div>\r\n              <div class=\"polaroid-caption\">\r\n                Christiana Jones Marzett \u2728\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 THE GIRL BEHIND THE STORIES\r\n         ========================================================================== -->\r\n    <section id=\"girl-behind\" class=\"section-girl-behind\">\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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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=\"split-layout\">\r\n          \r\n          <div class=\"lifestyle-image-stack reveal-on-scroll\">\r\n            <div class=\"photo-card-main\">\r\n              <div class=\"tape-effect\"><\/div>\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/dog-2.png\" alt=\"Christiana Studying & Reading\">\r\n              <div style=\"text-align: center; font-family: var(--font-handwriting); font-size: 1.5rem; margin-top: 14px; color: var(--terracotta);\">\r\n                Southern California Adventures \u2600\ufe0f\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"photo-card-secondary\">\r\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=500&q=80\" alt=\"Exploring Nature\">\r\n              <div style=\"text-align: center; font-family: var(--font-handwriting); font-size: 1.2rem; margin-top: 8px; color: var(--text-dark);\">\r\n                Global Travels \ud83c\udf0e\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"manuscript-content reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-tag\">PERSONAL JOURNEY<\/div>\r\n            <h2 class=\"section-title\">THE GIRL BEHIND THE STORIES<\/h2>\r\n\r\n            <div class=\"manuscript-text\">\r\n              I am a <span class=\"manuscript-highlight\">10-year-old dual language learner<\/span> (English & Spanish) from the Inland Empire in Southern California. I also enjoy studying Korean for fun!\r\n            <\/div>\r\n\r\n            <div class=\"manuscript-text\">\r\n              My family and I travel a lot and go on adventures all around the world. Sometimes we spend time with <span class=\"manuscript-highlight\">Indigenous tribes in Central America<\/span>. Other times, we hike, boat, explore, or camp in the rainforest, climb Mayan ruins, or spend time relaxing at Rasta camps high in the clouds of Blue Mountain in Jamaica.\r\n            <\/div>\r\n\r\n            <div class=\"manuscript-text\" style=\"font-weight: 600; color: var(--terracotta); font-family: var(--font-serif); font-size: 1.25rem;\">\r\n              \"These experiences are some of the things that inspire me to create stories.\"\r\n            <\/div>\r\n\r\n            <!--<div class=\"editorial-stats-row\">-->\r\n            <!--  <div class=\"stat-pill\">-->\r\n            <!--    <span class=\"stat-number\">10<\/span>-->\r\n            <!--    <span class=\"stat-label\">Years Old<\/span>-->\r\n            <!--  <\/div>-->\r\n            <!--  <div class=\"stat-pill\">-->\r\n            <!--    <span class=\"stat-number\">EN + ES<\/span>-->\r\n            <!--    <span class=\"stat-label\">Dual Learner<\/span>-->\r\n            <!--  <\/div>-->\r\n            <!--  <div class=\"stat-pill\">-->\r\n            <!--    <span class=\"stat-number\">KR<\/span>-->\r\n            <!--    <span class=\"stat-label\">Korean for Fun<\/span>-->\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 03 \u2014 A WORLD FULL OF STORIES (Professional Editorial Layout)\r\n         ========================================================================== -->\r\n    <section id=\"world\" class=\"section-world-stories\">\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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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=\"map-header reveal-on-scroll\">\r\n          <div class=\"section-tag\">EXPLORATION MAP<\/div>\r\n          <h2 class=\"section-title\">A WORLD FULL OF STORIES<\/h2>\r\n          <p class=\"map-subheading\">\r\n            \"Some stories are imagined. Others begin with a place, a person, or an adventure.\"\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"map-wrapper-card reveal-on-scroll\">\r\n          \r\n          <div class=\"route-banner-container\">\r\n            <svg class=\"route-banner-svg\" viewBox=\"0 0 1000 100\" fill=\"none\" preserveAspectRatio=\"none\">\r\n              <path class=\"animated-flight-line\" d=\"M 80 50 Q 300 15, 520 65 T 920 45\" stroke=\"#D9531E\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\r\n              <circle cx=\"80\" cy=\"50\" r=\"7\" fill=\"#D9531E\"\/>\r\n              <circle cx=\"300\" cy=\"37\" r=\"7\" fill=\"#D4AF37\"\/>\r\n              <circle cx=\"520\" cy=\"65\" r=\"7\" fill=\"#D9531E\"\/>\r\n              <circle cx=\"720\" cy=\"85\" r=\"7\" fill=\"#D4AF37\"\/>\r\n              <circle cx=\"920\" cy=\"45\" r=\"7\" fill=\"#D9531E\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"map-locations-grid\">\r\n            \r\n            <div class=\"location-pin-card\">\r\n              <div class=\"pin-tag\">ORIGIN<\/div>\r\n              <div class=\"pin-icon-badge\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <polygon points=\"12,2 15,9 22,12 15,15 12,22 9,15 2,12 9,9\"\/>\r\n                  <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <div class=\"pin-country-title\">SO. CALIFORNIA<\/div>\r\n              <div class=\"pin-story-snippet\">Home & origin of Christiana's vibrant imagination.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"location-pin-card\">\r\n              <div class=\"pin-tag\">BELIZE<\/div>\r\n              <div class=\"pin-icon-badge\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M2 21h20M4 21v-4h16v4M6 17v-4h12v4M8 13V9h8v4M10 9V5h4v4M10 21v-3h4v3\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <div class=\"pin-country-title\">BELIZE<\/div>\r\n              <div class=\"pin-story-snippet\">Mayan ruins & rainforest adventures. A story waiting to happen.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"location-pin-card\">\r\n              <div class=\"pin-tag\">JAMAICA<\/div>\r\n              <div class=\"pin-icon-badge\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M3 20l7-11 4 6 3-4 4 9H3z\"\/>\r\n                  <circle cx=\"18\" cy=\"6\" r=\"2.5\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <div class=\"pin-country-title\">JAMAICA<\/div>\r\n              <div class=\"pin-story-snippet\">Blue Mountain. High above the clouds at Rasta camps.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"location-pin-card\">\r\n              <div class=\"pin-tag\">MEXICO<\/div>\r\n              <div class=\"pin-icon-badge\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M2 17c2 0 3-1 5-1s3 1 5 1 3-1 5-1 3 1 5 1M2 20c2 0 3-1 5-1s3 1 5 1 3-1 5-1 3 1 5 1M12 3v10M8 7l4-4 4 4\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <div class=\"pin-country-title\">MEXICO<\/div>\r\n              <div class=\"pin-story-snippet\">Tulum river explorations & ancient coastal heritage.<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"location-pin-card\">\r\n              <div class=\"pin-tag\">PANAMA<\/div>\r\n              <div class=\"pin-icon-badge\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M4 21V10a8 8 0 1 1 16 0v11M4 21h16M9 21v-6a3 3 0 0 1 6 0v6\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <div class=\"pin-country-title\">PANAMA<\/div>\r\n              <div class=\"pin-story-snippet\">Casco Viejo & historic Central American expeditions.<\/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    <!-- ==========================================================================\r\n         SECTION 04 \u2014 ADVENTURE IS PART OF THE STORY (Scrapbook Cards)\r\n         ========================================================================== -->\r\n    <section id=\"adventure\" class=\"section-adventure-cards\">\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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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=\"adventure-header reveal-on-scroll\">\r\n          <div class=\"section-tag\">HOBBIES & PASSIONS<\/div>\r\n          <h2 class=\"section-title\">ADVENTURE IS PART OF THE STORY<\/h2>\r\n          <p style=\"font-size: 1.1rem; color: var(--text-body);\">\r\n            \"When I'm not traveling, I enjoy gymnastics, cheer, robotics, writing stories, and learning about all cultures.\"\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"adventure-grid\">\r\n          \r\n          <div class=\"scrapbook-card reveal-on-scroll\">\r\n            <div class=\"tape-effect\"><\/div>\r\n            <div>\r\n              <div class=\"card-category\">MOVE<\/div>\r\n              <h3 class=\"card-title\">Gymnastics<\/h3>\r\n            <\/div>\r\n            <div class=\"card-icon-wrapper\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"card-doodle-text\">Flexibility & Grace \u2726<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"scrapbook-card reveal-on-scroll\" style=\"transition-delay: 0.1s;\">\r\n            <div class=\"tape-effect\"><\/div>\r\n            <div>\r\n              <div class=\"card-category\">CHEER<\/div>\r\n              <h3 class=\"card-title\">Cheer<\/h3>\r\n            <\/div>\r\n            <div class=\"card-icon-wrapper\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"card-doodle-text\">Spirit & Teamwork \u2605<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"scrapbook-card reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"tape-effect\"><\/div>\r\n            <div>\r\n              <div class=\"card-category\">BUILD<\/div>\r\n              <h3 class=\"card-title\">Robotics<\/h3>\r\n            <\/div>\r\n            <div class=\"card-icon-wrapper\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a2 2 0 0 1 2 2c0 .74-.4 1.38-1 1.72V7h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4V5.72A2 2 0 0 1 10 4a2 2 0 0 1 2-2M7.5 12a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9 17.5h6v-1.5H9v1.5z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"card-doodle-text\">Build + Imagine \u2699\ufe0f<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"scrapbook-card reveal-on-scroll\" style=\"transition-delay: 0.3s;\">\r\n            <div class=\"tape-effect\"><\/div>\r\n            <div>\r\n              <div class=\"card-category\">WRITE<\/div>\r\n              <h3 class=\"card-title\">Stories<\/h3>\r\n            <\/div>\r\n            <div class=\"card-icon-wrapper\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"card-doodle-text\">Crafting Worlds \ud83d\udcd6<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"scrapbook-card reveal-on-scroll\" style=\"transition-delay: 0.4s;\">\r\n            <div class=\"tape-effect\"><\/div>\r\n            <div>\r\n              <div class=\"card-category\">DISCOVER<\/div>\r\n              <h3 class=\"card-title\">Cultures<\/h3>\r\n            <\/div>\r\n            <div class=\"card-icon-wrapper\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"card-doodle-text\">Global Connections \ud83c\udf0d<\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 05 \u2014 WHERE NICO BEGAN (Dark Cinematic Section)\r\n         ========================================================================== -->\r\n    <section id=\"nico\" class=\"section-nico-began\">\r\n      <div class=\"paw-trail-left\">\r\n        <svg class=\"paw-icon\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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=\"nico-grid\">\r\n          \r\n          <div class=\"nico-visual-card reveal-on-scroll\">\r\n            <div class=\"nico-gold-tag\">FEATURED STORY<\/div>\r\n            <div class=\"nico-img-box\">\r\n              <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/1.png\" alt=\"That One Puppy Book Art\">\r\n            <\/div>\r\n            <div style=\"text-align: center; margin-top: 16px; font-family: var(--font-serif); font-size: 1.25rem; color: var(--gold-light);\">\r\n              \"That One Puppy\" \u2014 Christiana's Debut Book \ud83d\udc3e\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nico-content reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-tag\">ORIGIN STORY<\/div>\r\n            <h2 class=\"section-title\">WHERE NICO BEGAN<\/h2>\r\n\r\n            <div class=\"nico-manuscript-quote\">\r\n              \"Every story starts somewhere.\"\r\n            <\/div>\r\n\r\n            <p class=\"nico-paragraph\">\r\n              Nico's adventure starts as a lost puppy following the mouth-watering scent of hot dogs through the busy city streets.\r\n            <\/p>\r\n\r\n            <p class=\"nico-paragraph\">\r\n              Through Nico's journey, young readers discover that loneliness, fear, uncertainty, and difficult moments don't have to be the end of the story.\r\n            <\/p>\r\n\r\n            <p class=\"nico-paragraph\" style=\"font-weight: 600; color: var(--gold);\">\r\n              Nico ultimately learns to hold onto hope, and the story reaches a heartwarming ending when the Hot Dog Man and his wife adopt him into their family.\r\n            <\/p>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 08 \u2014 A NOTE FROM CHRISTIANA (Handwritten Journal Page)\r\n         ========================================================================== -->\r\n    <section id=\"note\" class=\"section-note-christiana\">\r\n      <!-- Alternating Paw Trail (Right side) -->\r\n      <div class=\"paw-trail-right\">\r\n        <svg class=\"paw-icon\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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\" style=\"fill: var(--gold);\" 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 2zm-8-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6 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=\"note-paper-card reveal-on-scroll\">\r\n          <div class=\"tape-effect\"><\/div>\r\n\r\n          <h2 class=\"note-heading-tag\">A NOTE FROM CHRISTIANA<\/h2>\r\n\r\n          <div class=\"note-main-quote\">\r\n            \"Everyone has a story worth hearing.\"\r\n          <\/div>\r\n\r\n          <!-- Animated Pencil Drawing Underline SVG -->\r\n          <div class=\"pencil-underline-wrapper\">\r\n            <svg class=\"pencil-underline-svg\" viewBox=\"0 0 320 20\" fill=\"none\">\r\n              <path class=\"pencil-path\" d=\"M10,12 Q160,2 310,14\" stroke=\"#D9531E\" stroke-width=\"3.5\" stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <p class=\"note-body-paragraph\">\r\n            \"I've always loved stories. Stories from strangers. Friends. Travelers. 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          <div class=\"note-signature\">\r\n            \u2014 Christiana Jones Marzett\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      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      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>AUTHOR BIO &#038; JOURNAL MEET THE STORYTELLER &#8220;Every adventure begins with a curious mind and a story waiting to be [&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-253","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/253","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=253"}],"version-history":[{"count":28,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/253\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/253\/revisions\/519"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/media?parent=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}