{"id":293,"date":"2026-08-25T19:20:22","date_gmt":"2026-08-25T19:20:22","guid":{"rendered":"https:\/\/demowebdesign.live\/christiana\/?page_id=293"},"modified":"2026-08-25T20:11:34","modified_gmt":"2026-08-25T20:11:34","slug":"send-a-note","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/christiana\/send-a-note\/","title":{"rendered":"Send A Note"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"293\" class=\"elementor elementor-293\">\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=\"Send a note to author Christiana Jones Marzett. Have a question, story idea, event inquiry, or simply want to say hello? Leave your message here.\">\r\n\r\n  <!-- Google Fonts -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@500;600;700&family=Cinzel:wght@600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    \/* ==========================================================================\r\n       DESIGN SYSTEM & GLOBAL VARIABLES (Luxury Storybook Theme)\r\n       ========================================================================== *\/\r\n    :root {\r\n      --bg-cream: #FAF6F0;\r\n      --bg-paper: #F5EEE6;\r\n      --bg-paper-light: #FDFBF7;\r\n      --bg-dark: #14110F;\r\n      --bg-dark-card: #1E1A17;\r\n      \r\n      --terracotta: #D9531E;\r\n      --terracotta-dark: #B54013;\r\n      --terracotta-light: #F8EBE4;\r\n      --terracotta-glow: rgba(217, 83, 30, 0.25);\r\n      \r\n      --gold: #D4AF37;\r\n      --gold-light: #F9F2D8;\r\n      --gold-glow: rgba(212, 175, 55, 0.35);\r\n      \r\n      --text-dark: #1A1614;\r\n      --text-body: #4A443F;\r\n      --text-muted: #7A7067;\r\n      --text-light: #F4ECE1;\r\n      \r\n      --border-light: #E8DFD5;\r\n      --border-accent: #D8C9B7;\r\n      \r\n      --font-heading: 'Cinzel', serif;\r\n      --font-serif: 'Playfair Display', serif;\r\n      --font-body: 'Plus Jakarta Sans', sans-serif;\r\n      --font-handwriting: 'Caveat', cursive;\r\n      \r\n      --shadow-sm: 0 4px 14px rgba(20, 17, 15, 0.05);\r\n      --shadow-md: 0 12px 32px rgba(20, 17, 15, 0.09);\r\n      --shadow-lg: 0 22px 50px rgba(20, 17, 15, 0.15);\r\n      --shadow-terracotta: 0 14px 35px rgba(217, 83, 30, 0.3);\r\n      \r\n      --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    \/* CSS Reset *\/\r\n    *, *::before, *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n      font-size: 16px;\r\n    }\r\n\r\n    body {\r\n      background-color: var(--bg-cream);\r\n      color: var(--text-body);\r\n      font-family: var(--font-body);\r\n      line-height: 1.7;\r\n      overflow-x: hidden;\r\n      -webkit-font-smoothing: antialiased;\r\n    }\r\n\r\n    img {\r\n      max-width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    a {\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n\r\n    ::selection {\r\n      background-color: var(--terracotta);\r\n      color: #FFFFFF;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1240px;\r\n      margin: 0 auto;\r\n      padding: 0 24px;\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .section-eyebrow {\r\n      font-family: var(--font-body);\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: var(--terracotta);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .section-eyebrow::before {\r\n      content: '\u2726';\r\n      color: var(--gold);\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(2.3rem, 4.5vw, 3.8rem);\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      line-height: 1.18;\r\n      margin-bottom: 22px;\r\n      letter-spacing: -0.01em;\r\n    }\r\n\r\n    .btn-primary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      padding: 16px 36px;\r\n      border-radius: 50px;\r\n      font-weight: 700;\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      box-shadow: var(--shadow-terracotta);\r\n      transition: all 0.4s var(--transition-smooth);\r\n      border: 2px solid transparent;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background: var(--terracotta-dark);\r\n      transform: translateY(-4px) scale(1.02);\r\n      box-shadow: 0 18px 40px rgba(217, 83, 30, 0.38);\r\n    }\r\n\r\n    \/* Keyframes *\/\r\n    @keyframes floatSoft {\r\n      0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n      50% { transform: translateY(-12px) rotate(3deg); }\r\n    }\r\n\r\n    @keyframes rotateCompass {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    @keyframes flyAirplane {\r\n      0% { transform: translate(0, 0) scale(1); opacity: 1; }\r\n      50% { transform: translate(150px, -120px) scale(1.3) rotate(15deg); opacity: 0.8; }\r\n      100% { transform: translate(350px, -250px) scale(0.5) rotate(30deg); opacity: 0; }\r\n    }\r\n\r\n    \/* Alternating Paw Animation Keyframes *\/\r\n    @keyframes pawStepLeft {\r\n      0% { opacity: 0; transform: translate(-20px, 10px) scale(0.8); }\r\n      50% { opacity: 0.85; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.2; transform: translate(15px, -10px) scale(0.9); }\r\n    }\r\n\r\n    @keyframes pawStepRight {\r\n      0% { opacity: 0; transform: translate(20px, 10px) scale(0.8); }\r\n      50% { opacity: 0.85; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.2; transform: translate(-15px, -10px) scale(0.9); }\r\n    }\r\n\r\n    \/* Alternating Paw Trails Containers *\/\r\n    .paw-trail-left {\r\n      position: absolute;\r\n      left: 25px;\r\n      top: 10%;\r\n      bottom: 10%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-around;\r\n      pointer-events: none;\r\n      z-index: 3;\r\n    }\r\n\r\n    .paw-trail-right {\r\n      position: absolute;\r\n      right: 25px;\r\n      top: 10%;\r\n      bottom: 10%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-around;\r\n      pointer-events: none;\r\n      z-index: 3;\r\n    }\r\n\r\n    .paw-icon {\r\n      width: 34px;\r\n      height: 34px;\r\n      fill: var(--terracotta);\r\n      opacity: 0.45;\r\n      filter: drop-shadow(0 2px 5px rgba(217, 83, 30, 0.25));\r\n    }\r\n\r\n    .paw-trail-left .paw-icon {\r\n      animation: pawStepLeft 4.5s ease-in-out infinite alternate;\r\n    }\r\n\r\n    .paw-trail-right .paw-icon {\r\n      animation: pawStepRight 4.5s ease-in-out infinite alternate;\r\n      fill: var(--gold);\r\n    }\r\n\r\n    .paw-trail-left .paw-icon:nth-child(1) { animation-delay: 0s; transform: rotate(-15deg); }\r\n    .paw-trail-left .paw-icon:nth-child(2) { animation-delay: 0.9s; transform: rotate(10deg) translateX(15px); }\r\n    .paw-trail-left .paw-icon:nth-child(3) { animation-delay: 1.8s; transform: rotate(-20deg); }\r\n    .paw-trail-left .paw-icon:nth-child(4) { animation-delay: 2.7s; transform: rotate(15deg) translateX(20px); }\r\n\r\n    .paw-trail-right .paw-icon:nth-child(1) { animation-delay: 0.4s; transform: rotate(20deg); }\r\n    .paw-trail-right .paw-icon:nth-child(2) { animation-delay: 1.2s; transform: rotate(-10deg) translateX(-15px); }\r\n    .paw-trail-right .paw-icon:nth-child(3) { animation-delay: 2.0s; transform: rotate(25deg); }\r\n    .paw-trail-right .paw-icon:nth-child(4) { animation-delay: 2.8s; transform: rotate(-15deg) translateX(-20px); }\r\n\r\n    .reveal-on-scroll {\r\n      opacity: 0;\r\n      transform: translateY(35px);\r\n      transition: opacity 0.85s var(--transition-smooth), transform 0.85s var(--transition-smooth);\r\n    }\r\n\r\n    .reveal-on-scroll.visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 01 \u2014 HERO (Send A Note)\r\n       ========================================================================== *\/\r\n    .contact-hero-section {\r\n      min-height: 90vh;\r\n      position: relative;\r\n      padding: 100px 0 120px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      background: radial-gradient(circle at 10% 20%, rgba(249, 242, 216, 0.65) 0%, rgba(250, 246, 240, 1) 75%);\r\n      border-bottom: 1px solid var(--border-light);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .contact-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    .contact-hero-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(3.5rem, 6vw, 5.5rem);\r\n      font-weight: 900;\r\n      color: var(--text-dark);\r\n      line-height: 1.05;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 22px;\r\n    }\r\n\r\n    .contact-hero-subtext {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.45rem;\r\n      color: var(--text-body);\r\n      line-height: 1.6;\r\n      margin-bottom: 30px;\r\n      border-left: 4px solid var(--gold);\r\n      padding-left: 20px;\r\n      font-style: italic;\r\n    }\r\n\r\n    \/* Hero Floating Envelope Visual Stage *\/\r\n    .envelope-stage {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .floating-envelope-card {\r\n      position: relative;\r\n      width: 100%;\r\n      max-width: 420px;\r\n      background: #FFFDF8;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 20px;\r\n      padding: 40px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(3deg);\r\n      transition: transform 0.5s ease;\r\n      background-image: repeating-linear-gradient(#FFFDF8, #FFFDF8 31px, #EADFCE 32px);\r\n    }\r\n\r\n    .floating-envelope-card:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n    }\r\n\r\n    .wax-seal-badge {\r\n      position: absolute;\r\n      top: -20px;\r\n      right: -15px;\r\n      width: 80px;\r\n      height: 80px;\r\n      border-radius: 50%;\r\n      background: radial-gradient(circle, #D9531E 0%, #B54013 100%);\r\n      color: #FFFFFF;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-family: var(--font-heading);\r\n      font-size: 1.8rem;\r\n      box-shadow: 0 10px 25px rgba(217, 83, 30, 0.4);\r\n      border: 3px solid var(--gold);\r\n    }\r\n\r\n    \/* Floating Hero SVGs *\/\r\n    .hero-svg-compass {\r\n      position: absolute;\r\n      top: -35px;\r\n      left: -25px;\r\n      width: 75px;\r\n      height: 75px;\r\n      animation: rotateCompass 35s linear infinite;\r\n    }\r\n\r\n    .hero-svg-airplane {\r\n      position: absolute;\r\n      bottom: -30px;\r\n      right: -30px;\r\n      width: 65px;\r\n      animation: floatSoft 7s ease-in-out infinite;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 02 \u2014 A LITTLE HELLO (50\/50 Split)\r\n       ========================================================================== *\/\r\n    .section-little-hello {\r\n      padding: 120px 0;\r\n      background: var(--bg-paper-light);\r\n      position: relative;\r\n      border-bottom: 1px solid var(--border-light);\r\n    }\r\n\r\n    .hello-split-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .portrait-card-wrapper {\r\n      position: relative;\r\n      border-radius: 24px;\r\n      overflow: hidden;\r\n      box-shadow: var(--shadow-lg);\r\n      border: 1px solid var(--border-accent);\r\n      height: 480px;\r\n    }\r\n\r\n    .portrait-card-wrapper img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n    }\r\n\r\n    .hello-content-box {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 24px;\r\n      padding: 45px;\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 04 \u2014 WHAT WOULD YOU LIKE TO SAY? (Selectable Topic Cards)\r\n       ========================================================================== *\/\r\n    .section-mind-topics {\r\n      padding: 100px 0 40px 0;\r\n      background: var(--bg-cream);\r\n      text-align: center;\r\n    }\r\n\r\n    .topic-cards-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 24px;\r\n      margin-top: 40px;\r\n    }\r\n\r\n    .topic-select-card {\r\n      background: #FFFFFF;\r\n      border: 1.5px solid var(--border-accent);\r\n      border-radius: 20px;\r\n      padding: 30px 20px;\r\n      cursor: pointer;\r\n      box-shadow: var(--shadow-sm);\r\n      transition: all 0.4s var(--transition-smooth);\r\n    }\r\n\r\n    .topic-select-card:hover,\r\n    .topic-select-card.active {\r\n      border-color: var(--terracotta);\r\n      background: #FFFDF8;\r\n      box-shadow: 0 15px 35px var(--terracotta-glow);\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    .topic-icon-svg {\r\n      width: 48px;\r\n      height: 48px;\r\n      margin: 0 auto 16px auto;\r\n      fill: var(--terracotta);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .topic-select-card:hover .topic-icon-svg {\r\n      transform: scale(1.15);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 03 \u2014 MAIN CONTACT FORM (Floating Letter Station)\r\n       ========================================================================== *\/\r\n    .section-contact-form {\r\n      padding: 40px 0 130px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n    }\r\n\r\n    .floating-letter-station {\r\n      background: #FFFDF8;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 28px;\r\n      padding: 60px 70px;\r\n      box-shadow: var(--shadow-lg);\r\n      max-width: 860px;\r\n      margin: 0 auto;\r\n      position: relative;\r\n      transition: transform 0.6s var(--transition-smooth);\r\n    }\r\n\r\n    .letter-header-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.8rem;\r\n      font-weight: 800;\r\n      color: var(--terracotta);\r\n      letter-spacing: 0.1em;\r\n      margin-bottom: 35px;\r\n      border-bottom: 1px stroke var(--border-accent);\r\n      padding-bottom: 15px;\r\n    }\r\n\r\n    .form-line-group {\r\n      margin-bottom: 32px;\r\n    }\r\n\r\n    .form-line-label {\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.2em;\r\n      color: var(--text-dark);\r\n      text-transform: uppercase;\r\n      margin-bottom: 8px;\r\n      display: block;\r\n    }\r\n\r\n    .form-bottom-line-input {\r\n      width: 100%;\r\n      background: transparent;\r\n      border: none;\r\n      border-bottom: 2px solid var(--border-accent);\r\n      padding: 12px 0;\r\n      font-family: var(--font-body);\r\n      font-size: 1.15rem;\r\n      color: var(--text-dark);\r\n      outline: none;\r\n      transition: border-color 0.4s ease, box-shadow 0.4s ease;\r\n    }\r\n\r\n    .form-bottom-line-input:focus {\r\n      border-bottom-color: var(--gold);\r\n    }\r\n\r\n    .form-notebook-textarea {\r\n      width: 100%;\r\n      background: transparent;\r\n      border: none;\r\n      border-bottom: 2px solid var(--border-accent);\r\n      background-image: repeating-linear-gradient(transparent, transparent 33px, #EADFCE 34px);\r\n      line-height: 34px;\r\n      font-family: var(--font-body);\r\n      font-size: 1.15rem;\r\n      color: var(--text-dark);\r\n      min-height: 170px;\r\n      outline: none;\r\n      resize: vertical;\r\n      transition: border-color 0.4s ease;\r\n    }\r\n\r\n    .form-notebook-textarea:focus {\r\n      border-bottom-color: var(--gold);\r\n    }\r\n\r\n    \/* Airplane Flight Animation Element *\/\r\n    .flying-airplane-anim {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      width: 80px;\r\n      display: none;\r\n      z-index: 50;\r\n    }\r\n\r\n    .flying-airplane-anim.fly {\r\n      display: block;\r\n      animation: flyAirplane 1.8s ease-in-out forwards;\r\n    }\r\n\r\n    \/* Success Message Box *\/\r\n    .form-success-banner {\r\n      display: none;\r\n      text-align: center;\r\n      padding: 40px 20px;\r\n    }\r\n\r\n    \/* Responsive Queries *\/\r\n    @media (max-width: 1024px) {\r\n      .contact-hero-grid, .hello-split-grid, .topic-cards-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 40px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .floating-letter-station {\r\n        padding: 35px 25px;\r\n      }\r\n\r\n      .contact-hero-title {\r\n        font-size: 3rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <main>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 01 \u2014 HERO (Send A Note)\r\n         ========================================================================== -->\r\n    <section id=\"contact-hero\" class=\"contact-hero-section\">\r\n      \r\n      <!-- Alternating Paw Trail (Right Side) -->\r\n      <div class=\"paw-trail-right\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        <div class=\"contact-hero-grid\">\r\n          \r\n          <!-- Left Content -->\r\n          <div class=\"reveal-on-scroll visible\">\r\n            <div class=\"section-eyebrow\">LET'S KEEP THE STORY GOING<\/div>\r\n            <h1 class=\"contact-hero-title\">\r\n              SEND A<br>\r\n              <span style=\"color: var(--terracotta); font-family: var(--font-serif); font-style: italic;\">NOTE<\/span>\r\n            <\/h1>\r\n\r\n            <div class=\"contact-hero-subtext\">\r\n              Have a question, a story to share, or simply want to say hello? There's always room for one more note in the story.\r\n            <\/div>\r\n\r\n            <div>\r\n              <a href=\"#contact-station\" class=\"btn-primary\">\r\n                WRITE YOUR NOTE \u2193\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right Visual Stage: Open Envelope & Letter -->\r\n          <div class=\"envelope-stage reveal-on-scroll visible\" style=\"transition-delay: 0.2s;\">\r\n            \r\n            <!-- Animated Compass SVG -->\r\n            <div class=\"hero-svg-compass\">\r\n              <svg viewBox=\"0 0 100 100\" fill=\"none\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"44\" stroke=\"#D4AF37\" stroke-width=\"4\"\/>\r\n                <path d=\"M50 12 L50 88 M12 50 L88 50\" stroke=\"#D4AF37\" stroke-width=\"2\" stroke-dasharray=\"3 3\"\/>\r\n                <polygon points=\"50,18 58,50 50,44 42,50\" fill=\"#D9531E\"\/>\r\n                <polygon points=\"50,82 58,50 50,56 42,50\" fill=\"#1C1917\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Paper Airplane SVG -->\r\n            <div class=\"hero-svg-airplane\">\r\n              <svg viewBox=\"0 0 60 60\" fill=\"none\">\r\n                <path d=\"M10 30 L50 10 L30 50 L25 35 Z\" fill=\"#D9531E\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Envelope Card -->\r\n            <div class=\"floating-envelope-card\">\r\n              <div class=\"wax-seal-badge\">\u2726<\/div>\r\n\r\n              <div style=\"font-family: var(--font-heading); font-size: 1.3rem; color: var(--terracotta); margin-bottom: 12px; text-transform: uppercase;\">\r\n                DEAR STORYTELLER,\r\n              <\/div>\r\n              <p style=\"font-family: var(--font-handwriting); font-size: 1.8rem; color: var(--text-dark); line-height: 1.4;\">\r\n                \"Every message sent is a new adventure waiting to unfold...\" \ud83d\udc3e\r\n              <\/p>\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 A LITTLE HELLO (50\/50 Split)\r\n         ========================================================================== -->\r\n    <section id=\"little-hello\" class=\"section-little-hello\">\r\n      \r\n      <!-- Alternating Paw Trail (Left Side) -->\r\n      <div class=\"paw-trail-left\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"hello-split-grid\">\r\n          \r\n          <!-- Left: Portrait -->\r\n          <div class=\"portrait-card-wrapper reveal-on-scroll\">\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/SAN_converted.png\" alt=\"Christiana Jones Marzett Portrait\">\r\n          <\/div>\r\n\r\n          <!-- Right: Content -->\r\n          <div class=\"hello-content-box reveal-on-scroll\" style=\"transition-delay: 0.2s;\">\r\n            <div class=\"section-eyebrow\">A LITTLE HELLO<\/div>\r\n            <h2 class=\"section-title\" style=\"font-size: 2.2rem; margin-bottom: 18px;\">EVERY STORY STARTS WITH A HELLO<\/h2>\r\n\r\n            <p style=\"font-size: 1.15rem; color: var(--text-body); line-height: 1.8; margin-bottom: 24px;\">\r\n              Stories are built from conversations, questions, discoveries, and the people we meet along the way. I'd love to hear from you!\r\n            <\/p>\r\n\r\n            <div style=\"font-family: var(--font-serif); font-size: 1.3rem; color: var(--terracotta); font-style: italic;\">\r\n              \u2726 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u2726\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 WOULD YOU LIKE TO SAY? (Selectable Topic Cards)\r\n         ========================================================================== -->\r\n    <section id=\"topic-selection\" class=\"section-mind-topics\">\r\n      <div class=\"container\">\r\n        \r\n        <div style=\"max-width: 800px; margin: 0 auto;\" class=\"reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\">CHOOSE A TOPIC<\/div>\r\n          <h2 class=\"section-title\">WHAT'S ON YOUR MIND?<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"topic-cards-grid reveal-on-scroll\">\r\n          \r\n          <!-- CARD 1 \u2014 BOOKS -->\r\n          <div class=\"topic-select-card\" data-subject=\"Question About the Book\">\r\n            <svg class=\"topic-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z\"\/><\/svg>\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.2rem; color: var(--text-dark); font-weight: 800;\">BOOKS<\/div>\r\n            <div style=\"font-size: 0.85rem; color: var(--text-muted); margin-top: 4px;\">Book inquiries & copies<\/div>\r\n          <\/div>\r\n\r\n          <!-- CARD 2 \u2014 EVENTS -->\r\n          <div class=\"topic-select-card\" data-subject=\"Event Inquiry\">\r\n            <svg class=\"topic-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10z\"\/><\/svg>\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.2rem; color: var(--text-dark); font-weight: 800;\">EVENTS<\/div>\r\n            <div style=\"font-size: 0.85rem; color: var(--text-muted); margin-top: 4px;\">Readings & school visits<\/div>\r\n          <\/div>\r\n\r\n          <!-- CARD 3 \u2014 STORIES -->\r\n          <div class=\"topic-select-card\" data-subject=\"Story \/ Message\">\r\n            <svg class=\"topic-icon-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 style=\"font-family: var(--font-heading); font-size: 1.2rem; color: var(--text-dark); font-weight: 800;\">STORIES<\/div>\r\n            <div style=\"font-size: 0.85rem; color: var(--text-muted); margin-top: 4px;\">Share your story ideas<\/div>\r\n          <\/div>\r\n\r\n          <!-- CARD 4 \u2014 JUST HELLO -->\r\n          <div class=\"topic-select-card\" data-subject=\"Hello\">\r\n            <svg class=\"topic-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/><\/svg>\r\n            <div style=\"font-family: var(--font-heading); font-size: 1.2rem; color: var(--text-dark); font-weight: 800;\">JUST HELLO<\/div>\r\n            <div style=\"font-size: 0.85rem; color: var(--text-muted); margin-top: 4px;\">Say a quick hello!<\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 03 \u2014 MAIN CONTACT FORM (Floating Letter Station)\r\n         ========================================================================== -->\r\n    <section id=\"contact-station\" class=\"section-contact-form\">\r\n      <div class=\"container\">\r\n        \r\n        <div id=\"letter-card\" class=\"floating-letter-station reveal-on-scroll\">\r\n          \r\n          <!-- Flying Airplane Graphic -->\r\n          <div id=\"flying-airplane\" class=\"flying-airplane-anim\">\r\n            <svg viewBox=\"0 0 60 60\" fill=\"none\">\r\n              <path d=\"M10 30 L50 10 L30 50 L25 35 Z\" fill=\"#D9531E\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <form id=\"contact-form\" onsubmit=\"return handleFormSubmit(event)\">\r\n            \r\n            <div class=\"letter-header-title\">\r\n              DEAR CHRISTIANA,\r\n            <\/div>\r\n\r\n            <!-- NAME -->\r\n            <div class=\"form-line-group\">\r\n              <label class=\"form-line-label\" for=\"user-name\">YOUR NAME<\/label>\r\n              <input id=\"user-name\" type=\"text\" class=\"form-bottom-line-input\" placeholder=\"Your name\" required>\r\n            <\/div>\r\n\r\n            <!-- EMAIL -->\r\n            <div class=\"form-line-group\">\r\n              <label class=\"form-line-label\" for=\"user-email\">YOUR EMAIL<\/label>\r\n              <input id=\"user-email\" type=\"email\" class=\"form-bottom-line-input\" placeholder=\"Your email address\" required>\r\n            <\/div>\r\n\r\n            <!-- SUBJECT -->\r\n            <div class=\"form-line-group\">\r\n              <label class=\"form-line-label\" for=\"user-subject\">WHAT IS YOUR NOTE ABOUT?<\/label>\r\n              <input id=\"user-subject\" type=\"text\" class=\"form-bottom-line-input\" placeholder=\"What is your note about?\" required>\r\n            <\/div>\r\n\r\n            <!-- MESSAGE -->\r\n            <div class=\"form-line-group\">\r\n              <label class=\"form-line-label\" for=\"user-message\">WHAT WOULD YOU LIKE TO SAY?<\/label>\r\n              <textarea id=\"user-message\" class=\"form-notebook-textarea\" placeholder=\"Write your message here...\" required><\/textarea>\r\n            <\/div>\r\n\r\n            <div style=\"text-align: right; margin-top: 35px;\">\r\n              <button type=\"submit\" class=\"btn-primary\">\r\n                SEND MY NOTE \u2192\r\n              <\/button>\r\n            <\/div>\r\n\r\n          <\/form>\r\n\r\n          <!-- Success State -->\r\n          <div id=\"success-banner\" class=\"form-success-banner\">\r\n            <div style=\"font-size: 3rem; margin-bottom: 12px;\">\u2708\ufe0f \ud83d\udc3e<\/div>\r\n            <h3 style=\"font-family: var(--font-heading); font-size: 2.2rem; color: var(--terracotta); margin-bottom: 10px;\">\r\n              YOUR NOTE IS ON ITS WAY!\r\n            <\/h3>\r\n            <p style=\"font-size: 1.15rem; color: var(--text-body);\">\r\n              Thank you for reaching out! Christiana will read your message soon.\r\n            <\/p>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/main>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      \/\/ Scroll Reveal Observer\r\n      const observerOptions = {\r\n        root: null,\r\n        rootMargin: '0px',\r\n        threshold: 0.15\r\n      };\r\n\r\n      const revealObserver = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('visible');\r\n          }\r\n        });\r\n      }, observerOptions);\r\n\r\n      document.querySelectorAll('.reveal-on-scroll').forEach(el => {\r\n        revealObserver.observe(el);\r\n      });\r\n\r\n      \/\/ Interactive Topic Card Selectors\r\n      const topicCards = document.querySelectorAll('.topic-select-card');\r\n      const subjectInput = document.getElementById('user-subject');\r\n      const contactStation = document.getElementById('contact-station');\r\n\r\n      topicCards.forEach(card => {\r\n        card.addEventListener('click', () => {\r\n          topicCards.forEach(c => c.classList.remove('active'));\r\n          card.classList.add('active');\r\n\r\n          const chosenSubject = card.getAttribute('data-subject');\r\n          if (subjectInput) {\r\n            subjectInput.value = chosenSubject;\r\n          }\r\n\r\n          \/\/ Smooth scroll to form station\r\n          if (contactStation) {\r\n            contactStation.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n          }\r\n        });\r\n      });\r\n    });\r\n\r\n    \/\/ Form Submit Handler & Airplane Animation\r\n    function handleFormSubmit(e) {\r\n      e.preventDefault();\r\n      \r\n      const letterCard = document.getElementById('letter-card');\r\n      const flyingAirplane = document.getElementById('flying-airplane');\r\n      const contactForm = document.getElementById('contact-form');\r\n      const successBanner = document.getElementById('success-banner');\r\n\r\n      \/\/ Lift letter card slightly\r\n      letterCard.style.transform = 'translateY(-20px)';\r\n\r\n      \/\/ Trigger airplane flight\r\n      flyingAirplane.classList.add('fly');\r\n\r\n      setTimeout(() => {\r\n        contactForm.style.display = 'none';\r\n        successBanner.style.display = 'block';\r\n        letterCard.style.transform = 'translateY(0)';\r\n      }, 1400);\r\n\r\n      return false;\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>LET&#8217;S KEEP THE STORY GOING SEND A NOTE Have a question, a story to share, or simply want to say [&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-293","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/293","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=293"}],"version-history":[{"count":7,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/293\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/293\/revisions\/345"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/media?parent=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}