{"id":267,"date":"2026-08-25T18:47:40","date_gmt":"2026-08-25T18:47:40","guid":{"rendered":"https:\/\/demowebdesign.live\/christiana\/?page_id=267"},"modified":"2026-08-26T15:18:59","modified_gmt":"2026-08-26T15:18:59","slug":"open-the-book","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/christiana\/open-the-book\/","title":{"rendered":"Open The Book"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"267\" class=\"elementor elementor-267\">\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 That One Puppy \u2014 a story about Nico getting lost, finding hope, and discovering that you are never truly alone by Christiana Jones Marzett.\">\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    }\r\n\r\n    .section-eyebrow {\r\n      font-family: var(--font-body);\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: var(--terracotta);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .section-eyebrow::before {\r\n      content: '\u2726';\r\n      color: var(--gold);\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(2.3rem, 4.5vw, 3.8rem);\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      line-height: 1.18;\r\n      margin-bottom: 22px;\r\n      letter-spacing: -0.01em;\r\n    }\r\n\r\n    .btn-primary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      padding: 16px 36px;\r\n      border-radius: 50px;\r\n      font-weight: 700;\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      box-shadow: var(--shadow-terracotta);\r\n      transition: all 0.4s var(--transition-smooth);\r\n      border: 2px solid transparent;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background: var(--terracotta-dark);\r\n      transform: translateY(-4px) scale(1.02);\r\n      box-shadow: 0 18px 40px rgba(217, 83, 30, 0.38);\r\n      color: white !important;\r\n    }\r\n\r\n    \/* Floating 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 slowTilt {\r\n      0%, 100% { transform: perspective(1000px) rotateY(-12deg) rotateX(6deg) translateY(0); }\r\n      50% { transform: perspective(1000px) rotateY(-6deg) rotateX(2deg) translateY(-14px); }\r\n    }\r\n\r\n    \/* Paw Trail Component *\/\r\n    .paw-svg-icon {\r\n      width: 32px;\r\n      height: 32px;\r\n      fill: var(--terracotta);\r\n      opacity: 0.45;\r\n      filter: drop-shadow(0 2px 4px rgba(217, 83, 30, 0.25));\r\n      animation: floatSoft 4s ease-in-out infinite alternate;\r\n    }\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 BOOKSTORY HERO\r\n       ========================================================================== *\/\r\n    .hero-book-section {\r\n      min-height: 92vh;\r\n      position: relative;\r\n      padding: 90px 0 110px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      background: radial-gradient(circle at 15% 25%, rgba(249, 242, 216, 0.6) 0%, rgba(250, 246, 240, 1) 75%);\r\n      overflow: hidden;\r\n      border-bottom: 1px solid var(--border-light);\r\n    }\r\n\r\n    .hero-book-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-book-content {\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .hero-badge-tag {\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      font-size: 0.75rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.18em;\r\n      color: var(--terracotta);\r\n    }\r\n\r\n    .hero-book-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(3.5rem, 6vw, 5.5rem);\r\n      font-weight: 900;\r\n      color: var(--text-dark);\r\n      line-height: 1.05;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 22px;\r\n    }\r\n\r\n    .hero-book-title span {\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-book-subtext {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.45rem;\r\n      color: var(--text-body);\r\n      line-height: 1.6;\r\n      margin-bottom: 24px;\r\n      border-left: 4px solid var(--gold);\r\n      padding-left: 20px;\r\n      font-style: italic;\r\n    }\r\n\r\n    .hero-story-premise {\r\n      font-size: 1.05rem;\r\n      color: var(--text-muted);\r\n      line-height: 1.8;\r\n      margin-bottom: 34px;\r\n      max-width: 520px;\r\n    }\r\n\r\n    \/* Right Side 3D Book Stage *\/\r\n    .hero-3d-book-stage {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      perspective: 1200px;\r\n    }\r\n\r\n    .book-cover-3d-wrapper {\r\n      position: relative;\r\n      width: 320px;\r\n      height: 440px;\r\n      background: #FFFFFF;\r\n      border-radius: 12px 20px 20px 12px;\r\n      box-shadow: \r\n        -15px 25px 50px rgba(20, 17, 15, 0.25),\r\n        -4px 0 10px rgba(0,0,0,0.15) inset;\r\n      animation: slowTilt 12s ease-in-out infinite;\r\n      transform-style: preserve-3d;\r\n      border: 1px solid var(--border-accent);\r\n      cursor: pointer;\r\n      transition: box-shadow 0.4s ease;\r\n    }\r\n\r\n    .book-cover-3d-wrapper:hover {\r\n      box-shadow: \r\n        -20px 35px 65px rgba(217, 83, 30, 0.35),\r\n        -4px 0 10px rgba(0,0,0,0.2) inset;\r\n    }\r\n\r\n    .book-spine-effect {\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: 20px;\r\n      background: linear-gradient(90deg, #A4350E 0%, #D9531E 60%, rgba(255,255,255,0.4) 100%);\r\n      border-radius: 12px 0 0 12px;\r\n      z-index: 5;\r\n    }\r\n\r\n    .book-cover-image {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      border-radius: 12px 20px 20px 12px;\r\n    }\r\n\r\n    .floating-page-scrap {\r\n      position: absolute;\r\n      background: #FFFDF8;\r\n      border: 1px solid var(--border-accent);\r\n      box-shadow: var(--shadow-md);\r\n      padding: 16px 20px;\r\n      border-radius: 10px;\r\n      font-family: var(--font-handwriting);\r\n      font-size: 1.4rem;\r\n      color: var(--text-dark);\r\n      z-index: 6;\r\n      animation: floatSoft 6s ease-in-out infinite;\r\n    }\r\n\r\n    .scrap-page-1 { top: -30px; right: -30px; transform: rotate(12deg); }\r\n    .scrap-page-2 { bottom: 20px; left: -50px; transform: rotate(-15deg); animation-delay: 2s; }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 12 \u2014 BOOK DETAILS (Two Column Publishing Overview)\r\n       ========================================================================== *\/\r\n    .section-book-details {\r\n      padding: 110px 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    .details-split-grid {\r\n      display: grid;\r\n      grid-template-columns: 55% 45%;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .details-cards-2x2 {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 20px;\r\n    }\r\n\r\n    .detail-info-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 20px;\r\n      padding: 28px 24px;\r\n      box-shadow: var(--shadow-sm);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .detail-info-card:hover {\r\n      transform: translateY(-5px);\r\n      border-color: var(--terracotta);\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    .detail-label {\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: 10px;\r\n    }\r\n\r\n    .detail-value {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.3rem;\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      line-height: 1.35;\r\n    }\r\n\r\n    .detail-value-body {\r\n      font-family: var(--font-body);\r\n      font-size: 0.9rem;\r\n      color: var(--text-body);\r\n      line-height: 1.6;\r\n      font-weight: 500;\r\n    }\r\n\r\n    .details-book-visual-frame {\r\n      position: relative;\r\n      background: #FFFFFF;\r\n      padding: 16px 16px 50px 16px;\r\n      border-radius: 22px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(2deg);\r\n      border: 1px solid var(--border-accent);\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .details-book-visual-frame:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n    }\r\n\r\n    .details-book-img {\r\n      width: 100%;\r\n      height: 420px;\r\n      object-fit: cover;\r\n      border-radius: 14px;\r\n    }\r\n\r\n    .details-book-caption {\r\n      position: absolute;\r\n      bottom: 16px;\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.6rem;\r\n      color: var(--terracotta);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 02 \u2014 MEET NICO\r\n       ========================================================================== *\/\r\n    .section-meet-nico {\r\n      padding: 120px 0;\r\n      position: relative;\r\n      background: var(--bg-cream);\r\n      background-image: \r\n        linear-gradient(rgba(216, 201, 183, 0.2) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(216, 201, 183, 0.2) 1px, transparent 1px);\r\n      background-size: 36px 36px;\r\n      border-bottom: 1px solid var(--border-light);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .nico-split-grid {\r\n      display: grid;\r\n      grid-template-columns: 48% 52%;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .nico-photo-frame {\r\n      position: relative;\r\n      background: #FFFFFF;\r\n      padding: 18px 18px 60px 18px;\r\n      border-radius: 20px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(-2.5deg);\r\n      border: 1px solid var(--border-light);\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .nico-photo-frame:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n    }\r\n\r\n    .nico-photo-img {\r\n      width: 100%;\r\n      height: 460px;\r\n      object-fit: cover;\r\n      border-radius: 12px;\r\n    }\r\n\r\n    .nico-photo-caption {\r\n      position: absolute;\r\n      bottom: 18px;\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.8rem;\r\n      color: var(--terracotta);\r\n    }\r\n\r\n    .nico-story-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 24px;\r\n      padding: 44px;\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    .nico-story-paragraph {\r\n      font-size: 1.15rem;\r\n      color: var(--text-dark);\r\n      line-height: 1.85;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .nico-shelter-box {\r\n      background: var(--terracotta-light);\r\n      border-left: 4px solid var(--terracotta);\r\n      padding: 20px 24px;\r\n      border-radius: 0 14px 14px 0;\r\n      font-family: var(--font-serif);\r\n      font-size: 1.1rem;\r\n      color: var(--terracotta-dark);\r\n      font-style: italic;\r\n      margin-top: 10px;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 03 \u2014 ONE PUPPY. ONE BIG CITY.\r\n       ========================================================================== *\/\r\n    .section-big-city {\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    .city-header {\r\n      text-align: center;\r\n      max-width: 900px;\r\n      margin: 0 auto 60px auto;\r\n    }\r\n\r\n    .city-giant-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(3rem, 6.5vw, 5.5rem);\r\n      font-weight: 900;\r\n      color: #FFFFFF;\r\n      line-height: 1.08;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .city-giant-title span {\r\n      color: var(--gold);\r\n      display: block;\r\n      font-family: var(--font-serif);\r\n      font-style: italic;\r\n    }\r\n\r\n    .city-visual-stage {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 480px;\r\n      background: linear-gradient(180deg, #1C1815 0%, #0A0807 100%);\r\n      border-radius: 28px;\r\n      border: 1px solid rgba(255, 255, 255, 0.12);\r\n      overflow: hidden;\r\n      box-shadow: 0 30px 70px rgba(0,0,0,0.6);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .city-bg-img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      opacity: 0.65;\r\n      filter: contrast(1.1) brightness(0.8);\r\n    }\r\n\r\n    .hotdog-stand-badge {\r\n      position: absolute;\r\n      top: 35px;\r\n      right: 40px;\r\n      background: #FFFFFF;\r\n      color: var(--text-dark);\r\n      border: 2px dashed var(--terracotta);\r\n      padding: 14px 22px;\r\n      border-radius: 14px;\r\n      box-shadow: 0 12px 30px rgba(0,0,0,0.4);\r\n      transform: rotate(4deg);\r\n      text-align: center;\r\n    }\r\n\r\n    .hotdog-stand-badge h4 {\r\n      font-family: var(--font-heading);\r\n      font-size: 1rem;\r\n      font-weight: 800;\r\n      color: var(--terracotta);\r\n    }\r\n\r\n    .city-story-quote-bar {\r\n      position: absolute;\r\n      bottom: 30px;\r\n      left: 30px;\r\n      right: 30px;\r\n      background: rgba(26, 22, 20, 0.85);\r\n      backdrop-filter: blur(12px);\r\n      border: 1px solid rgba(255,255,255,0.15);\r\n      padding: 22px 32px;\r\n      border-radius: 18px;\r\n      text-align: center;\r\n      font-family: var(--font-serif);\r\n      font-size: 1.25rem;\r\n      color: var(--gold-light);\r\n      font-style: italic;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 04 \u2014 WHAT WILL NICO TRY NEXT?\r\n       ========================================================================== *\/\r\n    .section-nico-tries {\r\n      padding: 130px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n    }\r\n\r\n    .tries-header {\r\n      text-align: center;\r\n      max-width: 800px;\r\n      margin: 0 auto 70px auto;\r\n    }\r\n\r\n    .progression-cards-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 20px;\r\n      position: relative;\r\n    }\r\n\r\n    .storybook-flip-card {\r\n      background: #FFFDF8;\r\n      border: 2px solid var(--border-accent);\r\n      border-radius: 22px;\r\n      padding: 32px 22px;\r\n      text-align: center;\r\n      position: relative;\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: space-between;\r\n      min-height: 330px;\r\n    }\r\n\r\n    .storybook-flip-card:hover {\r\n      transform: translateY(-10px) rotate(1deg);\r\n      border-color: var(--terracotta);\r\n      box-shadow: 0 22px 45px var(--terracotta-glow);\r\n    }\r\n\r\n    .stage-number-tag {\r\n      font-size: 0.7rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.18em;\r\n      color: var(--terracotta);\r\n      text-transform: uppercase;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .stage-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.5rem;\r\n      font-weight: 800;\r\n      color: var(--text-dark);\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .stage-icon-circle {\r\n      width: 76px;\r\n      height: 76px;\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: 12px 0;\r\n      transition: all 0.3s ease;\r\n      border: 1px solid rgba(217, 83, 30, 0.2);\r\n    }\r\n\r\n    .stage-icon-circle svg {\r\n      width: 36px;\r\n      height: 36px;\r\n      fill: var(--terracotta);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .storybook-flip-card:hover .stage-icon-circle {\r\n      background: var(--terracotta);\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    .storybook-flip-card:hover .stage-icon-circle svg {\r\n      fill: #FFFFFF;\r\n    }\r\n\r\n    .stage-snippet {\r\n      font-size: 0.9rem;\r\n      color: var(--text-body);\r\n      line-height: 1.5;\r\n      font-style: italic;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 05 \u2014 THE COSTUME\r\n       ========================================================================== *\/\r\n    .section-costume {\r\n      padding: 130px 0;\r\n      background: var(--bg-paper-light);\r\n      position: relative;\r\n      border-top: 1px solid var(--border-light);\r\n    }\r\n\r\n    .costume-grid {\r\n      display: grid;\r\n      grid-template-columns: 50% 50%;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .costume-visual-box {\r\n      position: relative;\r\n      background: #FFFFFF;\r\n      padding: 20px;\r\n      border-radius: 24px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(2deg);\r\n    }\r\n\r\n    .costume-img {\r\n      width: 100%;\r\n      height: 440px;\r\n      object-fit: cover;\r\n      border-radius: 14px;\r\n    }\r\n\r\n    .transition-warning-pill {\r\n      display: inline-block;\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      font-weight: 800;\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.15em;\r\n      padding: 8px 20px;\r\n      border-radius: 30px;\r\n      margin-top: 28px;\r\n      box-shadow: var(--shadow-terracotta);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 11 \u2014 INSIDE THE BOOK (Horizontal Gallery Lightbox)\r\n       ========================================================================== *\/\r\n    .section-inside-book {\r\n      padding: 130px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n      border-top: 1px solid var(--border-light);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .inside-header {\r\n      text-align: center;\r\n      max-width: 800px;\r\n      margin: 0 auto 60px auto;\r\n    }\r\n\r\n    .horizontal-gallery-scroll {\r\n      display: flex;\r\n      gap: 24px;\r\n      overflow-x: auto;\r\n      padding: 20px 10px 40px 10px;\r\n      scroll-snap-type: x mandatory;\r\n      -webkit-overflow-scrolling: touch;\r\n    }\r\n\r\n    .horizontal-gallery-scroll::-webkit-scrollbar {\r\n      height: 8px;\r\n    }\r\n\r\n    .horizontal-gallery-scroll::-webkit-scrollbar-track {\r\n      background: rgba(216, 201, 183, 0.4);\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .horizontal-gallery-scroll::-webkit-scrollbar-thumb {\r\n      background: var(--terracotta);\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .book-page-card {\r\n      flex: 0 0 280px;\r\n      scroll-snap-align: center;\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 20px;\r\n      padding: 14px 14px 45px 14px;\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    .book-page-card:hover {\r\n      transform: translateY(-12px) scale(1.03);\r\n      border-color: var(--terracotta);\r\n      box-shadow: 0 20px 45px var(--terracotta-glow);\r\n    }\r\n\r\n    .book-page-thumb {\r\n      width: 100%;\r\n      height: 340px;\r\n      object-fit: cover;\r\n      border-radius: 12px;\r\n      background: var(--bg-paper);\r\n    }\r\n\r\n    .page-label-tag {\r\n      position: absolute;\r\n      bottom: 14px;\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.5rem;\r\n      color: var(--text-dark);\r\n    }\r\n\r\n    .page-zoom-hover-icon {\r\n      position: absolute;\r\n      top: 24px;\r\n      right: 24px;\r\n      background: rgba(26, 22, 20, 0.8);\r\n      color: #FFFFFF;\r\n      width: 36px;\r\n      height: 36px;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      opacity: 0;\r\n      transition: opacity 0.3s ease;\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .book-page-card:hover .page-zoom-hover-icon {\r\n      opacity: 1;\r\n    }\r\n\r\n    \/* Lightbox Modal *\/\r\n    .lightbox-modal {\r\n      position: fixed;\r\n      inset: 0;\r\n      background: rgba(10, 8, 7, 0.92);\r\n      backdrop-filter: blur(14px);\r\n      z-index: 9999;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      transition: opacity 0.4s ease;\r\n    }\r\n\r\n    .lightbox-modal.active {\r\n      opacity: 1;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .lightbox-content-box {\r\n      max-width: 90vw;\r\n      max-height: 85vh;\r\n      position: relative;\r\n      text-align: center;\r\n    }\r\n\r\n    .lightbox-img {\r\n      max-width: 100%;\r\n      max-height: 75vh;\r\n      border-radius: 16px;\r\n      box-shadow: 0 30px 80px rgba(0,0,0,0.8);\r\n      border: 2px solid var(--border-accent);\r\n    }\r\n\r\n    .lightbox-caption {\r\n      margin-top: 18px;\r\n      font-family: var(--font-serif);\r\n      font-size: 1.4rem;\r\n      color: var(--gold-light);\r\n      font-style: italic;\r\n    }\r\n\r\n    .lightbox-close-btn {\r\n      position: absolute;\r\n      top: -45px;\r\n      right: 0;\r\n      background: none;\r\n      border: none;\r\n      color: #FFFFFF;\r\n      font-size: 2.2rem;\r\n      cursor: pointer;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    .lightbox-close-btn:hover {\r\n      color: var(--terracotta);\r\n    }\r\n\r\n    \/* Responsive Queries *\/\r\n    @media (max-width: 1024px) {\r\n      .hero-book-grid, .details-split-grid, .nico-split-grid, .costume-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n      }\r\n\r\n      .progression-cards-grid, .details-cards-2x2 {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .progression-cards-grid, .details-cards-2x2 {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      .hero-book-title {\r\n        font-size: 3rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <main>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 01 \u2014 BOOKSTORY HERO\r\n         ========================================================================== -->\r\n    <section id=\"hero\" class=\"hero-book-section\">\r\n      <div class=\"container\">\r\n        <div class=\"hero-book-grid\">\r\n          \r\n          <!-- Left Content -->\r\n          <div class=\"hero-book-content reveal-on-scroll visible\">\r\n            <div class=\"hero-badge-tag\">\r\n              \u2726 OPEN THE BOOK\r\n            <\/div>\r\n\r\n            <h1 class=\"hero-book-title\">\r\n              THAT ONE<br>\r\n              <span>PUPPY<\/span>\r\n            <\/h1>\r\n\r\n            <div class=\"hero-book-subtext\">\r\n              A story about getting lost, finding hope, and discovering that you are never truly alone.\r\n            <\/div>\r\n\r\n            <p class=\"hero-story-premise\">\r\n              Meet Nico \u2014 a happy and playful puppy whose search for hot dogs leads him into an unexpected adventure through the city.\r\n            <\/p>\r\n\r\n            <div>\r\n              <a href=\"#book-details\" class=\"btn-primary\">\r\n                Buy The Book NOw\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right 3D Book Cover Stage -->\r\n          <div class=\"hero-3d-book-stage reveal-on-scroll visible\" style=\"transition-delay: 0.2s;\">\r\n            \r\n            <div class=\"floating-page-scrap scrap-page-1\">\r\n              \"Never truly alone...\" \ud83d\udc3e\r\n            <\/div>\r\n\r\n            <div class=\"floating-page-scrap scrap-page-2\">\r\n              Chapter 01 \u2728\r\n            <\/div>\r\n\r\n            <!-- Main 3D Book Cover Card -->\r\n            <div class=\"book-cover-3d-wrapper\">\r\n              <div class=\"book-spine-effect\"><\/div>\r\n              <img decoding=\"async\" class=\"book-cover-image\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/Book-Front-Mockup.png\" alt=\"That One Puppy Book Cover\">\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\r\n    <!-- ==========================================================================\r\n         SECTION 02 \u2014 MEET NICO\r\n         ========================================================================== -->\r\n    <section id=\"meet-nico\" class=\"section-meet-nico\">\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"nico-split-grid\">\r\n          \r\n          <!-- Left: Nico Image Frame -->\r\n          <div class=\"nico-photo-frame reveal-on-scroll\">\r\n            <img decoding=\"async\" class=\"nico-photo-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/3.png\" alt=\"Nico Sitting Curious on Sidewalk\">\r\n            <div class=\"nico-photo-caption\">\r\n              Curious Little Nico \ud83d\udc3e\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right: Story Content -->\r\n          <div class=\"nico-story-card reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-eyebrow\">THE STORY BEGINS<\/div>\r\n            <h2 class=\"section-title\">MEET NICO<\/h2>\r\n\r\n            <p class=\"nico-story-paragraph\">\r\n              Once there was a happy and playful puppy named Nico.\r\n            <\/p>\r\n\r\n            <p class=\"nico-story-paragraph\">\r\n              He got lost many weeks ago following the delicious scent of hot dogs through the busy city streets.\r\n            <\/p>\r\n\r\n            <div class=\"nico-shelter-box\">\r\n              He didn't want to live in the city's animal shelter for lost dogs. The shelter was crowded, loud, and it looked like a puppy jail.\r\n            <\/div>\r\n\r\n            <!-- Custom Paw Trail Component -->\r\n            <div style=\"margin-top: 30px; display: flex; gap: 12px; align-items: center;\">\r\n              <svg class=\"paw-svg-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-svg-icon\" style=\"animation-delay: 0.5s;\" 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              <span style=\"font-family: var(--font-handwriting); font-size: 1.3rem; color: var(--terracotta);\">Nico's journey continues...<\/span>\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 03 \u2014 ONE PUPPY. ONE BIG CITY.\r\n         ========================================================================== -->\r\n    <section id=\"big-city\" class=\"section-big-city\">\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"city-header reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\" style=\"color: var(--gold);\">THE VAST CITY<\/div>\r\n          <h2 class=\"city-giant-title\">\r\n            ONE PUPPY.<br>\r\n            <span>ONE BIG CITY.<\/span>\r\n          <\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"city-visual-stage reveal-on-scroll\">\r\n          <img decoding=\"async\" class=\"city-bg-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/city_converted.png\" alt=\"Huge City Environment\">\r\n          \r\n          <div class=\"hotdog-stand-badge\">\r\n            <span style=\"font-size: 1.4rem;\">\ud83c\udf2d<\/span>\r\n            <h4>HOT DOG STAND<\/h4>\r\n            <div style=\"font-size: 0.75rem; color: var(--text-muted);\">Scent of Hope<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"city-story-quote-bar\">\r\n            \"Nico waits near the hot dog stand hoping someone will share food. The vendor watches him from the corner of his eye.\"\r\n            <div style=\"font-size: 0.95rem; margin-top: 6px; color: var(--gold); font-family: var(--font-body); font-style: normal; font-weight: 700;\">\r\n              Sometimes an adventure begins with something as simple as following a smell.\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 04 \u2014 WHAT WILL NICO TRY NEXT?\r\n         ========================================================================== -->\r\n    <section id=\"tries\" class=\"section-nico-tries\">\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"tries-header reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\">INTERACTIVE STORYBOOK<\/div>\r\n          <h2 class=\"section-title\">WHAT WILL NICO TRY NEXT?<\/h2>\r\n          <p style=\"font-size: 1.15rem; color: var(--text-body);\">\r\n            Nico is lonely and wants something fun to do, so he decides to try different things!\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"progression-cards-grid\">\r\n          \r\n          <!-- 1. SING -->\r\n          <div class=\"storybook-flip-card reveal-on-scroll\">\r\n            <div class=\"stage-number-tag\">STAGE 01<\/div>\r\n            <h3 class=\"stage-title\">SING \ud83c\udfa4<\/h3>\r\n            <div class=\"stage-icon-circle\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 11 H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"stage-snippet\">\r\n              But all he can say is:<br>\r\n              <strong>\"Ruff! Ruff!\"<\/strong>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- 2. CIRCUS DOG -->\r\n          <div class=\"storybook-flip-card reveal-on-scroll\" style=\"transition-delay: 0.1s;\">\r\n            <div class=\"stage-number-tag\">STAGE 02<\/div>\r\n            <h3 class=\"stage-title\">CIRCUS DOG \ud83c\udfaa<\/h3>\r\n            <div class=\"stage-icon-circle\">\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=\"stage-snippet\">\r\n              He tries performing tricks...<br>\r\n              <strong>But he's afraid of heights!<\/strong>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- 3. LION -->\r\n          <div class=\"storybook-flip-card reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"stage-number-tag\">STAGE 03<\/div>\r\n            <h3 class=\"stage-title\">LION \ud83e\udd81<\/h3>\r\n            <div class=\"stage-icon-circle\">\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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"stage-snippet\">\r\n              Creates a lion costume from trash scraps and goes to the zoo!\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- 4. WHAT NEXT? -->\r\n          <div class=\"storybook-flip-card reveal-on-scroll\" style=\"transition-delay: 0.3s; border-style: dashed;\">\r\n            <div class=\"stage-number-tag\">STAGE 04<\/div>\r\n            <h3 class=\"stage-title\">WHAT NEXT? \u2753<\/h3>\r\n            <div class=\"stage-icon-circle\" style=\"background: var(--gold-light);\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"var(--gold)\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm1.07-7.75l-.9.92C12.45 11.9 12 12.5 12 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"stage-snippet\" style=\"font-weight: 700; color: var(--terracotta);\">\r\n              Discover the book gallery below \u2193\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 05 \u2014 THE COSTUME\r\n         ========================================================================== -->\r\n    <section id=\"costume\" class=\"section-costume\">\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"costume-grid\">\r\n          \r\n          <div class=\"costume-visual-box reveal-on-scroll\">\r\n            <img decoding=\"async\" class=\"costume-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/Picture1-1.png\" alt=\"Nico in Lion Costume\">\r\n            <div style=\"text-align: center; margin-top: 14px; font-family: var(--font-handwriting); font-size: 1.6rem; color: var(--terracotta);\">\r\n              \"The Lion of the Zoo\" \ud83e\udd81\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"costume-content-box reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-eyebrow\">THE TURNING POINT<\/div>\r\n            <h2 class=\"section-title\">FOR A WHILE, IT WORKED.<\/h2>\r\n\r\n            <p style=\"font-size: 1.15rem; color: var(--text-dark); line-height: 1.85; margin-bottom: 20px;\">\r\n              People crowded around him, smiling, pointing, laughing, and taking pictures.\r\n            <\/p>\r\n\r\n            <p style=\"font-size: 1.15rem; color: var(--text-dark); line-height: 1.85; margin-bottom: 24px;\">\r\n              Nico wasn't lonely anymore. He wasn't bored. People tossed him treats and scraps of food. He dressed as a lion for months and became excited each day!\r\n            <\/p>\r\n\r\n            <div class=\"transition-warning-pill\">\r\n              BUT THEN... The costume started falling apart.\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 11 \u2014 INSIDE THE BOOK (Horizontal Gallery Lightbox)\r\n         ========================================================================== -->\r\n    <!--<section id=\"inside-book\" class=\"section-inside-book\">-->\r\n    <!--  <div class=\"container\">-->\r\n        \r\n    <!--    <div class=\"inside-header reveal-on-scroll\">-->\r\n    <!--      <div class=\"section-eyebrow\">BOOK PREVIEW GALLERY<\/div>-->\r\n    <!--      <h2 class=\"section-title\">TAKE A LOOK INSIDE<\/h2>-->\r\n    <!--      <p style=\"font-size: 1.15rem; color: var(--text-body);\">-->\r\n    <!--        A little glimpse into Nico's world.-->\r\n    <!--      <\/p>-->\r\n    <!--    <\/div>-->\r\n\r\n    <!--    <div class=\"horizontal-gallery-scroll reveal-on-scroll\">-->\r\n          \r\n          <!-- COVER -->\r\n    <!--      <div class=\"book-page-card\" data-img=\"https:\/\/images.unsplash.com\/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=1200&q=80\" data-caption=\"Front Cover \u2014 That One Puppy\">-->\r\n    <!--        <div class=\"page-zoom-hover-icon\">\ud83d\udd0d<\/div>-->\r\n    <!--        <img decoding=\"async\" class=\"book-page-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=800&q=80\" alt=\"Book Cover Artwork\">-->\r\n    <!--        <div class=\"page-label-tag\">[ COVER ]<\/div>-->\r\n    <!--      <\/div>-->\r\n\r\n          <!-- PAGE 01 -->\r\n    <!--      <div class=\"book-page-card\" data-img=\"https:\/\/images.unsplash.com\/photo-1583511655857-d19b40a7a54e?auto=format&fit=crop&w=1200&q=80\" data-caption=\"Page 01 \u2014 Nico's Search for Hot Dogs\">-->\r\n    <!--        <div class=\"page-zoom-hover-icon\">\ud83d\udd0d<\/div>-->\r\n    <!--        <img decoding=\"async\" class=\"book-page-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1583511655857-d19b40a7a54e?auto=format&fit=crop&w=800&q=80\" alt=\"Page 01 Manuscript Art\">-->\r\n    <!--        <div class=\"page-label-tag\">[ PAGE 01 ]<\/div>-->\r\n    <!--      <\/div>-->\r\n\r\n          <!-- PAGE 02 -->\r\n    <!--      <div class=\"book-page-card\" data-img=\"https:\/\/images.unsplash.com\/photo-1537151608828-ea2b11777ee8?auto=format&fit=crop&w=1200&q=80\" data-caption=\"Page 02 \u2014 The Lion Costume Adventure\">-->\r\n    <!--        <div class=\"page-zoom-hover-icon\">\ud83d\udd0d<\/div>-->\r\n    <!--        <img decoding=\"async\" class=\"book-page-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1537151608828-ea2b11777ee8?auto=format&fit=crop&w=800&q=80\" alt=\"Page 02 Manuscript Art\">-->\r\n    <!--        <div class=\"page-label-tag\">[ PAGE 02 ]<\/div>-->\r\n    <!--      <\/div>-->\r\n\r\n          <!-- PAGE 03 -->\r\n    <!--      <div class=\"book-page-card\" data-img=\"https:\/\/images.unsplash.com\/photo-1477959858617-67f30ac72604?auto=format&fit=crop&w=1200&q=80\" data-caption=\"Page 03 \u2014 Walking through the Big City\">-->\r\n    <!--        <div class=\"page-zoom-hover-icon\">\ud83d\udd0d<\/div>-->\r\n    <!--        <img decoding=\"async\" class=\"book-page-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1477959858617-67f30ac72604?auto=format&fit=crop&w=800&q=80\" alt=\"Page 03 Manuscript Art\">-->\r\n    <!--        <div class=\"page-label-tag\">[ PAGE 03 ]<\/div>-->\r\n    <!--      <\/div>-->\r\n\r\n          <!-- PAGE 04 -->\r\n    <!--      <div class=\"book-page-card\" data-img=\"https:\/\/images.unsplash.com\/photo-1544717305-2782549b5136?auto=format&fit=crop&w=1200&q=80\" data-caption=\"Page 04 \u2014 Finding Hope & Adoption\">-->\r\n    <!--        <div class=\"page-zoom-hover-icon\">\ud83d\udd0d<\/div>-->\r\n    <!--        <img decoding=\"async\" class=\"book-page-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1544717305-2782549b5136?auto=format&fit=crop&w=800&q=80\" alt=\"Page 04 Manuscript Art\">-->\r\n    <!--        <div class=\"page-label-tag\">[ PAGE 04 ]<\/div>-->\r\n    <!--      <\/div>-->\r\n\r\n    <!--    <\/div>-->\r\n\r\n    <!--  <\/div>-->\r\n    <!--<\/section>-->\r\n\r\n    <!-- Full Screen Lightbox Modal -->\r\n    <div id=\"lightbox-modal\" class=\"lightbox-modal\">\r\n      <div class=\"lightbox-content-box\">\r\n        <button id=\"lightbox-close\" class=\"lightbox-close-btn\">\u2715<\/button>\r\n        <img decoding=\"async\" id=\"lightbox-img\" class=\"lightbox-img\" src=\"\" alt=\"Enlarged Book Preview\">\r\n        <div id=\"lightbox-caption\" class=\"lightbox-caption\"><\/div>\r\n      <\/div>\r\n    <\/div>\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 Gallery Script\r\n      const lightboxModal = document.getElementById('lightbox-modal');\r\n      const lightboxImg = document.getElementById('lightbox-img');\r\n      const lightboxCaption = document.getElementById('lightbox-caption');\r\n      const lightboxClose = document.getElementById('lightbox-close');\r\n\r\n      document.querySelectorAll('.book-page-card').forEach(card => {\r\n        card.addEventListener('click', () => {\r\n          const fullImgSrc = card.getAttribute('data-img');\r\n          const captionText = card.getAttribute('data-caption');\r\n          \r\n          lightboxImg.src = fullImgSrc;\r\n          lightboxCaption.textContent = captionText;\r\n          lightboxModal.classList.add('active');\r\n        });\r\n      });\r\n\r\n      lightboxClose.addEventListener('click', () => {\r\n        lightboxModal.classList.remove('active');\r\n      });\r\n\r\n      lightboxModal.addEventListener('click', (e) => {\r\n        if (e.target === lightboxModal) {\r\n          lightboxModal.classList.remove('active');\r\n        }\r\n      });\r\n\r\n      \/\/ Smooth scroll for anchor links\r\n      document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n        anchor.addEventListener('click', function(e) {\r\n          e.preventDefault();\r\n          const targetId = this.getAttribute('href');\r\n          if (targetId === '#') return;\r\n          const targetElement = document.querySelector(targetId);\r\n          if (targetElement) {\r\n            targetElement.scrollIntoView({\r\n              behavior: 'smooth',\r\n              block: 'start'\r\n            });\r\n          }\r\n        });\r\n      });\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2726 OPEN THE BOOK THAT ONE PUPPY A story about getting lost, finding hope, and discovering that you are never [&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-267","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/267","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=267"}],"version-history":[{"count":37,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/267\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/267\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/media?parent=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}